Cometchat React V7 Features

Ground truth: the feature existence oracle is features.json (pack root). A feature a user asks for MUST be an id there — if it's not listed, it does not exist; do not invent it. Exact enablement steps + current dashboard nav + config keys: FETCH from the feature's docs_topic (docs flag dashboard paths as fragile). UI component names come from the web-v7 catalog. Status: oracle curated from live docs 2026-07-29; entries marked VERIFY need confirming before shipping enablement steps.

Companion skills (read first)

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

Use this skill when

The user wants to turn ON a specific capability: "add reactions", "enable polls", "turn on smart replies", "add push notifications", "enable message translation", "add calling", "add moderation".

Prerequisites & install

Core setup done (credentials + init/login). Most features add no package; voice-video-calls needs the separate calls package.

Enable a feature (BODY — the oracle-driven flow)

1. Look it up in features.json. Match the request to a feature id. Not listed → tell the user it isn't an available feature (don't invent one).
2. Branch on category + enablement:
   • default / auto → the SDK-side capability is on, but check needs_stitching first. If needs_stitching: true, the drop-in renders a default-ON affordance that is INERT/partial until the host wires it — you MUST either stitch it (callback + companion panel/component) or hide it; never leave it dead-ending (see the "Default-on affordances" pitfall). Otherwise nothing to enable — point at the ui_components if they want to surface/customize it.
   • extension + dashboard-extension → enable the extension, then wire the client. Two ways to enable: (a) via the CLI — npx @cometchat/skills-cli@3 features enable <id> flips the dashboard toggle via the API (reads the App ID from .cometchat/config.json; features list shows current state); OR (b) manually in the CometChat Dashboard → Extensions. Offer the CLI (faster), fall back to the dashboard. The CLI only flips the toggle — YOU still wire the client component/prop. FETCH the current dashboard steps from docs_topic — do not bake the path.
   • ai → enable via dashboard-toggle (AI User Copilot) AND wire the code prop — NOT zero-code (AUDIT-009). The toggle can be flipped by the CLI too — @cometchat/skills-cli@3 features enable <id> (an AI feature may first need an OpenAI key set on the app; the CLI reports that). Then wire the props: The copilot props DEFAULT TO OFF, so nothing appears until you set them: smart-reply → showSmartReplies on CometChatMessageList (default false; renders in the list FOOTER, not the composer); conversation-starter → showConversationStarters on CometChatMessageList (default false); conversation-summary → showConversationSummaryButton + onSummaryClick on CometChatMessageHeader (default false). These are needs_stitching:true. Only ai-assistant renders a distinct component (CometChatAIAssistantChat). Plan-gating is often 'unknown' — verify, don't assert.
   • package-install (calls) → install the separate calls package (FETCH the exact coordinate/version from docs_topic), then wire the ui_components.
   • No UI Kit component (SDK-backed feature) → the capability exists in the SDK but the UI Kit ships NO component for it (AI agents, campaigns, advanced/AI moderation, bots, webhooks, transient messages). Wire it from the JavaScript Chat SDK directly — look the exact method up in cometchat-react-v7-core/references/docs-map.md → SDK docs (the llms.txt index → the feature's page → its AI-Integration-Quick-Reference accordion for the method signatures; e.g. AI agents → CometChat.addAIAssistantListener(...)). This is the UI-Kit-first / SDK-fallback rule (RULES.md) — don't skip the feature and don't hand-roll what the SDK already exposes.
   • dashboard-only (moderation) → configured ENTIRELY in the dashboard; emit ZERO moderation UI code (AUDIT-078). Its ui_components (CometChatModerationView / CometChatFlagMessageDialog) are AUTO-RENDERED / INTERNAL, NOT host-wired: the kit auto-shows the moderation footer for blocked/pending messages (CometChatMessageList hideModerationView defaults false = shown), and the message list already ships a built-in "Report message" option that opens the flag dialog internally. So do NOT hand-roll a custom Report option (plugin getOptions) and do NOT mount CometChatFlagMessageDialog yourself — that duplicates the built-in. The only work is in the Dashboard: set up the Rules Engine (auto block/flag on send) + turn ON Report Message / Report User; the kit then surfaces everything with no code. (Rules Engine is not a classic extension → the CLI can't toggle it; give the user the dashboard steps.)
3. Wire the UI using only the feature's ui_components (they exist in the web-v7 catalog); fetch exact props from each component's .md twin (cometchat-react-v7-core/references/docs-map.md). If the feature is a whole TASK with an end-to-end guide (check the docs-map "Task guides (recipes)" section — e.g. group chat, search, threads, new-chat, message-privately, block/unblock), BUILD FROM the guide and COMPARE your implementation against it for completeness — then apply the hardening deltas on top (docs-maximal; docs-map). No matching guide? → wire the ui_components the normal way (above) + fetch props; the guide is an enhancement, not required.
4. Respect VERIFY notes — any entry noting VERIFY (or an ai/e2e-encryption/moderation entry) must be confirmed against live docs for plan-gating and exact slugs before you emit steps.

Advanced / extensibility recipes (curated — verified against installed 7.1.x types)

Custom message types → the message-plugin architecture

v7 replaces v6's CometChatMessageTemplate with plugins. A custom message type is an object implementing CometChatMessagePlugin (id, messageTypes, messageCategories, renderBubble), registered on the provider. The plugins prop is MERGED with defaultPlugins internally — pass ONLY your extras; use removePlugins to override a built-in type.

import { CometChatProvider } from "@cometchat/chat-uikit-react";
import type { CometChatMessagePlugin } from "@cometchat/chat-uikit-react";

const productCardPlugin: CometChatMessagePlugin = {
  id: "product-card",
  messageTypes: ["product_card"],      // your custom SDK message type
  messageCategories: ["custom"],
  renderBubble: (message) => <div className="product-card">{message.getSender().getName()}</div>,
};

<CometChatProvider plugins={[productCardPlugin]}>
  <div>{/* your chat UI */}</div>
</CometChatProvider>

CometChatProvider REQUIRES children. Optional plugin-interface hooks: getOptions, getLastMessagePreview, renderHeaderView/renderFooterView, getTextFormatters. This is provider-level config — there's no standalone screen to render.