@cometchat/skills 4.4.1 → 5.0.0

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

@@ -1,161 +0,0 @@
-# Idle timeout on Angular
-
-Same SDK API as web. Angular-specific delta: NgZone wrap on the timeout event + Angular Material dialog or custom modal for the prompt.
-
-**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/idle-timeout
-**Read first:** `cometchat-react-calls/references/idle-timeout.md` — settings + archetype timeouts + custom prompt pattern.
-
----
-
-## SDK API
-
-The idle timeout is configured on the **`SessionSettings` object** passed to
-`joinSession(callToken, sessionSettings, container)`, NOT on the builder.
-
-- The builder (`CallSettingsBuilder`) has a single `setIdleTimeoutPeriod(ms)` method — there is
-  no `setIdleTimeoutPeriodBeforePrompt` / `setIdleTimeoutPeriodAfterPrompt` on it.
-- The before/after split exists ONLY as `SessionSettings` object fields:
-  `idleTimeoutPeriodBeforePrompt` and `idleTimeoutPeriodAfterPrompt`.
-- There is no `setSessionID()` on the builder — the session is identified by the call token
-  produced via `CometChatCalls.generateToken(sessionId, authToken)`.
-
-```ts
-// 1. token carries the session id
-const { token } = await CometChatCalls.generateToken(sessionId, authToken);
-
-// 2. idle timeout lives on the SessionSettings object
-const sessionSettings = {
-  sessionType: "VIDEO",
-  idleTimeoutPeriodBeforePrompt: 60_000,
-  idleTimeoutPeriodAfterPrompt: 120_000,
-} as const;
-
-// addEventListener returns an unsubscribe fn — capture it (there is no removeEventListener).
-const off = CometChatCalls.addEventListener("onSessionTimedOut", () => {
-  this.zone.run(() => {
-    this.router.navigate(["/"]);
-    this.snackBar.open("Call ended due to inactivity", "Dismiss", { duration: 5000 });
-  });
-});
-
-await CometChatCalls.joinSession(token, sessionSettings, container);
-// later: off();
-```
-
-`NgZone.run` wrap is mandatory — without it, the navigation + snackbar don't fire because the SDK callback is outside Angular's zone.
-
----
-
-## Service-level wiring
-
-```ts
-// services/idle-timeout.service.ts
-import { Injectable, NgZone } from "@angular/core";
-import { Router } from "@angular/router";
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-
-@Injectable({ providedIn: "root" })
-export class IdleTimeoutService {
-  // addEventListener returns the unsubscribe fn — there is no CometChatCalls.removeEventListener.
-  private off?: () => void;
-
-  constructor(
-    private zone: NgZone,
-    private router: Router,
-    private snackBar: MatSnackBar,
-  ) {}
-
-  attachToCallSession() {
-    this.off = CometChatCalls.addEventListener("onSessionTimedOut", () => {
-      this.zone.run(() => {
-        this.router.navigate(["/"]);
-        this.snackBar.open("Call ended due to inactivity", "Dismiss", { duration: 5000 });
-      });
-    });
-  }
-
-  detach() {
-    this.off?.();
-    this.off = undefined;
-  }
-}
-```
-
-Call `attachToCallSession()` from the OngoingCallComponent's `ngOnInit`, `detach()` from `ngOnDestroy`.
-
----
-
-## Custom prompt — Angular Material Dialog
-
-```ts
-import { MatDialog } from "@angular/material/dialog";
-import { Component } from "@angular/core";
-
-@Component({
-  template: `
-    <h2 mat-dialog-title>Still there?</h2>
-    <mat-dialog-content>
-      You're alone in this call. It'll end in 60 seconds.
-    </mat-dialog-content>
-    <mat-dialog-actions>
-      <button mat-button [mat-dialog-close]="'stay'">Stay</button>
-      <button mat-button color="warn" [mat-dialog-close]="'end'">End now</button>
-    </mat-dialog-actions>
-  `,
-})
-export class IdleTimeoutDialogComponent {}
-
-// Use:
-@Component({ /* ... */ })
-export class OngoingCallComponent {
-  constructor(private dialog: MatDialog) {}
-
-  showIdlePrompt() {
-    const ref = this.dialog.open(IdleTimeoutDialogComponent, {
-      disableClose: true,
-      ariaLabel: "Idle timeout warning",
-    });
-    ref.afterClosed().subscribe(result => {
-      if (result === "end") {
-        CometChatCalls.leaveSession();   // v5 canonical (endSession is deprecated)
-      }
-      // 'stay' → reset your custom timer (see Pattern A in web ref)
-    });
-  }
-}
-```
-
-`disableClose: true` prevents the user from dismissing via Esc/backdrop — they must explicitly choose. `ariaLabel` for screen readers.
-
----
-
-## Anti-patterns
-
-Web sister reference rules apply, plus Angular-specific:
-
-1. **No `NgZone.run` wrap on the listener.** Navigation + snackbar fire silently because change detection doesn't trigger.
-2. **`MatDialog` opened from `setTimeout` callback** without zone wrap. Dialog opens but template doesn't render.
-3. **Subscription leaks** — `dialog.afterClosed()` returns an Observable; if you don't unsubscribe (or use `take(1)` / `first()`), it leaks across calls.
-4. **Service NOT provided in `root`.** Lazy-loaded → listener attaches late.
-
----
-
-## Verification checklist
-
-- [ ] `IdleTimeoutService` provided in root
-- [ ] Listener wraps in `NgZone.run`
-- [ ] Service `attachToCallSession()` called from OngoingCall `ngOnInit`
-- [ ] Service `detach()` called from `ngOnDestroy`
-- [ ] Dialog uses `disableClose: true` + `ariaLabel`
-- [ ] `dialog.afterClosed()` subscription doesn't leak (use `first()` or unsubscribe)
-- [ ] Browser smoke: 2 tabs in call, hangup one → other shows snackbar after configured delay
-
----
-
-## Pointers
-
-- `cometchat-react-calls/references/idle-timeout.md` — sister reference
-- `cometchat-angular-calls` SKILL.md
-- `references/ngzone-and-async-callbacks.md` — NgZone primer
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/idle-timeout

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

