cometchat-react-v7-placement

Ground truth: @cometchat/chat-uikit-react@7. Uses only components defined in cometchat-react-v7-core/-components (from live v7 docs). Status: catalog-verified vs installed 7.1.0 (exports-only web-v7.json). Fetch layout-specific props from the component's .md twin (../cometchat-react-v7-core/references/docs-map.md).

Companion skills (read first)

• cometchat-react-v7-core — install, init→login→render, provider. This skill ASSUMES it.
• cometchat-react-v7-components — the component catalog this composes.

Use this skill when

Deciding/​wiring WHERE chat lives — and either (a) growing the core surface into the whole combined chat app (selector tabs ↔ messages ↔ details/thread/search side panel + incoming call) when the user asks for the full app, or (b) a scoped-down sidebar/split, popup/floating widget, or embedded panel. Triggers: "build a full chat app", "add users/groups/calls tabs and a side panel", "add chat as a sidebar", "full screen chat page", "chat popup widget", "embed chat in my dashboard". Note: a plain unscoped "add chat" defaults to the production-ready CORE surface (list ↔ message pane) in cometchat-react-v7-core — grow to the combined app below only on request.

Prerequisites & install

Covered by core. No new package.

Placement patterns (BAKED) — each composes core components

• Core surface (THE DEFAULT for an unscoped "add chat") — production-ready, but lean. Inside CometChatErrorBoundary → ONE CometChatProvider, a two-column layout: a CometChatConversations LIST ↔ a MESSAGE pane (CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer), sized per ../cometchat-react-v7-core/references/layout.md, with the thread-replies panel and the in-chat scoped message search wired by DEFAULT (opt-out only) and the global conversation search bar wired-or-hidden, collapsing to one pane on mobile. One small host state object coordinates {selected conversation, which side view (thread | in-chat-search | none)}. Complete and wired — NOT a bare demo — but NOT the whole app. See the "Core-surface recipe" below.
• Grow to the full combined app (on request) — the whole app the official sample ships. When the user asks for the full app, grow the core surface into a three-column layout, all under CometChatErrorBoundary → ONE CometChatProvider: a SELECTOR column (the list for the active tab — CometChatConversations / CometChatUsers / CometChatGroups / CometChatCallLogs — + a tab bar), a MESSAGE pane, and a mutually-exclusive SIDE panel (user/group details, a thread CometChatThreadHeader + list/composer, or a scoped CometChatSearch), plus CometChatIncomingCall mounted at root. One host state object coordinates {active tab, selected user/group, thread parent, which side panel}. It is the UNION of the core surface + these growths — see the "Combined-app recipe (grow target)" below. Least-code = reach for these drop-ins (HOW).
• Sidebar / split: conversations list in a fixed side panel; the message pane fills the rest. Selection state links list → message pane. (Scoped-down variant.)
• Popup / floating widget: a toggle button mounts the chat panel in an overlay; keep CometChatProvider mounted at app root so init/login persist across open/close. (Scoped-down variant.)
• Embedded panel: drop the message components into an existing page region; reuse the host layout/containers. (Scoped-down variant.)