cometchat · raj-dubey1 · Jul 30, 2026 · Jul 31, 2026
diff --git a/REACT_V7_UIKIT_DASHBOARD_STITCHING_AUDIT.md b/REACT_V7_UIKIT_DASHBOARD_STITCHING_AUDIT.md
@@ -51,6 +51,10 @@
 
 It does not execute actions, manage message state, or call any SDK methods. When users click interactive elements (buttons, links), the library emits the action to your callback. You decide what happens — open a URL, navigate to a chat, make an API call, etc.
 
+<Note>
+When wiring the `onAction` callback, handle each action type (`openUrl`, `chatWithUser`, `chatWithGroup`, `sendMessage`, and the rest) explicitly in your own code. For the recommended pattern of turning card actions into app behavior, see [Event System — Card Actions](/ui-kit/react/event-system#card-actions).
+</Note>
+
 ### Card Schema JSON Example
 
 ```json
@@ -88,12 +92,12 @@
            "light": "transparent",
            "dark": "transparent"
          },
          "textColor": {
            "light": "#6C5CE7",
            "dark": "#6C5CE7"
          },
          "size": 40,
          "fontSize": 13,
          "borderRadius": 6,
          "padding": {
            "top": 0,
@@ -111,14 +115,14 @@
      "id": "col_98fed9bd-1a95-4cee-aa81-84a9016e41f2"
    }
  ],
  "fallbackText": "",
  "style": {
    "background": {
      "light": "#E8E8E8",
      "dark": "#E8E8E8"
    },
    "borderRadius": 16,
    "borderColor": {
      "light": "#DFE6E9",
      "dark": "#DFE6E9"
    },
@@ -147,6 +151,10 @@
 
 ## Handling Push Notifications for Campaigns
 
+<Note>
+**Prerequisite: Push Notifications must be configured first.** The tracking calls below only apply once you have set up a push provider (**FCM** or **Web Push**) and are receiving campaign pushes. Start with [Web Push Notifications setup](/notifications/web-push-notifications), and see the [Push Notifications overview](/notifications/push-overview) for provider options and the delivery pipeline.
+</Note>
+
 When a campaign push notification arrives via Web Push or FCM, you should:
 
 1. **Report delivery** — Call `CometChat.markPushNotificationDelivered()` when the notification is received

@@ -4,95 +4,32 @@
 ---
 
 <Accordion title="AI Integration Quick Reference">
-```json
-{
-  "component": "CometChatAIAssistantChat",
-  "package": "@cometchat/chat-uikit-react",
-  "import": "import { CometChatAIAssistantChat } from \"@cometchat/chat-uikit-react\";",
-  "description": "AI agent chat interface with streaming responses, suggested messages, tool calling, and conversation history.",
-  "cssRootClass": ".cometchat-ai-assistant-chat",
-  "primaryOutput": {
-    "prop": "onSendButtonClick",
-    "type": "(message: CometChat.BaseMessage) => void"
-  },
-  "props": {
-    "data": {
-      "user": {
-        "type": "CometChat.User",
-        "default": "REQUIRED",
-        "note": "The AI assistant user entity"
-      },
-      "streamingSpeed": {
-        "type": "number",
-        "default": 30,
-        "note": "Milliseconds between text chunks during streaming"
-      },
-      "aiAssistantTools": {
-        "type": "CometChatAIAssistantTools",
-        "default": "undefined",
-        "note": "Tool handlers for AI function calls"
-      },
-      "loadLastAgentConversation": {
-        "type": "boolean",
-        "default": false
-      },
-      "suggestedMessages": {
-        "type": "string[]",
-        "default": "[] (falls back to user metadata)"
-      },
-      "parentMessageId": {
-        "type": "number",
-        "default": "undefined",
-        "note": "Load a specific conversation thread"
-      }
-    },
-    "callbacks": {
-      "onSendButtonClick": "(message: CometChat.BaseMessage) => void",
-      "onBackButtonClicked": "() => void",
-      "onCloseButtonClicked": "() => void",
-      "onError": "((error: CometChat.CometChatException) => void) | null"
-    },
-    "visibility": {
-      "hideSuggestedMessages": { "type": "boolean", "default": false },
-      "hideChatHistory": { "type": "boolean", "default": false },
-      "hideNewChat": { "type": "boolean", "default": false },
-      "showBackButton": { "type": "boolean", "default": false },
-      "showCloseButton": { "type": "boolean", "default": false }
-    },
-    "viewSlots": {
-      "emptyChatImageView": "ReactNode",
-      "emptyChatGreetingView": "ReactNode",
-      "emptyChatIntroMessageView": "ReactNode",
-      "emptyView": "ReactNode",
-      "loadingView": "ReactNode",
-      "errorView": "ReactNode",
-      "headerItemView": "ReactNode",
-      "headerTitleView": "ReactNode",
-      "headerSubtitleView": "ReactNode",
-      "headerLeadingView": "ReactNode",
-      "headerTrailingView": "ReactNode",
-      "headerAuxiliaryButtonView": "ReactNode"
-    }
-  },
-  "events": [
-    {
-      "name": "ui:compose/text",
-      "payload": "{ text }",
-      "description": "Suggestion pill clicked (sets text in composer)"
-    }
-  ],
-  "sdkListeners": [],
-  "types": {
-    "CometChatAIAssistantTools": "Class — maps tool function names to handler functions via constructor(actions: Record<string, (args: Record<string, unknown>) => void>)"
-  }
-}
-```
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatAIAssistantChat` |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";` |
+| CSS root class | `.cometchat-ai-assistant-chat` |
+| Primary output | `onSendButtonClick: (message: CometChat.BaseMessage) => void` — emits the sent user message |
+| Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user; plus an [AI Agent](/ai-agents/agent-builder/overview) configured in the Dashboard (passed as the `user` prop) |
+| Stitching | Pass the AI Agent's `user` entity; the component streams replies and handles tool calls internally |
+| Events emitted | `ui:compose/text` — sets text in the composer when a suggestion pill is clicked — see the [Event System](/ui-kit/react/event-system) |
+| SDK listeners (automatic) | None directly; internally uses the message list's SDK listeners for message updates, plus an AI assistant listener for streaming replies |
+| Full props | See [Props](#props) |
+
 </Accordion>
 
 ## Overview
 
 `CometChatAIAssistantChat` is an AI agent chat interface. It renders a full chat experience with streaming responses, suggested message pills, tool calling support, and a conversation history sidebar. Pass a `CometChat.User` representing the AI assistant and the component handles the rest — message threading, streaming display, and composer integration.
 
+<Warning>
+**Prerequisite: an AI Agent must be configured in the CometChat Dashboard.** This component renders nothing useful without one. `CometChatAIAssistantChat` requires an **AI Agent set up in the Dashboard as a `CometChat.User`**, and the `user` prop must be that agent's user entity. The agent's replies, tool execution, and metadata — including `suggestedMessages`, `greetingMessage`, `introductoryMessage`, and tool configuration — are defined when you create the agent.
+
+Set up the agent with the [AI Agent Builder](/ai-agents/agent-builder/overview).
+</Warning>
+
 <Note>
 **1:1 and group conversations.** AI Agents work in both one-on-one and group conversations. In a 1:1 chat, the end user talks directly with the agent user. In a group, the agent participates as a member — its messages (including cards) are delivered and attributed like any other member's message. If the group contains only one user and one agent, the agent responds automatically. In groups with more than two members, the agent only responds when @mentioned.
 </Note>
@@ -468,7 +405,7 @@

 ---

 ### streamingSpeed

 Milliseconds between text chunks during streaming display.


@@ -5,25 +5,18 @@
 ---
 
 <Accordion title="AI Integration Quick Reference">
-```json
-{
-  "component": "CometChatAudiosBubble",
-  "package": "@cometchat/chat-uikit-react",
-  "import": "import { CometChatAudiosBubble } from \"@cometchat/chat-uikit-react\";",
-  "description": "Batch-aware audio bubble for attached audio files. Renders stacked audio cards with play/pause, seekable slider, duration, and download. NOT used for voice notes — see CometChatVoiceNoteBubble.",
-  "cssRootClass": ".cometchat-audios-bubble",
-  "selfExtracting": true,
-  "multiAttachment": true,
-  "props": {
-    "data": {
-      "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Drives extraction of audio attachments and caption." },
-      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
-      "textFormatters": { "type": "CometChatTextFormatter[]" },
-      "className": { "type": "string" }
-    }
-  }
-}
-```
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatAudiosBubble` |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatAudiosBubble } from "@cometchat/chat-uikit-react";` |
+| CSS root class | `.cometchat-audios-bubble` |
+| Primary output | None — renders from the SDK message |
+| Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
+| Stitching | None — self-extracting from the SDK message |
+| Full props | See [Props](#props) |
+
 </Accordion>
 
 ## Overview
@@ -40,8 +33,8 @@

 Key capabilities:

 - **Stacked audio cards** — one card per audio attachment with filename, play/pause, seekable slider, elapsed/total time
 - **Inline playback** — plays audio directly in the bubble without a fullscreen viewer
 - **Download button** — download individual audio files
 - **Batch grouping** — rendered as one connected group when several media messages are sent together (handled by the [message list](/ui-kit/react/components/message-list#multi-attachment-batch-grouping))
 - **Caption support** — optional caption rendered below the cards
@@ -54,7 +47,7 @@

 <iframe
  src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-audios--two-audios&viewMode=story&shortcuts=false&singleStory=true"
  className="w-full rounded-xl"
  loading="lazy"
  style={{height: "500px", border: "1px solid #e0e0e0"}}
  title="CometChat Audio Bubble — Two Audios"
@@ -84,7 +77,7 @@
 | --- | --- |
 | Play/Pause button | Toggles playback for that audio file |
 | Filename | Display name of the audio file |
 | Seek slider | Seekable progress bar showing current position |
 | Time display | `currentTime / totalDuration` in `m:ss` format |
 | Download button | Downloads the audio file |

@@ -125,9 +118,9 @@

 ---

 ### textFormatters

 Text formatters applied to the caption (mentions, URLs).

 | | |
 | --- | --- |

@@ -5,24 +5,18 @@
 ---
 
 <Accordion title="AI Integration Quick Reference">
-```json
-{
-  "component": "CometChatCallActionBubble",
-  "package": "@cometchat/chat-uikit-react",
-  "import": "import { CometChatCallActionBubble } from \"@cometchat/chat-uikit-react\";",
-  "description": "Self-extracting bubble for call status system messages. Derives the status text, icon, and error color from the SDK call message and the logged-in user.",
-  "cssRootClass": ".cometchat-action-bubble",
-  "selfExtracting": true,
-  "props": {
-    "data": {
-      "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The call message (audio/video) in the 'call' category. Drives all extraction." },
-      "className": { "type": "string", "default": "undefined", "note": "Additional CSS class for the root element" }
-    }
-  },
-  "rendersThrough": "CometChatActionBubble (base primitive)",
-  "usedBy": ["CometChatCallActionPlugin"]
-}
-```
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCallActionBubble` |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatCallActionBubble } from "@cometchat/chat-uikit-react";` |
+| CSS root class | `.cometchat-action-bubble` |
+| Primary output | None — renders from the SDK message |
+| Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
+| Stitching | None — self-extracting from the SDK message |
+| Full props | See [Props](#props) |
+
 </Accordion>
 
 ## Overview
@@ -39,7 +33,7 @@

 <iframe
  src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-call-action-bubble--outgoing-calls&viewMode=story&shortcuts=false&singleStory=true"
  className="w-full rounded-xl"
  loading="lazy"
  style={{height: "300px", border: "1px solid #e0e0e0"}}
  title="CometChat Call Action Bubble — Outgoing"

@@ -5,24 +5,18 @@ description: "A self-extracting bubble for direct-call / meeting messages, with
 ---
 
 <Accordion title="AI Integration Quick Reference">
-```json
-{
-  "component": "CometChatCallBubble",
-  "package": "@cometchat/chat-uikit-react",
-  "import": "import { CometChatCallBubble } from \"@cometchat/chat-uikit-react\";",
-  "description": "Self-extracting call bubble for meeting / direct-call custom messages. Derives the call type, session ID, title, icon, and timestamp from the message.",
-  "cssRootClass": ".cometchat-call-bubble",
-  "selfExtracting": true,
-  "props": {
-    "data": {
-      "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The meeting/direct-call message; drives extraction." },
-      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
-      "onJoinClick": { "type": "(sessionId: string) => void" },
-      "className": { "type": "string" }
-    }
-  }
-}
-```
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCallBubble` |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatCallBubble } from "@cometchat/chat-uikit-react";` |
+| CSS root class | `.cometchat-call-bubble` |
+| Primary output | Self-extracting call bubble; `onJoinClick: (sessionId: string) => void` starts the call on Join |
+| Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user; see [Calling Integration](/ui-kit/react/calling-integration) to start/join a call session |
+| Stitching | Wire `onJoinClick` to start the call (see [Calling Integration](/ui-kit/react/calling-integration)) |
+| Full props | See [Props](#props) |
+
 </Accordion>
 
 ## Overview
@@ -92,7 +86,11 @@ Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.
 
 ### onJoinClick
 
-Callback when the Join button is clicked. Receives the session ID.
+Callback when the Join button is clicked. Receives the session ID. Empty by default — you must start or join the call session yourself.
+
+<Note>
+See [Calling Integration](/ui-kit/react/calling-integration) for how to start or join a call session.
+</Note>
 
 | | |
 | --- | --- |

@@ -4,85 +4,21 @@
 ---
 
 <Accordion title="AI Integration Quick Reference">
-```json
-{
-  "component": "CometChatCallButtons",
-  "package": "@cometchat/chat-uikit-react",
-  "import": "import { CometChatCallButtons } from \"@cometchat/chat-uikit-react\";",
-  "description": "Voice and video call initiation buttons for user or group conversations. Manages the full call lifecycle (outgoing + ongoing) internally.",
-  "cssRootClass": ".cometchat-call-buttons",
-  "primaryOutput": {
-    "description": "Initiates calls via the SDK and renders the outgoing/ongoing call screens"
-  },
-  "props": {
-    "data": {
-      "user": {
-        "type": "CometChat.User",
-        "default": "undefined",
-        "note": "Pass either user or group, not both"
-      },
-      "group": {
-        "type": "CometChat.Group",
-        "default": "undefined",
-        "note": "Pass either user or group, not both"
-      }
-    },
-    "callbacks": {
-      "onVoiceCallClick": "(entity: CometChat.User | CometChat.Group) => void",
-      "onVideoCallClick": "(entity: CometChat.User | CometChat.Group) => void",
-      "onCallEnded": "() => void",
-      "onError": "((error: CometChat.CometChatException) => void) | null"
-    },
-    "visibility": {
-      "hideVoiceCallButton": { "type": "boolean", "default": false },
-      "hideVideoCallButton": { "type": "boolean", "default": false }
-    },
-    "viewSlots": {
-      "voiceCallButtonView": "ReactNode",
-      "videoCallButtonView": "ReactNode"
-    },
-    "configuration": {
-      "callSettingsBuilder": "(isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => CallSettingsBuilder",
-      "className": "string"
-    }
-  },
-  "eventsEmitted": [
-    {
-      "name": "ui:call/outgoing",
-      "payload": "{ call }",
-      "description": "User initiates a 1-on-1 voice/video call"
-    },
-    {
-      "name": "ui:message/sent",
-      "payload": "{ message, status }",
-      "description": "Group call meeting message sent"
-    }
-  ],
-  "eventsReceived": [
-    {
-      "name": "ui:call/rejected",
-      "payload": "{ call }",
-      "description": "Re-enables call buttons after the call is rejected"
-    },
-    {
-      "name": "ui:call/ended",
-      "payload": "{}",
-      "description": "Resets all call state when the call ends"
-    }
-  ],
-  "sdkListeners": [
-    "onIncomingCallReceived",
-    "onIncomingCallCancelled",
-    "onOutgoingCallAccepted",
-    "onOutgoingCallRejected"
-  ],
-  "compositionExample": {
-    "description": "Standalone call buttons or embedded in the MessageHeader auxiliary view",
-    "components": ["CometChatCallButtons", "CometChatOutgoingCall", "CometChatOngoingCall"],
-    "flow": "user/group prop -> click button -> SDK initiateCall -> CometChatOutgoingCall overlay -> onOutgoingCallAccepted -> CometChatOngoingCall"
-  }
-}
-```
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCallButtons` |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatCallButtons } from "@cometchat/chat-uikit-react";` |
+| CSS root class | `.cometchat-call-buttons` |
+| Primary output | Initiates voice/video calls via the SDK and renders the outgoing/ongoing call screens; `onVoiceCallClick` / `onVideoCallClick` override the default initiation |
+| Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user; plus the Calls SDK installed and calling enabled — see [Calling Integration](/ui-kit/react/calling-integration) |
+| Stitching | Pass `user` or `group`; the buttons manage the outgoing/ongoing call lifecycle internally (see [Calling Integration](/ui-kit/react/calling-integration)) |
+| Events emitted | `ui:call/outgoing`, `ui:message/sent` — see [Event System](/ui-kit/react/event-system) |
+| Events received | `ui:call/rejected`, `ui:call/ended` — see [Event System](/ui-kit/react/event-system) |
+| SDK listeners (automatic) | Incoming call events (received/cancelled) and outgoing call events (accepted/rejected) to sync button state and screen transitions |
+| Full props | See [Props](#props) |
+
 </Accordion>
 
 ## Where It Fits
@@ -219,7 +155,7 @@
 }
 ```

 #### onError

 Fires on internal errors during call initiation.

@@ -231,7 +167,7 @@
  return (
    <CometChatCallButtons
      user={chatUser}
      onError={(error: CometChat.CometChatException) => {
        console.error("CallButtons error:", error);
      }}
    />
@@ -308,7 +244,7 @@
    <CometChatCallButtons
      user={chatUser}
      voiceCallButtonView={<button className="my-voice-btn">Voice</button>}
      videoCallButtonView={<button className="my-video-btn">Video</button>}
    />
  );
 }
@@ -417,7 +353,7 @@
 
 ### callSettingsBuilder
 
-Builder function for customizing the ongoing call settings.
+Builder function for customizing the ongoing call settings, built via `callSettings`. See [Calling Integration](/ui-kit/react/calling-integration) for call-settings setup.
 
 | | |
 | --- | --- |