From 379ca3af720b490ba406fcaa6502e84983c6513c Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Wed, 11 Feb 2026 12:30:10 +0530 Subject: [PATCH 01/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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/84] 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 44592f8bd4f1c37515ceaf199ff9ee24f39fa01e Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Sun, 22 Feb 2026 13:21:37 +0530 Subject: [PATCH 59/84] fixes pages for features and theming { "group": "Features", "pages": [ { "group": "Chat", "pages": [ "ui-kit/react/core-features", "ui-kit/react/extensions", "ui-kit/react/ai-features" ] }, "ui-kit/react/call-features" ] }, { "group": "Theming", "pages": [ "ui-kit/react/theme", "ui-kit/react/theme/color-resources", "ui-kit/react/theme/message-bubble-styling", "ui-kit/react/localize", "ui-kit/react/sound-manager" ] }, --- ui-kit/react/ai-features.mdx | 275 ++++-- ui-kit/react/call-features.mdx | 309 +++++-- ui-kit/react/core-features.mdx | 564 +++++++++--- ui-kit/react/extensions.mdx | 410 ++++++--- ui-kit/react/localize.mdx | 662 +++++++------- ui-kit/react/sound-manager.mdx | 190 ++-- ui-kit/react/theme.mdx | 480 +++++----- ui-kit/react/theme/color-resources.mdx | 239 ++--- ui-kit/react/theme/message-bubble-styling.mdx | 828 +++++++----------- 9 files changed, 2224 insertions(+), 1733 deletions(-) diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index d35151fc1..202a8cec3 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -3,100 +3,245 @@ title: "Smart Chat Features" 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 */} - -**Quick Reference for AI Agents & Developers** +Enable CometChat AI features in the Dashboard and surface them in your React UI Kit chat UI. This page is for developers who want Conversation Starter, Smart Replies, and Conversation Summary with minimal setup. -Key components for AI features: -- **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) +## When to use this -AI features are enabled via the [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) — no additional code required once activated. - +- You want AI-generated opening messages for new conversations. +- You want AI-generated reply suggestions in the message composer. +- You want AI-generated conversation summaries for long chats. +- You want these features to appear automatically in UI Kit components. +- You want to enable or disable AI features from the CometChat Dashboard. - -**AI Agent Component Spec** +## Prerequisites -**Package:** `@cometchat/chat-uikit-react` -**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + AI features enabled in Dashboard -**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 - +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering UI Kit components. +- AI features enabled in the CometChat Dashboard under [AI User Copilot overview](/fundamentals/ai-user-copilot/overview). -## Overview +## Quick start -CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the React UI Kit achieves these features. +1. Enable **Conversation Starter**, **Smart Replies**, and **Conversation Summary** in the CometChat Dashboard. Use [AI User Copilot overview](/fundamentals/ai-user-copilot/overview). +2. Install the UI Kit package. -## Smart Chat Features +```bash +npm install @cometchat/chat-uikit-react +``` -### Conversation Starter +What this does: Installs the React UI Kit package. -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. +3. Create `src/cometchat.ts` and initialize the UI Kit. -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). +```ts +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -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. +export async function initCometChat() { + const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); - - - + await CometChatUIKit.init(UIKitSettings); + await CometChatUIKit.login("UID"); +} +``` -### Smart Replies +What this does: Initializes CometChat UI Kit and logs in a user. -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. +4. Update `src/App.tsx` to render the Message List and Message Composer. -For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatMessageComposer, + CometChatMessageList, +} from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; -Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/react/message-composer) Component of UI Kits. +export default function App() { + const [chatUser, setChatUser] = React.useState(null); - - - + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ( +
+ + +
+ ); +} +``` + +What this does: Renders the UI Kit components where AI features appear. + +5. Replace `APP_ID`, `REGION`, `AUTH_KEY`, `UID`, and `TARGET_UID` with real values. +6. Run your app and verify AI suggestions appear in the message list and composer. + +## Core concepts + + +**Quick Reference for AI Agents & Developers** -### Conversation Summary +Key components for AI features: +- **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) -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. +AI features are enabled via the [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) and auto-integrate into UI Kit components. + + +- Conversation Starter: AI-generated opening lines shown at the start of a new chat. +- Smart Replies: AI-generated reply suggestions shown in the message composer action sheet. +- Conversation Summary: AI-generated summary of a long conversation shown in the message composer action sheet. +- Auto-integration: Once enabled in the Dashboard, these features appear automatically in UI Kit components. + +## Implementation + +### Conversation Starter in Message List + +What you’re changing: Render the message list so Conversation Starter can appear. +File: `src/App.tsx` +Applies to: `CometChatMessageList` +Default behavior: Shows AI conversation starters when a new chat begins. +Override: Enable or disable Conversation Starter in the CometChat Dashboard. +Verify: When you open a new chat, suggested opening lines appear. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageList } from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function App() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ( +
+ +
+ ); +} +``` + +What this does: Renders the message list where Conversation Starter suggestions appear. -For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). + + + -Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/react/message-composer) Component of UI Kits. +### Smart Replies and Conversation Summary in Message Composer + +What you’re changing: Render the message composer so Smart Replies and Conversation Summary appear. +File: `src/App.tsx` +Applies to: `CometChatMessageComposer` +Default behavior: Shows Smart Replies and Conversation Summary in the action sheet. +Override: Enable or disable Smart Replies and Conversation Summary in the CometChat Dashboard. +Verify: The composer action sheet shows reply suggestions and summary options. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function App() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ( +
+ +
+ ); +} +``` + +What this does: Renders the message composer where Smart Replies and Conversation Summary appear. + + + + - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Enable Conversation Starter | CometChat Dashboard | AI User Copilot toggle | Enable **Conversation Starter** in [AI User Copilot overview](/fundamentals/ai-user-copilot/overview) | +| Enable Smart Replies | CometChat Dashboard | AI User Copilot toggle | Enable **Smart Replies** in [AI User Copilot overview](/fundamentals/ai-user-copilot/overview) | +| Enable Conversation Summary | CometChat Dashboard | AI User Copilot toggle | Enable **Conversation Summary** in [AI User Copilot overview](/fundamentals/ai-user-copilot/overview) | +| Show Conversation Starter UI | `CometChatMessageList` | Component render | `` | +| Show Smart Replies and Summary UI | `CometChatMessageComposer` | Component render | `` | + +## Common pitfalls and fixes | 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 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) | +| AI features not appearing | Feature not activated in the CometChat Dashboard | Enable the feature in [AI User Copilot overview](/fundamentals/ai-user-copilot/overview). | +| Component does not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering UI Kit components. | +| Component renders but no AI suggestions | User not logged in | Call `CometChatUIKit.login("UID")` after init. | +| Conversation Starter not showing | Feature not enabled or no conversation context | Enable [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and start a new chat. | +| Smart Replies not appearing | Feature not enabled | Enable [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). | +| Conversation Summary not appearing | Feature not enabled | Enable [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). | +| SSR hydration error | UI Kit uses browser APIs | Render UI Kit components in `useEffect` or use `ssr: false` in Next.js. | - - +## FAQ ---- +**Do I need to write custom code for AI features?** +No. Once enabled in the Dashboard, they auto-integrate into UI Kit components. + +**Where do Smart Replies and Conversation Summary appear?** +They appear in the action sheet of [Message Composer](/ui-kit/react/message-composer). + +**Where do Conversation Starter suggestions appear?** +They appear in [Message List](/ui-kit/react/message-list) when a new conversation starts. + +## Next steps -## Next Steps - - - - Add an AI-powered assistant to your chat - - - Customize the message list where AI features appear - - - Customize the composer with Smart Replies and Summary - - - Explore core chat features like messaging and reactions - - +- [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) +- [Message List](/ui-kit/react/message-list) +- [Message Composer](/ui-kit/react/message-composer) diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx index c1efbe75b..0c2907292 100644 --- a/ui-kit/react/call-features.mdx +++ b/ui-kit/react/call-features.mdx @@ -3,7 +3,97 @@ title: "Call" description: "Overview of CometChat's audio and video calling features including incoming calls, outgoing calls, and call logs — with the UI Kit components that power each feature." --- -{/* TL;DR for Agents and Quick Reference */} +Add audio and video calling to your React UI Kit chat experience. This page is for developers who want a clear, end-to-end setup for call buttons, incoming/outgoing calls, and call logs. + +## When to use this + +- You want voice and video calls in 1:1 or group chats. +- You need incoming and outgoing call screens in the UI Kit. +- You want call history with call logs. +- You want call buttons inside your chat header. +- You plan to use the CometChat Calls SDK with the UI Kit. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- CometChat Calls SDK installed: `@cometchat/calls-sdk-javascript`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering UI Kit components. +- Calls SDK installation is required for call components to render and for call buttons to appear. + +## Quick start + +1. Install the UI Kit and Calls SDK. + +```bash +npm install @cometchat/chat-uikit-react @cometchat/calls-sdk-javascript +``` + +What this does: Installs the React UI Kit and Calls SDK packages. + +2. Initialize the UI Kit in `src/cometchat.ts`. + +```ts +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; + +export async function initCometChat() { + const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); + + await CometChatUIKit.init(UIKitSettings); + await CometChatUIKit.login("UID"); +} +``` + +What this does: Initializes the UI Kit and logs in a user. + +3. Mount call listeners and buttons in `src/App.tsx`. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatCallButtons, + CometChatIncomingCall, + CometChatMessageHeader, +} from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function App() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ( +
+ + + +
+ ); +} +``` + +What this does: Mounts the incoming call listener at the app level and renders call buttons for the active user. + +4. Run your app and verify call buttons appear and incoming calls are shown. + +## Core concepts + **Quick Reference for AI Agents & Developers** @@ -22,100 +112,205 @@ 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 +- Package: `@cometchat/chat-uikit-react` plus `@cometchat/calls-sdk-javascript` +- Required setup: `CometChatUIKit.init()` and `CometChatUIKit.login()` +- Primary components: `CometChatCallButtons`, `CometChatIncomingCall`, `CometChatOutgoingCall`, `CometChatCallLogs` +- Auto-detection: UI Kit detects the Calls SDK and enables call UI components -## Overview +- Calls SDK: The separate package that powers audio/video calling features. +- Call Buttons: The UI control used to initiate audio or video calls. +- Incoming Call: The UI shown when a call is received. +- Outgoing Call: The UI shown after a call is initiated. +- Call Logs: The UI listing past calls with metadata. -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. +## Implementation +### Install the Calls SDK - -**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 - -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. - -Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here's how you do it: - -Add the SDK files to your project's dependencies or libraries: +What you’re changing: Add the Calls SDK dependency required by call components. +File: `package.json` +Applies to: `@cometchat/calls-sdk-javascript` +Default behavior: UI Kit auto-detects the Calls SDK and enables call UI. +Override: None. +Verify: Call buttons appear after reinstall and app restart. ```bash npm install @cometchat/calls-sdk-javascript ``` -After adding this dependency, the React UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/react/call-buttons) component rendered in [MessageHeader](/ui-kit/react/message-header) Component. +What this does: Installs the Calls SDK so call UI components can render. + +### Render call buttons + +What you’re changing: Render call buttons for the active user or group. +File: `src/App.tsx` +Applies to: `CometChatCallButtons` +Default behavior: Shows voice and video call buttons. +Override: Use `hideVoiceCallButton` or `hideVideoCallButton` on the component. +Verify: Call buttons appear and initiate calls. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function CallButtonsDemo() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ; +} +``` + +What this does: Renders call buttons for the target user. -## Features +### Handle incoming calls + +What you’re changing: Mount the incoming call component at the app root. +File: `src/App.tsx` +Applies to: `CometChatIncomingCall` +Default behavior: Listens for incoming calls and shows an accept/decline screen. +Override: Use `onAccept` or `onDecline` props. +Verify: Incoming calls show the incoming call UI. -### Incoming Call +```tsx +import React from "react"; +import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; -The [Incoming Call](/ui-kit/react/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app. +export default function IncomingCallListener() { + return ; +} +``` -When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call. +What this does: Listens for incoming calls and shows the incoming call UI. -### Outgoing Call - -The [Outgoing Call](/ui-kit/react/outgoing-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status. +### Show outgoing call screen + +What you’re changing: Initiate a call and render the outgoing call UI. +File: `src/OutgoingCallDemo.tsx` +Applies to: `CometChatOutgoingCall`, `CometChat.initiateCall()` +Default behavior: Starts a call and shows the outgoing call screen until accepted or canceled. +Override: Use `onCallCanceled` on the component. +Verify: When you initiate a call, the outgoing call screen appears. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatOutgoingCall, + CometChatUIKitConstants, +} from "@cometchat/chat-uikit-react"; + +export default function OutgoingCallDemo() { + const [call, setCall] = React.useState(null); + + React.useEffect(() => { + const uid = "TARGET_UID"; + const callObject = new CometChat.Call( + uid, + CometChatUIKitConstants.MessageTypes.audio, + CometChatUIKitConstants.MessageReceiverType.user + ); + + CometChat.initiateCall(callObject) + .then((c) => setCall(c)) + .catch(console.error); + }, []); + + if (!call) return null; + + return ; +} +``` -Importantly, the Outgoing Call component is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user. +What this does: Initiates a call and renders the outgoing call UI for the initiated call. -### Call Logs +### Show call logs -[Call Logs](/ui-kit/react/call-logs) component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities. +What you’re changing: Render call history. +File: `src/CallLogsDemo.tsx` +Applies to: `CometChatCallLogs` +Default behavior: Shows call history for the logged-in user. +Override: Use `onItemClick` and `onCallButtonClicked` props to handle selection and callbacks. +Verify: Call logs render with timestamps and participants. + +```tsx +import React from "react"; +import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; + +export default function CallLogsDemo() { + return ; +} +``` + +What this does: Renders the call logs list for the current user. - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Hide voice call button | `CometChatCallButtons` | `hideVoiceCallButton` | `hideVoiceCallButton={true}` | +| Hide video call button | `CometChatCallButtons` | `hideVideoCallButton` | `hideVideoCallButton={true}` | +| Handle incoming call accept | `CometChatIncomingCall` | `onAccept` | `onAccept={() => ...}` | +| Handle incoming call decline | `CometChatIncomingCall` | `onDecline` | `onDecline={() => ...}` | +| Handle outgoing call cancel | `CometChatOutgoingCall` | `onCallCanceled` | `onCallCanceled={() => ...}` | +| Handle call log item selection | `CometChatCallLogs` | `onItemClick` | `onItemClick={(log) => ...}` | + +## Common pitfalls and fixes | 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) | +| Call buttons not appearing in Message Header | Calls SDK not installed | Install `@cometchat/calls-sdk-javascript` and restart the app. | +| Component does not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init. | +| Incoming call screen not showing | `CometChatIncomingCall` not mounted | Render it at the app root so it can listen for calls. | +| Outgoing call screen not showing | Call object not created or `CometChat.initiateCall()` not executed | Ensure you call `CometChat.initiateCall()` and pass the returned call to `CometChatOutgoingCall`. | +| SSR hydration error | UI Kit uses browser APIs | Render in `useEffect` or use `ssr: false` for Next.js. | - - +## FAQ ---- +**Do I need to install a separate SDK for calls?** +Yes. Install `@cometchat/calls-sdk-javascript` to enable call UI components. + +**Do call buttons appear automatically in Message Header?** +Yes. Once the Calls SDK is installed, the UI Kit can render call buttons in [Message Header](/ui-kit/react/message-header). + +**Where should I mount incoming call UI?** +Mount `CometChatIncomingCall` at the root so it can listen for incoming calls globally. + +## Next steps -## Next Steps - - - - Add audio and video call buttons to your chat - - - Handle incoming call notifications and UI - - - Display call history and details - - - Explore core chat features like messaging and reactions - - +- [Call Buttons](/ui-kit/react/call-buttons) +- [Incoming Call](/ui-kit/react/incoming-call) +- [Call Logs](/ui-kit/react/call-logs) diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index b3fe946d4..a307f76f9 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -3,7 +3,98 @@ title: "Core" description: "Overview of CometChat's core chat features including instant messaging, media sharing, read receipts, typing indicators, user presence, reactions, mentions, threaded conversations, search, and moderation — with the UI Kit components that power each feature." --- -{/* TL;DR for Agents and Quick Reference */} +Build the core CometChat chat experience in React with the UI Kit components that power messaging, media, receipts, presence, reactions, threads, search, and moderation. This page is for developers who want a complete, line-by-line implementation reference. + +## When to use this + +- You need a complete 1:1 or group chat surface with message list, header, and composer. +- You want built-in behaviors like read receipts, typing indicators, and user presence. +- You need media sharing, reactions, and quoted replies out of the box. +- You want mentions and threaded conversations in chats. +- You need conversation search and message moderation and reporting workflows. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- CometChat app credentials: `APP_ID`, `REGION`, and `AUTH_KEY` from the CometChat Dashboard, configured per [React.js Integration](/ui-kit/react/react-js-integration). +- UI Kit initialization and login must complete before rendering any UI Kit component: `CometChatUIKit.init()` and `CometChatUIKit.login()`. +- Moderation and report message require moderation rules and flagged message handling configured in [Moderation overview](/moderation/overview) and [Flagged Messages](/moderation/flagged-messages). + +## Quick start + +1. Install the UI Kit package. + +```bash +npm install @cometchat/chat-uikit-react +``` + +What this does: Installs the React UI Kit package. + +2. Create `src/cometchat.ts` and initialize the UI Kit. + +```ts +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; + +export async function initCometChat() { + const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); + + await CometChatUIKit.init(UIKitSettings); + await CometChatUIKit.login("UID"); +} +``` + +What this does: Initializes the UI Kit and logs in a user. + +3. Update `src/App.tsx` to render a direct chat view. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatMessageComposer, + CometChatMessageHeader, + CometChatMessageList, +} from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function App() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ( +
+ + + +
+ ); +} +``` + +What this does: Initializes CometChat, loads the target user, and renders the header, message list, and composer for a 1:1 chat. + +4. Replace `APP_ID`, `REGION`, `AUTH_KEY`, `UID`, and `TARGET_UID` with real values from your CometChat app. +5. Run your app and verify that you can send text and media messages and see read receipts. + +## Core concepts + **Quick Reference for AI Agents & Developers** @@ -22,26 +113,68 @@ Key components for core chat features: **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-` +- Package: `@cometchat/chat-uikit-react` +- Required setup: `CometChatUIKit.init()` and `CometChatUIKit.login()` +- Primary components: `CometChatConversations`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` +- CSS class prefix: `.cometchat-` -## Overview - -The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. - - -Here's how different UI Kit components work together to achieve CometChat's Core features: - - - -**Before using these components:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). - - -## Instant Messaging +- `CometChatUIKit.init()` and `CometChatUIKit.login()` must complete before any UI Kit component renders. +- `CometChat.User` and `CometChat.Group` are the required inputs for message components. +- `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` form the core chat surface. +- Message actions (reply, reaction, report) are available from the message actions menu in `CometChatMessageList`. + +## Implementation + +### Base 1:1 chat surface + +What you’re changing: Build the main 1:1 chat panel with header, message list, and composer. +File: `src/App.tsx` +Applies to: `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` +Default behavior: Renders the core chat surface and enables instant messaging, media sharing, read receipts, reactions, quoted replies, typing indicator, and presence for the active user chat. +Override: Use `hideReceipts`, `templates`, or `hideVoiceRecording` on the corresponding components. +Verify: You can send text and media, see receipt states, and use message actions such as reaction and reply. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatMessageComposer, + CometChatMessageHeader, + CometChatMessageList, +} from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function App() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ( +
+ + + +
+ ); +} +``` + +What this does: Initializes CometChat, loads the target user, and renders the core 1:1 chat UI. + +#### 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. @@ -49,213 +182,366 @@ At the heart of CometChat's functionality is the ability to support real-time te -| Components | Functionality | -| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Message Composer](/ui-kit/react/message-composer) | The [Message Composer](/ui-kit/react/message-composer) is a Component that enables users to write and send a variety of messages. | -| [Message List](/ui-kit/react/message-list) | The [Message List](/ui-kit/react/message-list) is a Component that renders a list of messages sent and messages received using Text Bubble. | +| Components | Functionality | +| --- | --- | +| [Message Composer](/ui-kit/react/message-composer) | Enables users to write and send a variety of messages. | +| [Message List](/ui-kit/react/message-list) | Renders a list of sent and received messages using text bubbles. | -## Media Sharing +#### Media Sharing -Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication. +Beyond text, CometChat allows users to share images, videos, audio files, and documents. -| Components | Functionality | -| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message Composer](/ui-kit/react/message-composer) | The [Message Composer](/ui-kit/react/message-composer) component includes an ActionSheet. This ActionSheet serves as a menu appearing over the app's context, offering various options for sharing media files. | -| [Message List](/ui-kit/react/message-list) | The [Message List](/ui-kit/react/message-list) component is responsible for rendering various Media Message bubbles, such as Image, File, Audio & Video Bubble. | +| Components | Functionality | +| --- | --- | +| [Message Composer](/ui-kit/react/message-composer) | Provides an action sheet for sharing media files. | +| [Message List](/ui-kit/react/message-list) | Renders image, file, audio, and video message bubbles. | -## Read Receipts +#### Read Receipts -CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages. +Read receipts show delivery and read status for messages. -| Components | Functionality | -| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that renders different types of message bubbles. Read receipt status is an integral part of all message bubbles, no matter the type and provides real-time updates about the status of the message. | -| Message Information | Message Information component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. | +| Components | Functionality | +| --- | --- | +| [Conversations](/ui-kit/react/conversations) | Shows delivery status of the last message in each conversation. | +| [Message List](/ui-kit/react/message-list) | Displays read receipt status on each message bubble. | +| Message Information | Provides per-message delivery and read status details. | -## Mark as Unread +#### Mark as Unread - Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off. +Mark as Unread lets users flag a conversation as unread and jump back to the first unread message. -| Components | Functionality | -| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) component listens to conversation updates and reflects the updated unread count in real-time. | +| Components | Functionality | +| --- | --- | +| [Message List](/ui-kit/react/message-list) | Provides the Mark as unread option in message actions and can start from the first unread message. | +| [Conversations](/ui-kit/react/conversations) | Updates and displays unread counts in real time. | -## Typing Indicator +#### Typing Indicator -The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid. +Typing indicators show when someone is actively typing. -| Components | Functionality | -| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message. | -| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of User or Groups in ToolBar. The Message Header also handles the typing indicator functionality. When a user or a member in a group is typing, the Message Header dynamically updates to display a `typing...` status in real-time. | +| Components | Functionality | +| --- | --- | +| [Conversations](/ui-kit/react/conversations) | Shows typing status in conversation list items. | +| [Message Header](/ui-kit/react/message-header) | Displays typing status in the header in real time. | -## User Presence +#### User Presence -CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times. +Presence shows whether a user is online or offline. -| Components | Functionality | -| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversations item also shows user presence information. | -| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of user/group. The Message Header also handles user presence information. | -| [Users](/ui-kit/react/users) | [Users](/ui-kit/react/users) renders list of users available in your app.It also responsible to render users presence information. | -| [Group Members](/ui-kit/react/group-members) | [Group Members](/ui-kit/react/group-members) renders list of users available in the group. The Group Members component also handles user presence information. | +| Components | Functionality | +| --- | --- | +| [Conversations](/ui-kit/react/conversations) | Shows presence indicators in conversation list items. | +| [Message Header](/ui-kit/react/message-header) | Shows presence for the active user or group. | +| [Users](/ui-kit/react/users) | Shows presence in the users list. | +| [Group Members](/ui-kit/react/group-members) | Shows presence for group members. | -## Reactions +#### Reactions -CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement. +Reactions let users respond to messages with emoji without typing a reply. -| Components | Functionality | -| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that renders different types of message bubbles. Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. | +| Components | Functionality | +| --- | --- | +| [Message List](/ui-kit/react/message-list) | Displays reactions on message bubbles. | + +#### Quoted Replies -## Mentions +Quoted replies let users reply to specific messages with context. + + + + -Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously. +| Components | Functionality | +| --- | --- | +| [Message List](/ui-kit/react/message-list) | Provides the Reply action for messages. | +| [Message Composer](/ui-kit/react/message-composer) | Displays the quoted message above the input field. | + +### Group chat with mentions + +What you’re changing: Render a group chat view that supports mentions. +File: `src/App.tsx` +Applies to: `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` +Default behavior: Mentions appear in the composer and message list, including group mentions like `@all`. +Override: Use `templates` for message rendering or `hideVoiceRecording` for input behavior. +Verify: Typing `@` shows mention suggestions and `@all` notifies the group. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatMessageComposer, + CometChatMessageHeader, + CometChatMessageList, +} from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function App() { + const [chatGroup, setChatGroup] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const group = await CometChat.getGroup("GUID"); + if (isMounted) setChatGroup(group); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatGroup) return null; + + return ( +
+ + + +
+ ); +} +``` + +What this does: Initializes CometChat, loads a group, and renders a group chat UI with mentions support. + +#### Mentions + +Mentions help users address individuals or groups like `@all` in chats. -| Components | Functionality | -| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. | -| [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. | +| Components | Functionality | +| --- | --- | +| [Conversations](/ui-kit/react/conversations) | Shows conversations where mentions occurred. | +| [Message Composer](/ui-kit/react/message-composer) | Enables tagging users and groups. | +| [Message List](/ui-kit/react/message-list) | Renders mentions in messages. | -## 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 supports group conversations for teams and communities. - + -| 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. | - -## Quoted Replies - -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. +For a detailed guide, see [Groups](/ui-kit/react/groups). + +### Threaded conversations and search + +What you’re changing: Add thread entry points and a search surface for messages and conversations. +File: `src/App.tsx` +Applies to: `CometChatMessageList`, `CometChatSearch` +Default behavior: Threaded replies appear on message bubbles, and search scans conversations and messages. +Override: Use `onThreadRepliesClick`, `onConversationClicked`, `onMessageClicked`, `searchIn`, and `searchFilters`. +Verify: Clicking a thread entry triggers your handler, and search results show conversations or messages. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageList, CometChatSearch } from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function App() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ( +
+ console.log("Conversation:", conversation)} + onMessageClicked={(message) => console.log("Message:", message)} + /> + console.log("Thread message:", message)} + /> +
+ ); +} +``` + +What this does: Renders a search UI and a message list with a threaded replies click handler. + +#### Threaded Conversations + +Threaded conversations allow replies to specific messages. - + -| 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) | Displays the parent message with the number of replies. | -## 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. +Search helps users find conversations, messages, and media in real time. - + -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 - -CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users. +For a detailed guide, see [Search](/ui-kit/react/search). + +### Moderation and report message + +What you’re changing: Enable moderation and reporting in the message list UI. +File: `src/App.tsx` +Applies to: `CometChatMessageList` +Default behavior: Moderated content is displayed according to moderation rules, and the Report Message action appears in the message actions menu. +Override: Moderation rules are configured in the CometChat Dashboard. +Verify: Blocked content displays according to rules, and users can report messages. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageList } from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function App() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ( +
+ console.error("MessageList error:", error)} + /> +
+ ); +} +``` + +What this does: Renders a message list that automatically reflects moderation rules and allows message reporting. + +#### Moderation + +Moderation filters and manages inappropriate content based on your rules. -Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation. +Learn more about setting up moderation rules in [Moderation overview](/moderation/overview). -| Components | Functionality | -| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. | +| Components | Functionality | +| --- | --- | +| [Message List](/ui-kit/react/message-list) | Displays moderated messages based on your settings. | -After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators. +#### Report Message -## Report Message +Users can report messages and submit a reason and remarks. -The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment. + + + -Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation. +Learn how flagged messages are handled in [Flagged Messages](/moderation/flagged-messages). - - - +| Components | Functionality | +| --- | --- | +| [Message List](/ui-kit/react/message-list) | Provides the Report Message option in the message actions menu. | -| Components | Functionality | -| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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. | +## Customization matrix -## Conversation and Advanced Search +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Hide read receipts in message bubbles | `CometChatMessageList` | `hideReceipts` | `hideReceipts={true}` | +| Hide read receipts in conversation list | `CometChatConversations` | `hideReceipts` | `hideReceipts={true}` | +| Customize message bubble rendering | `CometChatMessageList` | `templates` | `templates={customTemplates}` | +| Handle thread click behavior | `CometChatMessageList` | `onThreadRepliesClick` | `onThreadRepliesClick={openThread}` | +| Change conversation selection behavior | `CometChatConversations` | `onItemClick` | `onItemClick={(c) => setActive(c)}` | +| Hide voice recording in composer | `CometChatMessageComposer` | `hideVoiceRecording` | `hideVoiceRecording={true}` | +| Hide user status in header | `CometChatMessageHeader` | `hideUserStatus` | `hideUserStatus={true}` | +| Adjust search scope or filters | `CometChatSearch` | `searchIn`, `searchFilters` | `searchIn={["messages"]}` | -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. +## Common pitfalls and fixes - - - +| Symptom | Likely cause | Fix | +| --- | --- | --- | +| Components do not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering any UI Kit component. | +| Components render but show no data | User not logged in | Call `CometChatUIKit.login("UID")` after init. | +| Message list is empty | `chatUser` or `chatGroup` not loaded | Fetch a valid `CometChat.User` or `CometChat.Group` before rendering. | +| Message list throws errors | Both `user` and `group` props provided | Pass only one of `user` or `group`. | +| Mark as Unread does not appear | Message actions not visible | Ensure message actions are enabled in `CometChatMessageList` and the user has permission. | +| Mentions do not show suggestions | Using a 1:1 chat or user missing mention permissions | Use a group chat and ensure the user is a group member. | +| Search shows no results | `CometChatSearch` rendered before login | Render search after `CometChatUIKit.login()` completes. | +| SSR hydration error in Next.js | UI Kit uses browser APIs | Render UI Kit components in `useEffect` or use a client-only import. | -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). +## FAQ - - +**Do I need both Message List and Message Composer?** +Yes. `CometChatMessageList` renders messages, and `CometChatMessageComposer` sends new messages. -| 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) | +**Can I use core features without Conversations?** +Yes. You can render a direct user or group chat by passing a `CometChat.User` or `CometChat.Group` to the message components. - - +**Where do I enable moderation and reporting?** +Set up moderation rules in [Moderation overview](/moderation/overview) and manage flagged messages in [Flagged Messages](/moderation/flagged-messages). ---- +**How do I switch between user and group chats?** +Handle `onItemClick` in `CometChatConversations`, detect whether the conversation is a user or group, and pass the correct object to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`. + +## Next steps -## Next Steps - - - - Browse all available UI Kit components - - - Customize the look and feel of your chat UI - - - Add audio and video calling to your app - - - Explore AI-powered chat capabilities - - +- [Components Overview](/ui-kit/react/components-overview) +- [Theme](/ui-kit/react/theme) +- [Call Features](/ui-kit/react/call-features) diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx index a74c7889c..007fb7496 100644 --- a/ui-kit/react/extensions.mdx +++ b/ui-kit/react/extensions.mdx @@ -3,163 +3,302 @@ title: "Extensions" description: "Overview of CometChat's extensions grouped by Dashboard categories (User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features) and how they auto-integrate into React UI Kit components." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** +Enable CometChat extensions from the Dashboard and have them automatically appear inside your React UI Kit chat experience. This page helps you turn on extensions, render the right components, and verify where each extension surfaces. -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) +## When to use this -Extensions are enabled via the [CometChat Dashboard](/fundamentals/extensions-overview) — no additional code required once activated. +- You want to add stickers, polls, translation, or link previews without custom UI. +- You need collaboration tools like whiteboard or collaborative documents. +- You want security features like disappearing messages. +- You need customer support integrations like Chatwoot or Intercom. +- You want AI-powered chat features like Smart Replies or Conversation Summary. -Supported extensions: User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features - +## Prerequisites - -**AI Agent Component Spec** - -**Package:** `@cometchat/chat-uikit-react` -**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + Extensions enabled in Dashboard -**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 - +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- UI Kit initialization and login must complete before rendering any UI Kit component: `CometChatUIKit.init()` and `CometChatUIKit.login()`. +- Extensions must be activated in the CometChat Dashboard. See [Extensions overview](/fundamentals/extensions-overview). -## Overview +## Quick start -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. +1. Enable one or more extensions in the CometChat Dashboard. Use [Extensions overview](/fundamentals/extensions-overview). +2. Install the UI Kit. +```bash +npm install @cometchat/chat-uikit-react +``` - -**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). - +What this does: Installs the React UI Kit package. -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). +3. Initialize the UI Kit and log in a user in `src/cometchat.ts`. -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. +```ts +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -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. +export async function initCometChat() { + const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); -## Built-in Extensions + await CometChatUIKit.init(UIKitSettings); + await CometChatUIKit.login("UID"); +} +``` -Here's a guide on how you can enable and integrate these extensions. The grouping below mirrors the CometChat Dashboard. +What this does: Initializes CometChat UI Kit and logs in a user. -### User Experience +4. Render `CometChatMessageComposer` and `CometChatMessageList` in `src/App.tsx`. -#### Bitly +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatMessageComposer, + CometChatMessageList, +} from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; -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). +export default function App() { + const [chatUser, setChatUser] = React.useState(null); -#### Link Preview + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); -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). + if (!chatUser) return null; -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. + return ( +
+ + +
+ ); +} +``` - - - +What this does: Renders the message list and composer where most extensions appear. -#### Message Shortcuts +5. Run your app and verify extension UI appears based on the extensions you enabled. -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). +## Core concepts -#### Pin Message + +**Quick Reference for AI Agents & Developers** -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). +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) -#### Rich Media Preview +Extensions are enabled via the [CometChat Dashboard](/fundamentals/extensions-overview) and auto-integrate into UI Kit components. + -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). + +**AI Agent Component Spec** -#### Save Message +- Package: `@cometchat/chat-uikit-react` +- Required setup: `CometChatUIKit.init()` and `CometChatUIKit.login()` +- Primary components: `CometChatMessageComposer`, `CometChatMessageList` +- Activation: Enable each extension from the CometChat Dashboard + -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). +- Extension: A feature enabled from the CometChat Dashboard that appears automatically in UI Kit components. +- Auto-integration: Once enabled, supported extensions render inside Message List or Message Composer without extra code. +- Action Sheet: The attachment menu in `CometChatMessageComposer` where items like Polls, Whiteboard, and Document appear. + +## Implementation + +### Initialize UI Kit + +What you’re changing: Add UI Kit initialization and login. +File: `src/cometchat.ts` +Applies to: `CometChatUIKit.init()`, `CometChatUIKit.login()` +Default behavior: Enables UI Kit features and extensions for the logged-in user. +Override: Use a different auth flow if needed in [Methods](/ui-kit/react/methods). +Verify: UI Kit components render without errors after init and login. + +```ts +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; + +export async function initCometChat() { + const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); + + await CometChatUIKit.init(UIKitSettings); + await CometChatUIKit.login("UID"); +} +``` + +What this does: Initializes CometChat UI Kit and logs in a user. + +### Render extension surfaces + +What you’re changing: Render the components that surface extension UI. +File: `src/App.tsx` +Applies to: `CometChatMessageList`, `CometChatMessageComposer` +Default behavior: Enabled extensions automatically appear in the composer or message list. +Override: Customize UI behavior using component props documented on [Message Composer](/ui-kit/react/message-composer) and [Message List](/ui-kit/react/message-list). +Verify: Polls, stickers, translation, previews, and other enabled extensions show up. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatMessageComposer, + CometChatMessageList, +} from "@cometchat/chat-uikit-react"; +import { initCometChat } from "./cometchat"; + +export default function App() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + let isMounted = true; + (async () => { + await initCometChat(); + const user = await CometChat.getUser("TARGET_UID"); + if (isMounted) setChatUser(user); + })(); + return () => { + isMounted = false; + }; + }, []); + + if (!chatUser) return null; + + return ( +
+ + +
+ ); +} +``` + +What this does: Renders the UI Kit components where extensions are auto-integrated. + +## Built-in extensions by category -#### Thumbnail Generation +### User Experience -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). +**Bitly** +Shortens long URLs in text messages using Bitly. +Guide: [Bitly Extension](/fundamentals/bitly) -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. +**Link Preview** +Shows a title, description, and thumbnail for shared URLs. +Guide: [Link Preview Extension](/fundamentals/link-preview) +Where it appears: Message bubbles in [Message List](/ui-kit/react/message-list). - + -#### TinyURL +**Message Shortcuts** +Expands short codes into predefined messages. +Guide: [Message Shortcuts Extension](/fundamentals/message-shortcuts) -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). +**Pin Message** +Pins important messages in a conversation. +Guide: [Pin Message Extension](/fundamentals/pin-message) -#### Voice Transcription +**Rich Media Preview** +Generates rich preview panels for URLs using iFramely. +Guide: [Rich Media Preview Extension](/fundamentals/rich-media-preview) -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). +**Save Message** +Saves messages privately for later reference. +Guide: [Save Message Extension](/fundamentals/save-message) -### User Engagement +**Thumbnail Generation** +Creates smaller preview images for shared media. +Guide: [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) +Where it appears: Image bubbles in [Message List](/ui-kit/react/message-list). -#### 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). +**TinyURL** +Shortens URLs using TinyURL. +Guide: [TinyURL Extension](/fundamentals/tinyurl) -#### Message Translation +**Voice Transcription** +Converts audio messages into text. +Guide: [Voice Transcription Extension](/fundamentals/voice-transcription) -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). +### User Engagement + +**Giphy** +Search and share GIFs in conversations. +Guide: [Giphy Extension](/fundamentals/giphy) -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. +**Message Translation** +Translates messages to the user’s locale. +Guide: [Message Translation Extension](/fundamentals/message-translation) +Where it appears: Action sheet in [Message List](/ui-kit/react/message-list). -#### 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). - -Once you have successfully activated the [Polls Extension](/fundamentals/polls) 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. +**Polls** +Creates polls inside conversations. +Guide: [Polls Extension](/fundamentals/polls) +Where it appears: Action sheet in [Message Composer](/ui-kit/react/message-composer). -#### 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 +**Reminders** +Sets reminders for messages or personal reminders. +Guide: [Reminders Extension](/fundamentals/reminders) -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. +**Stickers** +Adds sticker packs to chats. +Guide: [Sticker Extension](/fundamentals/stickers) +Where it appears: [Message Composer](/ui-kit/react/message-composer). -#### 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 +**Stipop** +Adds Stipop sticker library. +Guide: [Stipop Extension](/fundamentals/stickers-stipop) -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). +**Tenor** +Search and share GIFs from Tenor. +Guide: [Tenor Extension](/fundamentals/tenor) ### Collaboration -#### Collaborative Document - -With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document). - -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** +Collaborate on documents in real time. +Guide: [Collaborative Document Extension](/fundamentals/collaborative-document) +Where it appears: Action sheet in [Message Composer](/ui-kit/react/message-composer). -#### 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). - -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. +**Collaborative Whiteboard** +Collaborate on a shared whiteboard. +Guide: [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) +Where it appears: Action sheet in [Message Composer](/ui-kit/react/message-composer). @@ -167,67 +306,72 @@ Once you have successfully activated the [Collaborative Whiteboard Extension](/f ### Security -#### 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). +**Disappearing Messages** +Messages disappear after a set time. +Guide: [Disappearing Messages Extension](/fundamentals/disappearing-messages) ### Customer Support -#### Chatwoot +**Chatwoot** +Enables support conversations via Chatwoot. +Guide: [Chatwoot Extension](/fundamentals/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** +Enables support conversations via Intercom. +Guide: [Intercom Extension](/fundamentals/intercom) -#### Intercom +### Smart Chat Features -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). +**Conversation Starter** +AI-generated opening messages. +Guide: [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and [AI Features](/ui-kit/react/ai-features) -### Smart Chat Features +**Smart Replies** +AI-generated reply suggestions. +Guide: [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and [AI Features](/ui-kit/react/ai-features) -#### Conversation Starter +**Conversation Summary** +AI-written conversation recap. +Guide: [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and [AI Features](/ui-kit/react/ai-features) -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. +## Customization matrix -#### Smart Replies +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Enable or disable an extension | CometChat Dashboard | Extensions toggle | Enable **Polls** in [Extensions overview](/fundamentals/extensions-overview) | +| Show Polls, Whiteboard, or Document | `CometChatMessageComposer` | Component render | `` | +| Show Link Preview or Thumbnails | `CometChatMessageList` | Component render | `` | +| Adjust extension UI placement | UI Kit components | Component props | Use props documented on [Message Composer](/ui-kit/react/message-composer) or [Message List](/ui-kit/react/message-list) | -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. +## Common pitfalls and fixes -#### Conversation Summary +| Symptom | Cause | Fix | +| --- | --- | --- | +| Extension feature not appearing | Extension not enabled in Dashboard | Enable it in [Extensions overview](/fundamentals/extensions-overview). | +| Component does not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. | +| Component renders but no extension UI | User not logged in | Call `CometChatUIKit.login("UID")` after init. | +| Stickers not showing | Sticker extension not enabled | Enable [Sticker Extension](/fundamentals/stickers). | +| Polls option missing | Polls extension not enabled | Enable [Polls Extension](/fundamentals/polls). | +| Link preview not rendering | Link Preview extension not enabled | Enable [Link Preview Extension](/fundamentals/link-preview). | +| Extensions show for some users but not others | Different app credentials in different environments | Verify `APP_ID`, `REGION`, and `AUTH_KEY` match the same app. | +| SSR hydration error | UI Kit uses browser APIs | Render in `useEffect` or use `ssr: false` for Next.js. | -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. +## FAQ ---- +**Do I need to write code for each extension?** +No. Once enabled in the Dashboard, supported extensions auto-integrate into UI Kit components. - - +**Where do I see Polls, Whiteboard, or Collaborative Document?** +These appear in the action sheet of [Message Composer](/ui-kit/react/message-composer). -| 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) | +**Where do I see Link Preview and Thumbnail Generation?** +These render inside message bubbles in [Message List](/ui-kit/react/message-list). - - +**Can I use extensions without the UI Kit?** +This page is specific to UI Kit integration. For non-UI Kit usage, refer to the individual extension guides in [Extensions overview](/fundamentals/extensions-overview). ---- +## Next steps -## Next Steps - - - - Customize the composer where most extensions appear - - - Customize the message list for extension-rendered content - - - Explore core chat features like messaging and reactions - - - Explore AI-powered chat capabilities - - +- [Message Composer](/ui-kit/react/message-composer) +- [Message List](/ui-kit/react/message-list) +- [AI Features](/ui-kit/react/ai-features) diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx index bfd7be367..0cc98ff3a 100644 --- a/ui-kit/react/localize.mdx +++ b/ui-kit/react/localize.mdx @@ -4,456 +4,392 @@ sidebarTitle: "Localize" 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** - -```javascript -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; - -// Set language -CometChatLocalize.setCurrentLanguage("fr"); - -// Init with full config -CometChatLocalize.init({ - language: "es", - fallbackLanguage: "en-US", - disableAutoDetection: false, -}); +Configure localization for UI Kit text and date/time formatting. This page is for developers who need exact language codes, translation keys, and date formatting controls. -// Add custom translations -CometChatLocalize.addTranslation({ - "en-US": { "welcome_message": "Welcome!" } -}); -``` +## When to use this -- **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) - +- You want the UI Kit to appear in the user’s language. +- You need custom translations for specific labels or features. +- You need custom date and time formats. +- You want to control language detection and fallback behavior. +- You want to localize moderation reasons and mention labels. -## **Overview** +## Prerequisites -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: +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- UI Kit initialized and user logged in before rendering components. +- Use supported language codes from the table below (for example `en-US`, `fr`, `es`). +- If adding translations, call `CometChatLocalize.init()` first, then `CometChatLocalize.addTranslation()`. -* **Automatically detect and apply a language** based on browser/device settings. -* **Manually change the UI language**. -* **Format date and time** based on localization settings. +## Quick start -The v6 React UI Kit expands support for **multiple languages** and allows developers to define **custom translations**.\ -The localization system now includes **language JSON files**, which store translations, and an **improved CometChatLocalize class**, which handles language detection and formatting. +1. Create `src/cometchat-localize.ts` and initialize localization. -*** - -### **Supported Languages** - -React UI Kit currently supports **19 languages**: - -| Language | Code | -| ------------------------ | ------- | -| English (United States) | `en-US` | -| English (United Kingdom) | `en-GB` | -| Dutch | `nl` | -| French | `fr` | -| German | `de` | -| Hindi | `hi` | -| Italian | `it` | -| Japanese | `ja` | -| Korean | `ko` | -| Portuguese | `pt` | -| Russian | `ru` | -| Spanish | `es` | -| Turkish | `tr` | -| Chinese | `zh` | -| Chinese (Traditional) | `zh-TW` | -| Malay | `ms` | -| Swedish | `sv` | -| Lithuanian | `lt` | -| Hungarian | `hu` | - -🔗 **View JSON files for all supported languages** in the GitHub repository:\ -➡ [Language JSON Files](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources) - -*** - -## **CometChatLocalize** - -The `CometChatLocalize` class provides methods for managing localization in the UI Kit. - -🔗 **View full class file in the GitHub repository:**\ -➡ [CometChatLocalize](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts) - -*** - -### **LocalizationSettings** - -The `LocalizationSettings` interface defines various **localization settings** for an application or component. It allows developers to configure the language, translations, time zone, and calendar formatting while providing options for automatic detection and missing key handling. - -| Property | Type | Description | -| ----------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------- | -| `language` | `string` | The language code (e.g., `"en"`, `"fr"`) for the current localization. | -| `translationsForLanguage` | `{ [key: string]: any }` | An object containing key-value pairs for translations in the current language. | -| `disableAutoDetection` | `boolean` | Disables automatic language detection based on the browser or device settings. | -| `fallbackLanguage` | `string` | The **fallback language code** to use if the primary language is not available. | -| `disableDateTimeLocalization` | `boolean` | Disables localization for **date and time values**, forcing the default format. | -| `timezone` | `string` | The **timezone** used for date and time formatting (e.g., `"America/New_York"`, `"Europe/London"`). | -| `calendarObject` | `CalendarObject` | A **custom calendar format** using `CalendarObject` to define localized date and time formatting. | -| `missingKeyHandler` | `(key: string) => string` | A function that **handles missing translation keys**, allowing custom error handling or fallbacks. | - -*** - -**Example** - -```javascript +```ts import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -import { CalendarObject } from "./CalendarObject"; -CometChatLocalize.init({ - language: "es", // Default language set to Spanish - fallbackLanguage: "en-US", // Use English if the preferred language is not available - translationsForLanguage: { - "es": { - "welcome_message": "¡Bienvenido a CometChat!", - "logout_message": "Has cerrado sesión con éxito." - }, - "fr": { - "welcome_message": "Bienvenue sur CometChat!", - "logout_message": "Vous vous êtes déconnecté avec succès." - } - }, - disableAutoDetection: false, // Allow automatic detection of browser/device language - disableDateTimeLocalization: false, // Enable localization for date and time - timezone: "Europe/Madrid", // Set time zone for date and time formatting - calendarObject: new CalendarObject({ - today: "[Hoy a las] hh:mm A", - yesterday: "[Ayer a las] hh:mm A", - lastWeek: "[Última semana el] dddd", - otherDays: "DD MMM YYYY, hh:mm A", - relativeTime: { - minute: "%d minuto atrás", - minutes: "%d minutos atrás", - hour: "%d hora atrás", - hours: "%d horas atrás", - } - }), - missingKeyHandler: (key) => `🔍 Missing translation for: ${key}`, // Custom handler for missing translations -}); +export function initLocalization() { + CometChatLocalize.init({ + language: "es", + fallbackLanguage: "en-US", + disableAutoDetection: false, + }); +} ``` -*** - -### **CalendarObject** - -The `CalendarObject` class defines customizable formatting for date and time representation. It allows you to format dates based on whether they are today, yesterday, last week, or other days. It also supports relative time formatting for minutes and hours. - - -Notice +What this does: Sets the default language to Spanish and falls back to English. -Changing this format will **globally update** the date and time representation wherever it is used in the component.\ -However, if a **component-specific** `CalendarObject` is provided, it will take **higher precedence** over the global settings. +2. (Optional) Add custom translations. - - -| Property | Type | Description | -| ---------------------- | -------- | ----------------------------------------------------------------------------------------------- | -| `today` | `string` | Custom formatting for dates that fall on the same day. Example: `"Today at hh:mm A"` | -| `yesterday` | `string` | Custom formatting for dates that fall on the previous day. Example: `"Yesterday at hh:mm A"` | -| `lastWeek` | `string` | Custom formatting for dates within the last 7 days. Example: `"Last week on dddd"` | -| `otherDays` | `string` | Custom formatting for dates that do not fit other categories. Example: `"DD MMM YYYY, hh:mm A"` | -| `relativeTime` | `object` | Custom formatting for relative time expressions (e.g., "2 hours ago"). | -| `relativeTime.minute` | `string` | Formatting for a single minute. Example: `"%d minute ago"` | -| `relativeTime.minutes` | `string` | Formatting for multiple minutes. Example: `"%d minutes ago"` | -| `relativeTime.hour` | `string` | Formatting for a single hour. Example: `"%d hour ago"` | -| `relativeTime.hours` | `string` | Formatting for multiple hours. Example: `"%d hours ago"` | - -*** - -**Example** - -```javascript +```ts import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -import { CalendarObject } from "./CalendarObject"; -new CalendarObject({ - today: "[Hoy a las] hh:mm A", - yesterday: "[Ayer a las] hh:mm A", - lastWeek: "[Última semana el] dddd", - otherDays: "DD MMM YYYY, hh:mm A", - relativeTime: { - minute: "%d minuto atrás", - minutes: "%d minutos atrás", - hour: "%d hora atrás", - hours: "%d horas atrás", - } - }) +export function addCustomTranslations() { + CometChatLocalize.addTranslation({ + "en-US": { welcome_message: "Welcome!" }, + es: { welcome_message: "Bienvenido!" }, + }); +} ``` -*** - -### **Component Guide** - - -Note +What this does: Adds a custom translation key in English and Spanish. -The translation configurations mentioned in this section are to be defined inside the -ComeChat's init() method callback. - +3. (Optional) Switch languages at runtime. -#### Report Message - -To add translations for any flag reason, a key in the form of `flag_message_reason_id_{reason_id}` is to be defined with the translated strings to be displayed for that `reason_id` in the UI. The translations for `flag_message_reason_id_spam`, `flag_message_reason_id_sexual`, `flag_message_reason_id_harassment` are present by default. - -**Usage** -* Define translations for custom flag message reasons. -* The reason name would be displayed when the required translation is not found. - -**Example** - -```javascript +```ts import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -// Add translations for flag reason keys for the required languages -CometChatLocalize.addTranslation({ - "en-GB": { - "flag_message_reason_id_dislike": "I just don't like it", - }, - "es": { - "flag_message_reason_id_dislike": "Simplemente no me gusta", - } -}); +export function setLanguage(language: string) { + CometChatLocalize.setCurrentLanguage(language); +} ``` -#### Mention All - -To add translations for a custom `mentionAllLabel`, a key in the form of `message_composer_mention_{label}` is to be defined with the translated strings to be displayed for that label in the UI. The translations for `message_composer_mention_all` is present by default. +What this does: Changes the UI language without reloading the app. -**Usage** -* Define translations for custom mentionAllLabel. -* Helps customize the `@all` label used in the app while mentioning all group members. +## Core concepts -**Example** + +**Quick Reference for AI Agents & Developers** -```javascript +```ts import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -// Add translations for mentionAllLabel for the required languages +CometChatLocalize.setCurrentLanguage("fr"); + +CometChatLocalize.init({ + language: "es", + fallbackLanguage: "en-US", + disableAutoDetection: false, +}); + CometChatLocalize.addTranslation({ - "en-GB": { - "message_composer_mention_channel": "channel", - }, - "es": { - "message_composer_mention_channel": "canal", - } + "en-US": { welcome_message: "Welcome!" }, }); ``` -*** - -### **Methods** - -#### Initialize CometChatLocalize - -This method initializes the localization system with default values and optional configurations. +What this does: Shows the primary methods used to set language, initialize, and add translations. + -**Usage** +- CometChatLocalize: Static class that manages language selection and date/time formatting. +- Language JSON files: Built-in translations stored in the UI Kit repository. +- CalendarObject: Defines how dates and times are formatted for today, yesterday, and other days. -* Set the default language, timezone, and fallback settings. -* Define a custom calendar format if required. -* Customize how missing keys are handled. +### Supported languages -**Example** +React UI Kit supports the following languages: -```javascript +| Language | Code | +| --- | --- | +| English (United States) | `en-US` | +| English (United Kingdom) | `en-GB` | +| Dutch | `nl` | +| French | `fr` | +| German | `de` | +| Hindi | `hi` | +| Italian | `it` | +| Japanese | `ja` | +| Korean | `ko` | +| Portuguese | `pt` | +| Russian | `ru` | +| Spanish | `es` | +| Turkish | `tr` | +| Chinese | `zh` | +| Chinese (Traditional) | `zh-TW` | +| Malay | `ms` | +| Swedish | `sv` | +| Lithuanian | `lt` | +| Hungarian | `hu` | + +Language JSON files: [Language JSON Files](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources) + +### LocalizationSettings + +| Property | Type | Description | +| --- | --- | --- | +| `language` | `string` | Language code for the current localization. | +| `translationsForLanguage` | `{ [key: string]: any }` | Key-value pairs for translations in the current language. | +| `disableAutoDetection` | `boolean` | Disable automatic browser language detection. | +| `fallbackLanguage` | `string` | Fallback language if the primary language is not available. | +| `disableDateTimeLocalization` | `boolean` | Disable localization for date and time values. | +| `timezone` | `string` | Timezone for date and time formatting. | +| `calendarObject` | `CalendarObject` | Custom calendar format for date and time formatting. | +| `missingKeyHandler` | `(key: string) => string` | Function that handles missing translation keys. | + +### CalendarObject + +| Property | Type | Description | +| --- | --- | --- | +| `today` | `string` | Format for dates that are today. | +| `yesterday` | `string` | Format for dates that are yesterday. | +| `lastWeek` | `string` | Format for dates within the last 7 days. | +| `otherDays` | `string` | Format for older dates. | +| `relativeTime` | `object` | Format for relative time strings. | +| `relativeTime.minute` | `string` | Format for a single minute. | +| `relativeTime.minutes` | `string` | Format for multiple minutes. | +| `relativeTime.hour` | `string` | Format for a single hour. | +| `relativeTime.hours` | `string` | Format for multiple hours. | + +## Implementation + +### Initialize CometChatLocalize + +What you’re changing: Set default localization behavior. +File: `src/cometchat-localize.ts` +Applies to: `CometChatLocalize.init()` +Default behavior: UI Kit uses default language and date formatting. +Override: Set language, fallback, timezone, and calendar object. +Verify: UI text and timestamps render in the selected language and format. + +```ts import { CometChatLocalize } from "@cometchat/chat-uikit-react"; +import { CalendarObject } from "./CalendarObject"; -// Initialize localization settings -CometChatLocalize.init({ - language: "es", // Default language: Spanish - fallbackLanguage: "en-US", // Fallback if translation is missing - disableAutoDetection: false, // Enable browser language detection +export function initLocalization() { + CometChatLocalize.init({ + language: "es", + fallbackLanguage: "en-US", + translationsForLanguage: { + es: { + welcome_message: "Bienvenido a CometChat!", + logout_message: "Has cerrado sesión con éxito.", + }, + fr: { + welcome_message: "Bienvenue sur CometChat!", + logout_message: "Vous vous êtes déconnecté avec succès.", + }, + }, + disableAutoDetection: false, + disableDateTimeLocalization: false, timezone: "Europe/Madrid", + calendarObject: new CalendarObject({ + today: "[Hoy a las] hh:mm A", + yesterday: "[Ayer a las] hh:mm A", + lastWeek: "[Última semana el] dddd", + otherDays: "DD MMM YYYY, hh:mm A", + relativeTime: { + minute: "%d minuto atrás", + minutes: "%d minutos atrás", + hour: "%d hora atrás", + hours: "%d horas atrás", + }, + }), missingKeyHandler: (key) => `Missing translation: ${key}`, -}); + }); +} ``` -*** - -#### Get Browser Language +What this does: Initializes localization with language, fallback, custom translations, and date formatting. -This method detects the language set in the user's browser or device settings. + +Define localization settings inside your CometChat UI Kit initialization flow. See [React.js Integration](/ui-kit/react/react-js-integration). + -**Usage** +### Add custom translations -* Automatically set the app’s language based on the user’s browser settings. -* Helps in making the UI multilingual without requiring user input. +What you’re changing: Extend or override translation keys. +File: `src/cometchat-localize.ts` +Applies to: `CometChatLocalize.addTranslation()` +Default behavior: UI Kit uses built-in translation JSON files. +Override: Add custom keys or new languages. +Verify: Custom keys render instead of defaults. -**Example** +```ts +import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -```javascript -const userLang = CometChatLocalize.getBrowserLanguage(); -console.log(userLang); +export function addCustomTranslations() { + CometChatLocalize.addTranslation({ + "en-US": { welcome_message: "Welcome to CometChat!" }, + }); +} ``` -*** - -#### Get Localized String +What this does: Adds a custom translation key in English. -This method fetches localized text based on the current language. +### Report message reason translations -**Usage** +What you’re changing: Add translations for moderation report reasons. +File: `src/cometchat-localize.ts` +Applies to: `flag_message_reason_id_` keys +Default behavior: Default reasons are translated in the UI Kit. +Override: Add custom reason IDs to translations. +Verify: Report reason labels show localized text. -* Retrieve translations dynamically without hardcoding values in multiple languages. -* Useful for UI elements, buttons, alerts, and system messages. - -**Example** +```ts +import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -```javascript -const translatedText = CometChatLocalize.getLocalizedString("welcome_message"); +export function addReportReasonTranslations() { + CometChatLocalize.addTranslation({ + "en-GB": { + flag_message_reason_id_dislike: "I just don't like it", + }, + es: { + flag_message_reason_id_dislike: "Simplemente no me gusta", + }, + }); +} ``` -*** +What this does: Adds localized labels for a custom report reason. -#### Get Current Language +### Mention all label translations -This method returns the currently set language for the UI Kit. +What you’re changing: Add translations for custom mention-all labels. +File: `src/cometchat-localize.ts` +Applies to: `message_composer_mention_ - - - -**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. - -*** - -## **Top Tokens (Quick Mapping)** +- Root wrapper: UI Kit components render under `.cometchat` and should be styled through that scope. +- Token overrides: Use CSS variables on `.cometchat` for global changes. +- Component overrides: Use `.cometchat .cometchat-` to scope changes to a single component. +- Precedence: Element-level CSS overrides > component-level variables > global variables > default tokens. +- Dark mode: Use either `data-theme` or `@media (prefers-color-scheme: dark)`. -Use this table for fast, reliable overrides. For the complete list, see [Color Resources](/ui-kit/react/theme/color-resources). +### Top tokens (quick mapping) | Token | Common usage (varies by component) | | --- | --- | @@ -187,19 +125,67 @@ Use this table for fast, reliable overrides. For the complete list, see [Color R | `--cometchat-font-family` | Global font family | | `--cometchat-radius-max` | Maximum corner radius used across UI elements | -*** +## Implementation + +### Import the base stylesheet + +What you’re changing: Add the UI Kit token definitions to your app styles. +File: `src/App.css` +Applies to: Global token definitions +Default behavior: Enables UI Kit default theme values. +Override: Override tokens in `.cometchat` or component scopes. +Verify: UI Kit renders with default styling before overrides. + +```css +@import url("@cometchat/chat-uikit-react/css-variables.css"); +``` -## **Component-Specific Theming** +What this does: Loads the UI Kit CSS variables file. -Want to apply **different styles to specific components**? Override **CSS variables within the component's class**. +### Global theming with CSS variables + +What you’re changing: Override primary tokens globally. +File: `src/App.css` +Applies to: `.cometchat` root scope +Default behavior: UI Kit uses default colors and fonts. +Override: Set tokens on `.cometchat`. +Verify: Primary accents and backgrounds change across all components. + + + + + +```css +@import url("@cometchat/chat-uikit-react/css-variables.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; +} +``` + +What this does: Updates primary accents, backgrounds, and highlight colors globally. + +### Component-specific theming + +What you’re changing: Override tokens for a single component. +File: `src/App.css` +Applies to: `.cometchat .cometchat-conversations` +Default behavior: Conversations use global tokens. +Override: Set tokens under the component selector. +Verify: Only the Conversations component changes. - - -```css lines +```css +@import url("@cometchat/chat-uikit-react/css-variables.css"); + .cometchat .cometchat-conversations { --cometchat-primary-color: #f76808; --cometchat-extended-primary-color-500: #fbaa75; @@ -209,58 +195,44 @@ Want to apply **different styles to specific components**? Override **CSS variab } ``` - - - - -**Expected result:** Only the Conversations component changes — primary color becomes orange, highlight text becomes amber, avatars get 12px border radius. Other components remain unchanged. - -*** +What this does: Changes colors and radius for Conversations only. -## **Advanced Customization with CSS Overrides** +### Advanced customization with CSS overrides -For full control over component styling, use **CSS overrides** to target specific elements directly. +What you’re changing: Target a specific element directly with CSS. +File: `src/App.css` +Applies to: `.cometchat-conversations .cometchat-avatar` +Default behavior: Avatars are circular. +Override: Set `border-radius` on avatar elements. +Verify: Avatars become rounded squares. - - -```css lines +```css .cometchat-conversations .cometchat-avatar, .cometchat-conversations .cometchat-avatar__image { border-radius: 12px; } ``` - - - - -**Expected result:** Avatar images in the Conversations list change from circular to rounded-square (12px radius). - -*** - -## **Dark & Light Theme Support** +What this does: Rounds avatars inside the Conversations list. -You can **switch** between light and dark modes. +### Dark and light theme support - -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** +What you’re changing: Provide dark mode overrides. +File: `src/App.tsx` and `src/App.css` +Applies to: `.cometchat-root[data-theme="dark"] .cometchat` +Default behavior: Light mode tokens apply. +Override: Set `data-theme` and add dark overrides in CSS. +Verify: Theme switches based on `data-theme` value. - - -```tsx lines +```tsx import { useEffect, useState } from "react"; +import "./App.css"; -const App = () => { +export default function App() { const [theme, setTheme] = useState("light"); useEffect(() => { @@ -275,32 +247,24 @@ const App = () => { return () => mediaQuery.removeEventListener("change", handleThemeChange); }, []); - return
{/* Chat UI here */}
; -}; - -export default App; + return ( +
+ {/* UI Kit components */} +
+ ); +} ``` - - - - -**Expected result:** The wrapper tracks the user's OS preference and sets `data-theme`, which you can use to switch palettes in your CSS. - -*** - -## **Customizing Light & Dark Theme** - -Define different **color schemes** for **light and dark modes**. +What this does: Sets `data-theme` based on OS preference. - - -```css lines -/* Default (Light) Theme */ +```css +@import url("@cometchat/chat-uikit-react/css-variables.css"); + +/* Light mode */ .cometchat { --cometchat-primary-color: #f76808; --cometchat-neutral-color-300: #fff; @@ -310,7 +274,7 @@ Define different **color schemes** for **light and dark modes**. --cometchat-text-color-highlight: #f76808; } -/* Dark Theme */ +/* Dark mode */ .cometchat-root[data-theme="dark"] .cometchat { --cometchat-primary-color: #f76808; --cometchat-neutral-color-300: #311502; @@ -323,62 +287,43 @@ 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. - -*** +What this does: Defines separate light and dark palettes under a `data-theme` switch. -## **Examples** +### Examples -### **1) Brand color swap (global)** -Where: `App.css` +What you’re changing: Common theme variants for brand, dark mode, and component-only overrides. +File: `src/App.css` +Applies to: `.cometchat` and component scopes +Default behavior: UI Kit uses default palette. +Override: Paste the relevant snippet into `App.css`. +Verify: UI matches the example intent. ```css +@import url("@cometchat/chat-uikit-react/css-variables.css"); + +/* Brand color swap (global) */ .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 +/* Dark mode (app-controlled) */ .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 +/* Conversations-only override */ .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 +/* Bubble styling (incoming/outgoing) */ .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { --cometchat-primary-color: #f76808; --cometchat-extended-primary-color-900: #fbaa75; @@ -389,69 +334,58 @@ 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). +What this does: Demonstrates common overrides for brand colors, dark mode, component-specific changes, and bubble styling. -*** +## Customization matrix -## Common Failure Modes +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Global brand color | `App.css` | `--cometchat-primary-color` | `.cometchat { --cometchat-primary-color: #f76808; }` | +| Component-only theme | `App.css` | `.cometchat .cometchat-` | `.cometchat .cometchat-conversations { --cometchat-primary-color: #e63946; }` | +| Dark mode palette | `App.css` | `.cometchat-root[data-theme="dark"] .cometchat` | `.cometchat-root[data-theme="dark"] .cometchat { --cometchat-primary-color: #f76808; }` | +| Font family | `App.css` | `--cometchat-font-family` | `.cometchat { --cometchat-font-family: "Inter", sans-serif; }` | +| Direct element override | `App.css` | CSS selector | `.cometchat-conversations .cometchat-avatar { border-radius: 12px; }` | - - +## Common pitfalls and fixes | Symptom | Cause | Fix | | --- | --- | --- | -| 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 | `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 | - - - - -*** - -## **Helpful Resources** - -Enhance your design and development workflow with the following resources: - - - - -Explore the complete list of color variables and hex values on GitHub. +| 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 overrides are scoped under `.cometchat`. | +| Selectors do not match | Using CSS Modules (hashed class names) | Move rules to a global stylesheet, not `*.module.css`. | +| Component override not working | Missing `.cometchat` parent in selector | Use `.cometchat .cometchat-conversations`, not just `.cometchat-conversations`. | +| Dark mode unchanged | `data-theme` missing or mismatch | Set `data-theme="dark"` on the wrapper and target `.cometchat-root[data-theme="dark"] .cometchat`. | +| Font not changing | `--cometchat-font-family` set on wrong element | Set it on `.cometchat` or the `.cometchat` wrapper. | +| Styles leak into host app | Missing `.cometchat` scope prefix | Always scope overrides under `.cometchat`. | +| Token change has no visible effect | Token does not control that property | Use [Color Resources](/ui-kit/react/theme/color-resources) to confirm token usage. | -[View on GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css#L198-L419) +## FAQ - +**Do I need to use CSS variables?** +Yes. The UI Kit theming system is designed around CSS variables. - +**Where should I place my overrides?** +In a global stylesheet like `App.css`, scoped under `.cometchat`. -Access the Figma UI Kit for a fully integrated color palette and seamless customization. +**Can I use CSS Modules?** +No. CSS Modules generate hashed class names that do not match UI Kit selectors. -[View on Figma](https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web) +## Helpful resources - - - ---- - -## Next Steps - - - - Full reference of all CSS variables and color tokens with light/dark mode values - - - Customize incoming and outgoing message bubble colors per message type - - - Browse all available UI Kit components and their customization options + + + Explore the complete list of color variables and hex values on GitHub. + [View on GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css#L198-L419) - - Customize language strings and translations across the UI Kit + + Access the Figma UI Kit for a complete color palette reference. + [View on Figma](https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web) + +## Next steps + +- [Color Resources](/ui-kit/react/theme/color-resources) +- [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling) +- [Localization](/ui-kit/react/localize) diff --git a/ui-kit/react/theme/color-resources.mdx b/ui-kit/react/theme/color-resources.mdx index d0988fee0..1b3622dec 100644 --- a/ui-kit/react/theme/color-resources.mdx +++ b/ui-kit/react/theme/color-resources.mdx @@ -3,92 +3,117 @@ title: "Color Resources" description: "Complete reference of all CSS variables and color tokens available in the CometChat React UI Kit, including primary, neutral, and semantic color palettes for light and dark modes." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** +Use this page as the authoritative reference for UI Kit color tokens and their default values. It is for developers who need exact variable names, selector patterns, and light/dark palettes. + +## When to use this + +- You want to override UI Kit colors with your brand palette. +- You need the exact token names for a specific UI element. +- You want to customize light and dark mode palettes. +- You need to confirm default token values. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- Base stylesheet imported in `App.css`: `@import url("@cometchat/chat-uikit-react/css-variables.css");` +- UI Kit rendered under a `.cometchat` root wrapper. +- Use global CSS (not CSS Modules) for overrides. + +## Quick start + +1. Import the UI Kit tokens in `src/App.css`. + +```css +@import url("@cometchat/chat-uikit-react/css-variables.css"); +``` + +What this does: Loads the default UI Kit tokens so you can override them. + +2. Override a global token in `src/App.css`. ```css -/* Override primary brand color globally */ +@import url("@cometchat/chat-uikit-react/css-variables.css"); + .cometchat { --cometchat-primary-color: #f76808; } +``` + +What this does: Sets the global primary accent color. + +3. (Optional) Add a dark mode override. + +```css +@import url("@cometchat/chat-uikit-react/css-variables.css"); -/* Override for dark mode */ .cometchat[data-theme="dark"] { --cometchat-primary-color: #f76808; } - -/* Override a specific component's colors */ -.cometchat-conversations { - --cometchat-primary-color: #e63946; -} ``` - - -**AI Agent Styling Spec** - -**Goal:** Override UI Kit color tokens to match your brand -**Where:** `App.css` (global) — import in app entry via `import "./App.css";` -**Scope:** Override variables on `.cometchat` (global) or `.cometchat-` (component-specific) -**Key tokens:** `--cometchat-primary-color` (brand/accent), `--cometchat-neutral-color-300` (incoming bubbles), `--cometchat-background-color-01` (main background) -**Dark mode:** Override in `.cometchat[data-theme="dark"]` selector -**Source file:** [css-variables.css on GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css) -**Constraints:** Global CSS only (no CSS Modules), no `!important`, component-level overrides take precedence over global - +What this does: Sets the primary color for dark mode when `data-theme="dark"` is on `.cometchat`. -## 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. +## Core concepts -**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. - +**Quick Reference for AI Agents & Developers** - -**Prerequisites before overriding any color tokens:** -1. Import the base stylesheet: `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your `App.css` -2. Import your CSS file at the app entry: `import "./App.css";` in `App.tsx` -3. All overrides must target `.cometchat` or a `.cometchat-` class -4. Use **global CSS** (not CSS Modules with hashed class names) — hashed selectors won't match - +```css +/* Global override */ +.cometchat { --cometchat-primary-color: #f76808; } -*** +/* Dark mode override */ +.cometchat[data-theme="dark"] { --cometchat-primary-color: #f76808; } + +/* Component override */ +.cometchat-conversations { --cometchat-primary-color: #e63946; } +``` + -## Selector Contract +- Selector contract: Override tokens on `.cometchat` or on `.cometchat-`. +- Dark mode: Use `.cometchat[data-theme="dark"]` if you set the attribute on the UI Kit root. If your app sets `data-theme` on a wrapper, scope the selector accordingly. +- Precedence: Component overrides take precedence over global overrides. -Use these patterns when overriding colors. This is the canonical selector contract for this page. +### Selector contract **Global override** + ```css .cometchat { --token: value; } ``` +What this does: Changes a token for the entire UI Kit. + **Component override** + ```css .cometchat-conversations { --token: value; } ``` -**Dark mode override (default)** +What this does: Changes a token for a single component. + +**Dark mode override** + ```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. +What this does: Changes tokens only when dark mode is active. -*** +## Implementation -## CSS Variable Reference +### CSS variable reference -This table maps every commonly used token to what it visually controls. Use this to avoid hallucinating what a token does. +What you’re changing: Select the correct token for the UI element you want to style. +Where to change it: `src/App.css` +Applies to: CSS variables listed below +Default behavior: UI Kit uses default palette values. +Override: Replace token values in your CSS. +Verify: Only the UI elements mapped to the token change. | Variable | What It Controls | Default (Light) | Used By | | --- | --- | --- | --- | -| `--cometchat-primary-color` | Brand accent, outgoing bubble bg, active states, links, buttons | `#6852d6` | Outgoing bubbles, send button, active tabs, links | +| `--cometchat-primary-color` | Brand accent, outgoing bubble background, active states, links, buttons | `#6852d6` | Outgoing bubbles, send button, active tabs, links | | `--cometchat-neutral-color-300` | Incoming bubble background | `#fff` | Incoming message bubbles | | `--cometchat-neutral-color-400` | Secondary backgrounds, dividers | varies | Borders, secondary panels | | `--cometchat-neutral-color-500` | Muted text, placeholders | varies | Placeholder text, disabled states | @@ -100,9 +125,9 @@ This table maps every commonly used token to what it visually controls. Use this | `--cometchat-background-color-03` | Tertiary background | varies | Nested panels, cards | | `--cometchat-extended-primary-color-50` through `900` | Primary color scale (lightest to darkest) | See palette below | Hover states, gradients, shades | | `--cometchat-font-family` | All text in UI Kit | system default | Global typography | -| `--cometchat-text-color-highlight` | Highlighted/linked text | matches primary | Links, mentions, highlights | +| `--cometchat-text-color-highlight` | Highlighted or linked text | matches primary | Links, mentions, highlights | | `--cometchat-icon-color-highlight` | Highlighted icon color | matches primary | Active icons, selected states | -| `--cometchat-text-color-secondary` | Secondary/caption text | varies | Timestamps, subtitles, captions | +| `--cometchat-text-color-secondary` | Secondary or caption text | varies | Timestamps, subtitles, captions | | `--cometchat-icon-color-secondary` | Secondary icon color | varies | Inactive icons | | `--cometchat-primary-button-background` | Primary button fill | matches primary | Send button, action buttons | | `--cometchat-border-color-default` | Default border color | varies | Dividers, input borders | @@ -110,26 +135,16 @@ This table maps every commonly used token to what it visually controls. Use this | `--cometchat-success-color` | Success states | `#4caf50` | Online indicators, success messages | | `--cometchat-warning-color` | Warning states | `#ff9800` | Warning callouts | ---- - - -**CSS Specificity & Precedence Rules:** -1. Component-level overrides (`.cometchat-conversations { --var: val }`) take precedence over global overrides (`.cometchat { --var: val }`) -2. Dark mode overrides (`.cometchat[data-theme="dark"]`) take precedence over light mode defaults -3. CSS variable overrides only affect properties the UI Kit theme binds to that variable — they do NOT change layout or spacing -4. Always keep the `.cometchat` prefix to avoid leaking styles into the host app -5. `!important` should never be needed — if it is, your selector specificity is wrong - - -*** - -## Color Palette - -The primary color defines key actions, branding, and UI elements, while the extended primary palette provides variations for supporting components. +### Primary color palette -### Primary Color +What you’re changing: Inspect the default palette values for light and dark modes. +Where to change it: Reference only +Applies to: Default UI Kit palette +Default behavior: These are the values used when you do not override tokens. +Override: Override any of these tokens in your CSS. +Verify: When overridden, matching UI elements update. -#### Light Mode +#### Light mode @@ -149,9 +164,9 @@ The primary color defines key actions, branding, and UI elements, while the exte --cometchat-extended-primary-color-900: #5d49be; ``` -*** +What this does: Lists the default light-mode primary and extended palette values. -#### Dark Mode +#### Dark mode @@ -171,25 +186,26 @@ The primary color defines key actions, branding, and UI elements, while the exte --cometchat-extended-primary-color-900: #7460d9; ``` -### Extended Primary Colors +What this does: Lists the default dark-mode primary and extended palette values. -#### Light Mode +### Extended primary palette screenshots -#### Dark Mode - -*** - -## Complete End-to-End Example: Custom Brand Colors +### End-to-end example -**Step 1:** Add to `App.css`: +What you’re changing: Override light and dark mode primary palette. +File: `src/App.css` and `src/App.tsx` +Applies to: Global token overrides +Default behavior: Uses UI Kit default palette. +Override: Replace token values under `.cometchat` and `.cometchat[data-theme="dark"]`. +Verify: Primary accents change in both light and dark mode. ```css @import url("@cometchat/chat-uikit-react/css-variables.css"); @@ -211,51 +227,50 @@ The primary color defines key actions, branding, and UI elements, while the exte } ``` -**Step 2:** Ensure `App.tsx` imports the CSS: +What this does: Overrides the primary palette for both light and dark modes. ```tsx import "./App.css"; -// ... render CometChat UI Kit components + +export default function App() { + return
{/* UI Kit components */}
; +} ``` -**Expected result:** All primary-colored elements (outgoing bubbles, buttons, active states, links) change from purple (#6852d6) to orange (#f76808) in both light and dark modes. +What this does: Applies the CSS to the UI Kit root and sets the theme mode. -*** +## Customization matrix -## Common Failure Modes +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Primary brand color | `App.css` | `--cometchat-primary-color` | `.cometchat { --cometchat-primary-color: #f76808; }` | +| Incoming bubble background | `App.css` | `--cometchat-neutral-color-300` | `.cometchat { --cometchat-neutral-color-300: #feede1; }` | +| Dark mode primary color | `App.css` | `.cometchat[data-theme="dark"]` | `.cometchat[data-theme="dark"] { --cometchat-primary-color: #f76808; }` | +| Component-specific token | `App.css` | `.cometchat-` | `.cometchat-conversations { --cometchat-primary-color: #e63946; }` | - - +## Common pitfalls and fixes | Symptom | Cause | Fix | | --- | --- | --- | -| 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` | -| Selectors don't match | Using CSS Modules (hashed class names) | Move rules to a global stylesheet, not `*.module.css` | -| Only some elements changed color | Only overrode `--cometchat-primary-color` but not extended palette | Override the extended-primary-color scale too for full consistency | -| Dark mode unchanged | Only overrode light mode tokens | Add overrides in `.cometchat[data-theme="dark"]` selector too | -| Component-level override not working | Selector specificity too low | Use `.cometchat .cometchat-` for higher specificity | -| 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 CSS Variable Reference table above | - - - +| 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");` in `App.css`. | +| Selectors do not match | Using CSS Modules | Move rules to a global stylesheet, not `*.module.css`. | +| Only some elements changed color | Only `--cometchat-primary-color` overridden | Override the extended primary scale for consistent results. | +| Dark mode unchanged | Only light tokens overridden | Add overrides in `.cometchat[data-theme="dark"]`. | +| Component override not working | Selector specificity too low | Use `.cometchat .cometchat-` for higher specificity. | +| Styles leak into host app | Missing `.cometchat` scope prefix | Always scope overrides under `.cometchat`. | +| Token change has no visible effect | Token does not control expected element | Use the reference table above. ---- +## FAQ + +**Do I have to override every token?** +No. Override only the tokens you need; the rest use defaults. + +**Where do I find the full token list?** +Use the [css-variables.css source](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css). + +## Next steps -## Next Steps - - - - Global theming with CSS variables, fonts, and component-specific overrides - - - Customize incoming and outgoing message bubble colors per message type - - - Browse all available UI Kit components and their customization options - - - View the complete CSS variables file on GitHub - - +- [Theming Overview](/ui-kit/react/theme) +- [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling) +- [Components Overview](/ui-kit/react/components-overview) diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx index 6c90c5b51..d0098555e 100644 --- a/ui-kit/react/theme/message-bubble-styling.mdx +++ b/ui-kit/react/theme/message-bubble-styling.mdx @@ -3,58 +3,111 @@ title: "Message Bubble Styling" description: "Customize incoming and outgoing message bubble colors, backgrounds, and styles using CSS variables and class selectors in the CometChat React UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} +Customize incoming and outgoing message bubbles by direction and message type using UI Kit CSS variables and selectors. This page is for developers who need exact selectors and verified token usage. + +## When to use this + +- You want different colors for incoming and outgoing message bubbles. +- You need per-message-type styling (text, image, video, audio, file, poll, sticker). +- You want to style extension bubbles (whiteboard, document, polls, stickers, link previews). +- You need a deterministic selector pattern for AI or automated theming. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- Base stylesheet imported in `App.css`: `@import url("@cometchat/chat-uikit-react/css-variables.css");` +- `App.css` imported in your app entry (for example `src/App.tsx`). +- UI Kit rendered under a `.cometchat` root wrapper. +- Use global CSS (not CSS Modules) for overrides. + +## Quick start + +1. Add the base UI Kit variables to `src/App.css`. + +```css +@import url("@cometchat/chat-uikit-react/css-variables.css"); +``` + +What this does: Loads the UI Kit variables used by message bubbles. + +2. Override outgoing bubble colors in `src/App.css`. + +```css +@import url("@cometchat/chat-uikit-react/css-variables.css"); + +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { + --cometchat-primary-color: #f76808; + --cometchat-extended-primary-color-900: #fbaa75; +} +``` + +What this does: Sets outgoing bubble colors globally. + +3. Override incoming bubble colors in `src/App.css`. + +```css +@import url("@cometchat/chat-uikit-react/css-variables.css"); + +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body { + --cometchat-neutral-color-300: #feede1; +} +``` + +What this does: Sets incoming bubble background colors globally. + +4. Import the CSS file in `src/App.tsx`. + +```tsx +import "./App.css"; + +export default function App() { + return
{/* UI Kit components */}
; +} +``` + +What this does: Applies your bubble overrides to the UI Kit. + +5. Run your app and verify bubble colors change for incoming and outgoing messages. + +## Core concepts + **Quick Reference for AI Agents & Developers** ```css -/* Override outgoing bubble color */ +/* Outgoing bubbles */ .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { --cometchat-primary-color: #f76808; } -/* Override incoming bubble color */ +/* Incoming bubbles */ .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body { --cometchat-neutral-color-300: #feede1; } -/* Target a specific message type (e.g., image) */ +/* Specific type (image) */ .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message { --cometchat-primary-color: #f76808; } ``` - - -**AI Agent Styling Spec** - -**Goal:** Customize message bubble appearance (colors, backgrounds) per direction and message type -**Where:** `App.css` (global) — import in app entry via `import "./App.css";` -**Scope:** All selectors must be under `.cometchat` root -**Base selector:** `.cometchat .cometchat-message-bubble-(incoming|outgoing) .cometchat-message-bubble__body` -**Type modifier:** Append `.cometchat-message-bubble__-message` to target specific types -**Valid types:** `text`, `image`, `video`, `audio`, `file`, `delete`, `meeting`, `whiteboard`, `document`, `poll`, `sticker` -**Key tokens:** `--cometchat-primary-color` (outgoing bg), `--cometchat-neutral-color-300` (incoming bg), `--cometchat-extended-primary-color-900` (outgoing shade) -**Constraints:** Global CSS only (no CSS Modules), no `!important`, type selectors override generic bubble selectors +What this does: Shows the canonical selector pattern for outgoing, incoming, and typed message bubbles. -## Introduction +- Directional classes: Incoming and outgoing bubbles use different selectors. +- Message types: Each message type has a `__-message` suffix. +- Token usage: Use `--cometchat-primary-color` for outgoing, `--cometchat-neutral-color-300` for incoming. -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. +## Implementation - -**Prerequisites before applying any CSS customization:** -1. Import the base stylesheet: `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your `App.css` -2. Import your CSS file at the app entry: `import "./App.css";` in `App.tsx` -3. All selectors assume the UI Kit renders under a `.cometchat` root wrapper -4. Use **global CSS** (not CSS Modules with hashed class names) — hashed selectors won't match - +### Selector pattern ---- - -## Selector Pattern - -Use this table to construct the correct CSS selector for any message bubble target. AI agents should use this pattern to generalize — do not guess selectors. +What you’re changing: Choose the correct selector for direction and message type. +Where to change it: `src/App.css` +Applies to: Message bubble selectors +Default behavior: UI Kit uses default bubble styling. +Override: Use the selector patterns below. +Verify: Only the targeted direction or type changes. | Target | Selector Pattern | | --- | --- | @@ -65,47 +118,35 @@ Use this table to construct the correct CSS selector for any message bubble targ | Specific type (incoming) | `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__-message` | | Action bubbles (no direction) | `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble` | -**Where `` is one of:** `text`, `image`, `video`, `audio`, `file`, `delete`, `meeting` (direct call), `whiteboard`, `document`, `poll`, `sticker` +Where `` is one of: `text`, `image`, `video`, `audio`, `file`, `delete`, `meeting`, `whiteboard`, `document`, `poll`, `sticker`. -Link Preview bubbles reuse the `text-message` type selector since link previews are rendered inside text messages. +Link Preview bubbles reuse the `text-message` type selector since link previews render inside text messages. ---- - -## CSS Variable Reference +### CSS variable reference -These are the CSS variables (tokens) used across message bubble styling. This table tells you exactly what each token controls — do not assume a token affects something not listed here. +What you’re changing: Select the correct token for the bubble property you want to change. +Where to change it: `src/App.css` +Applies to: CSS variables listed below +Default behavior: UI Kit uses default token values. +Override: Replace token values in your CSS. +Verify: Only the mapped UI elements change. | Variable | What It Controls | Default (Light) | Commonly Used On | | --- | --- | --- | --- | -| `--cometchat-primary-color` | Outgoing bubble background, primary accent | `#6852d6` | Outgoing bubbles (all types), action bubble accent | -| `--cometchat-neutral-color-300` | Incoming bubble background | `#fff` | Incoming bubbles (all types) | -| `--cometchat-extended-primary-color-900` | Outgoing bubble shade/gradient variant | `#5d49be` | Outgoing text bubble, link preview | +| `--cometchat-primary-color` | Outgoing bubble background, primary accent | `#6852d6` | Outgoing bubbles, action bubble accent | +| `--cometchat-neutral-color-300` | Incoming bubble background | `#fff` | Incoming bubbles | +| `--cometchat-extended-primary-color-900` | Outgoing bubble shade | `#5d49be` | Outgoing text bubble, link preview | | `--cometchat-extended-primary-color-800` | Outgoing bubble secondary shade | `#5745b4` | Direct call outgoing bubble | | `--cometchat-extended-primary-color-700` | Outgoing bubble tertiary shade | `#4f3ea3` | Poll outgoing bubble | | `--cometchat-neutral-color-400` | Incoming bubble secondary shade | varies | Link preview incoming | | `--cometchat-primary-button-background` | Primary button fill inside bubbles | matches primary | Whiteboard/document incoming buttons | -| `--cometchat-text-color-secondary` | Secondary/caption text color | varies | Action bubble text | +| `--cometchat-text-color-secondary` | Secondary text color | varies | Action bubble text | | `--cometchat-icon-color-secondary` | Secondary icon color | varies | Action bubble icons | | `--cometchat-border-color-default` | Default border color | varies | Action bubble borders | ---- - - -**CSS Specificity & Precedence Rules:** -1. Message-type selectors (e.g., `__text-message`) override "All Message Bubbles" selectors -2. Always keep the `.cometchat` prefix to avoid leaking styles into the host app -3. Component-level variable overrides (`.cometchat-message-list { --var: val }`) override global overrides (`.cometchat { --var: val }`) -4. CSS variable overrides only affect properties the UI Kit theme binds to that variable — they do NOT change layout or spacing -5. `!important` should never be needed — if it is, your selector specificity is wrong - - ---- - -## 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 Shown below is the default chat interface. @@ -113,92 +154,67 @@ Shown below is the default chat interface. -*** - -### Styling - -#### Outgoing Message Bubbles +#### Outgoing message bubbles -**Selectors:** -- `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body` - -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing bubble background | -| `--cometchat-extended-primary-color-900` | Outgoing bubble shade | - -The customized chat interface is displayed below. +What you’re changing: Outgoing bubble colors. +File: `src/App.css` +Applies to: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body` +Default behavior: Uses the UI Kit default primary palette. +Override: Set `--cometchat-primary-color` and `--cometchat-extended-primary-color-900`. +Verify: Outgoing bubbles change to your palette. -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; } ``` -**Expected result:** All outgoing message bubbles change from purple to orange (#f76808) with a lighter orange shade (#fbaa75). - -*** +What this does: Sets outgoing bubble background and shade. -#### Incoming Message Bubbles - -**Selectors:** -- `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body` - -**Tokens used:** +**Expected result:** All outgoing message bubbles change from purple to orange (#f76808) with a lighter orange shade (#fbaa75). -| Token | Controls | -| --- | --- | -| `--cometchat-neutral-color-300` | Incoming bubble background | +#### Incoming message bubbles -The customized chat interface is displayed below. +What you’re changing: Incoming bubble background. +File: `src/App.css` +Applies to: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body` +Default behavior: Uses the UI Kit default neutral background. +Override: Set `--cometchat-neutral-color-300`. +Verify: Incoming bubbles change to your color. -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; } ``` -**Expected result:** All incoming message bubbles change from white/light to orange (#f76808). - -*** - -#### All Message Bubbles +What this does: Sets incoming bubble background color. -**Selectors:** -- `.cometchat .cometchat-message-bubble .cometchat-message-bubble__body` - -**Tokens used:** +**Expected result:** All incoming message bubbles change from white/light to orange (#f76808). -| Token | Controls | -| --- | --- | -| `--cometchat-neutral-color-300` | Incoming bubble background | -| `--cometchat-primary-color` | Outgoing bubble background | -| `--cometchat-extended-primary-color-900` | Outgoing bubble shade | +#### All message bubbles -The customized chat interface is displayed below. +What you’re changing: Both incoming and outgoing bubble colors. +File: `src/App.css` +Applies to: `.cometchat .cometchat-message-bubble .cometchat-message-bubble__body` +Default behavior: Uses the UI Kit default palette. +Override: Set primary and neutral tokens in one selector. +Verify: Both incoming and outgoing bubbles update. -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; @@ -206,15 +222,18 @@ Use the following code to achieve the customization shown above. } ``` -**Expected result:** Both incoming and outgoing bubbles use orange (#f76808), with outgoing shade set to lighter orange (#fbaa75). +What this does: Sets both incoming and outgoing bubble colors together. -*** - -### Complete End-to-End Example +**Expected result:** Both incoming and outgoing bubbles use orange (#f76808), with outgoing shade set to lighter orange (#fbaa75). -To apply custom bubble colors in your app: +### Complete end-to-end example -**Step 1:** Add to `App.css`: +What you’re changing: Apply custom incoming and outgoing bubble colors. +Files: `src/App.css`, `src/App.tsx` +Applies to: Incoming and outgoing bubble selectors +Default behavior: Uses UI Kit default bubble colors. +Override: Add the CSS and import it in your app entry. +Verify: Outgoing bubbles use orange and incoming bubbles use light peach. ```css @import url("@cometchat/chat-uikit-react/css-variables.css"); @@ -231,53 +250,42 @@ To apply custom bubble colors in your app: } ``` -**Step 2:** Ensure `App.tsx` imports the CSS: +What this does: Sets outgoing and incoming bubble colors in one file. ```tsx import "./App.css"; -// ... render CometChat UI Kit components -``` - -**Expected result:** Outgoing bubbles use orange (#f76808) with lighter shade (#fbaa75); incoming bubbles use light peach (#feede1). - -*** - -## 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 get up to speed with CSS customization. +export default function App() { + return
{/* UI Kit components */}
; +} +``` -*** +What this does: Applies the bubble styles to your UI Kit components. -### Text Message Bubble +**Expected result:** Outgoing bubbles use orange (#f76808) with lighter shade (#fbaa75); incoming bubbles use light peach (#feede1). -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message` +### Message types -**Tokens used:** +Each message type has a dedicated selector suffix. Use the exact suffix to target a type. -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing text bubble background | -| `--cometchat-neutral-color-300` | Incoming text bubble background | +#### Text message bubble -Shown below is the default chat interface. +What you’re changing: Text message bubble colors by direction. +File: `src/App.css` +Applies to: `__text-message` selectors +Default behavior: Uses UI Kit default colors. +Override: Set primary and neutral tokens. +Verify: Text bubbles change to your colors. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Text Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -292,43 +300,29 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - -**Expected result:** Outgoing text bubbles change to orange (#f76808); incoming text bubbles change to light peach (#feede1). - -*** - -### Image Message Bubble - -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__image-message` +What this does: Sets separate colors for incoming and outgoing text bubbles. -**Tokens used:** +**Expected result:** Outgoing text bubbles change to orange (#f76808); incoming text bubbles change to light peach (#feede1). -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing image bubble background | -| `--cometchat-neutral-color-300` | Incoming image bubble background | +#### Image message bubble -Shown below is the default chat interface. +What you’re changing: Image message bubble colors by direction. +File: `src/App.css` +Applies to: `__image-message` selectors +Default behavior: Uses UI Kit default colors. +Override: Set primary and neutral tokens. +Verify: Image bubbles change to your colors. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Image Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -343,43 +337,29 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - - -**Expected result:** Outgoing image bubbles change to orange (#f76808); incoming image bubbles change to light peach (#feede1). - -*** - -### Video Message Bubble -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__video-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__video-message` +What this does: Sets separate colors for incoming and outgoing image bubbles. -**Tokens used:** +**Expected result:** Outgoing image bubbles change to orange (#f76808); incoming image bubbles change to light peach (#feede1). -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing video bubble background | -| `--cometchat-neutral-color-300` | Incoming video bubble background | +#### Video message bubble -Shown below is the default chat interface. +What you’re changing: Video message bubble colors by direction. +File: `src/App.css` +Applies to: `__video-message` selectors +Default behavior: Uses UI Kit default colors. +Override: Set primary and neutral tokens. +Verify: Video bubbles change to your colors. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Video Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -394,43 +374,29 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - -**Expected result:** Outgoing video bubbles change to orange (#f76808); incoming video bubbles change to light peach (#feede1). +What this does: Sets separate colors for incoming and outgoing video bubbles. -*** - -### Audio Message Bubble - -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__audio-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__audio-message` - -**Tokens used:** +**Expected result:** Outgoing video bubbles change to orange (#f76808); incoming video bubbles change to light peach (#feede1). -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing audio bubble background, incoming audio accent | -| `--cometchat-neutral-color-300` | Incoming audio bubble background | +#### Audio message bubble -Shown below is the default chat interface. +What you’re changing: Audio message bubble colors by direction. +File: `src/App.css` +Applies to: `__audio-message` selectors +Default behavior: Uses UI Kit default colors. +Override: Set primary and neutral tokens. +Verify: Audio bubbles change to your colors. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Audio Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -446,43 +412,29 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - - -**Expected result:** Outgoing audio bubbles change to orange (#f76808); incoming audio bubbles change to light peach (#feede1) with orange accent for playback controls. - -*** -### File Message Bubble +What this does: Sets outgoing and incoming audio bubble colors and accent. -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__file-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__file-message` - -**Tokens used:** +**Expected result:** Outgoing audio bubbles change to orange (#f76808); incoming audio bubbles change to light peach (#feede1) with orange accent for playback controls. -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing file bubble background, incoming file accent | -| `--cometchat-neutral-color-300` | Incoming file bubble background | +#### File message bubble -Shown below is the default chat interface. +What you’re changing: File message bubble colors by direction. +File: `src/App.css` +Applies to: `__file-message` selectors +Default behavior: Uses UI Kit default colors. +Override: Set primary and neutral tokens. +Verify: File bubbles change to your colors. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing File Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -498,43 +450,29 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - - -**Expected result:** Outgoing file bubbles change to orange (#f76808); incoming file bubbles change to light peach (#feede1) with orange file icon accent. - -*** - -### Delete Message Bubble -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__delete-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__delete-message` +What this does: Sets outgoing and incoming file bubble colors and accents. -**Tokens used:** +**Expected result:** Outgoing file bubbles change to orange (#f76808); incoming file bubbles change to light peach (#feede1) with orange file icon accent. -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing delete bubble background | -| `--cometchat-neutral-color-300` | Incoming delete bubble background | +#### Delete message bubble -Shown below is the default chat interface. +What you’re changing: Deleted message placeholder bubble colors by direction. +File: `src/App.css` +Applies to: `__delete-message` selectors +Default behavior: Uses UI Kit default colors. +Override: Set primary and neutral tokens. +Verify: Deleted message placeholders change to your colors. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Delete Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -549,47 +487,29 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - -**Expected result:** Outgoing delete placeholder bubbles change to orange (#f76808); incoming delete placeholder bubbles change to light peach (#feede1). +What this does: Sets outgoing and incoming deleted-message bubble colors. -*** - -### Action Message Bubble - -Action messages (e.g., "User joined the group") use a different selector pattern — they are not directional (no incoming/outgoing). - -**Selector:** -- `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble` - -**Tokens used:** +**Expected result:** Outgoing delete placeholder bubbles change to orange (#f76808); incoming delete placeholder bubbles change to light peach (#feede1). -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Action bubble accent color | -| `background-color` | Action bubble background (direct CSS property, not a variable) | -| `--cometchat-text-color-secondary` | Action bubble text color | -| `--cometchat-icon-color-secondary` | Action bubble icon color | -| `--cometchat-border-color-default` | Action bubble border color | +#### Action message bubble -Shown below is the default chat interface. +What you’re changing: Action message bubble banner styles. +File: `src/App.css` +Applies to: `.cometchat-action-bubble` +Default behavior: Uses UI Kit default action banner styles. +Override: Set token colors and background. +Verify: Action banners change to your palette. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css .cometchat .cometchat-message-bubble__body .cometchat-action-bubble { --cometchat-primary-color: #f76808; background-color: #feede1; @@ -598,46 +518,29 @@ The customized chat interface is displayed below. --cometchat-border-color-default: #f76808; } ``` - - - -**Expected result:** Action message banners change to light peach background (#feede1) with orange text, icons, and borders (#f76808). - -*** - -### Direct Call Message Bubble - -Direct call messages use the `meeting-message` type selector (not `call-message`). -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message` +What this does: Styles action banners with a custom background and accents. -**Tokens used:** +**Expected result:** Action message banners change to light peach background (#feede1) with orange text, icons, and borders (#f76808). -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Bubble accent and background | -| `--cometchat-extended-primary-color-800` | Outgoing bubble secondary shade | -| `--cometchat-neutral-color-300` | Incoming bubble background | +#### Direct call message bubble -Shown below is the default chat interface. +What you’re changing: Direct call bubble colors by direction. +File: `src/App.css` +Applies to: `__meeting-message` selectors +Default behavior: Uses UI Kit default call bubble styles. +Override: Set primary, extended, and neutral tokens. +Verify: Direct call bubbles change to your palette. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Direct Call Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -654,51 +557,33 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - - -**Expected result:** Outgoing direct call bubbles change to orange (#f76808) with lighter shade (#fbaa75); incoming direct call bubbles change to light peach (#feede1) with orange accent. - -*** -### Default Call Message Bubble +What this does: Styles direct call bubbles for outgoing and incoming directions. -Default call messages (ringing calls) use the same action bubble selector as Action Messages. +**Expected result:** Outgoing direct call bubbles change to orange (#f76808) with lighter shade (#fbaa75); incoming direct call bubbles change to light peach (#feede1) with orange accent. -**Selector:** -- `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble` +#### Default call message bubble -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Call action bubble accent | -| `background-color` | Call action bubble background (direct CSS property) | -| `--cometchat-text-color-secondary` | Call action text color | -| `--cometchat-icon-color-secondary` | Call action icon color | -| `--cometchat-border-color-default` | Call action border color | +What you’re changing: Default call action banner styles. +File: `src/App.css` +Applies to: `.cometchat-action-bubble` +Default behavior: Uses UI Kit default action banner styles. +Override: Set token colors and background. +Verify: Default call banners change to your palette. Styling default call message bubbles also affects Action Message bubbles since they share the same `.cometchat-action-bubble` selector. To style them independently, use more specific parent selectors if available. -Shown below is the default chat interface. - -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css .cometchat .cometchat-message-bubble__body .cometchat-action-bubble { --cometchat-primary-color: #f76808; background-color: #feede1; @@ -707,46 +592,31 @@ The customized chat interface is displayed below. --cometchat-border-color-default: #f76808; } ``` - - -**Expected result:** Default call action banners change to light peach background (#feede1) with orange text, icons, and borders (#f76808). +What this does: Applies the same banner styling to default call messages. -*** +**Expected result:** Default call action banners change to light peach background (#feede1) with orange text, icons, and borders (#f76808). ### Extensions -#### Collaborative Whiteboard Bubble - -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message` +#### Collaborative whiteboard bubble -**Tokens used:** - -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Bubble accent and background | -| `--cometchat-primary-button-background` | Incoming whiteboard "Open" button fill | -| `--cometchat-neutral-color-300` | Incoming bubble background | - -Shown below is the default chat interface. +What you’re changing: Whiteboard extension bubble colors by direction. +File: `src/App.css` +Applies to: `__whiteboard-message` selectors +Default behavior: Uses UI Kit default extension styling. +Override: Set primary, button, and neutral tokens. +Verify: Whiteboard bubbles change to your palette. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Collaborative Whiteboard Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -763,44 +633,29 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - - -**Expected result:** Outgoing whiteboard bubbles change to orange (#f76808); incoming whiteboard bubbles change to light peach (#feede1) with orange button and accent. -*** +What this does: Styles outgoing and incoming whiteboard bubbles, including the button. -#### Collaborative Document Bubble - -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__document-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__document-message` - -**Tokens used:** +**Expected result:** Outgoing whiteboard bubbles change to orange (#f76808); incoming whiteboard bubbles change to light peach (#feede1) with orange button and accent. -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Bubble accent and background | -| `--cometchat-primary-button-background` | Incoming document "Open" button fill | -| `--cometchat-neutral-color-300` | Incoming bubble background | +#### Collaborative document bubble -Shown below is the default chat interface. +What you’re changing: Document extension bubble colors by direction. +File: `src/App.css` +Applies to: `__document-message` selectors +Default behavior: Uses UI Kit default extension styling. +Override: Set primary, button, and neutral tokens. +Verify: Document bubbles change to your palette. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Collaborative Document Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -817,44 +672,29 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - -**Expected result:** Outgoing document bubbles change to orange (#f76808); incoming document bubbles change to light peach (#feede1) with orange button and accent. - -*** - -#### Polls Bubble - -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__poll-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__poll-message` +What this does: Styles outgoing and incoming document bubbles, including the button. -**Tokens used:** +**Expected result:** Outgoing document bubbles change to orange (#f76808); incoming document bubbles change to light peach (#feede1) with orange button and accent. -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Bubble accent and background | -| `--cometchat-extended-primary-color-700` | Outgoing poll progress bar shade | -| `--cometchat-neutral-color-300` | Incoming bubble background | +#### Polls bubble -Shown below is the default chat interface. +What you’re changing: Poll message bubble colors by direction. +File: `src/App.css` +Applies to: `__poll-message` selectors +Default behavior: Uses UI Kit default poll styling. +Override: Set primary, extended, and neutral tokens. +Verify: Poll bubbles change to your palette. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Poll Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -871,43 +711,29 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - - -**Expected result:** Outgoing poll bubbles change to orange (#f76808) with lighter progress bars (#fbaa75); incoming poll bubbles change to light peach (#feede1) with orange accent. - -*** -#### Stickers Bubble +What this does: Styles poll bubbles and their progress bars. -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message` +**Expected result:** Outgoing poll bubbles change to orange (#f76808) with lighter progress bars (#fbaa75); incoming poll bubbles change to light peach (#feede1) with orange accent. -**Tokens used:** +#### Stickers bubble -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing sticker bubble background | -| `--cometchat-neutral-color-300` | Incoming sticker bubble background | - -Shown below is the default chat interface. +What you’re changing: Sticker bubble colors by direction. +File: `src/App.css` +Applies to: `__sticker-message` selectors +Default behavior: Uses UI Kit default sticker styling. +Override: Set primary and neutral tokens. +Verify: Sticker bubbles change to your palette. -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Sticker Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -922,51 +748,33 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - - -**Expected result:** Outgoing sticker bubbles change to orange (#f76808); incoming sticker bubbles change to light peach (#feede1). -*** +What this does: Sets separate colors for incoming and outgoing sticker bubbles. -#### Link Preview Bubble - -Link previews render inside text message bubbles, so they use the `text-message` type selector. - -**Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message` +**Expected result:** Outgoing sticker bubbles change to orange (#f76808); incoming sticker bubbles change to light peach (#feede1). -**Tokens used:** +#### Link preview bubble -| Token | Controls | -| --- | --- | -| `--cometchat-primary-color` | Outgoing link preview bubble background | -| `--cometchat-extended-primary-color-900` | Outgoing link preview shade | -| `--cometchat-neutral-color-400` | Incoming link preview secondary shade | -| `--cometchat-neutral-color-300` | Incoming link preview bubble background | +What you’re changing: Link preview bubble colors. +File: `src/App.css` +Applies to: `__text-message` selectors +Default behavior: Link previews use text-message styling. +Override: Set primary and neutral tokens for text messages. +Verify: Link preview bubbles change to your palette. -Styling link preview bubbles also affects regular text message bubbles since they share the same `__text-message` selector. This is by design — link previews are a sub-feature of text messages. +Styling link preview bubbles also affects regular text message bubbles since they share the same `__text-message` selector. This is expected because link previews render inside text messages. -Shown below is the default chat interface. - -The customized chat interface is displayed below. - -**Complete CSS:** - - - -```css lines +```css /* Outgoing Link Preview Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -983,49 +791,45 @@ The customized chat interface is displayed below. --cometchat-neutral-color-300: #feede1; } ``` - - + +What this does: Styles link preview bubbles by reusing text-message selectors. **Expected result:** Outgoing link preview bubbles change to orange (#f76808) with lighter shade (#fbaa75); incoming link preview bubbles change to light peach (#feede1) with orange secondary shade (#fbaa75). -*** +## Customization matrix -## Common Failure Modes +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Outgoing bubble color | `App.css` | `--cometchat-primary-color` | `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { --cometchat-primary-color: #f76808; }` | +| Incoming bubble color | `App.css` | `--cometchat-neutral-color-300` | `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body { --cometchat-neutral-color-300: #feede1; }` | +| Text message only | `App.css` | `__text-message` selector | `.cometchat-message-bubble__body.cometchat-message-bubble__text-message { ... }` | +| Poll bubble progress | `App.css` | `--cometchat-extended-primary-color-700` | `.cometchat-message-bubble__poll-message { --cometchat-extended-primary-color-700: #fbaa75; }` | - - +## Common pitfalls and fixes | Symptom | Cause | Fix | | --- | --- | --- | -| 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` | -| Selectors don't match | Using CSS Modules (hashed class names) | Move rules to a global stylesheet, not `*.module.css` | -| Selectors don't match | Missing `.cometchat` wrapper or different mount container | Ensure UI Kit renders inside a `.cometchat` ancestor | -| Wrong bubble styled | Used `__text-message` instead of `__image-message` (or vice versa) | Check the message type class suffix in the Selector Pattern table above | -| Token change has no visible effect | Token doesn't control the property you expect | Check the CSS Variable Reference table for what each token controls | -| Styles leak into host app | Missing `.cometchat` scope prefix | Always scope selectors under `.cometchat` | -| Dark mode looks wrong | Overriding light-mode tokens without dark-mode equivalents | Override tokens in both `.cometchat` and `.cometchat[data-theme="dark"]` | -| Action and Default Call bubbles styled together | Both use `.cometchat-action-bubble` selector | This is expected — they share the same selector. Use more specific parent selectors if you need to differentiate | -| Link preview styled but text messages also changed | Both use `__text-message` selector | This is expected — link previews are rendered inside text messages | - - - - ---- - -## Next Steps - - - - Full reference of all CSS variables and color tokens available in the UI Kit - - - Global theming with CSS variables, fonts, and component-specific overrides - - - Customize the message list component that renders these bubbles - - - Override message rendering with custom templates and views - - +| 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`. | +| Selectors do not match | Using CSS Modules (hashed class names) | Move rules to a global stylesheet, not `*.module.css`. | +| Selectors do not match | Missing `.cometchat` wrapper | Ensure UI Kit renders inside a `.cometchat` ancestor. | +| Wrong bubble styled | Incorrect message type suffix | Use the Selector Pattern table for exact suffixes. | +| Token change has no visible effect | Token does not control the property | Use the CSS variable reference table above. | +| Styles leak into host app | Missing `.cometchat` scope prefix | Always scope selectors under `.cometchat`. | +| Dark mode looks wrong | Only light-mode tokens overridden | Override tokens in both light and dark mode selectors. | +| Action and Default Call bubbles styled together | Both use `.cometchat-action-bubble` | Use more specific parent selectors if you need to differentiate. | +| Link preview styled but text messages also changed | Both use `__text-message` selector | This is expected because link previews render inside text messages. | + +## FAQ + +**Which selector should I use for a specific message type?** +Use `.cometchat-message-bubble__-message` with the direction wrapper from the Selector Pattern table. + +**Can I style link previews without affecting text messages?** +Not directly. Link previews render inside text messages and share the same selector. + +## Next steps + +- [Color Resources](/ui-kit/react/theme/color-resources) +- [Theming Overview](/ui-kit/react/theme) +- [Message List](/ui-kit/react/message-list) From 84e400f0df87e19d5ddb2618f1dc35c61cab0a01 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Sun, 22 Feb 2026 13:49:54 +0530 Subject: [PATCH 60/84] components --- ui-kit/react/ai-assistant-chat.mdx | 171 +++++-- ui-kit/react/call-buttons.mdx | 141 ++++-- ui-kit/react/call-logs.mdx | 174 +++++-- ui-kit/react/components-overview.mdx | 151 ++++-- ui-kit/react/conversations.mdx | 658 ++++++++++++--------------- ui-kit/react/group-members.mdx | 203 +++++++-- ui-kit/react/groups.mdx | 194 ++++++-- ui-kit/react/incoming-call.mdx | 168 +++++-- ui-kit/react/message-composer.mdx | 172 +++++-- ui-kit/react/message-header.mdx | 175 +++++-- ui-kit/react/message-list.mdx | 203 +++++++-- ui-kit/react/message-template.mdx | 157 +++++-- ui-kit/react/outgoing-call.mdx | 165 +++++-- ui-kit/react/search.mdx | 189 ++++++-- ui-kit/react/thread-header.mdx | 131 ++++-- ui-kit/react/users.mdx | 197 ++++++-- 16 files changed, 2352 insertions(+), 897 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 779d91675..72922597d 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -3,6 +3,54 @@ title: "AI Assistant Chat" description: "Build an AI agent chat experience with streaming responses, quick suggestions, chat history, and custom tools using the CometChatAIAssistantChat component." --- +Build an AI assistant chat surface with streaming responses and suggestions. + +## When to use this + +- You need a dedicated AI agent chat experience. +- You want streaming responses and suggested prompts. +- You need a chat history sidebar for AI conversations. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- A `CometChat.User` representing the AI agent. + +## Quick start + +1. Add the component to your UI. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; + +export default function AIAssistantChatDemo() { + const [agent, setAgent] = React.useState(); + + React.useEffect(() => { + CometChat.getUser("assistant_uid").then((u) => setAgent(u)); + }, []); + + return agent ? : null; +} +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- `user` is required and represents the AI agent. +- Use `streamingSpeed` to control response pace. +- Use `suggestedMessages` to show quick prompts. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -27,6 +75,7 @@ React.useEffect(() => { showCloseButton={true} /> ``` +What this does: Shows the code for this step. @@ -41,7 +90,13 @@ React.useEffect(() => { **Events:** none emitted directly -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. `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. @@ -78,6 +133,7 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. @@ -105,6 +161,7 @@ export function AIAssistantChatDemo() { } ``` +What this does: Shows the code for this step. @@ -115,11 +172,17 @@ export function AIAssistantChatDemo() { --- -## Actions +### Actions + +What you’re changing: Actions. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. [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). @@ -153,6 +216,7 @@ export function AIAssistantChatDemo() { } ``` +What this does: Shows the code for this step. @@ -184,11 +248,12 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. -#### 2. onCloseButtonClicked +##### 2. onCloseButtonClicked Called when the header close button is clicked (visible when `showCloseButton` is true). @@ -221,6 +286,7 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. @@ -252,11 +318,12 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. -#### 3. onSendButtonClick +##### 3. onSendButtonClick Called when the composer send button is clicked. @@ -288,6 +355,7 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. @@ -318,11 +386,12 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. -#### 4. onError +##### 4. onError Listen to errors from the underlying header, list, or composer. @@ -353,6 +422,7 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. @@ -381,6 +451,7 @@ export function AIAssistantChatDemo() { ) } ``` +What this does: Shows the code for this step. @@ -388,11 +459,17 @@ export function AIAssistantChatDemo() { --- -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app’s design requirements, you can customize the appearance of the Assistant Chat component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style You can set the css of the Assistant Chat Component to customize the styling. @@ -423,6 +500,7 @@ export function AIAssistantChatDemo = () => { ); } ``` +What this does: Shows the code for this step. @@ -448,6 +526,7 @@ export function AIAssistantChatDemo = () => { ); } ``` +What this does: Shows the code for this step. @@ -479,11 +558,12 @@ export function AIAssistantChatDemo = () => { background: #30a46c; } ``` +What this does: Shows the code for this step. -### Functionality +#### Functionality These props tailor the experience. Most message options (copy/edit/delete/react, receipts, date separators, etc.) are disabled by default for assistant chats. @@ -515,6 +595,7 @@ export function AIAssistantChatDemo = () => { ) } ``` +What this does: Shows the code for this step. @@ -545,6 +626,7 @@ export function AIAssistantChatDemo = () => { ); } ``` +What this does: Shows the code for this step. @@ -575,9 +657,9 @@ export function AIAssistantChatDemo = () => { | `loadLastAgentConversation` | Loads the most recent existing agent conversation if one is available. | `loadLastAgentConversation={true}` | | `parentMessageId` | The parent message ID to load a specific agent conversation. Takes priority over `loadLastAgentConversation`. | `parentMessageId={12345}` | -### Advanced +#### Advanced -#### Header Views +##### Header Views Customize header sections using the following props: `headerItemView`, `headerTitleView`, `headerSubtitleView`, `headerLeadingView`, `headerTrailingView`, and `headerAuxiliaryButtonView`. These customizations are done in the similar way as the [Message Header](/ui-kit/react/message-header#advanced) component. @@ -585,7 +667,7 @@ Customize header sections using the following props: `headerItemView`, `headerTi The header’s "New Chat" and "History" buttons are built-in. You can override them by providing a custom `headerAuxiliaryButtonView`. -#### Assistant Tools +##### Assistant Tools Pass an instance of `CometChatAIAssistantTools` to enable tool/function calls during assistant replies. @@ -621,6 +703,7 @@ export function AIAssistantChatDemo = () => { ); ``` +What this does: Shows the code for this step. @@ -656,11 +739,12 @@ export function AIAssistantChatDemo = () => { ); } ``` +What this does: Shows the code for this step. -#### Empty Chat Image View +##### Empty Chat Image View Provide a custom image for the empty state using `emptyChatImageView`. @@ -692,6 +776,7 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. @@ -718,11 +803,12 @@ export function AIAssistantChatDemo() { ) } ``` +What this does: Shows the code for this step. -#### Empty Chat Greeting View +##### Empty Chat Greeting View Override the empty state greeting message view using the `emptyChatGreetingView` prop. @@ -759,6 +845,7 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. @@ -790,6 +877,7 @@ export function AIAssistantChatDemo() { ) } ``` +What this does: Shows the code for this step. @@ -814,10 +902,11 @@ export function AIAssistantChatDemo() { color: #6852d6; } ``` +What this does: Shows the code for this step. -#### Empty Chat Intro Message View +##### Empty Chat Intro Message View You can override the empty chat intro message view using the `emptyChatIntroMessageView` prop. @@ -853,6 +942,7 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. @@ -883,6 +973,7 @@ export function AIAssistantChatDemo() { ); } ``` +What this does: Shows the code for this step. @@ -907,10 +998,11 @@ export function AIAssistantChatDemo() { margin: 10px 0; } ``` +What this does: Shows the code for this step. -#### Templates +##### Templates [CometChatMessageTemplate](/ui-kit/react/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to [CometChatMessageTemplate](/ui-kit/react/message-template). @@ -949,6 +1041,7 @@ export function AIAssistantChatDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -985,6 +1078,7 @@ export function AIAssistantChatDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -1010,19 +1104,32 @@ export function AIAssistantChatDemo() { --- -## Next Steps - - - - Overview of all AI capabilities in the UI Kit - - - Render messages in a conversation - - - Customize message bubble rendering - - - Customize the conversation header - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Set agent | `CometChatAIAssistantChat` | `user` | `user={agent}` | +| Streaming speed | `CometChatAIAssistantChat` | `streamingSpeed` | `streamingSpeed={30}` | +| Suggested messages | `CometChatAIAssistantChat` | `suggestedMessages` | `suggestedMessages={["Help"]}` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Assistant does not render | Agent user missing | Fetch the agent `CometChat.User` first | +| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | +| No suggestions | `suggestedMessages` empty | Provide an array of suggestions | + +## FAQ + +**Do I need a CometChat user for the agent?** +Yes. Pass the AI agent as a `CometChat.User`. + +**Can I change suggestions dynamically?** +Yes. Update `suggestedMessages` prop. + +## Next steps + +- [AI Features](/ui-kit/react/ai-features) +- [Message List](/ui-kit/react/message-list) +- [Message Composer](/ui-kit/react/message-composer) diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index 0b516d5ef..b6cfbdce7 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -3,6 +3,44 @@ title: "Call Buttons" description: "Add voice and video call buttons to initiate calls using the CometChatCallButtons component." --- +Render voice and video call buttons for a user or group. + +## When to use this + +- You want call buttons in chat headers. +- You need to start audio or video calls. +- You want to hide specific call types. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `@cometchat/calls-sdk-javascript` installed. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- Provide `user` or `group`. + +## Quick start + +1. Add the component to your UI. + +```tsx +import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; + +; +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- Use `user` or `group` to target calls. +- Hide buttons with `hideVoiceCallButton` or `hideVideoCallButton`. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -24,6 +62,7 @@ import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; hideVoiceCallButton={false} /> ``` +What this does: Shows the code for this step. @@ -38,7 +77,13 @@ import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; **Events:** `ccCallRejected`, `ccCallEnded`, `ccOutgoingCall`, `ccMessageSent` -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. 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. @@ -51,9 +96,15 @@ The `Call Button` is a Component provides users with the ability to make calls, **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 +### Usage + +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. -### Integration +#### Integration @@ -74,6 +125,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` +What this does: Shows the code for this step. @@ -95,14 +147,15 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` +What this does: Shows the code for this step. -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. 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. @@ -130,6 +183,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` +What this does: Shows the code for this step. @@ -157,6 +211,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` +What this does: Shows the code for this step. @@ -164,7 +219,7 @@ export default CallButtonDemo; *** -### Filters +#### Filters You can set `CallSettingsBuilder` in the Call Buttons Component to customise the calling experience. To know more about the filters available please refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings). @@ -204,6 +259,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` +What this does: Shows the code for this step. @@ -242,6 +298,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` +What this does: Shows the code for this step. @@ -249,7 +306,7 @@ export default CallButtonDemo; *** -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -289,6 +346,7 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { //Your Code }); ``` +What this does: Shows the code for this step. @@ -307,6 +365,7 @@ ccOutgoingCall?.unsubscribe(); ccMessageSent?.unsubscribe(); ``` +What this does: Shows the code for this step. @@ -314,11 +373,17 @@ ccMessageSent?.unsubscribe(); *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Call Buttons component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -348,6 +413,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` +What this does: Shows the code for this step. @@ -371,6 +437,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` +What this does: Shows the code for this step. @@ -417,6 +484,7 @@ export default CallButtonDemo; background-color: #6852d6; } ``` +What this does: Shows the code for this step. @@ -424,11 +492,17 @@ export default CallButtonDemo; *** -## Configurations +### Configurations + +What you’re changing: Configurations. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. Configurations offer the ability to customize the properties of each component within a Composite Component. `CallButtons` component renders [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component. -#### Outgoing Call +##### Outgoing Call You can customize the properties of the `CometChatOutgoingCall` component by making use of the `OutgoingCallConfiguration`. Below properties are available in `OutgoingCallConfiguration`. @@ -468,19 +542,32 @@ You can refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component --- -## Next Steps - - - - Manage outgoing voice and video call UI - - - Handle incoming voice and video calls - - - Display call history and call log details - - - Overview of all calling capabilities - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Hide voice | `CometChatCallButtons` | `hideVoiceCallButton` | `hideVoiceCallButton={true}` | +| Hide video | `CometChatCallButtons` | `hideVideoCallButton` | `hideVideoCallButton={true}` | +| Custom call settings | `CometChatCallButtons` | `callSettingsBuilder` | `callSettingsBuilder={(call) => ...}` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Buttons not showing | Calls SDK missing | Install `@cometchat/calls-sdk-javascript` | +| Buttons not working | User/group missing | Pass a valid `user` or `group` | +| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | + +## FAQ + +**Can I hide video calls?** +Yes. Set `hideVideoCallButton={true}`. + +**Do buttons work for groups?** +Yes. Pass `group={chatGroup}`. + +## Next steps + +- [Incoming Call](/ui-kit/react/incoming-call) +- [Outgoing Call](/ui-kit/react/outgoing-call) +- [Call Features](/ui-kit/react/call-features) diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index 3fd35a67e..adecf2c28 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -3,6 +3,42 @@ title: "Call Logs" description: "Display and manage call history with filtering, custom views, and call-back functionality using the CometChatCallLogs component." --- +Show call history with callbacks and filters. + +## When to use this + +- You need a call history view. +- You want to handle call log item clicks. +- You need to customize call back actions. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. + +## Quick start + +1. Add the component to your UI. + +```tsx +import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; + +; +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- Use `onItemClick` and `onCallButtonClicked` for interactions. +- Use `callLogRequestBuilder` for filtering. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -20,6 +56,7 @@ import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; title="Call History" /> ``` +What this does: Shows the code for this step. @@ -34,7 +71,13 @@ import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; **Events:** `ccMessageSent` -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. `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. @@ -56,9 +99,15 @@ The `Call Logs` is comprised of the following components: **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 +### Usage -### Integration +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. + +#### Integration @@ -72,6 +121,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -86,15 +136,16 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. 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. @@ -113,6 +164,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -130,12 +182,13 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. -#### 2. onCallButtonClicked +##### 2. onCallButtonClicked `onCallButtonClicked` is a callback function which triggers when the call button in the trailing view is clicked. @@ -154,6 +207,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -171,12 +225,13 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. -#### 3. onError +##### 3. onError This is a callback function which is triggered when the component encounters an error. @@ -196,6 +251,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -213,6 +269,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -220,11 +277,11 @@ export default CallLogDemo; *** -### Filters +#### Filters **Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK. -#### 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) @@ -264,6 +321,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -286,6 +344,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -293,7 +352,7 @@ export default CallLogDemo; *** -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -312,6 +371,7 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { //Your Code }); ``` +What this does: Shows the code for this step. @@ -324,6 +384,7 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { ```tsx lines ccMessageSent?.unsubscribe(); ``` +What this does: Shows the code for this step. @@ -331,11 +392,17 @@ ccMessageSent?.unsubscribe(); *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Call Logs component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -357,6 +424,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -371,6 +439,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -415,6 +484,7 @@ export default CallLogDemo; border-radius: 8px; } ``` +What this does: Shows the code for this step. @@ -422,7 +492,7 @@ export default CallLogDemo; *** -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -440,6 +510,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -454,6 +525,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -476,13 +548,13 @@ Below is a list of customizations along with corresponding code snippets *** -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -#### Call Initiated Date Time Format +##### Call Initiated Date Time Format The `callInitiatedDateTimeFormat` property allows you to customize the **Call Initiated** timestamp displayed in the call logs. @@ -495,6 +567,7 @@ new CalendarObject({ otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM" }); ``` +What this does: Shows the code for this step. The following example demonstrates how to modify the **Call Initiated** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -516,6 +589,7 @@ function getDateFormat() { // Apply the custom format to the CometChatCallLogs component ; ``` +What this does: Shows the code for this step. @@ -531,7 +605,7 @@ function getDateFormat() { *** -#### ItemView +##### ItemView With this property, you can assign a custom ListItem to the Call Logs Component. @@ -621,6 +695,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -678,6 +753,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -718,6 +794,7 @@ export default CallLogDemo; font-style: normal; } ``` +What this does: Shows the code for this step. @@ -725,7 +802,7 @@ export default CallLogDemo; *** -#### SubtitleView +##### SubtitleView You can customize the subtitle view for each call logs item to meet your requirements. @@ -797,6 +874,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -842,6 +920,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -855,6 +934,7 @@ export default CallLogDemo; font-style: normal; } ``` +What this does: Shows the code for this step. @@ -862,7 +942,7 @@ export default CallLogDemo; *** -#### TrailingView +##### TrailingView You can customize the trailing view for each call logs item to meet your requirements. @@ -918,6 +998,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -957,6 +1038,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -971,12 +1053,13 @@ export default CallLogDemo; font-style: normal; } ``` +What this does: Shows the code for this step. -#### LeadingView +##### LeadingView You can customize the leading view for each call logs item to meet your requirements. @@ -1025,6 +1108,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -1057,6 +1141,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -1094,12 +1179,13 @@ export default CallLogDemo; width: 32px; } ``` +What this does: Shows the code for this step. -#### TitleView +##### TitleView You can customize the title view for each call logs item to meet your requirements. @@ -1141,6 +1227,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -1166,6 +1253,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` +What this does: Shows the code for this step. @@ -1179,6 +1267,7 @@ export default CallLogDemo; font: 500 16px Roboto; } ``` +What this does: Shows the code for this step. @@ -1202,19 +1291,32 @@ export default CallLogDemo; --- -## Next Steps - - - - Add voice and video call buttons to your chat - - - Handle incoming voice and video calls - - - Manage outgoing voice and video calls - - - Build a call log details view - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Handle item click | `CometChatCallLogs` | `onItemClick` | `onItemClick={(log) => ...}` | +| Handle call back | `CometChatCallLogs` | `onCallButtonClicked` | `onCallButtonClicked={(log) => ...}` | +| Filter logs | `CometChatCallLogs` | `callLogRequestBuilder` | `new CometChat.CallLogRequestBuilder()` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Logs not shown | Init/login missing | Call `CometChatUIKit.init()` and `login()` | +| No data | No call history | Verify the logged-in user has calls | +| Callbacks not firing | Wrong prop name | Use `onItemClick` or `onCallButtonClicked` | + +## FAQ + +**Can I trigger a call from a log?** +Yes. Use `onCallButtonClicked`. + +**How do I filter logs?** +Use `callLogRequestBuilder`. + +## Next steps + +- [Call Buttons](/ui-kit/react/call-buttons) +- [Call Features](/ui-kit/react/call-features) +- [Theming](/ui-kit/react/theme) diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index 5a0d87305..d7757630d 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -3,11 +3,32 @@ title: "Overview" 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** +Browse and understand the full set of CometChat React UI Kit components. This page is for developers who need a quick, accurate map of what to import and where to start. + +## When to use this + +- You need a list of all available UI Kit components. +- You want to know which component maps to a specific feature. +- You want to understand the common API patterns across components. +- You need to find related pages for customization and theming. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering any component. +- Calls components require `@cometchat/calls-sdk-javascript`. + +## Quick start + +1. Install the UI Kit. + +```bash +npm install @cometchat/chat-uikit-react +``` + +What this does: Installs the React UI Kit package. -All components are imported from `@cometchat/chat-uikit-react`: +2. Import the components you need. ```tsx import { @@ -26,6 +47,16 @@ import { } from "@cometchat/chat-uikit-react"; ``` +What this does: Imports the primary UI Kit components into your React module. + +3. Render the components after initialization and login. +4. Use component-specific pages for props, actions, and examples. + +## Core concepts + + +**Quick Reference for AI Agents & Developers** + - **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) @@ -33,62 +64,88 @@ import { - **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 - +- Component: A prebuilt UI block that renders a feature (conversations, message list, calls). +- Action: A callback or override that customizes component behavior. +- Event: A UI Kit event emitted for cross-component communication. -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. +## Implementation -## Actions +### Component import pattern -Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions. +What you’re changing: Import the UI Kit components you plan to render. +File: Any React module (for example `src/App.tsx`) +Applies to: UI Kit component imports +Default behavior: Components are available for JSX use. +Override: Import only what you need. +Verify: The import compiles and components render. -### Predefined Actions +```tsx +import { + CometChatConversations, + CometChatMessageList, + CometChatMessageComposer, + CometChatMessageHeader, +} from "@cometchat/chat-uikit-react"; +``` -These are actions that are inherently programmed into a UI component. They are ingrained in the component itself by default, and they execute automatically in response to user interaction, without needing any additional user input. +What this does: Imports the core chat components. -### User-Defined Actions +### Actions -These are actions that must be explicitly specified by the user. They are not innately part of the component like predefined actions. Instead, they must be developed based on the unique needs of the user or the application. User-defined actions provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application. +What you’re changing: Override component behavior via callbacks. +Where to change it: Component props in JSX +Applies to: Any component that exposes `on` props +Default behavior: Predefined actions run automatically. +Override: Provide your own handler using `on={(param) => {}}`. +Verify: Your callback fires on interaction. -To customize the behavior of a component, actions can be overridden by you. This provides you with control over how the component responds to specific events or interactions. +Example pattern: -All components expose actions to the user, which means that users can interact with these types of components through predefined or user-defined actions. +```tsx + console.log(conversation)} /> +``` -*** +What this does: Logs the conversation when a user selects a list item. -## Events +### Events -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. +What you’re changing: Listen to UI Kit events to coordinate UI. +Where to change it: Your app-level state or event handlers +Applies to: UI Kit events emitted by components +Default behavior: Components emit events on state changes. +Override: Subscribe where needed to respond. +Verify: Your app updates when events emit. -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. +## Customization matrix +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Override behavior on user interaction | Component props | `on` | `onItemClick={(c) => setActive(c)}` | +| Hide a built-in feature | Component props | `hide` | `hideReceipts={true}` | +| Filter or request data | Component props | `RequestBuilder` | `messagesRequestBuilder={new CometChat.MessagesRequestBuilder()}` | +| Custom render slots | Component props | `View` | `titleView={() => }` | +| Component theming | Global CSS | `.cometchat-` | `.cometchat-conversations { --cometchat-primary-color: #f76808; }` | ---- +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Components render blank | `CometChatUIKit.init()` or `login()` not called | Initialize and log in before rendering components. | +| Call UI missing | Calls SDK not installed | Install `@cometchat/calls-sdk-javascript`. | +| Custom view not appearing | JSX returns `null` or `undefined` | Return a valid JSX element from the view prop. | +| Callback not firing | Wrong prop name | Use the exact `on` prop name from the component page. | +| Styles not applying | CSS Modules used | Use global CSS and `.cometchat` selectors. | + +## FAQ + +**Do I need to import every component?** +No. Import only the components you render. + +**Where do I find component-specific props and actions?** +Open the individual component pages linked above. + +## Next steps -## Next Steps - - - - Display and manage the list of recent conversations - - - Render messages for a selected conversation - - - Customize colors, fonts, and styles across all components - - - Init, login, logout, and utility methods reference - - +- [Conversations](/ui-kit/react/conversations) +- [Message List](/ui-kit/react/message-list) +- [Theming](/ui-kit/react/theme) diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index 202168428..d9f54bbcd 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -3,17 +3,59 @@ title: "Conversations" description: "Display and manage the list of recent conversations for the logged-in user using the CometChatConversations component in the React UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} +Build and customize the conversations list in your React app. This page is for developers who need a complete, step-by-step guide to rendering conversations, handling actions, and customizing the UI. + +## When to use this + +- You need a list of recent conversations for the logged-in user. +- You want unread counts, last message previews, and typing indicators. +- You want to handle selection or navigation when a conversation is clicked. +- You need to filter conversations by type or tags. +- You want to customize list items, header, and actions. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- Global CSS available for styling via `.cometchat-conversations`. + +## Quick start + +1. Import the component in `src/ConversationsDemo.tsx`. + +```tsx +import { CometChatConversations } from "@cometchat/chat-uikit-react"; +``` + +What this does: Makes the Conversations component available in your module. + +2. Render the component after init/login. + +```tsx +import React from "react"; +import { CometChatConversations } from "@cometchat/chat-uikit-react"; + +export default function ConversationsDemo() { + return ( +
+ +
+ ); +} +``` + +What this does: Renders the conversations list UI. + +3. Verify you see a list of conversations with avatar, name, last message, timestamp, and unread badge. + +## Core concepts + **Quick Reference for AI Agents & Developers** ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; -// Minimal usage - - -// With common props setActiveChat(conversation)} hideReceipts={false} @@ -25,27 +67,33 @@ import { CometChatConversations } from "@cometchat/chat-uikit-react"; **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` +- Package: `@cometchat/chat-uikit-react` +- Import: `import { CometChatConversations } from "@cometchat/chat-uikit-react";` +- Minimal JSX: `` +- Required setup: `CometChatUIKit.init()` and `CometChatUIKit.login()` +- Key props: `onItemClick`, `conversationsRequestBuilder`, `hideReceipts`, `selectionMode`, `activeConversation` +- CSS class: `.cometchat-conversations` +- Events: `CometChatConversationEvents.ccConversationDeleted` -## Overview - -The Conversations is a Component, that shows all conversations related to the currently logged-in user. +- Conversation: A chat thread between the logged-in user and a user or group. +- Selection mode: Controls single or multiple selection behavior for list items. +- Request builder: Filters and paginates conversations before render. +## Implementation -## Usage +### Integrate the component -### Integration +What you’re changing: Add the conversations list to your UI. +File: `src/ConversationsDemo.tsx` +Applies to: `CometChatConversations` +Default behavior: Renders a scrollable list of recent conversations. +Override: Add props such as `onItemClick` or `selectionMode`. +Verify: Conversation tiles render with avatars, names, last messages, and unread counts. -```tsx lines +```tsx import { CometChatConversations, TitleAlignment, @@ -54,92 +102,79 @@ import { function ConversationsDemo() { return (
-
- -
+
); } export default ConversationsDemo; ``` - -```jsx lines -import { - CometChatConversations, -} from "@cometchat/chat-uikit-react"; +```jsx +import { CometChatConversations } from "@cometchat/chat-uikit-react"; function ConversationsDemo() { return (
-
- -
+
); } export default ConversationsDemo; ``` - - -**Expected result:** The `CometChatConversations` component renders a scrollable list of recent conversations. Each list item shows: avatar, name, last message preview, timestamp, and unread badge. +What this does: Renders the conversations list with default UI behavior. ### 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. +What you’re changing: Override default behavior by handling component actions. +File: Any React module +Applies to: `onItemClick`, `onSelect`, `onError`, `onSearchBarClicked` +Default behavior: Actions emit events but do not change your app state. +Override: Provide callbacks to update your UI or app state. +Verify: Your handlers run when the action fires. -#### 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. +#### OnItemClick -```tsx lines +```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; const getOnItemClick = (conversation: CometChat.Conversation) => { console.log("ItemClick:", conversation); - // Your custom action here }; ; ``` - -```jsx lines +```jsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; const getOnItemClick = (conversation) => { console.log("ItemClick:", conversation); - // Your custom action here }; ; ``` - - -*** +What this does: Handles a conversation click and lets you update app state. -#### 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. +#### OnSelect -```tsx lines +```tsx import { CometChatConversations, SelectionMode, @@ -150,8 +185,7 @@ const getOnSelect = ( conversation: CometChat.Conversation, selected: boolean ) => { - console.log("Selected, ", conversation.getConversationId(), selected); - // Your custom action on select + console.log("Selected:", conversation.getConversationId(), selected); }; ; ``` - -```jsx lines +```jsx import { CometChatConversations, SelectionMode, } from "@cometchat/chat-uikit-react"; const getOnSelect = (conversation, selected) => { - console.log("Selected, ", conversation.getConversationId(), selected); - // Your custom action on select + console.log("Selected:", conversation.getConversationId(), selected); }; { onSelect={getOnSelect} />; ``` - - -*** +What this does: Handles list selection changes in multi-select mode. -#### 3. OnError - -This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component. +#### OnError -```tsx lines +```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; const handleOnError = (error: CometChat.CometChatException) => { - // Your exception handling code + console.log("Error:", error); }; ; ``` - -```jsx lines +```jsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; const handleOnError = (error) => { - // Your exception handling code + console.log("Error:", error); }; ; ``` - - -*** +What this does: Captures and logs errors emitted by the component. -#### 4. onSearchBarClicked - -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. +#### onSearchBarClicked -```tsx lines +```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; const handleSearchClick = () => { @@ -237,11 +260,10 @@ const handleSearchClick = () => { ; ``` - -```jsx lines +```jsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; const handleSearchClick = () => { @@ -250,43 +272,21 @@ const handleSearchClick = () => { ; ``` - - -*** +What this does: Triggers your handler when users click the search bar. ### Filters -You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/javascript/retrieve-conversations). - -You can set filters using the following parameters. - -1. **Conversation Type:** Filters on type of Conversation, `User` or `Groups` -2. **Limit:** Number of conversations fetched in a single request. -3. **WithTags:** Filter on fetching conversations containing tags -4. **Tags:** Filters on specific `Tag` -5. **UserTags:** Filters on specific User `Tag` -6. **GroupTags:** Filters on specific Group `Tag` +What you’re changing: Filter or limit the conversations list. +File: Any React module +Applies to: `conversationsRequestBuilder` +Default behavior: Fetches default conversation list. +Override: Use `CometChat.ConversationsRequestBuilder` to filter. +Verify: The list respects your limit or filters. - - -```tsx lines -import { CometChatConversations } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -; -``` - - - - -```jsx lines +```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -297,19 +297,20 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; />; ``` - - - - -*** +What this does: Limits the list to 10 conversations per request. ### Events -[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +What you’re changing: Subscribe to conversation events. +File: Any React module +Applies to: `CometChatConversationEvents` +Default behavior: Events emit globally without app handling. +Override: Subscribe and react to event payloads. +Verify: Your handler runs on conversation events. -```tsxtsx lines +```tsx const ccConversationDeleted = CometChatConversationEvents.ccConversationDeleted.subscribe( (conversation: CometChat.Conversation) => { @@ -317,30 +318,31 @@ const ccConversationDeleted = } ); ``` - - +What this does: Subscribes to conversation deletion events. + -```tsxtsx lines +```tsx ccConversationDeleted?.unsubscribe(); ``` - - -*** +What this does: Cleans up the event subscription. -## Customization +### 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. +#### Style -### Style - -Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. +What you’re changing: Override CSS for the conversations list. +File: Global stylesheet (for example `src/App.css`) +Applies to: `.cometchat-conversations` selectors +Default behavior: UI Kit default styles. +Override: Use CSS overrides. +Verify: Fonts, colors, and badges update. @@ -348,14 +350,13 @@ Using CSS you can customize the look and feel of the component in your app like -```tsx lines +```tsx ``` - -```css lines +```css .cometchat-conversations .cometchat-list-item__body-title, .cometchat-conversations .cometchat-list__header-title, .cometchat-conversations .cometchat-avatar__text, @@ -386,86 +387,79 @@ Using CSS you can customize the look and feel of the component in your app like background: #e96b6f; } ``` - - -### Functionality +What this does: Applies custom typography and color styling to the conversations list. -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. +#### Functionality + +What you’re changing: Adjust built-in UI behavior with props. +File: Any React module +Applies to: Conversations props +Default behavior: UI Kit default behavior. +Override: Use props listed below. +Verify: UI changes reflect the prop values. -```tsx lines +```tsx
-
- -
+
``` - -```jsx lines +```jsx
-
- -
+
``` - - -Below is a list of customizations along with corresponding code snippets - -| Property | Description | Code | -| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -| **Hide Receipts** | Disables the display of message read receipts. If set to `true`, the receipt status of the sent message won't be displayed. | `hideReceipts={false}` | -| **Hide Error** | Hides the default and the custom error view passed in the `errorView` prop. | `hideError={true}` | -| **Hide Delete Conversation** | Hides the delete conversation option in the default context menu. | `hideDeleteConversation={false}` | -| **Hide User Status** | Hides the user's online/offline status indicator. | `hideUserStatus={true}` | -| **Hide Group Type** | Hides the group type icon. | `hideGroupType={false}` | -| **Show Search Bar** | Shows the search bar. | `showSearchBar={true}` | -| **Active Conversation** | Specifies the conversation to highlight in the list. | `activeConversation={activeConversation}` | -| **Selection Mode** | Determines the selection mode for the component. | `selectionMode={SelectionMode.multiple}` | -| **Disable Sound For Messages** | Used to Disable sound for incoming messages. | `disableSoundForMessages={false}` | -| **Custom Sound For Messages** | Custom audio sound for incoming messages. | `customSoundForMessages="Your custom sound url"` | -| **Search View** | A custom search view which replaces the default search bar. | `searchView={<>Custom Search View}` | -| **Loading View** | A custom component to display during the loading state. | `loadingView={<>Custom Loading View}` | -| **Empty View** | A custom component to display when there are no conversations available. | `emptyView={<>Custom Empty View}` | -| **Error View** | A custom component to display when an error occurs. | `errorView={<>Custom Error View}` | - -### Advanced +What this does: Sets a custom title for the conversations header. -For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. - -*** - -#### ItemView - -With this function, you can assign a custom ListItem to the Conversations Component. - -Shown below is the default chat interface. +| Property | Description | Code | +| --- | --- | --- | +| Hide Receipts | Disables read receipts in the list | `hideReceipts={false}` | +| Hide Error | Hides default and custom error views | `hideError={true}` | +| Hide Delete Conversation | Hides delete action in the menu | `hideDeleteConversation={false}` | +| Hide User Status | Hides online status indicator | `hideUserStatus={true}` | +| Hide Group Type | Hides group type icon | `hideGroupType={false}` | +| Show Search Bar | Shows the search bar | `showSearchBar={true}` | +| Active Conversation | Highlights the active conversation | `activeConversation={activeConversation}` | +| Selection Mode | Enables multi-select | `selectionMode={SelectionMode.multiple}` | +| Disable Sound For Messages | Disables incoming message sounds | `disableSoundForMessages={false}` | +| Custom Sound For Messages | Custom incoming message sound | `customSoundForMessages="Your custom sound url"` | +| Search View | Custom search view | `searchView={<>Custom Search View}` | +| Loading View | Custom loading view | `loadingView={<>Custom Loading View}` | +| Empty View | Custom empty state | `emptyView={<>Custom Empty View}` | +| Error View | Custom error state | `errorView={<>Custom Error View}` | + +#### Advanced views + +##### ItemView + +What you’re changing: Replace the default list item with a custom view. +File: Any React module +Applies to: `itemView` +Default behavior: UI Kit default list item layout. +Override: Return a custom `CometChatListItem`. +Verify: List items render with your custom UI. -The customized chat interface is displayed below. - -Use the following code to achieve the customization shown above. - -```ts lines +```ts import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatListItem, @@ -489,15 +483,12 @@ const getItemView = (conversation: CometChat.Conversation) => { ); }; -; +; ``` - -```css lines +```css .cometchat-conversations .cometchat-avatar { border-radius: 8px; width: 32px; @@ -508,26 +499,27 @@ const getItemView = (conversation: CometChat.Conversation) => { gap: 4px; } ``` - - -*** +What this does: Replaces the default item layout with a custom list item view. -#### LeadingView +##### LeadingView -The customized chat interface is displayed below. +What you’re changing: Replace the leading view (avatar area). +File: Any React module +Applies to: `leadingView` +Default behavior: Default avatar and status UI. +Override: Return a custom leading view. +Verify: The leading area renders your custom UI. -Use the following code to achieve the customization shown above. - -```ts lines +```ts import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -535,11 +527,11 @@ import { CometChatAvatar, } from "@cometchat/chat-uikit-react"; import { useEffect, useRef, useState } from "react"; + const [isTyping, setIsTyping] = useState(false); const typingObjRef = useRef(null); useEffect(() => { - //adding typing listeners const messageListenerId: string = "typing_demo_" + new Date().getTime(); CometChat.addMessageListener( messageListenerId, @@ -551,7 +543,7 @@ useEffect(() => { onTypingEnded: (typingIndicator: CometChat.TypingIndicator) => { if ( typingObjRef.current && - typingObjRef.current.getSender().getUid() == + typingObjRef.current.getSender().getUid() === typingIndicator.getSender().getUid() ) { typingObjRef.current = null; @@ -565,22 +557,18 @@ useEffect(() => { }; }, [setIsTyping]); -// Custom leading view component const CustomLeadingView = (conversation: CometChat.Conversation) => { const conversationObj = conversation.getConversationWith(); const isUser = conversationObj instanceof CometChat.User; const isGroup = conversationObj instanceof CometChat.Group; - // Check if the current user is typing const isMyTyping = isUser ? (conversationObj as CometChat.User).getUid() === - typingObjRef.current?.getSender().getUid() && - loggedInUser?.getUid() === typingObjRef.current?.getReceiverId() + typingObjRef.current?.getSender().getUid() : isGroup && (conversationObj as CometChat.Group).getGuid() === typingObjRef.current?.getReceiverId(); - // Determine avatar and name const avatar = isUser ? (conversationObj as CometChat.User).getAvatar() : (conversationObj as CometChat.Group).getIcon(); @@ -593,33 +581,34 @@ const CustomLeadingView = (conversation: CometChat.Conversation) => {
); }; + ; ``` - - -*** +What this does: Replaces the avatar area with a custom view that can show typing state. -#### TrailingView +##### TrailingView -The customized chat interface is displayed below. +What you’re changing: Replace the trailing view (right side of list item). +File: Any React module +Applies to: `trailingView` +Default behavior: Default timestamp and badge UI. +Override: Return a custom trailing view. +Verify: The trailing area renders your custom UI. -Use the following code to achieve the customization shown above. - -```ts lines +```ts import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; -// Custom trailing view component const CustomTrailingButtonView = (conv: CometChat.Conversation) => { if (!conv.getLastMessage()) { return <>; @@ -628,23 +617,19 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { const now = new Date(); const time = new Date(timestamp); - // Calculate time difference const diffInMs = now.getTime() - time.getTime(); const diffInMinutes = Math.floor(diffInMs / (1000 * 60)); const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60)); - // Determine the labels - let backgroundColorClass = "conversations__trailing-view-min"; // Default (less than 1 hour) - let topLabel = `${diffInMinutes}`; // Default minutes - let bottomLabel = `${diffInMinutes === 1 ? "Min ago" : "Mins ago"}`; // Default "Mins ago" + let backgroundColorClass = "conversations__trailing-view-min"; + let topLabel = `${diffInMinutes}`; + let bottomLabel = `${diffInMinutes === 1 ? "Min ago" : "Mins ago"}`; if (diffInHours >= 1 && diffInHours <= 10) { - // 1-10 hours backgroundColorClass = "conversations__trailing-view-hour"; topLabel = `${diffInHours}`; bottomLabel = `${diffInHours === 1 ? "Hour ago" : "Hours ago"}`; } else if (diffInHours > 10) { - // More than 10 hours backgroundColorClass = "conversations__trailing-view-date"; topLabel = time.toLocaleDateString("en-US", { day: "numeric" }); bottomLabel = time.toLocaleDateString("en-US", { @@ -662,11 +647,10 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { ; ``` - -```css lines +```css .conversations__trailing-view { display: flex; flex-direction: column; @@ -707,20 +691,23 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { height: 50px; } ``` - - -*** +What this does: Replaces the trailing area with a custom time and status panel. -#### TextFormatters +##### TextFormatters -Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) +What you’re changing: Add custom text formatters to conversation previews. +File: Any React module +Applies to: `textFormatters` +Default behavior: Uses default text formatters. +Override: Provide a list of formatter instances. +Verify: Custom formatting appears in list items. -```ts lines +```ts import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; import DialogHelper from "./Dialog"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -729,7 +716,7 @@ class ShortcutFormatter extends CometChatTextFormatter { private shortcuts: { [key: string]: string } = {}; private dialogIsOpen: boolean = false; private dialogHelper = new DialogHelper(); - private currentShortcut: string | null = null; // Track the currently open shortcut + private currentShortcut: string | null = null; constructor() { super(); @@ -755,7 +742,6 @@ class ShortcutFormatter extends CometChatTextFormatter { const shortcut = match[0]; const replacement = this.shortcuts[shortcut]; if (replacement) { - // Close the currently open dialog, if any if (this.dialogIsOpen && this.currentShortcut !== shortcut) { this.closeDialog(); } @@ -784,14 +770,13 @@ class ShortcutFormatter extends CometChatTextFormatter { } closeDialog() { - this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog + this.dialogHelper.closeDialog(); this.dialogIsOpen = false; this.currentShortcut = null; } handleButtonClick = (buttonText: string) => { if (this.currentCaretPosition && this.currentRange) { - // Inserting the replacement text corresponding to the shortcut const shortcut = Object.keys(this.shortcuts).find( (key) => this.shortcuts[key] === buttonText ); @@ -830,11 +815,10 @@ class ShortcutFormatter extends CometChatTextFormatter { export default ShortcutFormatter; ``` - -```tsx lines +```tsx import React from "react"; import ReactDOM from "react-dom"; @@ -844,8 +828,6 @@ interface DialogProps { } const Dialog: React.FC = ({ onClick, buttonText }) => { - console.log("buttonText", buttonText); - return (
-```tsx lines +```tsx import ShortcutFormatter from "./ShortCutFormatter"; ; ``` - - -#### Header View +What this does: Adds a custom text formatter that expands shortcuts and displays a dialog. -You can set the Custom Header view to add more options to the Conversations component. +##### HeaderView -The customized chat interface is displayed below. +What you’re changing: Replace the default header UI. +File: Any React module +Applies to: `headerView` +Default behavior: Default title and actions. +Override: Provide a custom header view. +Verify: Header renders custom title and button. -Use the following code to achieve the customization shown above. - -```ts lines +```ts import { CometChatButton, CometChatConversations, @@ -935,7 +917,7 @@ import { const getHeaderView = () => { return (
-
{localize("CHATS")}
+
CHATS
{ // logic here @@ -948,11 +930,10 @@ const getHeaderView = () => { ; ``` - -```css lines +```css .conversations__header { display: flex; width: 100%; @@ -960,8 +941,6 @@ const getHeaderView = () => { 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; @@ -983,83 +962,74 @@ const getHeaderView = () => { display: block; } ``` - - -*** - -#### Last Message Date Time Format +What this does: Replaces the header with a custom title and action button. -The `lastMessageDateTimeFormat` property allows you to customize the **Last Message** timestamp is displayed in the conversations. +##### Last message date time format -Default Date Time Format: +What you’re changing: Customize the timestamp format in the list. +File: Any React module +Applies to: `lastMessageDateTimeFormat` +Default behavior: Uses the component default format or global localization. +Override: Pass a `CalendarObject`. +Verify: Timestamps display in your format. -```ruby lines +```ts new CalendarObject({ - today: `hh:mm A`, // Example: "10:30 AM" - yesterday: `[yesterday]`, // Example: "yesterday" - otherDays: `DD/MM/YYYY`, // Example: "25/05/2025" + today: `hh:mm A`, + yesterday: `[yesterday]`, + otherDays: `DD/MM/YYYY`, }); ``` -The following example demonstrates how to modify the **Last Message** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). +What this does: Shows the default date format pattern. -```ts lines +```ts import { CometChatConversations, CalendarObject, } from "@cometchat/chat-uikit-react"; -// Define a custom date format pattern function getDateFormat() { const dateFormat = new CalendarObject({ - today: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM" - yesterday: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM" - otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM" + today: `DD MMM, hh:mm A`, + yesterday: `DD MMM, hh:mm A`, + otherDays: `DD MMM, hh:mm A`, }); return dateFormat; } -// Apply the custom format to the CometChatConversations component ; ``` - - - +What this does: Applies a custom date format to conversation timestamps. -**Fallback Mechanism** +##### TitleView -* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**. - - - -*** - -#### TitleView - -The customized chat interface is displayed below. +What you’re changing: Replace the title area in list items. +File: Any React module +Applies to: `titleView` +Default behavior: Default title view. +Override: Return custom JSX for title. +Verify: The title view renders your custom layout. -Use the following code to achieve the customization shown above. - -```ts lines +```ts import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; -// Custom title view component const customTitleView = (conversation: CometChat.Conversation) => { let user = conversation.getConversationType() == "user" @@ -1083,11 +1053,10 @@ const customTitleView = (conversation: CometChat.Conversation) => { ; ``` - -```css lines +```css .cometchat-conversations .conversations__title-view { display: flex; gap: 4px; @@ -1109,34 +1078,31 @@ const customTitleView = (conversation: CometChat.Conversation) => { text-align: left; } ``` - - -*** +What this does: Customizes the title text and status line in each list item. -#### SubtitleView +##### SubtitleView -You can customize the subtitle view for each conversation item to meet your requirements. - -Shown below is the default chat interface. +What you’re changing: Replace the subtitle area in list items. +File: Any React module +Applies to: `subtitleView` +Default behavior: Default subtitle with last message. +Override: Return custom subtitle JSX. +Verify: Subtitle area shows your custom content. -The customized chat interface is displayed below. - -Use the following code to achieve the customization shown above. - -```ts lines +```ts import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -1146,9 +1112,7 @@ const subtitleView = (conversation: CometChat.Conversation) => { <> Last Message at:{" "} {getFormattedTimestamp( - ( - conversation.getConversationWith() as CometChat.User - ).getLastActiveAt() + (conversation.getConversationWith() as CometChat.User).getLastActiveAt() )} ); @@ -1171,11 +1135,10 @@ function getFormattedTimestamp(timestamp: number): string { ; ``` - -```css lines +```css .cometchat-conversations .cometchat-list-item__body-subtitle { overflow: hidden; color: var(--cometchat-text-color-secondary, #727272); @@ -1186,34 +1149,31 @@ function getFormattedTimestamp(timestamp: number): string { font-style: normal; } ``` - - -*** - -#### Options +What this does: Replaces the subtitle with custom date content for users or groups. -A function that returns a list of actions available when hovering over a conversation item. +##### Options -Shown below is the default chat interface. +What you’re changing: Customize the context menu options for each conversation. +File: Any React module +Applies to: `options` +Default behavior: Default menu actions. +Override: Provide your own `CometChatOption` list. +Verify: Custom options appear in the menu. -The customized chat interface is displayed below. - -Use the following code to achieve the customization shown above. - -```ts lines +```ts import { CometChatOption, CometChatConversations, @@ -1255,11 +1215,10 @@ const getOptions = (conversation: CometChat.Conversation) => { ; ``` - -```css lines +```css .cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete { background: red; } @@ -1274,64 +1233,51 @@ const getOptions = (conversation: CometChat.Conversation) => { -webkit-mask-size: contain; } ``` - - -#### Structure of CometChatOption +What this does: Replaces the default menu options and styles the menu. -| Name | Description | -| ----------- | ----------------------------------------------------- | -| **id** | Unique identifier for each option. | -| **title** | Heading text for each option. | -| **iconURL** | Sets the asset URL of the icon for each option. | -| **onClick** | Method to be invoked when user clicks on each option. | +| Name | Description | +| --- | --- | +| id | Unique identifier for each option. | +| title | Display label for the option. | +| iconURL | Icon asset URL. | +| onClick | Handler invoked when the option is selected. | -*** +## Customization matrix +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Handle item click | `CometChatConversations` | `onItemClick` | `onItemClick={(c) => setActive(c)}` | +| Enable multi-select | `CometChatConversations` | `selectionMode` | `selectionMode={SelectionMode.multiple}` | +| Filter conversations | `CometChatConversations` | `conversationsRequestBuilder` | `new CometChat.ConversationsRequestBuilder().setLimit(10)` | +| Custom list item | `CometChatConversations` | `itemView` | `itemView={(c) => }` | +| Custom header | `CometChatConversations` | `headerView` | `headerView={myHeader}` | +| Custom styles | Global CSS | `.cometchat-conversations` | `.cometchat-conversations { ... }` | -## Component API Pattern +## Common pitfalls and fixes -| Customization Type | Prop Pattern | Example | +| Symptom | Cause | Fix | | --- | --- | --- | -| 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 { ... }` | +| Component does not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init. | +| `onItemClick` not firing | Wrong prop name | Use `onItemClick`. | +| Custom view not appearing | Returning `null` or `undefined` | Return valid JSX from view prop. | +| SSR hydration error | UI Kit uses browser APIs | Render in `useEffect` or use `ssr: false` in Next.js. | +| Conversations list empty after login | Filters too restrictive | Remove or adjust `conversationsRequestBuilder`. | +| Events not received | Listener not subscribed or unsubscribed early | Subscribe in `useEffect` and unsubscribe in cleanup. | - - +## FAQ -| 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 | +**Can I show only group conversations?** +Yes. Use `conversationsRequestBuilder` to filter by type. - - +**How do I customize the list item layout?** +Use `itemView`, `leadingView`, `titleView`, `subtitleView`, or `trailingView`. ---- +## Next steps -## Next Steps - - - - Display messages for the selected conversation - - - Browse and select users to start new conversations - - - Browse and manage group conversations - - - Customize the appearance of the conversations list - - +- [Message List](/ui-kit/react/message-list) +- [Users](/ui-kit/react/users) +- [Groups](/ui-kit/react/groups) diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index 999653e30..c68911c4a 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -3,6 +3,54 @@ title: "Group Members" description: "CometChatGroupMembers component displays all users in a group with their roles, scopes, and online status. Supports member management actions, custom views, filtering via GroupMembersRequestBuilder, and CSS styling." --- +Display and manage members of a specific group with roles and status. + +## When to use this + +- You need a member list for a specific group. +- You want to search or filter members within a group. +- You need selection mode for member management actions. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- A valid `CometChat.Group` instance to pass as `group`. + +## Quick start + +1. Add the component to your UI. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; + +export default function GroupMembersDemo() { + const [chatGroup, setChatGroup] = React.useState(); + + React.useEffect(() => { + CometChat.getGroup("guid").then((group) => setChatGroup(group)); + }, []); + + return <>{chatGroup && }; +} +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- `group` is required to render members. +- `groupMemberRequestBuilder` filters and paginates members. +- `selectionMode` enables multi-select workflows. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -21,6 +69,7 @@ import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; selectionMode={SelectionMode.none} /> ``` +What this does: Shows the code for this step. @@ -35,7 +84,13 @@ import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; **Events:** `CometChatGroupEvents` -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. `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. @@ -50,9 +105,15 @@ import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; *** -## Usage +### Usage + +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. -### Integration +#### Integration The following code snippet illustrates how you can directly incorporate the Group Members component into your Application. @@ -77,6 +138,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -100,6 +162,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -107,11 +170,11 @@ export default GroupMembersDemo; *** -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. onSelect +##### 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,6 +222,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -200,12 +264,13 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -243,6 +308,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -279,12 +345,13 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -319,6 +386,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -352,12 +420,13 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -392,6 +461,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -425,6 +495,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -432,11 +503,11 @@ export default GroupMembersDemo; *** -### Filters +#### Filters **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -#### 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) @@ -484,6 +555,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -520,12 +592,13 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -563,6 +636,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -597,6 +671,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -604,7 +679,7 @@ export default GroupMembersDemo; *** -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -638,6 +713,7 @@ const ccGroupMemberScopeChanged = } ); ``` +What this does: Shows the code for this step. @@ -652,6 +728,7 @@ ccGroupMemberKicked?.unsubscribe(); ccGroupMemberScopeChanged?.unsubscribe(); ``` +What this does: Shows the code for this step. @@ -659,11 +736,17 @@ ccGroupMemberScopeChanged?.unsubscribe(); *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Group Members component. -### Style +#### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -693,6 +776,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -731,6 +815,7 @@ export default GroupMembersDemo; width: 40px; } ``` +What this does: Shows the code for this step. @@ -738,7 +823,7 @@ export default GroupMembersDemo; *** -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -769,6 +854,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -798,6 +884,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -823,13 +910,13 @@ Below is a list of customizations along with corresponding code snippets, *** -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -#### ItemView +##### ItemView With this property, you can assign a custom ListItem to the Group Members Component. @@ -924,6 +1011,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -1008,6 +1096,7 @@ export default GroupMembersDemo; display: none; } ``` +What this does: Shows the code for this step. @@ -1015,7 +1104,7 @@ export default GroupMembersDemo; *** -#### TitleView +##### TitleView The customized chat interface is displayed below. @@ -1042,6 +1131,7 @@ const customTitleView = (member: CometChat.GroupMember) => { ; ``` +What this does: Shows the code for this step. @@ -1079,6 +1169,7 @@ const customTitleView = (member: CometChat.GroupMember) => { background: #0B7BEA; } ``` +What this does: Shows the code for this step. @@ -1086,7 +1177,7 @@ const customTitleView = (member: CometChat.GroupMember) => { *** -#### SubtitleView +##### SubtitleView You can customize the subtitle view for each group members to meet your requirements. @@ -1147,6 +1238,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -1160,6 +1252,7 @@ export default GroupMembersDemo; font: 400 14px Roboto; } ``` +What this does: Shows the code for this step. @@ -1167,7 +1260,7 @@ export default GroupMembersDemo; *** -#### LeadingView +##### LeadingView The customized chat interface is displayed below. @@ -1202,6 +1295,7 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { }; ; ``` +What this does: Shows the code for this step. @@ -1248,6 +1342,7 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { background: #09C26F; } ``` +What this does: Shows the code for this step. @@ -1255,7 +1350,7 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { *** -#### TrailingView +##### TrailingView You can customize the trailing view for each group members to meet your requirements. @@ -1325,6 +1420,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -1344,6 +1440,7 @@ export default GroupMembersDemo; font: 400 12px Roboto; } ``` +What this does: Shows the code for this step. @@ -1351,7 +1448,7 @@ export default GroupMembersDemo; *** -#### HeaderView +##### HeaderView You can set the Custom headerView to add more options to the Group Members component. @@ -1388,6 +1485,7 @@ const getHeaderView = () => { ``` +What this does: Shows the code for this step. @@ -1426,6 +1524,7 @@ const getHeaderView = () => { display: block; } ``` +What this does: Shows the code for this step. @@ -1433,7 +1532,7 @@ const getHeaderView = () => { *** -#### Options +##### Options You can set the Custom options to the Group Members component. @@ -1493,6 +1592,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` +What this does: Shows the code for this step. @@ -1511,6 +1611,7 @@ export default GroupMembersDemo; box-shadow: none; } ``` +What this does: Shows the code for this step. @@ -1518,7 +1619,13 @@ export default GroupMembersDemo; *** -## Component API Pattern +### Component API Pattern + +What you’re changing: Component API Pattern. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. | Customization Type | Prop Pattern | Example | | --- | --- | --- | @@ -1545,19 +1652,35 @@ export default GroupMembersDemo; --- -## Next Steps - - - - Display and manage group lists - - - Display and manage user lists - - - Render messages in a chat view - - - Display recent conversations - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Handle member click | `CometChatGroupMembers` | `onItemClick` | `onItemClick={(m) => ...}` | +| Enable multi-select | `CometChatGroupMembers` | `selectionMode` | `selectionMode={SelectionMode.multiple}` | +| Filter members | `CometChatGroupMembers` | `groupMemberRequestBuilder` | `new CometChat.GroupMembersRequestBuilder(guid)` | +| Search members | `CometChatGroupMembers` | `searchRequestBuilder` | `new CometChat.GroupMembersRequestBuilder(guid).setSearchKeyword(...)` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | +| Members not shown | Missing or invalid group | Ensure `group` is a valid `CometChat.Group` | +| Search results empty | Search builder too strict | Adjust `searchRequestBuilder` | +| Callbacks not firing | Wrong prop name | Use `onItemClick` or `onSelect` | +| Styles not applying | CSS Modules used | Use global CSS with `.cometchat-group-members` | + +## FAQ + +**Is `group` required?** +Yes. `CometChatGroupMembers` requires a `CometChat.Group`. + +**Can I filter by role?** +Use `GroupMembersRequestBuilder` filters or custom views. + +## Next steps + +- [Groups](/ui-kit/react/groups) +- [Conversations](/ui-kit/react/conversations) +- [Theming](/ui-kit/react/theme) diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 9d2ea9667..8e65b942e 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -3,6 +3,46 @@ title: "Groups" description: "CometChatGroups component displays a searchable list of all available groups with icons, names, member counts, and group type indicators. Supports selection modes, custom views, filtering via GroupsRequestBuilder, and CSS styling." --- +Browse and select groups with search, member counts, and group type indicators. + +## When to use this + +- You need a searchable list of groups. +- You want a group picker to start group chats. +- You need to filter groups by tags or type. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. + +## Quick start + +1. Add the component to your UI. + +```tsx +import React from "react"; +import { CometChatGroups } from "@cometchat/chat-uikit-react"; + +export default function GroupsDemo() { + return ; +} +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- `groupsRequestBuilder` controls filtering and paging. +- `selectionMode` enables multi-select workflows. +- `hideGroupType` toggles the group type icon. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -20,6 +60,7 @@ import { CometChatGroups } from "@cometchat/chat-uikit-react"; selectionMode={SelectionMode.none} /> ``` +What this does: Shows the code for this step. @@ -34,7 +75,13 @@ import { CometChatGroups } from "@cometchat/chat-uikit-react"; **Events:** None (does not emit events directly) -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. 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. @@ -56,9 +103,15 @@ The Groups component is composed of the following BaseComponents: *** -## Usage +### Usage -### Integration +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. + +#### Integration The following code snippet illustrates how you can directly incorporate the Groups component into your Application. @@ -74,6 +127,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -88,6 +142,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -95,11 +150,11 @@ export default GroupsDemo; *** -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. onSelect +##### 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. @@ -127,6 +182,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -150,12 +206,13 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -175,6 +232,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -192,12 +250,13 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -217,6 +276,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -234,16 +294,17 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. -### Filters +#### Filters **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -#### 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) @@ -278,6 +339,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -299,12 +361,13 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -329,6 +392,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -350,6 +414,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -357,7 +422,7 @@ export default GroupsDemo; *** -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -367,11 +432,17 @@ The `Groups` component does not produce any events directly. *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -393,6 +464,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -407,6 +479,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -468,6 +541,7 @@ export default GroupsDemo; line-height: 16.8px; } ``` +What this does: Shows the code for this step. @@ -475,7 +549,7 @@ export default GroupsDemo; *** -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -497,6 +571,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -517,6 +592,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -538,13 +614,13 @@ Below is a list of customizations along with corresponding code snippets: *** -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -#### ItemView +##### ItemView A custom view to render for each group in the fetched list. @@ -589,6 +665,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -617,6 +694,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -687,6 +765,7 @@ export default GroupsDemo; line-height: 16.8px; } ``` +What this does: Shows the code for this step. @@ -694,7 +773,7 @@ export default GroupsDemo; *** -#### TitleView +##### TitleView The customized chat interface is displayed below. @@ -721,6 +800,7 @@ const customTitleView = (group: CometChat.Group) => { ; ``` +What this does: Shows the code for this step. @@ -764,6 +844,7 @@ const customTitleView = (group: CometChat.Group) => { width: 12px; } ``` +What this does: Shows the code for this step. @@ -771,7 +852,7 @@ const customTitleView = (group: CometChat.Group) => { *** -#### SubtitleView +##### SubtitleView Custom subtitle view to be rendered for each group in the fetched list. @@ -814,6 +895,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -841,6 +923,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -857,6 +940,7 @@ export default GroupsDemo; line-height: 120%; } ``` +What this does: Shows the code for this step. @@ -864,7 +948,7 @@ export default GroupsDemo; *** -#### LeadingView +##### LeadingView The customized chat interface is displayed below. @@ -907,6 +991,7 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -941,6 +1026,7 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; position: relative; } ``` +What this does: Shows the code for this step. @@ -948,7 +1034,7 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; *** -#### TrailingView +##### TrailingView The customized chat interface is displayed below. @@ -976,6 +1062,7 @@ return
; ``` +What this does: Shows the code for this step. @@ -999,6 +1086,7 @@ return
height: fit-content; } ``` +What this does: Shows the code for this step. @@ -1006,7 +1094,7 @@ return
*** -#### Header View +##### Header View A custom component to render in the top-right corner of the groups list. @@ -1034,6 +1122,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -1052,6 +1141,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -1073,6 +1163,7 @@ export default GroupsDemo; mask-size: contain; } ``` +What this does: Shows the code for this step. @@ -1080,7 +1171,7 @@ export default GroupsDemo; *** -#### Options +##### Options You can set the Custom options to the Groups component. @@ -1116,6 +1207,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -1142,6 +1234,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` +What this does: Shows the code for this step. @@ -1167,13 +1260,20 @@ export default GroupsDemo; mask-size: contain; } ``` +What this does: Shows the code for this step. -## Component API Pattern +### Component API Pattern + +What you’re changing: Component API Pattern. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. | Customization Type | Prop Pattern | Example | | --- | --- | --- | @@ -1199,19 +1299,35 @@ export default GroupsDemo; --- -## Next Steps - - - - View and manage members within a group - - - Display and manage user lists - - - Display recent conversations - - - Render messages in a chat view - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Handle item click | `CometChatGroups` | `onItemClick` | `onItemClick={(g) => setActive(g)}` | +| Enable multi-select | `CometChatGroups` | `selectionMode` | `selectionMode={SelectionMode.multiple}` | +| Filter groups | `CometChatGroups` | `groupsRequestBuilder` | `new CometChat.GroupsRequestBuilder().setLimit(10)` | +| Hide group type | `CometChatGroups` | `hideGroupType` | `hideGroupType={true}` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | +| List is empty | Filters too strict | Relax `groupsRequestBuilder` filters | +| Group type icon missing | `hideGroupType` enabled | Set `hideGroupType={false}` | +| Callbacks not firing | Wrong prop name | Use `onItemClick` or `onSelect` | +| Styles not applying | CSS Modules used | Use global CSS with `.cometchat-groups` | + +## FAQ + +**Can I show only joined groups?** +Yes. Use `GroupsRequestBuilder` filters for membership. + +**How do I hide the group type icon?** +Set `hideGroupType={true}`. + +## Next steps + +- [Group Members](/ui-kit/react/group-members) +- [Conversations](/ui-kit/react/conversations) +- [Theming](/ui-kit/react/theme) diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index cf90bf14c..4ba2e4318 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -3,6 +3,43 @@ title: "Incoming Call" description: "Display and manage incoming voice and video calls with accept/decline controls using the CometChatIncomingCall component." --- +Render the incoming call UI with accept and decline actions. + +## When to use this + +- You need to handle incoming audio/video calls. +- You want a default accept/decline screen. +- You need to customize call handling. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `@cometchat/calls-sdk-javascript` installed. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. + +## Quick start + +1. Add the component to your UI. + +```tsx +import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; + +; +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- Mount `CometChatIncomingCall` at the app root. +- Use `onAccept` and `onDecline` to customize behavior. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -20,6 +57,7 @@ import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; disableSoundForCalls={false} /> ``` +What this does: Shows the code for this step. @@ -34,7 +72,13 @@ import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; **Events:** `ccCallRejected`, `ccCallAccepted`, `ccCallEnded` -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. 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. @@ -56,9 +100,15 @@ The `Incoming Call` is comprised of the following base components: **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 +### Usage -### Integration +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. + +#### Integration @@ -72,6 +122,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -86,16 +137,17 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. 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. @@ -115,6 +167,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -133,12 +186,13 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. -#### 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,6 +212,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -176,12 +231,13 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -201,6 +257,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -219,6 +276,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -226,7 +284,7 @@ export default IncomingCallsDemo; *** -### Filters +#### Filters You can set `CallSettingsBuilder` in the Incoming Call Component to customise the calling experience. To know more about the filters available please refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings). @@ -252,6 +310,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -276,12 +335,13 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -314,6 +374,7 @@ const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe( } ); ``` +What this does: Shows the code for this step. @@ -330,6 +391,7 @@ ccCallAccepted?.unsubscribe(); ccCallEnded?.unsubscribe(); ``` +What this does: Shows the code for this step. @@ -337,11 +399,17 @@ ccCallEnded?.unsubscribe(); *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Incoming Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -363,6 +431,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -377,6 +446,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -491,12 +561,13 @@ export default IncomingCallsDemo; justify-content: center; } ``` +What this does: Shows the code for this step. -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -518,6 +589,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -536,6 +608,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -551,13 +624,13 @@ Below is a list of customizations along with corresponding code snippets *** -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -#### SubtitleView +##### SubtitleView Property `subtitleView` is a function that renders a JSX element to display the subtitle view. @@ -578,6 +651,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -597,12 +671,13 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. -#### LeadingView +##### LeadingView Property `leadingView` is a function that renders a JSX element to display the leading view. @@ -635,6 +710,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -658,6 +734,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -667,12 +744,13 @@ export default IncomingCallsDemo; display: none; } ``` +What this does: Shows the code for this step. -#### TitleView +##### TitleView Property `titleView` is a function that renders a JSX element to display the title view. @@ -709,6 +787,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -736,6 +815,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -772,12 +852,13 @@ export default IncomingCallsDemo; width: 20px; } ``` +What this does: Shows the code for this step. -#### TrailingView +##### TrailingView Property `trailingView` is a function that renders a JSX element to display the trailing view. @@ -811,6 +892,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -835,6 +917,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -861,12 +944,13 @@ export default IncomingCallsDemo; background-size: contain; } ``` +What this does: Shows the code for this step. -#### ItemView +##### ItemView Property `itemView` is a function that renders a JSX element to display the item view. @@ -907,6 +991,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -938,6 +1023,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` +What this does: Shows the code for this step. @@ -976,6 +1062,7 @@ export default IncomingCallsDemo; font: 400 16px Roboto; } ``` +What this does: Shows the code for this step. @@ -999,19 +1086,32 @@ export default IncomingCallsDemo; --- -## Next Steps - - - - Manage outgoing voice and video calls - - - Add voice and video call buttons to your chat - - - Display call history and call log details - - - Overview of all calling capabilities - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Handle accept | `CometChatIncomingCall` | `onAccept` | `onAccept={() => ...}` | +| Handle decline | `CometChatIncomingCall` | `onDecline` | `onDecline={() => ...}` | +| Disable sounds | `CometChatIncomingCall` | `disableSoundForCalls` | `disableSoundForCalls={true}` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Incoming UI not shown | Component not mounted | Render `CometChatIncomingCall` at root | +| Calls not available | Calls SDK missing | Install `@cometchat/calls-sdk-javascript` | +| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | + +## FAQ + +**Where should I mount it?** +At the app root so it can listen globally. + +**Can I customize accept/decline?** +Yes. Use `onAccept` and `onDecline`. + +## Next steps + +- [Outgoing Call](/ui-kit/react/outgoing-call) +- [Call Buttons](/ui-kit/react/call-buttons) +- [Call Features](/ui-kit/react/call-features) diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index 7687fe9ed..8f12ec79b 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -3,6 +3,54 @@ title: "Message Composer" description: "CometChatMessageComposer component provides a rich text input for composing and sending messages including text, media, attachments, reactions, mentions, and voice notes. Supports custom actions, AI features, and CSS styling." --- +Compose and send messages with attachments, mentions, and actions. + +## When to use this + +- You need a message input with send actions. +- You want attachments, mentions, and rich actions. +- You want to customize send behavior or UI. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- Provide either `user` or `group` (not both). + +## Quick start + +1. Add the component to your UI. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + +export default function MessageComposerDemo() { + const [chatUser, setChatUser] = React.useState(); + + React.useEffect(() => { + CometChat.getUser("uid").then((user) => setChatUser(user)); + }, []); + + return chatUser ? : null; +} +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- `user` or `group` selects the conversation target. +- `hideVoiceRecording` hides voice input. +- `parentMessageId` enables threaded replies. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -17,6 +65,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; // For a group chat ``` +What this does: Shows the code for this step. @@ -31,7 +80,13 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; **Events:** `CometChatMessageEvents` -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. MessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages. @@ -46,9 +101,15 @@ Features such as **Attachments**, and **Message Editing** are also supported by **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). -## Usage +### Usage + +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. -### Integration +#### Integration The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app. @@ -74,6 +135,7 @@ export function MessageComposerDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -98,16 +160,17 @@ export function MessageComposerDemo() { ) : null; } ``` +What this does: Shows the code for this step. -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. 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. @@ -138,6 +201,7 @@ export function MessageComposerDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -167,12 +231,13 @@ export function MessageComposerDemo() { ) : null; } ``` +What this does: Shows the code for this step. -#### 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. @@ -203,12 +268,13 @@ export function MessageComposerDemo() { ) : null; } ``` +What this does: Shows the code for this step. -#### 3. onTextChange +##### 3. onTextChange This event is triggered as the user starts typing in the Message Composer. @@ -242,12 +308,13 @@ export function MessageComposerDemo() { ) : null; } ``` +What this does: Shows the code for this step. -#### 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. @@ -302,6 +369,7 @@ export function MessageComposerDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -309,13 +377,13 @@ export function MessageComposerDemo() { *** -### Filters +#### Filters MessageComposer component does not have any available filters. *** -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -346,6 +414,7 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { // Your Code }); ``` +What this does: Shows the code for this step. @@ -362,6 +431,7 @@ ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccMessageSent?.unsubscribe(); ``` +What this does: Shows the code for this step. @@ -369,11 +439,17 @@ ccMessageSent?.unsubscribe(); *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the MessageComposer component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style To modify the styling, you can customise the css of MessageComposer Component. @@ -392,6 +468,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -409,6 +486,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; background: #e5484d; } ``` +What this does: Shows the code for this step. @@ -416,7 +494,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; *** -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -429,6 +507,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -467,13 +546,13 @@ Below is a list of customizations along with corresponding code snippets *** -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -#### AttachmentOptions +##### AttachmentOptions By using `attachmentOptions`, you can set a list of custom `MessageComposerActions` for the MessageComposer Component. This will override the existing list of `MessageComposerActions`. @@ -531,6 +610,7 @@ function getAttachments() { user={userObj} />; ``` +What this does: Shows the code for this step. @@ -561,6 +641,7 @@ function getAttachments() { background: #141414; } ``` +What this does: Shows the code for this step. @@ -568,7 +649,7 @@ function getAttachments() { *** -#### AuxiliaryButtonView +##### AuxiliaryButtonView You can insert a custom view into the MessageComposer component to add additional functionality using the following method. @@ -613,6 +694,7 @@ const auxiliaryButtonView = ( user={userObj} />; ``` +What this does: Shows the code for this step. @@ -620,7 +702,7 @@ const auxiliaryButtonView = ( *** -#### SendButtonView +##### SendButtonView You can set a custom view in place of the already existing send button view. @@ -659,6 +741,7 @@ const sendButtonView = ( ; ``` +What this does: Shows the code for this step. @@ -678,6 +761,7 @@ const sendButtonView = ( background: #6852d6; } ``` +What this does: Shows the code for this step. @@ -685,7 +769,7 @@ const sendButtonView = ( *** -#### HeaderView +##### HeaderView You can set custom headerView to the MessageComposer component using the following method. @@ -723,6 +807,7 @@ const getHeaderView = () => { ; ``` +What this does: Shows the code for this step. @@ -768,6 +853,7 @@ const getHeaderView = () => { mask-size: contain; } ``` +What this does: Shows the code for this step. @@ -775,7 +861,7 @@ const getHeaderView = () => { *** -#### TextFormatters +##### TextFormatters Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) @@ -891,6 +977,7 @@ class ShortcutFormatter extends CometChatTextFormatter { export default ShortcutFormatter; ``` +What this does: Shows the code for this step. @@ -956,6 +1043,7 @@ export default class DialogHelper { } } ``` +What this does: Shows the code for this step. @@ -984,6 +1072,7 @@ export function MessageComposerDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -1007,19 +1096,32 @@ export function MessageComposerDemo() { --- -## Next Steps - - - - Render messages in a chat view - - - Customize message bubble rendering - - - Display user/group details in the toolbar - - - Add stickers, polls, and more to the composer - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Hide voice recording | `CometChatMessageComposer` | `hideVoiceRecording` | `hideVoiceRecording={true}` | +| Set default text | `CometChatMessageComposer` | `text` | `text="Hi"` | +| Thread replies | `CometChatMessageComposer` | `parentMessageId` | `parentMessageId={messageId}` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Composer does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | +| Cannot send messages | User/group not provided | Pass a valid `user` or `group` | +| Voice icon missing | `hideVoiceRecording` enabled | Set `hideVoiceRecording={false}` | + +## FAQ + +**Can I use it in a thread?** +Yes. Set `parentMessageId`. + +**How do I disable voice recording?** +Set `hideVoiceRecording={true}`. + +## Next steps + +- [Message List](/ui-kit/react/message-list) +- [Message Template](/ui-kit/react/message-template) +- [Theming](/ui-kit/react/theme) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 631ba1311..4e6d11925 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -3,6 +3,53 @@ title: "Message Header" description: "CometChatMessageHeader component displays user or group details in the toolbar including avatar, name, status, typing indicator, and back navigation. Supports custom views and CSS styling." --- +Render the header for an active chat with name, avatar, status, and typing indicators. + +## When to use this + +- You need a chat header for a user or group conversation. +- You want typing indicators and presence in the header. +- You want to customize the title or back button. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- Provide either `user` or `group` (not both). + +## Quick start + +1. Add the component to your UI. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; + +export default function MessageHeaderDemo() { + const [chatUser, setChatUser] = React.useState(); + + React.useEffect(() => { + CometChat.getUser("uid").then((user) => setChatUser(user)); + }, []); + + return chatUser ? : null; +} +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- Pass `user` for 1:1 or `group` for group chats. +- `hideBackButton` and `hideUserStatus` control header UI. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -17,6 +64,7 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; // For a group chat ``` +What this does: Shows the code for this step. @@ -31,7 +79,13 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; **Events:** None (does not emit events directly) -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. `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. @@ -51,9 +105,15 @@ The `MessageHeader` is comprised of the following components: | CometChatListItem | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. | | Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one. | -## Usage +### Usage + +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. -### Integration +#### Integration @@ -75,6 +135,7 @@ export function MessageHeaderDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -97,16 +158,17 @@ export function MessageHeaderDemo() { ) : null; } ``` +What this does: Shows the code for this step. -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. 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. @@ -142,6 +204,7 @@ export function MessageHeaderDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -149,7 +212,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. @@ -184,6 +247,7 @@ export function MessageHeaderDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -191,7 +255,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. @@ -206,6 +270,7 @@ const handleSearchClick = () => { ; ``` +What this does: Shows the code for this step. @@ -213,7 +278,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. @@ -228,6 +293,7 @@ const getOnItemClick = () => { ; ``` +What this does: Shows the code for this step. @@ -235,23 +301,29 @@ const getOnItemClick = () => { *** -### Filters +#### Filters **Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK. The `MessageHeader` component does not have any exposed filters. -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `MessageHeader` component does not produce any events. -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Message Header component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style To customize the appearance, you can customise css of `CometChatMessageHeader` @@ -271,6 +343,7 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; // Assuming groupObj is defined elsewhere in your code ; ``` +What this does: Shows the code for this step. @@ -284,12 +357,13 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; font-family: "SF Pro"; } ``` +What this does: Shows the code for this step. -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -302,6 +376,7 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -322,11 +397,11 @@ Following is a list of customizations along with their corresponding code snippe | **Summary Generation Message Count** | Number of messages for which the summary should be shown. | `summaryGenerationMessageCount={1000}` | | **Disable Auto Summary Generation** | Disables the auto generation of conversation summary. | `disableAutoSummaryGeneration={true}` | -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. -#### ItemView +##### ItemView The customized chat interface is displayed below. @@ -364,6 +439,7 @@ const CustomItemView = ( showBackButton={true} />; ``` +What this does: Shows the code for this step. @@ -373,6 +449,7 @@ const CustomItemView = ( border-radius: 8px; } ``` +What this does: Shows the code for this step. @@ -380,7 +457,7 @@ const CustomItemView = ( *** -#### TitleView +##### TitleView The customized chat interface is displayed below. @@ -413,6 +490,7 @@ function CustomTitleView() { ; ``` +What this does: Shows the code for this step. @@ -436,6 +514,7 @@ function CustomTitleView() { text-align: left; } ``` +What this does: Shows the code for this step. @@ -443,7 +522,7 @@ function CustomTitleView() { *** -#### SubtitleView +##### SubtitleView The customized chat interface is displayed below. @@ -467,6 +546,7 @@ function CustomSubtitleView() { ; ``` +What this does: Shows the code for this step. @@ -474,7 +554,7 @@ function CustomSubtitleView() { *** -#### LeadingView +##### LeadingView The customized chat interface is displayed below. @@ -508,6 +588,7 @@ function CustomLeadingView() { ; ``` +What this does: Shows the code for this step. @@ -538,6 +619,7 @@ function CustomLeadingView() { position: relative; } ``` +What this does: Shows the code for this step. @@ -545,7 +627,7 @@ function CustomLeadingView() { *** -#### TrailingView +##### TrailingView The customized chat interface is displayed below. @@ -584,6 +666,7 @@ function CustomTrailingButtonView() { trailingView={CustomTrailingButtonView()} />; ``` +What this does: Shows the code for this step. @@ -600,6 +683,7 @@ function CustomTrailingButtonView() { background: black; } ``` +What this does: Shows the code for this step. @@ -607,7 +691,7 @@ function CustomTrailingButtonView() { *** -#### AuxiliaryButtonView +##### AuxiliaryButtonView The customized chat interface is displayed below. @@ -646,6 +730,7 @@ function CustomAuxiliaryButtonView() { auxiliaryButtonView={CustomAuxiliaryButtonView()} />; ``` +What this does: Shows the code for this step. @@ -662,12 +747,13 @@ function CustomAuxiliaryButtonView() { background: black; } ``` +What this does: Shows the code for this step. -#### LastActiveAt Date Time Format +##### LastActiveAt Date Time Format The `lastActiveAtDateTimeFormat` property allows you to customize the **last active** timestamp displayed in the message header. @@ -685,6 +771,7 @@ new CalendarObject({ }, }); ``` +What this does: Shows the code for this step. The following example demonstrates how to modify the **last active** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -712,6 +799,7 @@ function getDateFormat() { lastActiveAtDateTimeFormat={getDateFormat()} />; ``` +What this does: Shows the code for this step. @@ -743,19 +831,32 @@ function getDateFormat() { --- -## Next Steps - - - - Render messages in a chat view - - - Compose and send messages - - - Display threaded message details - - - Display recent conversations - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Hide back button | `CometChatMessageHeader` | `hideBackButton` | `hideBackButton={true}` | +| Hide status | `CometChatMessageHeader` | `hideUserStatus` | `hideUserStatus={true}` | +| Custom title view | `CometChatMessageHeader` | `titleView` | `titleView={() => }` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Header does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | +| Missing name/avatar | User/group not loaded | Fetch `CometChat.User` or `CometChat.Group` | +| Both user and group passed | Invalid props | Pass only one of `user` or `group` | + +## FAQ + +**Can I hide the back button?** +Yes. Use `hideBackButton={true}`. + +**Does it show typing?** +Yes. Typing indicators are built in. + +## Next steps + +- [Message List](/ui-kit/react/message-list) +- [Message Composer](/ui-kit/react/message-composer) +- [Theming](/ui-kit/react/theme) diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index 579889c3e..b393350bd 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -3,6 +3,54 @@ title: "Message List" 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." --- +Render a scrollable list of messages for a user or group conversation. + +## When to use this + +- You need to render chat messages in a conversation. +- You want read receipts, reactions, and threads. +- You want to customize message rendering with templates. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- Provide either `user` or `group` (not both). + +## Quick start + +1. Add the component to your UI. + +```tsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageList } from "@cometchat/chat-uikit-react"; + +export default function MessageListDemo() { + const [chatUser, setChatUser] = React.useState(); + + React.useEffect(() => { + CometChat.getUser("uid").then((user) => setChatUser(user)); + }, []); + + return chatUser ? : null; +} +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- `user` or `group` selects the conversation source. +- `messagesRequestBuilder` controls pagination and filtering. +- `templates` enables custom message rendering. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -17,6 +65,7 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; // For a group chat ``` +What this does: Shows the code for this step. @@ -31,7 +80,13 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; **Events:** `CometChatMessageEvents` -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. `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. @@ -46,9 +101,15 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; *** -## Usage +### Usage + +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. -### Integration +#### Integration The following code snippet illustrates how you can directly incorporate the MessageList component into your Application. @@ -74,6 +135,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -98,6 +160,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -111,11 +174,11 @@ To fetch messages for a specific entity, you need to supplement it with `User` o *** -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. 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. @@ -148,6 +211,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -180,12 +244,13 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. -#### 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. @@ -215,6 +280,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -244,12 +310,13 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. -#### 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. @@ -282,6 +349,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -311,12 +379,13 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. -#### 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. @@ -352,6 +421,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -384,14 +454,15 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. -### Filters +#### 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). @@ -424,6 +495,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -454,6 +526,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -468,7 +541,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. @@ -499,6 +572,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -529,12 +603,13 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -580,6 +655,7 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => { // Your Code }); ``` +What this does: Shows the code for this step. @@ -611,6 +687,7 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => { // Your Code }); ``` +What this does: Shows the code for this step. @@ -625,6 +702,7 @@ ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccActiveChatChanged?.unsubscribe(); ``` +What this does: Shows the code for this step. @@ -634,6 +712,7 @@ ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccActiveChatChanged?.unsubscribe(); ``` +What this does: Shows the code for this step. @@ -641,11 +720,17 @@ ccActiveChatChanged?.unsubscribe(); *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Message List component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style You can set the css to the MessageList Component Component to customize the styling. @@ -664,6 +749,7 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -675,12 +761,13 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; font-family: "SF Pro"; } ``` +What this does: Shows the code for this step. -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -710,6 +797,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -739,6 +827,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -789,11 +878,11 @@ Below is a list of customizations along with corresponding code snippets *** -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. -#### Templates +##### Templates [CometChatMessageTemplate](/ui-kit/react/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to [CometChatMessageTemplate](/ui-kit/react/message-template). @@ -858,6 +947,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -912,6 +1002,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -919,7 +1010,7 @@ export function MessageListDemo() { *** -#### Separator DateTime Format +##### Separator DateTime Format The `separatorDateTimeFormat` property allows you to customize the **Date Separator** timestamp displayed in the Message List. @@ -932,6 +1023,7 @@ new CalendarObject({ otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025" }); ``` +What this does: Shows the code for this step. The following example demonstrates how to modify the **Date Separator** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -959,6 +1051,7 @@ function getDateFormat() { separatorDateTimeFormat={getDateFormat()} />; ``` +What this does: Shows the code for this step. @@ -974,7 +1067,7 @@ function getDateFormat() { *** -#### Sticky DateTime Format +##### Sticky DateTime Format The `stickyDateTimeFormat` property allows you to customize the **Sticky Date** timestamp displayed in the Message List. @@ -989,6 +1082,7 @@ new CalendarObject({ otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025" }); ``` +What this does: Shows the code for this step. The following example demonstrates how to modify the **Sticky Date** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -1013,6 +1107,7 @@ function getDateFormat() { // Apply the custom format to the CometChatMessageList component ; ``` +What this does: Shows the code for this step. @@ -1028,7 +1123,7 @@ function getDateFormat() { *** -#### Message SentAt DateTime Format +##### Message SentAt DateTime Format The `messageSentAtDateTimeFormat` property allows you to customize the **Message SentAt** timestamp displayed in the Message List. @@ -1041,6 +1136,7 @@ new CalendarObject({ otherDays: `hh:mm A`, // Example: "09:30 PM" }); ``` +What this does: Shows the code for this step. The following example demonstrates how to modify the **Message SentAt** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -1068,6 +1164,7 @@ function getDateFormat() { messageSentAtDateTimeFormat={getDateFormat()} />; ``` +What this does: Shows the code for this step. @@ -1083,7 +1180,7 @@ function getDateFormat() { *** -#### Message Info DateTime Format +##### Message Info DateTime Format The `messageInfoDateTimeFormat` property allows you to customize the **Message Info** timestamp displayed in the Message List. @@ -1096,6 +1193,7 @@ new CalendarObject({ otherDays: `DD MMM, hh:mm A`, // Example: "29 Jan, 04:34 AM" }); ``` +What this does: Shows the code for this step. The following example demonstrates how to modify the **Message Info** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -1123,6 +1221,7 @@ function getDateFormat() { messageInfoDateTimeFormat={getDateFormat()} />; ``` +What this does: Shows the code for this step. @@ -1138,7 +1237,7 @@ function getDateFormat() { *** -#### Headerview +##### Headerview You can set custom headerView to the Message List component using the following method. @@ -1186,6 +1285,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -1224,6 +1324,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -1262,6 +1363,7 @@ export function MessageListDemo() { align-items: center; } ``` +What this does: Shows the code for this step. @@ -1269,7 +1371,7 @@ export function MessageListDemo() { *** -#### FooterView +##### FooterView You can set custom footerview to the Message List component using the following method. @@ -1319,6 +1421,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -1359,6 +1462,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -1397,6 +1501,7 @@ export function MessageListDemo() { align-items: center; } ``` +What this does: Shows the code for this step. @@ -1404,7 +1509,7 @@ export function MessageListDemo() { *** -#### TextFormatters +##### TextFormatters Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) @@ -1520,6 +1625,7 @@ class ShortcutFormatter extends CometChatTextFormatter { export default ShortcutFormatter; ``` +What this does: Shows the code for this step. @@ -1588,6 +1694,7 @@ export default class DialogHelper { } } ``` +What this does: Shows the code for this step. @@ -1616,6 +1723,7 @@ export function MessageListDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -1639,19 +1747,34 @@ export function MessageListDemo() { --- -## Next Steps - - - - Compose and send messages - - - Display user/group details in the toolbar - - - Customize message bubble rendering - - - Display threaded message details - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Hide receipts | `CometChatMessageList` | `hideReceipts` | `hideReceipts={true}` | +| Custom templates | `CometChatMessageList` | `templates` | `templates={customTemplates}` | +| Thread click handler | `CometChatMessageList` | `onThreadRepliesClick` | `onThreadRepliesClick={(m) => ...}` | +| Filter messages | `CometChatMessageList` | `messagesRequestBuilder` | `new CometChat.MessagesRequestBuilder()` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| List does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | +| No messages | User/group not loaded | Fetch and pass a valid `CometChat.User` or `CometChat.Group` | +| Errors at runtime | Both user and group passed | Pass only one of `user` or `group` | +| Custom view not applied | Templates not passed | Pass templates via `templates` prop | + +## FAQ + +**Can I render group messages?** +Yes. Pass `group={chatGroup}`. + +**How do I customize bubbles?** +Use `templates` or CSS variables. + +## Next steps + +- [Message Composer](/ui-kit/react/message-composer) +- [Message Template](/ui-kit/react/message-template) +- [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling) diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index 7852cea55..bf62b8d42 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -3,6 +3,46 @@ title: "Message Template" 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." --- +Define custom message templates to control bubble layout and rendering. + +## When to use this + +- You need custom message layouts or new message types. +- You want to override header/content/footer views. +- You want consistent rendering across message categories. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- Templates must be passed to `CometChatMessageList`. + +## Quick start + +1. Add the component to your UI. + +```tsx +import { CometChatMessageList, ChatConfigurator } from "@cometchat/chat-uikit-react"; + +const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); + +; +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- Templates are passed via `templates` on `CometChatMessageList`. +- Each template is mapped by `category` and `type`. +- `contentView`, `headerView`, and `footerView` control bubble layout. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -17,6 +57,7 @@ const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); // Pass custom templates to MessageList ``` +What this does: Shows the code for this step. @@ -30,7 +71,13 @@ const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); **Related:** Used with `CometChatMessageList` via the `templates` prop -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. **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). @@ -38,7 +85,7 @@ const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); 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 +#### Structure @@ -64,7 +111,7 @@ The Message Bubble structure can typically be broken down into the following vie *** -### Properties +#### Properties MessageTemplate provides you with methods that allow you to alter various properties of the Message Bubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble, @@ -112,7 +159,13 @@ MessageTemplate provides you with methods that allow you to alter various proper *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/react/message-list) component. @@ -121,8 +174,9 @@ The first step is to fetch the list of existing templates when you want to modif ```javascript let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); ``` +What this does: Shows the code for this step. -### Existing Templates +#### Existing Templates You will need to first get the MessageTemplate object for the type of message you want to customize. You will be customizing the text message bubble here. The code snippet to get the Text MessageTemplate is as follows. @@ -142,6 +196,7 @@ for (let i = 0; i < allTemplates.length; i++) { } } ``` +What this does: Shows the code for this step. @@ -159,6 +214,7 @@ for (let i = 0; i < allTemplates.length; i++) { } } ``` +What this does: Shows the code for this step. @@ -173,6 +229,7 @@ import { CometChatMessageList } from "@cometchat/uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -182,12 +239,13 @@ import { CometChatMessageList } from "@cometchat/uikit-react"; ; ``` +What this does: Shows the code for this step. -#### HeaderView +##### HeaderView The `headerView` method of MessageTemplate allows you to add custom views to the header of your message bubbles. In the example below, we will add a custom header view of every text message in the MessageList. @@ -248,6 +306,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -301,12 +360,13 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. -#### Contentview +##### Contentview The `contentview` method of MessageTemplate allows you to add a custom view to the content of your message bubbles. In the example below, we will add a custom layout to the content view of every text message in the MessageList. @@ -410,6 +470,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -506,6 +567,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -564,12 +626,13 @@ export { CustomMessageTemplate }; font: 500 14px/1.2 Roboto; } ``` +What this does: Shows the code for this step. -#### BottomView +##### BottomView The `bottomView` method of MessageTemplate allows you to add a custom button view to your message bubbles. In the example below, we will add a custom bottom view to every text message in the MessageList. @@ -635,6 +698,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -684,6 +748,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -724,12 +789,13 @@ export { CustomMessageTemplate }; background-color: #f44649; } ``` +What this does: Shows the code for this step. -#### FooterView +##### FooterView The `footerView` method of MessageTemplate allows you to add a footer view to your message bubbles. In the example below, we will add a custom footer view to every text message in the MessageList. @@ -798,6 +864,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -859,6 +926,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -880,12 +948,13 @@ export { CustomMessageTemplate }; border-radius: 12px 12px 0px 0px; } ``` +What this does: Shows the code for this step. -#### BubbleView +##### BubbleView The `bubbleView` method of MessageTemplate allows you to add a bubble view to your message bubbles. In the example below, we will add a custom bubble view to the text message in the MessageList. @@ -1006,6 +1075,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1108,6 +1178,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1185,12 +1256,13 @@ export { CustomMessageTemplate }; border-top: 10px solid #e8e8e8; } ``` +What this does: Shows the code for this step. -#### StatusInfoView +##### StatusInfoView The `statusInfoView` method of MessageTemplate allows you to add a status info view to your message bubbles. In the example below, we will add a custom status info view to every text message in the MessageList. @@ -1267,6 +1339,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1333,6 +1406,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1359,12 +1433,13 @@ export { CustomMessageTemplate }; padding: 8px; } ``` +What this does: Shows the code for this step. -#### ReplyView +##### ReplyView The `replyView` method of MessageTemplate allows you to add a reply view to your message bubbles. In the example below, we will style the existing reply view in the MessageList. @@ -1408,6 +1483,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1435,6 +1511,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1455,12 +1532,13 @@ export { CustomMessageTemplate }; --cometchat-primary-color: #f76808; } ``` +What this does: Shows the code for this step. -#### Options +##### Options The `options` method in the MessageTemplate allows you to customize the options that appear in the action sheet when a message is long-pressed. By default, CometChat UI Kit provides a set of options like "Thread Reply", "Copy" ,"Edit", and "Delete". @@ -1547,6 +1625,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1615,6 +1694,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1632,12 +1712,13 @@ export { CustomMessageTemplate }; background-color: #6852d6; } ``` +What this does: Shows the code for this step. -### New Templates +#### New Templates You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate. @@ -1770,6 +1851,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1881,6 +1963,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` +What this does: Shows the code for this step. @@ -1961,6 +2044,7 @@ export { CustomMessageTemplate }; font-style: normal; } ``` +What this does: Shows the code for this step. @@ -1983,19 +2067,32 @@ export { CustomMessageTemplate }; --- -## Next Steps - - - - Use templates with the message list component - - - Compose and send messages - - - Customize the look and feel of your chat UI - - - Style individual message bubbles with CSS - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Use default templates | `CometChatMessageList` | `templates` | `templates={ChatConfigurator.getDataSource().getAllMessageTemplates()}` | +| Override content | `CometChatMessageTemplate` | `contentView` | `contentView={(msg) => }` | +| Override footer | `CometChatMessageTemplate` | `footerView` | `footerView={(msg) => }` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Templates not applied | Not passed to MessageList | Pass templates via `templates` prop | +| Custom view not showing | Returning null/undefined | Return valid JSX in view functions | +| Wrong template mapping | Incorrect type/category | Match `type` and `category` to the message | + +## FAQ + +**Do I need to replace all templates?** +No. You can modify a subset. + +**Where do templates render?** +In `CometChatMessageList` via the `templates` prop. + +## Next steps + +- [Message List](/ui-kit/react/message-list) +- [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling) +- [Theming](/ui-kit/react/theme) diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index f821feebb..3d101d88b 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -3,6 +3,52 @@ title: "Outgoing Call" description: "Display and manage outgoing voice and video calls with cancel controls using the CometChatOutgoingCall component." --- +Show the outgoing call screen after initiating a call. + +## When to use this + +- You need to initiate voice or video calls. +- You want a default outgoing call UI. +- You need to handle call cancellation. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `@cometchat/calls-sdk-javascript` installed. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- You must create a `CometChat.Call` via `CometChat.initiateCall()`. + +## Quick start + +1. Add the component to your UI. + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; + +const callObject = new CometChat.Call( + "uid", + CometChatUIKitConstants.MessageTypes.audio, + CometChatUIKitConstants.MessageReceiverType.user +); +const call = await CometChat.initiateCall(callObject); + +; +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- `call` prop is required. +- Use `onCallCanceled` for cancel handling. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -21,6 +67,7 @@ const initiatedCall = await CometChat.initiateCall(callObject); disableSoundForCalls={false} /> ``` +What this does: Shows the code for this step. @@ -35,7 +82,13 @@ const initiatedCall = await CometChat.initiateCall(callObject); **Events:** none emitted directly -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. 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. @@ -56,9 +109,15 @@ The `Outgoing Call` is comprised of the following components: **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 +### Usage -### Integration +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. + +#### Integration @@ -93,6 +152,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -128,16 +188,17 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. onCallCanceled +##### 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. @@ -182,6 +243,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -226,12 +288,13 @@ const OutgoingCallDemo = () => { }; export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -275,6 +338,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -315,6 +379,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -322,7 +387,7 @@ export default OutgoingCallDemo; *** -### Filters +#### Filters **Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK. @@ -330,7 +395,7 @@ The `Outgoing Call` component does not have any exposed filters. *** -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -338,11 +403,17 @@ The `Outgoing Call` component does not have any exposed filters. *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Outgoing Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -386,6 +457,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -423,6 +495,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -449,12 +522,13 @@ export default OutgoingCallDemo; font: 400 32px/38px "Times New Roman"; } ``` +What this does: Shows the code for this step. -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -495,6 +569,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -533,6 +608,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -548,13 +624,13 @@ Below is a list of customizations along with corresponding code snippets *** -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -#### TitleView +##### TitleView This prop renders the custom title view for the outgoing call. Use this to override the existing title of user name from the outgoing call. @@ -609,6 +685,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -655,6 +732,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -666,12 +744,13 @@ export default OutgoingCallDemo; font: 500 24px Roboto; } ``` +What this does: Shows the code for this step. -#### SubtitleView +##### SubtitleView This prop renders the custom sub title view for the outgoing call. Use this to override the existing sub title text from the outgoing call. @@ -727,6 +806,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -774,6 +854,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -796,12 +877,13 @@ export default OutgoingCallDemo; width: 24px; } ``` +What this does: Shows the code for this step. -#### AvatarView +##### AvatarView This prop renders the custom avatar view for the outgoing call. Use this to override the existing avatar image from the outgoing call. @@ -861,6 +943,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -912,6 +995,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -934,12 +1018,13 @@ export default OutgoingCallDemo; right: -60px; } ``` +What this does: Shows the code for this step. -#### CancelButtonView +##### CancelButtonView This prop renders the custom cancel-call button view for the outgoing call. Use this to override the existing cancel call button view from the outgoing call. @@ -997,6 +1082,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -1046,6 +1132,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` +What this does: Shows the code for this step. @@ -1079,6 +1166,7 @@ export default OutgoingCallDemo; width: 32px; } ``` +What this does: Shows the code for this step. @@ -1102,19 +1190,32 @@ export default OutgoingCallDemo; --- -## Next Steps - - - - Handle incoming voice and video calls - - - Add voice and video call buttons to your chat - - - Display call history and call log details - - - Overview of all calling capabilities - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Render outgoing call | `CometChatOutgoingCall` | `call` | `call={call}` | +| Handle cancel | `CometChatOutgoingCall` | `onCallCanceled` | `onCallCanceled={() => ...}` | +| Disable sounds | `CometChatOutgoingCall` | `disableSoundForCalls` | `disableSoundForCalls={true}` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Outgoing UI not shown | Call not initiated | Call `CometChat.initiateCall()` and pass result | +| Calls not available | Calls SDK missing | Install `@cometchat/calls-sdk-javascript` | +| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | + +## FAQ + +**Do I need to initiate the call?** +Yes. `call` must come from `CometChat.initiateCall()`. + +**How do I cancel a call?** +Use the `onCallCanceled` callback. + +## Next steps + +- [Incoming Call](/ui-kit/react/incoming-call) +- [Call Buttons](/ui-kit/react/call-buttons) +- [Call Features](/ui-kit/react/call-features) diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 2a8839333..b40630c97 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -3,6 +3,42 @@ title: "Search" description: "Search across conversations and messages in real time with filtering, scopes, and custom views using the CometChatSearch component." --- +Search across conversations and messages with filters and callbacks. + +## When to use this + +- You need a global search UI. +- You want to search messages and conversations. +- You want custom callbacks for search selection. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. + +## Quick start + +1. Add the component to your UI. + +```tsx +import { CometChatSearch } from "@cometchat/chat-uikit-react"; + +; +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- Use `searchFilters` and `searchIn` to scope search. +- Use `onConversationClicked` and `onMessageClicked` callbacks. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -20,6 +56,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; hideBackButton={false} /> ``` +What this does: Shows the code for this step. @@ -34,7 +71,13 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; **Events:** none -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. 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. @@ -44,9 +87,15 @@ The `CometChatSearch` component is a powerful and customizable search interface **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 +### Usage -### Integration +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. + +#### Integration @@ -63,6 +112,7 @@ function SearchDemo() { export default SearchDemo; ``` +What this does: Shows the code for this step. @@ -80,6 +130,7 @@ function SearchDemo() { export default SearchDemo; ``` +What this does: Shows the code for this step. @@ -87,11 +138,11 @@ export default SearchDemo; *** -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. onConversationClicked +##### 1. onConversationClicked `onConversationClicked` is triggered when you click on a Conversation from the search result. The `onConversationClicked` action doesn't have a predefined behavior. You can override this action using the following code snippet. @@ -106,6 +157,7 @@ const openConversation = (conversation: CometChat.Conversation) => { ; ``` +What this does: Shows the code for this step. @@ -119,6 +171,7 @@ const openConversation = (conversation) => { ; ``` +What this does: Shows the code for this step. @@ -126,7 +179,7 @@ const openConversation = (conversation) => { *** -#### 2. onMessageClicked +##### 2. onMessageClicked `onMessageClicked` is triggered when you click on a Message from the search result. The `onMessageClicked` action doesn't have a predefined behavior. You can override this action using the following code snippet. @@ -141,6 +194,7 @@ const goToMessage = (message: CometChat.BaseMessage) => { ; ``` +What this does: Shows the code for this step. @@ -154,6 +208,7 @@ const goToMessage = (message) => { ; ``` +What this does: Shows the code for this step. @@ -161,7 +216,7 @@ const goToMessage = (message) => { *** -#### 3. OnBack +##### 3. 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. @@ -176,6 +231,7 @@ const onBack = () => { ; ``` +What this does: Shows the code for this step. @@ -189,6 +245,7 @@ const onBack = () => { ; ``` +What this does: Shows the code for this step. @@ -196,7 +253,7 @@ const onBack = () => { *** -#### 4. onError +##### 4. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component. @@ -211,6 +268,7 @@ const handleOnError = (error: CometChat.CometChatException) => { ; ``` +What this does: Shows the code for this step. @@ -224,6 +282,7 @@ const handleOnError = (error) => { ; ``` +What this does: Shows the code for this step. @@ -231,9 +290,9 @@ const handleOnError = (error) => { *** -### Filters +#### Filters -#### 1. ConversationsRequestBuilder +##### 1. ConversationsRequestBuilder You can set the `ConversationsRequestBuilder` in the Search Component to filter the search result. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/javascript/retrieve-conversations). @@ -249,6 +308,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; )} />; ``` +What this does: Shows the code for this step. @@ -263,6 +323,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; )} />; ``` +What this does: Shows the code for this step. @@ -270,7 +331,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; *** -#### 2. MessagesRequestBuilder +##### 2. MessagesRequestBuilder You can set the `MessagesRequestBuilder` in the Search Component to filter the search result. You can modify the builder as per your specific requirements with multiple options available to know more refer to [MessagesRequestBuilder](/sdk/javascript/additional-message-filtering). @@ -284,6 +345,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; messagesRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)} />; ``` +What this does: Shows the code for this step. @@ -296,6 +358,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; messagesRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)} />; ``` +What this does: Shows the code for this step. @@ -303,7 +366,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; *** -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed. @@ -311,11 +374,17 @@ The `CometChatSearch` component does not produce any events. *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the `CometChatSearch` component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style To customize the appearance, you can customise css of `CometChatSearch` @@ -333,6 +402,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -405,12 +475,13 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; font-weight: 700; } ``` +What this does: Shows the code for this step. -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -423,6 +494,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -432,6 +504,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -455,37 +528,37 @@ Following is a list of customizations along with their corresponding code snippe | **Empty View** | A custom component to display when there are no conversations available. | `emptyView={<>Custom Empty View}` | | **Error View** | A custom component to display when an error occurs. | `errorView={<>Custom Error View}` | -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -#### ConversationItemView +##### ConversationItemView With this function, you can assign a custom list item view to an conversation in the search result. For more information, refer to the [itemView](/ui-kit/react/conversations#itemview) prop of the `CometChatConversations` component. -#### ConversationLeadingView +##### ConversationLeadingView With this function, you can assign a custom leading view of an conversation in the search result. For more information, refer to the [leadingView](/ui-kit/react/conversations#leadingview) prop of the `CometChatConversations` component. -#### ConversationTitleView +##### ConversationTitleView With this function, you can assign a custom title view to an conversation in the search result. For more information, refer to the [titleView](/ui-kit/react/conversations#titleview) prop of the `CometChatConversations` component. -#### ConversationSubtitleView +##### ConversationSubtitleView With this function, you can assign a custom subtitle view to an conversation in the search result. For more information, refer to the [subtitleView](/ui-kit/react/conversations#subtitleview) prop of the `CometChatConversations` component. -#### ConversationTrailingView +##### ConversationTrailingView With this function, you can assign a custom trailing view to an conversation in the search result. For more information, refer to the [trailingView](/ui-kit/react/conversations#trailingview) prop of the `CometChatConversations` component. -#### ConversationOptions +##### ConversationOptions A function that returns a list of actions available when hovering over a conversation item in the search result. For more information, refer to the [options](/ui-kit/react/conversations#options) prop of the `CometChatConversations` component. -#### MessageItemView +##### MessageItemView With this function, you can assign a custom item view of a message in the search result. @@ -526,6 +599,7 @@ const getMessageItemView = (message: CometChat.BaseMessage) => { messageItemView={getMessageItemView} // Custom message item view />; ``` +What this does: Shows the code for this step. @@ -550,6 +624,7 @@ const getMessageItemView = (message: CometChat.BaseMessage) => { font: var(--cometchat-font-body-regular); } ``` +What this does: Shows the code for this step. @@ -557,7 +632,7 @@ const getMessageItemView = (message: CometChat.BaseMessage) => { *** -#### MessageLeadingView +##### MessageLeadingView With this function, you can assign a custom leading view of a message in the search result. @@ -593,6 +668,7 @@ const getMessageLeadingView = (message: CometChat.BaseMessage) => { messageLeadingView={getMessageLeadingView} // Custom message leading view />; ``` +What this does: Shows the code for this step. @@ -613,6 +689,7 @@ const getMessageLeadingView = (message: CometChat.BaseMessage) => { width: 32px; } ``` +What this does: Shows the code for this step. @@ -620,7 +697,7 @@ const getMessageLeadingView = (message: CometChat.BaseMessage) => { *** -#### MessageTitleView +##### MessageTitleView With this function, you can assign a custom title view of a message in the search result. @@ -662,6 +739,7 @@ const getMessageTitleView = (message: CometChat.BaseMessage) => { messageTitleView={getMessageTitleView} // Custom message title view />; ``` +What this does: Shows the code for this step. @@ -685,6 +763,7 @@ const getMessageTitleView = (message: CometChat.BaseMessage) => { text-decoration: underline; } ``` +What this does: Shows the code for this step. @@ -692,7 +771,7 @@ const getMessageTitleView = (message: CometChat.BaseMessage) => { *** -#### MessageSubtitleView +##### MessageSubtitleView With this function, you can assign a custom subtitle view of a message in the search result. @@ -733,6 +812,7 @@ const getMessageSubtitleView = (message: CometChat.BaseMessage) => { messageSubtitleView={getMessageSubtitleView} // Custom message subtitle view />; ``` +What this does: Shows the code for this step. @@ -757,6 +837,7 @@ const getMessageSubtitleView = (message: CometChat.BaseMessage) => { font: var(--cometchat-font-body-regular); } ``` +What this does: Shows the code for this step. @@ -764,7 +845,7 @@ const getMessageSubtitleView = (message: CometChat.BaseMessage) => { *** -#### MessageTrailingView +##### MessageTrailingView With this function, you can assign a custom trailing view of a message in the search result. @@ -830,6 +911,7 @@ const getMessageTrailingView = (message: CometChat.BaseMessage) => { messageTrailingView={getMessageTrailingView} // Custom message trailing view />; ``` +What this does: Shows the code for this step. @@ -872,6 +954,7 @@ const getMessageTrailingView = (message: CometChat.BaseMessage) => { color: #6a5b99; } ``` +What this does: Shows the code for this step. @@ -879,7 +962,7 @@ const getMessageTrailingView = (message: CometChat.BaseMessage) => { *** -#### Message SentAt Date Time Format +##### Message SentAt Date Time Format The `MessageSentAtDateTimeFormat` property allows you to customize the **Message Sent At** timestamp displayed in the Search. @@ -892,6 +975,7 @@ new CalendarObject({ today: "DD MMM, YYYY" // Example: "04 Jun, 2025" }); ``` +What this does: Shows the code for this step. The following example demonstrates how to modify the **Sent At** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -916,6 +1000,7 @@ function getDateFormat() { // Apply the custom format to the CometChatSearch component ; ``` +What this does: Shows the code for this step. @@ -923,7 +1008,7 @@ function getDateFormat() { *** -#### Text Formatters +##### 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. @@ -945,19 +1030,33 @@ Assigns the list of text formatters. If the provided list is not null, it sets t --- -## Next Steps - - - - Display and manage conversation lists - - - Render messages in a conversation - - - Build a message search experience - - - Explore all available UI Kit components - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Conversation click | `CometChatSearch` | `onConversationClicked` | `onConversationClicked={(c) => ...}` | +| Message click | `CometChatSearch` | `onMessageClicked` | `onMessageClicked={(m) => ...}` | +| Search scope | `CometChatSearch` | `searchIn` | `searchIn={["messages"]}` | +| Search filters | `CometChatSearch` | `searchFilters` | `searchFilters={[...]} ` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Search shows no results | Init/login missing | Call `CometChatUIKit.init()` and `login()` | +| No results | Filters too strict | Adjust `searchFilters` and `searchIn` | +| Callbacks not firing | Wrong prop name | Use `onConversationClicked` or `onMessageClicked` | + +## FAQ + +**Can I search only messages?** +Yes. Set `searchIn={['messages']}`. + +**How do I open a conversation from results?** +Use `onConversationClicked`. + +## Next steps + +- [Conversations](/ui-kit/react/conversations) +- [Message List](/ui-kit/react/message-list) +- [Theming](/ui-kit/react/theme) diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index f89b627a4..cc13d8fbb 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -3,6 +3,43 @@ title: "Thread Header" description: "CometChatThreadHeader component displays the parent message of a threaded conversation with reply count, allowing users to view and navigate threaded message discussions." --- +Display the parent message and reply count for a thread. + +## When to use this + +- You are building threaded message views. +- You need a header showing the parent message. +- You want to handle closing the thread view. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. +- A valid `parentMessage` is required. + +## Quick start + +1. Add the component to your UI. + +```tsx +import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; + +; +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- `parentMessage` is required to render the header. +- Use `onClose` to control thread navigation. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -13,6 +50,7 @@ import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; ``` +What this does: Shows the code for this step. @@ -27,7 +65,13 @@ import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; **Events:** None -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. CometChatThreadHeader is a Component that displays the parent message & number of replies of thread. @@ -41,9 +85,15 @@ CometChatThreadHeader is a Component that displays the parent message & number o **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 +### Usage -### Integration +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. + +#### Integration The following code snippet illustrates how you can directly incorporate the CometChatThreadHeader component into your Application. @@ -73,6 +123,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -100,6 +151,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -107,7 +159,7 @@ export function ThreadHeaderDemo() { *** -### Actions +#### 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. @@ -148,6 +200,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -155,7 +208,7 @@ export function ThreadHeaderDemo() { *** -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -163,13 +216,19 @@ The ThreadHeader Component does not emit any events of its own. *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. 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. *** -### Style +#### Style 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. @@ -205,6 +264,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -222,6 +282,7 @@ export function ThreadHeaderDemo() { color: #6852d6; } ``` +What this does: Shows the code for this step. @@ -229,7 +290,7 @@ export function ThreadHeaderDemo() { *** -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -267,6 +328,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` +What this does: Shows the code for this step. @@ -284,11 +346,11 @@ Below is a list of customizations along with corresponding code snippets | **Show Scrollbar** | Controls the visibility of the scrollbar in the component. | `showScrollbar={true}` | | **On Error** | Callback function triggered when an error occurs. | `onError={(error: CometChat.CometChatException) => console.log(error)}` | -### Advanced +#### Advanced *** -#### Separator DateTime Format +##### Separator DateTime Format The `separatorDateTimeFormat` property allows you to customize the **Date Separator** timestamp displayed in the Threaded Message Preview. @@ -301,6 +363,7 @@ new CalendarObject({ otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025" }); ``` +What this does: Shows the code for this step. The following example demonstrates how to modify the **Date Separator** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -325,6 +388,7 @@ function getDateFormat() { // Apply the custom format to the CometChatThreadHeader component ; ``` +What this does: Shows the code for this step. @@ -340,7 +404,7 @@ function getDateFormat() { *** -#### **Message SentAt DateTime Format** +##### **Message SentAt DateTime Format** The `messageSentAtDateTimeFormat` property allows you to customize the **Message SentAt** timestamp displayed in the Threaded Message Preview. @@ -353,6 +417,7 @@ new CalendarObject({ otherDays: `hh:mm A`, // Example: "09:30 PM" }); ``` +What this does: Shows the code for this step. The following example demonstrates how to modify the **Message SentAt** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -377,6 +442,7 @@ function getDateFormat() { // Apply the custom format to the CometChatThreadHeader component ; ``` +What this does: Shows the code for this step. @@ -407,19 +473,30 @@ function getDateFormat() { --- -## Next Steps - - - - Display user/group details in the toolbar - - - Render messages in a chat view - - - Step-by-step guide for implementing threaded messages - - - Customize message bubble rendering - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Render header | `CometChatThreadHeader` | `parentMessage` | `parentMessage={message}` | +| Handle close | `CometChatThreadHeader` | `onClose` | `onClose={() => setThread(null)}` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Header does not render | Parent message missing | Fetch and pass a valid `CometChat.BaseMessage` | +| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | + +## FAQ + +**Where do I get the parent message?** +Use `CometChat.getMessageDetails()` or thread context. + +**Can I hide the close button?** +Use the component props in the Actions section. + +## Next steps + +- [Message List](/ui-kit/react/message-list) +- [Message Composer](/ui-kit/react/message-composer) +- [Search](/ui-kit/react/search) diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index 688edbb95..da1cc9995 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -3,6 +3,46 @@ title: "Users" description: "CometChatUsers component displays a searchable list of all available users with avatars, names, and online/offline status indicators. Supports selection modes, custom views, filtering via UsersRequestBuilder, and CSS styling." --- +List and select users with search and presence using the CometChatUsers component. + +## When to use this + +- You need a searchable list of users. +- You want a user picker to start new chats. +- You need to filter users by tags, roles, or status. + +## Prerequisites + +- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. +- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. + +## Quick start + +1. Add the component to your UI. + +```tsx +import React from "react"; +import { CometChatUsers } from "@cometchat/chat-uikit-react"; + +export default function UsersDemo() { + return ; +} +``` + +What this does: Renders the minimal version of the component. + +2. Verify the component renders after `init()` and `login()`. + +## Core concepts + + + +- `usersRequestBuilder` controls filtering and paging. +- `selectionMode` enables multi-select workflows. +- `onItemClick` handles selection for navigation. + +## Implementation + {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -21,6 +61,7 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; selectionMode={SelectionMode.none} /> ``` +What this does: Shows the code for this step. @@ -35,7 +76,13 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; **Events:** None (does not emit events directly) -## Overview +### Overview + +What you’re changing: Overview. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. 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. @@ -57,9 +104,15 @@ The Users component is composed of the following BaseComponents: *** -## Usage +### Usage -### Integration +What you’re changing: Usage. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. + +#### Integration The following code snippet illustrates how you can directly incorporate the Users component into your Application. @@ -74,6 +127,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -87,16 +141,17 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. -### Actions +#### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. onSelect +##### 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. @@ -123,6 +178,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -146,12 +202,13 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -169,6 +226,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -185,12 +243,13 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -208,6 +267,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -225,12 +285,13 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -248,6 +309,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -265,16 +327,17 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. -### Filters +#### Filters **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -#### 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) @@ -312,6 +375,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -332,12 +396,13 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. -#### 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. @@ -361,6 +426,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -381,6 +447,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -388,7 +455,7 @@ export default UsersDemo; *** -### Events +#### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -398,11 +465,17 @@ The `Users` component does not produce any events directly. *** -## Customization +### Customization + +What you’re changing: Customization. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Users component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -### Style +#### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -423,6 +496,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -436,6 +510,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -488,6 +563,7 @@ export default UsersDemo; border-radius: 9.6px; } ``` +What this does: Shows the code for this step. @@ -495,7 +571,7 @@ export default UsersDemo; *** -### Functionality +#### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -516,6 +592,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -535,6 +612,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -560,13 +638,13 @@ Below is a list of customizations along with corresponding code snippets *** -### Advanced +#### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -#### ItemView +##### ItemView A custom view to render for each user in the fetched list. @@ -615,6 +693,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -648,6 +727,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -672,6 +752,7 @@ export default UsersDemo; background: rgba(9, 194, 111, 0.1); } ``` +What this does: Shows the code for this step. @@ -679,7 +760,7 @@ export default UsersDemo; *** -#### TitleView +##### TitleView The customized chat interface is displayed below. @@ -706,6 +787,7 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; ; ``` +What this does: Shows the code for this step. @@ -745,6 +827,7 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; .users__title-view-teacher .users__title-view-type{ } ``` +What this does: Shows the code for this step. @@ -752,7 +835,7 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; *** -#### SubtitleView +##### SubtitleView A custom view to render the subtitle for each user. @@ -799,6 +882,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -830,6 +914,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -846,6 +931,7 @@ export default UsersDemo; line-height: 120%; } ``` +What this does: Shows the code for this step. @@ -853,7 +939,7 @@ export default UsersDemo; *** -#### HeaderView +##### HeaderView You can set the Custom headerView to add more options to the Users component. @@ -890,6 +976,7 @@ const getHeaderView = () => { ``` +What this does: Shows the code for this step. @@ -925,6 +1012,7 @@ const getHeaderView = () => { display: block; } ``` +What this does: Shows the code for this step. @@ -932,7 +1020,7 @@ const getHeaderView = () => { *** -#### LeadingView +##### LeadingView The customized chat interface is displayed below. @@ -962,6 +1050,7 @@ const customLeadingView = (user: CometChat.User): JSX.Element => { }; ``` +What this does: Shows the code for this step. @@ -997,6 +1086,7 @@ const customLeadingView = (user: CometChat.User): JSX.Element => { margin-bottom: 3px; } ``` +What this does: Shows the code for this step. @@ -1004,7 +1094,7 @@ const customLeadingView = (user: CometChat.User): JSX.Element => { *** -#### TrailingView +##### TrailingView The customized chat interface is displayed below. @@ -1035,6 +1125,7 @@ const customTrailingButtonView = (user:CometChat.User) => { ; ``` +What this does: Shows the code for this step. @@ -1067,6 +1158,7 @@ const customTrailingButtonView = (user:CometChat.User) => { color: white; } ``` +What this does: Shows the code for this step. @@ -1074,7 +1166,7 @@ const customTrailingButtonView = (user:CometChat.User) => { *** -#### Options +##### Options A function that returns a list of actions available when hovering over a user item. @@ -1115,6 +1207,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -1140,6 +1233,7 @@ function UsersDemo() { export default UsersDemo; ``` +What this does: Shows the code for this step. @@ -1165,12 +1259,19 @@ export default UsersDemo; mask-size: contain; } ``` +What this does: Shows the code for this step. -## Component API Pattern +### Component API Pattern + +What you’re changing: Component API Pattern. +Where to change it: Component props or CSS as shown below. +Default behavior: UI Kit defaults. +Override: Use the examples in this section. +Verify: The UI reflects the change shown below. | Customization Type | Prop Pattern | Example | | --- | --- | --- | @@ -1196,19 +1297,35 @@ export default UsersDemo; --- -## Next Steps - - - - Display and manage group lists - - - View and manage members within a group - - - Display recent conversations - - - Render messages in a chat view - - +## Customization matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Handle item click | `CometChatUsers` | `onItemClick` | `onItemClick={(u) => setActive(u)}` | +| Enable multi-select | `CometChatUsers` | `selectionMode` | `selectionMode={SelectionMode.multiple}` | +| Filter users | `CometChatUsers` | `usersRequestBuilder` | `new CometChat.UsersRequestBuilder().friendsOnly(true)` | +| Hide search | `CometChatUsers` | `hideSearch` | `hideSearch={true}` | + +## Common pitfalls and fixes + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | +| List is empty | Filters too strict | Relax `usersRequestBuilder` filters | +| Search shows no results | Search builder too restrictive | Adjust `searchRequestBuilder` | +| Callbacks not firing | Wrong prop name | Use `onItemClick` or `onSelect` | +| Styles not applying | CSS Modules used | Use global CSS with `.cometchat-users` | + +## FAQ + +**Can I hide the search bar?** +Yes. Set `hideSearch={true}`. + +**How do I filter users by status?** +Use `UsersRequestBuilder().setStatus(...)`. + +## Next steps + +- [Conversations](/ui-kit/react/conversations) +- [Groups](/ui-kit/react/groups) +- [Theming](/ui-kit/react/theme) From e8ae82c8877cbddddbfe8dede7040963579173ff Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 23 Feb 2026 09:26:02 +0530 Subject: [PATCH 61/84] updates components for agents --- ui-kit/react/ai-assistant-chat.mdx | 17 +++++------------ ui-kit/react/call-buttons.mdx | 13 ++++--------- ui-kit/react/call-logs.mdx | 15 ++++----------- ui-kit/react/components-overview.mdx | 1 - ui-kit/react/conversations.mdx | 1 - ui-kit/react/group-members.mdx | 15 +++++---------- ui-kit/react/groups.mdx | 18 +++++------------- ui-kit/react/incoming-call.mdx | 15 ++++----------- ui-kit/react/message-composer.mdx | 15 +++++---------- ui-kit/react/message-header.mdx | 13 ++++--------- ui-kit/react/message-list.mdx | 15 +++++---------- ui-kit/react/message-template.mdx | 17 +++++------------ ui-kit/react/outgoing-call.mdx | 15 ++++----------- ui-kit/react/search.mdx | 15 ++++----------- ui-kit/react/thread-header.mdx | 14 ++++---------- ui-kit/react/users.mdx | 15 +++++---------- 16 files changed, 63 insertions(+), 151 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 72922597d..2eada97d6 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -43,15 +43,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- `user` is required and represents the AI agent. -- Use `streamingSpeed` to control response pace. -- Use `suggestedMessages` to show quick prompts. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -89,6 +80,11 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-ai-assistant-chat` **Events:** none emitted directly +- `user` is required and represents the AI agent. +- Use `streamingSpeed` to control response pace. +- Use `suggestedMessages` to show quick prompts. + +## Implementation ### Overview @@ -104,7 +100,6 @@ Verify: The UI reflects the change shown below. - **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). @@ -456,7 +451,6 @@ What this does: Shows the code for this step. - --- ### Customization @@ -1086,7 +1080,6 @@ What this does: Shows the code for this step. *** - diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index b6cfbdce7..c8f84b2c5 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -34,14 +34,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- Use `user` or `group` to target calls. -- Hide buttons with `hideVoiceCallButton` or `hideVideoCallButton`. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -76,6 +68,10 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-call-button` **Events:** `ccCallRejected`, `ccCallEnded`, `ccOutgoingCall`, `ccMessageSent` +- Use `user` or `group` to target calls. +- Hide buttons with `hideVoiceCallButton` or `hideVideoCallButton`. + +## Implementation ### Overview @@ -91,7 +87,6 @@ The `Call Button` is a Component provides users with the ability to make calls, - **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-logs.mdx b/ui-kit/react/call-logs.mdx index adecf2c28..e573adb63 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -32,14 +32,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- Use `onItemClick` and `onCallButtonClicked` for interactions. -- Use `callLogRequestBuilder` for filtering. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -70,6 +62,10 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-call-logs` **Events:** `ccMessageSent` +- Use `onItemClick` and `onCallButtonClicked` for interactions. +- Use `callLogRequestBuilder` for filtering. + +## Implementation ### Overview @@ -81,7 +77,6 @@ Verify: The UI reflects the change shown below. `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. - @@ -94,7 +89,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. | - **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). @@ -1273,7 +1267,6 @@ What this does: Shows the code for this step. - diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index d7757630d..1a7bee91f 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -63,7 +63,6 @@ What this does: Imports the primary UI Kit components into your React module. - **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) - - Component: A prebuilt UI block that renders a feature (conversations, message list, calls). - Action: A callback or override that customizes component behavior. - Event: A UI Kit event emitted for cross-component communication. diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index d9f54bbcd..9487f4246 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -75,7 +75,6 @@ import { CometChatConversations } from "@cometchat/chat-uikit-react"; - CSS class: `.cometchat-conversations` - Events: `CometChatConversationEvents.ccConversationDeleted` - - Conversation: A chat thread between the logged-in user and a user or group. - Selection mode: Controls single or multiple selection behavior for list items. - Request builder: Filters and paginates conversations before render. diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index c68911c4a..919a7e2c7 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -43,15 +43,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- `group` is required to render members. -- `groupMemberRequestBuilder` filters and paginates members. -- `selectionMode` enables multi-select workflows. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -83,6 +74,11 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-group-members` **Events:** `CometChatGroupEvents` +- `group` is required to render members. +- `groupMemberRequestBuilder` filters and paginates members. +- `selectionMode` enables multi-select workflows. + +## Implementation ### Overview @@ -98,7 +94,6 @@ Verify: The UI reflects the change shown below. - **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 8e65b942e..630a441b4 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -35,15 +35,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- `groupsRequestBuilder` controls filtering and paging. -- `selectionMode` enables multi-select workflows. -- `hideGroupType` toggles the group type icon. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -74,6 +65,11 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-groups` **Events:** None (does not emit events directly) +- `groupsRequestBuilder` controls filtering and paging. +- `selectionMode` enables multi-select workflows. +- `hideGroupType` toggles the group type icon. + +## Implementation ### Overview @@ -89,7 +85,6 @@ The Groups is a Component, showcasing an accessible list of all available groups - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). @@ -976,7 +971,6 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; {/* Icon here */} Joined -
:
Join -
}; } @@ -1266,7 +1259,6 @@ What this does: Shows the code for this step. - ### Component API Pattern What you’re changing: Component API Pattern. diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index 4ba2e4318..778e88195 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -33,14 +33,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- Mount `CometChatIncomingCall` at the app root. -- Use `onAccept` and `onDecline` to customize behavior. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -71,6 +63,10 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-incoming-call` **Events:** `ccCallRejected`, `ccCallAccepted`, `ccCallEnded` +- Mount `CometChatIncomingCall` at the app root. +- Use `onAccept` and `onDecline` to customize behavior. + +## Implementation ### Overview @@ -86,7 +82,6 @@ The `Incoming call` is a Component that serves as a visual representation when t - The `Incoming Call` is comprised of the following base components: | Components | Description | @@ -95,7 +90,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. | - **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). @@ -1068,7 +1062,6 @@ What this does: Shows the code for this step. - diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index 8f12ec79b..4a6679eb0 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -43,15 +43,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- `user` or `group` selects the conversation target. -- `hideVoiceRecording` hides voice input. -- `parentMessageId` enables threaded replies. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -79,6 +70,11 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-message-composer` **Events:** `CometChatMessageEvents` +- `user` or `group` selects the conversation target. +- `hideVoiceRecording` hides voice input. +- `parentMessageId` enables threaded replies. + +## Implementation ### Overview @@ -96,7 +92,6 @@ Features such as **Attachments**, and **Message Editing** are also supported by - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 4e6d11925..395edcc1f 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -43,14 +43,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- Pass `user` for 1:1 or `group` for group chats. -- `hideBackButton` and `hideUserStatus` control header UI. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -78,6 +70,10 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-message-header` **Events:** None (does not emit events directly) +- Pass `user` for 1:1 or `group` for group chats. +- `hideBackButton` and `hideUserStatus` control header UI. + +## Implementation ### Overview @@ -93,7 +89,6 @@ Verify: The UI reflects the change shown below. - **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 b393350bd..70f4b9f54 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -43,15 +43,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- `user` or `group` selects the conversation source. -- `messagesRequestBuilder` controls pagination and filtering. -- `templates` enables custom message rendering. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -79,6 +70,11 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-message-list` **Events:** `CometChatMessageEvents` +- `user` or `group` selects the conversation source. +- `messagesRequestBuilder` controls pagination and filtering. +- `templates` enables custom message rendering. + +## Implementation ### Overview @@ -94,7 +90,6 @@ Verify: The UI reflects the change shown below. - **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-template.mdx b/ui-kit/react/message-template.mdx index bf62b8d42..a480ca95f 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -35,15 +35,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- Templates are passed via `templates` on `CometChatMessageList`. -- Each template is mapped by `category` and `type`. -- `contentView`, `headerView`, and `footerView` control bubble layout. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -70,6 +61,11 @@ What this does: Shows the code for this step. **Key properties:** `category: string`, `type: string`, `contentView`, `bubbleView`, `headerView`, `footerView` **Related:** Used with `CometChatMessageList` via the `templates` prop +- Templates are passed via `templates` on `CometChatMessageList`. +- Each template is mapped by `category` and `type`. +- `contentView`, `headerView`, and `footerView` control bubble layout. + +## Implementation ### Overview @@ -1453,7 +1449,6 @@ The `replyView` method of MessageTemplate allows you to add a reply view to your Custom Reply View - ```ts lines @@ -1865,7 +1860,6 @@ import readIcon from "../../assets/message-read.svg"; import sentIcon from "../../assets/message-sent.svg"; import deliveredIcon from "../../assets/message-delivered.svg"; - const CustomMessageTemplate = () => { const [templates, setTemplates] = React.useState([]); const [chatGroup, setChatGroup] = React.useState(); @@ -2050,7 +2044,6 @@ What this does: Shows the code for this step. - diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index 3d101d88b..38fb45492 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -42,14 +42,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- `call` prop is required. -- Use `onCallCanceled` for cancel handling. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -81,6 +73,10 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-outgoing-call` **Events:** none emitted directly +- `call` prop is required. +- Use `onCallCanceled` for cancel handling. + +## Implementation ### Overview @@ -90,7 +86,6 @@ Default behavior: UI Kit defaults. Override: Use the examples in this section. Verify: The UI reflects the change shown below. - 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. @@ -104,7 +99,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. | - **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). @@ -1172,7 +1166,6 @@ What this does: Shows the code for this step. - diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index b40630c97..41dfbabb1 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -32,14 +32,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- Use `searchFilters` and `searchIn` to scope search. -- Use `onConversationClicked` and `onMessageClicked` callbacks. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -70,6 +62,10 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-search` **Events:** none +- Use `searchFilters` and `searchIn` to scope search. +- Use `onConversationClicked` and `onMessageClicked` callbacks. + +## Implementation ### Overview @@ -79,10 +75,8 @@ Default behavior: UI Kit defaults. Override: Use the examples in this section. Verify: The UI reflects the change shown below. - 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. - **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). @@ -1012,7 +1006,6 @@ What this does: Shows the code for this step. 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. - diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index cc13d8fbb..70fd89097 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -33,14 +33,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- `parentMessage` is required to render the header. -- Use `onClose` to control thread navigation. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -64,6 +56,10 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-thread-header` **Events:** None +- `parentMessage` is required to render the header. +- Use `onClose` to control thread navigation. + +## Implementation ### Overview @@ -73,14 +69,12 @@ Default behavior: UI Kit defaults. Override: Use the examples in this section. Verify: The UI reflects the change shown below. - CometChatThreadHeader is a Component that displays the parent message & number of replies of thread. - **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 da1cc9995..6e1a1773b 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -35,15 +35,6 @@ What this does: Renders the minimal version of the component. ## Core concepts - - -- `usersRequestBuilder` controls filtering and paging. -- `selectionMode` enables multi-select workflows. -- `onItemClick` handles selection for navigation. - -## Implementation - -{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -75,6 +66,11 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-users` **Events:** None (does not emit events directly) +- `usersRequestBuilder` controls filtering and paging. +- `selectionMode` enables multi-select workflows. +- `onItemClick` handles selection for navigation. + +## Implementation ### Overview @@ -90,7 +86,6 @@ The Users is a Component, showcasing an accessible list of all available users. - **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 ca631dc300c7f6df64531d6015115a6f7a42ef5e Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 23 Feb 2026 09:33:04 +0530 Subject: [PATCH 62/84] Update core-features.mdx --- ui-kit/react/core-features.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index a307f76f9..ab9347c36 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -20,7 +20,7 @@ Build the core CometChat chat experience in React with the UI Kit components tha - UI Kit initialization and login must complete before rendering any UI Kit component: `CometChatUIKit.init()` and `CometChatUIKit.login()`. - Moderation and report message require moderation rules and flagged message handling configured in [Moderation overview](/moderation/overview) and [Flagged Messages](/moderation/flagged-messages). -## Quick start +{/* ## Quick start 1. Install the UI Kit package. @@ -91,7 +91,7 @@ export default function App() { What this does: Initializes CometChat, loads the target user, and renders the header, message list, and composer for a 1:1 chat. 4. Replace `APP_ID`, `REGION`, `AUTH_KEY`, `UID`, and `TARGET_UID` with real values from your CometChat app. -5. Run your app and verify that you can send text and media messages and see read receipts. +5. Run your app and verify that you can send text and media messages and see read receipts. */} ## Core concepts @@ -124,7 +124,7 @@ Key components for core chat features: - `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` form the core chat surface. - Message actions (reply, reaction, report) are available from the message actions menu in `CometChatMessageList`. -## Implementation +{/* ## Implementation ### Base 1:1 chat surface @@ -172,7 +172,7 @@ export default function App() { } ``` -What this does: Initializes CometChat, loads the target user, and renders the core 1:1 chat UI. +What this does: Initializes CometChat, loads the target user, and renders the core 1:1 chat UI. */} #### Instant Messaging @@ -280,7 +280,7 @@ Quoted replies let users reply to specific messages with context. | [Message List](/ui-kit/react/message-list) | Provides the Reply action for messages. | | [Message Composer](/ui-kit/react/message-composer) | Displays the quoted message above the input field. | -### Group chat with mentions +{/* ### Group chat with mentions What you’re changing: Render a group chat view that supports mentions. File: `src/App.tsx` @@ -326,7 +326,7 @@ export default function App() { } ``` -What this does: Initializes CometChat, loads a group, and renders a group chat UI with mentions support. +What this does: Initializes CometChat, loads a group, and renders a group chat UI with mentions support. */} #### Mentions From 7707474a6e55d35998b1a5531e005fa05d7251bc Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 23 Feb 2026 09:33:46 +0530 Subject: [PATCH 63/84] Revert "updates components for agents" This reverts commit e8ae82c8877cbddddbfe8dede7040963579173ff. --- ui-kit/react/ai-assistant-chat.mdx | 17 ++++++++++++----- ui-kit/react/call-buttons.mdx | 13 +++++++++---- ui-kit/react/call-logs.mdx | 15 +++++++++++---- ui-kit/react/components-overview.mdx | 1 + ui-kit/react/conversations.mdx | 1 + ui-kit/react/group-members.mdx | 15 ++++++++++----- ui-kit/react/groups.mdx | 18 +++++++++++++----- ui-kit/react/incoming-call.mdx | 15 +++++++++++---- ui-kit/react/message-composer.mdx | 15 ++++++++++----- ui-kit/react/message-header.mdx | 13 +++++++++---- ui-kit/react/message-list.mdx | 15 ++++++++++----- ui-kit/react/message-template.mdx | 17 ++++++++++++----- ui-kit/react/outgoing-call.mdx | 15 +++++++++++---- ui-kit/react/search.mdx | 15 +++++++++++---- ui-kit/react/thread-header.mdx | 14 ++++++++++---- ui-kit/react/users.mdx | 15 ++++++++++----- 16 files changed, 151 insertions(+), 63 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 2eada97d6..72922597d 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -43,6 +43,15 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- `user` is required and represents the AI agent. +- Use `streamingSpeed` to control response pace. +- Use `suggestedMessages` to show quick prompts. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -80,11 +89,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-ai-assistant-chat` **Events:** none emitted directly -- `user` is required and represents the AI agent. -- Use `streamingSpeed` to control response pace. -- Use `suggestedMessages` to show quick prompts. - -## Implementation ### Overview @@ -100,6 +104,7 @@ Verify: The UI reflects the change shown below. + **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). @@ -451,6 +456,7 @@ What this does: Shows the code for this step. + --- ### Customization @@ -1080,6 +1086,7 @@ What this does: Shows the code for this step. *** + diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index c8f84b2c5..b6cfbdce7 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -34,6 +34,14 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- Use `user` or `group` to target calls. +- Hide buttons with `hideVoiceCallButton` or `hideVideoCallButton`. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -68,10 +76,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-call-button` **Events:** `ccCallRejected`, `ccCallEnded`, `ccOutgoingCall`, `ccMessageSent` -- Use `user` or `group` to target calls. -- Hide buttons with `hideVoiceCallButton` or `hideVideoCallButton`. - -## Implementation ### Overview @@ -87,6 +91,7 @@ The `Call Button` is a Component provides users with the ability to make calls, + **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-logs.mdx b/ui-kit/react/call-logs.mdx index e573adb63..adecf2c28 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -32,6 +32,14 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- Use `onItemClick` and `onCallButtonClicked` for interactions. +- Use `callLogRequestBuilder` for filtering. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -62,10 +70,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-call-logs` **Events:** `ccMessageSent` -- Use `onItemClick` and `onCallButtonClicked` for interactions. -- Use `callLogRequestBuilder` for filtering. - -## Implementation ### Overview @@ -77,6 +81,7 @@ Verify: The UI reflects the change shown below. `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. + @@ -89,6 +94,7 @@ 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. | + **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). @@ -1267,6 +1273,7 @@ What this does: Shows the code for this step. + diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index 1a7bee91f..d7757630d 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -63,6 +63,7 @@ What this does: Imports the primary UI Kit components into your React module. - **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) + - Component: A prebuilt UI block that renders a feature (conversations, message list, calls). - Action: A callback or override that customizes component behavior. - Event: A UI Kit event emitted for cross-component communication. diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index 9487f4246..d9f54bbcd 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -75,6 +75,7 @@ import { CometChatConversations } from "@cometchat/chat-uikit-react"; - CSS class: `.cometchat-conversations` - Events: `CometChatConversationEvents.ccConversationDeleted` + - Conversation: A chat thread between the logged-in user and a user or group. - Selection mode: Controls single or multiple selection behavior for list items. - Request builder: Filters and paginates conversations before render. diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index 919a7e2c7..c68911c4a 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -43,6 +43,15 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- `group` is required to render members. +- `groupMemberRequestBuilder` filters and paginates members. +- `selectionMode` enables multi-select workflows. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -74,11 +83,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-group-members` **Events:** `CometChatGroupEvents` -- `group` is required to render members. -- `groupMemberRequestBuilder` filters and paginates members. -- `selectionMode` enables multi-select workflows. - -## Implementation ### Overview @@ -94,6 +98,7 @@ Verify: The UI reflects the change shown below. + **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 630a441b4..8e65b942e 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -35,6 +35,15 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- `groupsRequestBuilder` controls filtering and paging. +- `selectionMode` enables multi-select workflows. +- `hideGroupType` toggles the group type icon. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -65,11 +74,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-groups` **Events:** None (does not emit events directly) -- `groupsRequestBuilder` controls filtering and paging. -- `selectionMode` enables multi-select workflows. -- `hideGroupType` toggles the group type icon. - -## Implementation ### Overview @@ -85,6 +89,7 @@ The Groups is a Component, showcasing an accessible list of all available groups + **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). @@ -971,6 +976,7 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; {/* Icon here */} Joined +
:
Join +
}; } @@ -1259,6 +1266,7 @@ What this does: Shows the code for this step. + ### Component API Pattern What you’re changing: Component API Pattern. diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index 778e88195..4ba2e4318 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -33,6 +33,14 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- Mount `CometChatIncomingCall` at the app root. +- Use `onAccept` and `onDecline` to customize behavior. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -63,10 +71,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-incoming-call` **Events:** `ccCallRejected`, `ccCallAccepted`, `ccCallEnded` -- Mount `CometChatIncomingCall` at the app root. -- Use `onAccept` and `onDecline` to customize behavior. - -## Implementation ### Overview @@ -82,6 +86,7 @@ The `Incoming call` is a Component that serves as a visual representation when t + The `Incoming Call` is comprised of the following base components: | Components | Description | @@ -90,6 +95,7 @@ The `Incoming Call` is comprised of the following base components: | cometchat-button | This component represents a button with optional icon and text. | | cometchat-avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. | + **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). @@ -1062,6 +1068,7 @@ What this does: Shows the code for this step. + diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index 4a6679eb0..8f12ec79b 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -43,6 +43,15 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- `user` or `group` selects the conversation target. +- `hideVoiceRecording` hides voice input. +- `parentMessageId` enables threaded replies. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -70,11 +79,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-message-composer` **Events:** `CometChatMessageEvents` -- `user` or `group` selects the conversation target. -- `hideVoiceRecording` hides voice input. -- `parentMessageId` enables threaded replies. - -## Implementation ### Overview @@ -92,6 +96,7 @@ Features such as **Attachments**, and **Message Editing** are also supported by + **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 395edcc1f..4e6d11925 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -43,6 +43,14 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- Pass `user` for 1:1 or `group` for group chats. +- `hideBackButton` and `hideUserStatus` control header UI. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -70,10 +78,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-message-header` **Events:** None (does not emit events directly) -- Pass `user` for 1:1 or `group` for group chats. -- `hideBackButton` and `hideUserStatus` control header UI. - -## Implementation ### Overview @@ -89,6 +93,7 @@ Verify: The UI reflects the change shown below. + **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 70f4b9f54..b393350bd 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -43,6 +43,15 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- `user` or `group` selects the conversation source. +- `messagesRequestBuilder` controls pagination and filtering. +- `templates` enables custom message rendering. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -70,11 +79,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-message-list` **Events:** `CometChatMessageEvents` -- `user` or `group` selects the conversation source. -- `messagesRequestBuilder` controls pagination and filtering. -- `templates` enables custom message rendering. - -## Implementation ### Overview @@ -90,6 +94,7 @@ Verify: The UI reflects the change shown below. + **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-template.mdx b/ui-kit/react/message-template.mdx index a480ca95f..bf62b8d42 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -35,6 +35,15 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- Templates are passed via `templates` on `CometChatMessageList`. +- Each template is mapped by `category` and `type`. +- `contentView`, `headerView`, and `footerView` control bubble layout. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -61,11 +70,6 @@ What this does: Shows the code for this step. **Key properties:** `category: string`, `type: string`, `contentView`, `bubbleView`, `headerView`, `footerView` **Related:** Used with `CometChatMessageList` via the `templates` prop -- Templates are passed via `templates` on `CometChatMessageList`. -- Each template is mapped by `category` and `type`. -- `contentView`, `headerView`, and `footerView` control bubble layout. - -## Implementation ### Overview @@ -1449,6 +1453,7 @@ The `replyView` method of MessageTemplate allows you to add a reply view to your Custom Reply View + ```ts lines @@ -1860,6 +1865,7 @@ import readIcon from "../../assets/message-read.svg"; import sentIcon from "../../assets/message-sent.svg"; import deliveredIcon from "../../assets/message-delivered.svg"; + const CustomMessageTemplate = () => { const [templates, setTemplates] = React.useState([]); const [chatGroup, setChatGroup] = React.useState(); @@ -2044,6 +2050,7 @@ What this does: Shows the code for this step. + diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index 38fb45492..3d101d88b 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -42,6 +42,14 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- `call` prop is required. +- Use `onCallCanceled` for cancel handling. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -73,10 +81,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-outgoing-call` **Events:** none emitted directly -- `call` prop is required. -- Use `onCallCanceled` for cancel handling. - -## Implementation ### Overview @@ -86,6 +90,7 @@ Default behavior: UI Kit defaults. Override: Use the examples in this section. Verify: The UI reflects the change shown below. + 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. @@ -99,6 +104,7 @@ 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. | + **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). @@ -1166,6 +1172,7 @@ What this does: Shows the code for this step. + diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 41dfbabb1..b40630c97 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -32,6 +32,14 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- Use `searchFilters` and `searchIn` to scope search. +- Use `onConversationClicked` and `onMessageClicked` callbacks. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -62,10 +70,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-search` **Events:** none -- Use `searchFilters` and `searchIn` to scope search. -- Use `onConversationClicked` and `onMessageClicked` callbacks. - -## Implementation ### Overview @@ -75,8 +79,10 @@ Default behavior: UI Kit defaults. Override: Use the examples in this section. Verify: The UI reflects the change shown below. + 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. + **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). @@ -1006,6 +1012,7 @@ What this does: Shows the code for this step. 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. + diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index 70fd89097..cc13d8fbb 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -33,6 +33,14 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- `parentMessage` is required to render the header. +- Use `onClose` to control thread navigation. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -56,10 +64,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-thread-header` **Events:** None -- `parentMessage` is required to render the header. -- Use `onClose` to control thread navigation. - -## Implementation ### Overview @@ -69,12 +73,14 @@ Default behavior: UI Kit defaults. Override: Use the examples in this section. Verify: The UI reflects the change shown below. + CometChatThreadHeader is a Component that displays the parent message & number of replies of thread. + **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 6e1a1773b..da1cc9995 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -35,6 +35,15 @@ What this does: Renders the minimal version of the component. ## Core concepts + + +- `usersRequestBuilder` controls filtering and paging. +- `selectionMode` enables multi-select workflows. +- `onItemClick` handles selection for navigation. + +## Implementation + +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -66,11 +75,6 @@ What this does: Shows the code for this step. **CSS class:** `.cometchat-users` **Events:** None (does not emit events directly) -- `usersRequestBuilder` controls filtering and paging. -- `selectionMode` enables multi-select workflows. -- `onItemClick` handles selection for navigation. - -## Implementation ### Overview @@ -86,6 +90,7 @@ The Users is a Component, showcasing an accessible list of all available users. + **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 999f94b5dbdbd6fb9db036b22bb0c0781234a41b Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 23 Feb 2026 09:33:49 +0530 Subject: [PATCH 64/84] Revert "Update core-features.mdx" This reverts commit ca631dc300c7f6df64531d6015115a6f7a42ef5e. --- ui-kit/react/core-features.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index ab9347c36..a307f76f9 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -20,7 +20,7 @@ Build the core CometChat chat experience in React with the UI Kit components tha - UI Kit initialization and login must complete before rendering any UI Kit component: `CometChatUIKit.init()` and `CometChatUIKit.login()`. - Moderation and report message require moderation rules and flagged message handling configured in [Moderation overview](/moderation/overview) and [Flagged Messages](/moderation/flagged-messages). -{/* ## Quick start +## Quick start 1. Install the UI Kit package. @@ -91,7 +91,7 @@ export default function App() { What this does: Initializes CometChat, loads the target user, and renders the header, message list, and composer for a 1:1 chat. 4. Replace `APP_ID`, `REGION`, `AUTH_KEY`, `UID`, and `TARGET_UID` with real values from your CometChat app. -5. Run your app and verify that you can send text and media messages and see read receipts. */} +5. Run your app and verify that you can send text and media messages and see read receipts. ## Core concepts @@ -124,7 +124,7 @@ Key components for core chat features: - `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` form the core chat surface. - Message actions (reply, reaction, report) are available from the message actions menu in `CometChatMessageList`. -{/* ## Implementation +## Implementation ### Base 1:1 chat surface @@ -172,7 +172,7 @@ export default function App() { } ``` -What this does: Initializes CometChat, loads the target user, and renders the core 1:1 chat UI. */} +What this does: Initializes CometChat, loads the target user, and renders the core 1:1 chat UI. #### Instant Messaging @@ -280,7 +280,7 @@ Quoted replies let users reply to specific messages with context. | [Message List](/ui-kit/react/message-list) | Provides the Reply action for messages. | | [Message Composer](/ui-kit/react/message-composer) | Displays the quoted message above the input field. | -{/* ### Group chat with mentions +### Group chat with mentions What you’re changing: Render a group chat view that supports mentions. File: `src/App.tsx` @@ -326,7 +326,7 @@ export default function App() { } ``` -What this does: Initializes CometChat, loads a group, and renders a group chat UI with mentions support. */} +What this does: Initializes CometChat, loads a group, and renders a group chat UI with mentions support. #### Mentions From 965bb71424b70b5fc9dd0f72c6f8d171f0fc1ca3 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 23 Feb 2026 09:34:07 +0530 Subject: [PATCH 65/84] Revert "fixes pages for features and theming" This reverts commit 44592f8bd4f1c37515ceaf199ff9ee24f39fa01e. --- ui-kit/react/ai-features.mdx | 275 ++---- ui-kit/react/call-features.mdx | 309 ++----- ui-kit/react/core-features.mdx | 564 +++--------- ui-kit/react/extensions.mdx | 410 +++------ ui-kit/react/localize.mdx | 662 +++++++------- ui-kit/react/sound-manager.mdx | 190 ++-- ui-kit/react/theme.mdx | 480 +++++----- ui-kit/react/theme/color-resources.mdx | 239 +++-- ui-kit/react/theme/message-bubble-styling.mdx | 828 +++++++++++------- 9 files changed, 1733 insertions(+), 2224 deletions(-) diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index 202a8cec3..d35151fc1 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -3,245 +3,100 @@ title: "Smart Chat Features" description: "Learn about the AI-powered features in CometChat's React UI Kit, including Conversation Starter, Smart Replies, and Conversation Summary." --- -Enable CometChat AI features in the Dashboard and surface them in your React UI Kit chat UI. This page is for developers who want Conversation Starter, Smart Replies, and Conversation Summary with minimal setup. - -## When to use this - -- You want AI-generated opening messages for new conversations. -- You want AI-generated reply suggestions in the message composer. -- You want AI-generated conversation summaries for long chats. -- You want these features to appear automatically in UI Kit components. -- You want to enable or disable AI features from the CometChat Dashboard. - -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering UI Kit components. -- AI features enabled in the CometChat Dashboard under [AI User Copilot overview](/fundamentals/ai-user-copilot/overview). - -## Quick start - -1. Enable **Conversation Starter**, **Smart Replies**, and **Conversation Summary** in the CometChat Dashboard. Use [AI User Copilot overview](/fundamentals/ai-user-copilot/overview). -2. Install the UI Kit package. - -```bash -npm install @cometchat/chat-uikit-react -``` - -What this does: Installs the React UI Kit package. - -3. Create `src/cometchat.ts` and initialize the UI Kit. - -```ts -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -export async function initCometChat() { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); +Key components for AI features: +- **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) - await CometChatUIKit.init(UIKitSettings); - await CometChatUIKit.login("UID"); -} -``` +AI features are enabled via the [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) — no additional code required once activated. + -What this does: Initializes CometChat UI Kit and logs in a user. + +**AI Agent Component Spec** -4. Update `src/App.tsx` to render the Message List and Message Composer. +**Package:** `@cometchat/chat-uikit-react` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + AI features enabled in Dashboard +**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 + -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatMessageComposer, - CometChatMessageList, -} from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; +## Overview -export default function App() { - const [chatUser, setChatUser] = React.useState(null); +CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the React UI Kit achieves these features. - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); +## Smart Chat Features - if (!chatUser) return null; +### Conversation Starter - return ( -
- - -
- ); -} -``` +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. -What this does: Renders the UI Kit components where AI features appear. +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). -5. Replace `APP_ID`, `REGION`, `AUTH_KEY`, `UID`, and `TARGET_UID` with real values. -6. Run your app and verify AI suggestions appear in the message list and composer. +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. -## Core concepts + + + - -**Quick Reference for AI Agents & Developers** +### Smart Replies -Key components for AI features: -- **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) +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. -AI features are enabled via the [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) and auto-integrate into UI Kit components. - +For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). -- Conversation Starter: AI-generated opening lines shown at the start of a new chat. -- Smart Replies: AI-generated reply suggestions shown in the message composer action sheet. -- Conversation Summary: AI-generated summary of a long conversation shown in the message composer action sheet. -- Auto-integration: Once enabled in the Dashboard, these features appear automatically in UI Kit components. - -## Implementation - -### Conversation Starter in Message List - -What you’re changing: Render the message list so Conversation Starter can appear. -File: `src/App.tsx` -Applies to: `CometChatMessageList` -Default behavior: Shows AI conversation starters when a new chat begins. -Override: Enable or disable Conversation Starter in the CometChat Dashboard. -Verify: When you open a new chat, suggested opening lines appear. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function App() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatUser) return null; - - return ( -
- -
- ); -} -``` - -What this does: Renders the message list where Conversation Starter suggestions appear. +Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/react/message-composer) Component of UI Kits. - + -### Smart Replies and Conversation Summary in Message Composer - -What you’re changing: Render the message composer so Smart Replies and Conversation Summary appear. -File: `src/App.tsx` -Applies to: `CometChatMessageComposer` -Default behavior: Shows Smart Replies and Conversation Summary in the action sheet. -Override: Enable or disable Smart Replies and Conversation Summary in the CometChat Dashboard. -Verify: The composer action sheet shows reply suggestions and summary options. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function App() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatUser) return null; - - return ( -
- -
- ); -} -``` - -What this does: Renders the message composer where Smart Replies and Conversation Summary appear. +### 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. + +For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). + +Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/react/message-composer) Component of UI Kits. -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Enable Conversation Starter | CometChat Dashboard | AI User Copilot toggle | Enable **Conversation Starter** in [AI User Copilot overview](/fundamentals/ai-user-copilot/overview) | -| Enable Smart Replies | CometChat Dashboard | AI User Copilot toggle | Enable **Smart Replies** in [AI User Copilot overview](/fundamentals/ai-user-copilot/overview) | -| Enable Conversation Summary | CometChat Dashboard | AI User Copilot toggle | Enable **Conversation Summary** in [AI User Copilot overview](/fundamentals/ai-user-copilot/overview) | -| Show Conversation Starter UI | `CometChatMessageList` | Component render | `` | -| Show Smart Replies and Summary UI | `CometChatMessageComposer` | Component render | `` | - -## Common pitfalls and fixes + + | Symptom | Cause | Fix | | --- | --- | --- | -| AI features not appearing | Feature not activated in the CometChat Dashboard | Enable the feature in [AI User Copilot overview](/fundamentals/ai-user-copilot/overview). | -| Component does not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering UI Kit components. | -| Component renders but no AI suggestions | User not logged in | Call `CometChatUIKit.login("UID")` after init. | -| Conversation Starter not showing | Feature not enabled or no conversation context | Enable [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and start a new chat. | -| Smart Replies not appearing | Feature not enabled | Enable [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). | -| Conversation Summary not appearing | Feature not enabled | Enable [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). | -| SSR hydration error | UI Kit uses browser APIs | Render UI Kit components in `useEffect` or use `ssr: false` in Next.js. | - -## FAQ - -**Do I need to write custom code for AI features?** -No. Once enabled in the Dashboard, they auto-integrate into UI Kit components. +| 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 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) | -**Where do Smart Replies and Conversation Summary appear?** -They appear in the action sheet of [Message Composer](/ui-kit/react/message-composer). + + -**Where do Conversation Starter suggestions appear?** -They appear in [Message List](/ui-kit/react/message-list) when a new conversation starts. - -## Next steps +--- -- [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) -- [Message List](/ui-kit/react/message-list) -- [Message Composer](/ui-kit/react/message-composer) +## Next Steps + + + + Add an AI-powered assistant to your chat + + + Customize the message list where AI features appear + + + Customize the composer with Smart Replies and Summary + + + Explore core chat features like messaging and reactions + + diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx index 0c2907292..c1efbe75b 100644 --- a/ui-kit/react/call-features.mdx +++ b/ui-kit/react/call-features.mdx @@ -3,97 +3,7 @@ title: "Call" description: "Overview of CometChat's audio and video calling features including incoming calls, outgoing calls, and call logs — with the UI Kit components that power each feature." --- -Add audio and video calling to your React UI Kit chat experience. This page is for developers who want a clear, end-to-end setup for call buttons, incoming/outgoing calls, and call logs. - -## When to use this - -- You want voice and video calls in 1:1 or group chats. -- You need incoming and outgoing call screens in the UI Kit. -- You want call history with call logs. -- You want call buttons inside your chat header. -- You plan to use the CometChat Calls SDK with the UI Kit. - -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- CometChat Calls SDK installed: `@cometchat/calls-sdk-javascript`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering UI Kit components. -- Calls SDK installation is required for call components to render and for call buttons to appear. - -## Quick start - -1. Install the UI Kit and Calls SDK. - -```bash -npm install @cometchat/chat-uikit-react @cometchat/calls-sdk-javascript -``` - -What this does: Installs the React UI Kit and Calls SDK packages. - -2. Initialize the UI Kit in `src/cometchat.ts`. - -```ts -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -export async function initCometChat() { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); - - await CometChatUIKit.init(UIKitSettings); - await CometChatUIKit.login("UID"); -} -``` - -What this does: Initializes the UI Kit and logs in a user. - -3. Mount call listeners and buttons in `src/App.tsx`. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatCallButtons, - CometChatIncomingCall, - CometChatMessageHeader, -} from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function App() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatUser) return null; - - return ( -
- - - -
- ); -} -``` - -What this does: Mounts the incoming call listener at the app level and renders call buttons for the active user. - -4. Run your app and verify call buttons appear and incoming calls are shown. - -## Core concepts - +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -112,205 +22,100 @@ npm install @cometchat/calls-sdk-javascript **AI Agent Component Spec** -- Package: `@cometchat/chat-uikit-react` plus `@cometchat/calls-sdk-javascript` -- Required setup: `CometChatUIKit.init()` and `CometChatUIKit.login()` -- Primary components: `CometChatCallButtons`, `CometChatIncomingCall`, `CometChatOutgoingCall`, `CometChatCallLogs` -- Auto-detection: UI Kit detects the Calls SDK and enables call UI components +**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 -- Calls SDK: The separate package that powers audio/video calling features. -- Call Buttons: The UI control used to initiate audio or video calls. -- Incoming Call: The UI shown when a call is received. -- Outgoing Call: The UI shown after a call is initiated. -- Call Logs: The UI listing past calls with metadata. +## Overview -## Implementation +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. -### Install the Calls SDK -What you’re changing: Add the Calls SDK dependency required by call components. -File: `package.json` -Applies to: `@cometchat/calls-sdk-javascript` -Default behavior: UI Kit auto-detects the Calls SDK and enables call UI. -Override: None. -Verify: Call buttons appear after reinstall and app restart. + +**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 + +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. + +Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here's how you do it: + +Add the SDK files to your project's dependencies or libraries: ```bash npm install @cometchat/calls-sdk-javascript ``` -What this does: Installs the Calls SDK so call UI components can render. - -### Render call buttons - -What you’re changing: Render call buttons for the active user or group. -File: `src/App.tsx` -Applies to: `CometChatCallButtons` -Default behavior: Shows voice and video call buttons. -Override: Use `hideVoiceCallButton` or `hideVideoCallButton` on the component. -Verify: Call buttons appear and initiate calls. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function CallButtonsDemo() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatUser) return null; - - return ; -} -``` - -What this does: Renders call buttons for the target user. +After adding this dependency, the React UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/react/call-buttons) component rendered in [MessageHeader](/ui-kit/react/message-header) Component. -### Handle incoming calls - -What you’re changing: Mount the incoming call component at the app root. -File: `src/App.tsx` -Applies to: `CometChatIncomingCall` -Default behavior: Listens for incoming calls and shows an accept/decline screen. -Override: Use `onAccept` or `onDecline` props. -Verify: Incoming calls show the incoming call UI. +## Features -```tsx -import React from "react"; -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; +### Incoming Call -export default function IncomingCallListener() { - return ; -} -``` +The [Incoming Call](/ui-kit/react/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app. -What this does: Listens for incoming calls and shows the incoming call UI. +When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call. -### Show outgoing call screen - -What you’re changing: Initiate a call and render the outgoing call UI. -File: `src/OutgoingCallDemo.tsx` -Applies to: `CometChatOutgoingCall`, `CometChat.initiateCall()` -Default behavior: Starts a call and shows the outgoing call screen until accepted or canceled. -Override: Use `onCallCanceled` on the component. -Verify: When you initiate a call, the outgoing call screen appears. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatOutgoingCall, - CometChatUIKitConstants, -} from "@cometchat/chat-uikit-react"; - -export default function OutgoingCallDemo() { - const [call, setCall] = React.useState(null); - - React.useEffect(() => { - const uid = "TARGET_UID"; - const callObject = new CometChat.Call( - uid, - CometChatUIKitConstants.MessageTypes.audio, - CometChatUIKitConstants.MessageReceiverType.user - ); - - CometChat.initiateCall(callObject) - .then((c) => setCall(c)) - .catch(console.error); - }, []); - - if (!call) return null; - - return ; -} -``` +### Outgoing Call + +The [Outgoing Call](/ui-kit/react/outgoing-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status. -What this does: Initiates a call and renders the outgoing call UI for the initiated call. +Importantly, the Outgoing Call component is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user. -### Show call logs +### Call Logs -What you’re changing: Render call history. -File: `src/CallLogsDemo.tsx` -Applies to: `CometChatCallLogs` -Default behavior: Shows call history for the logged-in user. -Override: Use `onItemClick` and `onCallButtonClicked` props to handle selection and callbacks. -Verify: Call logs render with timestamps and participants. - -```tsx -import React from "react"; -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -export default function CallLogsDemo() { - return ; -} -``` - -What this does: Renders the call logs list for the current user. +[Call Logs](/ui-kit/react/call-logs) component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities. -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Hide voice call button | `CometChatCallButtons` | `hideVoiceCallButton` | `hideVoiceCallButton={true}` | -| Hide video call button | `CometChatCallButtons` | `hideVideoCallButton` | `hideVideoCallButton={true}` | -| Handle incoming call accept | `CometChatIncomingCall` | `onAccept` | `onAccept={() => ...}` | -| Handle incoming call decline | `CometChatIncomingCall` | `onDecline` | `onDecline={() => ...}` | -| Handle outgoing call cancel | `CometChatOutgoingCall` | `onCallCanceled` | `onCallCanceled={() => ...}` | -| Handle call log item selection | `CometChatCallLogs` | `onItemClick` | `onItemClick={(log) => ...}` | - -## Common pitfalls and fixes + + | Symptom | Cause | Fix | | --- | --- | --- | -| Call buttons not appearing in Message Header | Calls SDK not installed | Install `@cometchat/calls-sdk-javascript` and restart the app. | -| Component does not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. | -| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init. | -| Incoming call screen not showing | `CometChatIncomingCall` not mounted | Render it at the app root so it can listen for calls. | -| Outgoing call screen not showing | Call object not created or `CometChat.initiateCall()` not executed | Ensure you call `CometChat.initiateCall()` and pass the returned call to `CometChatOutgoingCall`. | -| SSR hydration error | UI Kit uses browser APIs | Render in `useEffect` or use `ssr: false` for Next.js. | - -## FAQ - -**Do I need to install a separate SDK for calls?** -Yes. Install `@cometchat/calls-sdk-javascript` to enable call UI components. +| 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) | -**Do call buttons appear automatically in Message Header?** -Yes. Once the Calls SDK is installed, the UI Kit can render call buttons in [Message Header](/ui-kit/react/message-header). + + -**Where should I mount incoming call UI?** -Mount `CometChatIncomingCall` at the root so it can listen for incoming calls globally. - -## Next steps +--- -- [Call Buttons](/ui-kit/react/call-buttons) -- [Incoming Call](/ui-kit/react/incoming-call) -- [Call Logs](/ui-kit/react/call-logs) +## Next Steps + + + + Add audio and video call buttons to your chat + + + Handle incoming call notifications and UI + + + Display call history and details + + + Explore core chat features like messaging and reactions + + diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index a307f76f9..b3fe946d4 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -3,98 +3,7 @@ title: "Core" description: "Overview of CometChat's core chat features including instant messaging, media sharing, read receipts, typing indicators, user presence, reactions, mentions, threaded conversations, search, and moderation — with the UI Kit components that power each feature." --- -Build the core CometChat chat experience in React with the UI Kit components that power messaging, media, receipts, presence, reactions, threads, search, and moderation. This page is for developers who want a complete, line-by-line implementation reference. - -## When to use this - -- You need a complete 1:1 or group chat surface with message list, header, and composer. -- You want built-in behaviors like read receipts, typing indicators, and user presence. -- You need media sharing, reactions, and quoted replies out of the box. -- You want mentions and threaded conversations in chats. -- You need conversation search and message moderation and reporting workflows. - -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- CometChat app credentials: `APP_ID`, `REGION`, and `AUTH_KEY` from the CometChat Dashboard, configured per [React.js Integration](/ui-kit/react/react-js-integration). -- UI Kit initialization and login must complete before rendering any UI Kit component: `CometChatUIKit.init()` and `CometChatUIKit.login()`. -- Moderation and report message require moderation rules and flagged message handling configured in [Moderation overview](/moderation/overview) and [Flagged Messages](/moderation/flagged-messages). - -## Quick start - -1. Install the UI Kit package. - -```bash -npm install @cometchat/chat-uikit-react -``` - -What this does: Installs the React UI Kit package. - -2. Create `src/cometchat.ts` and initialize the UI Kit. - -```ts -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -export async function initCometChat() { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); - - await CometChatUIKit.init(UIKitSettings); - await CometChatUIKit.login("UID"); -} -``` - -What this does: Initializes the UI Kit and logs in a user. - -3. Update `src/App.tsx` to render a direct chat view. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatMessageComposer, - CometChatMessageHeader, - CometChatMessageList, -} from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function App() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatUser) return null; - - return ( -
- - - -
- ); -} -``` - -What this does: Initializes CometChat, loads the target user, and renders the header, message list, and composer for a 1:1 chat. - -4. Replace `APP_ID`, `REGION`, `AUTH_KEY`, `UID`, and `TARGET_UID` with real values from your CometChat app. -5. Run your app and verify that you can send text and media messages and see read receipts. - -## Core concepts - +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** @@ -113,68 +22,26 @@ Key components for core chat features: **AI Agent Component Spec** -- Package: `@cometchat/chat-uikit-react` -- Required setup: `CometChatUIKit.init()` and `CometChatUIKit.login()` -- Primary components: `CometChatConversations`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` -- CSS class prefix: `.cometchat-` +**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-` -- `CometChatUIKit.init()` and `CometChatUIKit.login()` must complete before any UI Kit component renders. -- `CometChat.User` and `CometChat.Group` are the required inputs for message components. -- `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` form the core chat surface. -- Message actions (reply, reaction, report) are available from the message actions menu in `CometChatMessageList`. - -## Implementation - -### Base 1:1 chat surface - -What you’re changing: Build the main 1:1 chat panel with header, message list, and composer. -File: `src/App.tsx` -Applies to: `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` -Default behavior: Renders the core chat surface and enables instant messaging, media sharing, read receipts, reactions, quoted replies, typing indicator, and presence for the active user chat. -Override: Use `hideReceipts`, `templates`, or `hideVoiceRecording` on the corresponding components. -Verify: You can send text and media, see receipt states, and use message actions such as reaction and reply. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatMessageComposer, - CometChatMessageHeader, - CometChatMessageList, -} from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function App() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatUser) return null; - - return ( -
- - - -
- ); -} -``` - -What this does: Initializes CometChat, loads the target user, and renders the core 1:1 chat UI. - -#### Instant Messaging +## Overview + +The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. + + +Here's how different UI Kit components work together to achieve CometChat's Core features: + + + +**Before using these components:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + +## Instant Messaging At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication. @@ -182,366 +49,213 @@ At the heart of CometChat's functionality is the ability to support real-time te -| Components | Functionality | -| --- | --- | -| [Message Composer](/ui-kit/react/message-composer) | Enables users to write and send a variety of messages. | -| [Message List](/ui-kit/react/message-list) | Renders a list of sent and received messages using text bubbles. | +| Components | Functionality | +| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| [Message Composer](/ui-kit/react/message-composer) | The [Message Composer](/ui-kit/react/message-composer) is a Component that enables users to write and send a variety of messages. | +| [Message List](/ui-kit/react/message-list) | The [Message List](/ui-kit/react/message-list) is a Component that renders a list of messages sent and messages received using Text Bubble. | -#### Media Sharing +## Media Sharing -Beyond text, CometChat allows users to share images, videos, audio files, and documents. +Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication. -| Components | Functionality | -| --- | --- | -| [Message Composer](/ui-kit/react/message-composer) | Provides an action sheet for sharing media files. | -| [Message List](/ui-kit/react/message-list) | Renders image, file, audio, and video message bubbles. | +| Components | Functionality | +| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Message Composer](/ui-kit/react/message-composer) | The [Message Composer](/ui-kit/react/message-composer) component includes an ActionSheet. This ActionSheet serves as a menu appearing over the app's context, offering various options for sharing media files. | +| [Message List](/ui-kit/react/message-list) | The [Message List](/ui-kit/react/message-list) component is responsible for rendering various Media Message bubbles, such as Image, File, Audio & Video Bubble. | -#### Read Receipts +## Read Receipts -Read receipts show delivery and read status for messages. +CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages. -| Components | Functionality | -| --- | --- | -| [Conversations](/ui-kit/react/conversations) | Shows delivery status of the last message in each conversation. | -| [Message List](/ui-kit/react/message-list) | Displays read receipt status on each message bubble. | -| Message Information | Provides per-message delivery and read status details. | +| Components | Functionality | +| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | +| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that renders different types of message bubbles. Read receipt status is an integral part of all message bubbles, no matter the type and provides real-time updates about the status of the message. | +| Message Information | Message Information component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. | -#### Mark as Unread +## Mark as Unread -Mark as Unread lets users flag a conversation as unread and jump back to the first unread message. + Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off. -| Components | Functionality | -| --- | --- | -| [Message List](/ui-kit/react/message-list) | Provides the Mark as unread option in message actions and can start from the first unread message. | -| [Conversations](/ui-kit/react/conversations) | Updates and displays unread counts in real time. | +| Components | Functionality | +| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. | +| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) component listens to conversation updates and reflects the updated unread count in real-time. | -#### Typing Indicator +## Typing Indicator -Typing indicators show when someone is actively typing. +The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid. -| Components | Functionality | -| --- | --- | -| [Conversations](/ui-kit/react/conversations) | Shows typing status in conversation list items. | -| [Message Header](/ui-kit/react/message-header) | Displays typing status in the header in real time. | +| Components | Functionality | +| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message. | +| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of User or Groups in ToolBar. The Message Header also handles the typing indicator functionality. When a user or a member in a group is typing, the Message Header dynamically updates to display a `typing...` status in real-time. | -#### User Presence +## User Presence -Presence shows whether a user is online or offline. +CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times. -| Components | Functionality | -| --- | --- | -| [Conversations](/ui-kit/react/conversations) | Shows presence indicators in conversation list items. | -| [Message Header](/ui-kit/react/message-header) | Shows presence for the active user or group. | -| [Users](/ui-kit/react/users) | Shows presence in the users list. | -| [Group Members](/ui-kit/react/group-members) | Shows presence for group members. | +| Components | Functionality | +| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversations item also shows user presence information. | +| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of user/group. The Message Header also handles user presence information. | +| [Users](/ui-kit/react/users) | [Users](/ui-kit/react/users) renders list of users available in your app.It also responsible to render users presence information. | +| [Group Members](/ui-kit/react/group-members) | [Group Members](/ui-kit/react/group-members) renders list of users available in the group. The Group Members component also handles user presence information. | -#### Reactions +## Reactions -Reactions let users respond to messages with emoji without typing a reply. +CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement. -| Components | Functionality | -| --- | --- | -| [Message List](/ui-kit/react/message-list) | Displays reactions on message bubbles. | - -#### Quoted Replies +| Components | Functionality | +| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that renders different types of message bubbles. Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. | -Quoted replies let users reply to specific messages with context. - - - - +## Mentions -| Components | Functionality | -| --- | --- | -| [Message List](/ui-kit/react/message-list) | Provides the Reply action for messages. | -| [Message Composer](/ui-kit/react/message-composer) | Displays the quoted message above the input field. | - -### Group chat with mentions - -What you’re changing: Render a group chat view that supports mentions. -File: `src/App.tsx` -Applies to: `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` -Default behavior: Mentions appear in the composer and message list, including group mentions like `@all`. -Override: Use `templates` for message rendering or `hideVoiceRecording` for input behavior. -Verify: Typing `@` shows mention suggestions and `@all` notifies the group. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatMessageComposer, - CometChatMessageHeader, - CometChatMessageList, -} from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function App() { - const [chatGroup, setChatGroup] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const group = await CometChat.getGroup("GUID"); - if (isMounted) setChatGroup(group); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatGroup) return null; - - return ( -
- - - -
- ); -} -``` - -What this does: Initializes CometChat, loads a group, and renders a group chat UI with mentions support. - -#### Mentions - -Mentions help users address individuals or groups like `@all` in chats. +Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously. -| Components | Functionality | -| --- | --- | -| [Conversations](/ui-kit/react/conversations) | Shows conversations where mentions occurred. | -| [Message Composer](/ui-kit/react/message-composer) | Enables tagging users and groups. | -| [Message List](/ui-kit/react/message-list) | Renders mentions in messages. | +| Components | Functionality | +| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. | +| [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. | -#### Group Chat +## Threaded Conversations -CometChat supports group conversations for teams and communities. +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. - + -For a detailed guide, see [Groups](/ui-kit/react/groups). - -### Threaded conversations and search - -What you’re changing: Add thread entry points and a search surface for messages and conversations. -File: `src/App.tsx` -Applies to: `CometChatMessageList`, `CometChatSearch` -Default behavior: Threaded replies appear on message bubbles, and search scans conversations and messages. -Override: Use `onThreadRepliesClick`, `onConversationClicked`, `onMessageClicked`, `searchIn`, and `searchFilters`. -Verify: Clicking a thread entry triggers your handler, and search results show conversations or messages. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageList, CometChatSearch } from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function App() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatUser) return null; - - return ( -
- console.log("Conversation:", conversation)} - onMessageClicked={(message) => console.log("Message:", message)} - /> - console.log("Thread message:", message)} - /> -
- ); -} -``` - -What this does: Renders a search UI and a message list with a threaded replies click handler. - -#### Threaded Conversations - -Threaded conversations allow replies to specific messages. +| 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. | + +## Quoted Replies + +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 | -| --- | --- | -| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | Displays the parent message with the number of replies. | +| 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. | -#### Conversation and Advanced Search +## Group Chat -Search helps users find conversations, messages, and media in real time. +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. - + -For a detailed guide, see [Search](/ui-kit/react/search). - -### Moderation and report message - -What you’re changing: Enable moderation and reporting in the message list UI. -File: `src/App.tsx` -Applies to: `CometChatMessageList` -Default behavior: Moderated content is displayed according to moderation rules, and the Report Message action appears in the message actions menu. -Override: Moderation rules are configured in the CometChat Dashboard. -Verify: Blocked content displays according to rules, and users can report messages. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function App() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatUser) return null; - - return ( -
- console.error("MessageList error:", error)} - /> -
- ); -} -``` - -What this does: Renders a message list that automatically reflects moderation rules and allows message reporting. - -#### Moderation - -Moderation filters and manages inappropriate content based on your rules. +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 + +CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users. -Learn more about setting up moderation rules in [Moderation overview](/moderation/overview). +Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation. -| Components | Functionality | -| --- | --- | -| [Message List](/ui-kit/react/message-list) | Displays moderated messages based on your settings. | +| Components | Functionality | +| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. | -#### Report Message +After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators. -Users can report messages and submit a reason and remarks. +## Report Message - - - +The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment. -Learn how flagged messages are handled in [Flagged Messages](/moderation/flagged-messages). +Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation. -| Components | Functionality | -| --- | --- | -| [Message List](/ui-kit/react/message-list) | Provides the Report Message option in the message actions menu. | - -## Customization matrix + + + -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Hide read receipts in message bubbles | `CometChatMessageList` | `hideReceipts` | `hideReceipts={true}` | -| Hide read receipts in conversation list | `CometChatConversations` | `hideReceipts` | `hideReceipts={true}` | -| Customize message bubble rendering | `CometChatMessageList` | `templates` | `templates={customTemplates}` | -| Handle thread click behavior | `CometChatMessageList` | `onThreadRepliesClick` | `onThreadRepliesClick={openThread}` | -| Change conversation selection behavior | `CometChatConversations` | `onItemClick` | `onItemClick={(c) => setActive(c)}` | -| Hide voice recording in composer | `CometChatMessageComposer` | `hideVoiceRecording` | `hideVoiceRecording={true}` | -| Hide user status in header | `CometChatMessageHeader` | `hideUserStatus` | `hideUserStatus={true}` | -| Adjust search scope or filters | `CometChatSearch` | `searchIn`, `searchFilters` | `searchIn={["messages"]}` | +| Components | Functionality | +| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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. | -## Common pitfalls and fixes +## Conversation and Advanced Search -| Symptom | Likely cause | Fix | -| --- | --- | --- | -| Components do not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering any UI Kit component. | -| Components render but show no data | User not logged in | Call `CometChatUIKit.login("UID")` after init. | -| Message list is empty | `chatUser` or `chatGroup` not loaded | Fetch a valid `CometChat.User` or `CometChat.Group` before rendering. | -| Message list throws errors | Both `user` and `group` props provided | Pass only one of `user` or `group`. | -| Mark as Unread does not appear | Message actions not visible | Ensure message actions are enabled in `CometChatMessageList` and the user has permission. | -| Mentions do not show suggestions | Using a 1:1 chat or user missing mention permissions | Use a group chat and ensure the user is a group member. | -| Search shows no results | `CometChatSearch` rendered before login | Render search after `CometChatUIKit.login()` completes. | -| SSR hydration error in Next.js | UI Kit uses browser APIs | Render UI Kit components in `useEffect` or use a client-only import. | +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. -## FAQ + + + -**Do I need both Message List and Message Composer?** -Yes. `CometChatMessageList` renders messages, and `CometChatMessageComposer` sends new messages. +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). -**Can I use core features without Conversations?** -Yes. You can render a direct user or group chat by passing a `CometChat.User` or `CometChat.Group` to the message components. + + -**Where do I enable moderation and reporting?** -Set up moderation rules in [Moderation overview](/moderation/overview) and manage flagged messages in [Flagged Messages](/moderation/flagged-messages). +| 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) | -**How do I switch between user and group chats?** -Handle `onItemClick` in `CometChatConversations`, detect whether the conversation is a user or group, and pass the correct object to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`. + + -## Next steps +--- -- [Components Overview](/ui-kit/react/components-overview) -- [Theme](/ui-kit/react/theme) -- [Call Features](/ui-kit/react/call-features) +## Next Steps + + + + Browse all available UI Kit components + + + Customize the look and feel of your chat UI + + + Add audio and video calling to your app + + + Explore AI-powered chat capabilities + + diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx index 007fb7496..a74c7889c 100644 --- a/ui-kit/react/extensions.mdx +++ b/ui-kit/react/extensions.mdx @@ -3,302 +3,163 @@ title: "Extensions" description: "Overview of CometChat's extensions grouped by Dashboard categories (User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features) and how they auto-integrate into React UI Kit components." --- -Enable CometChat extensions from the Dashboard and have them automatically appear inside your React UI Kit chat experience. This page helps you turn on extensions, render the right components, and verify where each extension surfaces. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +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) -- You want to add stickers, polls, translation, or link previews without custom UI. -- You need collaboration tools like whiteboard or collaborative documents. -- You want security features like disappearing messages. -- You need customer support integrations like Chatwoot or Intercom. -- You want AI-powered chat features like Smart Replies or Conversation Summary. +Extensions are enabled via the [CometChat Dashboard](/fundamentals/extensions-overview) — no additional code required once activated. -## Prerequisites +Supported extensions: User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features + -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- UI Kit initialization and login must complete before rendering any UI Kit component: `CometChatUIKit.init()` and `CometChatUIKit.login()`. -- Extensions must be activated in the CometChat Dashboard. See [Extensions overview](/fundamentals/extensions-overview). + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + Extensions enabled in Dashboard +**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 + -## Quick start +## Overview -1. Enable one or more extensions in the CometChat Dashboard. Use [Extensions overview](/fundamentals/extensions-overview). -2. Install the UI Kit. +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. -```bash -npm install @cometchat/chat-uikit-react -``` -What this does: Installs the React UI Kit package. + +**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). + -3. Initialize the UI Kit and log in a user in `src/cometchat.ts`. +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). -```ts -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; +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. -export async function initCometChat() { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); +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. - await CometChatUIKit.init(UIKitSettings); - await CometChatUIKit.login("UID"); -} -``` +## Built-in Extensions -What this does: Initializes CometChat UI Kit and logs in a user. +Here's a guide on how you can enable and integrate these extensions. The grouping below mirrors the CometChat Dashboard. -4. Render `CometChatMessageComposer` and `CometChatMessageList` in `src/App.tsx`. +### User Experience -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatMessageComposer, - CometChatMessageList, -} from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; +#### Bitly -export default function App() { - const [chatUser, setChatUser] = React.useState(null); +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). - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); +#### Link Preview - if (!chatUser) return null; +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). - return ( -
- - -
- ); -} -``` +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. -What this does: Renders the message list and composer where most extensions appear. + + + -5. Run your app and verify extension UI appears based on the extensions you enabled. +#### Message Shortcuts -## Core concepts +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). - -**Quick Reference for AI Agents & Developers** +#### Pin Message -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) +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). -Extensions are enabled via the [CometChat Dashboard](/fundamentals/extensions-overview) and auto-integrate into UI Kit components. - +#### Rich Media Preview - -**AI Agent Component Spec** +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). -- Package: `@cometchat/chat-uikit-react` -- Required setup: `CometChatUIKit.init()` and `CometChatUIKit.login()` -- Primary components: `CometChatMessageComposer`, `CometChatMessageList` -- Activation: Enable each extension from the CometChat Dashboard - +#### Save Message -- Extension: A feature enabled from the CometChat Dashboard that appears automatically in UI Kit components. -- Auto-integration: Once enabled, supported extensions render inside Message List or Message Composer without extra code. -- Action Sheet: The attachment menu in `CometChatMessageComposer` where items like Polls, Whiteboard, and Document appear. - -## Implementation - -### Initialize UI Kit - -What you’re changing: Add UI Kit initialization and login. -File: `src/cometchat.ts` -Applies to: `CometChatUIKit.init()`, `CometChatUIKit.login()` -Default behavior: Enables UI Kit features and extensions for the logged-in user. -Override: Use a different auth flow if needed in [Methods](/ui-kit/react/methods). -Verify: UI Kit components render without errors after init and login. - -```ts -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -export async function initCometChat() { - const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); - - await CometChatUIKit.init(UIKitSettings); - await CometChatUIKit.login("UID"); -} -``` - -What this does: Initializes CometChat UI Kit and logs in a user. - -### Render extension surfaces - -What you’re changing: Render the components that surface extension UI. -File: `src/App.tsx` -Applies to: `CometChatMessageList`, `CometChatMessageComposer` -Default behavior: Enabled extensions automatically appear in the composer or message list. -Override: Customize UI behavior using component props documented on [Message Composer](/ui-kit/react/message-composer) and [Message List](/ui-kit/react/message-list). -Verify: Polls, stickers, translation, previews, and other enabled extensions show up. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatMessageComposer, - CometChatMessageList, -} from "@cometchat/chat-uikit-react"; -import { initCometChat } from "./cometchat"; - -export default function App() { - const [chatUser, setChatUser] = React.useState(null); - - React.useEffect(() => { - let isMounted = true; - (async () => { - await initCometChat(); - const user = await CometChat.getUser("TARGET_UID"); - if (isMounted) setChatUser(user); - })(); - return () => { - isMounted = false; - }; - }, []); - - if (!chatUser) return null; - - return ( -
- - -
- ); -} -``` - -What this does: Renders the UI Kit components where extensions are auto-integrated. - -## Built-in extensions by category +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). -### User Experience +#### Thumbnail Generation -**Bitly** -Shortens long URLs in text messages using Bitly. -Guide: [Bitly Extension](/fundamentals/bitly) +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). -**Link Preview** -Shows a title, description, and thumbnail for shared URLs. -Guide: [Link Preview Extension](/fundamentals/link-preview) -Where it appears: Message bubbles in [Message List](/ui-kit/react/message-list). +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. - + -**Message Shortcuts** -Expands short codes into predefined messages. -Guide: [Message Shortcuts Extension](/fundamentals/message-shortcuts) +#### TinyURL -**Pin Message** -Pins important messages in a conversation. -Guide: [Pin Message Extension](/fundamentals/pin-message) +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). -**Rich Media Preview** -Generates rich preview panels for URLs using iFramely. -Guide: [Rich Media Preview Extension](/fundamentals/rich-media-preview) +#### Voice Transcription -**Save Message** -Saves messages privately for later reference. -Guide: [Save Message Extension](/fundamentals/save-message) +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). -**Thumbnail Generation** -Creates smaller preview images for shared media. -Guide: [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) -Where it appears: Image bubbles in [Message List](/ui-kit/react/message-list). - - - - +### User Engagement -**TinyURL** -Shortens URLs using TinyURL. -Guide: [TinyURL Extension](/fundamentals/tinyurl) +#### Giphy -**Voice Transcription** -Converts audio messages into text. -Guide: [Voice Transcription Extension](/fundamentals/voice-transcription) +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). -### User Engagement +#### Message Translation -**Giphy** -Search and share GIFs in conversations. -Guide: [Giphy Extension](/fundamentals/giphy) +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). -**Message Translation** -Translates messages to the user’s locale. -Guide: [Message Translation Extension](/fundamentals/message-translation) -Where it appears: Action sheet in [Message List](/ui-kit/react/message-list). +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** -Creates polls inside conversations. -Guide: [Polls Extension](/fundamentals/polls) -Where it appears: Action sheet in [Message Composer](/ui-kit/react/message-composer). +#### 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). + +Once you have successfully activated the [Polls Extension](/fundamentals/polls) 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. -**Reminders** -Sets reminders for messages or personal reminders. -Guide: [Reminders Extension](/fundamentals/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** -Adds sticker packs to chats. -Guide: [Sticker Extension](/fundamentals/stickers) -Where it appears: [Message Composer](/ui-kit/react/message-composer). +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** -Adds Stipop sticker library. -Guide: [Stipop Extension](/fundamentals/stickers-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** -Search and share GIFs from Tenor. -Guide: [Tenor Extension](/fundamentals/tenor) +The Tenor extension allows users to search for and share GIFs from Tenor's library in their conversations. For a comprehensive understanding and guide on implementing and using the Tenor Extension, refer to our specific guide on the [Tenor Extension](/fundamentals/tenor). ### Collaboration -**Collaborative Document** -Collaborate on documents in real time. -Guide: [Collaborative Document Extension](/fundamentals/collaborative-document) -Where it appears: Action sheet in [Message Composer](/ui-kit/react/message-composer). +#### Collaborative Document + +With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document). + +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 Whiteboard** -Collaborate on a shared whiteboard. -Guide: [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) -Where it appears: Action sheet in [Message Composer](/ui-kit/react/message-composer). +#### 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). + +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. @@ -306,72 +167,67 @@ Where it appears: Action sheet in [Message Composer](/ui-kit/react/message-compo ### Security -**Disappearing Messages** -Messages disappear after a set time. -Guide: [Disappearing Messages Extension](/fundamentals/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 -**Chatwoot** -Enables support conversations via Chatwoot. -Guide: [Chatwoot Extension](/fundamentals/chatwoot) +#### Chatwoot -**Intercom** -Enables support conversations via Intercom. -Guide: [Intercom Extension](/fundamentals/intercom) +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). -### Smart Chat Features +#### Intercom -**Conversation Starter** -AI-generated opening messages. -Guide: [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and [AI Features](/ui-kit/react/ai-features) +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 Replies** -AI-generated reply suggestions. -Guide: [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and [AI Features](/ui-kit/react/ai-features) +### Smart Chat Features -**Conversation Summary** -AI-written conversation recap. -Guide: [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and [AI Features](/ui-kit/react/ai-features) +#### Conversation Starter -## Customization matrix +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. -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Enable or disable an extension | CometChat Dashboard | Extensions toggle | Enable **Polls** in [Extensions overview](/fundamentals/extensions-overview) | -| Show Polls, Whiteboard, or Document | `CometChatMessageComposer` | Component render | `` | -| Show Link Preview or Thumbnails | `CometChatMessageList` | Component render | `` | -| Adjust extension UI placement | UI Kit components | Component props | Use props documented on [Message Composer](/ui-kit/react/message-composer) or [Message List](/ui-kit/react/message-list) | +#### Smart Replies -## Common pitfalls and fixes +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. -| Symptom | Cause | Fix | -| --- | --- | --- | -| Extension feature not appearing | Extension not enabled in Dashboard | Enable it in [Extensions overview](/fundamentals/extensions-overview). | -| Component does not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. | -| Component renders but no extension UI | User not logged in | Call `CometChatUIKit.login("UID")` after init. | -| Stickers not showing | Sticker extension not enabled | Enable [Sticker Extension](/fundamentals/stickers). | -| Polls option missing | Polls extension not enabled | Enable [Polls Extension](/fundamentals/polls). | -| Link preview not rendering | Link Preview extension not enabled | Enable [Link Preview Extension](/fundamentals/link-preview). | -| Extensions show for some users but not others | Different app credentials in different environments | Verify `APP_ID`, `REGION`, and `AUTH_KEY` match the same app. | -| SSR hydration error | UI Kit uses browser APIs | Render in `useEffect` or use `ssr: false` for Next.js. | +#### Conversation Summary -## FAQ +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. -**Do I need to write code for each extension?** -No. Once enabled in the Dashboard, supported extensions auto-integrate into UI Kit components. +--- -**Where do I see Polls, Whiteboard, or Collaborative Document?** -These appear in the action sheet of [Message Composer](/ui-kit/react/message-composer). + + -**Where do I see Link Preview and Thumbnail Generation?** -These render inside message bubbles in [Message List](/ui-kit/react/message-list). +| 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) | -**Can I use extensions without the UI Kit?** -This page is specific to UI Kit integration. For non-UI Kit usage, refer to the individual extension guides in [Extensions overview](/fundamentals/extensions-overview). + + -## Next steps +--- -- [Message Composer](/ui-kit/react/message-composer) -- [Message List](/ui-kit/react/message-list) -- [AI Features](/ui-kit/react/ai-features) +## Next Steps + + + + Customize the composer where most extensions appear + + + Customize the message list for extension-rendered content + + + Explore core chat features like messaging and reactions + + + Explore AI-powered chat capabilities + + diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx index 0cc98ff3a..bfd7be367 100644 --- a/ui-kit/react/localize.mdx +++ b/ui-kit/react/localize.mdx @@ -4,392 +4,456 @@ sidebarTitle: "Localize" description: "Configure multi-language localization, custom translations, and date/time formatting in CometChat React UI Kit." --- -Configure localization for UI Kit text and date/time formatting. This page is for developers who need exact language codes, translation keys, and date formatting controls. - -## When to use this - -- You want the UI Kit to appear in the user’s language. -- You need custom translations for specific labels or features. -- You need custom date and time formats. -- You want to control language detection and fallback behavior. -- You want to localize moderation reasons and mention labels. - -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- UI Kit initialized and user logged in before rendering components. -- Use supported language codes from the table below (for example `en-US`, `fr`, `es`). -- If adding translations, call `CometChatLocalize.init()` first, then `CometChatLocalize.addTranslation()`. - -## Quick start - -1. Create `src/cometchat-localize.ts` and initialize localization. - -```ts -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; - -export function initLocalization() { - CometChatLocalize.init({ - language: "es", - fallbackLanguage: "en-US", - disableAutoDetection: false, - }); -} -``` - -What this does: Sets the default language to Spanish and falls back to English. - -2. (Optional) Add custom translations. - -```ts -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; - -export function addCustomTranslations() { - CometChatLocalize.addTranslation({ - "en-US": { welcome_message: "Welcome!" }, - es: { welcome_message: "Bienvenido!" }, - }); -} -``` - -What this does: Adds a custom translation key in English and Spanish. - -3. (Optional) Switch languages at runtime. - -```ts -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; - -export function setLanguage(language: string) { - CometChatLocalize.setCurrentLanguage(language); -} -``` - -What this does: Changes the UI language without reloading the app. - -## Core concepts - +{/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```ts +```javascript import { CometChatLocalize } from "@cometchat/chat-uikit-react"; +// Set language CometChatLocalize.setCurrentLanguage("fr"); +// Init with full config CometChatLocalize.init({ language: "es", fallbackLanguage: "en-US", disableAutoDetection: false, }); +// Add custom translations CometChatLocalize.addTranslation({ - "en-US": { welcome_message: "Welcome!" }, + "en-US": { "welcome_message": "Welcome!" } }); ``` -What this does: Shows the primary methods used to set language, initialize, and add translations. +- **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) -- CometChatLocalize: Static class that manages language selection and date/time formatting. -- Language JSON files: Built-in translations stored in the UI Kit repository. -- CalendarObject: Defines how dates and times are formatted for today, yesterday, and other days. +## **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: + +* **Automatically detect and apply a language** based on browser/device settings. +* **Manually change the UI language**. +* **Format date and time** based on localization settings. + +The v6 React UI Kit expands support for **multiple languages** and allows developers to define **custom translations**.\ +The localization system now includes **language JSON files**, which store translations, and an **improved CometChatLocalize class**, which handles language detection and formatting. -### Supported languages +*** -React UI Kit supports the following languages: +### **Supported Languages** -| Language | Code | -| --- | --- | -| English (United States) | `en-US` | +React UI Kit currently supports **19 languages**: + +| Language | Code | +| ------------------------ | ------- | +| English (United States) | `en-US` | | English (United Kingdom) | `en-GB` | -| Dutch | `nl` | -| French | `fr` | -| German | `de` | -| Hindi | `hi` | -| Italian | `it` | -| Japanese | `ja` | -| Korean | `ko` | -| Portuguese | `pt` | -| Russian | `ru` | -| Spanish | `es` | -| Turkish | `tr` | -| Chinese | `zh` | -| Chinese (Traditional) | `zh-TW` | -| Malay | `ms` | -| Swedish | `sv` | -| Lithuanian | `lt` | -| Hungarian | `hu` | - -Language JSON files: [Language JSON Files](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources) - -### LocalizationSettings - -| Property | Type | Description | -| --- | --- | --- | -| `language` | `string` | Language code for the current localization. | -| `translationsForLanguage` | `{ [key: string]: any }` | Key-value pairs for translations in the current language. | -| `disableAutoDetection` | `boolean` | Disable automatic browser language detection. | -| `fallbackLanguage` | `string` | Fallback language if the primary language is not available. | -| `disableDateTimeLocalization` | `boolean` | Disable localization for date and time values. | -| `timezone` | `string` | Timezone for date and time formatting. | -| `calendarObject` | `CalendarObject` | Custom calendar format for date and time formatting. | -| `missingKeyHandler` | `(key: string) => string` | Function that handles missing translation keys. | - -### CalendarObject - -| Property | Type | Description | -| --- | --- | --- | -| `today` | `string` | Format for dates that are today. | -| `yesterday` | `string` | Format for dates that are yesterday. | -| `lastWeek` | `string` | Format for dates within the last 7 days. | -| `otherDays` | `string` | Format for older dates. | -| `relativeTime` | `object` | Format for relative time strings. | -| `relativeTime.minute` | `string` | Format for a single minute. | -| `relativeTime.minutes` | `string` | Format for multiple minutes. | -| `relativeTime.hour` | `string` | Format for a single hour. | -| `relativeTime.hours` | `string` | Format for multiple hours. | - -## Implementation - -### Initialize CometChatLocalize - -What you’re changing: Set default localization behavior. -File: `src/cometchat-localize.ts` -Applies to: `CometChatLocalize.init()` -Default behavior: UI Kit uses default language and date formatting. -Override: Set language, fallback, timezone, and calendar object. -Verify: UI text and timestamps render in the selected language and format. - -```ts +| Dutch | `nl` | +| French | `fr` | +| German | `de` | +| Hindi | `hi` | +| Italian | `it` | +| Japanese | `ja` | +| Korean | `ko` | +| Portuguese | `pt` | +| Russian | `ru` | +| Spanish | `es` | +| Turkish | `tr` | +| Chinese | `zh` | +| Chinese (Traditional) | `zh-TW` | +| Malay | `ms` | +| Swedish | `sv` | +| Lithuanian | `lt` | +| Hungarian | `hu` | + +🔗 **View JSON files for all supported languages** in the GitHub repository:\ +➡ [Language JSON Files](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources) + +*** + +## **CometChatLocalize** + +The `CometChatLocalize` class provides methods for managing localization in the UI Kit. + +🔗 **View full class file in the GitHub repository:**\ +➡ [CometChatLocalize](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts) + +*** + +### **LocalizationSettings** + +The `LocalizationSettings` interface defines various **localization settings** for an application or component. It allows developers to configure the language, translations, time zone, and calendar formatting while providing options for automatic detection and missing key handling. + +| Property | Type | Description | +| ----------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------- | +| `language` | `string` | The language code (e.g., `"en"`, `"fr"`) for the current localization. | +| `translationsForLanguage` | `{ [key: string]: any }` | An object containing key-value pairs for translations in the current language. | +| `disableAutoDetection` | `boolean` | Disables automatic language detection based on the browser or device settings. | +| `fallbackLanguage` | `string` | The **fallback language code** to use if the primary language is not available. | +| `disableDateTimeLocalization` | `boolean` | Disables localization for **date and time values**, forcing the default format. | +| `timezone` | `string` | The **timezone** used for date and time formatting (e.g., `"America/New_York"`, `"Europe/London"`). | +| `calendarObject` | `CalendarObject` | A **custom calendar format** using `CalendarObject` to define localized date and time formatting. | +| `missingKeyHandler` | `(key: string) => string` | A function that **handles missing translation keys**, allowing custom error handling or fallbacks. | + +*** + +**Example** + +```javascript import { CometChatLocalize } from "@cometchat/chat-uikit-react"; import { CalendarObject } from "./CalendarObject"; -export function initLocalization() { - CometChatLocalize.init({ - language: "es", - fallbackLanguage: "en-US", +CometChatLocalize.init({ + language: "es", // Default language set to Spanish + fallbackLanguage: "en-US", // Use English if the preferred language is not available translationsForLanguage: { - es: { - welcome_message: "Bienvenido a CometChat!", - logout_message: "Has cerrado sesión con éxito.", - }, - fr: { - welcome_message: "Bienvenue sur CometChat!", - logout_message: "Vous vous êtes déconnecté avec succès.", - }, + "es": { + "welcome_message": "¡Bienvenido a CometChat!", + "logout_message": "Has cerrado sesión con éxito." + }, + "fr": { + "welcome_message": "Bienvenue sur CometChat!", + "logout_message": "Vous vous êtes déconnecté avec succès." + } }, - disableAutoDetection: false, - disableDateTimeLocalization: false, - timezone: "Europe/Madrid", + disableAutoDetection: false, // Allow automatic detection of browser/device language + disableDateTimeLocalization: false, // Enable localization for date and time + timezone: "Europe/Madrid", // Set time zone for date and time formatting calendarObject: new CalendarObject({ - today: "[Hoy a las] hh:mm A", - yesterday: "[Ayer a las] hh:mm A", - lastWeek: "[Última semana el] dddd", - otherDays: "DD MMM YYYY, hh:mm A", - relativeTime: { - minute: "%d minuto atrás", - minutes: "%d minutos atrás", - hour: "%d hora atrás", - hours: "%d horas atrás", - }, + today: "[Hoy a las] hh:mm A", + yesterday: "[Ayer a las] hh:mm A", + lastWeek: "[Última semana el] dddd", + otherDays: "DD MMM YYYY, hh:mm A", + relativeTime: { + minute: "%d minuto atrás", + minutes: "%d minutos atrás", + hour: "%d hora atrás", + hours: "%d horas atrás", + } }), - missingKeyHandler: (key) => `Missing translation: ${key}`, - }); -} + missingKeyHandler: (key) => `🔍 Missing translation for: ${key}`, // Custom handler for missing translations +}); ``` -What this does: Initializes localization with language, fallback, custom translations, and date formatting. +*** + +### **CalendarObject** + +The `CalendarObject` class defines customizable formatting for date and time representation. It allows you to format dates based on whether they are today, yesterday, last week, or other days. It also supports relative time formatting for minutes and hours. + + +Notice - -Define localization settings inside your CometChat UI Kit initialization flow. See [React.js Integration](/ui-kit/react/react-js-integration). - +Changing this format will **globally update** the date and time representation wherever it is used in the component.\ +However, if a **component-specific** `CalendarObject` is provided, it will take **higher precedence** over the global settings. -### Add custom translations + -What you’re changing: Extend or override translation keys. -File: `src/cometchat-localize.ts` -Applies to: `CometChatLocalize.addTranslation()` -Default behavior: UI Kit uses built-in translation JSON files. -Override: Add custom keys or new languages. -Verify: Custom keys render instead of defaults. +| Property | Type | Description | +| ---------------------- | -------- | ----------------------------------------------------------------------------------------------- | +| `today` | `string` | Custom formatting for dates that fall on the same day. Example: `"Today at hh:mm A"` | +| `yesterday` | `string` | Custom formatting for dates that fall on the previous day. Example: `"Yesterday at hh:mm A"` | +| `lastWeek` | `string` | Custom formatting for dates within the last 7 days. Example: `"Last week on dddd"` | +| `otherDays` | `string` | Custom formatting for dates that do not fit other categories. Example: `"DD MMM YYYY, hh:mm A"` | +| `relativeTime` | `object` | Custom formatting for relative time expressions (e.g., "2 hours ago"). | +| `relativeTime.minute` | `string` | Formatting for a single minute. Example: `"%d minute ago"` | +| `relativeTime.minutes` | `string` | Formatting for multiple minutes. Example: `"%d minutes ago"` | +| `relativeTime.hour` | `string` | Formatting for a single hour. Example: `"%d hour ago"` | +| `relativeTime.hours` | `string` | Formatting for multiple hours. Example: `"%d hours ago"` | -```ts +*** + +**Example** + +```javascript import { CometChatLocalize } from "@cometchat/chat-uikit-react"; +import { CalendarObject } from "./CalendarObject"; -export function addCustomTranslations() { - CometChatLocalize.addTranslation({ - "en-US": { welcome_message: "Welcome to CometChat!" }, - }); -} +new CalendarObject({ + today: "[Hoy a las] hh:mm A", + yesterday: "[Ayer a las] hh:mm A", + lastWeek: "[Última semana el] dddd", + otherDays: "DD MMM YYYY, hh:mm A", + relativeTime: { + minute: "%d minuto atrás", + minutes: "%d minutos atrás", + hour: "%d hora atrás", + hours: "%d horas atrás", + } + }) ``` -What this does: Adds a custom translation key in English. +*** + +### **Component Guide** + + +Note + +The translation configurations mentioned in this section are to be defined inside the +ComeChat's init() method callback. + -### Report message reason translations +#### Report Message -What you’re changing: Add translations for moderation report reasons. -File: `src/cometchat-localize.ts` -Applies to: `flag_message_reason_id_` keys -Default behavior: Default reasons are translated in the UI Kit. -Override: Add custom reason IDs to translations. -Verify: Report reason labels show localized text. +To add translations for any flag reason, a key in the form of `flag_message_reason_id_{reason_id}` is to be defined with the translated strings to be displayed for that `reason_id` in the UI. The translations for `flag_message_reason_id_spam`, `flag_message_reason_id_sexual`, `flag_message_reason_id_harassment` are present by default. -```ts +**Usage** +* Define translations for custom flag message reasons. +* The reason name would be displayed when the required translation is not found. + +**Example** + +```javascript import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -export function addReportReasonTranslations() { - CometChatLocalize.addTranslation({ +// Add translations for flag reason keys for the required languages +CometChatLocalize.addTranslation({ "en-GB": { - flag_message_reason_id_dislike: "I just don't like it", - }, - es: { - flag_message_reason_id_dislike: "Simplemente no me gusta", + "flag_message_reason_id_dislike": "I just don't like it", }, - }); -} + "es": { + "flag_message_reason_id_dislike": "Simplemente no me gusta", + } +}); ``` -What this does: Adds localized labels for a custom report reason. +#### Mention All + +To add translations for a custom `mentionAllLabel`, a key in the form of `message_composer_mention_{label}` is to be defined with the translated strings to be displayed for that label in the UI. The translations for `message_composer_mention_all` is present by default. -### Mention all label translations +**Usage** +* Define translations for custom mentionAllLabel. +* Helps customize the `@all` label used in the app while mentioning all group members. -What you’re changing: Add translations for custom mention-all labels. -File: `src/cometchat-localize.ts` -Applies to: `message_composer_mention_ ## Overview diff --git a/ui-kit/react/astro-conversation.mdx b/ui-kit/react/astro-conversation.mdx index 3263996e4..8fefaaaae 100644 --- a/ui-kit/react/astro-conversation.mdx +++ b/ui-kit/react/astro-conversation.mdx @@ -4,15 +4,13 @@ sidebarTitle: "Conversation List + Message View" 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** - -- **Framework:** Astro -- **Key components:** `CometChatConversationsWithMessages` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Framework:** Astro (with `@astrojs/react` islands) +- **Key component:** `CometChatConversationsWithMessages` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — use `client:only="react"` directive - **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. diff --git a/ui-kit/react/astro-integration.mdx b/ui-kit/react/astro-integration.mdx index 7af0b1bf3..b72165883 100644 --- a/ui-kit/react/astro-integration.mdx +++ b/ui-kit/react/astro-integration.mdx @@ -4,34 +4,14 @@ sidebarTitle: "Integration" 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 */} - -**Quick Reference for AI Agents & Developers** - -```bash -# Install -npm i @cometchat/chat-uikit-react -npx astro add react -``` - -```tsx -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); - -await CometChatUIKit.init(UIKitSettings); -await CometChatUIKit.login("UID"); -``` - -- **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) - + +- **Package:** `@cometchat/chat-uikit-react` — `npm install @cometchat/chat-uikit-react` + `npx astro add react` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering +- **SSR:** CometChat requires browser APIs — use `client:only="react"` directive on Astro islands +- **Init code:** `new UIKitSettingsBuilder().setAppId("APP_ID").setRegion("REGION").setAuthKey("AUTH_KEY").build()` +- **Framework:** Astro (this page) | [React.js](/ui-kit/react/react-js-integration) | [Next.js](/ui-kit/react/next-js-integration) | [React Router](/ui-kit/react/react-router-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: diff --git a/ui-kit/react/astro-one-to-one-chat.mdx b/ui-kit/react/astro-one-to-one-chat.mdx index 1beb30dc9..3f02e546f 100644 --- a/ui-kit/react/astro-one-to-one-chat.mdx +++ b/ui-kit/react/astro-one-to-one-chat.mdx @@ -4,15 +4,13 @@ sidebarTitle: "One To One/Group Chat" 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** - -- **Framework:** Astro -- **Key components:** `CometChatMessages` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Framework:** Astro (with `@astrojs/react` islands) +- **Key component:** `CometChatMessages` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — use `client:only="react"` directive - **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. diff --git a/ui-kit/react/astro-tab-based-chat.mdx b/ui-kit/react/astro-tab-based-chat.mdx index cf5de2ef3..135562802 100644 --- a/ui-kit/react/astro-tab-based-chat.mdx +++ b/ui-kit/react/astro-tab-based-chat.mdx @@ -4,15 +4,13 @@ sidebarTitle: "Tab Based Chat Experience" 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** - -- **Framework:** Astro -- **Key components:** `CometChatFullScreenView` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Framework:** Astro (with `@astrojs/react` islands) +- **Key component:** `CometChatFullScreenView` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — use `client:only="react"` directive - **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. diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index b6cfbdce7..56aeb1a9c 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -41,41 +41,15 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; - -// For a user - - -// For a group - - -// With options - -``` -What this does: Shows the code for this step. - - - -**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` - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatCallButtons } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` or `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed +- **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 diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx index c670f3971..97c95009e 100644 --- a/ui-kit/react/call-features.mdx +++ b/ui-kit/react/call-features.mdx @@ -3,32 +3,14 @@ title: "Call" description: "Overview of CometChat's audio and video calling features including incoming calls, outgoing calls, and call logs — with the UI Kit components that power each feature." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -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 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-` + +- **Packages:** `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` (`npm install @cometchat/calls-sdk-javascript`) +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — Calls SDK must also be installed +- **Call features:** Incoming Call, Outgoing Call, Call Logs, Call Buttons +- **Key components:** `CometChatCallButtons` → [Call Buttons](/ui-kit/react/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/react/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/react/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/react/call-logs) - **Auto-detection:** UI Kit automatically detects the Calls SDK and enables call UI components - +- **CSS class prefix:** `.cometchat-` + ## Overview diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index adecf2c28..57193833c 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -39,37 +39,15 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -// Minimal usage - - -// With common props - console.log("Selected:", callLog)} - onCallButtonClicked={(callLog) => console.log("Call back:", callLog)} - title="Call History" -/> -``` -What this does: Shows the code for this step. - - - -**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` - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatCallLogs } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `onItemClick` (callback), `onCallButtonClicked` (callback), `callLogRequestBuilder` (CallLogRequestBuilder), `title` (string), `activeCall` (object) +- **CSS class:** `.cometchat-call-logs` +- **Events:** `ccMessageSent` + ### Overview diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index d7757630d..e056ef7af 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -54,15 +54,13 @@ What this does: Imports the primary UI Kit components into your React module. ## Core concepts - -**Quick Reference for AI Agents & Developers** - -- **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) + +- **Package:** `@cometchat/chat-uikit-react` +- **All components:** [Chat](/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](/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) - + - Component: A prebuilt UI block that renders a feature (conversations, message list, calls). - Action: A callback or override that customizes component behavior. diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index d9f54bbcd..bee7d75c3 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -50,31 +50,15 @@ What this does: Renders the conversations list UI. ## Core concepts - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChatConversations } from "@cometchat/chat-uikit-react"; - - setActiveChat(conversation)} - hideReceipts={false} - selectionMode={SelectionMode.none} -/> -``` - - - -**AI Agent Component Spec** - -- Package: `@cometchat/chat-uikit-react` -- Import: `import { CometChatConversations } from "@cometchat/chat-uikit-react";` -- Minimal JSX: `` -- Required setup: `CometChatUIKit.init()` and `CometChatUIKit.login()` -- Key props: `onItemClick`, `conversationsRequestBuilder`, `hideReceipts`, `selectionMode`, `activeConversation` -- CSS class: `.cometchat-conversations` -- Events: `CometChatConversationEvents.ccConversationDeleted` - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatConversations } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `onItemClick`, `conversationsRequestBuilder`, `hideReceipts`, `selectionMode`, `activeConversation` +- **CSS class:** `.cometchat-conversations` +- **Events:** `CometChatConversationEvents.ccConversationDeleted` + - Conversation: A chat thread between the logged-in user and a user or group. - Selection mode: Controls single or multiple selection behavior for list items. diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index ee13f4a41..55dca1fbd 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -3,31 +3,14 @@ title: "Core" description: "Overview of CometChat's core chat features including instant messaging, media sharing, read receipts, typing indicators, user presence, reactions, mentions, threaded conversations, search, and moderation — with the UI Kit components that power each feature." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -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` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component +- **Core features:** Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat +- **Key components:** `CometChatConversations` → [Conversations](/ui-kit/react/conversations), `CometChatMessageList` → [Message List](/ui-kit/react/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/react/message-header), `CometChatUsers` → [Users](/ui-kit/react/users), `CometChatGroups` → [Groups](/ui-kit/react/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/react/group-members) - **CSS class prefix:** `.cometchat-` - +- **Theming:** Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theme) + ## Overview diff --git a/ui-kit/react/custom-text-formatter-guide.mdx b/ui-kit/react/custom-text-formatter-guide.mdx index 689059ced..c8487faf3 100644 --- a/ui-kit/react/custom-text-formatter-guide.mdx +++ b/ui-kit/react/custom-text-formatter-guide.mdx @@ -3,15 +3,15 @@ title: "Custom Text Formatter" 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** - -- **Key component:** `CometChatTextFormatter` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key class:** `CometChatTextFormatter` (abstract base class for custom formatters) +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Purpose:** Extend to create custom inline text patterns with regex, styling, and callbacks +- **Features:** Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [ShortCut Formatter](/ui-kit/react/shortcut-formatter-guide) | [Mentions Formatter](/ui-kit/react/mentions-formatter-guide) | [All Guides](/ui-kit/react/guide-overview) + ## Overview diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx index ad0c3553b..7ec01ddcb 100644 --- a/ui-kit/react/events.mdx +++ b/ui-kit/react/events.mdx @@ -3,20 +3,12 @@ title: "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** - -**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. - + +- **Package:** `@cometchat/chat-uikit-react` +- **Event categories:** `CometChatConversationEvents` (deleted, updated), `CometChatUserEvents` (blocked/unblocked), `CometChatGroupEvents` (created, deleted, member changes), `CometChatMessageEvents` (sent, edited, replied), `CometChatCallEvents` (outgoing, accepted, rejected, ended) +- **UI events:** Active chat changed +- **Purpose:** Decoupled communication between UI Kit components — subscribe to events to react to changes without direct component references + ## Overview diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx index 08cb087ef..83c1c7d64 100644 --- a/ui-kit/react/extensions.mdx +++ b/ui-kit/react/extensions.mdx @@ -3,28 +3,13 @@ title: "Extensions" description: "Overview of CometChat's extensions grouped by Dashboard categories (User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features) and how they auto-integrate into React UI Kit components." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -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: User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features - - - -**AI Agent Component Spec** - + - **Package:** `@cometchat/chat-uikit-react` -- **Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + Extensions enabled in Dashboard -- **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 - +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) +- **Extension categories:** User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features +- **Key components:** `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/react/message-list) (Translation, Link Preview, Thumbnails) +- **Activation:** Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required + ## Overview diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index c68911c4a..e7203041b 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -51,38 +51,15 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; - -// Requires a CometChat.Group object - - -// With common props - console.log("Selected:", groupMember)} - selectionMode={SelectionMode.none} -/> -``` -What this does: Shows the code for this step. - - - -**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` - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `group: CometChat.Group` (required), `onItemClick: (member: CometChat.GroupMember) => void`, `selectionMode: SelectionMode`, `groupMemberRequestBuilder: CometChat.GroupMembersRequestBuilder` +- **CSS class:** `.cometchat-group-members` +- **Events:** `CometChatGroupEvents` + ### Overview diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 8e65b942e..6260ad9e3 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -43,37 +43,14 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* 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 - console.log("Selected:", group)} - hideSearch={false} - selectionMode={SelectionMode.none} -/> -``` -What this does: Shows the code for this step. - - - -**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) - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatGroups } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `onItemClick: (group: CometChat.Group) => void`, `selectionMode: SelectionMode`, `groupsRequestBuilder: CometChat.GroupsRequestBuilder`, `hideSearch: boolean`, `hideGroupType: boolean` +- **CSS class:** `.cometchat-groups` + ### Overview diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx index b9dd84b62..decaeebd7 100644 --- a/ui-kit/react/guide-block-unblock-user.mdx +++ b/ui-kit/react/guide-block-unblock-user.mdx @@ -4,15 +4,15 @@ sidebarTitle: "Block/Unblock Users" 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** - -- **Key component:** `CometChatMessages` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key components:** `CometChatMessages` — uses `CometChat.blockUsers()` / `CometChat.unblockUsers()` SDK methods +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Events:** `CometChatUserEvents.ccUserBlocked`, `CometChatUserEvents.ccUserUnblocked` +- **UI helpers:** `CometChatConfirmDialog`, `CometChatToast` - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [All Guides](/ui-kit/react/guide-overview) + Implement user blocking functionality to prevent unwanted communication in your React chat app. diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx index 285582530..f35c4e5ae 100644 --- a/ui-kit/react/guide-call-log-details.mdx +++ b/ui-kit/react/guide-call-log-details.mdx @@ -4,15 +4,14 @@ sidebarTitle: "Call Log Details" 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** - -- **Key component:** `CometChatCallLogs + CometChatCallDetails` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Packages:** `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` +- **Key components:** `CometChatCallDetails`, `CometChatCallDetailsInfo`, `CometChatCallDetailsParticipants`, `CometChatCallDetailsRecording` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Calls SDK installed +- **Purpose:** Detailed call insights screen with metadata, participants, and recordings - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [All Guides](/ui-kit/react/guide-overview) + Display comprehensive call information and history when users select calls from the calls tab in your React chat app. diff --git a/ui-kit/react/guide-group-chat.mdx b/ui-kit/react/guide-group-chat.mdx index d59bc06ed..c9c232af6 100644 --- a/ui-kit/react/guide-group-chat.mdx +++ b/ui-kit/react/guide-group-chat.mdx @@ -4,15 +4,14 @@ sidebarTitle: "Group Chat" 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** - -- **Key component:** `CometChatGroups + CometChatGroupMembers` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key components:** `CometChatGroups`, `CometChatGroupMembers`, `CometChatCreateGroup`, `CometChatJoinGroup` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Features:** Create public/private/password-protected groups, manage members, roles, ownership transfer - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [All Guides](/ui-kit/react/guide-overview) + Implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app. diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx index c091babdc..4054ae49e 100644 --- a/ui-kit/react/guide-message-privately.mdx +++ b/ui-kit/react/guide-message-privately.mdx @@ -4,15 +4,14 @@ sidebarTitle: "Message Privately" 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** - -- **Key component:** `CometChatMessages + CometChatGroupMembers` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key components:** `CometChatMessages`, `CometChatGroupMembers`, `CometChatMessageComposer`, `CometChatMessageList`, `CometChatMessageHeader` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Purpose:** Launch a direct 1:1 chat from a group member profile - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [All Guides](/ui-kit/react/guide-overview) + Enable users to initiate private conversations with group members directly from group chat interfaces. diff --git a/ui-kit/react/guide-new-chat.mdx b/ui-kit/react/guide-new-chat.mdx index 87dd97d2d..d9a341c26 100644 --- a/ui-kit/react/guide-new-chat.mdx +++ b/ui-kit/react/guide-new-chat.mdx @@ -4,15 +4,14 @@ sidebarTitle: "New Chat" 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** - -- **Key component:** `CometChatUsers + CometChatGroups` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key components:** `CometChatUsers`, `CometChatGroups`, `CometChatJoinGroup`, `CometChatSelector` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Purpose:** Unified new chat entry point for starting 1:1 or group conversations - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [All Guides](/ui-kit/react/guide-overview) + Enable users to create new conversations with individual users or join existing groups in your React chat app. diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx index 656949187..d619e5f0b 100644 --- a/ui-kit/react/guide-overview.mdx +++ b/ui-kit/react/guide-overview.mdx @@ -4,15 +4,13 @@ sidebarTitle: "Overview" 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 guides for the React UI Kit. Each guide shows how to implement a specific capability end-to-end. - + +- **Package:** `@cometchat/chat-uikit-react` +- **Purpose:** Index of task-oriented feature guides for the React UI Kit - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) - **Components:** [Components Overview](/ui-kit/react/components-overview) - +- **Guides:** [Block/Unblock](/ui-kit/react/guide-block-unblock-user) | [Call Log Details](/ui-kit/react/guide-call-log-details) | [Group Chat](/ui-kit/react/guide-group-chat) | [Message Privately](/ui-kit/react/guide-message-privately) | [New Chat](/ui-kit/react/guide-new-chat) | [Search Messages](/ui-kit/react/guide-search-messages) | [Threaded Messages](/ui-kit/react/guide-threaded-messages) + > This page indexes focused, task‑oriented feature guides for the React UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI components. diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx index f3201162b..97bdf7bf2 100644 --- a/ui-kit/react/guide-search-messages.mdx +++ b/ui-kit/react/guide-search-messages.mdx @@ -4,15 +4,14 @@ sidebarTitle: "Search Messages" 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** - -- **Key component:** `CometChatSearchMessages + CometChatMessageList` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key components:** `CometChatSearchMessages`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Purpose:** Full-text message search across conversations with result routing and navigation - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [All Guides](/ui-kit/react/guide-overview) + Enable users to search messages within conversations and group chats using CometChat's React UI Kit. diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx index 0c58c9490..11c6f7e05 100644 --- a/ui-kit/react/guide-threaded-messages.mdx +++ b/ui-kit/react/guide-threaded-messages.mdx @@ -4,15 +4,15 @@ sidebarTitle: "Threaded Messages" 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** - -- **Key component:** `CometChatThreadHeader` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key components:** `CometChatThreadedMessages`, `CometChatThreadHeader`, `CometChatMessageList`, `CometChatMessageComposer` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Purpose:** Threaded message replies with parent context, reply list, and focused thread composer +- **Entry point:** `CometChatMessages.onThreadRepliesClick` opens thread view from group messages - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [All Guides](/ui-kit/react/guide-overview) + Enable organized threaded conversations within group chats using CometChat's React UI Kit. diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index 4ba2e4318..76f5dd2d2 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -40,37 +40,15 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; - -// Minimal usage — auto-detects incoming calls - - -// With custom handlers - console.log("Call accepted")} - onDecline={() => console.log("Call declined")} - disableSoundForCalls={false} -/> -``` -What this does: Shows the code for this step. - - - -**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` - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` — auto-detects incoming calls when mounted at app root +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed +- **Key props:** `onAccept` (callback), `onDecline` (callback), `call` (CometChat.Call), `disableSoundForCalls` (boolean), `callSettingsBuilder` (function) +- **CSS class:** `.cometchat-incoming-call` +- **Events:** `ccCallRejected`, `ccCallAccepted`, `ccCallEnded` + ### Overview diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx index bfd7be367..42ca888c2 100644 --- a/ui-kit/react/localize.mdx +++ b/ui-kit/react/localize.mdx @@ -4,33 +4,16 @@ sidebarTitle: "Localize" 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** - -```javascript -import { CometChatLocalize } from "@cometchat/chat-uikit-react"; - -// Set language -CometChatLocalize.setCurrentLanguage("fr"); - -// Init with full config -CometChatLocalize.init({ - language: "es", - fallbackLanguage: "en-US", - disableAutoDetection: false, -}); - -// Add custom translations -CometChatLocalize.addTranslation({ - "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) - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatLocalize } from "@cometchat/chat-uikit-react";` +- **Set language:** `CometChatLocalize.setCurrentLanguage("fr")` +- **Init with config:** `CometChatLocalize.init({ language: "es", fallbackLanguage: "en-US", disableAutoDetection: false })` +- **Add translations:** `CometChatLocalize.addTranslation({ "en-US": { "welcome_message": "Welcome!" } })` +- **19 supported languages:** en-US, en-GB, nl, fr, de, hi, it, ja, ko, pt, ru, es, tr, zh, zh-TW, ms, sv, lt, hu +- **Date formatting:** Use `CalendarObject` for custom date/time patterns +- **Source:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts) + ## **Overview** diff --git a/ui-kit/react/mentions-formatter-guide.mdx b/ui-kit/react/mentions-formatter-guide.mdx index b3ce59808..1d0626569 100644 --- a/ui-kit/react/mentions-formatter-guide.mdx +++ b/ui-kit/react/mentions-formatter-guide.mdx @@ -3,15 +3,14 @@ title: "Mentions Formatter" 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** - -- **Key component:** `CometChatMentionsFormatter` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key class:** `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Purpose:** Format @mentions with styled tokens, suggestion list, and click handling for users and group members - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) | [All Guides](/ui-kit/react/guide-overview) + ## Overview diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index 8f12ec79b..647e4e792 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -51,33 +51,15 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -// For a user chat - - -// For a group chat - -``` -What this does: Shows the code for this step. - - - -**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` + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` or `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `text: string`, `parentMessageId: number`, `hideVoiceRecording: boolean` +- **CSS class:** `.cometchat-message-composer` +- **Events:** `CometChatMessageEvents` + ### Overview diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 4e6d11925..6503f0673 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -50,34 +50,14 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; - -// For a user chat - - -// For a group chat - -``` -What this does: Shows the code for this step. - - - -**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) - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` or `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `hideBackButton: boolean`, `hideUserStatus: boolean` +- **CSS class:** `.cometchat-message-header` + ### Overview diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index b393350bd..e4b6ac924 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -51,34 +51,15 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -// For a user chat - - -// For a group chat - -``` -What this does: Shows the code for this step. - - - -**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` - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatMessageList } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` or `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `messagesRequestBuilder: CometChat.MessagesRequestBuilder`, `templates: CometChatMessageTemplate[]`, `hideReceipts: boolean` +- **CSS class:** `.cometchat-message-list` +- **Events:** `CometChatMessageEvents` + ### Overview diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index bf62b8d42..7ae56db11 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -43,33 +43,14 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react"; -import { ChatConfigurator } from "@cometchat/chat-uikit-react"; - -// Get default templates -const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); - -// Pass custom templates to MessageList - -``` -What this does: Shows the code for this step. - - - -**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 - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react";` +- **Usage:** Pass `templates` prop to `CometChatMessageList` — get defaults via `ChatConfigurator.getDataSource().getAllMessageTemplates()` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key properties:** `category: string`, `type: string`, `contentView`, `bubbleView`, `headerView`, `footerView` +- **Related:** Used with [CometChatMessageList](/ui-kit/react/message-list) via the `templates` prop + ### Overview diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx index 3e4f2556e..698b18337 100644 --- a/ui-kit/react/methods.mdx +++ b/ui-kit/react/methods.mdx @@ -3,37 +3,15 @@ title: "Methods" description: "Reference for CometChat React UI Kit methods including init, login, logout, and message-sending wrappers." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```javascript -import { CometChatUIKit } from "@cometchat/chat-uikit-react"; - -// Init -CometChatUIKit.init(UIKitSettings); - -// Login with UID (dev only) -CometChatUIKit.login("UID"); - -// Login with Auth Token (production) -CometChatUIKit.loginWithAuthToken("AUTH_TOKEN"); - -// Logout -CometChatUIKit.logout(); - -// Get logged-in user -CometChatUIKit.getLoggedinUser(); - -// Create user -CometChatUIKit.createUser(user); - -// Send messages -CometChatUIKit.sendTextMessage(textMessage); -CometChatUIKit.sendMediaMessage(mediaMessage); -CometChatUIKit.sendCustomMessage(customMessage); -``` - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatUIKit } from "@cometchat/chat-uikit-react";` +- **Init:** `CometChatUIKit.init(UIKitSettings)` +- **Login (dev):** `CometChatUIKit.login("UID")` | **Login (prod):** `CometChatUIKit.loginWithAuthToken("AUTH_TOKEN")` +- **Other methods:** `CometChatUIKit.logout()`, `CometChatUIKit.getLoggedinUser()`, `CometChatUIKit.createUser(user)` +- **Send messages:** `CometChatUIKit.sendTextMessage()`, `CometChatUIKit.sendMediaMessage()`, `CometChatUIKit.sendCustomMessage()` +- **Note:** Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing + ## Overview diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index 4d627f388..824fa8712 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -4,15 +4,13 @@ sidebarTitle: "Conversation List + Message View" 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** - + +- **Package:** `@cometchat/chat-uikit-react` - **Framework:** Next.js -- **Key components:** `CometChatConversations + CometChatMessageList` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Key components:** `CometChatConversations` + `CometChatMessageList` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` - **Parent guide:** [Next.js Integration](/ui-kit/react/next-js-integration) - + The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**. diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx index 369804176..d103a2161 100644 --- a/ui-kit/react/next-js-integration.mdx +++ b/ui-kit/react/next-js-integration.mdx @@ -4,32 +4,14 @@ sidebarTitle: "Integration" 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 */} - -**Quick Reference for AI Agents & Developers** - -```bash -# Install -npm install @cometchat/chat-uikit-react -``` - -```tsx -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); - -CometChatUIKit.init(UIKitSettings); -CometChatUIKit.login("UID"); -``` - -- **Next.js** → This page -- **React.js** → [React.js Integration](/ui-kit/react/react-js-integration) -- **All Components** → [Components Overview](/ui-kit/react/components-overview) - + +- **Package:** `@cometchat/chat-uikit-react` — `npm install @cometchat/chat-uikit-react` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering +- **SSR:** CometChat requires browser APIs — use `'use client'` directive or dynamic imports with `ssr: false` +- **Init code:** `new UIKitSettingsBuilder().setAppId("APP_ID").setRegion("REGION").setAuthKey("AUTH_KEY").build()` +- **Framework:** Next.js (this page) | [React.js](/ui-kit/react/react-js-integration) | [React Router](/ui-kit/react/react-router-integration) | [Astro](/ui-kit/react/astro-integration) +- **All components:** [Components Overview](/ui-kit/react/components-overview) + The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities. diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx index 180a4176a..97884527e 100644 --- a/ui-kit/react/next-one-to-one-chat.mdx +++ b/ui-kit/react/next-one-to-one-chat.mdx @@ -4,15 +4,13 @@ sidebarTitle: "One To One/Group Chat" 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** - + +- **Package:** `@cometchat/chat-uikit-react` - **Framework:** Next.js -- **Key components:** `CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Key components:** `CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` - **Parent guide:** [Next.js Integration](/ui-kit/react/next-js-integration) - + The **One-to-One Chat** feature provides a streamlined **direct messaging interface**, making it ideal for **support chats, dating apps, and private messaging platforms**. This setup eliminates distractions by focusing solely on a **dedicated chat window**. diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index 0369d9b81..e739c9607 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -4,15 +4,13 @@ sidebarTitle: "Tab Based Chat Experience" description: "Build a tab-based messaging UI with chats, calls, users, and groups in Next.js with CometChat UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - + +- **Package:** `@cometchat/chat-uikit-react` - **Framework:** Next.js -- **Key components:** `CometChatConversations + CometChatCallLogs + CometChatUsers + CometChatGroups` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Key components:** `CometChatConversations` + `CometChatCallLogs` + `CometChatUsers` + `CometChatGroups` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` - **Parent guide:** [Next.js Integration](/ui-kit/react/next-js-integration) - + This guide walks you through creating a **tab-based messaging UI** using **React** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation. diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index 3d101d88b..ea5ee4399 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -49,38 +49,14 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; - -// 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} -/> -``` -What this does: Shows the code for this step. - - - -**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 - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` — requires a `CometChat.Call` object from `CometChat.initiateCall()` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed +- **Key props:** `call` (CometChat.Call, required), `onCallCanceled` (callback), `disableSoundForCalls` (boolean), `titleView` (JSX), `subtitleView` (JSX) +- **CSS class:** `.cometchat-outgoing-call` + ### Overview diff --git a/ui-kit/react/property-changes.mdx b/ui-kit/react/property-changes.mdx index 93fd4dd94..f995b9276 100644 --- a/ui-kit/react/property-changes.mdx +++ b/ui-kit/react/property-changes.mdx @@ -2,44 +2,13 @@ title: "Property Changes" 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 */} - -**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 - -``` - + +- **Migration scope:** Property and method changes between v5 and v6 for all components +- **Components affected:** Conversations, Users, Groups, Group Members, Message Header, Message List, Message Composer, Incoming Call, Outgoing Call, Call Buttons, Call Logs, CometChatLocalize +- **Key pattern change:** `datePattern` (DatePatterns) replaced with `CalendarObject`-based props across all components +- **Localization:** `setLocale` → `setCurrentLanguage`, `localize` → `getLocalizedString` +- **Full migration guide:** [Upgrading from v5](/ui-kit/react/upgrading-from-v5) + ## Conversations diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index 35f5307ac..85fbea2a7 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -4,15 +4,13 @@ sidebarTitle: "Conversation List + Message View" 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** - + +- **Package:** `@cometchat/chat-uikit-react` - **Framework:** React.js -- **Key components:** `CometChatConversations + CometChatMessageList` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Key components:** `CometChatConversations` + `CometChatMessageList` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` - **Parent guide:** [React.js Integration](/ui-kit/react/react-js-integration) - + The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**. diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx index 113ec6d0e..0425e6112 100644 --- a/ui-kit/react/react-js-integration.mdx +++ b/ui-kit/react/react-js-integration.mdx @@ -4,32 +4,13 @@ sidebarTitle: "Integration" 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 */} - -**Quick Reference for AI Agents & Developers** - -```bash -# Install -npm install @cometchat/chat-uikit-react -``` - -```tsx -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); - -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) - + +- **Package:** `@cometchat/chat-uikit-react` — `npm install @cometchat/chat-uikit-react` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering +- **Init code:** `new UIKitSettingsBuilder().setAppId("APP_ID").setRegion("REGION").setAuthKey("AUTH_KEY").build()` +- **Framework:** React.js (this page) | [Next.js](/ui-kit/react/next-js-integration) | [React Router](/ui-kit/react/react-router-integration) | [Astro](/ui-kit/react/astro-integration) +- **All components:** [Components Overview](/ui-kit/react/components-overview) + The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities. diff --git a/ui-kit/react/react-one-to-one-chat.mdx b/ui-kit/react/react-one-to-one-chat.mdx index 7ed59f065..296c69b74 100644 --- a/ui-kit/react/react-one-to-one-chat.mdx +++ b/ui-kit/react/react-one-to-one-chat.mdx @@ -4,15 +4,13 @@ sidebarTitle: "One To One/Group Chat" description: "Build a focused one-to-one or group chat experience in React.js with CometChat UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - + +- **Package:** `@cometchat/chat-uikit-react` - **Framework:** React.js -- **Key components:** `CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Key components:** `CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` - **Parent guide:** [React.js Integration](/ui-kit/react/react-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**. diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx index 353176a39..ef1dbb883 100644 --- a/ui-kit/react/react-router-conversation.mdx +++ b/ui-kit/react/react-router-conversation.mdx @@ -4,15 +4,13 @@ sidebarTitle: "Conversation List + Message View" description: "Build a two-panel conversation list + message view layout in React Router with CometChat UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - + +- **Package:** `@cometchat/chat-uikit-react` - **Framework:** React Router -- **Key components:** `CometChatConversations + CometChatMessageList` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Key components:** `CometChatConversations` + `CometChatMessageList` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` - **Parent guide:** [React Router Integration](/ui-kit/react/react-router-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**. diff --git a/ui-kit/react/react-router-integration.mdx b/ui-kit/react/react-router-integration.mdx index ee32d4d16..b74bcf1a6 100644 --- a/ui-kit/react/react-router-integration.mdx +++ b/ui-kit/react/react-router-integration.mdx @@ -4,33 +4,13 @@ sidebarTitle: "Integration" description: "Step-by-step guide to integrate CometChat React UI Kit into your React Router application." --- -{/* 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"; - -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); - -CometChatUIKit.init(UIKitSettings); -CometChatUIKit.login("UID"); -``` - -- **React Router** → 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) - + +- **Package:** `@cometchat/chat-uikit-react` — `npm install @cometchat/chat-uikit-react` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering +- **Init code:** `new UIKitSettingsBuilder().setAppId("APP_ID").setRegion("REGION").setAuthKey("AUTH_KEY").build()` +- **Framework:** React Router (this page) | [React.js](/ui-kit/react/react-js-integration) | [Next.js](/ui-kit/react/next-js-integration) | [Astro](/ui-kit/react/astro-integration) +- **All components:** [Components Overview](/ui-kit/react/components-overview) + The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities. 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 07c926985..d5b47f4e4 100644 --- a/ui-kit/react/react-router-one-to-one-chat.mdx +++ b/ui-kit/react/react-router-one-to-one-chat.mdx @@ -4,15 +4,13 @@ sidebarTitle: "One To One/Group Chat" description: "Build a focused one-to-one or group chat experience in React Router with CometChat UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - + +- **Package:** `@cometchat/chat-uikit-react` - **Framework:** React Router -- **Key components:** `CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Key components:** `CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` - **Parent guide:** [React Router Integration](/ui-kit/react/react-router-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**. diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx index be4a160d8..251a89708 100644 --- a/ui-kit/react/react-router-tab-based-chat.mdx +++ b/ui-kit/react/react-router-tab-based-chat.mdx @@ -4,15 +4,13 @@ sidebarTitle: "Tab Based Chat Experience" description: "Build a tab-based messaging UI with chats, calls, users, and groups in React Router with CometChat UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - + +- **Package:** `@cometchat/chat-uikit-react` - **Framework:** React Router -- **Key components:** `CometChatConversations + CometChatCallLogs + CometChatUsers + CometChatGroups` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Key components:** `CometChatConversations` + `CometChatCallLogs` + `CometChatUsers` + `CometChatGroups` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` - **Parent guide:** [React Router Integration](/ui-kit/react/react-router-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. diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx index ba43aa008..bad3f3695 100644 --- a/ui-kit/react/react-tab-based-chat.mdx +++ b/ui-kit/react/react-tab-based-chat.mdx @@ -4,15 +4,13 @@ sidebarTitle: "Tab Based Chat Experience" description: "Build a tab-based messaging UI with chats, calls, users, and groups in React.js with CometChat UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - + +- **Package:** `@cometchat/chat-uikit-react` - **Framework:** React.js -- **Key components:** `CometChatConversations + CometChatCallLogs + CometChatUsers + CometChatGroups` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Key components:** `CometChatConversations` + `CometChatCallLogs` + `CometChatUsers` + `CometChatGroups` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` - **Parent guide:** [React.js Integration](/ui-kit/react/react-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. diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index b40630c97..00d79628e 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -39,37 +39,14 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* 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 - console.log("Selected:", conversation)} - onMessageClicked={(message) => console.log("Message:", message)} - hideBackButton={false} -/> -``` -What this does: Shows the code for this step. - - - -**AI Agent Component Spec** - -**Package:** `@cometchat/chat-uikit-react` -**Import:** `import { CometChatSearch } from "@cometchat/chat-uikit-react";` -**Minimal JSX:** `` -**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` -**Key props:** `onConversationClicked` (callback), `onMessageClicked` (callback), `searchFilters` (array), `searchIn` (array), `hideBackButton` (boolean) -**CSS class:** `.cometchat-search` -**Events:** none - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatSearch } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `onConversationClicked` (callback), `onMessageClicked` (callback), `searchFilters` (array), `searchIn` (array), `hideBackButton` (boolean) +- **CSS class:** `.cometchat-search` + ### Overview diff --git a/ui-kit/react/shortcut-formatter-guide.mdx b/ui-kit/react/shortcut-formatter-guide.mdx index 1fb45ff46..b40bdc96c 100644 --- a/ui-kit/react/shortcut-formatter-guide.mdx +++ b/ui-kit/react/shortcut-formatter-guide.mdx @@ -3,15 +3,14 @@ title: "ShortCut Formatter" description: "Implement !shortcut style text expansions with extension APIs or dialogs in CometChat React UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -- **Key component:** `ShortcutFormatter (extends CometChatTextFormatter)` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key class:** `ShortcutFormatter` (extends `CometChatTextFormatter`) +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Track character:** `!` — triggers shortcut expansion in the message composer - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) | [All Guides](/ui-kit/react/guide-overview) + ## Overview diff --git a/ui-kit/react/sound-manager.mdx b/ui-kit/react/sound-manager.mdx index f904813ab..3f19d441c 100644 --- a/ui-kit/react/sound-manager.mdx +++ b/ui-kit/react/sound-manager.mdx @@ -3,26 +3,13 @@ title: "Sound Manager" description: "Manage and customize audio cues for incoming/outgoing calls and messages in CometChat React UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```javascript -import { CometChatSoundManager, Sound } from "@cometchat/chat-uikit-react"; - -// Play default incoming call sound -CometChatSoundManager.play(Sound.incomingCall); - -// Play custom sound -CometChatSoundManager.play(Sound.incomingCall, "path/to/custom.mp3"); - -// Pause current sound -CometChatSoundManager.pause(); -``` - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatSoundManager, Sound } from "@cometchat/chat-uikit-react";` +- **Play sound:** `CometChatSoundManager.play(Sound.incomingCall)` — or pass custom MP3 path as second arg +- **Pause sound:** `CometChatSoundManager.pause()` - **Sound events:** `Sound.incomingCall`, `Sound.outgoingCall`, `Sound.incomingMessage`, `Sound.outgoingMessage` -- Supports custom MP3 file paths - + ## Overview diff --git a/ui-kit/react/theme.mdx b/ui-kit/react/theme.mdx index 273fdc2f7..3f762549e 100644 --- a/ui-kit/react/theme.mdx +++ b/ui-kit/react/theme.mdx @@ -4,44 +4,16 @@ sidebarTitle: "Overview" description: "Customize the CometChat React UI Kit appearance using CSS variables for colors, fonts, dark mode, and component-specific styling." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```css -/* 1. Import base stylesheet in App.css */ -@import url("@cometchat/chat-uikit-react/css-variables.css"); - -/* 2. Override global theme */ -.cometchat { - --cometchat-primary-color: #f76808; - --cometchat-font-family: "Inter", sans-serif; -} - -/* 3. Override per-component */ -.cometchat .cometchat-conversations { - --cometchat-primary-color: #e63946; -} - -/* 4. Dark mode */ -.cometchat-root[data-theme="dark"] .cometchat { - --cometchat-primary-color: #f76808; -} -``` - - - -**AI Agent Styling Spec** - -**Goal:** Customize UI Kit appearance (colors, fonts, dark mode) -**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-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) - + +- **Goal:** Customize UI Kit appearance (colors, fonts, dark mode) +- **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-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) + 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. diff --git a/ui-kit/react/theme/color-resources.mdx b/ui-kit/react/theme/color-resources.mdx index d0988fee0..e70687a03 100644 --- a/ui-kit/react/theme/color-resources.mdx +++ b/ui-kit/react/theme/color-resources.mdx @@ -3,39 +3,15 @@ title: "Color Resources" description: "Complete reference of all CSS variables and color tokens available in the CometChat React UI Kit, including primary, neutral, and semantic color palettes for light and dark modes." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```css -/* Override primary brand color globally */ -.cometchat { - --cometchat-primary-color: #f76808; -} - -/* Override for dark mode */ -.cometchat[data-theme="dark"] { - --cometchat-primary-color: #f76808; -} - -/* Override a specific component's colors */ -.cometchat-conversations { - --cometchat-primary-color: #e63946; -} -``` - - - -**AI Agent Styling Spec** - -**Goal:** Override UI Kit color tokens to match your brand -**Where:** `App.css` (global) — import in app entry via `import "./App.css";` -**Scope:** Override variables on `.cometchat` (global) or `.cometchat-` (component-specific) -**Key tokens:** `--cometchat-primary-color` (brand/accent), `--cometchat-neutral-color-300` (incoming bubbles), `--cometchat-background-color-01` (main background) -**Dark mode:** Override in `.cometchat[data-theme="dark"]` selector -**Source file:** [css-variables.css on GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css) -**Constraints:** Global CSS only (no CSS Modules), no `!important`, component-level overrides take precedence over global - + +- **Goal:** Override UI Kit color tokens to match your brand +- **Where:** `App.css` (global) — import in app entry via `import "./App.css";` +- **Scope:** Override variables on `.cometchat` (global) or `.cometchat-` (component-specific) +- **Key tokens:** `--cometchat-primary-color` (brand/accent), `--cometchat-neutral-color-300` (incoming bubbles), `--cometchat-background-color-01` (main background) +- **Dark mode:** Override in `.cometchat[data-theme="dark"]` selector +- **Source file:** [css-variables.css on GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css) +- **Constraints:** Global CSS only (no CSS Modules), no `!important`, component-level overrides take precedence over global + ## Introduction diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx index 6c90c5b51..108a38031 100644 --- a/ui-kit/react/theme/message-bubble-styling.mdx +++ b/ui-kit/react/theme/message-bubble-styling.mdx @@ -3,40 +3,14 @@ title: "Message Bubble Styling" description: "Customize incoming and outgoing message bubble colors, backgrounds, and styles using CSS variables and class selectors in the CometChat React UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```css -/* Override outgoing bubble color */ -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { - --cometchat-primary-color: #f76808; -} - -/* Override incoming bubble color */ -.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body { - --cometchat-neutral-color-300: #feede1; -} - -/* Target a specific message type (e.g., image) */ -.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message { - --cometchat-primary-color: #f76808; -} -``` - - - -**AI Agent Styling Spec** - -**Goal:** Customize message bubble appearance (colors, backgrounds) per direction and message type -**Where:** `App.css` (global) — import in app entry via `import "./App.css";` -**Scope:** All selectors must be under `.cometchat` root -**Base selector:** `.cometchat .cometchat-message-bubble-(incoming|outgoing) .cometchat-message-bubble__body` -**Type modifier:** Append `.cometchat-message-bubble__-message` to target specific types -**Valid types:** `text`, `image`, `video`, `audio`, `file`, `delete`, `meeting`, `whiteboard`, `document`, `poll`, `sticker` -**Key tokens:** `--cometchat-primary-color` (outgoing bg), `--cometchat-neutral-color-300` (incoming bg), `--cometchat-extended-primary-color-900` (outgoing shade) -**Constraints:** Global CSS only (no CSS Modules), no `!important`, type selectors override generic bubble selectors - + +- **Goal:** Customize message bubble appearance (colors, backgrounds) per direction and message type +- **Where:** `App.css` (global) — import in app entry via `import "./App.css";` +- **Base selector:** `.cometchat .cometchat-message-bubble-(incoming|outgoing) .cometchat-message-bubble__body` +- **Type modifier:** Append `.cometchat-message-bubble__-message` to target specific types (`text`, `image`, `video`, `audio`, `file`, `delete`, `meeting`, `whiteboard`, `document`, `poll`, `sticker`) +- **Key tokens:** `--cometchat-primary-color` (outgoing bg), `--cometchat-neutral-color-300` (incoming bg), `--cometchat-extended-primary-color-900` (outgoing shade) +- **Constraints:** Global CSS only (no CSS Modules), no `!important`, type selectors override generic bubble selectors + ## Introduction diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index cc13d8fbb..a54509f76 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -40,30 +40,14 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; - - -``` -What this does: Shows the code for this step. - - - -**AI Agent Component Spec** - -**Package:** `@cometchat/chat-uikit-react` -**Import:** `import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";` -**Minimal JSX:** `` -**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` -**Key props:** `parentMessage: CometChat.BaseMessage` (required) -**CSS class:** `.cometchat-thread-header` -**Events:** None - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `parentMessage: CometChat.BaseMessage` (required) +- **CSS class:** `.cometchat-thread-header` + ### Overview diff --git a/ui-kit/react/upgrading-from-v5.mdx b/ui-kit/react/upgrading-from-v5.mdx index f2f0b01e1..128fa3d2c 100644 --- a/ui-kit/react/upgrading-from-v5.mdx +++ b/ui-kit/react/upgrading-from-v5.mdx @@ -2,39 +2,14 @@ title: "Upgrading From V5" description: "Migration guide for upgrading from CometChat React UI Kit v5 to v6 with breaking changes and new patterns." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -Key changes in v6: -- New package: `@cometchat/chat-uikit-react` (replaces v5 packages) -- New init pattern: `UIKitSettingsBuilder` + `CometChatUIKit.init()` -- CSS variables for theming (replaces inline style objects) -- New localization system with `CometChatLocalize` -- See [Property Changes](/ui-kit/react/property-changes) for detailed prop/method renames - - - -{/* 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" }), -}); -``` - + +- **Package:** `@cometchat/chat-uikit-react` (replaces v5 packages) +- **New init pattern:** `UIKitSettingsBuilder` + `CometChatUIKit.init()` +- **Theming:** CSS variables replace inline style objects. See [Theming](/ui-kit/react/theme) +- **Localization:** `CometChatLocalize.init(settings)` — language codes changed (e.g., `en` → `en-US`), new `CalendarObject` for date formatting +- **Key changes:** `setLocale` → `setCurrentLanguage`, `localize` → `getLocalizedString`, `datePattern` → `CalendarObject`-based props +- **Detailed prop changes:** [Property Changes](/ui-kit/react/property-changes) + ## Introduction diff --git a/ui-kit/react/url-formatter-guide.mdx b/ui-kit/react/url-formatter-guide.mdx index 30c2983ea..7f3fe58c3 100644 --- a/ui-kit/react/url-formatter-guide.mdx +++ b/ui-kit/react/url-formatter-guide.mdx @@ -3,15 +3,14 @@ title: "URL Formatter" description: "Detect and style plain URLs as clickable links with optional tracking logic in CometChat React UI Kit." --- -{/* TL;DR for Agents and Quick Reference */} - -**Quick Reference for AI Agents & Developers** - -- **Key component:** `CometChatUrlsFormatter` -- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first + +- **Package:** `@cometchat/chat-uikit-react` +- **Key class:** `CometChatUrlsFormatter` (extends `CometChatTextFormatter`) +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Purpose:** Auto-detects URLs in text messages and converts them to clickable links - **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) - +- **Related:** [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) | [All Guides](/ui-kit/react/guide-overview) + ## Overview diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index da1cc9995..344d66fe6 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -43,38 +43,14 @@ What this does: Renders the minimal version of the component. ## Implementation -{/* 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 - console.log("Selected:", user)} - hideSearch={false} - showSectionHeader={true} - selectionMode={SelectionMode.none} -/> -``` -What this does: Shows the code for this step. - - - -**AI Agent Component Spec** - -**Package:** `@cometchat/chat-uikit-react` -**Import:** `import { CometChatUsers } from "@cometchat/chat-uikit-react";` -**Minimal JSX:** `` -**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` -**Key props:** `onItemClick: (user: CometChat.User) => void`, `selectionMode: SelectionMode`, `usersRequestBuilder: CometChat.UsersRequestBuilder`, `hideSearch: boolean`, `showSectionHeader: boolean` -**CSS class:** `.cometchat-users` -**Events:** None (does not emit events directly) - + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatUsers } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `onItemClick: (user: CometChat.User) => void`, `selectionMode: SelectionMode`, `usersRequestBuilder: CometChat.UsersRequestBuilder`, `hideSearch: boolean`, `showSectionHeader: boolean` +- **CSS class:** `.cometchat-users` + ### Overview From bb5de775eb34ef9f329c09300d3260043aa3f558 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 13:38:52 +0530 Subject: [PATCH 73/84] Update message-composer.mdx --- ui-kit/react/message-composer.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index 647e4e792..55fe5016f 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -59,8 +59,7 @@ What this does: Renders the minimal version of the component. - **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `text: string`, `parentMessageId: number`, `hideVoiceRecording: boolean` - **CSS class:** `.cometchat-message-composer` - **Events:** `CometChatMessageEvents` - - + ### Overview From a1b6e6b5627e0759dd56247ed7387b02d915f35a Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 17:08:42 +0530 Subject: [PATCH 74/84] Update message-bubble-styling.mdx --- ui-kit/react/theme/message-bubble-styling.mdx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx index 108a38031..2cfa6c4cc 100644 --- a/ui-kit/react/theme/message-bubble-styling.mdx +++ b/ui-kit/react/theme/message-bubble-styling.mdx @@ -39,10 +39,17 @@ Use this table to construct the correct CSS selector for any message bubble targ | Specific type (incoming) | `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__-message` | | Action bubbles (no direction) | `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble` | -**Where `` is one of:** `text`, `image`, `video`, `audio`, `file`, `delete`, `meeting` (direct call), `whiteboard`, `document`, `poll`, `sticker` + + +`` + +`` is one of `text`, `image`, `video`, `audio`, `file`, `delete`, `meeting` (direct call), `whiteboard`, `document`, `poll`, `sticker` + -Link Preview bubbles reuse the `text-message` type selector since link previews are rendered inside text messages. +Link Preview Bubbles + +It reuse the `text-message` type selector since link previews are rendered inside text messages. --- From f66307e47e016fc503bfb5483c5cddf1224e8bc5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 17:19:35 +0530 Subject: [PATCH 75/84] Update message-bubble-styling.mdx --- ui-kit/react/theme/message-bubble-styling.mdx | 38 +++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx index 2cfa6c4cc..7a0a4beea 100644 --- a/ui-kit/react/theme/message-bubble-styling.mdx +++ b/ui-kit/react/theme/message-bubble-styling.mdx @@ -101,7 +101,9 @@ Shown below is the default chat interface. #### Outgoing Message Bubbles **Selectors:** -- `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body` +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body +``` **Tokens used:** @@ -132,7 +134,9 @@ Use the following code to achieve the customization shown above. #### Incoming Message Bubbles **Selectors:** -- `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body` +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body +``` **Tokens used:** @@ -161,7 +165,9 @@ Use the following code to achieve the customization shown above. #### All Message Bubbles **Selectors:** -- `.cometchat .cometchat-message-bubble .cometchat-message-bubble__body` +```css +.cometchat .cometchat-message-bubble .cometchat-message-bubble__body +``` **Tokens used:** @@ -232,8 +238,18 @@ CometChat UI Kit includes classes for various message types. Below are examples ### Text Message Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message +``` + + **Tokens used:** @@ -283,8 +299,16 @@ The customized chat interface is displayed below. ### Image Message Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__image-message` + +Outgoing: +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message +``` + +Incoming: +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__image-message +``` **Tokens used:** From 519755b4dc7ccfef6189d37b2af63a93d86b2ab0 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 17:48:32 +0530 Subject: [PATCH 76/84] Update message-bubble-styling.mdx --- ui-kit/react/theme/message-bubble-styling.mdx | 152 +++++++++++++++--- 1 file changed, 127 insertions(+), 25 deletions(-) diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx index 7a0a4beea..a369e9159 100644 --- a/ui-kit/react/theme/message-bubble-styling.mdx +++ b/ui-kit/react/theme/message-bubble-styling.mdx @@ -299,16 +299,18 @@ The customized chat interface is displayed below. ### Image Message Bubble **Selectors:** - -Outgoing: -```css + + +```css .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message ``` - -Incoming: + + ```css .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__image-message ``` + + **Tokens used:** @@ -358,8 +360,18 @@ The customized chat interface is displayed below. ### Video Message Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__video-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__video-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__video-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__video-message +``` + + **Tokens used:** @@ -409,8 +421,18 @@ The customized chat interface is displayed below. ### Audio Message Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__audio-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__audio-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__audio-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__audio-message +``` + + **Tokens used:** @@ -461,8 +483,18 @@ The customized chat interface is displayed below. ### File Message Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__file-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__file-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__file-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__file-message +``` + + **Tokens used:** @@ -513,8 +545,18 @@ The customized chat interface is displayed below. ### Delete Message Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__delete-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__delete-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__delete-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__delete-message +``` + + **Tokens used:** @@ -615,8 +657,18 @@ The customized chat interface is displayed below. Direct call messages use the `meeting-message` type selector (not `call-message`). **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message +``` + + **Tokens used:** @@ -724,8 +776,18 @@ The customized chat interface is displayed below. #### Collaborative Whiteboard Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message +``` + + **Tokens used:** @@ -778,8 +840,18 @@ The customized chat interface is displayed below. #### Collaborative Document Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__document-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__document-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__document-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__document-message +``` + + **Tokens used:** @@ -832,8 +904,18 @@ The customized chat interface is displayed below. #### Polls Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__poll-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__poll-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__poll-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__poll-message +``` + + **Tokens used:** @@ -886,8 +968,18 @@ The customized chat interface is displayed below. #### Stickers Bubble **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message +``` + + **Tokens used:** @@ -939,8 +1031,18 @@ The customized chat interface is displayed below. Link previews render inside text message bubbles, so they use the `text-message` type selector. **Selectors:** -- Outgoing: `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message` -- Incoming: `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message` + + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message +``` + + +```css +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message +``` + + **Tokens used:** From 7109292d4eb831ffd5a4b8e56fd030c5b6ef263f Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 18:10:36 +0530 Subject: [PATCH 77/84] Update core-features.mdx --- ui-kit/react/core-features.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index 55dca1fbd..61dcf4684 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -208,6 +208,13 @@ 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). From 64afaf3cf0ea2da290df43e40046f7a4a5f8f5d7 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 18:15:26 +0530 Subject: [PATCH 78/84] Update components-overview.mdx --- ui-kit/react/components-overview.mdx | 54 ---------------------------- 1 file changed, 54 deletions(-) diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index e056ef7af..b382c4628 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -12,60 +12,6 @@ Browse and understand the full set of CometChat React UI Kit components. This pa - You want to understand the common API patterns across components. - You need to find related pages for customization and theming. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering any component. -- Calls components require `@cometchat/calls-sdk-javascript`. - -## Quick start - -1. Install the UI Kit. - -```bash -npm install @cometchat/chat-uikit-react -``` - -What this does: Installs the React UI Kit package. - -2. Import the components you need. - -```tsx -import { - CometChatConversations, - CometChatMessageList, - CometChatMessageComposer, - CometChatMessageHeader, - CometChatUsers, - CometChatGroups, - CometChatGroupMembers, - CometChatThreadHeader, - CometChatIncomingCall, - CometChatOutgoingCall, - CometChatCallButtons, - CometChatCallLogs, -} from "@cometchat/chat-uikit-react"; -``` - -What this does: Imports the primary UI Kit components into your React module. - -3. Render the components after initialization and login. -4. Use component-specific pages for props, actions, and examples. - -## Core concepts - - -- **Package:** `@cometchat/chat-uikit-react` -- **All components:** [Chat](/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](/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) - - -- Component: A prebuilt UI block that renders a feature (conversations, message list, calls). -- Action: A callback or override that customizes component behavior. -- Event: A UI Kit event emitted for cross-component communication. - ## Implementation ### Component import pattern From 1433f769ba634efcd2545b9469be4a99afe6407b Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 18:24:19 +0530 Subject: [PATCH 79/84] Removed ## Prerequisites, ## Quick start, and ## Core concepts from the listed Components pages. --- ui-kit/react/ai-assistant-chat.mdx | 38 ---------------------- ui-kit/react/call-buttons.mdx | 28 ---------------- ui-kit/react/call-logs.mdx | 26 --------------- ui-kit/react/conversations.mdx | 51 ------------------------------ ui-kit/react/group-members.mdx | 38 ---------------------- ui-kit/react/groups.mdx | 30 ------------------ ui-kit/react/incoming-call.mdx | 27 ---------------- ui-kit/react/message-composer.mdx | 38 ---------------------- ui-kit/react/message-header.mdx | 37 ---------------------- ui-kit/react/message-list.mdx | 38 ---------------------- ui-kit/react/message-template.mdx | 30 ------------------ ui-kit/react/outgoing-call.mdx | 36 --------------------- ui-kit/react/search.mdx | 26 --------------- ui-kit/react/thread-header.mdx | 27 ---------------- ui-kit/react/users.mdx | 30 ------------------ 15 files changed, 500 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 7a70da346..3cee97737 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -11,44 +11,6 @@ Build an AI assistant chat surface with streaming responses and suggestions. - You want streaming responses and suggested prompts. - You need a chat history sidebar for AI conversations. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- A `CometChat.User` representing the AI agent. - -## Quick start - -1. Add the component to your UI. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; - -export default function AIAssistantChatDemo() { - const [agent, setAgent] = React.useState(); - - React.useEffect(() => { - CometChat.getUser("assistant_uid").then((u) => setAgent(u)); - }, []); - - return agent ? : null; -} -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- `user` is required and represents the AI agent. -- Use `streamingSpeed` to control response pace. -- Use `suggestedMessages` to show quick prompts. - ## Implementation diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index 56aeb1a9c..0e1bdf8b0 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -11,34 +11,6 @@ Render voice and video call buttons for a user or group. - You need to start audio or video calls. - You want to hide specific call types. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `@cometchat/calls-sdk-javascript` installed. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- Provide `user` or `group`. - -## Quick start - -1. Add the component to your UI. - -```tsx -import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; - -; -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- Use `user` or `group` to target calls. -- Hide buttons with `hideVoiceCallButton` or `hideVideoCallButton`. - ## Implementation diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index 57193833c..6ad80ad8a 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -11,32 +11,6 @@ Show call history with callbacks and filters. - You want to handle call log item clicks. - You need to customize call back actions. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. - -## Quick start - -1. Add the component to your UI. - -```tsx -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -; -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- Use `onItemClick` and `onCallButtonClicked` for interactions. -- Use `callLogRequestBuilder` for filtering. - ## Implementation diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index bee7d75c3..eed8b0faa 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -13,57 +13,6 @@ Build and customize the conversations list in your React app. This page is for d - You need to filter conversations by type or tags. - You want to customize list items, header, and actions. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- Global CSS available for styling via `.cometchat-conversations`. - -## Quick start - -1. Import the component in `src/ConversationsDemo.tsx`. - -```tsx -import { CometChatConversations } from "@cometchat/chat-uikit-react"; -``` - -What this does: Makes the Conversations component available in your module. - -2. Render the component after init/login. - -```tsx -import React from "react"; -import { CometChatConversations } from "@cometchat/chat-uikit-react"; - -export default function ConversationsDemo() { - return ( -
- -
- ); -} -``` - -What this does: Renders the conversations list UI. - -3. Verify you see a list of conversations with avatar, name, last message, timestamp, and unread badge. - -## Core concepts - - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatConversations } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `onItemClick`, `conversationsRequestBuilder`, `hideReceipts`, `selectionMode`, `activeConversation` -- **CSS class:** `.cometchat-conversations` -- **Events:** `CometChatConversationEvents.ccConversationDeleted` - - -- Conversation: A chat thread between the logged-in user and a user or group. -- Selection mode: Controls single or multiple selection behavior for list items. -- Request builder: Filters and paginates conversations before render. - ## Implementation ### Integrate the component diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index e7203041b..2f2d2c88b 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -11,44 +11,6 @@ Display and manage members of a specific group with roles and status. - You want to search or filter members within a group. - You need selection mode for member management actions. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- A valid `CometChat.Group` instance to pass as `group`. - -## Quick start - -1. Add the component to your UI. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; - -export default function GroupMembersDemo() { - const [chatGroup, setChatGroup] = React.useState(); - - React.useEffect(() => { - CometChat.getGroup("guid").then((group) => setChatGroup(group)); - }, []); - - return <>{chatGroup && }; -} -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- `group` is required to render members. -- `groupMemberRequestBuilder` filters and paginates members. -- `selectionMode` enables multi-select workflows. - ## Implementation diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 6260ad9e3..17896fa2e 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -11,36 +11,6 @@ Browse and select groups with search, member counts, and group type indicators. - You want a group picker to start group chats. - You need to filter groups by tags or type. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. - -## Quick start - -1. Add the component to your UI. - -```tsx -import React from "react"; -import { CometChatGroups } from "@cometchat/chat-uikit-react"; - -export default function GroupsDemo() { - return ; -} -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- `groupsRequestBuilder` controls filtering and paging. -- `selectionMode` enables multi-select workflows. -- `hideGroupType` toggles the group type icon. - ## Implementation diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index 76f5dd2d2..a3bb90cfa 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -11,33 +11,6 @@ Render the incoming call UI with accept and decline actions. - You want a default accept/decline screen. - You need to customize call handling. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `@cometchat/calls-sdk-javascript` installed. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. - -## Quick start - -1. Add the component to your UI. - -```tsx -import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; - -; -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- Mount `CometChatIncomingCall` at the app root. -- Use `onAccept` and `onDecline` to customize behavior. - ## Implementation diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index 55fe5016f..2abfae9ef 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -11,44 +11,6 @@ Compose and send messages with attachments, mentions, and actions. - You want attachments, mentions, and rich actions. - You want to customize send behavior or UI. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- Provide either `user` or `group` (not both). - -## Quick start - -1. Add the component to your UI. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -export default function MessageComposerDemo() { - const [chatUser, setChatUser] = React.useState(); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return chatUser ? : null; -} -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- `user` or `group` selects the conversation target. -- `hideVoiceRecording` hides voice input. -- `parentMessageId` enables threaded replies. - ## Implementation diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 6503f0673..167883ee6 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -11,43 +11,6 @@ Render the header for an active chat with name, avatar, status, and typing indic - You want typing indicators and presence in the header. - You want to customize the title or back button. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- Provide either `user` or `group` (not both). - -## Quick start - -1. Add the component to your UI. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; - -export default function MessageHeaderDemo() { - const [chatUser, setChatUser] = React.useState(); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return chatUser ? : null; -} -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- Pass `user` for 1:1 or `group` for group chats. -- `hideBackButton` and `hideUserStatus` control header UI. - ## Implementation diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index e4b6ac924..09f2f910b 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -11,44 +11,6 @@ Render a scrollable list of messages for a user or group conversation. - You want read receipts, reactions, and threads. - You want to customize message rendering with templates. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- Provide either `user` or `group` (not both). - -## Quick start - -1. Add the component to your UI. - -```tsx -import React from "react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -export default function MessageListDemo() { - const [chatUser, setChatUser] = React.useState(); - - React.useEffect(() => { - CometChat.getUser("uid").then((user) => setChatUser(user)); - }, []); - - return chatUser ? : null; -} -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- `user` or `group` selects the conversation source. -- `messagesRequestBuilder` controls pagination and filtering. -- `templates` enables custom message rendering. - ## Implementation diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index 7ae56db11..b37c8fbc2 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -11,36 +11,6 @@ Define custom message templates to control bubble layout and rendering. - You want to override header/content/footer views. - You want consistent rendering across message categories. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- Templates must be passed to `CometChatMessageList`. - -## Quick start - -1. Add the component to your UI. - -```tsx -import { CometChatMessageList, ChatConfigurator } from "@cometchat/chat-uikit-react"; - -const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); - -; -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- Templates are passed via `templates` on `CometChatMessageList`. -- Each template is mapped by `category` and `type`. -- `contentView`, `headerView`, and `footerView` control bubble layout. - ## Implementation diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index ea5ee4399..e6928bc8e 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -11,42 +11,6 @@ Show the outgoing call screen after initiating a call. - You want a default outgoing call UI. - You need to handle call cancellation. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `@cometchat/calls-sdk-javascript` installed. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- You must create a `CometChat.Call` via `CometChat.initiateCall()`. - -## Quick start - -1. Add the component to your UI. - -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; - -const callObject = new CometChat.Call( - "uid", - CometChatUIKitConstants.MessageTypes.audio, - CometChatUIKitConstants.MessageReceiverType.user -); -const call = await CometChat.initiateCall(callObject); - -; -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- `call` prop is required. -- Use `onCallCanceled` for cancel handling. - ## Implementation diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 00d79628e..25a66215c 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -11,32 +11,6 @@ Search across conversations and messages with filters and callbacks. - You want to search messages and conversations. - You want custom callbacks for search selection. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. - -## Quick start - -1. Add the component to your UI. - -```tsx -import { CometChatSearch } from "@cometchat/chat-uikit-react"; - -; -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- Use `searchFilters` and `searchIn` to scope search. -- Use `onConversationClicked` and `onMessageClicked` callbacks. - ## Implementation diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index a54509f76..44de24fa8 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -11,33 +11,6 @@ Display the parent message and reply count for a thread. - You need a header showing the parent message. - You want to handle closing the thread view. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. -- A valid `parentMessage` is required. - -## Quick start - -1. Add the component to your UI. - -```tsx -import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; - -; -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- `parentMessage` is required to render the header. -- Use `onClose` to control thread navigation. - ## Implementation diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index 344d66fe6..08268410b 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -11,36 +11,6 @@ List and select users with search and presence using the CometChatUsers componen - You want a user picker to start new chats. - You need to filter users by tags, roles, or status. -## Prerequisites - -- CometChat React UI Kit v6 installed: `@cometchat/chat-uikit-react`. -- `CometChatUIKit.init()` and `CometChatUIKit.login()` complete before rendering. - -## Quick start - -1. Add the component to your UI. - -```tsx -import React from "react"; -import { CometChatUsers } from "@cometchat/chat-uikit-react"; - -export default function UsersDemo() { - return ; -} -``` - -What this does: Renders the minimal version of the component. - -2. Verify the component renders after `init()` and `login()`. - -## Core concepts - - - -- `usersRequestBuilder` controls filtering and paging. -- `selectionMode` enables multi-select workflows. -- `onItemClick` handles selection for navigation. - ## Implementation From 25c4e41d03e9dff4389452cff7ad15c0cc2a1ec8 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 18:33:28 +0530 Subject: [PATCH 80/84] updates What this does: --- ui-kit/react/ai-assistant-chat.mdx | 54 +++++++++--------- ui-kit/react/call-buttons.mdx | 22 ++++---- ui-kit/react/call-logs.mdx | 68 +++++++++++------------ ui-kit/react/components-overview.mdx | 4 +- ui-kit/react/conversations.mdx | 40 +++++++------- ui-kit/react/group-members.mdx | 68 +++++++++++------------ ui-kit/react/groups.mdx | 70 ++++++++++++------------ ui-kit/react/incoming-call.mdx | 62 ++++++++++----------- ui-kit/react/message-composer.mdx | 44 +++++++-------- ui-kit/react/message-header.mdx | 44 +++++++-------- ui-kit/react/message-list.mdx | 82 ++++++++++++++-------------- ui-kit/react/message-template.mdx | 62 ++++++++++----------- ui-kit/react/outgoing-call.mdx | 46 ++++++++-------- ui-kit/react/search.mdx | 60 ++++++++++---------- ui-kit/react/thread-header.mdx | 20 +++---- ui-kit/react/users.mdx | 72 ++++++++++++------------ 16 files changed, 409 insertions(+), 409 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 3cee97737..465ba99c5 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -65,7 +65,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -93,7 +93,7 @@ export function AIAssistantChatDemo() { } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -148,7 +148,7 @@ export function AIAssistantChatDemo() { } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -180,7 +180,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -218,7 +218,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -250,7 +250,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -287,7 +287,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -318,7 +318,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -354,7 +354,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -383,7 +383,7 @@ export function AIAssistantChatDemo() { ) } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -432,7 +432,7 @@ export function AIAssistantChatDemo = () => { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -458,7 +458,7 @@ export function AIAssistantChatDemo = () => { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -490,7 +490,7 @@ What this does: Shows the code for this step. background: #30a46c; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -527,7 +527,7 @@ export function AIAssistantChatDemo = () => { ) } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -558,7 +558,7 @@ export function AIAssistantChatDemo = () => { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -635,7 +635,7 @@ export function AIAssistantChatDemo = () => { ); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -671,7 +671,7 @@ export function AIAssistantChatDemo = () => { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -708,7 +708,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -735,7 +735,7 @@ export function AIAssistantChatDemo() { ) } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -777,7 +777,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -809,7 +809,7 @@ export function AIAssistantChatDemo() { ) } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -834,7 +834,7 @@ What this does: Shows the code for this step. color: #6852d6; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -874,7 +874,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -905,7 +905,7 @@ export function AIAssistantChatDemo() { ); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -930,7 +930,7 @@ What this does: Shows the code for this step. margin: 10px 0; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -973,7 +973,7 @@ export function AIAssistantChatDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1010,7 +1010,7 @@ export function AIAssistantChatDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index 0e1bdf8b0..dec89fdad 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -71,7 +71,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -93,7 +93,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -129,7 +129,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -157,7 +157,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -205,7 +205,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -244,7 +244,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -292,7 +292,7 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { //Your Code }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -311,7 +311,7 @@ ccOutgoingCall?.unsubscribe(); ccMessageSent?.unsubscribe(); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -359,7 +359,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -383,7 +383,7 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -430,7 +430,7 @@ What this does: Shows the code for this step. background-color: #6852d6; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index 6ad80ad8a..0d6f17f9b 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -73,7 +73,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -88,7 +88,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -116,7 +116,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -134,7 +134,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -159,7 +159,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -177,7 +177,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -203,7 +203,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -221,7 +221,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -273,7 +273,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -296,7 +296,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -323,7 +323,7 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { //Your Code }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -336,7 +336,7 @@ What this does: Shows the code for this step. ```tsx lines ccMessageSent?.unsubscribe(); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -376,7 +376,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -391,7 +391,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -436,7 +436,7 @@ What this does: Shows the code for this step. border-radius: 8px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -462,7 +462,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -477,7 +477,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -519,7 +519,7 @@ new CalendarObject({ otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM" }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Call Initiated** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -541,7 +541,7 @@ function getDateFormat() { // Apply the custom format to the CometChatCallLogs component ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -647,7 +647,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -705,7 +705,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -746,7 +746,7 @@ What this does: Shows the code for this step. font-style: normal; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -826,7 +826,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -872,7 +872,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -886,7 +886,7 @@ What this does: Shows the code for this step. font-style: normal; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -950,7 +950,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -990,7 +990,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1005,7 +1005,7 @@ What this does: Shows the code for this step. font-style: normal; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1060,7 +1060,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1093,7 +1093,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1131,7 +1131,7 @@ What this does: Shows the code for this step. width: 32px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1179,7 +1179,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1205,7 +1205,7 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1219,7 +1219,7 @@ What this does: Shows the code for this step. font: 500 16px Roboto; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index b382c4628..be109ae14 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -32,7 +32,7 @@ import { } from "@cometchat/chat-uikit-react"; ``` -What this does: Imports the core chat components. +**What this does**: Imports the core chat components. ### Actions @@ -49,7 +49,7 @@ Example pattern: console.log(conversation)} /> ``` -What this does: Logs the conversation when a user selects a list item. +**What this does**: Logs the conversation when a user selects a list item. ### Events diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index eed8b0faa..a4e0ceb51 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -61,7 +61,7 @@ export default ConversationsDemo; -What this does: Renders the conversations list with default UI behavior. +**What this does**: Renders the conversations list with default UI behavior. ### Actions @@ -101,7 +101,7 @@ const getOnItemClick = (conversation) => { -What this does: Handles a conversation click and lets you update app state. +**What this does**: Handles a conversation click and lets you update app state. #### OnSelect @@ -147,7 +147,7 @@ const getOnSelect = (conversation, selected) => { -What this does: Handles list selection changes in multi-select mode. +**What this does**: Handles list selection changes in multi-select mode. #### OnError @@ -178,7 +178,7 @@ const handleOnError = (error) => { -What this does: Captures and logs errors emitted by the component. +**What this does**: Captures and logs errors emitted by the component. #### onSearchBarClicked @@ -208,7 +208,7 @@ const handleSearchClick = () => { -What this does: Triggers your handler when users click the search bar. +**What this does**: Triggers your handler when users click the search bar. ### Filters @@ -230,7 +230,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; />; ``` -What this does: Limits the list to 10 conversations per request. +**What this does**: Limits the list to 10 conversations per request. ### Events @@ -254,7 +254,7 @@ const ccConversationDeleted = -What this does: Subscribes to conversation deletion events. +**What this does**: Subscribes to conversation deletion events. @@ -264,7 +264,7 @@ ccConversationDeleted?.unsubscribe(); -What this does: Cleans up the event subscription. +**What this does**: Cleans up the event subscription. ### Customization @@ -323,7 +323,7 @@ Verify: Fonts, colors, and badges update. -What this does: Applies custom typography and color styling to the conversations list. +**What this does**: Applies custom typography and color styling to the conversations list. #### Functionality @@ -352,7 +352,7 @@ Verify: UI changes reflect the prop values. -What this does: Sets a custom title for the conversations header. +**What this does**: Sets a custom title for the conversations header. | Property | Description | Code | | --- | --- | --- | @@ -435,7 +435,7 @@ const getItemView = (conversation: CometChat.Conversation) => { -What this does: Replaces the default item layout with a custom list item view. +**What this does**: Replaces the default item layout with a custom list item view. ##### LeadingView @@ -520,7 +520,7 @@ const CustomLeadingView = (conversation: CometChat.Conversation) => { -What this does: Replaces the avatar area with a custom view that can show typing state. +**What this does**: Replaces the avatar area with a custom view that can show typing state. ##### TrailingView @@ -627,7 +627,7 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { -What this does: Replaces the trailing area with a custom time and status panel. +**What this does**: Replaces the trailing area with a custom time and status panel. ##### TextFormatters @@ -824,7 +824,7 @@ import ShortcutFormatter from "./ShortCutFormatter"; -What this does: Adds a custom text formatter that expands shortcuts and displays a dialog. +**What this does**: Adds a custom text formatter that expands shortcuts and displays a dialog. ##### HeaderView @@ -898,7 +898,7 @@ const getHeaderView = () => { -What this does: Replaces the header with a custom title and action button. +**What this does**: Replaces the header with a custom title and action button. ##### Last message date time format @@ -917,7 +917,7 @@ new CalendarObject({ }); ``` -What this does: Shows the default date format pattern. +**What this does**: Shows the default date format pattern. @@ -941,7 +941,7 @@ function getDateFormat() { -What this does: Applies a custom date format to conversation timestamps. +**What this does**: Applies a custom date format to conversation timestamps. ##### TitleView @@ -1014,7 +1014,7 @@ const customTitleView = (conversation: CometChat.Conversation) => { -What this does: Customizes the title text and status line in each list item. +**What this does**: Customizes the title text and status line in each list item. ##### SubtitleView @@ -1085,7 +1085,7 @@ function getFormattedTimestamp(timestamp: number): string { -What this does: Replaces the subtitle with custom date content for users or groups. +**What this does**: Replaces the subtitle with custom date content for users or groups. ##### Options @@ -1169,7 +1169,7 @@ const getOptions = (conversation: CometChat.Conversation) => { -What this does: Replaces the default menu options and styles the menu. +**What this does**: Replaces the default menu options and styles the menu. | Name | Description | | --- | --- | diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index 2f2d2c88b..a4d9a82e8 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -77,7 +77,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -101,7 +101,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -161,7 +161,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -203,7 +203,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -247,7 +247,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -284,7 +284,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -325,7 +325,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -359,7 +359,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -400,7 +400,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -434,7 +434,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -494,7 +494,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -531,7 +531,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -575,7 +575,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -610,7 +610,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -652,7 +652,7 @@ const ccGroupMemberScopeChanged = } ); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -667,7 +667,7 @@ ccGroupMemberKicked?.unsubscribe(); ccGroupMemberScopeChanged?.unsubscribe(); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -715,7 +715,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -754,7 +754,7 @@ What this does: Shows the code for this step. width: 40px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -793,7 +793,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -823,7 +823,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -950,7 +950,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1035,7 +1035,7 @@ What this does: Shows the code for this step. display: none; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1070,7 +1070,7 @@ const customTitleView = (member: CometChat.GroupMember) => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1108,7 +1108,7 @@ What this does: Shows the code for this step. background: #0B7BEA; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1177,7 +1177,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1191,7 +1191,7 @@ What this does: Shows the code for this step. font: 400 14px Roboto; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1234,7 +1234,7 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { }; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1281,7 +1281,7 @@ What this does: Shows the code for this step. background: #09C26F; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1359,7 +1359,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1379,7 +1379,7 @@ What this does: Shows the code for this step. font: 400 12px Roboto; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1424,7 +1424,7 @@ const getHeaderView = () => { ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1463,7 +1463,7 @@ What this does: Shows the code for this step. display: block; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1531,7 +1531,7 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1550,7 +1550,7 @@ What this does: Shows the code for this step. box-shadow: none; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 17896fa2e..4c89964db 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -74,7 +74,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -89,7 +89,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -129,7 +129,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -153,7 +153,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -179,7 +179,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -197,7 +197,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -223,7 +223,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -241,7 +241,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -286,7 +286,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -308,7 +308,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -339,7 +339,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -361,7 +361,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -411,7 +411,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -426,7 +426,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -488,7 +488,7 @@ What this does: Shows the code for this step. line-height: 16.8px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -518,7 +518,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -539,7 +539,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -612,7 +612,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -641,7 +641,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -712,7 +712,7 @@ What this does: Shows the code for this step. line-height: 16.8px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -747,7 +747,7 @@ const customTitleView = (group: CometChat.Group) => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -791,7 +791,7 @@ What this does: Shows the code for this step. width: 12px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -842,7 +842,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -870,7 +870,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -887,7 +887,7 @@ What this does: Shows the code for this step. line-height: 120%; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -938,7 +938,7 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -973,7 +973,7 @@ What this does: Shows the code for this step. position: relative; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1009,7 +1009,7 @@ return
; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1033,7 +1033,7 @@ What this does: Shows the code for this step. height: fit-content; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1069,7 +1069,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1088,7 +1088,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1110,7 +1110,7 @@ What this does: Shows the code for this step. mask-size: contain; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1154,7 +1154,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1181,7 +1181,7 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1207,7 +1207,7 @@ What this does: Shows the code for this step. mask-size: contain; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index a3bb90cfa..47e50d36b 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -73,7 +73,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -88,7 +88,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -118,7 +118,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -137,7 +137,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -163,7 +163,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -182,7 +182,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -208,7 +208,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -227,7 +227,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -261,7 +261,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -286,7 +286,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -325,7 +325,7 @@ const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe( } ); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -342,7 +342,7 @@ ccCallAccepted?.unsubscribe(); ccCallEnded?.unsubscribe(); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -382,7 +382,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -397,7 +397,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -512,7 +512,7 @@ What this does: Shows the code for this step. justify-content: center; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -540,7 +540,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -559,7 +559,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -602,7 +602,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -622,7 +622,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -661,7 +661,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -685,7 +685,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -695,7 +695,7 @@ What this does: Shows the code for this step. display: none; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -738,7 +738,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -766,7 +766,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -803,7 +803,7 @@ What this does: Shows the code for this step. width: 20px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -843,7 +843,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -868,7 +868,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -895,7 +895,7 @@ What this does: Shows the code for this step. background-size: contain; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -942,7 +942,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -974,7 +974,7 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1013,7 +1013,7 @@ What this does: Shows the code for this step. font: 400 16px Roboto; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index 2abfae9ef..de527c6ac 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -78,7 +78,7 @@ export function MessageComposerDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -103,7 +103,7 @@ export function MessageComposerDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -144,7 +144,7 @@ export function MessageComposerDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -174,7 +174,7 @@ export function MessageComposerDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -211,7 +211,7 @@ export function MessageComposerDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -251,7 +251,7 @@ export function MessageComposerDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -312,7 +312,7 @@ export function MessageComposerDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -357,7 +357,7 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { // Your Code }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -374,7 +374,7 @@ ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccMessageSent?.unsubscribe(); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -411,7 +411,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -429,7 +429,7 @@ What this does: Shows the code for this step. background: #e5484d; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -450,7 +450,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -553,7 +553,7 @@ function getAttachments() { user={userObj} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -584,7 +584,7 @@ What this does: Shows the code for this step. background: #141414; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -637,7 +637,7 @@ const auxiliaryButtonView = ( user={userObj} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -684,7 +684,7 @@ const sendButtonView = ( ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -704,7 +704,7 @@ What this does: Shows the code for this step. background: #6852d6; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -750,7 +750,7 @@ const getHeaderView = () => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -796,7 +796,7 @@ What this does: Shows the code for this step. mask-size: contain; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -920,7 +920,7 @@ class ShortcutFormatter extends CometChatTextFormatter { export default ShortcutFormatter; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -986,7 +986,7 @@ export default class DialogHelper { } } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1015,7 +1015,7 @@ export function MessageComposerDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 167883ee6..bc43e643f 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -78,7 +78,7 @@ export function MessageHeaderDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -101,7 +101,7 @@ export function MessageHeaderDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -147,7 +147,7 @@ export function MessageHeaderDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -190,7 +190,7 @@ export function MessageHeaderDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -213,7 +213,7 @@ const handleSearchClick = () => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -236,7 +236,7 @@ const getOnItemClick = () => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -286,7 +286,7 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; // Assuming groupObj is defined elsewhere in your code ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -300,7 +300,7 @@ What this does: Shows the code for this step. font-family: "SF Pro"; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -319,7 +319,7 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -382,7 +382,7 @@ const CustomItemView = ( showBackButton={true} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -392,7 +392,7 @@ What this does: Shows the code for this step. border-radius: 8px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -433,7 +433,7 @@ function CustomTitleView() { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -457,7 +457,7 @@ What this does: Shows the code for this step. text-align: left; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -489,7 +489,7 @@ function CustomSubtitleView() { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -531,7 +531,7 @@ function CustomLeadingView() { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -562,7 +562,7 @@ What this does: Shows the code for this step. position: relative; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -609,7 +609,7 @@ function CustomTrailingButtonView() { trailingView={CustomTrailingButtonView()} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -626,7 +626,7 @@ What this does: Shows the code for this step. background: black; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -673,7 +673,7 @@ function CustomAuxiliaryButtonView() { auxiliaryButtonView={CustomAuxiliaryButtonView()} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -690,7 +690,7 @@ What this does: Shows the code for this step. background: black; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -714,7 +714,7 @@ new CalendarObject({ }, }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. The following example demonstrates how to modify the **last active** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -742,7 +742,7 @@ function getDateFormat() { lastActiveAtDateTimeFormat={getDateFormat()} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index 09f2f910b..16ce37727 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -78,7 +78,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -103,7 +103,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -154,7 +154,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -187,7 +187,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -223,7 +223,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -253,7 +253,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -292,7 +292,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -322,7 +322,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -364,7 +364,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -397,7 +397,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -438,7 +438,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -469,7 +469,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -515,7 +515,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -546,7 +546,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -598,7 +598,7 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => { // Your Code }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -630,7 +630,7 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => { // Your Code }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -645,7 +645,7 @@ ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccActiveChatChanged?.unsubscribe(); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -655,7 +655,7 @@ ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccActiveChatChanged?.unsubscribe(); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -692,7 +692,7 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -704,7 +704,7 @@ What this does: Shows the code for this step. font-family: "SF Pro"; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -740,7 +740,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -770,7 +770,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -890,7 +890,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -945,7 +945,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -966,7 +966,7 @@ new CalendarObject({ otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025" }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Date Separator** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -994,7 +994,7 @@ function getDateFormat() { separatorDateTimeFormat={getDateFormat()} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1025,7 +1025,7 @@ new CalendarObject({ otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025" }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Sticky Date** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -1050,7 +1050,7 @@ function getDateFormat() { // Apply the custom format to the CometChatMessageList component ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1079,7 +1079,7 @@ new CalendarObject({ otherDays: `hh:mm A`, // Example: "09:30 PM" }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Message SentAt** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -1107,7 +1107,7 @@ function getDateFormat() { messageSentAtDateTimeFormat={getDateFormat()} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1136,7 +1136,7 @@ new CalendarObject({ otherDays: `DD MMM, hh:mm A`, // Example: "29 Jan, 04:34 AM" }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Message Info** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -1164,7 +1164,7 @@ function getDateFormat() { messageInfoDateTimeFormat={getDateFormat()} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1228,7 +1228,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1267,7 +1267,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1306,7 +1306,7 @@ What this does: Shows the code for this step. align-items: center; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1364,7 +1364,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1405,7 +1405,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1444,7 +1444,7 @@ What this does: Shows the code for this step. align-items: center; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1568,7 +1568,7 @@ class ShortcutFormatter extends CometChatTextFormatter { export default ShortcutFormatter; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1637,7 +1637,7 @@ export default class DialogHelper { } } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1666,7 +1666,7 @@ export function MessageListDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index b37c8fbc2..a4f319b54 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -125,7 +125,7 @@ The first step is to fetch the list of existing templates when you want to modif ```javascript let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. #### Existing Templates @@ -147,7 +147,7 @@ for (let i = 0; i < allTemplates.length; i++) { } } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -165,7 +165,7 @@ for (let i = 0; i < allTemplates.length; i++) { } } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -180,7 +180,7 @@ import { CometChatMessageList } from "@cometchat/uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -190,7 +190,7 @@ import { CometChatMessageList } from "@cometchat/uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -257,7 +257,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -311,7 +311,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -421,7 +421,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -518,7 +518,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -577,7 +577,7 @@ What this does: Shows the code for this step. font: 500 14px/1.2 Roboto; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -649,7 +649,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -699,7 +699,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -740,7 +740,7 @@ What this does: Shows the code for this step. background-color: #f44649; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -815,7 +815,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -877,7 +877,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -899,7 +899,7 @@ What this does: Shows the code for this step. border-radius: 12px 12px 0px 0px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1026,7 +1026,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1129,7 +1129,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1207,7 +1207,7 @@ What this does: Shows the code for this step. border-top: 10px solid #e8e8e8; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1290,7 +1290,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1357,7 +1357,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1384,7 +1384,7 @@ What this does: Shows the code for this step. padding: 8px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1434,7 +1434,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1462,7 +1462,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1483,7 +1483,7 @@ What this does: Shows the code for this step. --cometchat-primary-color: #f76808; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1576,7 +1576,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1645,7 +1645,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1663,7 +1663,7 @@ What this does: Shows the code for this step. background-color: #6852d6; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1802,7 +1802,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1914,7 +1914,7 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1995,7 +1995,7 @@ What this does: Shows the code for this step. font-style: normal; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index e6928bc8e..68925dc36 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -92,7 +92,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -128,7 +128,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -183,7 +183,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -228,7 +228,7 @@ const OutgoingCallDemo = () => { }; export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -278,7 +278,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -319,7 +319,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -397,7 +397,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -435,7 +435,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -462,7 +462,7 @@ What this does: Shows the code for this step. font: 400 32px/38px "Times New Roman"; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -509,7 +509,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -548,7 +548,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -625,7 +625,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -672,7 +672,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -684,7 +684,7 @@ What this does: Shows the code for this step. font: 500 24px Roboto; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -746,7 +746,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -794,7 +794,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -817,7 +817,7 @@ What this does: Shows the code for this step. width: 24px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -883,7 +883,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -935,7 +935,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -958,7 +958,7 @@ What this does: Shows the code for this step. right: -60px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1022,7 +1022,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1072,7 +1072,7 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1106,7 +1106,7 @@ What this does: Shows the code for this step. width: 32px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 25a66215c..8f14ba58b 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -63,7 +63,7 @@ function SearchDemo() { export default SearchDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -81,7 +81,7 @@ function SearchDemo() { export default SearchDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -108,7 +108,7 @@ const openConversation = (conversation: CometChat.Conversation) => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -122,7 +122,7 @@ const openConversation = (conversation) => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -145,7 +145,7 @@ const goToMessage = (message: CometChat.BaseMessage) => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -159,7 +159,7 @@ const goToMessage = (message) => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -182,7 +182,7 @@ const onBack = () => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -196,7 +196,7 @@ const onBack = () => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -219,7 +219,7 @@ const handleOnError = (error: CometChat.CometChatException) => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -233,7 +233,7 @@ const handleOnError = (error) => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -259,7 +259,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; )} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -274,7 +274,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; )} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -296,7 +296,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; messagesRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -309,7 +309,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; messagesRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)} />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -353,7 +353,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -426,7 +426,7 @@ What this does: Shows the code for this step. font-weight: 700; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -445,7 +445,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -455,7 +455,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -550,7 +550,7 @@ const getMessageItemView = (message: CometChat.BaseMessage) => { messageItemView={getMessageItemView} // Custom message item view />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -575,7 +575,7 @@ What this does: Shows the code for this step. font: var(--cometchat-font-body-regular); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -619,7 +619,7 @@ const getMessageLeadingView = (message: CometChat.BaseMessage) => { messageLeadingView={getMessageLeadingView} // Custom message leading view />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -640,7 +640,7 @@ What this does: Shows the code for this step. width: 32px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -690,7 +690,7 @@ const getMessageTitleView = (message: CometChat.BaseMessage) => { messageTitleView={getMessageTitleView} // Custom message title view />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -714,7 +714,7 @@ What this does: Shows the code for this step. text-decoration: underline; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -763,7 +763,7 @@ const getMessageSubtitleView = (message: CometChat.BaseMessage) => { messageSubtitleView={getMessageSubtitleView} // Custom message subtitle view />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -788,7 +788,7 @@ What this does: Shows the code for this step. font: var(--cometchat-font-body-regular); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -862,7 +862,7 @@ const getMessageTrailingView = (message: CometChat.BaseMessage) => { messageTrailingView={getMessageTrailingView} // Custom message trailing view />; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -905,7 +905,7 @@ What this does: Shows the code for this step. color: #6a5b99; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -926,7 +926,7 @@ new CalendarObject({ today: "DD MMM, YYYY" // Example: "04 Jun, 2025" }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Sent At** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -951,7 +951,7 @@ function getDateFormat() { // Apply the custom format to the CometChatSearch component ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index 44de24fa8..363f3009c 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -80,7 +80,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -108,7 +108,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -157,7 +157,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -221,7 +221,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -239,7 +239,7 @@ What this does: Shows the code for this step. color: #6852d6; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -285,7 +285,7 @@ export function ThreadHeaderDemo() { ) : null; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -320,7 +320,7 @@ new CalendarObject({ otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025" }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Date Separator** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -345,7 +345,7 @@ function getDateFormat() { // Apply the custom format to the CometChatThreadHeader component ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -374,7 +374,7 @@ new CalendarObject({ otherDays: `hh:mm A`, // Example: "09:30 PM" }); ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Message SentAt** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -399,7 +399,7 @@ function getDateFormat() { // Apply the custom format to the CometChatThreadHeader component ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index 08268410b..38dee4155 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -73,7 +73,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -87,7 +87,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -124,7 +124,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -148,7 +148,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -172,7 +172,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -189,7 +189,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -213,7 +213,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -231,7 +231,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -255,7 +255,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -273,7 +273,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -321,7 +321,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -342,7 +342,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -372,7 +372,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -393,7 +393,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -442,7 +442,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -456,7 +456,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -509,7 +509,7 @@ What this does: Shows the code for this step. border-radius: 9.6px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -538,7 +538,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -558,7 +558,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -639,7 +639,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -673,7 +673,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -698,7 +698,7 @@ What this does: Shows the code for this step. background: rgba(9, 194, 111, 0.1); } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -733,7 +733,7 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -773,7 +773,7 @@ What this does: Shows the code for this step. .users__title-view-teacher .users__title-view-type{ } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -828,7 +828,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -860,7 +860,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -877,7 +877,7 @@ What this does: Shows the code for this step. line-height: 120%; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -922,7 +922,7 @@ const getHeaderView = () => { ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -958,7 +958,7 @@ What this does: Shows the code for this step. display: block; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -996,7 +996,7 @@ const customLeadingView = (user: CometChat.User): JSX.Element => { }; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1032,7 +1032,7 @@ What this does: Shows the code for this step. margin-bottom: 3px; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1071,7 +1071,7 @@ const customTrailingButtonView = (user:CometChat.User) => { ; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1104,7 +1104,7 @@ What this does: Shows the code for this step. color: white; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1153,7 +1153,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1179,7 +1179,7 @@ function UsersDemo() { export default UsersDemo; ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. @@ -1205,7 +1205,7 @@ What this does: Shows the code for this step. mask-size: contain; } ``` -What this does: Shows the code for this step. +**What this does**: Shows the code for this step. From cb0923c2280cb98929ae3612c1111e0bebaa3ac3 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 19:05:51 +0530 Subject: [PATCH 81/84] Update components-overview.mdx --- ui-kit/react/components-overview.mdx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index be109ae14..1f0561304 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -12,16 +12,16 @@ Browse and understand the full set of CometChat React UI Kit components. This pa - You want to understand the common API patterns across components. - You need to find related pages for customization and theming. -## Implementation +## Usage ### Component import pattern -What you’re changing: Import the UI Kit components you plan to render. -File: Any React module (for example `src/App.tsx`) -Applies to: UI Kit component imports -Default behavior: Components are available for JSX use. -Override: Import only what you need. -Verify: The import compiles and components render. +- **What you’re changing**: Import the UI Kit components you plan to render. +- **File**: Any React module (for example `src/App.tsx`) +- **Applies to**: UI Kit component imports +- **Default behavior**: Components are available for JSX use. +- **Override**: Import only what you need. +- **Verify**: The import compiles and components render. ```tsx import { @@ -88,8 +88,3 @@ No. Import only the components you render. **Where do I find component-specific props and actions?** Open the individual component pages linked above. -## Next steps - -- [Conversations](/ui-kit/react/conversations) -- [Message List](/ui-kit/react/message-list) -- [Theming](/ui-kit/react/theme) From b5959f5ce1ab484ab29bab25ccd5907d49477de0 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 19:06:51 +0530 Subject: [PATCH 82/84] Update components-overview.mdx --- ui-kit/react/components-overview.mdx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index 1f0561304..36d9a52dc 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -14,7 +14,7 @@ Browse and understand the full set of CometChat React UI Kit components. This pa ## Usage -### Component import pattern +Component import pattern - **What you’re changing**: Import the UI Kit components you plan to render. - **File**: Any React module (for example `src/App.tsx`) @@ -36,12 +36,12 @@ import { ### Actions -What you’re changing: Override component behavior via callbacks. -Where to change it: Component props in JSX -Applies to: Any component that exposes `on` props -Default behavior: Predefined actions run automatically. -Override: Provide your own handler using `on={(param) => {}}`. -Verify: Your callback fires on interaction. +- **What you’re changing**: Override component behavior via callbacks. +- **Where to change it**: Component props in JSX +- **Applies to**: Any component that exposes `on` props +- **Default behavior**: Predefined actions run automatically. +- **Override**: Provide your own handler using `on={(param) => {}}`. +- **Verify**: Your callback fires on interaction. Example pattern: @@ -53,12 +53,12 @@ Example pattern: ### Events -What you’re changing: Listen to UI Kit events to coordinate UI. -Where to change it: Your app-level state or event handlers -Applies to: UI Kit events emitted by components -Default behavior: Components emit events on state changes. -Override: Subscribe where needed to respond. -Verify: Your app updates when events emit. +- **What you’re changing**: Listen to UI Kit events to coordinate UI. +- **Where to change it**: Your app-level state or event handlers +- **Applies to**: UI Kit events emitted by components +- **Default behavior**: Components emit events on state changes. +- **Override**: Subscribe where needed to respond. +- **Verify**: Your app updates when events emit. ## Customization matrix From b15a7b889a7f755d86cbc1deaba7ccbc0c6120e5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 19:20:58 +0530 Subject: [PATCH 83/84] updates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - **What you’re changing**: Import the UI Kit components you plan to render. - **File**: Any React module (for example `src/App.tsx`) - **Applies to**: UI Kit component imports - **Default behavior**: Components are available for JSX use. - **Override**: Import only what you need. - **Verify**: The import compiles and components render. --- ui-kit/react/ai-assistant-chat.mdx | 85 ++++++------ ui-kit/react/call-buttons.mdx | 85 ++++++------ ui-kit/react/call-logs.mdx | 97 +++++++------- ui-kit/react/conversations.mdx | 206 ++++++++++++++--------------- ui-kit/react/group-members.mdx | 113 ++++++++-------- ui-kit/react/groups.mdx | 112 ++++++++-------- ui-kit/react/incoming-call.mdx | 93 ++++++------- ui-kit/react/message-composer.mdx | 93 +++++++------ ui-kit/react/message-header.mdx | 95 +++++++------ ui-kit/react/message-list.mdx | 103 +++++++-------- ui-kit/react/message-template.mdx | 65 +++++---- ui-kit/react/outgoing-call.mdx | 87 ++++++------ ui-kit/react/search.mdx | 113 ++++++++-------- ui-kit/react/thread-header.mdx | 76 +++++------ ui-kit/react/users.mdx | 114 ++++++++-------- 15 files changed, 740 insertions(+), 797 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 465ba99c5..16c0a8980 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -11,24 +11,13 @@ Build an AI assistant chat surface with streaming responses and suggestions. - You want streaming responses and suggested prompts. - You need a chat history sidebar for AI conversations. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` — requires a `CometChat.User` representing the AI agent -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` then `CometChat.getUser("assistant_uid")` -- **Key props:** `user` (CometChat.User, required), `streamingSpeed` (number), `suggestedMessages` (string[]), `hideNewChat` (boolean), `hideChatHistory` (boolean) -- **CSS class:** `.cometchat-ai-assistant-chat` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. `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. @@ -36,7 +25,6 @@ Verify: The UI reflects the change shown below. - **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). @@ -104,17 +92,28 @@ export function AIAssistantChatDemo() { --- +## Usage + + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` — requires a `CometChat.User` representing the AI agent +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` then `CometChat.getUser("assistant_uid")` +- **Key props:** `user` (CometChat.User, required), `streamingSpeed` (number), `suggestedMessages` (string[]), `hideNewChat` (boolean), `hideChatHistory` (boolean) +- **CSS class:** `.cometchat-ai-assistant-chat` + + ### Actions -What you’re changing: Actions. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Actions. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. [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). @@ -185,7 +184,7 @@ export function AIAssistantChatDemo() { -##### 2. onCloseButtonClicked +#### 2. onCloseButtonClicked Called when the header close button is clicked (visible when `showCloseButton` is true). @@ -255,7 +254,7 @@ export function AIAssistantChatDemo() { -##### 3. onSendButtonClick +#### 3. onSendButtonClick Called when the composer send button is clicked. @@ -323,7 +322,7 @@ export function AIAssistantChatDemo() { -##### 4. onError +#### 4. onError Listen to errors from the underlying header, list, or composer. @@ -388,20 +387,19 @@ export function AIAssistantChatDemo() { - --- -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app’s design requirements, you can customize the appearance of the Assistant Chat component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style You can set the css of the Assistant Chat Component to customize the styling. @@ -495,7 +493,7 @@ export function AIAssistantChatDemo = () => { -#### Functionality +### Functionality These props tailor the experience. Most message options (copy/edit/delete/react, receipts, date separators, etc.) are disabled by default for assistant chats. @@ -589,9 +587,9 @@ export function AIAssistantChatDemo = () => { | `loadLastAgentConversation` | Loads the most recent existing agent conversation if one is available. | `loadLastAgentConversation={true}` | | `parentMessageId` | The parent message ID to load a specific agent conversation. Takes priority over `loadLastAgentConversation`. | `parentMessageId={12345}` | -#### Advanced +### Advanced -##### Header Views +#### Header Views Customize header sections using the following props: `headerItemView`, `headerTitleView`, `headerSubtitleView`, `headerLeadingView`, `headerTrailingView`, and `headerAuxiliaryButtonView`. These customizations are done in the similar way as the [Message Header](/ui-kit/react/message-header#advanced) component. @@ -599,7 +597,7 @@ Customize header sections using the following props: `headerItemView`, `headerTi The header’s "New Chat" and "History" buttons are built-in. You can override them by providing a custom `headerAuxiliaryButtonView`. -##### Assistant Tools +#### Assistant Tools Pass an instance of `CometChatAIAssistantTools` to enable tool/function calls during assistant replies. @@ -676,7 +674,7 @@ export function AIAssistantChatDemo = () => { -##### Empty Chat Image View +#### Empty Chat Image View Provide a custom image for the empty state using `emptyChatImageView`. @@ -740,7 +738,7 @@ export function AIAssistantChatDemo() { -##### Empty Chat Greeting View +#### Empty Chat Greeting View Override the empty state greeting message view using the `emptyChatGreetingView` prop. @@ -838,7 +836,7 @@ export function AIAssistantChatDemo() { -##### Empty Chat Intro Message View +#### Empty Chat Intro Message View You can override the empty chat intro message view using the `emptyChatIntroMessageView` prop. @@ -934,7 +932,7 @@ export function AIAssistantChatDemo() { -##### Templates +#### Templates [CometChatMessageTemplate](/ui-kit/react/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to [CometChatMessageTemplate](/ui-kit/react/message-template). @@ -1018,7 +1016,6 @@ export function AIAssistantChatDemo() { *** - diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index dec89fdad..f45c82e97 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -11,25 +11,13 @@ Render voice and video call buttons for a user or group. - You need to start audio or video calls. - You want to hide specific call types. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatCallButtons } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` or `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed -- **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 - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. 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,20 +25,21 @@ The `Call Button` is a Component provides users with the ability to make calls, - **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 -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatCallButtons } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` or `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed +- **Key props:** `user` (CometChat.User), `group` (CometChat.Group), `hideVideoCallButton` (boolean), `hideVoiceCallButton` (boolean), `onError` (callback) +- **CSS class:** `.cometchat-call-button` +- **Events:** `ccCallRejected`, `ccCallEnded`, `ccOutgoingCall`, `ccMessageSent` + @@ -97,11 +86,19 @@ export default CallButtonDemo; -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. 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. @@ -165,7 +162,7 @@ export default CallButtonDemo; *** -#### Filters +### Filters You can set `CallSettingsBuilder` in the Call Buttons Component to customise the calling experience. To know more about the filters available please refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings). @@ -252,7 +249,7 @@ export default CallButtonDemo; *** -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -319,17 +316,17 @@ ccMessageSent?.unsubscribe(); *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Call Buttons component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -440,15 +437,15 @@ export default CallButtonDemo; ### Configurations -What you’re changing: Configurations. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Configurations. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. Configurations offer the ability to customize the properties of each component within a Composite Component. `CallButtons` component renders [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component. -##### Outgoing Call +#### Outgoing Call You can customize the properties of the `CometChatOutgoingCall` component by making use of the `OutgoingCallConfiguration`. Below properties are available in `OutgoingCallConfiguration`. diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index 0d6f17f9b..e3a985271 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -11,29 +11,16 @@ Show call history with callbacks and filters. - You want to handle call log item clicks. - You need to customize call back actions. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatCallLogs } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `onItemClick` (callback), `onCallButtonClicked` (callback), `callLogRequestBuilder` (CallLogRequestBuilder), `title` (string), `activeCall` (object) -- **CSS class:** `.cometchat-call-logs` -- **Events:** `ccMessageSent` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. `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. - @@ -46,20 +33,21 @@ 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. | - **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 -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatCallLogs } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `onItemClick` (callback), `onCallButtonClicked` (callback), `callLogRequestBuilder` (CallLogRequestBuilder), `title` (string), `activeCall` (object) +- **CSS class:** `.cometchat-call-logs` +- **Events:** `ccMessageSent` + @@ -93,11 +81,19 @@ export default CallLogDemo; -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. 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. @@ -140,7 +136,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. @@ -183,7 +179,7 @@ export default CallLogDemo; -##### 3. onError +#### 3. onError This is a callback function which is triggered when the component encounters an error. @@ -229,11 +225,11 @@ export default CallLogDemo; *** -#### Filters +### Filters **Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK. -##### 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) @@ -304,7 +300,7 @@ export default CallLogDemo; *** -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -344,17 +340,17 @@ ccMessageSent?.unsubscribe(); *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Call Logs component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -444,7 +440,7 @@ export default CallLogDemo; *** -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -500,13 +496,13 @@ Below is a list of customizations along with corresponding code snippets *** -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -##### Call Initiated Date Time Format +#### Call Initiated Date Time Format The `callInitiatedDateTimeFormat` property allows you to customize the **Call Initiated** timestamp displayed in the call logs. @@ -557,7 +553,7 @@ function getDateFormat() { *** -##### ItemView +#### ItemView With this property, you can assign a custom ListItem to the Call Logs Component. @@ -754,7 +750,7 @@ export default CallLogDemo; *** -##### SubtitleView +#### SubtitleView You can customize the subtitle view for each call logs item to meet your requirements. @@ -894,7 +890,7 @@ export default CallLogDemo; *** -##### TrailingView +#### TrailingView You can customize the trailing view for each call logs item to meet your requirements. @@ -1011,7 +1007,7 @@ export default CallLogDemo; -##### LeadingView +#### LeadingView You can customize the leading view for each call logs item to meet your requirements. @@ -1137,7 +1133,7 @@ export default CallLogDemo; -##### TitleView +#### TitleView You can customize the title view for each call logs item to meet your requirements. @@ -1225,7 +1221,6 @@ export default CallLogDemo; - diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index a4e0ceb51..f38a4a26c 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -13,16 +13,16 @@ Build and customize the conversations list in your React app. This page is for d - You need to filter conversations by type or tags. - You want to customize list items, header, and actions. -## Implementation +## Usage ### Integrate the component -What you’re changing: Add the conversations list to your UI. -File: `src/ConversationsDemo.tsx` -Applies to: `CometChatConversations` -Default behavior: Renders a scrollable list of recent conversations. -Override: Add props such as `onItemClick` or `selectionMode`. -Verify: Conversation tiles render with avatars, names, last messages, and unread counts. +- **What you’re changing**: Add the conversations list to your UI. +- **File**: `src/ConversationsDemo.tsx` +- **Applies to**: `CometChatConversations` +- **Default behavior**: Renders a scrollable list of recent conversations. +- **Override**: Add props such as `onItemClick` or `selectionMode`. +- **Verify**: Conversation tiles render with avatars, names, last messages, and unread counts. @@ -65,12 +65,12 @@ export default ConversationsDemo; ### Actions -What you’re changing: Override default behavior by handling component actions. -File: Any React module -Applies to: `onItemClick`, `onSelect`, `onError`, `onSearchBarClicked` -Default behavior: Actions emit events but do not change your app state. -Override: Provide callbacks to update your UI or app state. -Verify: Your handlers run when the action fires. +- **What you’re changing**: Override default behavior by handling component actions. +- **File**: Any React module +- **Applies to**: `onItemClick`, `onSelect`, `onError`, `onSearchBarClicked` +- **Default behavior**: Actions emit events but do not change your app state. +- **Override**: Provide callbacks to update your UI or app state. +- **Verify**: Your handlers run when the action fires. #### OnItemClick @@ -212,12 +212,12 @@ const handleSearchClick = () => { ### Filters -What you’re changing: Filter or limit the conversations list. -File: Any React module -Applies to: `conversationsRequestBuilder` -Default behavior: Fetches default conversation list. -Override: Use `CometChat.ConversationsRequestBuilder` to filter. -Verify: The list respects your limit or filters. +- **What you’re changing**: Filter or limit the conversations list. +- **File**: Any React module +- **Applies to**: `conversationsRequestBuilder` +- **Default behavior**: Fetches default conversation list. +- **Override**: Use `CometChat.ConversationsRequestBuilder` to filter. +- **Verify**: The list respects your limit or filters. ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -234,12 +234,12 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; ### Events -What you’re changing: Subscribe to conversation events. -File: Any React module -Applies to: `CometChatConversationEvents` -Default behavior: Events emit globally without app handling. -Override: Subscribe and react to event payloads. -Verify: Your handler runs on conversation events. +- **What you’re changing**: Subscribe to conversation events. +- **File**: Any React module +- **Applies to**: `CometChatConversationEvents` +- **Default behavior**: Events emit globally without app handling. +- **Override**: Subscribe and react to event payloads. +- **Verify**: Your handler runs on conversation events. @@ -266,16 +266,16 @@ ccConversationDeleted?.unsubscribe(); **What this does**: Cleans up the event subscription. -### Customization +## Customization -#### Style +### Style -What you’re changing: Override CSS for the conversations list. -File: Global stylesheet (for example `src/App.css`) -Applies to: `.cometchat-conversations` selectors -Default behavior: UI Kit default styles. -Override: Use CSS overrides. -Verify: Fonts, colors, and badges update. +- **What you’re changing**: Override CSS for the conversations list. +- **File**: Global stylesheet (for example `src/App.css`) +- **Applies to**: `.cometchat-conversations` selectors +- **Default behavior**: UI Kit default styles. +- **Override**: Use CSS overrides. +- **Verify**: Fonts, colors, and badges update. @@ -325,14 +325,14 @@ Verify: Fonts, colors, and badges update. **What this does**: Applies custom typography and color styling to the conversations list. -#### Functionality +### Functionality -What you’re changing: Adjust built-in UI behavior with props. -File: Any React module -Applies to: Conversations props -Default behavior: UI Kit default behavior. -Override: Use props listed below. -Verify: UI changes reflect the prop values. +- **What you’re changing**: Adjust built-in UI behavior with props. +- **File**: Any React module +- **Applies to**: Conversations props +- **Default behavior**: UI Kit default behavior. +- **Override**: Use props listed below. +- **Verify**: UI changes reflect the prop values. @@ -373,14 +373,14 @@ Verify: UI changes reflect the prop values. #### Advanced views -##### ItemView +#### ItemView -What you’re changing: Replace the default list item with a custom view. -File: Any React module -Applies to: `itemView` -Default behavior: UI Kit default list item layout. -Override: Return a custom `CometChatListItem`. -Verify: List items render with your custom UI. +- **What you’re changing**: Replace the default list item with a custom view. +- **File**: Any React module +- **Applies to**: `itemView` +- **Default behavior**: UI Kit default list item layout. +- **Override**: Return a custom `CometChatListItem`. +- **Verify**: List items render with your custom UI. @@ -437,14 +437,14 @@ const getItemView = (conversation: CometChat.Conversation) => { **What this does**: Replaces the default item layout with a custom list item view. -##### LeadingView +#### LeadingView -What you’re changing: Replace the leading view (avatar area). -File: Any React module -Applies to: `leadingView` -Default behavior: Default avatar and status UI. -Override: Return a custom leading view. -Verify: The leading area renders your custom UI. +- **What you’re changing**: Replace the leading view (avatar area). +- **File**: Any React module +- **Applies to**: `leadingView` +- **Default behavior**: Default avatar and status UI. +- **Override**: Return a custom leading view. +- **Verify**: The leading area renders your custom UI. @@ -522,14 +522,14 @@ const CustomLeadingView = (conversation: CometChat.Conversation) => { **What this does**: Replaces the avatar area with a custom view that can show typing state. -##### TrailingView +#### TrailingView -What you’re changing: Replace the trailing view (right side of list item). -File: Any React module -Applies to: `trailingView` -Default behavior: Default timestamp and badge UI. -Override: Return a custom trailing view. -Verify: The trailing area renders your custom UI. +- **What you’re changing**: Replace the trailing view (right side of list item). +- **File**: Any React module +- **Applies to**: `trailingView` +- **Default behavior**: Default timestamp and badge UI. +- **Override**: Return a custom trailing view. +- **Verify**: The trailing area renders your custom UI. @@ -629,14 +629,14 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { **What this does**: Replaces the trailing area with a custom time and status panel. -##### TextFormatters +#### TextFormatters -What you’re changing: Add custom text formatters to conversation previews. -File: Any React module -Applies to: `textFormatters` -Default behavior: Uses default text formatters. -Override: Provide a list of formatter instances. -Verify: Custom formatting appears in list items. +- **What you’re changing**: Add custom text formatters to conversation previews. +- **File**: Any React module +- **Applies to**: `textFormatters` +- **Default behavior**: Uses default text formatters. +- **Override**: Provide a list of formatter instances. +- **Verify**: Custom formatting appears in list items. @@ -826,14 +826,14 @@ import ShortcutFormatter from "./ShortCutFormatter"; **What this does**: Adds a custom text formatter that expands shortcuts and displays a dialog. -##### HeaderView +#### HeaderView -What you’re changing: Replace the default header UI. -File: Any React module -Applies to: `headerView` -Default behavior: Default title and actions. -Override: Provide a custom header view. -Verify: Header renders custom title and button. +- **What you’re changing**: Replace the default header UI. +- **File**: Any React module +- **Applies to**: `headerView` +- **Default behavior**: Default title and actions. +- **Override**: Provide a custom header view. +- **Verify**: Header renders custom title and button. @@ -900,14 +900,14 @@ const getHeaderView = () => { **What this does**: Replaces the header with a custom title and action button. -##### Last message date time format +#### Last message date time format -What you’re changing: Customize the timestamp format in the list. -File: Any React module -Applies to: `lastMessageDateTimeFormat` -Default behavior: Uses the component default format or global localization. -Override: Pass a `CalendarObject`. -Verify: Timestamps display in your format. +- **What you’re changing**: Customize the timestamp format in the list. +- **File**: Any React module +- **Applies to**: `lastMessageDateTimeFormat` +- **Default behavior**: Uses the component default format or global localization. +- **Override**: Pass a `CalendarObject`. +- **Verify**: Timestamps display in your format. ```ts new CalendarObject({ @@ -943,14 +943,14 @@ function getDateFormat() { **What this does**: Applies a custom date format to conversation timestamps. -##### TitleView +#### TitleView -What you’re changing: Replace the title area in list items. -File: Any React module -Applies to: `titleView` -Default behavior: Default title view. -Override: Return custom JSX for title. -Verify: The title view renders your custom layout. +- **What you’re changing**: Replace the title area in list items. +- **File**: Any React module +- **Applies to**: `titleView` +- **Default behavior**: Default title view. +- **Override**: Return custom JSX for title. +- **Verify**: The title view renders your custom layout. @@ -1016,14 +1016,14 @@ const customTitleView = (conversation: CometChat.Conversation) => { **What this does**: Customizes the title text and status line in each list item. -##### SubtitleView +#### SubtitleView -What you’re changing: Replace the subtitle area in list items. -File: Any React module -Applies to: `subtitleView` -Default behavior: Default subtitle with last message. -Override: Return custom subtitle JSX. -Verify: Subtitle area shows your custom content. +- **What you’re changing**: Replace the subtitle area in list items. +- **File**: Any React module +- **Applies to**: `subtitleView` +- **Default behavior**: Default subtitle with last message. +- **Override**: Return custom subtitle JSX. +- **Verify**: Subtitle area shows your custom content. @@ -1087,14 +1087,14 @@ function getFormattedTimestamp(timestamp: number): string { **What this does**: Replaces the subtitle with custom date content for users or groups. -##### Options +#### Options -What you’re changing: Customize the context menu options for each conversation. -File: Any React module -Applies to: `options` -Default behavior: Default menu actions. -Override: Provide your own `CometChatOption` list. -Verify: Custom options appear in the menu. +- **What you’re changing**: Customize the context menu options for each conversation. +- **File**: Any React module +- **Applies to**: `options` +- **Default behavior**: Default menu actions. +- **Override**: Provide your own `CometChatOption` list. +- **Verify**: Custom options appear in the menu. diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index a4d9a82e8..0058dc840 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -11,25 +11,13 @@ Display and manage members of a specific group with roles and status. - You want to search or filter members within a group. - You need selection mode for member management actions. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `group: CometChat.Group` (required), `onItemClick: (member: CometChat.GroupMember) => void`, `selectionMode: SelectionMode`, `groupMemberRequestBuilder: CometChat.GroupMembersRequestBuilder` -- **CSS class:** `.cometchat-group-members` -- **Events:** `CometChatGroupEvents` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. `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. @@ -37,22 +25,23 @@ Verify: The UI reflects the change shown below. - **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 -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `group: CometChat.Group` (required), `onItemClick: (member: CometChat.GroupMember) => void`, `selectionMode: SelectionMode`, `groupMemberRequestBuilder: CometChat.GroupMembersRequestBuilder` +- **CSS class:** `.cometchat-group-members` +- **Events:** `CometChatGroupEvents` + The following code snippet illustrates how you can directly incorporate the Group Members component into your Application. @@ -109,11 +98,19 @@ export default GroupMembersDemo; *** -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 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. @@ -209,7 +206,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. @@ -290,7 +287,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. @@ -365,7 +362,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. @@ -442,11 +439,11 @@ export default GroupMembersDemo; *** -#### Filters +### Filters **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 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) @@ -537,7 +534,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. @@ -618,7 +615,7 @@ export default GroupMembersDemo; *** -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -675,17 +672,17 @@ ccGroupMemberScopeChanged?.unsubscribe(); *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Group Members component. -#### Style +### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -762,7 +759,7 @@ export default GroupMembersDemo; *** -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -849,13 +846,13 @@ Below is a list of customizations along with corresponding code snippets, *** -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -##### ItemView +#### ItemView With this property, you can assign a custom ListItem to the Group Members Component. @@ -1043,7 +1040,7 @@ export default GroupMembersDemo; *** -##### TitleView +#### TitleView The customized chat interface is displayed below. @@ -1116,7 +1113,7 @@ const customTitleView = (member: CometChat.GroupMember) => { *** -##### SubtitleView +#### SubtitleView You can customize the subtitle view for each group members to meet your requirements. @@ -1199,7 +1196,7 @@ export default GroupMembersDemo; *** -##### LeadingView +#### LeadingView The customized chat interface is displayed below. @@ -1289,7 +1286,7 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { *** -##### TrailingView +#### TrailingView You can customize the trailing view for each group members to meet your requirements. @@ -1387,7 +1384,7 @@ export default GroupMembersDemo; *** -##### HeaderView +#### HeaderView You can set the Custom headerView to add more options to the Group Members component. @@ -1471,7 +1468,7 @@ const getHeaderView = () => { *** -##### Options +#### Options You can set the Custom options to the Group Members component. @@ -1558,13 +1555,13 @@ export default GroupMembersDemo; *** -### Component API Pattern +## Component API Pattern -What you’re changing: Component API Pattern. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Component API Pattern. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. | Customization Type | Prop Pattern | Example | | --- | --- | --- | diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 4c89964db..cc10832fc 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -11,24 +11,13 @@ Browse and select groups with search, member counts, and group type indicators. - You want a group picker to start group chats. - You need to filter groups by tags or type. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatGroups } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `onItemClick: (group: CometChat.Group) => void`, `selectionMode: SelectionMode`, `groupsRequestBuilder: CometChat.GroupsRequestBuilder`, `hideSearch: boolean`, `hideGroupType: boolean` -- **CSS class:** `.cometchat-groups` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. 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. @@ -36,7 +25,6 @@ The Groups is a Component, showcasing an accessible list of all available groups - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). @@ -50,15 +38,16 @@ The Groups component is composed of the following BaseComponents: *** -### Usage - -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +### Integration -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatGroups } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `onItemClick: (group: CometChat.Group) => void`, `selectionMode: SelectionMode`, `groupsRequestBuilder: CometChat.GroupsRequestBuilder`, `hideSearch: boolean`, `hideGroupType: boolean` +- **CSS class:** `.cometchat-groups` + The following code snippet illustrates how you can directly incorporate the Groups component into your Application. @@ -97,11 +86,19 @@ export default GroupsDemo; *** -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 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. @@ -159,7 +156,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. @@ -203,7 +200,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. @@ -247,11 +244,11 @@ export default GroupsDemo; -#### Filters +### Filters **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 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) @@ -314,7 +311,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. @@ -369,7 +366,7 @@ export default GroupsDemo; *** -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -379,17 +376,17 @@ The `Groups` component does not produce any events directly. *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -496,7 +493,7 @@ export default GroupsDemo; *** -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -561,13 +558,13 @@ Below is a list of customizations along with corresponding code snippets: *** -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -##### ItemView +#### ItemView A custom view to render for each group in the fetched list. @@ -720,7 +717,7 @@ export default GroupsDemo; *** -##### TitleView +#### TitleView The customized chat interface is displayed below. @@ -799,7 +796,7 @@ const customTitleView = (group: CometChat.Group) => { *** -##### SubtitleView +#### SubtitleView Custom subtitle view to be rendered for each group in the fetched list. @@ -895,7 +892,7 @@ export default GroupsDemo; *** -##### LeadingView +#### LeadingView The customized chat interface is displayed below. @@ -923,7 +920,6 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; {/* Icon here */} Joined -
:
Join -
}; } @@ -981,7 +976,7 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; *** -##### TrailingView +#### TrailingView The customized chat interface is displayed below. @@ -1041,7 +1036,7 @@ return
*** -##### Header View +#### Header View A custom component to render in the top-right corner of the groups list. @@ -1118,7 +1113,7 @@ export default GroupsDemo; *** -##### Options +#### Options You can set the Custom options to the Groups component. @@ -1213,14 +1208,13 @@ export default GroupsDemo; +## Component API Pattern -### Component API Pattern - -What you’re changing: Component API Pattern. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Component API Pattern. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. | Customization Type | Prop Pattern | Example | | --- | --- | --- | diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index 47e50d36b..f89e03df7 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -11,25 +11,13 @@ Render the incoming call UI with accept and decline actions. - You want a default accept/decline screen. - You need to customize call handling. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` — auto-detects incoming calls when mounted at app root -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed -- **Key props:** `onAccept` (callback), `onDecline` (callback), `call` (CometChat.Call), `disableSoundForCalls` (boolean), `callSettingsBuilder` (function) -- **CSS class:** `.cometchat-incoming-call` -- **Events:** `ccCallRejected`, `ccCallAccepted`, `ccCallEnded` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. 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. @@ -37,7 +25,6 @@ The `Incoming call` is a Component that serves as a visual representation when t - The `Incoming Call` is comprised of the following base components: | Components | Description | @@ -46,20 +33,21 @@ The `Incoming Call` is comprised of the following base components: | cometchat-button | This component represents a button with optional icon and text. | | cometchat-avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. | - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). -### Usage +### Integration -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` — auto-detects incoming calls when mounted at app root +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed +- **Key props:** `onAccept` (callback), `onDecline` (callback), `call` (CometChat.Call), `disableSoundForCalls` (boolean), `callSettingsBuilder` (function) +- **CSS class:** `.cometchat-incoming-call` +- **Events:** `ccCallRejected`, `ccCallAccepted`, `ccCallEnded` + @@ -94,11 +82,19 @@ export default IncomingCallsDemo; -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. 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. @@ -143,7 +139,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. @@ -188,7 +184,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. @@ -235,7 +231,7 @@ export default IncomingCallsDemo; *** -#### Filters +### Filters You can set `CallSettingsBuilder` in the Incoming Call Component to customise the calling experience. To know more about the filters available please refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings). @@ -292,7 +288,7 @@ export default IncomingCallsDemo; -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -350,17 +346,17 @@ ccCallEnded?.unsubscribe(); *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Incoming Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -518,7 +514,7 @@ export default IncomingCallsDemo; -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -575,13 +571,13 @@ Below is a list of customizations along with corresponding code snippets *** -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -##### SubtitleView +#### SubtitleView Property `subtitleView` is a function that renders a JSX element to display the subtitle view. @@ -628,7 +624,7 @@ export default IncomingCallsDemo; -##### LeadingView +#### LeadingView Property `leadingView` is a function that renders a JSX element to display the leading view. @@ -701,7 +697,7 @@ export default IncomingCallsDemo; -##### TitleView +#### TitleView Property `titleView` is a function that renders a JSX element to display the title view. @@ -809,7 +805,7 @@ export default IncomingCallsDemo; -##### TrailingView +#### TrailingView Property `trailingView` is a function that renders a JSX element to display the trailing view. @@ -901,7 +897,7 @@ export default IncomingCallsDemo; -##### ItemView +#### ItemView Property `itemView` is a function that renders a JSX element to display the item view. @@ -1019,7 +1015,6 @@ export default IncomingCallsDemo; - diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index de527c6ac..76a501f3d 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -11,25 +11,13 @@ Compose and send messages with attachments, mentions, and actions. - You want attachments, mentions, and rich actions. - You want to customize send behavior or UI. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` or `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `text: string`, `parentMessageId: number`, `hideVoiceRecording: boolean` -- **CSS class:** `.cometchat-message-composer` -- **Events:** `CometChatMessageEvents` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. MessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages. @@ -39,20 +27,23 @@ Features such as **Attachments**, and **Message Editing** are also supported by - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). -### Usage + -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +### Integration -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` or `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `text: string`, `parentMessageId: number`, `hideVoiceRecording: boolean` +- **CSS class:** `.cometchat-message-composer` +- **Events:** `CometChatMessageEvents` + The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app. @@ -109,11 +100,19 @@ export function MessageComposerDemo() { -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. 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. @@ -180,7 +179,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. @@ -217,7 +216,7 @@ export function MessageComposerDemo() { -##### 3. onTextChange +#### 3. onTextChange This event is triggered as the user starts typing in the Message Composer. @@ -257,7 +256,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. @@ -320,13 +319,13 @@ export function MessageComposerDemo() { *** -#### Filters +### Filters MessageComposer component does not have any available filters. *** -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -382,17 +381,17 @@ ccMessageSent?.unsubscribe(); *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the MessageComposer component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style To modify the styling, you can customise the css of MessageComposer Component. @@ -437,7 +436,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; *** -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -489,13 +488,13 @@ Below is a list of customizations along with corresponding code snippets *** -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -##### AttachmentOptions +#### AttachmentOptions By using `attachmentOptions`, you can set a list of custom `MessageComposerActions` for the MessageComposer Component. This will override the existing list of `MessageComposerActions`. @@ -592,7 +591,7 @@ function getAttachments() { *** -##### AuxiliaryButtonView +#### AuxiliaryButtonView You can insert a custom view into the MessageComposer component to add additional functionality using the following method. @@ -645,7 +644,7 @@ const auxiliaryButtonView = ( *** -##### SendButtonView +#### SendButtonView You can set a custom view in place of the already existing send button view. @@ -712,7 +711,7 @@ const sendButtonView = ( *** -##### HeaderView +#### HeaderView You can set custom headerView to the MessageComposer component using the following method. @@ -804,7 +803,7 @@ const getHeaderView = () => { *** -##### TextFormatters +#### TextFormatters Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index bc43e643f..57dd4a05f 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -11,24 +11,13 @@ Render the header for an active chat with name, avatar, status, and typing indic - You want typing indicators and presence in the header. - You want to customize the title or back button. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` or `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `hideBackButton: boolean`, `hideUserStatus: boolean` -- **CSS class:** `.cometchat-message-header` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. `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. @@ -36,7 +25,6 @@ Verify: The UI reflects the change shown below. - **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). @@ -48,15 +36,16 @@ The `MessageHeader` is comprised of the following components: | CometChatListItem | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. | | Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one. | -### Usage +### Integration -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` or `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `hideBackButton: boolean`, `hideUserStatus: boolean` +- **CSS class:** `.cometchat-message-header` + @@ -107,11 +96,19 @@ export function MessageHeaderDemo() { -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. 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. @@ -155,7 +152,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. @@ -198,7 +195,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. @@ -221,7 +218,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. @@ -244,29 +241,29 @@ const getOnItemClick = () => { *** -#### Filters +### Filters **Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK. The `MessageHeader` component does not have any exposed filters. -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `MessageHeader` component does not produce any events. -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Message Header component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style To customize the appearance, you can customise css of `CometChatMessageHeader` @@ -306,7 +303,7 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -340,11 +337,11 @@ Following is a list of customizations along with their corresponding code snippe | **Summary Generation Message Count** | Number of messages for which the summary should be shown. | `summaryGenerationMessageCount={1000}` | | **Disable Auto Summary Generation** | Disables the auto generation of conversation summary. | `disableAutoSummaryGeneration={true}` | -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. -##### ItemView +#### ItemView The customized chat interface is displayed below. @@ -400,7 +397,7 @@ const CustomItemView = ( *** -##### TitleView +#### TitleView The customized chat interface is displayed below. @@ -465,7 +462,7 @@ function CustomTitleView() { *** -##### SubtitleView +#### SubtitleView The customized chat interface is displayed below. @@ -497,7 +494,7 @@ function CustomSubtitleView() { *** -##### LeadingView +#### LeadingView The customized chat interface is displayed below. @@ -570,7 +567,7 @@ function CustomLeadingView() { *** -##### TrailingView +#### TrailingView The customized chat interface is displayed below. @@ -634,7 +631,7 @@ function CustomTrailingButtonView() { *** -##### AuxiliaryButtonView +#### AuxiliaryButtonView The customized chat interface is displayed below. @@ -696,7 +693,7 @@ function CustomAuxiliaryButtonView() { -##### LastActiveAt Date Time Format +#### LastActiveAt Date Time Format The `lastActiveAtDateTimeFormat` property allows you to customize the **last active** timestamp displayed in the message header. diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index 16ce37727..6f717f963 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -11,25 +11,13 @@ Render a scrollable list of messages for a user or group conversation. - You want read receipts, reactions, and threads. - You want to customize message rendering with templates. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatMessageList } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` or `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `messagesRequestBuilder: CometChat.MessagesRequestBuilder`, `templates: CometChatMessageTemplate[]`, `hideReceipts: boolean` -- **CSS class:** `.cometchat-message-list` -- **Events:** `CometChatMessageEvents` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. `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. @@ -37,22 +25,23 @@ Verify: The UI reflects the change shown below. - **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 -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatMessageList } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` or `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `messagesRequestBuilder: CometChat.MessagesRequestBuilder`, `templates: CometChatMessageTemplate[]`, `hideReceipts: boolean` +- **CSS class:** `.cometchat-message-list` +- **Events:** `CometChatMessageEvents` + The following code snippet illustrates how you can directly incorporate the MessageList component into your Application. @@ -117,11 +106,19 @@ To fetch messages for a specific entity, you need to supplement it with `User` o *** -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. 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. @@ -193,7 +190,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. @@ -259,7 +256,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. @@ -328,7 +325,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. @@ -403,9 +400,9 @@ export function MessageListDemo() { -#### Filters +### 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). @@ -484,7 +481,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. @@ -552,7 +549,7 @@ export function MessageListDemo() { -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -663,17 +660,17 @@ ccActiveChatChanged?.unsubscribe(); *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Message List component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style You can set the css to the MessageList Component Component to customize the styling. @@ -710,7 +707,7 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -821,11 +818,11 @@ Below is a list of customizations along with corresponding code snippets *** -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. -##### Templates +#### Templates [CometChatMessageTemplate](/ui-kit/react/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to [CometChatMessageTemplate](/ui-kit/react/message-template). @@ -953,7 +950,7 @@ export function MessageListDemo() { *** -##### Separator DateTime Format +#### Separator DateTime Format The `separatorDateTimeFormat` property allows you to customize the **Date Separator** timestamp displayed in the Message List. @@ -1010,7 +1007,7 @@ function getDateFormat() { *** -##### Sticky DateTime Format +#### Sticky DateTime Format The `stickyDateTimeFormat` property allows you to customize the **Sticky Date** timestamp displayed in the Message List. @@ -1066,7 +1063,7 @@ function getDateFormat() { *** -##### Message SentAt DateTime Format +#### Message SentAt DateTime Format The `messageSentAtDateTimeFormat` property allows you to customize the **Message SentAt** timestamp displayed in the Message List. @@ -1123,7 +1120,7 @@ function getDateFormat() { *** -##### Message Info DateTime Format +#### Message Info DateTime Format The `messageInfoDateTimeFormat` property allows you to customize the **Message Info** timestamp displayed in the Message List. @@ -1180,7 +1177,7 @@ function getDateFormat() { *** -##### Headerview +#### Headerview You can set custom headerView to the Message List component using the following method. @@ -1314,7 +1311,7 @@ export function MessageListDemo() { *** -##### FooterView +#### FooterView You can set custom footerview to the Message List component using the following method. @@ -1452,7 +1449,7 @@ export function MessageListDemo() { *** -##### TextFormatters +#### TextFormatters Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index a4f319b54..efc2ead3f 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -11,24 +11,13 @@ Define custom message templates to control bubble layout and rendering. - You want to override header/content/footer views. - You want consistent rendering across message categories. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react";` -- **Usage:** Pass `templates` prop to `CometChatMessageList` — get defaults via `ChatConfigurator.getDataSource().getAllMessageTemplates()` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key properties:** `category: string`, `type: string`, `contentView`, `bubbleView`, `headerView`, `footerView` -- **Related:** Used with [CometChatMessageList](/ui-kit/react/message-list) via the `templates` prop - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. **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). @@ -62,6 +51,17 @@ The Message Bubble structure can typically be broken down into the following vie *** +## Usage + + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react";` +- **Usage:** Pass `templates` prop to `CometChatMessageList` — get defaults via `ChatConfigurator.getDataSource().getAllMessageTemplates()` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key properties:** `category: string`, `type: string`, `contentView`, `bubbleView`, `headerView`, `footerView` +- **Related:** Used with [CometChatMessageList](/ui-kit/react/message-list) via the `templates` prop + + #### Properties MessageTemplate provides you with methods that allow you to alter various properties of the Message Bubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble, @@ -110,13 +110,13 @@ MessageTemplate provides you with methods that allow you to alter various proper *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/react/message-list) component. @@ -196,7 +196,7 @@ import { CometChatMessageList } from "@cometchat/uikit-react"; -##### HeaderView +#### HeaderView The `headerView` method of MessageTemplate allows you to add custom views to the header of your message bubbles. In the example below, we will add a custom header view of every text message in the MessageList. @@ -317,7 +317,7 @@ export { CustomMessageTemplate }; -##### Contentview +#### Contentview The `contentview` method of MessageTemplate allows you to add a custom view to the content of your message bubbles. In the example below, we will add a custom layout to the content view of every text message in the MessageList. @@ -583,7 +583,7 @@ export { CustomMessageTemplate }; -##### BottomView +#### BottomView The `bottomView` method of MessageTemplate allows you to add a custom button view to your message bubbles. In the example below, we will add a custom bottom view to every text message in the MessageList. @@ -746,7 +746,7 @@ export { CustomMessageTemplate }; -##### FooterView +#### FooterView The `footerView` method of MessageTemplate allows you to add a footer view to your message bubbles. In the example below, we will add a custom footer view to every text message in the MessageList. @@ -905,7 +905,7 @@ export { CustomMessageTemplate }; -##### BubbleView +#### BubbleView The `bubbleView` method of MessageTemplate allows you to add a bubble view to your message bubbles. In the example below, we will add a custom bubble view to the text message in the MessageList. @@ -1213,7 +1213,7 @@ export { CustomMessageTemplate }; -##### StatusInfoView +#### StatusInfoView The `statusInfoView` method of MessageTemplate allows you to add a status info view to your message bubbles. In the example below, we will add a custom status info view to every text message in the MessageList. @@ -1390,7 +1390,7 @@ export { CustomMessageTemplate }; -##### ReplyView +#### ReplyView The `replyView` method of MessageTemplate allows you to add a reply view to your message bubbles. In the example below, we will style the existing reply view in the MessageList. @@ -1404,7 +1404,6 @@ The `replyView` method of MessageTemplate allows you to add a reply view to your Custom Reply View - ```ts lines @@ -1489,7 +1488,7 @@ export { CustomMessageTemplate }; -##### Options +#### Options The `options` method in the MessageTemplate allows you to customize the options that appear in the action sheet when a message is long-pressed. By default, CometChat UI Kit provides a set of options like "Thread Reply", "Copy" ,"Edit", and "Delete". @@ -1816,7 +1815,6 @@ import readIcon from "../../assets/message-read.svg"; import sentIcon from "../../assets/message-sent.svg"; import deliveredIcon from "../../assets/message-delivered.svg"; - const CustomMessageTemplate = () => { const [templates, setTemplates] = React.useState([]); const [chatGroup, setChatGroup] = React.useState(); @@ -2001,7 +1999,6 @@ export { CustomMessageTemplate }; - diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index 68925dc36..bc7ec0a63 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -11,25 +11,13 @@ Show the outgoing call screen after initiating a call. - You want a default outgoing call UI. - You need to handle call cancellation. -## Implementation - - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` — requires a `CometChat.Call` object from `CometChat.initiateCall()` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed -- **Key props:** `call` (CometChat.Call, required), `onCallCanceled` (callback), `disableSoundForCalls` (boolean), `titleView` (JSX), `subtitleView` (JSX) -- **CSS class:** `.cometchat-outgoing-call` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +## Overview +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. 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. @@ -44,20 +32,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. | - **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 -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` — requires a `CometChat.Call` object from `CometChat.initiateCall()` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed +- **Key props:** `call` (CometChat.Call, required), `onCallCanceled` (callback), `disableSoundForCalls` (boolean), `titleView` (JSX), `subtitleView` (JSX) +- **CSS class:** `.cometchat-outgoing-call` + @@ -134,11 +122,19 @@ export default OutgoingCallDemo; -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onCallCanceled +#### 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. @@ -234,7 +230,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. @@ -327,7 +323,7 @@ export default OutgoingCallDemo; *** -#### Filters +### Filters **Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK. @@ -335,7 +331,7 @@ The `Outgoing Call` component does not have any exposed filters. *** -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -343,17 +339,17 @@ The `Outgoing Call` component does not have any exposed filters. *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Outgoing Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -468,7 +464,7 @@ export default OutgoingCallDemo; -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -564,13 +560,13 @@ Below is a list of customizations along with corresponding code snippets *** -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -##### TitleView +#### TitleView This prop renders the custom title view for the outgoing call. Use this to override the existing title of user name from the outgoing call. @@ -690,7 +686,7 @@ export default OutgoingCallDemo; -##### SubtitleView +#### SubtitleView This prop renders the custom sub title view for the outgoing call. Use this to override the existing sub title text from the outgoing call. @@ -823,7 +819,7 @@ export default OutgoingCallDemo; -##### AvatarView +#### AvatarView This prop renders the custom avatar view for the outgoing call. Use this to override the existing avatar image from the outgoing call. @@ -964,7 +960,7 @@ export default OutgoingCallDemo; -##### CancelButtonView +#### CancelButtonView This prop renders the custom cancel-call button view for the outgoing call. Use this to override the existing cancel call button view from the outgoing call. @@ -1112,7 +1108,6 @@ export default OutgoingCallDemo; - diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 8f14ba58b..9e596b163 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -11,42 +11,30 @@ Search across conversations and messages with filters and callbacks. - You want to search messages and conversations. - You want custom callbacks for search selection. -## Implementation - - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatSearch } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `onConversationClicked` (callback), `onMessageClicked` (callback), `searchFilters` (array), `searchIn` (array), `hideBackButton` (boolean) -- **CSS class:** `.cometchat-search` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +## Overview +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. 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. - **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 -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatSearch } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `onConversationClicked` (callback), `onMessageClicked` (callback), `searchFilters` (array), `searchIn` (array), `hideBackButton` (boolean) +- **CSS class:** `.cometchat-search` + @@ -89,11 +77,19 @@ export default SearchDemo; *** -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onConversationClicked +#### 1. onConversationClicked `onConversationClicked` is triggered when you click on a Conversation from the search result. The `onConversationClicked` action doesn't have a predefined behavior. You can override this action using the following code snippet. @@ -130,7 +126,7 @@ const openConversation = (conversation) => { *** -##### 2. onMessageClicked +#### 2. onMessageClicked `onMessageClicked` is triggered when you click on a Message from the search result. The `onMessageClicked` action doesn't have a predefined behavior. You can override this action using the following code snippet. @@ -167,7 +163,7 @@ const goToMessage = (message) => { *** -##### 3. OnBack +#### 3. 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. @@ -204,7 +200,7 @@ const onBack = () => { *** -##### 4. onError +#### 4. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component. @@ -241,9 +237,9 @@ const handleOnError = (error) => { *** -#### Filters +### Filters -##### 1. ConversationsRequestBuilder +#### 1. ConversationsRequestBuilder You can set the `ConversationsRequestBuilder` in the Search Component to filter the search result. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/javascript/retrieve-conversations). @@ -282,7 +278,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; *** -##### 2. MessagesRequestBuilder +#### 2. MessagesRequestBuilder You can set the `MessagesRequestBuilder` in the Search Component to filter the search result. You can modify the builder as per your specific requirements with multiple options available to know more refer to [MessagesRequestBuilder](/sdk/javascript/additional-message-filtering). @@ -317,7 +313,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; *** -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed. @@ -325,17 +321,17 @@ The `CometChatSearch` component does not produce any events. *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the `CometChatSearch` component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style To customize the appearance, you can customise css of `CometChatSearch` @@ -432,7 +428,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -479,37 +475,37 @@ Following is a list of customizations along with their corresponding code snippe | **Empty View** | A custom component to display when there are no conversations available. | `emptyView={<>Custom Empty View}` | | **Error View** | A custom component to display when an error occurs. | `errorView={<>Custom Error View}` | -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -##### ConversationItemView +#### ConversationItemView With this function, you can assign a custom list item view to an conversation in the search result. For more information, refer to the [itemView](/ui-kit/react/conversations#itemview) prop of the `CometChatConversations` component. -##### ConversationLeadingView +#### ConversationLeadingView With this function, you can assign a custom leading view of an conversation in the search result. For more information, refer to the [leadingView](/ui-kit/react/conversations#leadingview) prop of the `CometChatConversations` component. -##### ConversationTitleView +#### ConversationTitleView With this function, you can assign a custom title view to an conversation in the search result. For more information, refer to the [titleView](/ui-kit/react/conversations#titleview) prop of the `CometChatConversations` component. -##### ConversationSubtitleView +#### ConversationSubtitleView With this function, you can assign a custom subtitle view to an conversation in the search result. For more information, refer to the [subtitleView](/ui-kit/react/conversations#subtitleview) prop of the `CometChatConversations` component. -##### ConversationTrailingView +#### ConversationTrailingView With this function, you can assign a custom trailing view to an conversation in the search result. For more information, refer to the [trailingView](/ui-kit/react/conversations#trailingview) prop of the `CometChatConversations` component. -##### ConversationOptions +#### ConversationOptions A function that returns a list of actions available when hovering over a conversation item in the search result. For more information, refer to the [options](/ui-kit/react/conversations#options) prop of the `CometChatConversations` component. -##### MessageItemView +#### MessageItemView With this function, you can assign a custom item view of a message in the search result. @@ -583,7 +579,7 @@ const getMessageItemView = (message: CometChat.BaseMessage) => { *** -##### MessageLeadingView +#### MessageLeadingView With this function, you can assign a custom leading view of a message in the search result. @@ -648,7 +644,7 @@ const getMessageLeadingView = (message: CometChat.BaseMessage) => { *** -##### MessageTitleView +#### MessageTitleView With this function, you can assign a custom title view of a message in the search result. @@ -722,7 +718,7 @@ const getMessageTitleView = (message: CometChat.BaseMessage) => { *** -##### MessageSubtitleView +#### MessageSubtitleView With this function, you can assign a custom subtitle view of a message in the search result. @@ -796,7 +792,7 @@ const getMessageSubtitleView = (message: CometChat.BaseMessage) => { *** -##### MessageTrailingView +#### MessageTrailingView With this function, you can assign a custom trailing view of a message in the search result. @@ -913,7 +909,7 @@ const getMessageTrailingView = (message: CometChat.BaseMessage) => { *** -##### Message SentAt Date Time Format +#### Message SentAt Date Time Format The `MessageSentAtDateTimeFormat` property allows you to customize the **Message Sent At** timestamp displayed in the Search. @@ -959,11 +955,10 @@ function getDateFormat() { *** -##### Text Formatters +#### 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. - diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index 363f3009c..1986618af 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -11,25 +11,13 @@ Display the parent message and reply count for a thread. - You need a header showing the parent message. - You want to handle closing the thread view. -## Implementation - - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `parentMessage: CometChat.BaseMessage` (required) -- **CSS class:** `.cometchat-thread-header` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +## Overview +- **What you’re changing**: Overview. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. CometChatThreadHeader is a Component that displays the parent message & number of replies of thread. @@ -37,20 +25,20 @@ CometChatThreadHeader is a Component that displays the parent message & number o - **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 -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `parentMessage: CometChat.BaseMessage` (required) +- **CSS class:** `.cometchat-thread-header` + The following code snippet illustrates how you can directly incorporate the CometChatThreadHeader component into your Application. @@ -116,7 +104,15 @@ export function ThreadHeaderDemo() { *** -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### 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. @@ -165,7 +161,7 @@ export function ThreadHeaderDemo() { *** -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -173,19 +169,19 @@ The ThreadHeader Component does not emit any events of its own. *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. 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. *** -#### Style +### Style 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. @@ -247,7 +243,7 @@ export function ThreadHeaderDemo() { *** -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -303,11 +299,11 @@ Below is a list of customizations along with corresponding code snippets | **Show Scrollbar** | Controls the visibility of the scrollbar in the component. | `showScrollbar={true}` | | **On Error** | Callback function triggered when an error occurs. | `onError={(error: CometChat.CometChatException) => console.log(error)}` | -#### Advanced +### Advanced *** -##### Separator DateTime Format +#### Separator DateTime Format The `separatorDateTimeFormat` property allows you to customize the **Date Separator** timestamp displayed in the Threaded Message Preview. @@ -361,7 +357,7 @@ function getDateFormat() { *** -##### **Message SentAt DateTime Format** +#### **Message SentAt DateTime Format** The `messageSentAtDateTimeFormat` property allows you to customize the **Message SentAt** timestamp displayed in the Threaded Message Preview. diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index 38dee4155..6f02eec26 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -11,32 +11,17 @@ List and select users with search and presence using the CometChatUsers componen - You want a user picker to start new chats. - You need to filter users by tags, roles, or status. -## Implementation +## Overview - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatUsers } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `onItemClick: (user: CometChat.User) => void`, `selectionMode: SelectionMode`, `usersRequestBuilder: CometChat.UsersRequestBuilder`, `hideSearch: boolean`, `showSectionHeader: boolean` -- **CSS class:** `.cometchat-users` - - -### Overview - -What you’re changing: Overview. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -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. +- 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. - **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). @@ -48,17 +33,16 @@ The Users component is composed of the following BaseComponents: | CometChatList | A reusable container component having title, search box, customisable background and a list view. | | CometChatListItem | A component that renders data obtained from a User object on a Tile having a title, subtitle, leading and trailing view. | -*** +### Integration -### Usage - -What you’re changing: Usage. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. - -#### Integration + +- **Package:** `@cometchat/chat-uikit-react` +- **Import:** `import { CometChatUsers } from "@cometchat/chat-uikit-react";` +- **Minimal JSX:** `` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` +- **Key props:** `onItemClick: (user: CometChat.User) => void`, `selectionMode: SelectionMode`, `usersRequestBuilder: CometChat.UsersRequestBuilder`, `hideSearch: boolean`, `showSectionHeader: boolean` +- **CSS class:** `.cometchat-users` + The following code snippet illustrates how you can directly incorporate the Users component into your Application. @@ -93,11 +77,19 @@ export default UsersDemo; -#### Actions +## Usage + +- **What you’re changing**: Usage. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. + +### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 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. @@ -154,7 +146,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. @@ -195,7 +187,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. @@ -237,7 +229,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. @@ -279,11 +271,11 @@ export default UsersDemo; -#### Filters +### Filters **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 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) @@ -348,7 +340,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. @@ -401,7 +393,7 @@ export default UsersDemo; *** -#### Events +### Events [Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. @@ -411,17 +403,17 @@ The `Users` component does not produce any events directly. *** -### Customization +## Customization -What you’re changing: Customization. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Customization. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. To fit your app's design requirements, you can customize the appearance of the Users component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. -#### Style +### Style Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -517,7 +509,7 @@ export default UsersDemo; *** -#### Functionality +### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. @@ -584,13 +576,13 @@ Below is a list of customizations along with corresponding code snippets *** -#### Advanced +### Advanced For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. *** -##### ItemView +#### ItemView A custom view to render for each user in the fetched list. @@ -706,7 +698,7 @@ export default UsersDemo; *** -##### TitleView +#### TitleView The customized chat interface is displayed below. @@ -781,7 +773,7 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; *** -##### SubtitleView +#### SubtitleView A custom view to render the subtitle for each user. @@ -885,7 +877,7 @@ export default UsersDemo; *** -##### HeaderView +#### HeaderView You can set the Custom headerView to add more options to the Users component. @@ -966,7 +958,7 @@ const getHeaderView = () => { *** -##### LeadingView +#### LeadingView The customized chat interface is displayed below. @@ -1040,7 +1032,7 @@ const customLeadingView = (user: CometChat.User): JSX.Element => { *** -##### TrailingView +#### TrailingView The customized chat interface is displayed below. @@ -1112,7 +1104,7 @@ const customTrailingButtonView = (user:CometChat.User) => { *** -##### Options +#### Options A function that returns a list of actions available when hovering over a user item. @@ -1211,13 +1203,13 @@ export default UsersDemo; -### Component API Pattern +## Component API Pattern -What you’re changing: Component API Pattern. -Where to change it: Component props or CSS as shown below. -Default behavior: UI Kit defaults. -Override: Use the examples in this section. -Verify: The UI reflects the change shown below. +- **What you’re changing**: Component API Pattern. +- **Where to change it**: Component props or CSS as shown below. +- **Default behavior**: UI Kit defaults. +- **Override**: Use the examples in this section. +- **Verify**: The UI reflects the change shown below. | Customization Type | Prop Pattern | Example | | --- | --- | --- | From e2ccd93fcfc39d4a4cb85b8666b0d2bdc7aecb38 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 25 Feb 2026 19:53:40 +0530 Subject: [PATCH 84/84] restores components because I did lot of experiments around components --- ui-kit/react/ai-assistant-chat.mdx | 146 +++---- ui-kit/react/call-buttons.mdx | 134 +++--- ui-kit/react/call-logs.mdx | 147 +++---- ui-kit/react/components-overview.mdx | 122 +++--- ui-kit/react/conversations.mdx | 601 ++++++++++++++++----------- ui-kit/react/group-members.mdx | 155 +++---- ui-kit/react/groups.mdx | 157 +++---- ui-kit/react/incoming-call.mdx | 144 +++---- ui-kit/react/message-composer.mdx | 130 ++---- ui-kit/react/message-header.mdx | 129 ++---- ui-kit/react/message-list.mdx | 151 ++----- ui-kit/react/message-template.mdx | 139 +++---- ui-kit/react/outgoing-call.mdx | 134 +++--- ui-kit/react/search.mdx | 141 +++---- ui-kit/react/thread-header.mdx | 110 ++--- ui-kit/react/users.mdx | 157 +++---- 16 files changed, 1093 insertions(+), 1604 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 16c0a8980..779d91675 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -3,21 +3,45 @@ title: "AI Assistant Chat" description: "Build an AI agent chat experience with streaming responses, quick suggestions, chat history, and custom tools using the CometChatAIAssistantChat component." --- -Build an AI assistant chat surface with streaming responses and suggestions. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; + +// 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 + +``` + -- You need a dedicated AI agent chat experience. -- You want streaming responses and suggested prompts. -- You need a chat history sidebar for AI conversations. + +**AI Agent Component Spec** -## Overview +**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 + -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. +## 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. @@ -25,6 +49,7 @@ Build an AI assistant chat surface with streaming responses and suggestions. + **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). @@ -53,7 +78,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -81,7 +105,6 @@ export function AIAssistantChatDemo() { } ``` -**What this does**: Shows the code for this step. @@ -92,24 +115,7 @@ export function AIAssistantChatDemo() { --- -## Usage - - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` — requires a `CometChat.User` representing the AI agent -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` then `CometChat.getUser("assistant_uid")` -- **Key props:** `user` (CometChat.User, required), `streamingSpeed` (number), `suggestedMessages` (string[]), `hideNewChat` (boolean), `hideChatHistory` (boolean) -- **CSS class:** `.cometchat-ai-assistant-chat` - - -### Actions - -- **What you’re changing**: Actions. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. +## Actions [Actions](/ui-kit/react/components-overview#actions) control how a component behaves. You can hook into the following callbacks: @@ -147,7 +153,6 @@ export function AIAssistantChatDemo() { } ``` -**What this does**: Shows the code for this step. @@ -179,7 +184,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -217,7 +221,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -249,7 +252,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -286,7 +288,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -317,7 +318,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -353,7 +353,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -382,21 +381,15 @@ export function AIAssistantChatDemo() { ) } ``` -**What this does**: Shows the code for this step. + --- ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app’s design requirements, you can customize the appearance of the Assistant Chat component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -430,7 +423,6 @@ export function AIAssistantChatDemo = () => { ); } ``` -**What this does**: Shows the code for this step. @@ -456,7 +448,6 @@ export function AIAssistantChatDemo = () => { ); } ``` -**What this does**: Shows the code for this step. @@ -488,7 +479,6 @@ export function AIAssistantChatDemo = () => { background: #30a46c; } ``` -**What this does**: Shows the code for this step. @@ -525,7 +515,6 @@ export function AIAssistantChatDemo = () => { ) } ``` -**What this does**: Shows the code for this step. @@ -556,7 +545,6 @@ export function AIAssistantChatDemo = () => { ); } ``` -**What this does**: Shows the code for this step. @@ -633,7 +621,6 @@ export function AIAssistantChatDemo = () => { ); ``` -**What this does**: Shows the code for this step. @@ -669,7 +656,6 @@ export function AIAssistantChatDemo = () => { ); } ``` -**What this does**: Shows the code for this step. @@ -706,7 +692,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -733,7 +718,6 @@ export function AIAssistantChatDemo() { ) } ``` -**What this does**: Shows the code for this step. @@ -775,7 +759,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -807,7 +790,6 @@ export function AIAssistantChatDemo() { ) } ``` -**What this does**: Shows the code for this step. @@ -832,7 +814,6 @@ export function AIAssistantChatDemo() { color: #6852d6; } ``` -**What this does**: Shows the code for this step. @@ -872,7 +853,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -903,7 +883,6 @@ export function AIAssistantChatDemo() { ); } ``` -**What this does**: Shows the code for this step. @@ -928,7 +907,6 @@ export function AIAssistantChatDemo() { margin: 10px 0; } ``` -**What this does**: Shows the code for this step. @@ -971,7 +949,6 @@ export function AIAssistantChatDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -1008,7 +985,6 @@ export function AIAssistantChatDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -1016,6 +992,7 @@ export function AIAssistantChatDemo() { *** + @@ -1033,32 +1010,19 @@ export function AIAssistantChatDemo() { --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Set agent | `CometChatAIAssistantChat` | `user` | `user={agent}` | -| Streaming speed | `CometChatAIAssistantChat` | `streamingSpeed` | `streamingSpeed={30}` | -| Suggested messages | `CometChatAIAssistantChat` | `suggestedMessages` | `suggestedMessages={["Help"]}` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Assistant does not render | Agent user missing | Fetch the agent `CometChat.User` first | -| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | -| No suggestions | `suggestedMessages` empty | Provide an array of suggestions | - -## FAQ - -**Do I need a CometChat user for the agent?** -Yes. Pass the AI agent as a `CometChat.User`. - -**Can I change suggestions dynamically?** -Yes. Update `suggestedMessages` prop. - -## Next steps - -- [AI Features](/ui-kit/react/ai-features) -- [Message List](/ui-kit/react/message-list) -- [Message Composer](/ui-kit/react/message-composer) +## Next Steps + + + + Overview of all AI capabilities in the UI Kit + + + Render messages in a conversation + + + Customize message bubble rendering + + + Customize the conversation header + + diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index f45c82e97..0b516d5ef 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -3,21 +3,42 @@ title: "Call Buttons" description: "Add voice and video call buttons to initiate calls using the CometChatCallButtons component." --- -Render voice and video call buttons for a user or group. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -- You want call buttons in chat headers. -- You need to start audio or video calls. -- You want to hide specific call types. +// For a user + -## Overview +// For a group + + +// With options + +``` + + + +**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` + -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. +## 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. @@ -25,21 +46,14 @@ The `Call Button` is a Component provides users with the ability to make calls, + **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). -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatCallButtons } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` or `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed -- **Key props:** `user` (CometChat.User), `group` (CometChat.Group), `hideVideoCallButton` (boolean), `hideVoiceCallButton` (boolean), `onError` (callback) -- **CSS class:** `.cometchat-call-button` -- **Events:** `ccCallRejected`, `ccCallEnded`, `ccOutgoingCall`, `ccMessageSent` - +### Integration @@ -60,7 +74,6 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -**What this does**: Shows the code for this step. @@ -82,18 +95,9 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -**What this does**: Shows the code for this step. -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -126,7 +130,6 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -**What this does**: Shows the code for this step. @@ -154,7 +157,6 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -**What this does**: Shows the code for this step. @@ -202,7 +204,6 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -**What this does**: Shows the code for this step. @@ -241,7 +242,6 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -**What this does**: Shows the code for this step. @@ -289,7 +289,6 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { //Your Code }); ``` -**What this does**: Shows the code for this step. @@ -308,7 +307,6 @@ ccOutgoingCall?.unsubscribe(); ccMessageSent?.unsubscribe(); ``` -**What this does**: Shows the code for this step. @@ -318,12 +316,6 @@ ccMessageSent?.unsubscribe(); ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the Call Buttons component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -356,7 +348,6 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -**What this does**: Shows the code for this step. @@ -380,7 +371,6 @@ const CallButtonDemo = () => { export default CallButtonDemo; ``` -**What this does**: Shows the code for this step. @@ -427,7 +417,6 @@ export default CallButtonDemo; background-color: #6852d6; } ``` -**What this does**: Shows the code for this step. @@ -435,13 +424,7 @@ export default CallButtonDemo; *** -### Configurations - -- **What you’re changing**: Configurations. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. +## Configurations Configurations offer the ability to customize the properties of each component within a Composite Component. `CallButtons` component renders [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component. @@ -485,32 +468,19 @@ You can refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Hide voice | `CometChatCallButtons` | `hideVoiceCallButton` | `hideVoiceCallButton={true}` | -| Hide video | `CometChatCallButtons` | `hideVideoCallButton` | `hideVideoCallButton={true}` | -| Custom call settings | `CometChatCallButtons` | `callSettingsBuilder` | `callSettingsBuilder={(call) => ...}` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Buttons not showing | Calls SDK missing | Install `@cometchat/calls-sdk-javascript` | -| Buttons not working | User/group missing | Pass a valid `user` or `group` | -| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | - -## FAQ - -**Can I hide video calls?** -Yes. Set `hideVideoCallButton={true}`. - -**Do buttons work for groups?** -Yes. Pass `group={chatGroup}`. - -## Next steps - -- [Incoming Call](/ui-kit/react/incoming-call) -- [Outgoing Call](/ui-kit/react/outgoing-call) -- [Call Features](/ui-kit/react/call-features) +## Next Steps + + + + Manage outgoing voice and video call UI + + + Handle incoming voice and video calls + + + Display call history and call log details + + + Overview of all calling capabilities + + diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index e3a985271..3fd35a67e 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -3,24 +3,42 @@ title: "Call Logs" description: "Display and manage call history with filtering, custom views, and call-back functionality using the CometChatCallLogs component." --- -Show call history with callbacks and filters. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; -- You need a call history view. -- You want to handle call log item clicks. -- You need to customize call back actions. +// Minimal usage + -## Overview +// With common props + console.log("Selected:", callLog)} + onCallButtonClicked={(callLog) => console.log("Call back:", callLog)} + title="Call History" +/> +``` + + + +**AI Agent Component Spec** -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. +**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. + @@ -33,21 +51,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. | + **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). -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatCallLogs } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `onItemClick` (callback), `onCallButtonClicked` (callback), `callLogRequestBuilder` (CallLogRequestBuilder), `title` (string), `activeCall` (object) -- **CSS class:** `.cometchat-call-logs` -- **Events:** `ccMessageSent` - +### Integration @@ -61,7 +72,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -76,19 +86,10 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -112,7 +113,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -130,7 +130,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -155,7 +154,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -173,7 +171,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -199,7 +196,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -217,7 +213,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -269,7 +264,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -292,7 +286,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -319,7 +312,6 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { //Your Code }); ``` -**What this does**: Shows the code for this step. @@ -332,7 +324,6 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { ```tsx lines ccMessageSent?.unsubscribe(); ``` -**What this does**: Shows the code for this step. @@ -342,12 +333,6 @@ ccMessageSent?.unsubscribe(); ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the Call Logs component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -372,7 +357,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -387,7 +371,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -432,7 +415,6 @@ export default CallLogDemo; border-radius: 8px; } ``` -**What this does**: Shows the code for this step. @@ -458,7 +440,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -473,7 +454,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -515,7 +495,6 @@ new CalendarObject({ otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM" }); ``` -**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Call Initiated** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -537,7 +516,6 @@ function getDateFormat() { // Apply the custom format to the CometChatCallLogs component ; ``` -**What this does**: Shows the code for this step. @@ -643,7 +621,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -701,7 +678,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -742,7 +718,6 @@ export default CallLogDemo; font-style: normal; } ``` -**What this does**: Shows the code for this step. @@ -822,7 +797,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -868,7 +842,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -882,7 +855,6 @@ export default CallLogDemo; font-style: normal; } ``` -**What this does**: Shows the code for this step. @@ -946,7 +918,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -986,7 +957,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -1001,7 +971,6 @@ export default CallLogDemo; font-style: normal; } ``` -**What this does**: Shows the code for this step. @@ -1056,7 +1025,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -1089,7 +1057,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -1127,7 +1094,6 @@ export default CallLogDemo; width: 32px; } ``` -**What this does**: Shows the code for this step. @@ -1175,7 +1141,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -1201,7 +1166,6 @@ const CallLogDemo = () => { export default CallLogDemo; ``` -**What this does**: Shows the code for this step. @@ -1215,12 +1179,12 @@ export default CallLogDemo; font: 500 16px Roboto; } ``` -**What this does**: Shows the code for this step. + @@ -1238,32 +1202,19 @@ export default CallLogDemo; --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Handle item click | `CometChatCallLogs` | `onItemClick` | `onItemClick={(log) => ...}` | -| Handle call back | `CometChatCallLogs` | `onCallButtonClicked` | `onCallButtonClicked={(log) => ...}` | -| Filter logs | `CometChatCallLogs` | `callLogRequestBuilder` | `new CometChat.CallLogRequestBuilder()` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Logs not shown | Init/login missing | Call `CometChatUIKit.init()` and `login()` | -| No data | No call history | Verify the logged-in user has calls | -| Callbacks not firing | Wrong prop name | Use `onItemClick` or `onCallButtonClicked` | - -## FAQ - -**Can I trigger a call from a log?** -Yes. Use `onCallButtonClicked`. - -**How do I filter logs?** -Use `callLogRequestBuilder`. - -## Next steps - -- [Call Buttons](/ui-kit/react/call-buttons) -- [Call Features](/ui-kit/react/call-features) -- [Theming](/ui-kit/react/theme) +## Next Steps + + + + Add voice and video call buttons to your chat + + + Handle incoming voice and video calls + + + Manage outgoing voice and video calls + + + Build a call log details view + + diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index 36d9a52dc..5a0d87305 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -3,25 +3,11 @@ title: "Overview" description: "Browse all prebuilt UI components in the CometChat React UI Kit — conversations, messages, users, groups, calls, search, and AI." --- -Browse and understand the full set of CometChat React UI Kit components. This page is for developers who need a quick, accurate map of what to import and where to start. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this - -- You need a list of all available UI Kit components. -- You want to know which component maps to a specific feature. -- You want to understand the common API patterns across components. -- You need to find related pages for customization and theming. - -## Usage - -Component import pattern - -- **What you’re changing**: Import the UI Kit components you plan to render. -- **File**: Any React module (for example `src/App.tsx`) -- **Applies to**: UI Kit component imports -- **Default behavior**: Components are available for JSX use. -- **Override**: Import only what you need. -- **Verify**: The import compiles and components render. +All components are imported from `@cometchat/chat-uikit-react`: ```tsx import { @@ -29,62 +15,80 @@ import { CometChatMessageList, CometChatMessageComposer, CometChatMessageHeader, + CometChatUsers, + CometChatGroups, + CometChatGroupMembers, + CometChatThreadHeader, + CometChatIncomingCall, + CometChatOutgoingCall, + CometChatCallButtons, + CometChatCallLogs, } from "@cometchat/chat-uikit-react"; ``` -**What this does**: Imports the core chat components. +- **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) + -### Actions + +**AI Agent Component Spec** -- **What you’re changing**: Override component behavior via callbacks. -- **Where to change it**: Component props in JSX -- **Applies to**: Any component that exposes `on` props -- **Default behavior**: Predefined actions run automatically. -- **Override**: Provide your own handler using `on={(param) => {}}`. -- **Verify**: Your callback fires on interaction. +**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 + -Example pattern: +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. -```tsx - console.log(conversation)} /> -``` +## Actions + +Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions. + +### Predefined Actions -**What this does**: Logs the conversation when a user selects a list item. +These are actions that are inherently programmed into a UI component. They are ingrained in the component itself by default, and they execute automatically in response to user interaction, without needing any additional user input. -### Events +### User-Defined Actions -- **What you’re changing**: Listen to UI Kit events to coordinate UI. -- **Where to change it**: Your app-level state or event handlers -- **Applies to**: UI Kit events emitted by components -- **Default behavior**: Components emit events on state changes. -- **Override**: Subscribe where needed to respond. -- **Verify**: Your app updates when events emit. +These are actions that must be explicitly specified by the user. They are not innately part of the component like predefined actions. Instead, they must be developed based on the unique needs of the user or the application. User-defined actions provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application. -## Customization matrix +To customize the behavior of a component, actions can be overridden by you. This provides you with control over how the component responds to specific events or interactions. -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Override behavior on user interaction | Component props | `on` | `onItemClick={(c) => setActive(c)}` | -| Hide a built-in feature | Component props | `hide` | `hideReceipts={true}` | -| Filter or request data | Component props | `RequestBuilder` | `messagesRequestBuilder={new CometChat.MessagesRequestBuilder()}` | -| Custom render slots | Component props | `View` | `titleView={() => }` | -| Component theming | Global CSS | `.cometchat-` | `.cometchat-conversations { --cometchat-primary-color: #f76808; }` | +All components expose actions to the user, which means that users can interact with these types of components through predefined or user-defined actions. -## Common pitfalls and fixes +*** -| Symptom | Cause | Fix | -| --- | --- | --- | -| Components render blank | `CometChatUIKit.init()` or `login()` not called | Initialize and log in before rendering components. | -| Call UI missing | Calls SDK not installed | Install `@cometchat/calls-sdk-javascript`. | -| Custom view not appearing | JSX returns `null` or `undefined` | Return a valid JSX element from the view prop. | -| Callback not firing | Wrong prop name | Use the exact `on` prop name from the component page. | -| Styles not applying | CSS Modules used | Use global CSS and `.cometchat` selectors. | +## Events -## FAQ +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. -**Do I need to import every component?** -No. Import only the components you render. +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. -**Where do I find component-specific props and actions?** -Open the individual component pages linked above. +--- + +## Next Steps + + + + Display and manage the list of recent conversations + + + Render messages for a selected conversation + + + Customize colors, fonts, and styles across all components + + + Init, login, logout, and utility methods reference + + diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index f38a4a26c..202168428 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -3,30 +3,49 @@ title: "Conversations" description: "Display and manage the list of recent conversations for the logged-in user using the CometChatConversations component in the React UI Kit." --- -Build and customize the conversations list in your React app. This page is for developers who need a complete, step-by-step guide to rendering conversations, handling actions, and customizing the UI. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChatConversations } from "@cometchat/chat-uikit-react"; -- You need a list of recent conversations for the logged-in user. -- You want unread counts, last message previews, and typing indicators. -- You want to handle selection or navigation when a conversation is clicked. -- You need to filter conversations by type or tags. -- You want to customize list items, header, and actions. +// Minimal usage + -## Usage +// With common props + setActiveChat(conversation)} + hideReceipts={false} + selectionMode={SelectionMode.none} +/> +``` + + + +**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 -### Integrate the component +The Conversations is a Component, that shows all conversations related to the currently logged-in user. -- **What you’re changing**: Add the conversations list to your UI. -- **File**: `src/ConversationsDemo.tsx` -- **Applies to**: `CometChatConversations` -- **Default behavior**: Renders a scrollable list of recent conversations. -- **Override**: Add props such as `onItemClick` or `selectionMode`. -- **Verify**: Conversation tiles render with avatars, names, last messages, and unread counts. + +## Usage + +### Integration -```tsx +```tsx lines import { CometChatConversations, TitleAlignment, @@ -35,79 +54,92 @@ import { function ConversationsDemo() { return (
- +
+ +
); } export default ConversationsDemo; ``` + -```jsx -import { CometChatConversations } from "@cometchat/chat-uikit-react"; +```jsx lines +import { + CometChatConversations, +} from "@cometchat/chat-uikit-react"; function ConversationsDemo() { return (
- +
+ +
); } export default ConversationsDemo; ``` + + -**What this does**: Renders the conversations list with default UI behavior. +**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 -- **What you’re changing**: Override default behavior by handling component actions. -- **File**: Any React module -- **Applies to**: `onItemClick`, `onSelect`, `onError`, `onSearchBarClicked` -- **Default behavior**: Actions emit events but do not change your app state. -- **Override**: Provide callbacks to update your UI or app state. -- **Verify**: Your handlers run when the action fires. +[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 -#### 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. -```tsx +```tsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; const getOnItemClick = (conversation: CometChat.Conversation) => { console.log("ItemClick:", conversation); + // Your custom action here }; ; ``` + -```jsx +```jsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; const getOnItemClick = (conversation) => { console.log("ItemClick:", conversation); + // Your custom action here }; ; ``` + + -**What this does**: Handles a conversation click and lets you update app state. +*** -#### 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. -```tsx +```tsx lines import { CometChatConversations, SelectionMode, @@ -118,7 +150,8 @@ const getOnSelect = ( conversation: CometChat.Conversation, selected: boolean ) => { - console.log("Selected:", conversation.getConversationId(), selected); + console.log("Selected, ", conversation.getConversationId(), selected); + // Your custom action on select }; ; ``` + -```jsx +```jsx lines import { CometChatConversations, SelectionMode, } from "@cometchat/chat-uikit-react"; const getOnSelect = (conversation, selected) => { - console.log("Selected:", conversation.getConversationId(), selected); + console.log("Selected, ", conversation.getConversationId(), selected); + // Your custom action on select }; { onSelect={getOnSelect} />; ``` + + -**What this does**: Handles list selection changes in multi-select mode. +*** + +#### 3. OnError -#### OnError +This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component. -```tsx +```tsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; const handleOnError = (error: CometChat.CometChatException) => { - console.log("Error:", error); + // Your exception handling code }; ; ``` + -```jsx +```jsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; const handleOnError = (error) => { - console.log("Error:", error); + // Your exception handling code }; ; ``` + + -**What this does**: Captures and logs errors emitted by the component. +*** -#### onSearchBarClicked +#### 4. onSearchBarClicked + +The `onSearchBarClicked` event is triggered when the user clicks the search bar. It does not have a default behavior. However, you can override its behavior using the following code snippet. -```tsx +```tsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; const handleSearchClick = () => { @@ -193,10 +237,11 @@ const handleSearchClick = () => { ; ``` + -```jsx +```jsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; const handleSearchClick = () => { @@ -205,21 +250,43 @@ const handleSearchClick = () => { ; ``` + + -**What this does**: Triggers your handler when users click the search bar. +*** ### Filters -- **What you’re changing**: Filter or limit the conversations list. -- **File**: Any React module -- **Applies to**: `conversationsRequestBuilder` -- **Default behavior**: Fetches default conversation list. -- **Override**: Use `CometChat.ConversationsRequestBuilder` to filter. -- **Verify**: The list respects your limit or filters. +You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/javascript/retrieve-conversations). -```tsx +You can set filters using the following parameters. + +1. **Conversation Type:** Filters on type of Conversation, `User` or `Groups` +2. **Limit:** Number of conversations fetched in a single request. +3. **WithTags:** Filter on fetching conversations containing tags +4. **Tags:** Filters on specific `Tag` +5. **UserTags:** Filters on specific User `Tag` +6. **GroupTags:** Filters on specific Group `Tag` + + + +```tsx lines +import { CometChatConversations } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +; +``` + + + + +```jsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -230,20 +297,19 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; />; ``` -**What this does**: Limits the list to 10 conversations per request. + + + + +*** ### Events -- **What you’re changing**: Subscribe to conversation events. -- **File**: Any React module -- **Applies to**: `CometChatConversationEvents` -- **Default behavior**: Events emit globally without app handling. -- **Override**: Subscribe and react to event payloads. -- **Verify**: Your handler runs on conversation events. +[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. -```tsx +```tsxtsx lines const ccConversationDeleted = CometChatConversationEvents.ccConversationDeleted.subscribe( (conversation: CometChat.Conversation) => { @@ -251,31 +317,30 @@ const ccConversationDeleted = } ); ``` + - -**What this does**: Subscribes to conversation deletion events. + -```tsx +```tsxtsx lines ccConversationDeleted?.unsubscribe(); ``` + + -**What this does**: Cleans up the event subscription. +*** ## 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. + ### Style -- **What you’re changing**: Override CSS for the conversations list. -- **File**: Global stylesheet (for example `src/App.css`) -- **Applies to**: `.cometchat-conversations` selectors -- **Default behavior**: UI Kit default styles. -- **Override**: Use CSS overrides. -- **Verify**: Fonts, colors, and badges update. +Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts. @@ -283,13 +348,14 @@ ccConversationDeleted?.unsubscribe(); -```tsx +```tsx lines ``` + -```css +```css lines .cometchat-conversations .cometchat-list-item__body-title, .cometchat-conversations .cometchat-list__header-title, .cometchat-conversations .cometchat-avatar__text, @@ -320,79 +386,86 @@ ccConversationDeleted?.unsubscribe(); background: #e96b6f; } ``` + - -**What this does**: Applies custom typography and color styling to the conversations list. + ### Functionality -- **What you’re changing**: Adjust built-in UI behavior with props. -- **File**: Any React module -- **Applies to**: Conversations props -- **Default behavior**: UI Kit default behavior. -- **Override**: Use props listed below. -- **Verify**: UI changes reflect the prop values. +These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. -```tsx +```tsx lines
- +
+ +
``` + -```jsx +```jsx lines
- +
+ +
``` + + -**What this does**: Sets a custom title for the conversations header. +Below is a list of customizations along with corresponding code snippets -| Property | Description | Code | -| --- | --- | --- | -| Hide Receipts | Disables read receipts in the list | `hideReceipts={false}` | -| Hide Error | Hides default and custom error views | `hideError={true}` | -| Hide Delete Conversation | Hides delete action in the menu | `hideDeleteConversation={false}` | -| Hide User Status | Hides online status indicator | `hideUserStatus={true}` | -| Hide Group Type | Hides group type icon | `hideGroupType={false}` | -| Show Search Bar | Shows the search bar | `showSearchBar={true}` | -| Active Conversation | Highlights the active conversation | `activeConversation={activeConversation}` | -| Selection Mode | Enables multi-select | `selectionMode={SelectionMode.multiple}` | -| Disable Sound For Messages | Disables incoming message sounds | `disableSoundForMessages={false}` | -| Custom Sound For Messages | Custom incoming message sound | `customSoundForMessages="Your custom sound url"` | -| Search View | Custom search view | `searchView={<>Custom Search View}` | -| Loading View | Custom loading view | `loadingView={<>Custom Loading View}` | -| Empty View | Custom empty state | `emptyView={<>Custom Empty View}` | -| Error View | Custom error state | `errorView={<>Custom Error View}` | - -#### Advanced views +| Property | Description | Code | +| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | +| **Hide Receipts** | Disables the display of message read receipts. If set to `true`, the receipt status of the sent message won't be displayed. | `hideReceipts={false}` | +| **Hide Error** | Hides the default and the custom error view passed in the `errorView` prop. | `hideError={true}` | +| **Hide Delete Conversation** | Hides the delete conversation option in the default context menu. | `hideDeleteConversation={false}` | +| **Hide User Status** | Hides the user's online/offline status indicator. | `hideUserStatus={true}` | +| **Hide Group Type** | Hides the group type icon. | `hideGroupType={false}` | +| **Show Search Bar** | Shows the search bar. | `showSearchBar={true}` | +| **Active Conversation** | Specifies the conversation to highlight in the list. | `activeConversation={activeConversation}` | +| **Selection Mode** | Determines the selection mode for the component. | `selectionMode={SelectionMode.multiple}` | +| **Disable Sound For Messages** | Used to Disable sound for incoming messages. | `disableSoundForMessages={false}` | +| **Custom Sound For Messages** | Custom audio sound for incoming messages. | `customSoundForMessages="Your custom sound url"` | +| **Search View** | A custom search view which replaces the default search bar. | `searchView={<>Custom Search View}` | +| **Loading View** | A custom component to display during the loading state. | `loadingView={<>Custom Loading View}` | +| **Empty View** | A custom component to display when there are no conversations available. | `emptyView={<>Custom Empty View}` | +| **Error View** | A custom component to display when an error occurs. | `errorView={<>Custom Error View}` | + +### Advanced + +For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. + +*** #### ItemView -- **What you’re changing**: Replace the default list item with a custom view. -- **File**: Any React module -- **Applies to**: `itemView` -- **Default behavior**: UI Kit default list item layout. -- **Override**: Return a custom `CometChatListItem`. -- **Verify**: List items render with your custom UI. +With this function, you can assign a custom ListItem to the Conversations Component. + +Shown below is the default chat interface. +The customized chat interface is displayed below. + +Use the following code to achieve the customization shown above. + -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatListItem, @@ -416,12 +489,15 @@ const getItemView = (conversation: CometChat.Conversation) => { ); }; -; +; ``` + -```css +```css lines .cometchat-conversations .cometchat-avatar { border-radius: 8px; width: 32px; @@ -432,27 +508,26 @@ const getItemView = (conversation: CometChat.Conversation) => { gap: 4px; } ``` + + -**What this does**: Replaces the default item layout with a custom list item view. +*** #### LeadingView -- **What you’re changing**: Replace the leading view (avatar area). -- **File**: Any React module -- **Applies to**: `leadingView` -- **Default behavior**: Default avatar and status UI. -- **Override**: Return a custom leading view. -- **Verify**: The leading area renders your custom UI. +The customized chat interface is displayed below. +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 { @@ -460,11 +535,11 @@ import { CometChatAvatar, } from "@cometchat/chat-uikit-react"; import { useEffect, useRef, useState } from "react"; - const [isTyping, setIsTyping] = useState(false); const typingObjRef = useRef(null); useEffect(() => { + //adding typing listeners const messageListenerId: string = "typing_demo_" + new Date().getTime(); CometChat.addMessageListener( messageListenerId, @@ -476,7 +551,7 @@ useEffect(() => { onTypingEnded: (typingIndicator: CometChat.TypingIndicator) => { if ( typingObjRef.current && - typingObjRef.current.getSender().getUid() === + typingObjRef.current.getSender().getUid() == typingIndicator.getSender().getUid() ) { typingObjRef.current = null; @@ -490,18 +565,22 @@ useEffect(() => { }; }, [setIsTyping]); +// Custom leading view component const CustomLeadingView = (conversation: CometChat.Conversation) => { const conversationObj = conversation.getConversationWith(); const isUser = conversationObj instanceof CometChat.User; const isGroup = conversationObj instanceof CometChat.Group; + // Check if the current user is typing const isMyTyping = isUser ? (conversationObj as CometChat.User).getUid() === - typingObjRef.current?.getSender().getUid() + typingObjRef.current?.getSender().getUid() && + loggedInUser?.getUid() === typingObjRef.current?.getReceiverId() : isGroup && (conversationObj as CometChat.Group).getGuid() === typingObjRef.current?.getReceiverId(); + // Determine avatar and name const avatar = isUser ? (conversationObj as CometChat.User).getAvatar() : (conversationObj as CometChat.Group).getIcon(); @@ -514,34 +593,33 @@ const CustomLeadingView = (conversation: CometChat.Conversation) => {
); }; - ; ``` + + -**What this does**: Replaces the avatar area with a custom view that can show typing state. +*** #### TrailingView -- **What you’re changing**: Replace the trailing view (right side of list item). -- **File**: Any React module -- **Applies to**: `trailingView` -- **Default behavior**: Default timestamp and badge UI. -- **Override**: Return a custom trailing view. -- **Verify**: The trailing area renders your custom UI. +The customized chat interface is displayed below. +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"; +// Custom trailing view component const CustomTrailingButtonView = (conv: CometChat.Conversation) => { if (!conv.getLastMessage()) { return <>; @@ -550,19 +628,23 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { const now = new Date(); const time = new Date(timestamp); + // Calculate time difference const diffInMs = now.getTime() - time.getTime(); const diffInMinutes = Math.floor(diffInMs / (1000 * 60)); const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60)); - let backgroundColorClass = "conversations__trailing-view-min"; - let topLabel = `${diffInMinutes}`; - let bottomLabel = `${diffInMinutes === 1 ? "Min ago" : "Mins ago"}`; + // Determine the labels + let backgroundColorClass = "conversations__trailing-view-min"; // Default (less than 1 hour) + let topLabel = `${diffInMinutes}`; // Default minutes + let bottomLabel = `${diffInMinutes === 1 ? "Min ago" : "Mins ago"}`; // Default "Mins ago" if (diffInHours >= 1 && diffInHours <= 10) { + // 1-10 hours backgroundColorClass = "conversations__trailing-view-hour"; topLabel = `${diffInHours}`; bottomLabel = `${diffInHours === 1 ? "Hour ago" : "Hours ago"}`; } else if (diffInHours > 10) { + // More than 10 hours backgroundColorClass = "conversations__trailing-view-date"; topLabel = time.toLocaleDateString("en-US", { day: "numeric" }); bottomLabel = time.toLocaleDateString("en-US", { @@ -580,10 +662,11 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { ; ``` + -```css +```css lines .conversations__trailing-view { display: flex; flex-direction: column; @@ -624,23 +707,20 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { height: 50px; } ``` + + -**What this does**: Replaces the trailing area with a custom time and status panel. +*** #### TextFormatters -- **What you’re changing**: Add custom text formatters to conversation previews. -- **File**: Any React module -- **Applies to**: `textFormatters` -- **Default behavior**: Uses default text formatters. -- **Override**: Provide a list of formatter instances. -- **Verify**: Custom formatting appears in list items. +Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) -```ts +```ts lines import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; import DialogHelper from "./Dialog"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -649,7 +729,7 @@ class ShortcutFormatter extends CometChatTextFormatter { private shortcuts: { [key: string]: string } = {}; private dialogIsOpen: boolean = false; private dialogHelper = new DialogHelper(); - private currentShortcut: string | null = null; + private currentShortcut: string | null = null; // Track the currently open shortcut constructor() { super(); @@ -675,6 +755,7 @@ class ShortcutFormatter extends CometChatTextFormatter { const shortcut = match[0]; const replacement = this.shortcuts[shortcut]; if (replacement) { + // Close the currently open dialog, if any if (this.dialogIsOpen && this.currentShortcut !== shortcut) { this.closeDialog(); } @@ -703,13 +784,14 @@ class ShortcutFormatter extends CometChatTextFormatter { } closeDialog() { - this.dialogHelper.closeDialog(); + this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog this.dialogIsOpen = false; this.currentShortcut = null; } handleButtonClick = (buttonText: string) => { if (this.currentCaretPosition && this.currentRange) { + // Inserting the replacement text corresponding to the shortcut const shortcut = Object.keys(this.shortcuts).find( (key) => this.shortcuts[key] === buttonText ); @@ -748,10 +830,11 @@ class ShortcutFormatter extends CometChatTextFormatter { export default ShortcutFormatter; ``` + -```tsx +```tsx lines import React from "react"; import ReactDOM from "react-dom"; @@ -761,6 +844,8 @@ interface DialogProps { } const Dialog: React.FC = ({ onClick, buttonText }) => { + console.log("buttonText", buttonText); + return (
-```tsx +```tsx lines import ShortcutFormatter from "./ShortCutFormatter"; ; ``` + + -**What this does**: Adds a custom text formatter that expands shortcuts and displays a dialog. +#### Header View -#### HeaderView +You can set the Custom Header view to add more options to the Conversations component. -- **What you’re changing**: Replace the default header UI. -- **File**: Any React module -- **Applies to**: `headerView` -- **Default behavior**: Default title and actions. -- **Override**: Provide a custom header view. -- **Verify**: Header renders custom title and button. +The customized chat interface is displayed below. +Use the following code to achieve the customization shown above. + -```ts +```ts lines import { CometChatButton, CometChatConversations, @@ -850,7 +935,7 @@ import { const getHeaderView = () => { return (
-
CHATS
+
{localize("CHATS")}
{ // logic here @@ -863,10 +948,11 @@ const getHeaderView = () => { ; ``` + -```css +```css lines .conversations__header { display: flex; width: 100%; @@ -874,6 +960,8 @@ const getHeaderView = () => { 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; @@ -895,74 +983,83 @@ const getHeaderView = () => { display: block; } ``` + + -**What this does**: Replaces the header with a custom title and action button. +*** -#### Last message date time format +#### Last Message Date Time Format -- **What you’re changing**: Customize the timestamp format in the list. -- **File**: Any React module -- **Applies to**: `lastMessageDateTimeFormat` -- **Default behavior**: Uses the component default format or global localization. -- **Override**: Pass a `CalendarObject`. -- **Verify**: Timestamps display in your format. +The `lastMessageDateTimeFormat` property allows you to customize the **Last Message** timestamp is displayed in the conversations. -```ts +Default Date Time Format: + +```ruby lines new CalendarObject({ - today: `hh:mm A`, - yesterday: `[yesterday]`, - otherDays: `DD/MM/YYYY`, + today: `hh:mm A`, // Example: "10:30 AM" + yesterday: `[yesterday]`, // Example: "yesterday" + otherDays: `DD/MM/YYYY`, // Example: "25/05/2025" }); ``` -**What this does**: Shows the default date format pattern. +The following example demonstrates how to modify the **Last Message** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). -```ts +```ts lines import { CometChatConversations, CalendarObject, } from "@cometchat/chat-uikit-react"; +// Define a custom date format pattern function getDateFormat() { const dateFormat = new CalendarObject({ - today: `DD MMM, hh:mm A`, - yesterday: `DD MMM, hh:mm A`, - otherDays: `DD MMM, hh:mm A`, + today: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM" + yesterday: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM" + otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM" }); return dateFormat; } +// Apply the custom format to the CometChatConversations component ; ``` + + -**What this does**: Applies a custom date format to conversation timestamps. + + +**Fallback Mechanism** + +* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**. + + + +*** #### TitleView -- **What you’re changing**: Replace the title area in list items. -- **File**: Any React module -- **Applies to**: `titleView` -- **Default behavior**: Default title view. -- **Override**: Return custom JSX for title. -- **Verify**: The title view renders your custom layout. +The customized chat interface is displayed below. +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"; +// Custom title view component const customTitleView = (conversation: CometChat.Conversation) => { let user = conversation.getConversationType() == "user" @@ -986,10 +1083,11 @@ const customTitleView = (conversation: CometChat.Conversation) => { ; ``` + -```css +```css lines .cometchat-conversations .conversations__title-view { display: flex; gap: 4px; @@ -1011,31 +1109,34 @@ const customTitleView = (conversation: CometChat.Conversation) => { text-align: left; } ``` + + -**What this does**: Customizes the title text and status line in each list item. +*** #### SubtitleView -- **What you’re changing**: Replace the subtitle area in list items. -- **File**: Any React module -- **Applies to**: `subtitleView` -- **Default behavior**: Default subtitle with last message. -- **Override**: Return custom subtitle JSX. -- **Verify**: Subtitle area shows your custom content. +You can customize the subtitle view for each conversation item to meet your requirements. + +Shown below is the default chat interface. +The customized chat interface is displayed below. + +Use the following code to achieve the customization shown above. + -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -1045,7 +1146,9 @@ const subtitleView = (conversation: CometChat.Conversation) => { <> Last Message at:{" "} {getFormattedTimestamp( - (conversation.getConversationWith() as CometChat.User).getLastActiveAt() + ( + conversation.getConversationWith() as CometChat.User + ).getLastActiveAt() )} ); @@ -1068,10 +1171,11 @@ function getFormattedTimestamp(timestamp: number): string { ; ``` + -```css +```css lines .cometchat-conversations .cometchat-list-item__body-subtitle { overflow: hidden; color: var(--cometchat-text-color-secondary, #727272); @@ -1082,31 +1186,34 @@ function getFormattedTimestamp(timestamp: number): string { font-style: normal; } ``` + + -**What this does**: Replaces the subtitle with custom date content for users or groups. +*** #### Options -- **What you’re changing**: Customize the context menu options for each conversation. -- **File**: Any React module -- **Applies to**: `options` -- **Default behavior**: Default menu actions. -- **Override**: Provide your own `CometChatOption` list. -- **Verify**: Custom options appear in the menu. +A function that returns a list of actions available when hovering over a conversation item. + +Shown below is the default chat interface. +The customized chat interface is displayed below. + +Use the following code to achieve the customization shown above. + -```ts +```ts lines import { CometChatOption, CometChatConversations, @@ -1148,10 +1255,11 @@ const getOptions = (conversation: CometChat.Conversation) => { ; ``` + -```css +```css lines .cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete { background: red; } @@ -1166,51 +1274,64 @@ const getOptions = (conversation: CometChat.Conversation) => { -webkit-mask-size: contain; } ``` + + -**What this does**: Replaces the default menu options and styles the menu. +#### Structure of CometChatOption -| Name | Description | -| --- | --- | -| id | Unique identifier for each option. | -| title | Display label for the option. | -| iconURL | Icon asset URL. | -| onClick | Handler invoked when the option is selected. | +| Name | Description | +| ----------- | ----------------------------------------------------- | +| **id** | Unique identifier for each option. | +| **title** | Heading text for each option. | +| **iconURL** | Sets the asset URL of the icon for each option. | +| **onClick** | Method to be invoked when user clicks on each option. | -## Customization matrix +*** -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Handle item click | `CometChatConversations` | `onItemClick` | `onItemClick={(c) => setActive(c)}` | -| Enable multi-select | `CometChatConversations` | `selectionMode` | `selectionMode={SelectionMode.multiple}` | -| Filter conversations | `CometChatConversations` | `conversationsRequestBuilder` | `new CometChat.ConversationsRequestBuilder().setLimit(10)` | -| Custom list item | `CometChatConversations` | `itemView` | `itemView={(c) => }` | -| Custom header | `CometChatConversations` | `headerView` | `headerView={myHeader}` | -| Custom styles | Global CSS | `.cometchat-conversations` | `.cometchat-conversations { ... }` | -## Common pitfalls and fixes +## Component API Pattern -| Symptom | Cause | Fix | +| Customization Type | Prop Pattern | Example | | --- | --- | --- | -| Component does not render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. | -| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init. | -| `onItemClick` not firing | Wrong prop name | Use `onItemClick`. | -| Custom view not appearing | Returning `null` or `undefined` | Return valid JSX from view prop. | -| SSR hydration error | UI Kit uses browser APIs | Render in `useEffect` or use `ssr: false` in Next.js. | -| Conversations list empty after login | Filters too restrictive | Remove or adjust `conversationsRequestBuilder`. | -| Events not received | Listener not subscribed or unsubscribed early | Subscribe in `useEffect` and unsubscribe in cleanup. | +| 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 { ... }` | -## FAQ + + -**Can I show only group conversations?** -Yes. Use `conversationsRequestBuilder` to filter by type. +| 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 | -**How do I customize the list item layout?** -Use `itemView`, `leadingView`, `titleView`, `subtitleView`, or `trailingView`. + + -## Next steps +--- -- [Message List](/ui-kit/react/message-list) -- [Users](/ui-kit/react/users) -- [Groups](/ui-kit/react/groups) +## Next Steps + + + + Display messages for the selected conversation + + + Browse and select users to start new conversations + + + Browse and manage group conversations + + + Customize the appearance of the conversations list + + diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index 0058dc840..999653e30 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -3,21 +3,39 @@ title: "Group Members" description: "CometChatGroupMembers component displays all users in a group with their roles, scopes, and online status. Supports member management actions, custom views, filtering via GroupMembersRequestBuilder, and CSS styling." --- -Display and manage members of a specific group with roles and status. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -- You need a member list for a specific group. -- You want to search or filter members within a group. -- You need selection mode for member management actions. +// Requires a CometChat.Group object + -## Overview +// With common props + console.log("Selected:", groupMember)} + selectionMode={SelectionMode.none} +/> +``` + -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. + +**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. @@ -25,23 +43,16 @@ Display and manage members of a specific group with roles and status. + **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). *** -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `group: CometChat.Group` (required), `onItemClick: (member: CometChat.GroupMember) => void`, `selectionMode: SelectionMode`, `groupMemberRequestBuilder: CometChat.GroupMembersRequestBuilder` -- **CSS class:** `.cometchat-group-members` -- **Events:** `CometChatGroupEvents` - +### Integration The following code snippet illustrates how you can directly incorporate the Group Members component into your Application. @@ -66,7 +77,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -90,7 +100,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -98,14 +107,6 @@ export default GroupMembersDemo; *** -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -158,7 +159,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -200,7 +200,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -244,7 +243,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -281,7 +279,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -322,7 +319,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -356,7 +352,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -397,7 +392,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -431,7 +425,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -491,7 +484,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -528,7 +520,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -572,7 +563,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -607,7 +597,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -649,7 +638,6 @@ const ccGroupMemberScopeChanged = } ); ``` -**What this does**: Shows the code for this step. @@ -664,7 +652,6 @@ ccGroupMemberKicked?.unsubscribe(); ccGroupMemberScopeChanged?.unsubscribe(); ``` -**What this does**: Shows the code for this step. @@ -674,12 +661,6 @@ ccGroupMemberScopeChanged?.unsubscribe(); ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the Group Members component. ### Style @@ -712,7 +693,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -751,7 +731,6 @@ export default GroupMembersDemo; width: 40px; } ``` -**What this does**: Shows the code for this step. @@ -790,7 +769,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -820,7 +798,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -947,7 +924,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -1032,7 +1008,6 @@ export default GroupMembersDemo; display: none; } ``` -**What this does**: Shows the code for this step. @@ -1067,7 +1042,6 @@ const customTitleView = (member: CometChat.GroupMember) => { ; ``` -**What this does**: Shows the code for this step. @@ -1105,7 +1079,6 @@ const customTitleView = (member: CometChat.GroupMember) => { background: #0B7BEA; } ``` -**What this does**: Shows the code for this step. @@ -1174,7 +1147,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -1188,7 +1160,6 @@ export default GroupMembersDemo; font: 400 14px Roboto; } ``` -**What this does**: Shows the code for this step. @@ -1231,7 +1202,6 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { }; ; ``` -**What this does**: Shows the code for this step. @@ -1278,7 +1248,6 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { background: #09C26F; } ``` -**What this does**: Shows the code for this step. @@ -1356,7 +1325,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -1376,7 +1344,6 @@ export default GroupMembersDemo; font: 400 12px Roboto; } ``` -**What this does**: Shows the code for this step. @@ -1421,7 +1388,6 @@ const getHeaderView = () => { ``` -**What this does**: Shows the code for this step. @@ -1460,7 +1426,6 @@ const getHeaderView = () => { display: block; } ``` -**What this does**: Shows the code for this step. @@ -1528,7 +1493,6 @@ const GroupMembersDemo = () => { export default GroupMembersDemo; ``` -**What this does**: Shows the code for this step. @@ -1547,7 +1511,6 @@ export default GroupMembersDemo; box-shadow: none; } ``` -**What this does**: Shows the code for this step. @@ -1557,12 +1520,6 @@ export default GroupMembersDemo; ## Component API Pattern -- **What you’re changing**: Component API Pattern. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - | Customization Type | Prop Pattern | Example | | --- | --- | --- | | Callback actions | `on={(param) => {}}` | `onItemClick={(member) => {}}` | @@ -1588,35 +1545,19 @@ export default GroupMembersDemo; --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Handle member click | `CometChatGroupMembers` | `onItemClick` | `onItemClick={(m) => ...}` | -| Enable multi-select | `CometChatGroupMembers` | `selectionMode` | `selectionMode={SelectionMode.multiple}` | -| Filter members | `CometChatGroupMembers` | `groupMemberRequestBuilder` | `new CometChat.GroupMembersRequestBuilder(guid)` | -| Search members | `CometChatGroupMembers` | `searchRequestBuilder` | `new CometChat.GroupMembersRequestBuilder(guid).setSearchKeyword(...)` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Component does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | -| Members not shown | Missing or invalid group | Ensure `group` is a valid `CometChat.Group` | -| Search results empty | Search builder too strict | Adjust `searchRequestBuilder` | -| Callbacks not firing | Wrong prop name | Use `onItemClick` or `onSelect` | -| Styles not applying | CSS Modules used | Use global CSS with `.cometchat-group-members` | - -## FAQ - -**Is `group` required?** -Yes. `CometChatGroupMembers` requires a `CometChat.Group`. - -**Can I filter by role?** -Use `GroupMembersRequestBuilder` filters or custom views. - -## Next steps - -- [Groups](/ui-kit/react/groups) -- [Conversations](/ui-kit/react/conversations) -- [Theming](/ui-kit/react/theme) +## Next Steps + + + + Display and manage group lists + + + Display and manage user lists + + + Render messages in a chat view + + + Display recent conversations + + diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index cc10832fc..9d2ea9667 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -3,21 +3,38 @@ title: "Groups" description: "CometChatGroups component displays a searchable list of all available groups with icons, names, member counts, and group type indicators. Supports selection modes, custom views, filtering via GroupsRequestBuilder, and CSS styling." --- -Browse and select groups with search, member counts, and group type indicators. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChatGroups } from "@cometchat/chat-uikit-react"; -- You need a searchable list of groups. -- You want a group picker to start group chats. -- You need to filter groups by tags or type. +// Minimal usage + -## Overview +// With common props + console.log("Selected:", group)} + hideSearch={false} + selectionMode={SelectionMode.none} +/> +``` + + + +**AI Agent Component Spec** -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. +**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. @@ -25,6 +42,7 @@ The Groups is a Component, showcasing an accessible list of all available groups + **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). @@ -38,16 +56,9 @@ The Groups component is composed of the following BaseComponents: *** -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatGroups } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `onItemClick: (group: CometChat.Group) => void`, `selectionMode: SelectionMode`, `groupsRequestBuilder: CometChat.GroupsRequestBuilder`, `hideSearch: boolean`, `hideGroupType: boolean` -- **CSS class:** `.cometchat-groups` - +### Integration The following code snippet illustrates how you can directly incorporate the Groups component into your Application. @@ -63,7 +74,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -78,7 +88,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -86,14 +95,6 @@ export default GroupsDemo; *** -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -126,7 +127,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -150,7 +150,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -176,7 +175,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -194,7 +192,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -220,7 +217,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -238,7 +234,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -283,7 +278,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -305,7 +299,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -336,7 +329,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -358,7 +350,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -378,12 +369,6 @@ The `Groups` component does not produce any events directly. ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the Groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -408,7 +393,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -423,7 +407,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -485,7 +468,6 @@ export default GroupsDemo; line-height: 16.8px; } ``` -**What this does**: Shows the code for this step. @@ -515,7 +497,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -536,7 +517,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -609,7 +589,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -638,7 +617,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -709,7 +687,6 @@ export default GroupsDemo; line-height: 16.8px; } ``` -**What this does**: Shows the code for this step. @@ -744,7 +721,6 @@ const customTitleView = (group: CometChat.Group) => { ; ``` -**What this does**: Shows the code for this step. @@ -788,7 +764,6 @@ const customTitleView = (group: CometChat.Group) => { width: 12px; } ``` -**What this does**: Shows the code for this step. @@ -839,7 +814,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -867,7 +841,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -884,7 +857,6 @@ export default GroupsDemo; line-height: 120%; } ``` -**What this does**: Shows the code for this step. @@ -920,6 +892,7 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; {/* Icon here */} Joined +
:
Join +
}; } ; ``` -**What this does**: Shows the code for this step. @@ -968,7 +941,6 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; position: relative; } ``` -**What this does**: Shows the code for this step. @@ -1004,7 +976,6 @@ return
; ``` -**What this does**: Shows the code for this step. @@ -1028,7 +999,6 @@ return
height: fit-content; } ``` -**What this does**: Shows the code for this step. @@ -1064,7 +1034,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -1083,7 +1052,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -1105,7 +1073,6 @@ export default GroupsDemo; mask-size: contain; } ``` -**What this does**: Shows the code for this step. @@ -1149,7 +1116,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -1176,7 +1142,6 @@ const GroupsDemo = () => { export default GroupsDemo; ``` -**What this does**: Shows the code for this step. @@ -1202,19 +1167,13 @@ export default GroupsDemo; mask-size: contain; } ``` -**What this does**: Shows the code for this step. -## Component API Pattern -- **What you’re changing**: Component API Pattern. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. +## Component API Pattern | Customization Type | Prop Pattern | Example | | --- | --- | --- | @@ -1240,35 +1199,19 @@ export default GroupsDemo; --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Handle item click | `CometChatGroups` | `onItemClick` | `onItemClick={(g) => setActive(g)}` | -| Enable multi-select | `CometChatGroups` | `selectionMode` | `selectionMode={SelectionMode.multiple}` | -| Filter groups | `CometChatGroups` | `groupsRequestBuilder` | `new CometChat.GroupsRequestBuilder().setLimit(10)` | -| Hide group type | `CometChatGroups` | `hideGroupType` | `hideGroupType={true}` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Component does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | -| List is empty | Filters too strict | Relax `groupsRequestBuilder` filters | -| Group type icon missing | `hideGroupType` enabled | Set `hideGroupType={false}` | -| Callbacks not firing | Wrong prop name | Use `onItemClick` or `onSelect` | -| Styles not applying | CSS Modules used | Use global CSS with `.cometchat-groups` | - -## FAQ - -**Can I show only joined groups?** -Yes. Use `GroupsRequestBuilder` filters for membership. - -**How do I hide the group type icon?** -Set `hideGroupType={true}`. - -## Next steps - -- [Group Members](/ui-kit/react/group-members) -- [Conversations](/ui-kit/react/conversations) -- [Theming](/ui-kit/react/theme) +## Next Steps + + + + View and manage members within a group + + + Display and manage user lists + + + Display recent conversations + + + Render messages in a chat view + + diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index f89e03df7..cf90bf14c 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -3,21 +3,38 @@ title: "Incoming Call" description: "Display and manage incoming voice and video calls with accept/decline controls using the CometChatIncomingCall component." --- -Render the incoming call UI with accept and decline actions. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; -- You need to handle incoming audio/video calls. -- You want a default accept/decline screen. -- You need to customize call handling. +// Minimal usage — auto-detects incoming calls + -## Overview +// With custom handlers + console.log("Call accepted")} + onDecline={() => console.log("Call declined")} + disableSoundForCalls={false} +/> +``` + + + +**AI Agent Component Spec** -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. +**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. @@ -25,6 +42,7 @@ The `Incoming call` is a Component that serves as a visual representation when t + The `Incoming Call` is comprised of the following base components: | Components | Description | @@ -33,21 +51,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. | + **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). -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` — auto-detects incoming calls when mounted at app root -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed -- **Key props:** `onAccept` (callback), `onDecline` (callback), `call` (CometChat.Call), `disableSoundForCalls` (boolean), `callSettingsBuilder` (function) -- **CSS class:** `.cometchat-incoming-call` -- **Events:** `ccCallRejected`, `ccCallAccepted`, `ccCallEnded` - +### Integration @@ -61,7 +72,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -76,20 +86,11 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -114,7 +115,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -133,7 +133,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -159,7 +158,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -178,7 +176,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -204,7 +201,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -223,7 +219,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -257,7 +252,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -282,7 +276,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -321,7 +314,6 @@ const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe( } ); ``` -**What this does**: Shows the code for this step. @@ -338,7 +330,6 @@ ccCallAccepted?.unsubscribe(); ccCallEnded?.unsubscribe(); ``` -**What this does**: Shows the code for this step. @@ -348,12 +339,6 @@ ccCallEnded?.unsubscribe(); ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the Incoming Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -378,7 +363,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -393,7 +377,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -508,7 +491,6 @@ export default IncomingCallsDemo; justify-content: center; } ``` -**What this does**: Shows the code for this step. @@ -536,7 +518,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -555,7 +536,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -598,7 +578,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -618,7 +597,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -657,7 +635,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -681,7 +658,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -691,7 +667,6 @@ export default IncomingCallsDemo; display: none; } ``` -**What this does**: Shows the code for this step. @@ -734,7 +709,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -762,7 +736,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -799,7 +772,6 @@ export default IncomingCallsDemo; width: 20px; } ``` -**What this does**: Shows the code for this step. @@ -839,7 +811,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -864,7 +835,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -891,7 +861,6 @@ export default IncomingCallsDemo; background-size: contain; } ``` -**What this does**: Shows the code for this step. @@ -938,7 +907,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -970,7 +938,6 @@ const IncomingCallsDemo = () => { export default IncomingCallsDemo; ``` -**What this does**: Shows the code for this step. @@ -1009,12 +976,12 @@ export default IncomingCallsDemo; font: 400 16px Roboto; } ``` -**What this does**: Shows the code for this step. + @@ -1032,32 +999,19 @@ export default IncomingCallsDemo; --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Handle accept | `CometChatIncomingCall` | `onAccept` | `onAccept={() => ...}` | -| Handle decline | `CometChatIncomingCall` | `onDecline` | `onDecline={() => ...}` | -| Disable sounds | `CometChatIncomingCall` | `disableSoundForCalls` | `disableSoundForCalls={true}` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Incoming UI not shown | Component not mounted | Render `CometChatIncomingCall` at root | -| Calls not available | Calls SDK missing | Install `@cometchat/calls-sdk-javascript` | -| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | - -## FAQ - -**Where should I mount it?** -At the app root so it can listen globally. - -**Can I customize accept/decline?** -Yes. Use `onAccept` and `onDecline`. - -## Next steps - -- [Outgoing Call](/ui-kit/react/outgoing-call) -- [Call Buttons](/ui-kit/react/call-buttons) -- [Call Features](/ui-kit/react/call-features) +## Next Steps + + + + Manage outgoing voice and video calls + + + Add voice and video call buttons to your chat + + + Display call history and call log details + + + Overview of all calling capabilities + + diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index 76a501f3d..7687fe9ed 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -3,21 +3,35 @@ title: "Message Composer" description: "CometChatMessageComposer component provides a rich text input for composing and sending messages including text, media, attachments, reactions, mentions, and voice notes. Supports custom actions, AI features, and CSS styling." --- -Compose and send messages with attachments, mentions, and actions. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -- You need a message input with send actions. -- You want attachments, mentions, and rich actions. -- You want to customize send behavior or UI. +// For a user chat + -## Overview +// For a group chat + +``` + -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. + +**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. @@ -27,24 +41,15 @@ Features such as **Attachments**, and **Message Editing** are also supported by + **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). - +## Usage ### Integration - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` or `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `text: string`, `parentMessageId: number`, `hideVoiceRecording: boolean` -- **CSS class:** `.cometchat-message-composer` -- **Events:** `CometChatMessageEvents` - - The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app. @@ -69,7 +74,6 @@ export function MessageComposerDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -94,20 +98,11 @@ export function MessageComposerDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -143,7 +138,6 @@ export function MessageComposerDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -173,7 +167,6 @@ export function MessageComposerDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -210,7 +203,6 @@ export function MessageComposerDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -250,7 +242,6 @@ export function MessageComposerDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -311,7 +302,6 @@ export function MessageComposerDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -356,7 +346,6 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { // Your Code }); ``` -**What this does**: Shows the code for this step. @@ -373,7 +362,6 @@ ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccMessageSent?.unsubscribe(); ``` -**What this does**: Shows the code for this step. @@ -383,12 +371,6 @@ ccMessageSent?.unsubscribe(); ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the MessageComposer component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -410,7 +392,6 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -428,7 +409,6 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; background: #e5484d; } ``` -**What this does**: Shows the code for this step. @@ -449,7 +429,6 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -552,7 +531,6 @@ function getAttachments() { user={userObj} />; ``` -**What this does**: Shows the code for this step. @@ -583,7 +561,6 @@ function getAttachments() { background: #141414; } ``` -**What this does**: Shows the code for this step. @@ -636,7 +613,6 @@ const auxiliaryButtonView = ( user={userObj} />; ``` -**What this does**: Shows the code for this step. @@ -683,7 +659,6 @@ const sendButtonView = ( ; ``` -**What this does**: Shows the code for this step. @@ -703,7 +678,6 @@ const sendButtonView = ( background: #6852d6; } ``` -**What this does**: Shows the code for this step. @@ -749,7 +723,6 @@ const getHeaderView = () => { ; ``` -**What this does**: Shows the code for this step. @@ -795,7 +768,6 @@ const getHeaderView = () => { mask-size: contain; } ``` -**What this does**: Shows the code for this step. @@ -919,7 +891,6 @@ class ShortcutFormatter extends CometChatTextFormatter { export default ShortcutFormatter; ``` -**What this does**: Shows the code for this step. @@ -985,7 +956,6 @@ export default class DialogHelper { } } ``` -**What this does**: Shows the code for this step. @@ -1014,7 +984,6 @@ export function MessageComposerDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -1038,32 +1007,19 @@ export function MessageComposerDemo() { --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Hide voice recording | `CometChatMessageComposer` | `hideVoiceRecording` | `hideVoiceRecording={true}` | -| Set default text | `CometChatMessageComposer` | `text` | `text="Hi"` | -| Thread replies | `CometChatMessageComposer` | `parentMessageId` | `parentMessageId={messageId}` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Composer does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | -| Cannot send messages | User/group not provided | Pass a valid `user` or `group` | -| Voice icon missing | `hideVoiceRecording` enabled | Set `hideVoiceRecording={false}` | - -## FAQ - -**Can I use it in a thread?** -Yes. Set `parentMessageId`. - -**How do I disable voice recording?** -Set `hideVoiceRecording={true}`. - -## Next steps - -- [Message List](/ui-kit/react/message-list) -- [Message Template](/ui-kit/react/message-template) -- [Theming](/ui-kit/react/theme) +## Next Steps + + + + Render messages in a chat view + + + Customize message bubble rendering + + + Display user/group details in the toolbar + + + Add stickers, polls, and more to the composer + + diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 57dd4a05f..631ba1311 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -3,21 +3,35 @@ title: "Message Header" description: "CometChatMessageHeader component displays user or group details in the toolbar including avatar, name, status, typing indicator, and back navigation. Supports custom views and CSS styling." --- -Render the header for an active chat with name, avatar, status, and typing indicators. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -- You need a chat header for a user or group conversation. -- You want typing indicators and presence in the header. -- You want to customize the title or back button. +// For a user chat + -## Overview +// For a group chat + +``` + -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. + +**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. @@ -25,6 +39,7 @@ Render the header for an active chat with name, avatar, status, and typing indic + **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). @@ -36,16 +51,9 @@ The `MessageHeader` is comprised of the following components: | CometChatListItem | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. | | Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one. | -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` or `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `hideBackButton: boolean`, `hideUserStatus: boolean` -- **CSS class:** `.cometchat-message-header` - +### Integration @@ -67,7 +75,6 @@ export function MessageHeaderDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -90,20 +97,11 @@ export function MessageHeaderDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -144,7 +142,6 @@ export function MessageHeaderDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -187,7 +184,6 @@ export function MessageHeaderDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -210,7 +206,6 @@ const handleSearchClick = () => { ; ``` -**What this does**: Shows the code for this step. @@ -233,7 +228,6 @@ const getOnItemClick = () => { ; ``` -**What this does**: Shows the code for this step. @@ -255,12 +249,6 @@ The `MessageHeader` component does not produce any events. ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the Message Header component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -283,7 +271,6 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; // Assuming groupObj is defined elsewhere in your code ; ``` -**What this does**: Shows the code for this step. @@ -297,7 +284,6 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; font-family: "SF Pro"; } ``` -**What this does**: Shows the code for this step. @@ -316,7 +302,6 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -379,7 +364,6 @@ const CustomItemView = ( showBackButton={true} />; ``` -**What this does**: Shows the code for this step. @@ -389,7 +373,6 @@ const CustomItemView = ( border-radius: 8px; } ``` -**What this does**: Shows the code for this step. @@ -430,7 +413,6 @@ function CustomTitleView() { ; ``` -**What this does**: Shows the code for this step. @@ -454,7 +436,6 @@ function CustomTitleView() { text-align: left; } ``` -**What this does**: Shows the code for this step. @@ -486,7 +467,6 @@ function CustomSubtitleView() { ; ``` -**What this does**: Shows the code for this step. @@ -528,7 +508,6 @@ function CustomLeadingView() { ; ``` -**What this does**: Shows the code for this step. @@ -559,7 +538,6 @@ function CustomLeadingView() { position: relative; } ``` -**What this does**: Shows the code for this step. @@ -606,7 +584,6 @@ function CustomTrailingButtonView() { trailingView={CustomTrailingButtonView()} />; ``` -**What this does**: Shows the code for this step. @@ -623,7 +600,6 @@ function CustomTrailingButtonView() { background: black; } ``` -**What this does**: Shows the code for this step. @@ -670,7 +646,6 @@ function CustomAuxiliaryButtonView() { auxiliaryButtonView={CustomAuxiliaryButtonView()} />; ``` -**What this does**: Shows the code for this step. @@ -687,7 +662,6 @@ function CustomAuxiliaryButtonView() { background: black; } ``` -**What this does**: Shows the code for this step. @@ -711,7 +685,6 @@ new CalendarObject({ }, }); ``` -**What this does**: Shows the code for this step. The following example demonstrates how to modify the **last active** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -739,7 +712,6 @@ function getDateFormat() { lastActiveAtDateTimeFormat={getDateFormat()} />; ``` -**What this does**: Shows the code for this step. @@ -771,32 +743,19 @@ function getDateFormat() { --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Hide back button | `CometChatMessageHeader` | `hideBackButton` | `hideBackButton={true}` | -| Hide status | `CometChatMessageHeader` | `hideUserStatus` | `hideUserStatus={true}` | -| Custom title view | `CometChatMessageHeader` | `titleView` | `titleView={() => }` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Header does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | -| Missing name/avatar | User/group not loaded | Fetch `CometChat.User` or `CometChat.Group` | -| Both user and group passed | Invalid props | Pass only one of `user` or `group` | - -## FAQ - -**Can I hide the back button?** -Yes. Use `hideBackButton={true}`. - -**Does it show typing?** -Yes. Typing indicators are built in. - -## Next steps - -- [Message List](/ui-kit/react/message-list) -- [Message Composer](/ui-kit/react/message-composer) -- [Theming](/ui-kit/react/theme) +## Next Steps + + + + Render messages in a chat view + + + Compose and send messages + + + Display threaded message details + + + Display recent conversations + + diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index 6f717f963..579889c3e 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -3,21 +3,35 @@ title: "Message List" 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." --- -Render a scrollable list of messages for a user or group conversation. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -- You need to render chat messages in a conversation. -- You want read receipts, reactions, and threads. -- You want to customize message rendering with templates. +// For a user chat + -## Overview +// For a group chat + +``` + -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. + +**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. @@ -25,23 +39,16 @@ Render a scrollable list of messages for a user or group conversation. + **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). *** -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatMessageList } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` or `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `user: CometChat.User`, `group: CometChat.Group`, `messagesRequestBuilder: CometChat.MessagesRequestBuilder`, `templates: CometChatMessageTemplate[]`, `hideReceipts: boolean` -- **CSS class:** `.cometchat-message-list` -- **Events:** `CometChatMessageEvents` - +### Integration The following code snippet illustrates how you can directly incorporate the MessageList component into your Application. @@ -67,7 +74,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -92,7 +98,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -106,14 +111,6 @@ To fetch messages for a specific entity, you need to supplement it with `User` o *** -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -151,7 +148,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -184,7 +180,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -220,7 +215,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -250,7 +244,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -289,7 +282,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -319,7 +311,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -361,7 +352,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -394,7 +384,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -435,7 +424,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -466,7 +454,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -512,7 +499,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -543,7 +529,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -595,7 +580,6 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => { // Your Code }); ``` -**What this does**: Shows the code for this step. @@ -627,7 +611,6 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => { // Your Code }); ``` -**What this does**: Shows the code for this step. @@ -642,7 +625,6 @@ ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccActiveChatChanged?.unsubscribe(); ``` -**What this does**: Shows the code for this step. @@ -652,7 +634,6 @@ ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccActiveChatChanged?.unsubscribe(); ``` -**What this does**: Shows the code for this step. @@ -662,12 +643,6 @@ ccActiveChatChanged?.unsubscribe(); ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the Message List component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -689,7 +664,6 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -701,7 +675,6 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; font-family: "SF Pro"; } ``` -**What this does**: Shows the code for this step. @@ -737,7 +710,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -767,7 +739,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -887,7 +858,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -942,7 +912,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -963,7 +932,6 @@ new CalendarObject({ otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025" }); ``` -**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Date Separator** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -991,7 +959,6 @@ function getDateFormat() { separatorDateTimeFormat={getDateFormat()} />; ``` -**What this does**: Shows the code for this step. @@ -1022,7 +989,6 @@ new CalendarObject({ otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025" }); ``` -**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Sticky Date** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -1047,7 +1013,6 @@ function getDateFormat() { // Apply the custom format to the CometChatMessageList component ; ``` -**What this does**: Shows the code for this step. @@ -1076,7 +1041,6 @@ new CalendarObject({ otherDays: `hh:mm A`, // Example: "09:30 PM" }); ``` -**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Message SentAt** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -1104,7 +1068,6 @@ function getDateFormat() { messageSentAtDateTimeFormat={getDateFormat()} />; ``` -**What this does**: Shows the code for this step. @@ -1133,7 +1096,6 @@ new CalendarObject({ otherDays: `DD MMM, hh:mm A`, // Example: "29 Jan, 04:34 AM" }); ``` -**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Message Info** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -1161,7 +1123,6 @@ function getDateFormat() { messageInfoDateTimeFormat={getDateFormat()} />; ``` -**What this does**: Shows the code for this step. @@ -1225,7 +1186,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -1264,7 +1224,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -1303,7 +1262,6 @@ export function MessageListDemo() { align-items: center; } ``` -**What this does**: Shows the code for this step. @@ -1361,7 +1319,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -1402,7 +1359,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -1441,7 +1397,6 @@ export function MessageListDemo() { align-items: center; } ``` -**What this does**: Shows the code for this step. @@ -1565,7 +1520,6 @@ class ShortcutFormatter extends CometChatTextFormatter { export default ShortcutFormatter; ``` -**What this does**: Shows the code for this step. @@ -1634,7 +1588,6 @@ export default class DialogHelper { } } ``` -**What this does**: Shows the code for this step. @@ -1663,7 +1616,6 @@ export function MessageListDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -1687,34 +1639,19 @@ export function MessageListDemo() { --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Hide receipts | `CometChatMessageList` | `hideReceipts` | `hideReceipts={true}` | -| Custom templates | `CometChatMessageList` | `templates` | `templates={customTemplates}` | -| Thread click handler | `CometChatMessageList` | `onThreadRepliesClick` | `onThreadRepliesClick={(m) => ...}` | -| Filter messages | `CometChatMessageList` | `messagesRequestBuilder` | `new CometChat.MessagesRequestBuilder()` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| List does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | -| No messages | User/group not loaded | Fetch and pass a valid `CometChat.User` or `CometChat.Group` | -| Errors at runtime | Both user and group passed | Pass only one of `user` or `group` | -| Custom view not applied | Templates not passed | Pass templates via `templates` prop | - -## FAQ - -**Can I render group messages?** -Yes. Pass `group={chatGroup}`. - -**How do I customize bubbles?** -Use `templates` or CSS variables. - -## Next steps - -- [Message Composer](/ui-kit/react/message-composer) -- [Message Template](/ui-kit/react/message-template) -- [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling) +## Next Steps + + + + Compose and send messages + + + Display user/group details in the toolbar + + + Customize message bubble rendering + + + Display threaded message details + + diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index efc2ead3f..7852cea55 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -3,21 +3,34 @@ title: "Message Template" 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." --- -Define custom message templates to control bubble layout and rendering. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react"; +import { ChatConfigurator } from "@cometchat/chat-uikit-react"; -- You need custom message layouts or new message types. -- You want to override header/content/footer views. -- You want consistent rendering across message categories. +// Get default templates +const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); -## Overview +// Pass custom templates to MessageList + +``` + + + +**AI Agent Component Spec** -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. +**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). @@ -25,7 +38,7 @@ Define custom message templates to control bubble layout and rendering. 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 +### Structure @@ -51,18 +64,7 @@ The Message Bubble structure can typically be broken down into the following vie *** -## Usage - - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react";` -- **Usage:** Pass `templates` prop to `CometChatMessageList` — get defaults via `ChatConfigurator.getDataSource().getAllMessageTemplates()` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key properties:** `category: string`, `type: string`, `contentView`, `bubbleView`, `headerView`, `footerView` -- **Related:** Used with [CometChatMessageList](/ui-kit/react/message-list) via the `templates` prop - - -#### Properties +### Properties MessageTemplate provides you with methods that allow you to alter various properties of the Message Bubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble, @@ -112,12 +114,6 @@ MessageTemplate provides you with methods that allow you to alter various proper ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/react/message-list) component. The first step is to fetch the list of existing templates when you want to modify or add to them. This can be done using the getAllMessageTemplates() method from the DataSource of the CometChatUIKit class. @@ -125,9 +121,8 @@ The first step is to fetch the list of existing templates when you want to modif ```javascript let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates(); ``` -**What this does**: Shows the code for this step. -#### Existing Templates +### Existing Templates You will need to first get the MessageTemplate object for the type of message you want to customize. You will be customizing the text message bubble here. The code snippet to get the Text MessageTemplate is as follows. @@ -147,7 +142,6 @@ for (let i = 0; i < allTemplates.length; i++) { } } ``` -**What this does**: Shows the code for this step. @@ -165,7 +159,6 @@ for (let i = 0; i < allTemplates.length; i++) { } } ``` -**What this does**: Shows the code for this step. @@ -180,7 +173,6 @@ import { CometChatMessageList } from "@cometchat/uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -190,7 +182,6 @@ import { CometChatMessageList } from "@cometchat/uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -257,7 +248,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -311,7 +301,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -421,7 +410,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -518,7 +506,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -577,7 +564,6 @@ export { CustomMessageTemplate }; font: 500 14px/1.2 Roboto; } ``` -**What this does**: Shows the code for this step. @@ -649,7 +635,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -699,7 +684,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -740,7 +724,6 @@ export { CustomMessageTemplate }; background-color: #f44649; } ``` -**What this does**: Shows the code for this step. @@ -815,7 +798,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -877,7 +859,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -899,7 +880,6 @@ export { CustomMessageTemplate }; border-radius: 12px 12px 0px 0px; } ``` -**What this does**: Shows the code for this step. @@ -1026,7 +1006,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1129,7 +1108,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1207,7 +1185,6 @@ export { CustomMessageTemplate }; border-top: 10px solid #e8e8e8; } ``` -**What this does**: Shows the code for this step. @@ -1290,7 +1267,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1357,7 +1333,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1384,7 +1359,6 @@ export { CustomMessageTemplate }; padding: 8px; } ``` -**What this does**: Shows the code for this step. @@ -1404,6 +1378,7 @@ The `replyView` method of MessageTemplate allows you to add a reply view to your Custom Reply View + ```ts lines @@ -1433,7 +1408,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1461,7 +1435,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1482,7 +1455,6 @@ export { CustomMessageTemplate }; --cometchat-primary-color: #f76808; } ``` -**What this does**: Shows the code for this step. @@ -1575,7 +1547,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1644,7 +1615,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1662,13 +1632,12 @@ export { CustomMessageTemplate }; background-color: #6852d6; } ``` -**What this does**: Shows the code for this step. -#### New Templates +### New Templates You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate. @@ -1801,7 +1770,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1815,6 +1783,7 @@ import readIcon from "../../assets/message-read.svg"; import sentIcon from "../../assets/message-sent.svg"; import deliveredIcon from "../../assets/message-delivered.svg"; + const CustomMessageTemplate = () => { const [templates, setTemplates] = React.useState([]); const [chatGroup, setChatGroup] = React.useState(); @@ -1912,7 +1881,6 @@ const CustomMessageTemplate = () => { export { CustomMessageTemplate }; ``` -**What this does**: Shows the code for this step. @@ -1993,12 +1961,12 @@ export { CustomMessageTemplate }; font-style: normal; } ``` -**What this does**: Shows the code for this step. + @@ -2015,32 +1983,19 @@ export { CustomMessageTemplate }; --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Use default templates | `CometChatMessageList` | `templates` | `templates={ChatConfigurator.getDataSource().getAllMessageTemplates()}` | -| Override content | `CometChatMessageTemplate` | `contentView` | `contentView={(msg) => }` | -| Override footer | `CometChatMessageTemplate` | `footerView` | `footerView={(msg) => }` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Templates not applied | Not passed to MessageList | Pass templates via `templates` prop | -| Custom view not showing | Returning null/undefined | Return valid JSX in view functions | -| Wrong template mapping | Incorrect type/category | Match `type` and `category` to the message | - -## FAQ - -**Do I need to replace all templates?** -No. You can modify a subset. - -**Where do templates render?** -In `CometChatMessageList` via the `templates` prop. - -## Next steps - -- [Message List](/ui-kit/react/message-list) -- [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling) -- [Theming](/ui-kit/react/theme) +## Next Steps + + + + Use templates with the message list component + + + Compose and send messages + + + Customize the look and feel of your chat UI + + + Style individual message bubbles with CSS + + diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index bc7ec0a63..f821feebb 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -3,21 +3,40 @@ title: "Outgoing Call" description: "Display and manage outgoing voice and video calls with cancel controls using the CometChatOutgoingCall component." --- -Show the outgoing call screen after initiating a call. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; + +// 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} +/> +``` + -- You need to initiate voice or video calls. -- You want a default outgoing call UI. -- You need to handle call cancellation. + +**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 -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. 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. @@ -32,20 +51,14 @@ 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. | + **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). -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` — requires a `CometChat.Call` object from `CometChat.initiateCall()` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + `@cometchat/calls-sdk-javascript` installed -- **Key props:** `call` (CometChat.Call, required), `onCallCanceled` (callback), `disableSoundForCalls` (boolean), `titleView` (JSX), `subtitleView` (JSX) -- **CSS class:** `.cometchat-outgoing-call` - +### Integration @@ -80,7 +93,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -116,20 +128,11 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -179,7 +182,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -224,7 +226,6 @@ const OutgoingCallDemo = () => { }; export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -274,7 +275,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -315,7 +315,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -341,12 +340,6 @@ The `Outgoing Call` component does not have any exposed filters. ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the Outgoing Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -393,7 +386,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -431,7 +423,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -458,7 +449,6 @@ export default OutgoingCallDemo; font: 400 32px/38px "Times New Roman"; } ``` -**What this does**: Shows the code for this step. @@ -505,7 +495,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -544,7 +533,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -621,7 +609,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -668,7 +655,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -680,7 +666,6 @@ export default OutgoingCallDemo; font: 500 24px Roboto; } ``` -**What this does**: Shows the code for this step. @@ -742,7 +727,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -790,7 +774,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -813,7 +796,6 @@ export default OutgoingCallDemo; width: 24px; } ``` -**What this does**: Shows the code for this step. @@ -879,7 +861,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -931,7 +912,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -954,7 +934,6 @@ export default OutgoingCallDemo; right: -60px; } ``` -**What this does**: Shows the code for this step. @@ -1018,7 +997,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -1068,7 +1046,6 @@ const OutgoingCallDemo = () => { export default OutgoingCallDemo; ``` -**What this does**: Shows the code for this step. @@ -1102,12 +1079,12 @@ export default OutgoingCallDemo; width: 32px; } ``` -**What this does**: Shows the code for this step. + @@ -1125,32 +1102,19 @@ export default OutgoingCallDemo; --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Render outgoing call | `CometChatOutgoingCall` | `call` | `call={call}` | -| Handle cancel | `CometChatOutgoingCall` | `onCallCanceled` | `onCallCanceled={() => ...}` | -| Disable sounds | `CometChatOutgoingCall` | `disableSoundForCalls` | `disableSoundForCalls={true}` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Outgoing UI not shown | Call not initiated | Call `CometChat.initiateCall()` and pass result | -| Calls not available | Calls SDK missing | Install `@cometchat/calls-sdk-javascript` | -| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | - -## FAQ - -**Do I need to initiate the call?** -Yes. `call` must come from `CometChat.initiateCall()`. - -**How do I cancel a call?** -Use the `onCallCanceled` callback. - -## Next steps - -- [Incoming Call](/ui-kit/react/incoming-call) -- [Call Buttons](/ui-kit/react/call-buttons) -- [Call Features](/ui-kit/react/call-features) +## Next Steps + + + + Handle incoming voice and video calls + + + Add voice and video call buttons to your chat + + + Display call history and call log details + + + Overview of all calling capabilities + + diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 9e596b163..2a8839333 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -3,38 +3,50 @@ title: "Search" description: "Search across conversations and messages in real time with filtering, scopes, and custom views using the CometChatSearch component." --- -Search across conversations and messages with filters and callbacks. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChatSearch } from "@cometchat/chat-uikit-react"; + +// Minimal usage + -- You need a global search UI. -- You want to search messages and conversations. -- You want custom callbacks for search selection. +// With common props + console.log("Selected:", conversation)} + onMessageClicked={(message) => console.log("Message:", message)} + hideBackButton={false} +/> +``` + + + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatSearch } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `onConversationClicked` (callback), `onMessageClicked` (callback), `searchFilters` (array), `searchIn` (array), `hideBackButton` (boolean) +**CSS class:** `.cometchat-search` +**Events:** none + ## Overview -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. 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. + **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). -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatSearch } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `onConversationClicked` (callback), `onMessageClicked` (callback), `searchFilters` (array), `searchIn` (array), `hideBackButton` (boolean) -- **CSS class:** `.cometchat-search` - +### Integration @@ -51,7 +63,6 @@ function SearchDemo() { export default SearchDemo; ``` -**What this does**: Shows the code for this step. @@ -69,7 +80,6 @@ function SearchDemo() { export default SearchDemo; ``` -**What this does**: Shows the code for this step. @@ -77,14 +87,6 @@ export default SearchDemo; *** -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -104,7 +106,6 @@ const openConversation = (conversation: CometChat.Conversation) => { ; ``` -**What this does**: Shows the code for this step. @@ -118,7 +119,6 @@ const openConversation = (conversation) => { ; ``` -**What this does**: Shows the code for this step. @@ -141,7 +141,6 @@ const goToMessage = (message: CometChat.BaseMessage) => { ; ``` -**What this does**: Shows the code for this step. @@ -155,7 +154,6 @@ const goToMessage = (message) => { ; ``` -**What this does**: Shows the code for this step. @@ -178,7 +176,6 @@ const onBack = () => { ; ``` -**What this does**: Shows the code for this step. @@ -192,7 +189,6 @@ const onBack = () => { ; ``` -**What this does**: Shows the code for this step. @@ -215,7 +211,6 @@ const handleOnError = (error: CometChat.CometChatException) => { ; ``` -**What this does**: Shows the code for this step. @@ -229,7 +224,6 @@ const handleOnError = (error) => { ; ``` -**What this does**: Shows the code for this step. @@ -255,7 +249,6 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; )} />; ``` -**What this does**: Shows the code for this step. @@ -270,7 +263,6 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; )} />; ``` -**What this does**: Shows the code for this step. @@ -292,7 +284,6 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; messagesRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)} />; ``` -**What this does**: Shows the code for this step. @@ -305,7 +296,6 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; messagesRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)} />; ``` -**What this does**: Shows the code for this step. @@ -323,12 +313,6 @@ The `CometChatSearch` component does not produce any events. ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the `CometChatSearch` component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -349,7 +333,6 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -422,7 +405,6 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; font-weight: 700; } ``` -**What this does**: Shows the code for this step. @@ -441,7 +423,6 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -451,7 +432,6 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -546,7 +526,6 @@ const getMessageItemView = (message: CometChat.BaseMessage) => { messageItemView={getMessageItemView} // Custom message item view />; ``` -**What this does**: Shows the code for this step. @@ -571,7 +550,6 @@ const getMessageItemView = (message: CometChat.BaseMessage) => { font: var(--cometchat-font-body-regular); } ``` -**What this does**: Shows the code for this step. @@ -615,7 +593,6 @@ const getMessageLeadingView = (message: CometChat.BaseMessage) => { messageLeadingView={getMessageLeadingView} // Custom message leading view />; ``` -**What this does**: Shows the code for this step. @@ -636,7 +613,6 @@ const getMessageLeadingView = (message: CometChat.BaseMessage) => { width: 32px; } ``` -**What this does**: Shows the code for this step. @@ -686,7 +662,6 @@ const getMessageTitleView = (message: CometChat.BaseMessage) => { messageTitleView={getMessageTitleView} // Custom message title view />; ``` -**What this does**: Shows the code for this step. @@ -710,7 +685,6 @@ const getMessageTitleView = (message: CometChat.BaseMessage) => { text-decoration: underline; } ``` -**What this does**: Shows the code for this step. @@ -759,7 +733,6 @@ const getMessageSubtitleView = (message: CometChat.BaseMessage) => { messageSubtitleView={getMessageSubtitleView} // Custom message subtitle view />; ``` -**What this does**: Shows the code for this step. @@ -784,7 +757,6 @@ const getMessageSubtitleView = (message: CometChat.BaseMessage) => { font: var(--cometchat-font-body-regular); } ``` -**What this does**: Shows the code for this step. @@ -858,7 +830,6 @@ const getMessageTrailingView = (message: CometChat.BaseMessage) => { messageTrailingView={getMessageTrailingView} // Custom message trailing view />; ``` -**What this does**: Shows the code for this step. @@ -901,7 +872,6 @@ const getMessageTrailingView = (message: CometChat.BaseMessage) => { color: #6a5b99; } ``` -**What this does**: Shows the code for this step. @@ -922,7 +892,6 @@ new CalendarObject({ today: "DD MMM, YYYY" // Example: "04 Jun, 2025" }); ``` -**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Sent At** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -947,7 +916,6 @@ function getDateFormat() { // Apply the custom format to the CometChatSearch component ; ``` -**What this does**: Shows the code for this step. @@ -959,6 +927,7 @@ function getDateFormat() { 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. + @@ -976,33 +945,19 @@ Assigns the list of text formatters. If the provided list is not null, it sets t --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Conversation click | `CometChatSearch` | `onConversationClicked` | `onConversationClicked={(c) => ...}` | -| Message click | `CometChatSearch` | `onMessageClicked` | `onMessageClicked={(m) => ...}` | -| Search scope | `CometChatSearch` | `searchIn` | `searchIn={["messages"]}` | -| Search filters | `CometChatSearch` | `searchFilters` | `searchFilters={[...]} ` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Search shows no results | Init/login missing | Call `CometChatUIKit.init()` and `login()` | -| No results | Filters too strict | Adjust `searchFilters` and `searchIn` | -| Callbacks not firing | Wrong prop name | Use `onConversationClicked` or `onMessageClicked` | - -## FAQ - -**Can I search only messages?** -Yes. Set `searchIn={['messages']}`. - -**How do I open a conversation from results?** -Use `onConversationClicked`. - -## Next steps - -- [Conversations](/ui-kit/react/conversations) -- [Message List](/ui-kit/react/message-list) -- [Theming](/ui-kit/react/theme) +## Next Steps + + + + Display and manage conversation lists + + + Render messages in a conversation + + + Build a message search experience + + + Explore all available UI Kit components + + diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index 1986618af..f89b627a4 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -3,21 +3,32 @@ title: "Thread Header" description: "CometChatThreadHeader component displays the parent message of a threaded conversation with reply count, allowing users to view and navigate threaded message discussions." --- -Display the parent message and reply count for a thread. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; + + +``` + + + +**AI Agent Component Spec** -- You are building threaded message views. -- You need a header showing the parent message. -- You want to handle closing the thread view. +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `parentMessage: CometChat.BaseMessage` (required) +**CSS class:** `.cometchat-thread-header` +**Events:** None + ## Overview -- **What you’re changing**: Overview. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. CometChatThreadHeader is a Component that displays the parent message & number of replies of thread. @@ -25,20 +36,14 @@ CometChatThreadHeader is a Component that displays the parent message & number o + **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). -### Integration +## Usage - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `parentMessage: CometChat.BaseMessage` (required) -- **CSS class:** `.cometchat-thread-header` - +### Integration The following code snippet illustrates how you can directly incorporate the CometChatThreadHeader component into your Application. @@ -68,7 +73,6 @@ export function ThreadHeaderDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -96,7 +100,6 @@ export function ThreadHeaderDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -104,14 +107,6 @@ export function ThreadHeaderDemo() { *** -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -153,7 +148,6 @@ export function ThreadHeaderDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -171,12 +165,6 @@ The ThreadHeader Component does not emit any events of its own. ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - 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. *** @@ -217,7 +205,6 @@ export function ThreadHeaderDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -235,7 +222,6 @@ export function ThreadHeaderDemo() { color: #6852d6; } ``` -**What this does**: Shows the code for this step. @@ -281,7 +267,6 @@ export function ThreadHeaderDemo() { ) : null; } ``` -**What this does**: Shows the code for this step. @@ -316,7 +301,6 @@ new CalendarObject({ otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025" }); ``` -**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Date Separator** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -341,7 +325,6 @@ function getDateFormat() { // Apply the custom format to the CometChatThreadHeader component ; ``` -**What this does**: Shows the code for this step. @@ -370,7 +353,6 @@ new CalendarObject({ otherDays: `hh:mm A`, // Example: "09:30 PM" }); ``` -**What this does**: Shows the code for this step. The following example demonstrates how to modify the **Message SentAt** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject). @@ -395,7 +377,6 @@ function getDateFormat() { // Apply the custom format to the CometChatThreadHeader component ; ``` -**What this does**: Shows the code for this step. @@ -426,30 +407,19 @@ function getDateFormat() { --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Render header | `CometChatThreadHeader` | `parentMessage` | `parentMessage={message}` | -| Handle close | `CometChatThreadHeader` | `onClose` | `onClose={() => setThread(null)}` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Header does not render | Parent message missing | Fetch and pass a valid `CometChat.BaseMessage` | -| Init/login missing | SDK not initialized | Call `CometChatUIKit.init()` and `login()` | - -## FAQ - -**Where do I get the parent message?** -Use `CometChat.getMessageDetails()` or thread context. - -**Can I hide the close button?** -Use the component props in the Actions section. - -## Next steps - -- [Message List](/ui-kit/react/message-list) -- [Message Composer](/ui-kit/react/message-composer) -- [Search](/ui-kit/react/search) +## Next Steps + + + + Display user/group details in the toolbar + + + Render messages in a chat view + + + Step-by-step guide for implementing threaded messages + + + Customize message bubble rendering + + diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index 6f02eec26..688edbb95 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -3,25 +3,47 @@ title: "Users" description: "CometChatUsers component displays a searchable list of all available users with avatars, names, and online/offline status indicators. Supports selection modes, custom views, filtering via UsersRequestBuilder, and CSS styling." --- -List and select users with search and presence using the CometChatUsers component. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -## When to use this +```tsx +import { CometChatUsers } from "@cometchat/chat-uikit-react"; + +// Minimal usage + + +// With common props + console.log("Selected:", user)} + hideSearch={false} + showSectionHeader={true} + selectionMode={SelectionMode.none} +/> +``` + -- You need a searchable list of users. -- You want a user picker to start new chats. -- You need to filter users by tags, roles, or status. + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatUsers } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `onItemClick: (user: CometChat.User) => void`, `selectionMode: SelectionMode`, `usersRequestBuilder: CometChat.UsersRequestBuilder`, `hideSearch: boolean`, `showSectionHeader: boolean` +**CSS class:** `.cometchat-users` +**Events:** None (does not emit events directly) + ## 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. +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. + **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). @@ -33,16 +55,11 @@ The Users component is composed of the following BaseComponents: | CometChatList | A reusable container component having title, search box, customisable background and a list view. | | CometChatListItem | A component that renders data obtained from a User object on a Tile having a title, subtitle, leading and trailing view. | -### Integration +*** - -- **Package:** `@cometchat/chat-uikit-react` -- **Import:** `import { CometChatUsers } from "@cometchat/chat-uikit-react";` -- **Minimal JSX:** `` -- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` -- **Key props:** `onItemClick: (user: CometChat.User) => void`, `selectionMode: SelectionMode`, `usersRequestBuilder: CometChat.UsersRequestBuilder`, `hideSearch: boolean`, `showSectionHeader: boolean` -- **CSS class:** `.cometchat-users` - +## Usage + +### Integration The following code snippet illustrates how you can directly incorporate the Users component into your Application. @@ -57,7 +74,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -71,20 +87,11 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. -## Usage - -- **What you’re changing**: Usage. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - ### 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. @@ -116,7 +123,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -140,7 +146,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -164,7 +169,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -181,7 +185,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -205,7 +208,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -223,7 +225,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -247,7 +248,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -265,7 +265,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -313,7 +312,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -334,7 +332,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -364,7 +361,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -385,7 +381,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -405,12 +400,6 @@ The `Users` component does not produce any events directly. ## Customization -- **What you’re changing**: Customization. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - To fit your app's design requirements, you can customize the appearance of the Users component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style @@ -434,7 +423,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -448,7 +436,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -501,7 +488,6 @@ export default UsersDemo; border-radius: 9.6px; } ``` -**What this does**: Shows the code for this step. @@ -530,7 +516,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -550,7 +535,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -631,7 +615,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -665,7 +648,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -690,7 +672,6 @@ export default UsersDemo; background: rgba(9, 194, 111, 0.1); } ``` -**What this does**: Shows the code for this step. @@ -725,7 +706,6 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; ; ``` -**What this does**: Shows the code for this step. @@ -765,7 +745,6 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; .users__title-view-teacher .users__title-view-type{ } ``` -**What this does**: Shows the code for this step. @@ -820,7 +799,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -852,7 +830,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -869,7 +846,6 @@ export default UsersDemo; line-height: 120%; } ``` -**What this does**: Shows the code for this step. @@ -914,7 +890,6 @@ const getHeaderView = () => { ``` -**What this does**: Shows the code for this step. @@ -950,7 +925,6 @@ const getHeaderView = () => { display: block; } ``` -**What this does**: Shows the code for this step. @@ -988,7 +962,6 @@ const customLeadingView = (user: CometChat.User): JSX.Element => { }; ``` -**What this does**: Shows the code for this step. @@ -1024,7 +997,6 @@ const customLeadingView = (user: CometChat.User): JSX.Element => { margin-bottom: 3px; } ``` -**What this does**: Shows the code for this step. @@ -1063,7 +1035,6 @@ const customTrailingButtonView = (user:CometChat.User) => { ; ``` -**What this does**: Shows the code for this step. @@ -1096,7 +1067,6 @@ const customTrailingButtonView = (user:CometChat.User) => { color: white; } ``` -**What this does**: Shows the code for this step. @@ -1145,7 +1115,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -1171,7 +1140,6 @@ function UsersDemo() { export default UsersDemo; ``` -**What this does**: Shows the code for this step. @@ -1197,7 +1165,6 @@ export default UsersDemo; mask-size: contain; } ``` -**What this does**: Shows the code for this step. @@ -1205,12 +1172,6 @@ export default UsersDemo; ## Component API Pattern -- **What you’re changing**: Component API Pattern. -- **Where to change it**: Component props or CSS as shown below. -- **Default behavior**: UI Kit defaults. -- **Override**: Use the examples in this section. -- **Verify**: The UI reflects the change shown below. - | Customization Type | Prop Pattern | Example | | --- | --- | --- | | Callback actions | `on={(param) => {}}` | `onItemClick={(user) => {}}` | @@ -1235,35 +1196,19 @@ export default UsersDemo; --- -## Customization matrix - -| What you want to change | Where | Property/API | Example | -| --- | --- | --- | --- | -| Handle item click | `CometChatUsers` | `onItemClick` | `onItemClick={(u) => setActive(u)}` | -| Enable multi-select | `CometChatUsers` | `selectionMode` | `selectionMode={SelectionMode.multiple}` | -| Filter users | `CometChatUsers` | `usersRequestBuilder` | `new CometChat.UsersRequestBuilder().friendsOnly(true)` | -| Hide search | `CometChatUsers` | `hideSearch` | `hideSearch={true}` | - -## Common pitfalls and fixes - -| Symptom | Cause | Fix | -| --- | --- | --- | -| Component does not render | Init/login not complete | Call `CometChatUIKit.init()` and `login()` first | -| List is empty | Filters too strict | Relax `usersRequestBuilder` filters | -| Search shows no results | Search builder too restrictive | Adjust `searchRequestBuilder` | -| Callbacks not firing | Wrong prop name | Use `onItemClick` or `onSelect` | -| Styles not applying | CSS Modules used | Use global CSS with `.cometchat-users` | - -## FAQ - -**Can I hide the search bar?** -Yes. Set `hideSearch={true}`. - -**How do I filter users by status?** -Use `UsersRequestBuilder().setStatus(...)`. - -## Next steps - -- [Conversations](/ui-kit/react/conversations) -- [Groups](/ui-kit/react/groups) -- [Theming](/ui-kit/react/theme) +## Next Steps + + + + Display and manage group lists + + + View and manage members within a group + + + Display recent conversations + + + Render messages in a chat view + +