@cometchat/skills 4.4.2 → 5.0.0

package/skills/cometchat-react-calls/references/group-calls.md

@@ -1,257 +0,0 @@
-# Group calls — broadcast meeting pattern (web)
-
-Group calls in CometChat use a **different signaling channel than 1:1 user calls**. The Ringing flow (Chat SDK `initiateCall` → `onIncomingCallReceived` on peer) fires for **1:1 user calls only**. For groups, the kit broadcasts a **custom message** of type `meeting` to the group; receivers see a "Join meeting" card in their message list (kit-based) OR need an explicit message listener (custom UI).
-
-This is by-design kit behavior — not a bug. Documented across all platform kits.
-
-**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/group-calls
-
----
-
-## Architecture
-
-```
-Caller (uid-A, member of group-X)        CometChat                Receivers (all other members of group-X)
-  │                                          │                              │
-  │ <CometChatCallButtons group={x}>         │                              │
-  │ → CometChatUIKit.sendCustomMessage(      │                              │
-  │     CustomMessage(GUID, GROUP,           │                              │
-  │       "meeting",                         │                              │
-  │       { callType, sessionId }))          │                              │
-  ├─────────────────────────────────────────>│                              │
-  │                                          │ onCustomMessageReceived      │
-  │                                          ├─────────────────────────────>│ (each member's
-  │                                          │                              │  MessageListener
-  │                                          │                              │  fires if they're
-  │                                          │                              │  in the group)
-  │                                          │                              │
-  │ caller jumps straight to OngoingCall     │                              │
-  │ (joins session GUID directly)            │   receiver taps "Join"       │
-  │                                          │   → joinSession(GUID)        │
-  │  CometChatCalls.joinSession(token, GUID) │ <─────────────────────────── │
-  ├─────────────────────────────────────────>│                              │
-  │            ───── WebRTC session active (sessionId = group GUID) ─────   │
-```
-
-Key contrast with 1:1 ringing:
-
-| Channel | 1:1 user calls | Group calls |
-|---|---|---|
-| Signaling API | `CometChat.initiateCall(call)` | `CometChatUIKit.sendCustomMessage(meetingMessage)` |
-| Receiver event | `CallListener.onIncomingCallReceived` | `MessageListener.onCustomMessageReceived` (category=CATEGORY_CUSTOM + type="meeting") |
-| Session ID | server-generated unique per call | the group's GUID |
-| Ring/decline semantics | yes — `acceptCall` / `rejectCall` | no — receivers just tap to join (or ignore) |
-| Auto-cancel timeout | yes (45s default) | no — meeting card persists in chat history |
-
----
-
-## Hard rules
-
-1. **Group calls broadcast a custom message; they do NOT use the call listener.** If your custom UI only registers `addCallListener`, group-call recipients will see NOTHING. Add a `MessageListener` that handles `category === CATEGORY_CUSTOM && type === 'meeting'`.
-2. **The session ID equals the group's GUID** — not a generated unique ID like 1:1 calls. Anyone with the GUID can join the session at any time (it's persistent, not auto-cancelled).
-3. **Anyone can join, including after the meeting started.** Late joiners are normal — the WebRTC session is open until all participants leave. UI must handle "joining an already-active meeting" as a valid state.
-4. **Joining = `CometChatCalls.joinSession(token, sessionSettings, container)` with sessionId set to the group GUID.** Same `generateToken(sessionId)` step as 1:1 ringing — auth is internal after `CometChatCalls.login()`.
-5. **No `CometChat.endCall(sessionId)` on the chat side for groups** — the meeting message is the persistent record, not a call entity. Each participant just calls `CometChatCalls.leaveSession()` when they hang up.
-6. **`onCallEndedMessageReceived` does NOT fire for group sessions.** The session persists as long as anyone's in it. Use `CometChatCalls.OngoingCallListener.onCallEnded` to detect when YOUR client's session ends.
-
----
-
-## Caller side — kit-based
-
-If you're using `<CometChatMessageHeader>` + `<CometChatCallButtons>`, the kit handles everything:
-
-```tsx
-import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-
-<CometChatCallButtons group={group} />
-```
-
-Tapping voice/video automatically:
-1. Sends a `CustomMessage` of type `meeting` to the group
-2. Opens `<CometChatOutgoingCall>` UI (which transitions to `<CometChatOngoingCall>`)
-3. Joins the WebRTC session with `sessionId = group.getGuid()`
-
-No additional code on the caller side.
-
-## Caller side — custom UI
-
-If you don't use kit components and want full control:
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-
-async function startGroupCall(guid: string, callType: "audio" | "video") {
-  const loggedInUser = await CometChat.getLoggedInUser();
-  if (!loggedInUser) throw new Error("Not logged in");
-
-  // 1. Broadcast the meeting message to the group
-  const sessionId = guid;  // group GUID becomes the session ID
-  const customData = { callType, sessionId };
-  const meetingMessage = new CometChat.CustomMessage(
-    guid,
-    CometChat.RECEIVER_TYPE.GROUP,
-    "meeting",
-    customData,
-  );
-  meetingMessage.setCategory(CometChat.CATEGORY_CUSTOM);
-  meetingMessage.setMetadata({
-    incrementUnreadCount: true,
-    pushNotification: "meeting",
-    ...customData,
-  });
-  await CometChat.sendCustomMessage(meetingMessage);
-
-  // 2. Generate a call token + join the session
-  const authToken = loggedInUser.getAuthToken();
-  const { token: callToken } = await CometChatCalls.generateToken(sessionId);
-
-  // joinSession takes a SessionSettings OBJECT (NOT CallSettingsBuilder.build() —
-  // that CallSettings is for the deprecated startSession). Events come from the
-  // static addEventListener bus, not OngoingCallListener.
-  const settings = { sessionType: callType === "audio" ? "VOICE" : "VIDEO" };
-  const offClosed = CometChatCalls.addEventListener("onConnectionClosed", () => {
-    /* hangup UI */
-  });
-  // later, on teardown: offClosed();
-
-  // 3. Mount the WebRTC view into your container element
-  await CometChatCalls.joinSession(callToken, settings, containerElement);
-}
-```
-
-The `meeting` message lands in the group's chat history immediately; other members get `onCustomMessageReceived` if they have a listener.
-
----
-
-## Receiver side — kit-based (auto-renders meeting card)
-
-If your app uses `<CometChatMessageList />` to render the group's messages, the kit auto-renders the meeting message as a **"Join meeting" card** with a tap target. No additional code needed:
-
-```tsx
-<CometChatMessageList group={group} />
-```
-
-When a user taps the meeting card, the kit:
-1. Calls `CometChatCalls.generateToken(sessionId, authToken)`
-2. Opens `<CometChatOngoingCall>` with `sessionID={group.getGuid()}`
-3. Joins the WebRTC session
-
-The receiver is now in the same WebRTC session as the caller (and any other members who joined).
-
-## Receiver side — custom UI (needs a message listener)
-
-If you DON'T use `<CometChatMessageList />` — e.g. you have a custom chat surface, OR you want incoming-meeting notifications globally — register a `MessageListener` and handle the meeting message yourself:
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const GROUP_MEETING_LISTENER_ID = "APP_GROUP_MEETING_LISTENER";
-
-CometChat.addMessageListener(
-  GROUP_MEETING_LISTENER_ID,
-  new CometChat.MessageListener({
-    onCustomMessageReceived: (msg: CometChat.CustomMessage) => {
-      if (msg.getCategory() !== CometChat.CATEGORY_CUSTOM) return;
-      if (msg.getType() !== "meeting") return;
-
-      const customData = msg.getCustomData() as { callType?: "audio" | "video"; sessionId?: string };
-      const sessionId = customData.sessionId ?? msg.getReceiverId();
-      const callType = customData.callType ?? "video";
-      const fromUid = msg.getSender().getUid();
-      const groupGuid = msg.getReceiverId();
-
-      // Show YOUR group-call incoming UI here
-      // (e.g. toast notification with "Join" button, badge on the group, etc.)
-      showIncomingGroupCallUI({ sessionId, callType, fromUid, groupGuid });
-    },
-  }),
-);
-
-// On hangup or logout:
-CometChat.removeMessageListener(GROUP_MEETING_LISTENER_ID);
-```
-
-Tap-to-join from your custom UI:
-
-```ts
-async function joinGroupCall(sessionId: string, callType: "audio" | "video", container: HTMLElement) {
-  const loggedInUser = await CometChat.getLoggedInUser();
-  const authToken = loggedInUser!.getAuthToken();
-  const { token: callToken } = await CometChatCalls.generateToken(sessionId);
-
-  // SessionSettings OBJECT for joinSession (not CallSettingsBuilder output).
-  const settings = { sessionType: callType === "audio" ? "VOICE" : "VIDEO" };
-  const offClosed = CometChatCalls.addEventListener("onConnectionClosed", () => {
-    /* hangup UI */
-  });
-  // later, on teardown: offClosed();
-
-  await CometChatCalls.joinSession(callToken, settings, container);
-}
-```
-
-No `acceptCall` step — receivers just join the session. The meeting message remains in the chat history regardless of who joins.
-
----
-
-## Edge cases
-
-### Late joining
-
-A meeting can be active for an hour before a member opens the app. The custom message persists in chat history; tapping the card joins the live session.
-
-**UI implication:** the meeting card should reflect live state. Listen for `MessageListener.onCustomMessageReceived` to add new cards; poll or use presence to know if the session is currently active. There's no built-in "meeting is live" signal — apps typically render the card with a "Join meeting" CTA regardless and let the WebRTC layer fail gracefully if everyone has left.
-
-### Cancelling / leaving
-
-There's no "cancel the meeting" — the meeting message is permanent in chat history. Each participant leaves independently:
-
-```ts
-CometChatCalls.leaveSession();   // your local WebRTC session (v5 — endSession() is deprecated)
-// No CometChat.endCall — meetings don't have a call entity.
-```
-
-If you want to mark a meeting as "ended" UX-wise, send a follow-up message (e.g. another custom message of type `meeting_ended`) and have the receiver UI update its cards based on it. Not built into the SDK.
-
-### Push notifications
-
-The meeting `CustomMessage` carries `metadata.pushNotification = "meeting"`. The CometChat push system can route this to a "meeting started in your group" push. Configure on the dashboard side under Notifications → Push Notification.
-
-### Missed meetings
-
-Since meetings don't ring, there's no "missed call" entity. If you want missed-meeting UI, derive it from message history: list meeting messages where the current user has NOT joined the session.
-
----
-
-## Anti-patterns
-
-1. **Registering only `addCallListener` and expecting group calls to ring.** They won't. Group calls fire `onCustomMessageReceived`, not `onIncomingCallReceived`. Always add both listeners if you support both 1:1 and group calling.
-2. **Treating `sessionId` as ephemeral for groups.** It's the group GUID — persistent. Don't generate a new sessionId per group call; the kit uses the GUID intentionally so all joiners hit the same WebRTC session.
-3. **Calling `CometChat.endCall(sessionId)` after a group hangup.** Meetings have no call entity to end; the API returns an error. Use `CometChatCalls.leaveSession()` (local) only.
-4. **Using `acceptCall` / `rejectCall` on the meeting message.** Those only work on 1:1 call entities. For meetings, you just join (no accept) or ignore (no reject).
-5. **Assuming all group members ring simultaneously.** Only members with an active `MessageListener` get `onCustomMessageReceived`. Offline members see the meeting card when they next open the group.
-6. **Sending the meeting message without `metadata.pushNotification`.** Offline members won't get a push. The kit handles this for you when you use `<CometChatCallButtons>`; if you're building custom, copy the metadata pattern in §"Caller side — custom UI".
-
----
-
-## Verification checklist
-
-- [ ] If using kit components: `<CometChatCallButtons group={g}>` renders + tap initiates a meeting message
-- [ ] If using custom caller UI: `CometChat.sendCustomMessage` is called with `type: "meeting"`, `category: CATEGORY_CUSTOM`, `customData: { callType, sessionId: groupGuid }`
-- [ ] If using kit receiver: `<CometChatMessageList group={g}>` renders the meeting card with a "Join" button
-- [ ] If using custom receiver: `addMessageListener` registers `onCustomMessageReceived` and filters by category + type
-- [ ] On hangup, `CometChatCalls.leaveSession()` is called (NOT `CometChat.endCall`)
-- [ ] Late-joining works — open app while meeting is live; tap card; join session
-- [ ] Push notifications fire for offline group members (server-side configured)
-- [ ] Both listeners (`addCallListener` + `addMessageListener`) wired if app supports both 1:1 and group calls
-
----
-
-## Pointers
-
-- `ringing-integration.md` — the 1:1 user-call flow (different channel — call listener, not message listener)
-- `call-session.md` — pure session-mode (URL-based, no chat-side signaling at all)
-- `cometchat-react-calls/SKILL.md` rule 1.7 — IncomingCall mount (1:1 only; group calls don't use this)
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/group-calls
-- Kit source (web React): `@cometchat/chat-uikit-react` → `src/components/Calling/CometChatCallButtons/CometChatCallButtons.tsx` (group call buttons send the `meeting` custom message)

package/skills/cometchat-react-calls/references/idle-timeout.md

@@ -1,188 +0,0 @@
-# Idle timeout on web
-
-Auto-ends calls where the local user is the only remaining participant. Two timers: a "you're alone, are you still there?" prompt fires after the first interval, then the session ends if the user doesn't respond before the second interval. SDK first-party — just two settings keys + one event.
-
-**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/idle-timeout
-**Use it for:** any group call (preventing zombie sessions when everyone else hangs up), waiting rooms (auto-close empty rooms), classroom calls (instructor's screen doesn't stay live overnight).
-
----
-
-## SDK API
-
-> ⚠️ **VALUES ARE IN MILLISECONDS.** `idleTimeoutPeriodBeforePrompt: 180` is **180 ms**, not 180 seconds — so the prompt fires the instant you join alone and the call exits in a fraction of a second (real customer bug, 2026-06). Always `* 1000`: 3 minutes = `180_000`.
-
-Two equivalent ways to set it — **match whichever your join path uses:**
-
-```ts
-// (a) SessionSettings OBJECT — the session-mode path: joinSession(token, settings, container)
-const settings = {
-  idleTimeoutPeriodBeforePrompt: 180_000,  // 180s before the "still there?" prompt
-  idleTimeoutPeriodAfterPrompt: 60_000,    // 60s grace (this is the SDK MINIMUM)
-};
-await CometChatCalls.joinSession(token, settings, containerRef.current);
-
-// (b) Builder — the kit's callSettingsBuilder prop. ⚠️ The builder has ONLY a
-// single .setIdleTimeoutPeriod(ms) — there are NO setIdleTimeoutPeriodBeforePrompt /
-// setIdleTimeoutPeriodAfterPrompt builder methods. The before/after-prompt SPLIT
-// exists only as the SessionSettings object fields in form (a) above.
-const builder = new CometChatCalls.CallSettingsBuilder()
-  .setIdleTimeoutPeriod(180_000);
-
-CometChatCalls.addEventListener("onSessionTimedOut", () => {
-  // Navigate away, show "session ended" UI
-});
-```
-
-| Setting | Default | Min | Unit |
-|---|---|---|---|
-| `idleTimeoutPeriodBeforePrompt` | 60_000 (60s) | — (don't use 0 / tiny — instant prompt) | **milliseconds** |
-| `idleTimeoutPeriodAfterPrompt` | 120_000 (120s) | **60_000 (60s)** — smaller is silently clamped to 60s | **milliseconds** |
-
-The SDK shows the prompt overlay automatically (kit's default UI). For custom UI you handle the prompt yourself.
-
----
-
-## Recommended timeouts per app archetype
-
-| App | Before-prompt | After-prompt | Why |
-|---|---|---|---|
-| Marketplace 1:1 | 30s | 60s | Buyers lose interest fast; reclaim resources |
-| Telehealth (provider waiting) | 5min | 5min | Patients run late; don't punish them |
-| Classroom / instructor | 10min | 10min | Instructor may step away; don't interrupt class |
-| Internal team meeting | 60s | 120s | Default — meetings end abruptly anyway |
-| Customer support | 30s | 60s | Agent moves to next ticket; reclaim |
-
----
-
-## Custom prompt UI (when default isn't enough)
-
-The kit's default prompt is functional but plain. Custom UI uses `enableDefaultLayout(false)` + listens for the prompt internally — though the SDK doesn't expose a direct "prompt fired" event. Two patterns:
-
-### Pattern A — Track time-since-alone yourself
-
-```tsx
-import { useEffect, useRef, useState } from "react";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-
-function useIdleTimeoutPrompt({
-  beforePromptMs = 60_000,
-  afterPromptMs = 120_000,
-}: { beforePromptMs?: number; afterPromptMs?: number; }) {
-  const [showPrompt, setShowPrompt] = useState(false);
-  const aloneSinceRef = useRef<number | null>(null);
-  const promptTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const sessionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    const listener = new CometChatCalls.OngoingCallListener({
-      onUserListUpdated: (users: { uid: string }[]) => {
-        const localUid = CometChat.getLoggedinUser()?.getUid();
-        const remoteCount = users.filter(u => u.uid !== localUid).length;
-
-        if (remoteCount === 0 && aloneSinceRef.current === null) {
-          // Just became alone
-          aloneSinceRef.current = Date.now();
-          promptTimerRef.current = setTimeout(() => {
-            setShowPrompt(true);
-            sessionTimerRef.current = setTimeout(() => {
-              CometChatCalls.leaveSession();
-            }, afterPromptMs);
-          }, beforePromptMs);
-        } else if (remoteCount > 0) {
-          // Someone joined — clear timers
-          aloneSinceRef.current = null;
-          if (promptTimerRef.current) clearTimeout(promptTimerRef.current);
-          if (sessionTimerRef.current) clearTimeout(sessionTimerRef.current);
-          setShowPrompt(false);
-        }
-      },
-    });
-
-    // Attach listener... (see custom-ui.md for the full setup)
-
-    return () => {
-      if (promptTimerRef.current) clearTimeout(promptTimerRef.current);
-      if (sessionTimerRef.current) clearTimeout(sessionTimerRef.current);
-    };
-  }, [beforePromptMs, afterPromptMs]);
-
-  function dismiss() {
-    setShowPrompt(false);
-    if (sessionTimerRef.current) clearTimeout(sessionTimerRef.current);
-    aloneSinceRef.current = null;
-  }
-
-  return { showPrompt, dismiss };
-}
-```
-
-Usage:
-
-```tsx
-function CustomCallView() {
-  const { showPrompt, dismiss } = useIdleTimeoutPrompt({
-    beforePromptMs: 30_000,
-    afterPromptMs: 60_000,
-  });
-
-  return (
-    <>
-      {/* call UI */}
-      {showPrompt && (
-        <div role="alertdialog" aria-modal="true" aria-labelledby="idle-title">
-          <h2 id="idle-title">Still there?</h2>
-          <p>You're alone in this call. It'll end in 60 seconds.</p>
-          <button onClick={dismiss}>Stay</button>
-          <button onClick={() => CometChatCalls.leaveSession()}>End now</button>
-        </div>
-      )}
-    </>
-  );
-}
-```
-
-### Pattern B — Long timeouts + custom prompt only
-
-```ts
-// SessionSettings object for joinSession (these before/after fields are object-only).
-const settings = {
-  idleTimeoutPeriodBeforePrompt: 86_400_000,   // 24 hours — effectively disabled
-  idleTimeoutPeriodAfterPrompt: 86_400_000,
-};
-```
-
-Then implement your own timeout via Pattern A. Useful when you want UX-customized prompts instead of the SDK's default overlay.
-
----
-
-## Anti-patterns
-
-1. **`idleTimeoutPeriodAfterPrompt < 60_000` (60s).** SDK rejects values below 60s. Setting it lower silently fails — the SDK uses 60s instead.
-2. **Disabling idle timeout entirely** by setting both timers to `Infinity`. Sessions hang forever, server-side resources leak, billing dings you. Always set a reasonable upper bound.
-3. **Showing the prompt at the same time as call notifications/banners.** Stacks on top of incoming-message notifications. Z-index conflicts. Render the idle prompt at the highest z-level for the call surface.
-4. **Auto-ending without a goodbye animation.** Jarring. Fade-out the call surface over 500ms before disconnecting.
-5. **Prompt UI without `role="alertdialog"`.** Screen readers don't pause to announce; user gets disconnected mid-listen. Use `role="alertdialog"` + `aria-modal="true"`.
-6. **Restarting `aloneSinceRef.current` on EVERY participant change.** Want to track "alone since" only when transitioning from N>0 to 0. Don't reset when participants join/leave while still N>0.
-
----
-
-## Verification checklist
-
-- [ ] `setIdleTimeoutPeriodBeforePrompt` + `setIdleTimeoutPeriodAfterPrompt` set on CallSettings
-- [ ] After-prompt period ≥ 60_000 (60s)
-- [ ] `onSessionTimedOut` event handler navigates away cleanly (not just `console.log`)
-- [ ] Custom prompt UI uses `role="alertdialog"` + `aria-modal="true"`
-- [ ] Custom prompt has both "Stay" and "End now" buttons
-- [ ] Timer cleanup in `useEffect` return — no leaked setTimeout
-- [ ] Browser smoke: 2 tabs in call, close tab B, watch tab A's timer fire (set short timeouts for testing)
-- [ ] After-prompt smoke: dismiss the prompt → timer clears → no auto-disconnect
-
----
-
-## Pointers
-
-- `cometchat-react-calls` SKILL.md — the seven hard rules
-- `references/group-calls.md` — group call architecture (idle-timeout matters most for groups)
-- `references/custom-ui.md` — custom call UI integration
-- `cometchat-a11y` — `role="alertdialog"` patterns
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/idle-timeout

package/skills/cometchat-react-calls/references/in-call-chat.md

@@ -1,212 +0,0 @@
-# In-call chat on web
-
-Text messaging during a video/voice call. SDK provides the chat button in the control panel + events; the actual chat UI is yours to build (the kit's existing `<CometChatMessageList>` + `<CometChatMessageComposer>` work great here).
-
-**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/in-call-chat
-**Use it for:** classroom side chat, team meeting links/notes, customer support secondary channel, AV-impaired participant text fallback.
-
----
-
-## SDK API
-
-```ts
-// SessionSettings object passed to joinSession(token, settings, container).
-// hideChatButton is a SessionSettings field, not a CallSettingsBuilder method.
-const settings = { hideChatButton: false };   // show the kit's built-in chat button
-
-CometChatCalls.addEventListener("onChatButtonClicked", () => {
-  // Open your chat panel
-  setChatOpen(true);
-});
-
-// Update unread badge
-CometChatCalls.setChatButtonUnreadCount(5);
-CometChatCalls.setChatButtonUnreadCount(0);   // clear
-```
-
-The button + badge live on the SDK's control panel. Your job is to render the chat UI when the button is tapped.
-
----
-
-## Architecture: group-as-session
-
-The recommended pattern: use a CometChat **group** keyed to the call session. Every participant joins the group when they join the call; messages flow through the group's normal CometChat Chat SDK channel. When the call ends, the group either persists (logged history) or is deleted (ephemeral).
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-async function ensureCallGroup(sessionId: string): Promise<CometChat.Group> {
-  // Try to get existing
-  try {
-    return await CometChat.getGroup(sessionId);
-  } catch {
-    // Create
-    const group = new CometChat.Group(
-      sessionId,                    // GUID == session ID
-      `Call ${sessionId}`,          // display name
-      CometChat.GROUP_TYPE.PUBLIC,  // anyone in the call can join
-    );
-    return await CometChat.createGroup(group);
-  }
-}
-
-async function joinCallGroup(sessionId: string): Promise<void> {
-  await CometChat.joinGroup(sessionId, CometChat.GROUP_TYPE.PUBLIC, "");
-}
-```
-
-Wire this into your call-start flow: after `joinSession` succeeds, `joinCallGroup`.
-
----
-
-## Chat panel UI
-
-```tsx
-import { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-import {
-  CometChatMessageList,
-  CometChatMessageComposer,
-} from "@cometchat/chat-uikit-react";
-
-interface InCallChatPanelProps {
-  sessionId: string;
-}
-
-function InCallChatPanel({ sessionId }: InCallChatPanelProps) {
-  const [open, setOpen] = useState(false);
-  const [unread, setUnread] = useState(0);
-  const [group, setGroup] = useState<CometChat.Group>();
-
-  // Listen for the SDK's button click
-  useEffect(() => {
-    const handler = () => setOpen(true);
-    // addEventListener returns an unsubscribe fn — there is no removeEventListener.
-    const off = CometChatCalls.addEventListener("onChatButtonClicked", handler);
-    return () => off();
-  }, []);
-
-  // Resolve the group object for the message list
-  useEffect(() => {
-    CometChat.getGroup(sessionId).then(setGroup).catch(() => {});
-  }, [sessionId]);
-
-  // Track unread when panel is closed
-  useEffect(() => {
-    const listenerId = `in-call-chat-${sessionId}`;
-    const messageListener = new CometChat.MessageListener({
-      onTextMessageReceived: (msg: CometChat.TextMessage) => {
-        if (
-          msg.getReceiverType() === CometChat.RECEIVER_TYPE.GROUP &&
-          msg.getReceiverId() === sessionId &&
-          !open
-        ) {
-          setUnread((u) => {
-            const next = u + 1;
-            CometChatCalls.setChatButtonUnreadCount(next);
-            return next;
-          });
-        }
-      },
-    });
-    CometChat.addMessageListener(listenerId, messageListener);
-    return () => CometChat.removeMessageListener(listenerId);
-  }, [sessionId, open]);
-
-  // Clear badge on open
-  useEffect(() => {
-    if (open) {
-      setUnread(0);
-      CometChatCalls.setChatButtonUnreadCount(0);
-    }
-  }, [open]);
-
-  if (!open || !group) return null;
-
-  return (
-    <div
-      role="dialog"
-      aria-label="In-call chat"
-      style={{
-        position: "fixed",
-        right: 0,
-        top: 0,
-        bottom: 0,
-        width: 360,
-        background: "var(--cometchat-background-color-01)",
-        borderLeft: "1px solid var(--cometchat-border-color-light)",
-        display: "flex",
-        flexDirection: "column",
-        zIndex: 200,
-      }}
-    >
-      <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--cometchat-border-color-light)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <strong>Chat</strong>
-        <button onClick={() => setOpen(false)} aria-label="Close chat">×</button>
-      </div>
-      {/* The flex-1 + minHeight:0 dance applies here too — long chat → composer would push down */}
-      <div style={{ flex: "1 1 0", minHeight: 0, overflow: "hidden" }}>
-        <CometChatMessageList group={group} hideReplyInThreadOption />
-      </div>
-      <div style={{ flex: "0 0 auto" }}>
-        <CometChatMessageComposer group={group} />
-      </div>
-    </div>
-  );
-}
-```
-
-The flex-1 + minHeight:0 + wrap-each-component pattern from `cometchat-react-patterns` rule 6a applies inside the chat panel too.
-
----
-
-## Compact UX patterns
-
-For 1:1 calls or small groups, an in-call chat panel is overkill. Two lighter patterns:
-
-### A — Floating message strip (top of call)
-
-Show only the latest message inline; tap to open full chat. Minimal UI for "just the gist."
-
-### B — System-toast on each message
-
-`onTextMessageReceived` → toast at top of call. Auto-dismiss after 4s. No persistent panel.
-
-The full panel pattern above is for 5+-person calls or when chat is a load-bearing part of the experience (e.g. classroom Q&A).
-
----
-
-## Anti-patterns
-
-1. **Polling for unread count.** SDK's `setChatButtonUnreadCount` is push-based; respond to message events.
-2. **Chat panel grows past viewport on long sessions.** flex-shrink trap (see `cometchat-react-patterns` rule 6a).
-3. **Forgetting to clear the unread badge on panel open.** User opens, sees "12 new" badge that doesn't update — looks broken.
-4. **Persisting the call group forever.** For ephemeral calls (consultations, support), delete the group on call end. Hosts of recurring meetings keep groups.
-5. **Sending messages without auth.** Make sure CometChat.login resolved before joining the group. Race conditions on early call accept.
-6. **Reusing one chat-panel instance across multiple calls.** Group reference goes stale. Re-mount per call.
-
----
-
-## Verification checklist
-
-- [ ] `hideChatButton: false` in CallSettings
-- [ ] `onChatButtonClicked` listener opens the panel
-- [ ] CometChat group created/resolved with sessionId as GUID
-- [ ] Local user joins the group on call start
-- [ ] Unread badge updates from `onTextMessageReceived` only when panel closed
-- [ ] Badge cleared on panel open
-- [ ] Chat panel uses flex-1 + minHeight:0 + wrap-each-component pattern
-- [ ] `role="dialog"` + `aria-label` on the panel container
-- [ ] Cleanup: remove message + chat-button listeners on call end
-- [ ] Browser smoke: 2 tabs in call, send message from A → unread badge in B → tap → message visible
-
----
-
-## Pointers
-
-- `cometchat-react-calls` SKILL.md
-- `cometchat-react-patterns` — minHeight:0 rule 6a (applies to in-call chat panel)
-- `references/group-calls.md` — group call architecture
-- `cometchat-android-v5-calls/references/in-call-chat.md` — Android V5 sibling reference
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/in-call-chat