@cometchat/skills 4.4.1 → 5.0.0

package/skills/cometchat-customization/references/component-catalog.md

@@ -1,236 +0,0 @@
-# CometChat React UI Kit v6 — Component Catalog
-
-> **Validated against:** `@cometchat/chat-uikit-react@6.x` (April 2026)
-> **Drift test:** `packages/cli/test/component-catalog.test.ts` fails
-> if any component in this catalog no longer exists in the installed
-> package, or if the installed package exports components not listed here.
-
-**Read this file BEFORE writing any code.** If the user's request maps
-to an entry in this catalog, use it. Don't hand-roll, don't query the
-docs MCP, just use the component listed here.
-
----
-
-## A. Exported components from `@cometchat/chat-uikit-react`
-
-### Core — the building blocks of a chat integration
-
-| Component | What it renders | Key props / notes |
-|---|---|---|
-| `CometChatConversations` | Conversation list (left panel) | `showSearchBar`, `onSearchBarClicked`, `onItemClick`, `conversationsRequestBuilder`, `headerView`, `emptyStateView`, `activeConversation` |
-| `CometChatMessageList` | Message thread (the main chat area) | `user` / `group`, `parentMessageId` (for threads), `messagesRequestBuilder`, `onThreadRepliesClick`, `templates` (custom bubbles), `emptyStateView`, `goToMessageId` (scroll to a message), `textFormatters` (e.g. `CometChatTextHighlightFormatter` for search highlighting), `startFromUnreadMessages`, `showMarkAsUnreadOption` |
-| `CometChatMessageComposer` | Message input + send button | `user` / `group`, `parentMessageId` (for threads), `text`, `onSendButtonClick`, `headerView`, `secondaryButtonView` |
-| `CometChatCompactMessageComposer` | Rich-text-enabled message composer | Same props as `CometChatMessageComposer` but includes rich text editing |
-| `CometChatMessageHeader` | Header bar above message list | `user` / `group`, `onItemClick` (opens details panel), `onBack`, `auxiliaryButtonView` (custom buttons e.g. CometChatCallButtons), `showSearchOption`, `onSearchOptionClicked` |
-| `CometChatUsers` | Users list | `usersRequestBuilder`, `onItemClick`, `selectionMode`, `showSearchBar` |
-| `CometChatGroups` | Groups list | `groupsRequestBuilder`, `onItemClick`, `selectionMode`, `showSearchBar` |
-| `CometChatGroupMembers` | Members list for a group | `group`, `onItemClick`, `selectionMode` |
-| `CometChatSearch` | Advanced dual-scope search (conversations + messages with filter chips) | `onConversationClicked`, `onMessageClicked`, `onBack`, `searchIn`, `searchFilters` |
-| `CometChatSearchBar` | Standalone search input (the bar itself, no results) | `onSearch`, `text`, `placeholderText` |
-| `CometChatThreadHeader` | Thread header with parent message preview + reply count | `parentMessage`, `onClose` |
-
-### Calls
-
-| Component | What it renders |
-|---|---|
-| `CometChatCallButtons` | Voice + video call buttons (placed inside message header or standalone) |
-| `CometChatIncomingCall` | Incoming call notification banner with accept/reject |
-| `CometChatOutgoingCall` | Outgoing call screen with ringing indicator |
-| `CometChatOngoingCall` | Active call view (video/audio, controls) |
-| `CometChatCallLogs` | List of past calls with duration, type, timestamp |
-
-### Reactions / Interactions
-
-| Component | What it renders |
-|---|---|
-| `CometChatReactions` | Emoji reaction strip below a message bubble |
-| `CometChatReactionList` | Full reaction list with who-reacted |
-| `CometChatReactionInfo` | Tooltip/popover showing reaction details |
-| `CometChatEmojiKeyboard` | Emoji picker grid |
-
-### Message bubbles (used inside `CometChatMessageList` via `templates`)
-
-| Bubble component | Content type |
-|---|---|
-| `CometChatTextBubble` | Text message |
-| `CometChatImageBubble` | Image attachment |
-| `CometChatVideoBubble` | Video attachment |
-| `CometChatAudioBubble` | Audio attachment |
-| `CometChatFileBubble` | Generic file attachment |
-| `CometChatDocumentBubble` | Collaborative document |
-| `CometChatCallBubble` | Call event message (missed, answered, etc.) |
-| `CometChatActionBubble` | Action message (user joined, left, etc.) |
-| `CometChatDeleteBubble` | Deleted message placeholder |
-| `CometChatStreamMessageBubble` | Streaming / AI-generated message in progress |
-| `CometChatAIAssistantMessageBubble` | AI assistant response bubble |
-
-### AI features
-
-| Component | What it renders |
-|---|---|
-| `CometChatAIAssistantChat` | AI assistant chat panel |
-| `CometChatAIAssistantChatHistory` | Previous AI assistant conversations |
-| `CometChatAIAssistantTools` | AI tool selection / function calling UI |
-
-### Primitives / building blocks
-
-| Component | What it renders |
-|---|---|
-| `CometChatAvatar` | User / group avatar (image + fallback initials) |
-| `CometChatListItem` | Single row in any list (avatar + title + subtitle + tail) |
-| `CometChatList` | Base scrollable list with loading/empty/error states |
-| `CometChatDate` | Formatted date/time label |
-| `CometChatButton` | Styled button |
-| `CometChatCheckbox` | Checkbox input |
-| `CometChatRadioButton` | Radio input |
-| `CometChatDropDown` | Dropdown selector |
-
-### Overlays / dialogs
-
-| Component | What it renders |
-|---|---|
-| `CometChatActionSheet` | Bottom sheet with action list |
-| `CometChatActions` | Inline action buttons |
-| `CometChatActionsIcon` | Icon-triggered action menu |
-| `CometChatActionsView` | View-slot for custom actions |
-| `CometChatContextMenu` | Right-click / long-press context menu |
-| `CometChatPopover` | Popover container |
-| `CometChatConfirmDialog` | Confirmation dialog (OK / Cancel) |
-| `CometChatFlagMessageDialog` | Report/flag message dialog |
-| `CometChatToast` | Toast notification |
-| `CometChatErrorView` | Error state view |
-| `CometChatFullScreenViewer` | Full-screen media viewer (images, videos) |
-
-### Group management
-
-| Component | What it renders |
-|---|---|
-| `CometChatChangeScope` | Change a member's role (admin, moderator, member) |
-| `CometChatUserMemberWrapper` | Wrapper for user+member context |
-
-### Composer add-ons
-
-| Component | What it renders |
-|---|---|
-| `CometChatEditPreview` | Edit-message preview above composer |
-| `CometChatMessagePreview` | Reply-to-message preview above composer |
-| `CometChatMediaRecorder` | Voice message recorder |
-| `CometChatMessageInformation` | Message info (delivery, read receipts per-recipient) |
-
-### Infrastructure (not rendered directly, but configured)
-
-| Export | Purpose |
-|---|---|
-| `CometChatUIKit` | Initialization singleton: `CometChatUIKit.init()`, `.login()`, `.logout()` |
-| `CometChatUIKitLoginListener` | Login state listener: `.getLoggedInUser()` |
-| `CometChatUIKitCalls` | Calls plugin initialization |
-| `CometChatLocalize` | i18n: `CometChatLocalize.setLanguage("fr")` |
-| `CometChatFrameProvider` / `CometChatFrameContext` | React context for theme/locale propagation |
-
-### Event emitters (subscribe to real-time updates)
-
-| Export | Events for |
-|---|---|
-| `CometChatMessageEvents` | `ccMessageSent`, `ccMessageEdited`, `ccMessageDeleted`, `ccMessageRead` |
-| `CometChatConversationEvents` | `ccConversationDeleted` |
-| `CometChatGroupEvents` | `ccGroupMemberAdded`, `ccGroupMemberBanned`, `ccGroupLeft`, `ccOwnershipChanged` |
-| `CometChatUserEvents` | `ccUserBlocked`, `ccUserUnblocked` |
-| `CometChatCallEvents` | `ccCallAccepted`, `ccCallRejected`, `ccCallEnded`, `ccOutgoingCall` |
-| `CometChatUIEvents` | UI-level events: `ccToggleBottomSheet`, `ccShowPanel`, etc. |
-
-### Formatters (text processing for the composer + message list)
-
-| Export | Purpose |
-|---|---|
-| `CometChatTextFormatter` | Base formatter class |
-| `CometChatMarkdownFormatter` | Markdown → rich text |
-| `CometChatMentionsFormatter` | @mention detection + popover |
-| `CometChatRichTextFormatter` | Rich text rendering |
-| `CometChatTextHighlightFormatter` | Keyword highlighting in search |
-| `CometChatUrlsFormatter` | URL → clickable link |
-
-### Config / template classes (not components, but used to configure them)
-
-| Export | Purpose |
-|---|---|
-| `CometChatMessageTemplate` | Defines how a message type is rendered in the list |
-| `CometChatMessageComposerAction` | Defines an action button in the composer |
-| `CometChatMessageOption` | Defines a message-level option (reply, edit, delete, etc.) |
-| `CometChatOption` | Generic option config |
-| `CometChatSearchFilter` / `CometChatSearchScope` | Search filter + scope config for `CometChatSearch` |
-| `CometChatUIKitConstants` / `CometChatUtilityConstants` | Constant enums (message types, categories, etc.) |
-
----
-
-## B. Reference implementations in the v6 sample app
-
-> **URL:** https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/components
-> **CSS:** `sample-app/src/styles/<ComponentName>/`
-> **CRITICAL:** the docs MCP does NOT index the sample app. Fetch from GitHub.
-
-| Sample app component | What it implements | Files |
-|---|---|---|
-| `CometChatDetails/CometChatUserDetails.tsx` | User details panel (avatar, name, status, action items) | + `styles/CometChatDetails/CometChatUserDetails.css` |
-| `CometChatDetails/CometChatThreadedMessages.tsx` | Threaded messages layout (header + nested message list + composer) | + `styles/CometChatDetails/CometChatThreadedMessages.css` |
-| `CometChatHome/CometChatHome.tsx` | Top-level three-column layout assembling conversations + messages + side panels (details, threads) | + `styles/CometChatHome/CometChatHome.css` |
-| `CometChatSelector/` | Left-panel selector (Chats / Calls / Users / Groups tabs) | + `styles/CometChatSelector/` |
-| `CometChatMessages/` | Right-panel messages wrapper (header + list + composer) | + `styles/CometChatMessages/` |
-| `CometChatSearchView/` | Full search view with filter chips | + `styles/CometChatSearchView/` |
-| `CometChatCreateGroup/` | Create new group dialog (name, type, description, members) | + `styles/CometChatCreateGroup/` |
-| `CometChatAddMembers/` | Add members to an existing group | + `styles/CometChatAddMembers/` |
-| `CometChatBannedMembers/` | View/unban banned members of a group | + `styles/CometChatBannedMembers/` |
-| `CometChatTransferOwnership/` | Transfer group ownership to another member | + `styles/CometChatTransferOwnership/` |
-| `CometChatJoinGroup/` | Join a group with password prompt | + `styles/CometChatJoinGroup/` |
-| `CometChatLogin/` | Login screen (UID input + submit) | + `styles/CometChatLogin/` |
-| `CometChatCallLog/` | Call logs wrapper | + `styles/CometChatCallLog/` |
-| `CometChatAlertPopup/` | Generic alert/confirmation modal | + `styles/CometChatAlertPopup/` |
-
----
-
-## C. Task → component lookup
-
-| User asks for | Use this (tier) | Notes |
-|---|---|---|
-| "conversation list" / "chat list" | `CometChatConversations` (A) | Already mounted in experience 1 template |
-| "search conversations" / "add search bar" / "conversation search" | `showSearchBar={true}` + `onSearchBarClicked` on `CometChatConversations` (prop), swap in `<CometChatSearch>` when clicked | Always wire both props + the `CometChatSearch` swap for full dual-scope search. `showSearchBar` alone is only a basic name filter — not real search. |
-| "message list" / "chat thread" | `CometChatMessageList` (A) | Already mounted in experience 1 template |
-| "message input" / "composer" | `CometChatMessageComposer` (A) | Already mounted in experience 1 template |
-| "rich text editing" | `CometChatCompactMessageComposer` (A) | Or use `apply-feature rich-text-formatting` CLI command |
-| "header bar" / "conversation header" | `CometChatMessageHeader` (A) | Already mounted in experience 1 template |
-| "user details panel" | `CometChatDetails/CometChatUserDetails.tsx` (B) | Wire via `onItemClick` on `CometChatMessageHeader` |
-| "group details panel" | Group details inline in `CometChatHome.tsx` SideComponentGroup (B) | Wire via `onItemClick` on `CometChatMessageHeader` |
-| "threaded replies" / "reply in thread" | `CometChatThreadHeader` (A) + `CometChatMessageList` with `parentMessageId` + `CometChatMessageComposer` with `parentMessageId` | Wire via `onThreadRepliesClick` on `CometChatMessageList` |
-| "thread layout" (full panel) | `CometChatDetails/CometChatThreadedMessages.tsx` (B) | The sample app's threaded messages wrapper |
-| "group members list" | `CometChatGroupMembers` (A) | Already exported |
-| "add members to group" | `CometChatAddMembers/` (B) | Sample app pattern |
-| "banned members" | `CometChatBannedMembers/` (B) | Sample app pattern; also uses `CometChatBannedMembers` (A) internally |
-| "transfer group ownership" | `CometChatTransferOwnership/` (B) | Sample app pattern; also uses `CometChatTransferOwnership` (A) internally |
-| "create group" | `CometChatCreateGroup/` (B) | Sample app pattern |
-| "join group" | `CometChatJoinGroup/` (B) | Sample app pattern |
-| "users list" / "browse users" | `CometChatUsers` (A) | With `usersRequestBuilder` for filtering |
-| "groups list" / "browse groups" | `CometChatGroups` (A) | With `groupsRequestBuilder` for filtering |
-| "voice / video call buttons" | `CometChatCallButtons` (A) | Place inside `CometChatMessageHeader`'s `auxiliaryButtonView` prop, or standalone |
-| "incoming call notification" | `CometChatIncomingCall` (A) | Render at app root, always-mounted |
-| "outgoing call screen" | `CometChatOutgoingCall` (A) | Triggered by `CometChatCallButtons` |
-| "ongoing call / active call" | `CometChatOngoingCall` (A) | Full-screen call view |
-| "call history" / "call logs" | `CometChatCallLogs` (A) + `CometChatCallLog/` (B) | |
-| "emoji picker" | `CometChatEmojiKeyboard` (A) | Usually auto-rendered by `CometChatMessageComposer` |
-| "reactions on messages" | `CometChatReactions` (A) | Already auto-rendered in `CometChatMessageList` — check `disableReactions` if missing |
-| "message info" / "delivery receipts" | `CometChatMessageInformation` (A) | Triggered from message options menu |
-| "filter conversations" | `conversationsRequestBuilder` prop on `CometChatConversations` (prop) | |
-| "filter messages" | `messagesRequestBuilder` prop on `CometChatMessageList` (prop) | |
-| "custom empty state" | `emptyStateView` prop on any list component (prop) | |
-| "custom error state" | `errorStateView` prop on any list component (prop) | |
-| "custom header above the list" | `headerView` prop on list components (prop) | |
-| "custom message bubble" | `templates` prop on `CometChatMessageList` (prop) | NOT a custom bubble component — use `CometChatMessageTemplate` |
-| "click handler on item / message" | `onItemClick` / `onMessageClick` / `onBack` / `onSearchBarClicked` (prop) | |
-| "hide / disable a feature" | `disable*` boolean props on the relevant component (prop) | e.g. `disableReactions`, `disableTyping`, `disableMentions` |
-| "mentions in composer" | `CometChatMentionsFormatter` (A) | Already wired into `CometChatMessageComposer` by default |
-| "AI smart replies" / "AI assistant" | `CometChatAIAssistantChat` (A) | Requires `cometchat apply-feature smart-replies --openai-key sk-...` (one-shot via API) |
-| "top-level layout" / "home screen" | `CometChatHome/CometChatHome.tsx` (B) | The canonical three-column layout |
-| "login screen" | `CometChatLogin/` (B) | Sample app pattern |
-| "avatar" | `CometChatAvatar` (A) | Used inside many components; also usable standalone |
-| "flag / report message" | `CometChatFlagMessageDialog` (A) | |
-| "confirm dialog" / "are you sure" | `CometChatConfirmDialog` (A) | |
-| "full-screen image / video viewer" | `CometChatFullScreenViewer` (A) | |
-| "voice message recorder" | `CometChatMediaRecorder` (A) | |