{
  "generatedFrom": "cometchat.com/docs — ui-kit/react component pages (conversations, group-members) verified 2026-07-29; message-composer/message-list minimums from features.json + component docs (entries noting VERIFY need the exact toggle confirmed).",
  "family": "web-react",
  "major": "v7",
  "capabilityDetectors": {
    "global-conversation-search": {
      "kind": "regex",
      "why": "global search is rendered AND entered from CometChatConversations' OWN search bar affordance (showSearchBar + onSearchBarClicked) — NOT a standalone <CometChatSearch> stacked above the list. Clicking the conversation list's search bar opens the search view (the canonical React v7 placement; parity with Angular searchBarClick / iOS onSearchClick).",
      "all": [
        "CometChatSearch",
        "onSearchBarClicked"
      ]
    }
  },
  "contracts": [
    {
      "for": "core-chat-surface",
      "kind": "feature",
      "min_capabilities": ["error-boundary-wrap", "init-login-gate", "conversations-list", "message-pane-header-list-composer", "threaded-replies-panel-default", "thread-surface-differentiated", "in-chat-message-search-default", "global-conversation-search", "affordances-wired-or-hidden", "active-item-reflected", "panel-close-round-trip", "prepared-ancestor-chain", "pinned-viewport-height", "column-min-height-0", "no-load-transition-reflow", "responsive-one-pane-on-mobile", "prod-auth-token-guidance"],
      "docs_topic": "https://www.cometchat.com/docs/ui-kit/react/overview",
      "notes": "APP-LEVEL floor for an unscoped 'add chat' — the production-ready CORE surface (features.json 'core-chat-surface'; composition in .claude/skills/cometchat-skill-creator/references/FULL-APP-BLUEPRINT.md §7). Capabilities are the whole surface, not per-component features: wrap the app in CometChatErrorBoundary; gate render on init->login; a CometChatConversations LIST <-> a message pane (MessageHeader+MessageList+MessageComposer); THREADED REPLIES ARE INCLUDED BY DEFAULT (threaded-replies-panel-default): wire MessageList onThreadRepliesClick -> a thread panel (CometChatThreadHeader + a thread MessageList + MessageComposer scoped to parentMessageId, with a back/close round-trip) — set hideReplyInThreadOption ONLY if the user explicitly opts out of threads; the thread reads as a DISTINCT surface (thread-surface-differentiated): scope --cometchat-message-list-bg: var(--cometchat-background-color-01) on the thread wrapper so the thread MESSAGE LIST matches its header/composer and differs from the main list's -03 — REQUIRED because the message list paints its OWN opaque bg and does NOT inherit a wrapper background (a wrapper bg alone leaves the thread list undifferentiated; verified vs 7.1.0 CSS, AUDIT-020/024). TWO searches, both default-on: (a) GLOBAL conversation search over the LIST column (Conversations onSearchBarClicked -> CometChatSearch, no uid/guid) or showSearchBar={false}; (b) IN-CHAT scoped message search in the SIDE PANEL (MessageHeader onSearchOptionClicked -> CometChatSearch with the current uid/guid so it searches only that chat, mutually exclusive with the thread, onBack closes, onMessageClicked jumps to the hit) — the sample-app CometChatHome pattern; opt-out via showSearchOption={false}. Wire-or-hide any other default-on affordance so nothing dead-ends; SIZE the surface per the reflow-free-surface standard (skills/cometchat-react-v7-core/references/layout.md) so it is full-size from frame 1 and never reflows — the four sizing capabilities are checkable invariants, not one vague token: prepared-ancestor-chain = html,body,#root{height:100%;margin:0} (prepare a bare app's missing chain AND reset the Vite/CRA/Next scaffold center+cap+pad, AUDIT-019); pinned-viewport-height = the surface box pinned to a content-INDEPENDENT height (full-page 100dvh; embedded a fixed height or a sized grid/flex cell) — NEVER min-height/auto; column-min-height-0 = each column height:100%;min-height:0;overflow:hidden so flex children SCROLL rather than grow the parent (sizing the root alone leaves the kit filling nothing); no-load-transition-reflow = the surface is full-size BEFORE content loads, not grow into it — render the kit's OWN loadingView/emptyView inside the pinned box so the loading->loaded swap causes zero shift (don't gate the whole surface behind a placeholder->chat swap; the kit fills its parent by design, so a content-driven box is the defect, not the kit). Collapse to one pane on mobile (header hideBackButton/onBack); and TELL the user the prod auth-token path (loginWithAuthToken; Auth Key dev-only). Complete and wired but LEAN: NOT a bare/broken two-pane demo, and NOT the whole combined app. Do NOT add selector tabs / a user-or-group details side panel / a scoped search side panel / call logs / incoming call (those are the GROWTHS -> chat-experience) or gated extensions/AI/plugins unless asked — the thread panel IS part of the default. Growing to the whole app raises the floor to the chat-experience contract below; a scoped-down ask (embed/popup/sidebar) opts into the specific placement instead. Per-pane minimums are still fixed by the CometChatConversations/MessageList/MessageComposer contracts below."
    },
    {
      "for": "chat-experience",
      "kind": "feature",
      "min_capabilities": ["error-boundary-wrap", "selector-conversations", "selector-users-groups-calls-tabs", "message-pane-header-list-composer", "side-panel-user-group-details", "side-panel-thread", "side-panel-or-column-search", "incoming-call-handling", "active-item-reflected", "panel-close-round-trip", "prepared-ancestor-chain", "pinned-viewport-height", "column-min-height-0", "no-load-transition-reflow", "responsive-one-pane-on-mobile", "no-dead-end-affordances"],
      "docs_topic": "https://www.cometchat.com/docs/ui-kit/react/overview",
      "notes": "The GROW target — the whole combined single-page app, emitted when the user asks for the full app (NOT the default for a plain 'add chat' — that is core-chat-surface above). Composition in .claude/skills/cometchat-skill-creator/references/FULL-APP-BLUEPRINT.md §4. Capabilities are PANES, not per-component features: the core surface PLUS a selector (Conversations + Users/Groups/CallLogs tabs) <-> a message pane <-> a mutually-exclusive side panel (user/group details OR thread OR scoped search), CometChatIncomingCall at root, global search over the list column, all wrapped in CometChatErrorBoundary, with a mobile collapse to one pane. It is the UNION of the core surface + the growths. Wire every default-on affordance to its destination in the right pane, or hide it — nothing dead-ends. TWO composition invariants make 'nothing dead-ends' concrete (AUDIT-079): active-item-reflected = the selection is REFLECTED in the list — pass activeConversation / activeUser / activeGroup back to CometChatConversations/CometChatUsers/CometChatGroups so the selected row highlights (the kit ships these props; without them there is no active state and the user can't tell what's open); panel-close-round-trip = EVERY side panel the app opens (user/group details via CometChatGroupMembers, thread via CometChatThreadHeader, scoped/global search via CometChatSearch) MUST wire its close — onBack/onClose (the components render a back/close button whose handler is the host's job; a host-composed user-details panel must add its own close). These generalize the search/thread round-trip (AUDIT-017) to the details/members panel and add active-state reflection; both apply to core-chat-surface too. SIZE it per the reflow-free-surface standard (skills/cometchat-react-v7-core/references/layout.md): the same four sizing invariants as core-chat-surface (prepared-ancestor-chain, pinned-viewport-height, column-min-height-0, no-load-transition-reflow) apply to the three-column app — the 3-column CSS in cometchat-react-v7-placement satisfies them; the surface must be full-size from frame 1 and not grow-into-place as content loads. Least-code = drop-ins for HOW. Do NOT turn on gated extensions/AI/plugins (that's a separate opt-in). Per-pane minimums are still fixed by the CometChatConversations/MessageList/MessageComposer/GroupMembers contracts below."
    },
    {
      "for": "CometChatConversations",
      "kind": "component",
      "min_capabilities": ["conversation-list", "last-message-preview", "unread-count", "delete-conversation", "search", "presence", "receipts", "infinite-scroll", "realtime-updates"],
      "docs_topic": "https://www.cometchat.com/docs/ui-kit/react/conversations",
      "notes": "Ships all of these by default; surface (don't hand-build). Toggles: hideUnreadCount / hideUserStatus / hideReceipts (FETCH exact props)."
    },
    {
      "for": "CometChatGroupMembers",
      "kind": "component",
      "min_capabilities": ["view-members", "kick-member", "ban-member", "view-banned-members", "change-scope", "search-members"],
      "docs_topic": "https://www.cometchat.com/docs/ui-kit/react/group-members",
      "notes": "Role-based: destructive actions surface for admin/owner. add-member + banned-members are related flows (ui events member-added / member-banned). A group DETAILS screen must include all of these."
    },
    {
      "for": "CometChatMessageList",
      "kind": "component",
      "min_capabilities": ["render-messages", "message-bubbles-by-type", "delivery-read-receipts", "reactions-when-enabled", "thread-open", "realtime-updates"],
      "docs_topic": "https://www.cometchat.com/docs/ui-kit/react/message-list",
      "notes": "Reactions/threads render when the feature is enabled (features.json). VERIFY exact prop toggles from docs."
    },
    {
      "for": "CometChatMessageComposer",
      "kind": "component",
      "min_capabilities": ["send-text", "attach-media-file", "emoji", "voice-recording"],
      "docs_topic": "https://www.cometchat.com/docs/ui-kit/react/message-composer",
      "notes": "voice-recording built in (hideVoiceRecordingButton default false). AI copilot actions auto-appear here when enabled. VERIFY exact prop names."
    },
    {
      "for": "voice-video-calls",
      "kind": "feature",
      "min_capabilities": ["initiate-call", "incoming-call-ui", "outgoing-call-ui", "call-logs"],
      "docs_topic": "https://www.cometchat.com/docs/ui-kit/react/call-features",
      "notes": "Maps to CometChatCallButtons + CometChatIncomingCall + CometChatOutgoingCall + CometChatCallLogs. Needs @cometchat/calls-sdk-javascript@5 (see features.json)."
    },
    {
      "for": "sdk-chat-surface",
      "kind": "feature",
      "consumption": "sdk",
      "min_capabilities": ["init-before-anything", "init-then-login-ordering", "prod-auth-token-guidance", "send-message", "receive-via-listener", "listener-register-with-id", "listener-remove-on-teardown", "sdk-error-handling", "pagination-via-request-builder", "production-ready-design-system", "sized-shell-no-overflow", "conversations-users-groups-lists", "list-search", "delete-conversation", "message-actions-working", "thread-panel", "user-group-detail-with-actions", "optimistic-ui-mutations", "loading-empty-error-states"],
      "docs_topic": "https://www.cometchat.com/docs/sdk/javascript/overview",
      "notes": "HEADLESS (build-your-own-UI) FLOOR for a Chat SDK skill — the SDK analogue of core-chat-surface, gating any SDK-type skill (there is no SDK skill in THIS react-v7 UI-Kit pack yet; this entry is the production-ready minimum an SDK skill inherits from the factory template, matched to the JS SDK catalog sdk-jsv4 landed in AUDIT-021). Capabilities are SDK behaviours the emitted code MUST include, mapped to the JS SDK (FETCH exact signatures from docs — bake the map, fetch the manual): init-before-anything = init resolves BEFORE any other SDK call — use CometChat.initFromSettings(settings) (persists integrationSource='ai-agent' for telemetry attribution, AUDIT-084), NOT the classic CometChat.init(appId, appSettings). init-then-login-ordering = CometChat.login(uid, authToken|authKey) runs AFTER init and BEFORE send/fetch/listeners. prod-auth-token-guidance = loginWithAuthToken / server-side token exchange; Auth Key dev-only. send-message = build a CometChat.TextMessage and CometChat.sendMessage(...), awaited. receive-via-listener = a registered listener DELIVERS incoming messages (onTextMessageReceived/onMediaMessageReceived), not polling. listener-register-with-id = CometChat.addMessageListener(UNIQUE_ID, new CometChat.MessageListener({...})). listener-remove-on-teardown = CometChat.removeMessageListener(UNIQUE_ID) on teardown — register AND remove; a leaked listener FAILS this contract. sdk-error-handling = every awaited SDK call handles the CometChatException path. pagination-via-request-builder = new CometChat.MessagesRequestBuilder().setLimit(n).build() + fetchNext(), not one unbounded call. Least-code = use the SDK's own builders/listeners (HOW), never drop the teardown or error path (WHAT). BECAUSE THE SDK HAS NO UI, the emitted app must ALSO be production-ready UI, deterministically (spec: the SDK skill's references/app-surface.md; AUDIT-024): production-ready-design-system = REUSE the app's existing design system (Tailwind/MUI/Chakra/shadcn/CSS-var theme/tokens) or, if fresh, ESTABLISH a small token-based one (theme.css palette/spacing/radii + reusable primitives) — NEVER ad-hoc inline styles / one-off hex. sized-shell-no-overflow = 100dvh 3-region shell, message list scrolls internally, min-width:0 (no page horizontal scrollbar), scaffold boilerplate reset. conversations-users-groups-lists + list-search = all three lists, EACH searchable (setSearchKeyword + client filter). delete-conversation = deleteConversation action per row. message-actions-working = Reply-in-thread/React/Edit/Delete each wired to the SDK AND reflected in the UI (own-message gating for edit/delete). thread-panel = setParentMessageId thread view + composer. user-group-detail-with-actions = user detail (block/unblock) + group detail (add/kick/ban member, change scope, leave), scope-gated. optimistic-ui-mutations = send/edit/delete/react update the UI IMMEDIATELY (temp/sending state) then reconcile with the SDK Promise (confirm on resolve, roll back + surface CometChatException.message on reject) — never wait for the round-trip. loading-empty-error-states = skeleton/empty/error on every surface, never blank or [object Object]. This is the full default for a GENERIC 'build chat with the SDK' prompt; a UI that renders only bare bubbles UNDER-DELIVERS. All symbols named here (User/Group/TextMessage/MessagesRequestBuilder/UsersRequestBuilder/MessageListener/init/login/sendMessage/addMessageListener/removeMessageListener) are in the JS-SDK namespace API surface the AUDIT-021 --members extractor recovers (5→396); regenerate the sdk-jsv4 catalog with build-catalog.mjs --exports-only --members before authoring the SDK skill this contract gates."
    },
    {
      "for": "onboarding-plan",
      "kind": "plan",
      "consumption": "plan",
      "min_capabilities": ["discovery-summary", "intent-capability-map", "numbered-actions", "files-that-change", "packages", "credential-auth-strategy", "modify-or-approve-gate"],
      "docs_topic": "https://www.cometchat.com/docs/ui-kit/react/overview",
      "notes": "JOURNEY FLOOR for the framework-agnostic onboarding front door (cometchat-onboarding, type `onboarding`) — the DISCOVER->UNDERSTAND->PLAN skill the entry router gates on FIRST (peers.yaml gate:). It emits NO CometChat symbols, so it has NO symbol catalog and no per-component contract; its completeness oracle is THIS plan-level contract (kind:plan, consumption:plan) — the analogue of core-chat-surface for a plan instead of a UI. min_capabilities are the SECTIONS the plan artifact MUST contain (skills/cometchat-onboarding/references/plan-artifact.md): discovery-summary = every beat-1 signal, each a value or explicit null (framework/bundler/language/pkg-mgr/auth/styling/state/routing/ssr/existing-cometchat/version_conflict/env). intent-capability-map = the confirmed archetype+modality+scope translated to CometChat capabilities (from the baked archetype map in references/archetypes.md). numbered-actions = the scoped build steps in order. files-that-change = the concrete additive paths (APPEND, never replace). packages = exact package(s) with major pins (the core owns exact coordinates). credential-auth-strategy = dev Auth-Key vs prod server-minted token, CHOSEN from discovery. modify-or-approve-gate = an explicit edit-or-approve invitation; nothing is written before approval. TWO behavioural must-dos accompany the sections (CHECKLIST row 25): every beat-2 intent question carries a repo-inferred recommended default (no blank asks); and the boundary is at PLAN (onboarding does discover+understand+plan, then hands a SCOPED build directive to the framework core, e.g. cometchat-react-v7-core — it must NOT fork the core's detect/credential flow). Least-code is n/a (no emitted code). Platform-agnostic: every family reuses the ONE onboarding skill, so this contract is inherited from templates/contracts.example.json. A non-React framework with no core yet still gets the full plan + an honest 'core not built yet' posture; do NOT hand off to a nonexistent core."
    }
  ]
}