@@ -1,148 +0,0 @@
-# In-call chat on Angular
-
-Same SDK API as web. Angular wraps panel state in a service + uses Angular Material's `MatSidenav` for the side-drawer chat panel pattern.
-
-**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/in-call-chat
-**Read first:** `cometchat-react-calls/references/in-call-chat.md` — group-as-session architecture, anti-patterns.
-
----
-
-## SDK + service
-
-```ts
-import { Injectable, NgZone } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-@Injectable({ providedIn: "root" })
-export class InCallChatService {
-  readonly open$ = new BehaviorSubject<boolean>(false);
-  readonly unread$ = new BehaviorSubject<number>(0);
-
-  constructor(private zone: NgZone) {
-    CometChatCalls.addEventListener("onChatButtonClicked", () => {
-      this.zone.run(() => this.open$.next(true));
-    });
-  }
-
-  async ensureGroup(sessionId: string): Promise<CometChat.Group> {
-    try {
-      return await CometChat.getGroup(sessionId);
-    } catch {
-      const group = new CometChat.Group(sessionId, `Call ${sessionId}`, CometChat.GROUP_TYPE.PUBLIC);
-      return await CometChat.createGroup(group);
-    }
-  }
-
-  async joinGroup(sessionId: string): Promise<void> {
-    await CometChat.joinGroup(sessionId, CometChat.GROUP_TYPE.PUBLIC, "");
-  }
-
-  trackUnread(sessionId: string): void {
-    const listenerId = `in-call-chat-${sessionId}`;
-    const listener = new CometChat.MessageListener({
-      onTextMessageReceived: (msg: CometChat.TextMessage) => {
-        if (
-          msg.getReceiverType() === CometChat.RECEIVER_TYPE.GROUP &&
-          msg.getReceiverId() === sessionId &&
-          !this.open$.value
-        ) {
-          this.zone.run(() => {
-            const next = this.unread$.value + 1;
-            this.unread$.next(next);
-            CometChatCalls.setChatButtonUnreadCount(next);
-          });
-        }
-      },
-    });
-    CometChat.addMessageListener(listenerId, listener);
-  }
-
-  open(): void {
-    this.open$.next(true);
-    this.unread$.next(0);
-    CometChatCalls.setChatButtonUnreadCount(0);
-  }
-
-  close(): void {
-    this.open$.next(false);
-  }
-}
-```
-
----
-
-## Panel component (MatSidenav)
-
-```ts
-@Component({
-  selector: "app-in-call-chat",
-  template: `
-    <mat-sidenav-container [hasBackdrop]="false">
-      <mat-sidenav
-        #drawer
-        position="end"
-        mode="side"
-        [opened]="open$ | async"
-        (closed)="svc.close()"
-        role="dialog"
-        aria-label="In-call chat"
-      >
-        <ng-container *ngIf="group">
-          <cometchat-message-list [group]="group" [hideReplyInThreadOption]="true"></cometchat-message-list>
-          <cometchat-message-composer [group]="group"></cometchat-message-composer>
-        </ng-container>
-      </mat-sidenav>
-      <mat-sidenav-content>
-        <!-- call surface goes here -->
-        <ng-content></ng-content>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
-  `,
-})
-export class InCallChatComponent implements OnInit {
-  @Input() sessionId!: string;
-  open$ = this.svc.open$;
-  group?: CometChat.Group;
-
-  constructor(public svc: InCallChatService) {}
-
-  async ngOnInit() {
-    this.group = await this.svc.ensureGroup(this.sessionId);
-    this.svc.trackUnread(this.sessionId);
-  }
-}
-```
-
-`mode="side"` makes the drawer slide out without an overlay backdrop — call view stays visible. `[hasBackdrop]="false"` doubles down.
-
----
-
-## Anti-patterns
-
-Web sister rules apply, plus Angular-specific:
-
-1. **No `NgZone.run` wrap on `onChatButtonClicked`.** Drawer doesn't open in OnPush components.
-2. **`MatSidenav` `mode="over"`.** Backdrop blocks the call. Use `mode="side"`.
-3. **Service NOT in `root`.** Lazy module → button events miss.
-
----
-
-## Verification checklist
-
-- [ ] `InCallChatService` provided in root
-- [ ] `NgZone.run` wraps the chat-button event
-- [ ] `MatSidenav` uses `mode="side"` + `hasBackdrop="false"`
-- [ ] Group resolved on `ngOnInit`
-- [ ] Unread badge updates via service, clears on open
-- [ ] Browser smoke: 2 tabs, chat works, unread badge increments
-
----
-
-## Pointers
-
-- `cometchat-react-calls/references/in-call-chat.md` — sister web reference
-- `cometchat-angular-calls` SKILL.md
-- `references/ngzone-and-async-callbacks.md`
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/in-call-chat

