@cometchat/skills 4.1.0 → 4.2.0

package/skills/cometchat-react-calls/references/ringing-integration.md

@@ -0,0 +1,255 @@
+# Ringing — call signaling with custom UI (web)
+
+The Ringing flow uses the **Chat SDK's call entity** for signaling (initiate / ring / accept / reject / cancel) and the **Calls SDK** for the actual WebRTC session. This is the right pattern when you want a custom incoming-call UI on top of CometChat's signaling — not the kit's prebuilt `CometChatIncomingCall`.
+
+**Three calling modes — pick the right one:**
+
+| Mode | Driver | When to use |
+|---|---|---|
+| **Standard** | UI Kit (`CometChatCallButtons` + `CometChatIncomingCall`) | 80% case — chat-driven calls with prebuilt UI |
+| **Ringing (this doc)** | Chat SDK call entity + Calls SDK session | Custom incoming/outgoing call UI on top of CometChat signaling |
+| **Call Session** (see `call-session.md`) | Calls SDK `joinSession` directly | Meeting-room URLs, scheduled calls, no ringing |
+
+**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/ringing
+
+---
+
+## Architecture
+
+```
+Caller                              CometChat                       Recipient
+  │                                     │                                │
+  │ CometChat.initiateCall(call)        │                                │
+  ├────────────────────────────────────>│                                │
+  │                                     │ onIncomingCallReceived         │
+  │                                     ├───────────────────────────────>│
+  │                                     │                                │
+  │                                     │     CometChat.acceptCall(sid)  │
+  │                                     │<───────────────────────────────│
+  │ onOutgoingCallAccepted              │                                │
+  │<────────────────────────────────────┤                                │
+  │                                     │                                │
+  │  CometChatCalls.joinSession(token)  │  CometChatCalls.joinSession(token)
+  ├────────────────────────────────────>│<───────────────────────────────│
+  │              ───── WebRTC session active ─────                       │
+```
+
+The Chat SDK is the signaling channel; the Calls SDK is the media channel. Same sessionId binds them.
+
+---
+
+## Hard rules
+
+1. **Both SDKs must be initialized** — `CometChat.init` for signaling, `CometChatCalls.init` for media. Sequential, in that order.
+2. **`addCallListener` must be live BEFORE you start receiving calls.** Add it on app start, after login. Otherwise incoming-call events are missed.
+3. **`CometChatCalls.joinSession` happens AFTER `CometChat.acceptCall` resolves** — accepting tells the backend you're ready; joining the session enters WebRTC. Reversing this fires media before the chat-side state agrees.
+4. **End the call on BOTH SDKs.** `CometChatCalls.leaveSession()` for media, `CometChat.endCall(sessionId)` for the chat-side call record. Skipping either leaves a zombie.
+5. **Listen for `onCallEndedMessageReceived`** for the case where the OTHER party ended. Without it, your UI keeps showing "in-call" while the session is dead.
+6. **Custom timeout (default 45s)** — `CometChat.initiateCall(call, 60)` sets ringing duration. After timeout, the backend auto-cancels and the recipient stops seeing the call.
+
+---
+
+## Initiate (caller side)
+
+```ts
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+async function initiateCall(receiverUid: string, callType: "audio" | "video" = "video") {
+  const call = new CometChat.Call(
+    receiverUid,
+    callType === "video" ? CometChat.CALL_TYPE.VIDEO : CometChat.CALL_TYPE.AUDIO,
+    CometChat.RECEIVER_TYPE.USER,
+  );
+  // Optional: 60-second ring timeout (default 45)
+  const outgoingCall = await CometChat.initiateCall(call, 60);
+  showOutgoingCallScreen(outgoingCall);
+  return outgoingCall;
+}
+```
+
+For **group calls**, change `RECEIVER_TYPE` to `CometChat.RECEIVER_TYPE.GROUP` and use the group GUID. Only group members get the ring.
+
+---
+
+## Listen for events (recipient + caller)
+
+```tsx
+import { useEffect } from "react";
+
+const LISTENER_ID = "app-call-listener";
+
+export function useCometChatCallListener() {
+  useEffect(() => {
+    CometChat.addCallListener(
+      LISTENER_ID,
+      new CometChat.CallListener({
+        onIncomingCallReceived: (call) => {
+          // Show your custom incoming-call UI
+          showIncomingCallScreen(call);
+        },
+        onOutgoingCallAccepted: (acceptedCall) => {
+          // Other party accepted — start the session
+          hideOutgoingCallScreen();
+          startCallSession(acceptedCall.getSessionId());
+        },
+        onOutgoingCallRejected: (rejectedCall) => {
+          hideOutgoingCallScreen();
+          // Optional: toast "User declined"
+        },
+        onIncomingCallCancelled: (cancelledCall) => {
+          // Caller hung up before you accepted
+          hideIncomingCallScreen();
+        },
+        onCallEndedMessageReceived: (endedCall) => {
+          // Other party ended the active session
+          teardownCallUI();
+        },
+      }),
+    );
+    return () => CometChat.removeCallListener(LISTENER_ID);
+  }, []);
+}
+```
+
+Mount this hook at app root (e.g. in `App.tsx`) so listeners survive route changes — the same reasoning as for `<CometChatIncomingCall />`.
+
+---
+
+## Accept (recipient side)
+
+```ts
+async function acceptIncomingCall(call: CometChat.Call) {
+  const accepted = await CometChat.acceptCall(call.getSessionId());
+  hideIncomingCallScreen();
+  startCallSession(accepted.getSessionId());
+}
+```
+
+---
+
+## Reject (recipient side)
+
+```ts
+async function rejectIncomingCall(call: CometChat.Call) {
+  await CometChat.rejectCall(
+    call.getSessionId(),
+    CometChat.CALL_STATUS.REJECTED,
+  );
+  hideIncomingCallScreen();
+}
+```
+
+---
+
+## Cancel outgoing (caller side, before recipient answers)
+
+```ts
+async function cancelOutgoingCall(call: CometChat.Call) {
+  await CometChat.rejectCall(
+    call.getSessionId(),
+    CometChat.CALL_STATUS.CANCELLED,
+  );
+  hideOutgoingCallScreen();
+}
+```
+
+`rejectCall` is the same API for both recipient-rejecting and caller-cancelling — the `CALL_STATUS` enum distinguishes intent.
+
+---
+
+## Start the session (both parties, after accept)
+
+```tsx
+async function startCallSession(sessionId: string) {
+  const container = document.getElementById("call-container")!;
+  const tokenResult = await CometChatCalls.generateToken(sessionId);
+
+  await CometChatCalls.joinSession(
+    tokenResult.token,
+    { sessionType: "VIDEO", layout: "TILE" },
+    container,
+  );
+
+  // Listen for session end (you ended it OR connection lost)
+  const unsub = CometChatCalls.addEventListener("onSessionLeft", () => {
+    endCall(sessionId);
+    unsub();
+  });
+}
+```
+
+The container element must exist in the DOM **before** calling `joinSession`. In React, render a div with `id="call-container"` inside your call screen component, and call `startCallSession` from `useEffect`.
+
+---
+
+## End the call
+
+```ts
+async function endCall(sessionId: string) {
+  CometChatCalls.leaveSession();
+  await CometChat.endCall(sessionId);
+  teardownCallUI();
+}
+```
+
+---
+
+## Custom incoming-call UI
+
+```tsx
+function IncomingCallScreen({ call, onAccept, onReject }: Props) {
+  const caller = call.getCallInitiator();
+  return (
+    <div role="alertdialog" aria-labelledby="incoming-title" className="incoming-call-overlay">
+      <div className="card">
+        <img src={caller.getAvatar()} alt="" />
+        <h3 id="incoming-title">{caller.getName()}</h3>
+        <p>Incoming {call.getType()} call</p>
+        <div className="actions">
+          <button onClick={onReject} className="reject" aria-label="Decline call">Decline</button>
+          <button onClick={onAccept} className="accept" aria-label="Accept call">Accept</button>
+        </div>
+      </div>
+      <audio src="/sounds/ringtone.mp3" autoPlay loop />
+    </div>
+  );
+}
+```
+
+`role="alertdialog"` is the right ARIA role — interrupting modal that requires user action. `<audio autoPlay loop>` plays ringtone; pause it on accept/reject in the parent.
+
+---
+
+## Anti-patterns
+
+1. **`addCallListener` inside the chat route component.** Listener tears down on route change → calls received while user is on home screen are silently dropped.
+2. **Calling `joinSession` before `acceptCall` resolves.** Race — recipient enters WebRTC before backend marks the call as "ongoing." Caller's `onOutgoingCallAccepted` may never fire.
+3. **Forgetting to `removeCallListener` on unmount.** Multiple listeners → events fire N times. Causes "double accept" toasts.
+4. **No `onCallEndedMessageReceived` handler.** The other party ends the call → your UI stays "in-call" → user has to refresh.
+5. **Using `endCall` on the chat SDK without `leaveSession` on the calls SDK.** Camera light stays on; mic stays hot. The flex-shrink trap of calls.
+6. **Mounting `CometChatIncomingCall` (kit) AND custom listener AT THE SAME TIME.** Both fire — you get duplicate incoming-call UIs. Pick one mode per app.
+7. **`CometChat.initiateCall` without timeout when phone-ringing UX is the goal.** Default 45s is fine; if your UX rings longer, override explicitly so the recipient sees consistent UI.
+
+---
+
+## Verification checklist
+
+- [ ] Both SDKs initialized in order (`CometChat.init` → `CometChatCalls.init`)
+- [ ] `addCallListener` registered at app root (survives route changes)
+- [ ] `removeCallListener` on unmount
+- [ ] `acceptCall` precedes `joinSession`
+- [ ] `endCall` (chat) AND `leaveSession` (calls) both fire on hangup
+- [ ] `onCallEndedMessageReceived` tears down UI when other party ends
+- [ ] `onIncomingCallCancelled` tears down UI when caller cancels mid-ring
+- [ ] Custom UI: `role="alertdialog"`, ringtone audio, accept/decline buttons with aria-labels
+- [ ] Smoke: 2 tabs, caller initiates → recipient sees custom incoming UI → accept → both join session → either ends → both UIs dismiss
+
+---
+
+## Pointers
+
+- `cometchat-react-calls/SKILL.md` — architecture + seven hard rules
+- `cometchat-react-calls/references/call-session.md` — Mode 3 (joinSession with no ringing)
+- `cometchat-react-calls/references/in-call-chat.md` — chat panel during a call
+- `cometchat-react-calls/references/recording.md` — recording mid-call
+- Canonical docs: https://www.cometchat.com/docs/calls/javascript/ringing

