> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-v7-feature-guides.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # REACT V7 UIKIT DASHBOARD STITCHING AUDIT # React v7 UI Kit — Dashboard-Enablement & Stitching Audit **Scope:** `ui-kit/react` (v7 only — the default version). Audits every feature/component whose doc describes something that (a) must be **enabled in the CometChat Dashboard**, or (b) requires **manual "stitching"** (developer wiring: event handlers, connecting components, required props, navigation callbacks, SDK setup). For each, it records whether the page already links to a feature guide / "how it works" reference, and **what link/reference should be added and where**. **Legend — Type** * `Dashboard` — a Dashboard extension / AI feature / add-on / setting must be turned on for this to work. * `Stitch` — developer code required (handlers, required entity props, connecting components, SDK calls). * `Both` — needs Dashboard enablement **and** wiring. **Reference status** * `Yes` = links to the right guide · `Partial` = inline example or component card only, no guide link · `No` = points to nothing. *** ## Part 1 — Dashboard-enablement required These render/behave only when a Dashboard extension, AI feature, add-on, or app setting is enabled. Most auto-integrate in code, so the docs should say *"enable X in the Dashboard"* and link the feature guide. | # | Page | Feature | Type | What must be enabled | Ref | Recommended link to add | | -- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | 1 | `components/message-composer` | Attachment options: **Polls, Collaborative Document, Collaborative Whiteboard, Stickers** (`hideAttachmentOptions`, `hideStickersButton`) | Dashboard | Each extension enabled in Dashboard; composer auto-integrates | No | Link Attachments / `hideAttachmentOptions` / `hideStickersButton` → `/ui-kit/react/extensions` (+ specific extension guides) | | 2 | `components/message-list` | **Translate** message option (`hideTranslateMessageOption`) | Dashboard | Message Translation extension | No | Link Translate option → `/ui-kit/react/extensions` / `/fundamentals/message-translation` | | 3 | `components/message-list` | **Flag / Report & Moderation view** (`hideFlagMessageOption`, `hideModerationView`, `hideFlagRemarkField`) | Dashboard | Moderation rules / Report Message configured in Dashboard | No | Link moderation props → `/moderation/overview` | | 4 | `components/message-composer` | Attachment **count/size/type limits** (`file.count.max`, `file.size.max`, RBAC/SBAC file-type perms) | Dashboard | App settings & role-based file-type permissions in Dashboard | No | Link "Attachment limits / Why a file is rejected" → app-settings / RBAC-SBAC dashboard doc | | 5 | `components/poll-bubble` | **Poll Bubble** (renders `extension_poll`) | Both | Polls extension (composer sends polls; `onVoteSubmit`/`onVoteError` wiring) | Partial → `plugins/overview` | Add `/fundamentals/polls` + note "Polls extension must be enabled in Dashboard" | | 6 | `components/sticker-bubble` | **Sticker Bubble** (renders `extension_sticker`) | Dashboard | Stickers extension + sticker sets configured | Partial → `plugins/overview` | Add `/fundamentals/stickers` + Dashboard-enable note | | 7 | `components/collaborative-document-bubble` | **Collaborative Document Bubble** (`@injected.extensions.document.document_url`) | Both | Collaborative Document extension; optional `onButtonClick` | Partial → `plugins/overview` | Add `/fundamentals/collaborative-document` + Dashboard-enable note | | 8 | `components/collaborative-whiteboard-bubble` | **Collaborative Whiteboard Bubble** (`@injected.extensions.whiteboard.board_url`) | Both | Collaborative Whiteboard extension; optional `onButtonClick` | Partial → `plugins/overview` | Add `/fundamentals/collaborative-whiteboard` + Dashboard-enable note | | 9 | `components/video-bubble` | **Auto poster thumbnails** (`thumbnail-generation` extension) | Dashboard | Thumbnail Generation extension (falls back to first frame) | No (named, not linked) | Link `thumbnail-generation` → `/fundamentals/thumbnail-generation` | | 10 | `components/flag-message-dialog` | **Report reasons** via `CometChat.getFlagReasons()` | Both | Report Message / Moderation config (custom reasons) in Dashboard; parent implements `onSubmit` | No | Add `/moderation/overview` near "Reason Fetching" (no Next Steps section exists) | | 11 | `components/message-header` | **Conversation Summary** button (`showConversationSummaryButton`, `enableAutoSummaryGeneration`, `onSummaryClick`) | Both | Conversation Summary AI feature; also requires wiring (see Part 2 #15) | No | Link summary props → `/ui-kit/react/ai-features` + `/fundamentals/ai-user-copilot/overview` | | 12 | `components/message-list` | **Smart Replies** (`showSmartReplies`, defaults `false`) | Both | Smart Replies AI feature | No | Link → `/ui-kit/react/ai-features` | | 13 | `components/message-list` | **Conversation Starters** (`showConversationStarters`, defaults `false`) | Both | Conversation Starter AI feature | No | Link → `/ui-kit/react/ai-features` | | 14 | `components/message-composer` | **AI button** (`hideAIButton` defaults `true`) | Both | AI features enabled; dev must opt in | No | Link `hideAIButton`/`AIButton` → `/ui-kit/react/ai-features` | | 15 | `components/ai-assistant-chat` | **AI Assistant Chat** (`user` prop = AI agent entity) | Both | **AI Agent configured in Dashboard** as a `CometChat.User`; metadata (`suggestedMessages`, `greetingMessage`, `introductoryMessage`), tool config | No | Add prerequisites callout → AI Agents setup guide (`/ai-agents`) — **biggest unreferenced dashboard dependency** | | 16 | `components/notification-feed` | **Notification Feed** (Campaigns/Notifications) | Both | Campaigns/Notifications configured in Dashboard (channels, categories, templates) | Partial (bottom only) | Promote `/ui-kit/react/campaigns` into an **upfront** prerequisites callout (stated prereqs only mention init+login) | | 17 | `components/call-buttons` · `incoming-call` · `outgoing-call` · `call-logs` | **Calling components** | Both | Calling add-on enabled on plan + Calls SDK installed + `.setCallingEnabled(true)` | No / Partial | Add prerequisites callout on each → `/ui-kit/react/calling-integration` + `/ui-kit/react/call-features` | | 18 | `components/message-header` | **Voice/Video call buttons** + `callSettingsBuilder` | Both | Calling enabled; call components mounted; Calls SDK | No | Add `/ui-kit/react/calling-integration` (Step 4 is literally "Add Call Buttons via CometChatMessageHeader") + `/ui-kit/react/call-features` | | 19 | `components/message-list` | **Agent chat** (`loadLastAgentConversation`, `isAgentChat`) | Both | AI Agent configured | No | Link → `/ui-kit/react/components/ai-assistant-chat` / AI features | | 20 | `core-features` | **Read Receipts** | Dashboard | Read-receipts setting (also `config={{ hideReceipts }}`) | No | Note dashboard dependency + link `/ui-kit/react/cometchat-provider#with-global-config` | | 21 | `core-features` | **User Presence** | Both | Presence setting + `subscribePresenceForAllUsers()`; `config={{ hideUserStatus }}` | No | Link → `/ui-kit/react/cometchat-provider` | | 22 | `core-features` | **Moderation** | Both | Moderation rules in Dashboard | **Yes** → `/moderation/overview` | Adequate (model for others) | | 23 | `core-features` | **Report Message** | Both | Flagged messages reviewed in Dashboard | **Yes** → `/moderation/flagged-messages` | Adequate | | 24 | `campaigns` | **Campaigns / Notification Feed** | Both | Channels, categories, templates, campaigns in Dashboard | **Yes** → `/campaigns#setup-flow` | Adequate (model for #16) | | 25 | `campaigns` | **Push notification tracking** (`markPushNotificationDelivered/Clicked`) | Both | Push Notifications extension (FCM/Web Push) configured | Partial → `/sdk/javascript/campaigns` | Add Push Notifications dashboard-setup guide link | | 26 | `plugins/overview` | **Extension-backed plugins** (Polls, Stickers, Collab Doc, Collab Whiteboard) | Dashboard | Respective extensions enabled in Dashboard | **No — misleading** ("included automatically — no configuration needed") | Add note + links to each extension guide; this table row is the root of #5–#8 | | 27 | `plugins/overview` · `event-system` | **AI plugin / `ui:panel/show`,`ui:panel/hide`** (agentic messages) | Both | AI Agents / AI features configured | Partial / No | Link "AI features" → `/ui-kit/react/ai-features` / AI dashboard setup | | 28 | `cometchat-provider` | **Init & Login** (App ID / Region / Auth Key) | Both | Credentials from Dashboard; `setCallingEnabled`, `subscribePresenceForAllUsers` | Partial | Link to credentials/app-setup guide (`/ui-kit/react/integration-react`) | *** ## Part 2 — Stitching (developer wiring) required These do nothing (or nothing useful) until the developer writes connecting code. The docs mostly show inline examples but rarely link to the how-to guide that walks the pattern end-to-end. | # | Page | What needs wiring | Type | Ref | Recommended link/reference to add | | -- | ------------------------------ | ------------------------------------------------------------------------------------------------- | ------ | ----------------------------------------------- | ----------------------------------------------------------------------------------------------- | | 29 | `components/conversations` | `onItemClick` → derive user/group and mount Header/List/Composer (two-panel) | Stitch | Partial | → `/ui-kit/react/guide-new-chat-creation` near "Full Layout Example" & Next Steps | | 30 | `components/conversations` | `onSearchBarClicked` → open custom search (`CometChatSearch`) | Stitch | Partial | → `/ui-kit/react/guide-search-messages` | | 31 | `components/conversations` | `options` menu (Delete/Mute/Pin/Block/Mark-Unread) — `onClick` are placeholders | Stitch | No | Block → `/ui-kit/react/guide-block-unblock-user`; SDK methods for others | | 32 | `components/conversations` | `ui:message/sent`, `ui:group/*`, `ui:conversation/*` received events | Stitch | No | "Events Received" → `/ui-kit/react/event-system` | | 33 | `components/users` | `onItemClick` → start conversation / user picker | Stitch | Partial | → `/ui-kit/react/guide-new-chat-creation` | | 34 | `components/users` | `options` (Block User / View Profile) placeholders | Stitch | No | Block → `/ui-kit/react/guide-block-unblock-user` | | 35 | `components/users` | `ui:user/blocked` / `ui:user/unblocked` received | Stitch | No | → `/ui-kit/react/event-system` + block/unblock guide | | 36 | `components/groups` | `onItemClick` → open group chat | Stitch | Partial | → `/ui-kit/react/guide-new-chat-creation` + `/ui-kit/react/guide-group-chat-setup` | | 37 | `components/groups` | `options` (Leave Group / Group Info) + join/details flows | Stitch | Partial | → `/ui-kit/react/guide-group-chat-setup` | | 38 | `components/groups` | `ui:group/*` received events | Stitch | No | → `/ui-kit/react/event-system` | | 39 | `components/group-members` | Required `group` prop (renders nothing without it) | Stitch | Partial | → `/ui-kit/react/guide-group-chat-setup` | | 40 | `components/group-members` | `onBack` navigation (placeholder) | Stitch | No | Reference navigation/layout how-to | | 41 | `components/group-members` | Custom `options` (**Message Privately** / Remove), kick/ban/scope overrides | Stitch | No | Message Privately → `/ui-kit/react/guide-message-privately` | | 42 | `components/group-members` | `ui:group/member-*` / `ownership-changed` received | Stitch | No | → `/ui-kit/react/event-system` | | 43 | `components/message-header` | `onItemClick` (details panel), `onSearchOptionClicked` (search), `onBack` | Stitch | No | Search → `/ui-kit/react/guide-search-messages`; details → layout how-to | | 44 | `components/message-list` | Required `user`/`group` entity | Stitch | Partial | → `/ui-kit/react/guide-new-chat-creation` | | 45 | `components/message-list` | **Thread replies** (`onThreadRepliesClick`, `parentMessageId`) → mount 2nd list/composer | Stitch | Partial (→ Thread Header component) | → `/ui-kit/react/guide-threaded-messages` | | 46 | `components/message-list` | `onEditMessage`/`onReplyMessage` → composer via `ui:compose/edit`,`ui:compose/reply` | Stitch | No | Edit/Reply Note → `/ui-kit/react/event-system` | | 47 | `components/message-list` | `goToMessageId` (jump from search / deep link) | Stitch | No | → `/ui-kit/react/guide-search-messages` | | 48 | `components/message-composer` | Required `user`/`group` entity | Stitch | Partial | → `/ui-kit/react/guide-new-chat-creation` | | 49 | `components/message-composer` | Edit/Reply mode (`messageToEdit`, `messageToReply`, `ui:compose/*` received) | Stitch | No | Events Received → `/ui-kit/react/event-system` | | 50 | `components/message-composer` | Custom `attachmentOptions` `onClick`, `sendTextMessageOverride`, custom buttons | Stitch | No | → `/ui-kit/react/plugins/overview`; optimistic-send → event-system | | 51 | `components/reactions` | Display-only; parent owns add/remove SDK calls, `onReactionClick`, `reactionsRequestBuilder` | Stitch | No | Cross-link Message List (owns SDK calls); avoid legacy `/fundamentals/reactions` | | 52 | `components/reaction-list` | Parent calls `CometChat.removeReaction`, manages open state, `onItemClick`/`onEmpty` | Stitch | Partial (no Next Steps) | Add cross-links to Reactions + Message List | | 53 | `components/card-bubble` | `onCardAction` / `ui:card/action` — app owns all action behavior | Stitch | **Yes** (Plugins, Event System) | Adequate; optionally note card source (Bubble Builder / bot) | | 54 | `components/call-bubble` | `onJoinClick` → start/join call session (empty handler) | Stitch | Partial | Link `onJoinClick` → calling integration / "start a call" | | 55 | `components/call-buttons` | `callSettingsBuilder` via `CometChatUIKitCalls.CallSettingsBuilder()` | Stitch | No | → calling integration / SDK call-settings reference | | 56 | `components/outgoing-call` | Required `call` prop; parent manages state (`onOutgoingCallAccepted/Rejected` listeners) | Stitch | Partial | Link "SDK Listeners" note → `/ui-kit/react/calling-integration` | | 57 | `components/call-logs` | `onCallButtonClicked` re-initiation; `.setAuthToken()` for custom `callLogRequestBuilder` | Stitch | Partial (→ `/sdk/javascript/call-logs`) | Wire re-initiation → call-buttons / calling-integration | | 58 | `components/search` | Result callbacks → navigation (`onConversationClicked`, `onMessageClicked` → `goToMessageId`) | Stitch | Partial | Note callbacks are required; → Message List / Conversations (+ optionally search guide) | | 59 | `components/notification-feed` | `onItemClick` / `onActionClick` navigation (deep links, `chatWithUser`/`chatWithGroup`/`openUrl`) | Stitch | Partial | Reference navigation how-to | | 60 | `core-features` | **Mentions** rendering via `CometChatMentionsFormatter` | Stitch | No | → `/ui-kit/react/plugins/text-formatters#cometchatmentionsformatter` | | 61 | `core-features` | **Rich Text Formatting** (`enableRichTextEditor` + `CometChatMarkdownFormatter`) | Stitch | Partial | → `/ui-kit/react/plugins/text-formatters` + message-composer | | 62 | `core-features` | **Threaded Conversations** (wiring required) | Stitch | Partial (mislabeled "Threaded Message Preview") | Clarify wiring; link text → `/ui-kit/react/guide-threaded-messages` | | 63 | `core-features` | **Conversation & Advanced Search** | Stitch | No | Add → `/ui-kit/react/guide-search-messages` | | 64 | `campaigns` | Card action handling (`onAction`, 9 action types) | Stitch | Partial | Cross-link `event-system` `ui:card/action` | | 65 | `plugins/overview` | Custom plugin registration (`CometChatMessagePlugin` via `plugins` prop) | Stitch | Yes | Adequate | | 66 | `plugins/custom-plugin` | Location plugin walkthrough; `context.publish`; Google Maps API key (external) | Stitch | Partial | `publish` → `/ui-kit/react/event-system`; note Maps API key | | 67 | `plugins/text-formatters` | Custom formatter must be wrapped in a text plugin + registered via provider | Stitch | Partial | → `/ui-kit/react/plugins/overview` + `/ui-kit/react/cometchat-provider#with-additional-plugins` | | 68 | `event-system` | Guides depend on events but tables don't link back | Stitch | Partial | See Part 3 §D (bidirectional links) | | 69 | `guide-block-unblock-user` | Uses `usePublishEvent`/`useCometChatEvents` + `ui:user/blocked`,`ui:user/unblocked` | Stitch | Partial | Add → `/ui-kit/react/event-system` | | 70 | `guide-message-privately` | Hinges on `ui:open-chat` event (published by Message List "Message Privately") | Stitch | Partial | Add → `/ui-kit/react/event-system#navigation` | *** ## Part 3 — Systemic / high-priority patterns ### A. `plugins/overview` says "no configuration needed" — misleading for extension-backed content All four extension bubbles (Poll, Sticker, Collaborative Document, Collaborative Whiteboard) route their "how it works" reference through `plugins/overview#built-in-plugins`, which states plugins are *"included automatically — no configuration needed."* That's true for the UI Kit **renderer** but false for the **Dashboard extension** that produces the message. **Fix once at the source** (add a "Requires the X extension enabled in the Dashboard" note + link on the `extension_*` rows), then add the same note on each bubble page (#5–#8, #26). ### B. Calling pages have no upfront prerequisites `call-buttons`, `incoming-call`, `outgoing-call`, `call-logs` never mention the Calls SDK install or `.setCallingEnabled(true)` on their own page, and don't link to `calling-integration`/`call-features`. A reader can copy the minimal render and see **nothing render**. Also: `call-features.mdx` (the overview) omits a link to `calling-integration.mdx` (the actual step-by-step setup), and `calling-integration.mdx` doesn't link out to the standalone `call-buttons`/`incoming-call`/`outgoing-call` component pages. (#17, #18, #54–#57) ### C. AI ("Smart Chat") features are never linked from component pages `ai-features.mdx` exists but is not linked from `message-header` (Summary), `message-list` (Smart Replies, Conversation Starters), or `message-composer` (AI button). `ai-assistant-chat` has **no** link to any AI-Agent Dashboard-setup guide despite requiring a Dashboard-configured agent user. (#11–#15, #19, #27) ### D. Event-system ↔ guide links are missing in both directions `event-system.mdx` lists events that power the guides but links to none of them; the guides use the events but don't link back: * `ui:user/blocked` / `ui:user/unblocked` ↔ `guide-block-unblock-user` * `ui:open-chat` ↔ `guide-message-privately` * `ui:thread/opened` / `ui:thread/closed` ↔ `guide-threaded-messages` * `ui:group/created` ↔ `guide-group-chat-setup` Also, no component page ("Events Received/Emitted" tables) links to `event-system.mdx` at all. (#32, #35, #38, #42, #46, #49, #68–#70) ### E. Content-integrity contradiction (flag for docs owner) Plugin registration order conflicts across pages: * `plugins/text-formatters.mdx` (line \~142): custom plugins are **"prepended before the defaults… your custom text plugin takes precedence."** * `plugins/overview.mdx` (\~line 76) and `plugins/custom-plugin.mdx` (\~line 124): custom plugins are **"appended after the defaults, so default plugins keep priority."** These directly disagree on ordering. Not a dashboard/stitch gap, but it will confuse anyone wiring a custom formatter — reconcile before adding more cross-links. *** ## Part 4 — Guide pages available to link to (inventory) | Guide page | Walks through | Primary components | | -------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------- | | `guide-new-chat-creation` | Start 1:1/group chats: `onItemClick`, tab state, conditional `joinGroup()`, first-message send | Users, Groups, Conversations | | `guide-group-chat-setup` | Create/join/add-members: `createGroup()`, `joinGroup()`, `addMembersToGroup()` | Groups, Group Members, Message Header | | `guide-threaded-messages` | Thread panel: `onThreadRepliesClick`, `parentMessageId`, `CometChatThreadHeader` | Message List, Thread Header | | `guide-search-messages` | In-conversation search: `CometChatSearch` → `goToMessageId` | Search, Message List, Message Header | | `guide-block-unblock-user` | Block/unblock via SDK + `ui:user/blocked`/`unblocked` events | Message Composer, Conversations | | `guide-message-privately` | Private DM from group via `ui:open-chat` event | Message Composer, Users, Conversations | | `extensions` | All Dashboard extensions + which component each auto-integrates into | Composer, Message List | | `ai-features` (Smart Chat) | Conversation Starter, Smart Replies, Conversation Summary | Message List, Composer, AI Assistant Chat | | `calling-integration` | End-to-end calling setup (SDK install, `setCallingEnabled`, incoming placement) | Message Header, Call components | | `call-features` | Calling overview | Call components | | `campaigns` | Campaigns/notifications end-to-end | Notification Feed | | `event-system` | Pub/sub, `useCometChatEvents`, `usePublishEvent`, all `ui:*` events | All | *** ## Summary * **Files audited:** \~50 (all React v7 UI Kit `.mdx`). * **Total findings:** \~70 (28 dashboard-enablement, \~42 stitching; overlaps counted once by primary type). * **Dashboard-enable (pure):** message-list Translate & Flag/Moderation, composer Polls/Collab/Stickers & file limits, sticker bubble, video thumbnails, core-features read-receipts, plugins/overview extension plugins. * **Both (dashboard + stitch):** all calling components & header call buttons, all AI features (Summary, Smart Replies, Starters, AI button, AI Assistant Chat, agent chat), poll/collab-doc/collab-whiteboard bubbles, flag dialog, campaigns/notification-feed, presence, provider init. * **Missing a reference entirely (`No`) or only `Partial`:** the large majority — the six how-to guides, `extensions.mdx`, `ai-features.mdx`, `calling-integration.mdx`/`call-features.mdx`, and `event-system.mdx` all exist but are **rarely linked from the component pages they explain**. **Top 6 fixes (highest impact):** 1. `plugins/overview` — correct the "no configuration needed" line for Polls/Stickers/Collab Doc/Collab Whiteboard; link each extension guide (fixes 5 pages at the source). 2. `ai-assistant-chat` — add AI-Agent Dashboard-setup prerequisites callout (completely unreferenced dashboard dependency). 3. Calling components (`call-buttons`, `incoming-call`, `outgoing-call`, `call-logs`) — add upfront prerequisites callout → `calling-integration` + `call-features`. 4. `message-header` / `message-list` / `message-composer` — link AI props → `ai-features`, extension attachments/translate → `extensions`. 5. `call-features` → link `calling-integration`; `calling-integration` → link the standalone call component pages. 6. Add bidirectional `event-system` ↔ guide links (block/unblock, message-privately, threads, group-created) and link component "Events Received" tables → `event-system`.