package/skills/cometchat-angular-calls/references/lazy-loading-pitfalls.md

@@ -1,205 +0,0 @@
-# Lazy loading + calls in Angular — pitfalls
-
-Calls have a tighter relationship with bootstrap than chat does. Lazy-loading the calls module breaks several invariants.
-
----
-
-## The core problem
-
-`APP_INITIALIZER` runs at app bootstrap, before any router activates. The Calls SDK init must complete BEFORE incoming calls can fire — otherwise the listener doesn't exist when the first call rings.
-
-If you lazy-load the calls module:
-
-```ts
-// app-routing.module.ts
-{ path: "calls", loadChildren: () => import("./calls/calls.module").then(m => m.CallsModule) }
-```
-
-Then `CallInitService` (which lives in `CallsModule`) doesn't exist at bootstrap. APP_INITIALIZER can't reference it. Two failure modes:
-
-1. **Init never runs** — until the user navigates to `/calls`, the SDK is uninitialized. Incoming calls miss.
-2. **Race condition** — user navigates to `/calls`, the lazy module loads, init runs, but a call had been incoming during the navigation gap. That call is lost.
-
----
-
-## Fix: split the service from the component
-
-Keep `CallInitService` in `AppModule` (eager). Keep the call UI components in `CallsModule` (lazy).
-
-```ts
-// app.module.ts (eager)
-@NgModule({
-  providers: [
-    CallInitService,                              // EAGER — service is at bootstrap
-    {
-      provide: APP_INITIALIZER,
-      useFactory: (svc: CallInitService) => () => svc.init(),
-      deps: [CallInitService],
-      multi: true,
-    },
-  ],
-})
-export class AppModule {}
-```
-
-```ts
-// calls/calls.module.ts (lazy)
-@NgModule({
-  declarations: [
-    OngoingCallComponent,
-    CallLogsComponent,
-    CallButtonComponent,
-  ],
-  imports: [
-    RouterModule.forChild([
-      { path: "ongoing/:id", component: OngoingCallComponent, canDeactivate: [CallDeactivateGuard] },
-      { path: "logs", component: CallLogsComponent },
-    ]),
-  ],
-})
-export class CallsModule {}
-```
-
-The components reference `CallInitService` via DI; Angular finds it from the parent injector (AppModule).
-
----
-
-## Pitfall 2: `<cometchat-incoming-call>` in a lazy module
-
-Incoming calls must ring on every screen — not just `/calls`. Mounting `<cometchat-incoming-call>` inside `CallsModule`'s components means:
-
-- User on `/dashboard` → no incoming-call listener → calls miss
-- User navigates to `/calls/logs` → listener mounts → calls now ring
-- User navigates back to `/dashboard` → listener unmounts → calls miss again
-
-**Fix:** mount `<cometchat-incoming-call>` in `AppComponent`'s template (the root of the application, NOT in any feature module):
-
-```html
-<!-- app.component.html -->
-<cometchat-incoming-call></cometchat-incoming-call>
-<router-outlet></router-outlet>
-```
-
-`AppModule` must import enough of `@cometchat/chat-uikit-angular` to render this selector — usually `CometChatUIKitModule.forRoot({...})`. Schemas option `CUSTOM_ELEMENTS_SCHEMA` works too.
-
----
-
-## Pitfall 3: standalone components + lazy-loaded calls
-
-Angular 14+ standalone components don't have a parent `NgModule`. The DI tree is different — APP_INITIALIZER lives at the bootstrap providers level:
-
-```ts
-// main.ts
-bootstrapApplication(AppComponent, {
-  providers: [
-    CallInitService,                           // root-provided — visible everywhere
-    {
-      provide: APP_INITIALIZER,
-      useFactory: (svc: CallInitService) => () => svc.init(),
-      deps: [CallInitService],
-      multi: true,
-    },
-    provideRouter([
-      // Lazy-loaded standalone routes
-      { path: "calls/ongoing/:id", loadComponent: () => import("./calls/ongoing-call.component").then(m => m.OngoingCallComponent) },
-    ]),
-  ],
-});
-```
-
-The lazy `loadComponent` works fine because `CallInitService` is at the root.
-
-`<cometchat-incoming-call>` is a standalone component too:
-
-```ts
-// app.component.ts
-import { CometChatIncomingCallComponent } from "@cometchat/chat-uikit-angular";
-
-@Component({
-  standalone: true,
-  selector: "app-root",
-  imports: [RouterOutlet, CometChatIncomingCallComponent],
-  template: `
-    <cometchat-incoming-call></cometchat-incoming-call>
-    <router-outlet></router-outlet>
-  `,
-})
-export class AppComponent {}
-```
-
-(Verify the export name in your installed `@cometchat/chat-uikit-angular` version — may differ between minor releases.)
-
----
-
-## Pitfall 4: SSR (Angular Universal)
-
-The Calls SDK uses browser-only APIs (`getUserMedia`, `RTCPeerConnection`). If your app uses Angular Universal, the calls service must NOT initialize on the server:
-
-```ts
-import { isPlatformBrowser } from "@angular/common";
-import { Inject, PLATFORM_ID } from "@angular/core";
-
-@Injectable({ providedIn: "root" })
-export class CallInitService {
-  constructor(@Inject(PLATFORM_ID) private platformId: object) {}
-
-  async init(): Promise<void> {
-    if (!isPlatformBrowser(this.platformId)) return;        // skip on server
-    // ... actual init
-  }
-}
-```
-
-Without this guard, the SSR build crashes with `ReferenceError: window is not defined` at boot.
-
----
-
-## Pitfall 5: Multiple `APP_INITIALIZER`s
-
-If your project already uses `APP_INITIALIZER` for chat init, calls init goes alongside — not as a replacement:
-
-```ts
-providers: [
-  ChatInitService,
-  CallInitService,
-  {
-    provide: APP_INITIALIZER,
-    useFactory: (chat: ChatInitService) => () => chat.init(),
-    deps: [ChatInitService],
-    multi: true,                               // ← multi: true is critical
-  },
-  {
-    provide: APP_INITIALIZER,
-    useFactory: (calls: CallInitService) => () => calls.init(),
-    deps: [CallInitService],
-    multi: true,
-  },
-]
-```
-
-Both register; both run before bootstrap. They run in registration order — chat first, then calls (matches rule 1.1's chat-init-before-calls-init).
-
----
-
-## Pitfall 6: Forgetting the route deactivate guard for ongoing calls
-
-Without `CanDeactivate`, the user can route away mid-call and the call screen unmounts but the SDK session keeps running. Camera light stays on (rule 1.5 violation).
-
-```ts
-// calls-routing.module.ts
-{ path: "ongoing/:id", component: OngoingCallComponent, canDeactivate: [CallDeactivateGuard] }
-```
-
-The guard is in `references/custom-ui.md`.
-
----
-
-## Summary
-
-| Place | What goes here |
-|---|---|
-| `AppModule` (eager) | `CallInitService`, `APP_INITIALIZER`, `<cometchat-incoming-call>` |
-| `CallsModule` (lazy) | UI components (OngoingCall, CallLogs, CallButton), feature routes |
-| App root template | `<cometchat-incoming-call>` mounted above `<router-outlet>` |
-| Routes | `canDeactivate` guard on the ongoing-call route |
-| SSR | `isPlatformBrowser` check inside init service |

package/skills/cometchat-angular-calls/references/migration-v4-to-v5.md

@@ -1,53 +0,0 @@
-# Calls SDK v4 → v5 migration (Angular)
-
-Angular ships the same `@cometchat/calls-sdk-javascript` as React/Vue, so the migration steps are identical. Angular-specific deltas: NgZone wrapping for the new event listeners.
-
-**Read first:** `cometchat-react-calls/references/migration-v4-to-v5.md` — full step-by-step (init, login, settings, events, methods).
-
----
-
-## Step 1 — Bump the package
-
-```bash
-npm install @cometchat/calls-sdk-javascript@5
-```
-
----
-
-## Angular-specific delta: NgZone for new event listeners
-
-When migrating from `OngoingCallListener` to `addEventListener`, Angular needs `NgZone.run` to update OnPush components — listeners fire outside Angular's zone:
-
-```ts
-@Injectable({ providedIn: "root" })
-export class CallEventService {
-  constructor(private zone: NgZone) {
-    // v4 — listener was inside CometChatCalls.OngoingCallListener; if your
-    // current code already wraps callbacks with NgZone.run, keep that.
-    // v5 — addEventListener fires outside zone:
-    CometChatCalls.addEventListener("onSessionLeft", () => {
-      this.zone.run(() => this.onSessionLeft$.next());
-    });
-    CometChatCalls.addEventListener("onParticipantJoined", (p) => {
-      this.zone.run(() => this.participantJoined$.next(p));
-    });
-  }
-}
-```
-
-If you skip the `NgZone.run` wrap, OnPush components don't re-render when call state changes.
-
----
-
-## Verification checklist
-
-- [ ] All v5 event listeners wrapped in `NgZone.run`
-- [ ] All sister checks from the canonical migration guide
-
----
-
-## Pointers
-
-- Canonical migration: `cometchat-react-calls/references/migration-v4-to-v5.md`
-- Canonical Web Push event handling: `references/ngzone-and-async-callbacks.md`
-- https://www.cometchat.com/docs/calls/javascript/migration-guide-v5