package/skills/cometchat-react-calls/references/server-web-push-vapid.md

@@ -0,0 +1,241 @@
+# Server-side Web Push VAPID for browser ringing
+
+Browsers don't have a true VoIP-push equivalent (the way iOS PushKit + Android FCM data-messages do). But **Web Push** with VAPID is the closest analog: when a CometChat call event fires, your server sends a push, the browser's Service Worker receives it (even with the tab closed), and posts a notification + plays a ringtone.
+
+**Caveat — set expectations:** Web Push is best-effort. It works reliably when:
+- The user has the tab open OR a recent installed PWA
+- The browser is running (Chrome/Edge/Firefox running but minimized → ✓)
+- Battery saver isn't aggressive
+
+It does NOT work when:
+- The user closed all browser windows
+- iOS Safari except in PWA-only mode (16.4+)
+- The user denied notification permission
+
+For production-grade ringing on the web, recommend customers offer the iOS/Android app for unreliable-recipient scenarios.
+
+**Canonical docs:** https://datatracker.ietf.org/doc/html/rfc8030 (Web Push), https://datatracker.ietf.org/doc/html/rfc8292 (VAPID), https://developer.mozilla.org/en-US/docs/Web/API/Push_API
+
+---
+
+## Hard rules
+
+1. **VAPID keys are mandatory.** Browsers will reject pushes without them since 2018.
+2. **Use the `web-push` library or its equivalents** — implementing VAPID JWT + AES128GCM payload encryption from scratch is error-prone.
+3. **HTTPS required.** Web Push doesn't work on HTTP except localhost.
+4. **Subscriptions expire.** Browsers rotate `endpoint` URLs every ~3 months on Chrome desktop. Implement re-subscription on push failure (410 Gone).
+5. **TTL ≤ 60s for VoIP-style ringing.** A push that arrives 5 minutes late is worse than no push.
+6. **Topic must be set** so a fresh ringing push displaces an older queued one (avoid stacking).
+
+---
+
+## Generate VAPID keys (one-time)
+
+```bash
+npx web-push generate-vapid-keys
+# Output:
+# Public Key:  BNa...   (paste into your client code)
+# Private Key: 3kL...   (server-side env var only)
+```
+
+Or via Node API:
+
+```js
+import webpush from "web-push";
+const keys = webpush.generateVAPIDKeys();
+console.log("VAPID_PUBLIC_KEY=", keys.publicKey);
+console.log("VAPID_PRIVATE_KEY=", keys.privateKey);
+```
+
+---
+
+## Node.js template
+
+```js
+// npm install web-push
+import webpush from "web-push";
+
+webpush.setVapidDetails(
+  `mailto:${process.env.VAPID_CONTACT_EMAIL}`,
+  process.env.VAPID_PUBLIC_KEY,
+  process.env.VAPID_PRIVATE_KEY,
+);
+
+export async function sendWebVoipPush(opts) {
+  const { recipientUid, sessionId, callerName, callerUid, callType } = opts;
+
+  // A user may have multiple subscriptions (laptop + work computer); fan out.
+  const subscriptions = await db.getWebPushSubscriptions(recipientUid);
+
+  const payload = JSON.stringify({
+    type: "incoming_call",
+    sessionId,
+    callerName,
+    callerUid,
+    callType,
+    timestamp: Date.now(),
+  });
+
+  await Promise.allSettled(
+    subscriptions.map(async (sub) => {
+      try {
+        await webpush.sendNotification(sub, payload, {
+          TTL: 30,                                 // Hard Rule 5
+          urgency: "high",                          // urgency header
+          topic: `call-${sessionId}`.slice(0, 32),  // Hard Rule 6 — replaces older with same topic
+        });
+      } catch (err) {
+        if (err.statusCode === 410 || err.statusCode === 404) {
+          // Endpoint dead — purge from DB
+          await db.removeWebPushSubscription(recipientUid, sub.endpoint);
+          return;
+        }
+        console.error("Web push failed", err);
+      }
+    }),
+  );
+}
+```
+
+---
+
+## Python template (pywebpush)
+
+```python
+# pip install pywebpush
+from pywebpush import webpush, WebPushException
+import json, os
+
+VAPID_CLAIMS = {"sub": f"mailto:{os.environ['VAPID_CONTACT_EMAIL']}"}
+VAPID_PRIVATE_KEY = os.environ["VAPID_PRIVATE_KEY"]
+
+def send_web_voip_push(subscription_info: dict, payload: dict):
+    try:
+        webpush(
+            subscription_info=subscription_info,
+            data=json.dumps(payload),
+            vapid_private_key=VAPID_PRIVATE_KEY,
+            vapid_claims=VAPID_CLAIMS,
+            ttl=30,
+            headers={
+                "Urgency": "high",
+                "Topic": f"call-{payload['sessionId']}"[:32],
+            },
+        )
+    except WebPushException as ex:
+        if ex.response and ex.response.status_code in (404, 410):
+            return "expired"
+        raise
+```
+
+---
+
+## Receiver: Service Worker
+
+`/public/sw.js`:
+
+```js
+self.addEventListener("push", (event) => {
+  if (!event.data) return;
+  const data = event.data.json();
+  if (data.type !== "incoming_call") return;
+
+  event.waitUntil((async () => {
+    // 1. Show notification (must happen synchronously in `push` event,
+    //    otherwise browser shows "[App] is sending notifications in the background"
+    //    indicator and may unsubscribe you).
+    await self.registration.showNotification(`Incoming call from ${data.callerName}`, {
+      body: data.callType === "video" ? "Video call" : "Audio call",
+      tag: `call-${data.sessionId}`,
+      icon: "/icons/incoming-call-192.png",
+      badge: "/icons/badge-72.png",
+      requireInteraction: true,        // stays until user acts
+      silent: false,                    // play default ringtone (some OSes ignore this for browser pushes)
+      vibrate: [500, 200, 500],         // mobile haptic
+      actions: [
+        { action: "accept", title: "Accept" },
+        { action: "reject", title: "Decline" },
+      ],
+      data: {
+        sessionId: data.sessionId,
+        callerName: data.callerName,
+        callerUid: data.callerUid,
+        callType: data.callType,
+      },
+    });
+
+    // 2. Wake any open clients so the in-app ringer can fire too
+    const clients = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+    clients.forEach((client) => client.postMessage({ type: "incoming_call", ...data }));
+  })());
+});
+
+self.addEventListener("notificationclick", (event) => {
+  const { sessionId } = event.notification.data;
+  event.notification.close();
+  const url = `/call/${sessionId}?action=${event.action || "open"}`;
+
+  event.waitUntil((async () => {
+    const clients = await self.clients.matchAll({ type: "window" });
+    const existing = clients.find((c) => c.url.includes(`/call/${sessionId}`));
+    if (existing) {
+      return existing.focus();
+    }
+    return self.clients.openWindow(url);
+  })());
+});
+```
+
+Register in `main.tsx`:
+
+```tsx
+useEffect(() => {
+  if (!("serviceWorker" in navigator)) return;
+  navigator.serviceWorker.register("/sw.js")
+    .then(async (reg) => {
+      const sub = await reg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(import.meta.env.VITE_VAPID_PUBLIC_KEY),
+      });
+      await api.registerWebPushSubscription(currentUserUid, sub.toJSON());
+    })
+    .catch((err) => console.warn("SW register / push subscribe failed:", err));
+}, []);
+```
+
+---
+
+## Anti-patterns
+
+1. **Embedding VAPID private key in client code.** Push spam by anyone who views source. Server-only.
+2. **Skipping `requireInteraction: true`.** Notification disappears in 5s on Chrome desktop — call seems to "ring once" then vanish.
+3. **No `tag` on the notification.** Multiple incoming-call notifications stack.
+4. **TTL: 0.** Notification dies the instant the device is offline. Use 30s minimum.
+5. **`silent: true`.** Browser doesn't ring, only shows the visual notification.
+6. **Forgetting to handle `notificationclick`.** User taps notification → nothing happens.
+7. **Implementing Web Push for iOS Safari without checking PWA-only mode.** iOS Safari requires the user to "Add to Home Screen" first — Web Push doesn't work in regular tabs.
+
+---
+
+## Verification checklist
+
+- [ ] VAPID keys generated; private key in env var
+- [ ] HTTPS (or localhost for dev)
+- [ ] Subscription stored server-side keyed to user UID
+- [ ] `topic` set so newer push replaces older
+- [ ] `requireInteraction: true` + `tag` set on notification
+- [ ] 410/404 responses purge dead subscriptions
+- [ ] `notificationclick` opens a call route
+- [ ] Smoke: 2 browsers, recipient minimizes window, caller dials, recipient sees notification + ringtone
+
+---
+
+## Pointers
+
+- `cometchat-react-calls/SKILL.md` — calls architecture
+- `cometchat-react-push/SKILL.md` — chat web push (sister, different payload)
+- `cometchat-ios-calls/references/server-apns-pushkit.md` — iOS sibling
+- `cometchat-android-v5-calls/references/server-fcm-voip.md` — Android sibling
+- Web Push spec (RFC 8030): https://datatracker.ietf.org/doc/html/rfc8030
+- VAPID (RFC 8292): https://datatracker.ietf.org/doc/html/rfc8292
+- web-push npm: https://www.npmjs.com/package/web-push

