{"id":"a5f598af-33c7-4a1a-a688-da2015f976d5","shortId":"8Kb35Q","kind":"skill","title":"cometchat-components","tagline":"Complete catalog of CometChat React UI Kit v6 components. Reference before writing integration code -- never invent component names.","description":"## Purpose\n\nThis is the single source of truth for CometChat React UI Kit v6 component names, props, and usage. **Check this catalog before writing any `` JSX.** If a component is not listed here, it does not exist in the exported API.\n\nAll components are imported from `@cometchat/chat-uikit-react`. All SDK types are imported from `@cometchat/chat-sdk-javascript`.\n\n### Importing `CometChat.User` / `CometChat.Group` / etc.\n\n`CometChat.User`, `CometChat.Group`, `CometChat.BaseMessage`, `CometChat.Conversation`, `CometChat.GroupMember`, `CometChat.TextMessage` are **classes** (runtime values), not pure types. That means the import strategy depends on how you use them:\n\n**Pattern A — you call the class as a value or use it with `instanceof`.** Use a plain value import:\n\n```tsx\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\nif (entity instanceof CometChat.User) { ... }\nconst user = await CometChat.getUser(uid);\n```\n\n**Pattern B — you use it only as a type annotation, nowhere else.** Two options:\n\n```tsx\n// Option 1: value import, reference the type via the namespace — TS lets this slide\n// because CometChat is a class-namespace\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\nfunction renderHeader(user: CometChat.User) { ... }\n\n// Option 2: explicit type-only import\nimport type { CometChat } from \"@cometchat/chat-sdk-javascript\";\nfunction renderHeader(user: CometChat.User) { ... }\n```\n\n**Do NOT mix these.** If you write `import type { CometChat }` and then try `entity instanceof CometChat.User`, TypeScript strips the import at compile time and the code throws at runtime. If you write `import { CometChat }` but only reference `CometChat.User` as a type, `noUnusedLocals` can flag it (TS6133).\n\n**Safest default:** use the plain value import (`import { CometChat }`). It always works; the TS6133 warning only fires in strict `noUnusedLocals` configs and can be fixed by actually using the runtime value (e.g. `instanceof CometChat.User`) or by adding an `eslint-disable-next-line` if you truly only need the type.\n\n---\n\n## 1. Core messaging\n\nThese are the components you use to build a chat experience. Most integrations use some combination of these seven.\n\n### CometChatConversations\n\nRenders a scrollable list of the logged-in user's conversations (both 1:1 and group).\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `activeConversation` | `CometChat.Conversation` | Highlights the currently selected conversation |\n| `onItemClick` | `(conversation: CometChat.Conversation) => void` | Called when the user taps a conversation |\n| `showSearchBar` | `boolean` | Shows a basic name-filter search bar above the list |\n| `onSearchBarClicked` | `() => void` | Called when the search bar is clicked (use to swap in `CometChatSearch` for full search) |\n| `conversationsRequestBuilder` | `CometChat.ConversationsRequestBuilder` | Customize which conversations to fetch (filters, limits) |\n\n**Usage:**\n```tsx\n setActiveConversation(conversation)}\n/>\n```\n\n**Works with:** CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer (two-pane layout)\n\n---\n\n### CometChatMessageList\n\nRenders messages for a specific user or group conversation. Supports threaded views via `parentMessageId`.\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `user` | `CometChat.User` | Show messages with this user (mutually exclusive with `group`) |\n| `group` | `CometChat.Group` | Show messages in this group (mutually exclusive with `user`) |\n| `parentMessageId` | `number` | If set, shows only replies to this message (thread view) |\n| `templates` | `CometChatMessageTemplate[]` | Custom message bubble templates |\n| `messagesRequestBuilder` | `CometChat.MessagesRequestBuilder` | Customize message fetching |\n\n**Usage:**\n```tsx\n\n```\n\n**Works with:** CometChatMessageHeader (above), CometChatMessageComposer (below)\n\n---\n\n### CometChatMessageComposer\n\nA text input with send button, attachment options, and emoji support. Sends messages to the specified user or group.\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `user` | `CometChat.User` | Send messages to this user (mutually exclusive with `group`) |\n| `group` | `CometChat.Group` | Send messages to this group (mutually exclusive with `user`) |\n| `parentMessageId` | `number` | If set, sends replies to this message (thread mode) |\n| `onSendButtonClick` | `(message: CometChat.BaseMessage) => void` | Called when send is clicked |\n\n**Usage:**\n```tsx\n\n```\n\n**Works with:** CometChatMessageList (above), CometChatMessageHeader (at top of message area)\n\n---\n\n### CometChatCompactMessageComposer\n\nA rich-text variant of the message composer with formatting toolbar (bold, italic, code, etc.). Same props as CometChatMessageComposer.\n\n**Prefer this for new integrations.** The v6 sample app uses `CometChatCompactMessageComposer` everywhere — rich-text formatting is the modern default. Both work; reach for `CometChatMessageComposer` (the basic variant) only if you have a specific reason to skip the formatting toolbar (e.g., a stripped-down marketplace ping where plain text is the entire UX).\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `user` | `CometChat.User` | Send messages to this user |\n| `group` | `CometChat.Group` | Send messages to this group |\n| `parentMessageId` | `number` | Thread mode |\n| `onSendButtonClick` | `(message: CometChat.BaseMessage) => void` | Called on send |\n\n**Usage:**\n```tsx\n\n```\n\n**Works with:** Same as CometChatMessageComposer -- drop-in replacement for rich text\n\n---\n\n### CometChatMessageHeader\n\nDisplays the name, avatar, and status of the user or group at the top of a message view. Supports a menu slot and search.\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `user` | `CometChat.User` | Show header for this user |\n| `group` | `CometChat.Group` | Show header for this group |\n| `onItemClick` | `() => void` | Called when the header info area is clicked (use to open details panel) |\n| `onBack` | `() => void` | Called when back button is clicked |\n| `auxiliaryButtonView` | `JSX.Element` | Custom button area (e.g., CometChatCallButtons) |\n| `showBackButton` | `boolean` | Show a back button (for mobile/nested views) |\n| `showSearchOption` | `boolean` | Show a search icon in the header |\n| `onSearchOptionClicked` | `() => void` | Called when search icon is clicked |\n| `hideVideoCallButton` | `boolean` | Hide the video call button |\n| `hideVoiceCallButton` | `boolean` | Hide the voice call button |\n\n**Usage:**\n```tsx\n setShowDetails(true)}\n auxiliaryButtonView={}\n/>\n```\n\n**Works with:** CometChatMessageList (below), CometChatCallButtons (in auxiliaryButtonView slot)\n\n---\n\n### CometChatSearch\n\nFull-featured dual-scope search: searches across conversations AND messages with filter chips. This is the primary search component.\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `onConversationClicked` | `(conversation: CometChat.Conversation) => void` | Called when a conversation result is clicked |\n| `onMessageClicked` | `(message: CometChat.BaseMessage) => void` | Called when a message result is clicked |\n\n**Usage:**\n```tsx\n navigateToConversation(conv)}\n onMessageClicked={(msg) => scrollToMessage(msg)}\n/>\n```\n\n**Works with:** CometChatConversations (replaces the list when search is active)\n\n> **Hard rule — never roll your own search.** Any request involving\n> \"search\", \"find messages\", \"search conversations\", or \"search across\n> conversations\" MUST use `` (or `showSearchBar={true}`\n> + `onSearchBarClicked` on `CometChatConversations` to swap into\n> `` on click). Do NOT build custom ``\n> bars, hand-rolled result lists, or filter UIs — they bypass the SDK's\n> pagination, highlighting, and dual-scope (conversations + messages)\n> matching that ship with the built-in component.\n\n---\n\n### CometChatThreadHeader\n\nHeader bar for a threaded message view. Shows the parent message and a close button.\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `parentMessage` | `CometChat.BaseMessage` | The message that started the thread |\n| `onClose` | `() => void` | Called when the user closes the thread view |\n\n**Usage:**\n```tsx\n setThreadParent(null)}\n/>\n```\n\n**Works with:** CometChatMessageList (with `parentMessageId`), CometChatMessageComposer (with `parentMessageId`)\n\n---\n\n## 2. Lists and selection\n\nComponents for browsing and selecting users, groups, and group members.\n\n### CometChatUsers\n\nA scrollable list of users. Used for starting new conversations or browsing the user directory.\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `onItemClick` | `(user: CometChat.User) => void` | Called when a user is selected |\n| `usersRequestBuilder` | `CometChat.UsersRequestBuilder` | Customize which users to fetch |\n\n**Usage:**\n```tsx\n startConversation(user)} />\n```\n\n**Works with:** CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer (after selection)\n\n---\n\n### CometChatGroups\n\nA scrollable list of groups. Used for browsing and joining groups.\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `onItemClick` | `(group: CometChat.Group) => void` | Called when a group is selected |\n| `groupsRequestBuilder` | `CometChat.GroupsRequestBuilder` | Customize which groups to fetch |\n\n**Usage:**\n```tsx\n openGroup(group)} />\n```\n\n**Works with:** CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer (after selection)\n\n---\n\n### CometChatGroupMembers\n\nDisplays members of a specific group with their roles (owner, admin, member).\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `group` | `CometChat.Group` | The group whose members to display (required) |\n| `onItemClick` | `(member: CometChat.GroupMember) => void` | Called when a member is selected |\n\n**Usage:**\n```tsx\n\n```\n\n**Works with:** Group details panel, CometChatGroups\n\n---\n\n### CometChatSearchBar\n\nA standalone search input component. Used for filtering within other components.\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `onSearch` | `(text: string) => void` | Called as the user types |\n| `text` | `string` | Controlled input value |\n\n**Usage:**\n```tsx\n filterUsers(text)} />\n```\n\n**Works with:** Any list component for client-side filtering\n\n---\n\n## 3. Calls\n\nComponents for voice and video calling.\n\n### CometChatCallButtons\n\nRenders voice and video call buttons. Typically placed in the `auxiliaryButtonView` prop of CometChatMessageHeader.\n\n**Key props:**\n| Prop | Type | Description |\n|---|---|---|\n| `user` | `CometChat.User` | Call this user |\n| `group` | `CometChat.Group` | Call this group |\n| `hideVideoCallButton` | `boolean` | Hide the video call button |\n| `hideVoiceCallButton` | `boolean` | Hide the voice call button |\n\n**Usage:**\n```tsx\n\n```\n\n**Works with:** CometChatMessageHeader (in `menu` prop), CometChatIncomingCall (at app root)\n\n---\n\n### CometChatIncomingCall\n\nRenders an incoming call notification overlay. Mount this at the app root so it can show incoming calls from any screen.\n\n**Key props:** None required -- it auto-listens for incoming call events.\n\n**Usage:**\n```tsx\n// At your app root, always mounted:\n\n```\n\n**Works with:** CometChatCallButtons (triggers outgoing calls that the other user sees as incoming)\n\n---\n\n### CometChatOutgoingCall\n\nRenders the outgoing call screen (ringing state). Automatically shown when the user initiates a call.\n\n**Key props:** None required -- auto-triggered by call initiation.\n\n**Usage:**\n```tsx\n\n```\n\n**Works with:** CometChatCallButtons\n\n---\n\n### CometChatOngoingCall\n\nRenders the active call screen with video feeds, mute/unmute, and hang-up controls.\n\n**Key props:** None required -- auto-triggered when a call connects.\n\n**Usage:**\n```tsx\n\n```\n\n**Works with:** CometChatIncomingCall, CometChatOutgoingCall\n\n---\n\n### CometChatCallLogs\n\nDisplays a history of past voice and video calls.\n\n**Key props:** None required for basic usage.\n\n**Usage:**\n```tsx\n\n```\n\n**Works with:** Tab-based layouts (as one of the tabs alongside Conversations, Users, Groups)\n\n---\n\n## 4. Interactions\n\nComponents for message reactions and emoji.\n\n### CometChatReactions\n\nDisplays reaction badges on a message (e.g., thumbs-up x3). Automatically rendered inside message bubbles when reactions are enabled.\n\n**Key props:** Typically used internally by the message list. Not usually instantiated directly.\n\n---\n\n### CometChatReactionList\n\nShows a detailed list of who reacted with what emoji on a specific message.\n\n**Key props:** Used internally. Shown when the user clicks on a reaction badge.\n\n---\n\n### CometChatEmojiKeyboard\n\nA full emoji picker. Automatically rendered inside the message composer when the emoji button is clicked.\n\n**Key props:** Used internally by CometChatMessageComposer. Not usually instantiated directly.\n\n---\n\n### CometChatReactionInfo\n\nTooltip or popover showing reaction details on hover.\n\n**Key props:** Used internally by the message list. Not usually instantiated directly.\n\n---\n\n## 5. AI\n\nAI-powered assistant components. These require AI features (Smart Chat Features) to be enabled in your CometChat dashboard at **Chat & Messaging → Features → Smart Chat Features**.\n\n### CometChatAIAssistantChat\n\nAn AI chatbot interface that users can interact with for automated responses. Typically rendered inside a panel or modal triggered from the message header.\n\n**Prerequisites:** Enable \"Conversation Starter\" and/or \"Smart Replies\" in the dashboard.\n\n**Usage:**\n```tsx\n\n```\n\n---\n\n### CometChatAIAssistantChatHistory\n\nDisplays past AI assistant interactions. Used alongside `CometChatAIAssistantChat` to show conversation history with the AI.\n\n**Usage:**\n```tsx\n\n```\n\n---\n\n### CometChatAIAssistantTools\n\nRenders AI tool options (summarize conversation, translate message, etc.) that can be applied to messages or conversations.\n\n**Prerequisites:** Enable \"Conversation Summary\" and/or other AI tools in the dashboard.\n\n**Usage:**\n```tsx\n\n```\n\n> **Note:** For detailed props, configuration options, and customization of AI components, query the docs MCP — these components' APIs evolve with CometChat's AI feature releases.\n\n### CometChatStreamMessageBubble\n\nRenders a streaming AI message with a typing animation effect. Used internally by AI assistant features.\n\n### CometChatAIAssistantMessageBubble\n\nRenders AI assistant response bubbles with special formatting. Used internally by AI features.\n\n---\n\n## 5b. Moderation and utility components\n\nThese are exported but typically rendered internally by the kit. You may need them for advanced customization.\n\n### CometChatFlagMessageDialog\n\nA dialog for reporting/flagging messages. Rendered internally when a user reports a message.\n\n### CometChatMessageInformation\n\nShows message delivery and read receipt details (who received, who read, timestamps). Useful for building a message info panel.\n\n---\n\n## 5c. Text formatters\n\nThese are not React components — they are formatter classes that customize how text is rendered in message bubbles. Pass them via the `textFormatters` prop on `CometChatMessageList`.\n\n| Formatter | Purpose |\n|---|---|\n| `CometChatTextFormatter` | Base class for custom formatters |\n| `CometChatUrlsFormatter` | Auto-links URLs in messages |\n| `CometChatMentionsFormatter` | Renders @mentions with styling + click handlers |\n| `CometChatTextHighlightFormatter` | Highlights search terms in messages |\n| `CometChatRichTextFormatter` | Renders rich text (bold, italic, etc.) |\n| `CometChatMarkdownFormatter` | Renders markdown syntax in messages |\n\nAll imported from `@cometchat/chat-uikit-react`. To customize text rendering, create a class extending `CometChatTextFormatter` and pass it in the `textFormatters` array.\n\n---\n\n## 6. Infrastructure\n\nThese are not visual components -- they handle initialization, login state, and configuration.\n\n### CometChatUIKit\n\nThe main entry point for initialization and authentication. This is a static class, not a React component.\n\n**Key methods:**\n| Method | Description |\n|---|---|\n| `CometChatUIKit.init(settings)` | Initialize the SDK. Returns a Promise. Must be called once before any component renders. |\n| `CometChatUIKit.login(uid)` | Log in with a user ID (dev mode). Returns `Promise`. Safe to call after a prior login completes (no-op), but **not concurrently** — two overlapping calls throw *\"Please wait until the previous login request ends.\"* Use `cometchat-core`'s `ensureLoggedIn` helper to dedupe. |\n| `CometChatUIKit.loginWithAuthToken(token)` | Log in with an auth token (production). Returns `Promise`. |\n| `CometChatUIKit.getLoggedinUser()` | Get the currently logged-in user. Returns `Promise`. |\n| `CometChatUIKit.logout()` | Log out the current user. Returns a Promise. |\n| `CometChatUIKit.createUser(user)` | Create a CometChat user (requires Auth Key). For server-side user management, see `cometchat-production`. |\n| `CometChatUIKit.updateUser(user)` | Update a CometChat user (requires Auth Key). |\n| `CometChatUIKit.isInitialized()` | Returns `boolean` — whether `init()` has been called. |\n\n**Usage** (bare-API illustration — in real code, wrap `login` in an\nin-flight guard so React StrictMode doesn't fire it twice; see\n`cometchat-core` § 2 for the `ensureLoggedIn` helper):\n```typescript\nimport { CometChatUIKit } from \"@cometchat/chat-uikit-react\";\n\nawait CometChatUIKit.init(settings);\nawait CometChatUIKit.login(\"cometchat-uid-1\");\n```\n\n---\n\n### CometChatUIKitLoginListener\n\nTracks the logged-in user synchronously. Unlike `CometChatUIKit.getLoggedinUser()` (which is async/Promise-based), this provides **synchronous** access to the current user — useful for guards and conditional rendering.\n\n**Key methods:**\n| Method | Description |\n|---|---|\n| `CometChatUIKitLoginListener.getLoggedInUser()` | Returns the currently logged-in `CometChat.User` synchronously, or `null` |\n\n**When to use which:**\n- `CometChatUIKit.getLoggedinUser()` — async, returns a Promise. Use in `useEffect` or async functions.\n- `CometChatUIKitLoginListener.getLoggedInUser()` — synchronous. Use for immediate checks (e.g., redirect if not logged in, guard a route).\n\n---\n\n### UIKitSettingsBuilder\n\nBuilder class for creating the settings object passed to `CometChatUIKit.init()`.\n\n**Key methods:**\n| Method | Description |\n|---|---|\n| `.setAppId(appId: string)` | Set the CometChat app ID (required) |\n| `.setRegion(region: string)` | Set the region: `\"us\"`, `\"eu\"`, or `\"in\"` (required) |\n| `.setAuthKey(authKey: string)` | Set the auth key (required for `login(uid)` in dev mode) |\n| `.subscribePresenceForAllUsers()` | Enable presence (online/offline) for all users |\n| `.subscribePresenceForFriends()` | Enable presence only for friends list |\n| `.subscribePresenceForRoles(roles)` | Enable presence for specific user roles |\n| `.setAutoEstablishSocketConnection(bool)` | Control WebSocket auto-connect (default: true) |\n| `.setAdminHost(host)` | Override admin URL (dedicated deployments only) |\n| `.setClientHost(host)` | Override client URL (dedicated deployments only) |\n| `.build()` | Returns the settings object |\n\n**Usage:**\n```typescript\nimport { UIKitSettingsBuilder } from \"@cometchat/chat-uikit-react\";\n\nconst settings = new UIKitSettingsBuilder()\n .setAppId(\"your-app-id\")\n .setRegion(\"us\")\n .setAuthKey(\"your-auth-key\")\n .subscribePresenceForAllUsers()\n .build();\n```\n\n---\n\n## Composition patterns\n\nThese are the standard ways to combine CometChat components into complete\nexperiences. Use these as starting points, then customize with props.\n\n> **Composer note:** Both `CometChatMessageComposer` and\n> `CometChatCompactMessageComposer` exist. The compact variant includes\n> rich text editing by default. The sample app uses the compact variant\n> everywhere. Use whichever fits — the props are identical.\n\n### Multi-conversation (two-pane)\n\nThe most common pattern. A conversation list on the left, message view on the right.\n\n**Key details from the v6 sample app:**\n- Store the full `CometChat.Conversation` object (not just user/group) — you need it for `activeConversation` highlighting and conversation-level operations\n- Pass `activeConversation` to `CometChatConversations` so the selected item is visually highlighted\n- Derive user/group from the conversation at render time using `getConversationWith()`\n\n```tsx\nimport { useState } from \"react\";\nimport {\n CometChatConversations,\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\nfunction MultiConversation() {\n const [activeConversation, setActiveConversation] = useState();\n\n // Derive user/group from the active conversation\n const entity = activeConversation?.getConversationWith();\n const selectedUser = entity instanceof CometChat.User ? entity : undefined;\n const selectedGroup = entity instanceof CometChat.Group ? entity : undefined;\n\n return (\n
\n
\n setActiveConversation(conv)}\n />\n
\n
\n {selectedUser && (\n <>\n \n \n \n \n )}\n {selectedGroup && (\n <>\n \n \n \n \n )}\n
\n
\n );\n}\n```\n\n---\n\n### Single thread\n\nOne chat window for a known user or group. No conversation list.\n\n```tsx\nimport {\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\ninterface SingleThreadProps {\n user?: CometChat.User;\n group?: CometChat.Group;\n}\n\nfunction SingleThread({ user, group }: SingleThreadProps) {\n return (\n
\n {user && }\n {group && }\n {user && }\n {group && }\n {user && }\n {group && }\n
\n );\n}\n```\n\nTo target a specific user, resolve them first:\n\n```tsx\nconst [targetUser, setTargetUser] = useState();\n\nuseEffect(() => {\n CometChat.getUser(\"seller-uid-123\").then(setTargetUser);\n}, []);\n\nif (!targetUser) return null;\nreturn ;\n```\n\n---\n\n### Full messenger (tab-based)\n\nA tab bar with Chats, Calls, Users, and Groups. Users can browse, start conversations, and make calls.\n\n```tsx\nimport { useState } from \"react\";\nimport {\n CometChatConversations,\n CometChatCallLogs,\n CometChatUsers,\n CometChatGroups,\n CometChatMessageHeader,\n CometChatMessageList,\n CometChatMessageComposer,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\ntype Tab = \"chats\" | \"calls\" | \"users\" | \"groups\";\n\nfunction FullMessenger() {\n const [activeTab, setActiveTab] = useState(\"chats\");\n const [activeConversation, setActiveConversation] = useState();\n const [selectedUser, setSelectedUser] = useState();\n const [selectedGroup, setSelectedGroup] = useState();\n\n function selectUser(user: CometChat.User) {\n setSelectedUser(user);\n setSelectedGroup(undefined);\n }\n\n function selectGroup(group: CometChat.Group) {\n setSelectedUser(undefined);\n setSelectedGroup(group);\n }\n\n return (\n
\n
\n {/* Tab content */}\n
\n {activeTab === \"chats\" && (\n {\n setActiveConversation(conv);\n const entity = conv.getConversationWith();\n if (entity instanceof CometChat.User) selectUser(entity);\n else if (entity instanceof CometChat.Group) selectGroup(entity);\n }}\n />\n )}\n {activeTab === \"calls\" && (\n {\n // Call log items show call details, not a message view.\n // Use the call's participants to start a new call or\n // navigate to the conversation.\n }}\n />\n )}\n {activeTab === \"users\" && (\n \n )}\n {activeTab === \"groups\" && (\n \n )}\n
\n {/* Tab bar at the bottom */}\n
\n {([\"chats\", \"calls\", \"users\", \"groups\"] as Tab[]).map((tab) => (\n setActiveTab(tab)}\n style={{ flex: 1, padding: 12, fontWeight: activeTab === tab ? \"bold\" : \"normal\" }}\n >\n {tab.charAt(0).toUpperCase() + tab.slice(1)}\n \n ))}\n
\n
\n
\n {selectedUser && (\n <>\n \n \n \n \n )}\n {selectedGroup && (\n <>\n \n \n \n \n )}\n
\n
\n );\n}\n```\n\n---\n\n### Threading\n\nThreading is NOT automatic. The kit's **default** is `hideReplyInThreadOption={false}` — so a \"Reply in Thread\" entry shows up in every message's action menu out of the box, **even when the integrator hasn't wired a thread panel**. A user who clicks it sees nothing happen. That's why every `` in the `cometchat-placement` patterns uses `hideReplyInThreadOption` by default.\n\n**To enable threading** in an experience that has room for a thread panel (typically a two-pane messenger or route-based chat — not a compact drawer or widget):\n\n1. Remove the `hideReplyInThreadOption` prop from the main `CometChatMessageList`.\n2. Wire `onThreadRepliesClick` to capture the thread message (pattern below).\n3. Render the thread panel as a side panel or overlay. The thread panel has its OWN `CometChatMessageList` + `CometChatMessageComposer` scoped via `parentMessageId`.\n\nFull pattern:\n\n```tsx\nimport { useState } from \"react\";\nimport {\n CometChatMessageList,\n CometChatMessageComposer,\n CometChatThreadHeader,\n} from \"@cometchat/chat-uikit-react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\n// 1. In your main message view, capture the thread click:\n {\n setThreadMessage(message);\n setShowThread(true);\n }}\n/>\n\n// 2. Render the thread panel as a side panel:\ninterface ThreadPanelProps {\n parentMessage: CometChat.BaseMessage;\n user?: CometChat.User;\n group?: CometChat.Group;\n onClose: () => void;\n}\n\nfunction ThreadPanel({ parentMessage, user, group, onClose }: ThreadPanelProps) {\n const parentId = parentMessage.getId();\n\n return (\n
\n \n {user && }\n {group && }\n {user && }\n {group && }\n
\n );\n}\n```\n\n**Key details:**\n- `onThreadRepliesClick` receives the full `CometChat.BaseMessage` (not just an ID)\n- `CometChatThreadHeader` shows the parent message content + close button\n- The scoped `CometChatMessageList` with `parentMessageId` shows only thread replies\n- The scoped `CometChatMessageComposer` with `parentMessageId` sends replies to the thread\n\n---\n\n### Search integration\n\nSearch overlays **alongside** the conversation list — it does NOT replace it. The conversations list stays mounted; search appears as a sibling panel.\n\n**Global search (across all conversations):**\n\n```tsx\nimport { useState } from \"react\";\nimport { CometChatConversations, CometChatSearch } from \"@cometchat/chat-uikit-react\";\n\nfunction ConversationsWithSearch({ onSelectConversation }) {\n const [showSearch, setShowSearch] = useState(false);\n\n return (\n
\n {/* Conversations always stay mounted */}\n setShowSearch(true)}\n activeConversation={activeConversation}\n onItemClick={onSelectConversation}\n />\n\n {/* Search overlays on top when active */}\n {showSearch && (\n
\n {\n setShowSearch(false);\n onSelectConversation(conv);\n }}\n onMessageClicked={(msg) => {\n setShowSearch(false);\n // navigate to the message's conversation\n }}\n />\n
\n )}\n
\n );\n}\n```\n\n**In-conversation search (within the active chat):**\n\n```tsx\n// Add search button to the message header:\n setShowMessageSearch(true)}\n/>\n\n// Show CometChatSearch scoped to the current user/group:\n{showMessageSearch && (\n {\n setShowMessageSearch(false);\n // scroll to the message in the message list\n }}\n />\n)}\n```\n\n---\n\n### Details panel\n\nUser and group detail panels are **custom-built** — there is no pre-built `CometChatUserDetails` or `CometChatGroupDetails` export in the UI Kit. The v6 sample app has reference implementations at `sample-app/src/components/CometChatDetails/`.\n\n**For user details:** build a custom component using `CometChatAvatar` + user info + action buttons (block/unblock). Fetch the pattern from the sample app's `CometChatUserDetails.tsx`.\n\n**For group details:** build a custom component and use these real UI Kit components inside it:\n\n```tsx\n// Open details from the message header:\n setShowDetails(true)}\n/>\n\n// Group details panel uses real kit components:\n{showDetails && selectedGroup && (\n
\n {/* CometChatGroupMembers is a real kit component */}\n {\n // Switch to 1:1 chat with this member\n }}\n />\n {/* CometChatBannedMembers is a real kit component */}\n
\n)}\n```\n\n**Important:** `CometChatGroupMembers` requires the `group` prop (it's the only required prop). The component handles member listing, search, scope changes, kick, and ban actions internally.\n\n---\n\n### Calls integration\n\nAdd voice/video calling to your message view, plus incoming call handling at the app root.\n\n```tsx\n// 1. Add call buttons to the message header:\n}\n/>\n\n// 2. Mount incoming call handler at the app root (outside any route):\nfunction App() {\n return (\n <>\n \n \n {/* your routes */}\n \n \n );\n}\n```\n\n`CometChatIncomingCall` must be mounted at the top level so it can show the incoming call overlay regardless of which page the user is on. `CometChatOutgoingCall` and `CometChatOngoingCall` are automatically rendered by the call flow.","tags":["cometchat","components","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react","react-native"],"capabilities":["skill","source-cometchat","skill-cometchat-components","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-components","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (34,091 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:49.198Z","embedding":null,"createdAt":"2026-05-07T13:05:08.387Z","updatedAt":"2026-05-18T19:04:49.198Z","lastSeenAt":"2026-05-18T19:04:49.198Z","tsv":"'/src/components/cometchatdetails':3318 '0':2820,3209 '1':154,294,330,331,2096,2487,2712,2811,2823,2827,2944,3002,3403,3404,3458 '10':3211 '100':2556 '100vh':2468,2698 '12':2813 '123':2599 '1px':2474,2792,3061,3387 '2':183,1020,2078,2953,3022,3473 '3':1230,2963 '320px':3385 '360px':2472,2702 '4':1449 '400px':3055 '5':1567 '5b':1737 '5c':1793 '6':1883 'absolut':3207 'access':2113 'across':837,915,3157 'action':2876,3330,3438 'activ':897,1386,2442,3202,3237 'activeconvers':339,399,400,2388,2396,2435,2446,2478,2479,2665,2716,2717,3193,3194 'activegroup':2778 'activetab':2660,2713,2738,2768,2775,2815 'activeus':2771 'actual':270 'ad':280 'add':3240,3442,3459 'admin':1145,2252 'advanc':1757 'ai':1568,1570,1576,1597,1635,1647,1652,1674,1690,1703,1710,1720,1725,1735 'ai-pow':1569 'alongsid':1445,1639,3135 'alway':254,1337,3184 'and/or':1624,1672 'anim':1715 'annot':147 'api':63,1698,2053 'app':601,1295,1308,1335,2190,2283,2335,2375,3310,3317,3339,3455,3480,3486 'appear':3150 'appid':2185 'appli':1663 'area':571,745,765 'array':1882 'assist':1572,1636,1721,1726 'async':2144,2152 'async/promise-based':2109 'attach':497 'auth':1988,2021,2040,2209,2290 'authent':1905 'authkey':2205 'auto':1325,1373,1403,1832,2245 'auto-connect':2244 'auto-link':1831 'auto-listen':1324 'auto-trigg':1372,1402 'autom':1606 'automat':1360,1469,1524,2856,3518 'auxiliarybuttonview':761,816,826,1249,3469 'avatar':698 'await':135,2088,2091 'b':139 'back':757,772 'background':3212 'badg':1460,1518 'ban':3437 'bar':366,376,934,967,2617,2783 'bare':2052 'bare-api':2051 'base':1438,1825,2614,2936 'basic':361,619,1430 'block/unblock':3332 'bold':585,1854,2817 'bool':2241 'boolean':358,769,778,795,802,1269,1276,2044 'borderleft':3060,3386 'borderright':2473 'bordertop':2791 'bottom':2786 'box':2881 'brows':1026,1046,1094,2626 'bubbl':472,1473,1728,1813 'build':304,932,1788,2265,2293,3322,3345 'builder':2170 'built':962,3292,3298 'built-in':961 'button':496,758,764,773,800,807,980,1244,1274,1281,1533,2803,3111,3242,3331,3461 'bypass':944 'call':108,350,372,552,674,740,755,788,799,806,859,870,996,1059,1107,1165,1203,1231,1237,1243,1260,1265,1273,1280,1301,1315,1329,1344,1356,1367,1376,1387,1407,1424,1929,1949,1963,2049,2620,2631,2654,2739,2742,2743,2747,2755,2762,2796,3440,3444,3451,3460,3476,3504,3522 'captur':2957,3008 'catalog':5,43 'chang':3434 'chat':306,1579,1589,1593,2515,2619,2653,2663,2714,2795,2937,3238,3405 'chatbot':1598 'check':41,2159 'chip':843 'class':88,110,172,1804,1826,1873,1910,2171 'class-namespac':171 'click':378,556,747,760,793,865,876,929,1514,1535,1842,2895,3011 'client':1227,2260 'client-sid':1226 'close':979,1000,3110 'code':17,223,587,2057 'column':2491,2554,2706,2831,3059 'combin':312,2302 'cometchat':2,7,31,47,126,168,175,191,207,231,252,1586,1701,1975,2018,2031,2037,2076,2094,2189,2303,2429,2534,2648,2907,2999 'cometchat-compon':1 'cometchat-cor':1974,2075 'cometchat-plac':2906 'cometchat-product':2030 'cometchat-uid':2093 'cometchat.basemessage':83,550,672,868,987,3017,3034,3099 'cometchat.conversation':84,340,348,857,2379 'cometchat.conversationsrequestbuilder':388 'cometchat.getuser':136,2595 'cometchat.group':79,82,446,527,660,732,1105,1153,1264,2459,2542,2687,2735,3038 'cometchat.groupmember':85,1163 'cometchat.groupsrequestbuilder':1114 'cometchat.messagesrequestbuilder':475 'cometchat.textmessage':86 'cometchat.user':78,81,132,181,197,213,235,277,435,516,653,725,1057,1259,2003,2135,2452,2540,2679,2728,3036 'cometchat.usersrequestbuilder':1066 'cometchat/chat-sdk-javascript':76,128,177,193,2431,2536,2650,3001 'cometchat/chat-uikit-react':69,1866,2087,2275,2427,2532,2646,2997,3169 'cometchataiassistantchat':1595,1640 'cometchataiassistantchathistori':1632 'cometchataiassistantmessagebubbl':1723 'cometchataiassistanttool':1650 'cometchatavatar':3327 'cometchatbannedmemb':3409 'cometchatcallbutton':767,817,824,1238,1284,1341,1382,3470 'cometchatcalllog':1415,2639,2740 'cometchatcompactmessagecompos':572,603,679,2322 'cometchatconvers':316,398,890,924,2398,2422,2477,2638,2715,3166,3187 'cometchatemojikeyboard':1519 'cometchatflagmessagedialog':1759 'cometchatgroup':1086,1122,1181,2641,2777 'cometchatgroupdetail':3301 'cometchatgroupmemb':1134,1173,3390,3396,3416 'cometchatincomingcal':1293,1297,1413,3490 'cometchatmarkdownformatt':1857 'cometchatmentionsformatt':1837 'cometchatmessagecompos':409,488,490,559,592,617,686,1017,1083,1131,1541,2320,2425,2499,2509,2530,2574,2578,2644,2839,2849,2981,2994,3082,3088,3123 'cometchatmessagehead':407,486,566,694,810,1081,1129,1252,1289,2423,2493,2503,2528,2558,2562,2642,2833,2843,3247,3365,3466 'cometchatmessageinform':1773 'cometchatmessagelist':408,414,481,564,822,1014,1082,1130,1821,2424,2496,2506,2529,2566,2570,2643,2836,2846,2952,2980,2993,3012,3070,3076,3114 'cometchatmessagetempl':469 'cometchatongoingcal':1383,3516 'cometchatoutgoingcal':1352,1414,3514 'cometchatreact':1457 'cometchatreactioninfo':1546 'cometchatreactionlist':1491 'cometchatrichtextformatt':1850 'cometchatsearch':383,828,879,3167,3214,3256,3263 'cometchatsearchbar':1182,1215 'cometchatstreammessagebubbl':1706 'cometchattextformatt':1824,1875 'cometchattexthighlightformatt':1844 'cometchatthreadhead':965,1006,2995,3064,3104 'cometchatuikit':1897,2085 'cometchatuikit.createuser':2014 'cometchatuikit.getloggedinuser':1993,2106,2143 'cometchatuikit.init':1919,2089,2179 'cometchatuikit.isinitialized':2042 'cometchatuikit.login':1935,2092 'cometchatuikit.loginwithauthtoken':1982 'cometchatuikit.logout':2005 'cometchatuikit.updateuser':2033 'cometchatuikitloginlisten':2097 'cometchatuikitloginlistener.getloggedinuser':2128,2154 'cometchaturlsformatt':1830 'cometchatus':1034,1074,2640,2770 'cometchatuserdetail':3299 'cometchatuserdetails.tsx':3341 'common':2356 'compact':2325,2338,2940 'compil':219 'complet':4,1954,2306 'compon':3,12,20,36,51,65,300,849,964,1024,1187,1193,1224,1232,1451,1573,1691,1697,1741,1800,1889,1914,1933,2304,3325,3348,3355,3379,3395,3414,3428 'compos':581,1529,2317 'composit':2294 'concurr':1960 'condit':2122 'config':264 'configur':1685,1896 'connect':1408,2246 'const':133,2276,2434,2444,2448,2455,2590,2659,2664,2668,2672,2722,3048,3173 'content':2708,3109 'control':1210,1397,2242 'conv':881,883,2481,2483,2719,2721,3216,3220 'conv.getconversationwith':2724 'convers':328,345,347,356,391,402,404,423,838,856,862,912,916,954,1044,1446,1622,1643,1656,1667,1670,2350,2359,2392,2410,2443,2524,2628,2767,3137,3145,3159,3183,3230,3233 'conversation-level':2391 'conversationsrequestbuild':387 'conversationswithsearch':3171 'core':295,1976,2077 'creat':1871,2016,2173 'current':343,1996,2009,2116,2131,3260 'custom':389,470,476,763,933,1067,1115,1688,1758,1806,1828,1868,2314,3291,3324,3347 'custom-built':3290 'dashboard':1587,1629,1678 'dedic':2254,2262 'dedup':1981 'default':245,612,2247,2332,2860,2913 'deliveri':1776 'depend':99 'deploy':2255,2263 'deriv':2406,2438 'descript':338,433,514,651,723,854,985,1054,1102,1151,1198,1257,1918,2127,2183 'detail':751,1179,1494,1552,1683,1780,2370,2748,3094,3282,3287,3321,3344,3360,3374 'dev':1943,2216 'dialog':1761 'direct':1490,1545,1566 'directori':1049 'disabl':284 'display':695,1135,1159,1416,1458,1633,2465,2488,2551,2695,2703,2789,2828,3056 'div':2463,2469,2484,2549,2693,2699,2709,2787,2824,3052,3179,3204,3382 'doc':1694 'doesn':2069 'drawer':2941 'drop':688 'drop-in':687 'dual':833,952 'dual-scop':832,951 'e.g':275,633,766,1464,2160 'edit':2330 'eee':2476,2794,3063,3389 'effect':1716 'els':149,2731 'emoji':500,1456,1501,1522,1532 'enabl':1477,1583,1621,1669,2219,2226,2234,2915 'end':1972 'ensureloggedin':1978,2081 'entir':645 'entiti':130,211,2445,2450,2453,2457,2460,2723,2726,2730,2733,2737 'entri':1900,2869 'eslint':283 'eslint-disable-next-lin':282 'etc':80,588,1659,1856 'eu':2200 'even':2882 'event':1330 'everi':2873,2903 'everywher':604,2340 'evolv':1699 'exclus':442,453,523,534 'exist':59,2323 'experi':307,2307,2919 'explicit':184 'export':62,1744,3302 'extend':1874 'fals':2863,3177,3218,3224,3273 'featur':831,1577,1580,1591,1594,1704,1722,1736 'feed':1391 'fetch':393,478,1071,1119,3333 'fff':3213 'filter':364,394,842,941,1190,1229 'filterus':1218 'find':909 'fire':260,2071 'first':2588 'fit':2343 'fix':268 'flag':241 'flex':2466,2486,2489,2552,2696,2704,2711,2790,2810,2826,2829,3057 'flexdirect':2490,2553,2705,2830,3058 'flight':2064 'flow':3523 'fontweight':2814 'format':583,608,631,1731 'formatt':1795,1803,1822,1829 'friend':2230 'full':385,830,1521,2378,2610,2985,3098 'full-featur':829 'fullmesseng':2658 'function':178,194,2153,2432,2543,2657,2676,2684,3041,3170,3485 'get':1994 'getconversationwith':2415,2447 'getguid':3269 'getuid':3266 'global':3155 'group':333,422,444,445,451,509,525,526,532,659,665,705,731,737,1030,1032,1091,1097,1104,1110,1117,1124,1126,1140,1152,1155,1174,1178,1263,1267,1448,2504,2507,2510,2522,2541,2546,2561,2563,2564,2569,2571,2572,2577,2579,2580,2623,2656,2686,2691,2776,2798,2844,2847,2850,3037,3045,3075,3077,3078,3087,3089,3090,3286,3343,3368,3373,3397,3419 'groupsrequestbuild':1113 'guard':2065,2120,2166 'guid':3267 'hand':936 'hand-rol':935 'handl':1891,3429,3452 'handler':1843,3477 'hang':1395 'hang-up':1394 'happen':2899 'hard':898 'hasn':2886 'header':727,734,743,785,966,1619,3246,3364,3465 'height':2467,2555,2697 'helper':1979,2082 'hide':796,803,1270,1277 'hidereplyinthreadopt':2862,2911,2947 'hidevideocallbutton':794,1268 'hidevoicecallbutton':801,1275 'highlight':341,949,1845,2389,2405 'histori':1418,1644 'host':2250,2258 'hover':1554 'icon':782,791 'id':1942,2191,2284,3103 'ident':2347 'illustr':2054 'immedi':2158 'implement':3313 'import':67,74,77,97,123,125,156,174,188,189,205,217,230,250,251,1864,2084,2272,2417,2421,2428,2527,2533,2633,2637,2647,2988,2992,2998,3161,3165,3415 'in-convers':3231 'in-flight':2062 'includ':2327 'incom':1300,1314,1328,1351,3450,3475,3503 'info':744,1791,3329 'infrastructur':1884 'init':2046 'initi':1365,1377,1892,1903,1921 'input':493,1186,1211 'inset':3208 'insid':1471,1526,1610,3356 'instanceof':118,131,212,276,2451,2458,2727,2734 'instanti':1489,1544,1565 'integr':16,309,597,2885,3132,3441 'interact':1450,1603,1637 'interfac':1599,2537,3031 'intern':1482,1509,1539,1558,1718,1733,1748,1766,3439 'invent':19 'involv':907 'ital':586,1855 'item':2402,2745 'join':1096 'jsx':48 'jsx.element':762 'key':334,429,510,647,719,850,981,1050,1098,1147,1194,1253,1319,1368,1398,1425,1478,1506,1536,1555,1915,2022,2041,2124,2180,2210,2291,2369,2804,3093 'kick':3435 'kit':10,34,1751,2858,3306,3354,3378,3394,3413 'known':2519 'layout':413,1439 'left':2363 'let':164 'level':2393,3497 'limit':395 'line':286 'link':1833 'list':54,320,369,893,939,1021,1037,1089,1223,1486,1495,1562,2231,2360,2525,3138,3146,3281,3431 'listen':1326 'log':324,1937,1984,1998,2006,2101,2133,2164,2744 'logged-in':323,1997,2100,2132 'login':1893,1953,1970,2059,2213 'main':1899,2951,3005 'make':2630 'manag':2028 'map':2801 'markdown':1859 'marketplac':638 'match':956 'may':1753 'mcp':1695 'mean':95 'member':1033,1136,1146,1157,1162,1168,3400,3408,3430 'mention':1839 'menu':715,1291,2877 'messag':296,416,437,448,465,471,477,503,518,529,545,549,570,580,655,662,671,711,840,867,873,910,955,971,976,989,1453,1463,1472,1485,1505,1528,1561,1590,1618,1658,1665,1711,1764,1772,1775,1790,1812,1836,1849,1862,2364,2751,2874,2960,3006,3016,3019,3108,3228,3245,3277,3280,3363,3447,3464 'messagesrequestbuild':474 'messeng':2611,2932 'method':1916,1917,2125,2126,2181,2182 'mix':200 'mobile/nested':775 'modal':1614 'mode':547,669,1944,2217 'moder':1738 'modern':611 'mount':1304,1338,3148,3186,3474,3493 'msg':885,887,3222,3271 'multi':2349 'multi-convers':2348 'multiconvers':2433 'must':917,1927,3491 'mute/unmute':1392 'mutual':441,452,522,533 'name':21,37,363,697 'name-filt':362 'namespac':162,173 'navig':2764,3225 'navigatetoconvers':882 'need':291,1754,2385 'never':18,900 'new':596,1043,2278,2761 'next':285 'no-op':1955 'none':1321,1370,1400,1427 'normal':2818 'note':1681,2318 'noth':2898 'notif':1302 'nounusedloc':239,263 'nowher':148 'null':1011,2004,2138,2605 'number':457,538,667 'object':2176,2269,2380 'onback':753 'onclick':2806 'onclos':994,1009,3039,3046,3067,3068 'onconversationclick':855,880,3215 'one':1441,2514 'onitemclick':346,401,738,813,1055,1075,1103,1123,1161,2480,2718,2741,2773,2780,3195,3370,3399 'online/offline':2221 'onmessageclick':866,884,3221,3270 'onsearch':1199,1216 'onsearchbarclick':370,922,3190 'onsearchoptionclick':786,3252 'onselectconvers':3172,3196,3219 'onsendbuttonclick':548,670 'onthreadrepliesclick':2955,3015,3095 'op':1957 'open':750,3359 'opengroup':1125 'oper':2394 'option':151,153,182,498,1654,1686 'outgo':1343,1355 'outsid':3482 'overlap':1962 'overlay':1303,2973,3134,3198,3505 'overrid':2251,2259 'owner':1144 'pad':2812 'page':3509 'pagin':948 'pane':412,2353,2931 'panel':752,1180,1612,1792,2891,2926,2967,2971,2976,3026,3030,3154,3283,3288,3375 'parent':975,3107 'parentid':3049,3074,3080,3086,3092 'parentmessag':986,1007,3033,3043,3065,3066 'parentmessage.getid':3050 'parentmessageid':428,456,537,666,1016,1019,2984,3073,3079,3085,3091,3116,3125 'particip':2757 'pass':1814,1877,2177,2395 'past':1420,1634 'pattern':105,138,2295,2357,2909,2961,2986,3335 'picker':1523 'ping':639 'place':1246 'placement':2908 'plain':121,248,641 'pleas':1965 'plus':3449 'point':1901,2312 'popov':1549 'posit':3181,3206 'power':1571 'pre':3297 'pre-built':3296 'prefer':593 'prerequisit':1620,1668 'presenc':2220,2227,2235 'previous':1969 'primari':847 'prior':1952 'product':1990,2032 'promis':1926,1946,1992,2002,2013,2147 'prop':38,335,336,430,431,511,512,590,648,649,720,721,851,852,982,983,1051,1052,1099,1100,1148,1149,1195,1196,1250,1254,1255,1292,1320,1369,1399,1426,1479,1507,1537,1556,1684,1819,2316,2345,2948,3420,3426 'provid':2111 'pure':92 'purpos':22,1823 'queri':1692 'reach':615 'react':8,32,1498,1799,1913,2067,2420,2636,2991,3164 'reaction':1454,1459,1475,1517,1551 'read':1778,1784 'real':2056,3352,3377,3393,3412 'reason':627 'receipt':1779 'receiv':1782,3096 'redirect':2161 'refer':13,157,234,3312 'regardless':3506 'region':2194,2198 'relat':3182 'releas':1705 'remov':2945 'render':317,415,1239,1298,1353,1384,1470,1525,1609,1651,1707,1724,1747,1765,1810,1838,1851,1858,1870,1934,2123,2412,2964,3023,3519 'renderhead':179,195 'replac':690,891,3142 'repli':462,542,1626,2866,3120,3127 'report':1770 'reporting/flagging':1763 'request':906,1971 'requir':1160,1322,1371,1401,1428,1575,2020,2039,2192,2203,2211,3417,3425 'resolv':2586 'respons':1607,1727 'result':863,874,938 'return':1924,1945,1991,2001,2011,2043,2129,2145,2266,2462,2548,2604,2606,2692,3051,3178,3487 'rich':575,606,692,1852,2328 'rich-text':574,605 'right':2368 'ring':1358 'role':1143,2233,2239 'roll':901,937 'room':2922 'root':1296,1309,1336,3456,3481 'rout':2168,2935,3484,3489 'route-bas':2934 'rule':899 'runtim':89,226,273 'safe':1947 'safest':244 'sampl':600,2334,2374,3309,3316,3338 'sample-app':3315 'scope':834,953,2982,3113,3122,3257,3433 'screen':1318,1357,1388 'scroll':3274 'scrollabl':319,1036,1088 'scrolltomessag':886 'sdk':71,946,1923 'search':365,375,386,718,781,790,835,836,848,895,904,908,911,914,1185,1846,3131,3133,3149,3156,3197,3234,3241,3432 'see':1349,2029,2074,2897 'select':344,1023,1028,1064,1085,1112,1133,1170,2401 'selectedgroup':1175,2456,2502,2505,2508,2511,2673,2779,2842,2845,2848,2851,3268,3369,3381,3398 'selectedus':483,561,681,812,819,1286,2449,2492,2495,2498,2501,2669,2772,2832,2835,2838,2841,3014,3249,3265,3367,3468,3472 'selectgroup':2685,2736,2781 'selectus':2677,2729,2774 'seller':2597 'seller-uid':2596 'send':495,502,517,528,541,554,654,661,676,3126 'server':2025 'server-sid':2024 'set':459,540,1920,2090,2175,2187,2196,2207,2268,2277 'setactiveconvers':403,2436,2482,2666,2720 'setactivetab':2661,2807 'setadminhost':2249 'setappid':2184,2280 'setauthkey':2204,2287 'setautoestablishsocketconnect':2240 'setclienthost':2257 'setregion':2193,2285 'setselectedgroup':2674,2682,2690 'setselectedus':2670,2680,2688 'setshowdetail':814,3371 'setshowmessagesearch':3253,3272 'setshowsearch':3175,3191,3217,3223 'setshowthread':3020 'settargetus':2592,2601 'setthreadmessag':3018 'setthreadpar':1010 'seven':315 'ship':958 'show':359,436,447,460,726,733,770,779,973,1313,1492,1550,1642,1774,2746,2870,3105,3117,3255,3501 'showbackbutton':768 'showdetail':3380 'showmessagesearch':3262 'shown':1361,1510 'showsearch':3174,3203 'showsearchbar':357,920,3188 'showsearchopt':777,3250 'sibl':3153 'side':1228,2026,2970,3029 'singl':26,2512 'singlethread':2544,2607 'singlethreadprop':2538,2547 'skill' 'skill-cometchat-components' 'skip':629 'slide':166 'slot':716,827 'smart':1578,1592,1625 'solid':2475,2793,3062,3388 'sourc':27 'source-cometchat' 'special':1730 'specif':419,626,1139,1504,2237,2584 'specifi':506 'standalon':1184 'standard':2299 'start':991,1042,2311,2627,2759 'startconvers':1077 'starter':1623 'state':1359,1894 'static':1909 'status':700 'stay':3147,3185 'store':2376 'strategi':98 'stream':1709 'strict':262 'strictmod':2068 'string':1201,1209,2186,2195,2206 'strip':215,636 'stripped-down':635 'style':1841,2464,2470,2485,2550,2694,2700,2710,2788,2809,2825,3053,3180,3205,3383 'subscribepresenceforallus':2218,2292 'subscribepresenceforfriend':2225 'subscribepresenceforrol':2232 'summar':1655 'summari':1671 'support':424,501,713 'swap':381,926 'switch':3401 'synchron':2104,2112,2136,2155 'syntax':1860 'tab':1437,1444,2613,2616,2652,2707,2782,2800,2802,2805,2808,2816 'tab-bas':1436,2612 'tab.charat':2819 'tab.slice':2822 'tap':354 'target':2582 'targetus':2591,2603,2609 'templat':468,473 'term':1847 'text':492,576,607,642,693,1200,1208,1217,1219,1794,1808,1853,1869,2329 'textformatt':1818,1881 'thread':425,466,546,668,970,993,1002,2513,2852,2853,2868,2890,2916,2925,2959,2966,2975,3010,3025,3119,3130 'threadpanel':3042 'threadpanelprop':3032,3047 'threadparentmessag':1008 'throw':224,1964 'thumb':1466 'thumbs-up':1465 'time':220,2413 'timestamp':1785 'token':1983,1989 'tool':1653,1675 'toolbar':584,632 'tooltip':1547 'top':568,708,3200,3496 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'touppercas':2821 'track':2098 'translat':1657 'tri':210 'trigger':1342,1374,1404,1615 'true':815,921,2248,3021,3189,3192,3251,3254,3372 'truli':289 'truth':29 'ts':163 'ts6133':243,257 'tsx':124,152,397,480,558,678,809,878,1005,1073,1121,1172,1214,1283,1332,1379,1410,1433,1631,1649,1680,2416,2526,2589,2632,2987,3160,3239,3358,3457 'twice':2073 'two':150,411,1961,2352,2930 'two-pan':410,2351,2929 'type':72,93,146,159,186,190,206,238,293,337,432,513,650,722,853,984,1053,1101,1150,1197,1207,1256,1714,2651 'type-on':185 'typescript':214,2083,2271 'typic':1245,1480,1608,1746,2927 'ui':9,33,942,3305,3353 'uid':137,1936,2095,2214,2598,3264 'uikitsettingsbuild':2169,2273,2279 'undefin':2454,2461,2683,2689 'unlik':2105 'updat':2035 'url':1834,2253,2261 'us':2199,2286 'usag':40,396,479,557,677,808,877,1004,1072,1120,1171,1213,1282,1331,1378,1409,1431,1432,1630,1648,1679,2050,2270 'use':103,115,119,141,246,271,302,310,379,602,748,918,1040,1092,1188,1481,1508,1538,1557,1638,1717,1732,1786,1973,2118,2141,2148,2156,2308,2336,2341,2414,2753,2910,3326,3350,3376 'useeffect':2150,2594 'user':134,180,196,326,353,420,434,440,455,482,507,515,521,536,560,652,658,680,703,724,730,811,818,999,1029,1039,1048,1056,1062,1069,1076,1078,1206,1258,1262,1285,1348,1364,1447,1513,1601,1769,1941,2000,2010,2015,2019,2027,2034,2038,2103,2117,2224,2238,2494,2497,2500,2520,2539,2545,2557,2559,2560,2565,2567,2568,2573,2575,2576,2585,2608,2621,2624,2655,2678,2681,2769,2797,2834,2837,2840,2893,3013,3035,3044,3069,3071,3072,3081,3083,3084,3248,3284,3320,3328,3366,3467,3471,3511 'user/group':2383,2407,2439,3261 'usersrequestbuild':1065 'usest':2418,2437,2593,2634,2662,2667,2671,2675,2989,3162,3176 'usual':1488,1543,1564 'util':1740 'ux':646 'v6':11,35,599,2373,3308 'valu':90,113,122,155,249,274,1212 'variant':577,620,2326,2339 'via':160,427,1816,2983 'video':798,1236,1242,1272,1390,1423 'view':426,467,712,776,972,1003,2365,2752,3007,3448 'visual':1888,2404 'voic':805,1234,1240,1279,1421 'voice/video':3443 'void':349,371,551,673,739,754,787,858,869,995,1058,1106,1164,1202,3040 'wait':1966 'warn':258 'way':2300 'websocket':2243 'whether':2045 'whichev':2342 'whose':1156 'widget':2943 'width':2471,2701,3054,3384 'window':2516 'wire':2888,2954 'within':1191,3235 'work':255,405,484,562,614,682,820,888,1012,1079,1127,1176,1220,1287,1339,1380,1411,1434 'wrap':2058 'write':15,45,204,229 'x3':1468 'your-app-id':2281 'your-auth-key':2288 'zindex':3210","prices":[{"id":"c374f131-9da6-4e13-b4db-a0b571fec5c8","listingId":"a5f598af-33c7-4a1a-a688-da2015f976d5","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:08.387Z"}],"sources":[{"listingId":"a5f598af-33c7-4a1a-a688-da2015f976d5","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-components","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-components","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:08.387Z","lastSeenAt":"2026-05-18T19:04:49.198Z"}],"details":{"listingId":"a5f598af-33c7-4a1a-a688-da2015f976d5","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-components","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"4aa6bb4909855b3c4b1df8cc00d7f7e5122e29a0","skill_md_path":"skills/cometchat-components/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-components"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-components","license":"MIT","description":"Complete catalog of CometChat React UI Kit v6 components. Reference before writing integration code -- never invent component names.","compatibility":"@cometchat/chat-uikit-react ^6; @cometchat/chat-sdk-javascript ^4"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-components"},"updatedAt":"2026-05-18T19:04:49.198Z"}}