package/skills/cometchat-react-calls/references/share-invite.md

@@ -0,0 +1,176 @@
+# Share invite on web (React)
+
+Let participants share the call link with others. The kit ships a share-invite button (hidden by default); your app intercepts the click and runs the platform's native share UI.
+
+**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/share-invite
+
+---
+
+## Hard rule: deep-link routing must work BEFORE you ship share-invite
+
+A share button that copies a URL nobody can open is worse than no share button. Verify your app's `/call/:sessionId` route handles all four states:
+
+1. **User logged in, in-app** → join call directly
+2. **User logged in, fresh tab** → restore session, join call
+3. **User logged out** → login, then redirect to call
+4. **User doesn't have account** → signup flow with `?invite=...` query param
+
+Build the deep-link route first, then turn on the share button.
+
+---
+
+## Show the kit's share button
+
+```tsx
+const callSettings = {
+  hideShareInviteButton: false,
+  // ... rest
+};
+```
+
+---
+
+## Handle the click
+
+```tsx
+useEffect(() => {
+  const handler = () => shareCallInvite(sessionId);
+  CometChatCalls.addEventListener("onShareInviteButtonClicked", handler);
+  return () => {
+    CometChatCalls.removeEventListener("onShareInviteButtonClicked", handler);
+  };
+}, [sessionId]);
+```
+
+---
+
+## Native Web Share API + clipboard fallback
+
+```tsx
+async function shareCallInvite(sessionId: string) {
+  const url = `https://yourapp.com/call/${sessionId}`;
+  const shareData = {
+    title: "Join my call",
+    text: "I'm on a call — tap to join.",
+    url,
+  };
+
+  if (navigator.share && navigator.canShare?.(shareData)) {
+    try {
+      await navigator.share(shareData);
+    } catch (err) {
+      // User cancelled — that's fine, no toast needed
+      if ((err as Error).name !== "AbortError") {
+        console.warn("Share failed", err);
+      }
+    }
+    return;
+  }
+
+  // Fallback: clipboard
+  try {
+    await navigator.clipboard.writeText(url);
+    showToast("Link copied to clipboard");
+  } catch {
+    // Clipboard API requires user gesture + secure context (https) — must always have a manual fallback
+    promptManualCopy(url);
+  }
+}
+```
+
+`navigator.share` is iOS Safari + Android Chrome + recent desktop Chrome. `navigator.clipboard.writeText` is everywhere modern but **only works in secure contexts (https)** — localhost is fine; non-https staging hosts will throw.
+
+---
+
+## Custom share dialog (when you want more control)
+
+```tsx
+function ShareDialog({ sessionId, onClose }: Props) {
+  const url = `https://yourapp.com/call/${sessionId}`;
+  return (
+    <dialog open className="share-dialog" role="dialog" aria-label="Share call invite">
+      <button onClick={() => navigator.clipboard.writeText(url)}>Copy link</button>
+      <a href={`mailto:?subject=Join%20my%20call&body=${encodeURIComponent(url)}`}>Email</a>
+      <a href={`sms:?body=${encodeURIComponent(url)}`}>SMS</a>
+      <button onClick={onClose}>Close</button>
+    </dialog>
+  );
+}
+```
+
+`mailto:` opens default email client; `sms:` opens default SMS app on mobile (no-op on most desktops). Both are universal — no provider lock-in.
+
+---
+
+## QR code for in-person sharing
+
+For "share to the person sitting next to you" UX, a QR is faster than a link:
+
+```tsx
+import QRCode from "qrcode.react";
+
+function CallQR({ sessionId }: { sessionId: string }) {
+  const url = `https://yourapp.com/call/${sessionId}`;
+  return (
+    <div>
+      <QRCode value={url} size={192} />
+      <p>{url}</p>
+    </div>
+  );
+}
+```
+
+---
+
+## Anti-patterns
+
+1. **Sharing the raw `sessionId` instead of a deep link.** Recipients can't open it.
+2. **Wiring share before the deep-link route works.** Recipients click → 404.
+3. **`navigator.clipboard.writeText` without a manual-copy fallback.** Fails in non-https contexts (e.g., embedded iframes, dev tunnels).
+4. **Showing "Link copied!" toast even when share was cancelled.** `AbortError` is the user dismissing the share sheet — silent.
+5. **Forgetting `removeEventListener` on unmount.** Listener accumulates → multiple share sheets per click.
+6. **Hard-coding `https://yourapp.com`.** Use `window.location.origin` or `import.meta.env.VITE_APP_URL`.
+
+---
+
+## Server-side: deep links + auth bridge
+
+If invitee isn't logged in, `https://yourapp.com/call/SESSION_ID` should redirect them through login THEN to the call. Pattern:
+
+```ts
+// pages/call/[sessionId].tsx (Next.js example)
+export async function getServerSideProps({ params, req }) {
+  const session = await getSession(req);
+  if (!session) {
+    return {
+      redirect: {
+        destination: `/login?next=/call/${params.sessionId}`,
+        permanent: false,
+      },
+    };
+  }
+  return { props: { sessionId: params.sessionId } };
+}
+```
+
+For invitees without an account, send them to `/signup?invite=SESSION_ID` and store the pending invite in `localStorage` until signup completes.
+
+---
+
+## Verification checklist
+
+- [ ] Deep-link route `/call/:sessionId` works in 4 states (logged in / logged out / no account / fresh tab)
+- [ ] `hideShareInviteButton: false` in CallSettings
+- [ ] `onShareInviteButtonClicked` listener cleaned up on unmount
+- [ ] `navigator.share` used when available; clipboard fallback; manual-copy fallback for non-https
+- [ ] AbortError silenced
+- [ ] App URL not hard-coded — read from env
+- [ ] Smoke: copy link → paste in incognito → can join call
+
+---
+
+## Pointers
+
+- `cometchat-react-calls/SKILL.md` — call architecture
+- `cometchat-react-calls/references/in-call-chat.md` — sister cross-cutting concern
+- Canonical docs: https://www.cometchat.com/docs/calls/javascript/share-invite