@cometchat/skills 4.4.1 → 5.0.0

package/skills/cometchat-angular-components/SKILL.md

@@ -1,235 +0,0 @@
----
-name: cometchat-angular-components
-description: "Component catalog for the CometChat Angular UI Kit v5 (@cometchat/chat-uikit-angular@5) — standalone <cometchat-*> selectors, verified @Input bindings, @Output events, @Input callback props, and template slot views. Always loaded before writing any <cometchat-*> HTML. Never invent selectors or bindings — look them up here."
-license: "MIT"
-compatibility: "Angular >=17 <22; @cometchat/chat-uikit-angular ^5.0"
-metadata:
-  author: "CometChat"
-  version: "4.0.0"
-  tags: "cometchat angular components catalog selectors inputs outputs standalone v5"
----
-
-> **Ground truth:** `@cometchat/chat-uikit-angular@5.x` component catalog (installed package types) + `docs/ui-kit/angular`. **Official docs:** https://www.cometchat.com/docs/ui-kit/angular/overview · **Docs MCP:** `claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp` (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.
-
-# CometChat Angular UI Kit v5 — Component Catalog
-
-Authoritative reference for every component you'll actually use. Verified against `@cometchat/chat-uikit-angular@5.0.2` bundled types. **Never invent a selector, `@Input`, or `@Output` — look it up here** (or grep `node_modules/@cometchat/chat-uikit-angular/types/cometchat-chat-uikit-angular.d.ts`).
-
-Read `<cometchat-angular-core>` first.
-
-## How v5 components work
-
-- **Standalone.** Import the component **class** (with the `Component` suffix) into a standalone component's `imports: []`. No NgModule, no `CUSTOM_ELEMENTS_SCHEMA`.
-- **Selector vs class:** the HTML selector has no suffix (`<cometchat-conversations>`); the class does (`CometChatConversationsComponent`).
-- **No composites.** There is no `<cometchat-conversations-with-messages>` / `Contacts` in v5. Build layouts by composing components (see `<cometchat-angular-placement>`).
-
-### Three binding mechanisms — get these right
-
-| Mechanism | Syntax | Example |
-|---|---|---|
-| **`@Input`** (data + config + hide flags) | `[input]="value"` | `[user]="selectedUser"` |
-| **`@Output`** (EventEmitter) | `(output)="handler($event)"` | `(itemClick)="onPick($event)"` |
-| **`@Input` callback prop** (a function passed as input) | `[onCallback]="fnRef"` | `[onAccept]="handleAccept"` |
-| **Slot view** (`@Input` of type `TemplateRef`/component) | `[slotView]="tmplRef"` | `[leadingView]="myTmpl"` |
-
-> **The `@Output` vs `@Input`-callback distinction is the #1 Angular-v5 trap.** Most components use `@Output` EventEmitters (`(itemClick)`, `(error)`, `(callEnded)`). But the **call** components also expose **`@Input` callback props** (`onAccept`, `onDecline`, `onError`, `onVoiceCallClick`, …). And `<cometchat-incoming-call>` exposes **both** (`[onAccept]` input AND `(callAccepted)` output). Bind the one that exists — the tables below mark which is which.
-
-```typescript
-import { Component } from "@angular/core";
-import { CometChatConversationsComponent } from "@cometchat/chat-uikit-angular";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-@Component({
-  selector: "app-conversations",
-  standalone: true,
-  imports: [CometChatConversationsComponent],
-  template: `
-    <cometchat-conversations
-      [showSearchBar]="true"
-      (itemClick)="onConversation($event)"
-      (error)="onError($event)">
-    </cometchat-conversations>`,
-})
-export class AppConversationsComponent {
-  onConversation(conversation: CometChat.Conversation) { /* … */ }
-  onError(e: CometChat.CometChatException) { /* … */ }
-}
-```
-
----
-
-## List components
-
-### CometChatConversationsComponent
-Selector: `<cometchat-conversations>`
-
-The conversation list. Drives the left pane of a chat layout.
-
-- **Key `@Input`:** `conversationsRequestBuilder`, `activeConversation`, `selectionMode`, `options`, `showSearchBar`, `showScrollbar`, `lastMessageDateTimeFormat`, `textFormatters`, `disableSoundForMessages`, `customSoundForMessages`
-- **Hide flags:** `hideReceipts`, `hideError`, `hideDeleteConversation`, `hideUserStatus`, `hideGroupType`, `disableDefaultContextMenu`
-- **Slot views (`@Input`):** `headerView`, `menuView`, `loadingView`, `emptyView`, `errorView`, `searchView`, `itemView`, `leadingView`, `titleView`, `subtitleView`, `trailingView`
-- **`@Output`:** `itemClick`, `select`, `error`, `searchBarClick`, `contextMenuOpen`, `contextMenuClose`, `scrollToTop`, `scrollToBottom`, `selectionChange`
-
-### CometChatUsersComponent
-Selector: `<cometchat-users>`
-
-- **`@Input`:** `usersRequestBuilder`, `searchRequestBuilder`, `searchKeyword`, `activeUser`, `selectionMode`, `options`, `showSectionHeader`, `sectionHeaderKey`, `showScrollbar`, `showSelectedUsersPreview`
-- **Hide flags:** `hideSearch`, `hideError`, `hideUserStatus`, `disableLoadingState`, `disableDefaultContextMenu`
-- **Slots:** `headerView`, `menuView`, `loadingView`, `emptyView`, `errorView`, `itemView`, `leadingView`, `titleView`, `subtitleView`, `trailingView`
-- **`@Output`:** `itemClick`, `select`, `error`, `empty`, `selectionChange`
-
-### CometChatGroupsComponent
-Selector: `<cometchat-groups>`
-
-- **`@Input`:** `groupsRequestBuilder`, `searchRequestBuilder`, `activeGroup`, `selectionMode`, `options`, `showScrollbar`
-- **Hide flags:** `hideSearch`, `hideError`, `hideGroupType`, `disableDefaultContextMenu`
-- **Slots:** `headerView`, `menuView`, `loadingView`, `emptyView`, `errorView`, `itemView`, `leadingView`, `titleView`, `subtitleView`, `trailingView`
-- **`@Output`:** `itemClick`, `select`, `error`, `selectionChange`
-
-### CometChatGroupMembersComponent
-Selector: `<cometchat-group-members>`
-
-- **`@Input`:** `group` (required), `groupMemberRequestBuilder`, `searchRequestBuilder`, `searchKeyword`, `selectionMode`, `options`, `showScrollbar`
-- **Hide flags:** `hideSearch`, `hideError`, `hideUserStatus`, `hideKickMemberOption`, `hideBanMemberOption`, `hideScopeChangeOption`, `disableLoadingState`, `disableDefaultContextMenu`
-- **Slots:** `headerView`, `menuView`, `loadingView`, `errorView`, `emptyView`, `itemView`, `leadingView`, `titleView`, `subtitleView`, `trailingView`
-- **`@Output`:** `error`, `itemClick`, `selectionChange`, `empty`
-
----
-
-## Messaging components
-
-### CometChatMessageHeaderComponent
-Selector: `<cometchat-message-header>`
-
-Header bar above the message list. Pass **`user` OR `group`** (mutually exclusive).
-
-- **`@Input`:** `user`, `group`, `callSettingsBuilder`, `lastActiveAtDateTimeFormat`, `summaryGenerationMessageCount`, `enableAutoSummaryGeneration`
-- **Show/hide:** `hideUserStatus`, `showBackButton`, `hideVoiceCallButton`, `hideVideoCallButton`, `showSearchOption`, `showConversationSummaryButton`
-- **Slots:** `headerView`, `itemView`, `leadingView`, `titleView`, `subtitleView`, `trailingView`, `backButtonView`, `auxiliaryButtonView`
-- **`@Output`:** `backClick`, `itemClick`, `searchClick`, `conversationSummaryClick`, `error`, `voiceCallClick`, `videoCallClick`
-
-### CometChatMessageListComponent
-Selector: `<cometchat-message-list>`
-
-The message stream. Pass **`user` OR `group`** (and `parentMessageId` for threads).
-
-- **Key `@Input`:** `user`, `group`, `parentMessageId`, `messagesRequestBuilder`, `reactionsRequestBuilder`, `textFormatters`, `messageAlignment`, `scrollToBottomOnNewMessages`, `goToMessageId`, `quickOptionsCount`, `additionalOptions`, `optionsOverride`
-- **AI/replies:** `showConversationStarters`, `showSmartReplies`, `smartRepliesKeywords`, `smartRepliesDelayDuration`
-- **Hide flags (many):** `hideReceipts`, `hideDateSeparator`, `hideStickyDate`, `hideAvatar`, `hideGroupActionMessages`, `hideError`, `hideReplyInThreadOption`, `hideTranslateMessageOption`, `hideEditMessageOption`, `hideDeleteMessageOption`, `hideReactionOption`, `hideMessagePrivatelyOption`, `hideCopyMessageOption`, `hideMessageInfoOption`, `hideReplyOption`, `hideTimestamp`, `hideModerationView`, `hideFlagMessageOption`, `showMarkAsUnreadOption`, `startFromUnreadMessages`, `disableInteraction`
-- **Slots:** `headerView`, `footerView`, `emptyView`, `errorView`, `loadingView`, `bubbleFooterView`, `appendView`
-- **`@Output`:** `error`, `threadRepliesClick`, `reactionClick`, `reactionListItemClick`, `smartReplyClick`, `conversationStarterClick`, `messagePrivatelyClick`, `replyClick`
-
-### CometChatMessageComposerComponent
-Selector: `<cometchat-message-composer>`
-
-The input box. Pass **`user` OR `group`** (and `parentMessageId` for threads).
-
-- **Key `@Input`:** `user`, `group`, `parentMessageId`, `placeholderText`, `initialComposerText`, `text`, `maxHeight`, `enterKeyBehavior`, `attachmentOptions`, `maxAttachments`, `allowedFileTypes`, `maxFileSize`, `layout`, `textFormatters`, `messageToEdit`, `messageToReply`, `mentionsUsersRequestBuilder`, `mentionsGroupMembersRequestBuilder`
-- **Hide flags:** `hideAttachmentButton`, `hideImageAttachmentOption`, `hideVideoAttachmentOption`, `hideAudioAttachmentOption`, `hideFileAttachmentOption`, `hidePollsOption`, `hideCollaborativeDocumentOption`, `hideCollaborativeWhiteboardOption`, `hideEmojiKeyboardButton`, `hideVoiceRecordingButton`, `hideStickersButton`, `hideLiveReaction`, `hideSendButton`, `hideRichTextToolbar`, `disableMentions`, `disableMentionAll`, `disableTypingEvents`, `enableRichText`
-- **Slots:** `headerView`, `footerView`, `sendButtonView`, `auxiliaryButtonView`, `secondaryButtonView`, `attachmentIconView`, `voiceRecordingIconView`, `emojiIconView`, `errorView`
-- **`@Output`:** `textChange`, `sendButtonClick`, `error`, `closePreview`, `attachmentAdded`, `attachmentRemoved`, `mentionSelected`
-
-### CometChatMessageInformationComponent
-Selector: `<cometchat-message-information>`
-
-- **`@Input`:** `message`, `dateTimeFormat`, `textFormatters`, `showScrollbar` · **`@Output`:** `closeClick`
-
-### Threads — `<cometchat-thread-header>` / `<cometchat-thread-view>`
-- `<cometchat-thread-header>`: `@Input` `parentMessage`, `replyCount` · `@Output` `closeClick`, `backClick`
-- `<cometchat-thread-view>`: `@Input` `mode`, `replyCount`, `unreadReplyCount`, `parentMessage`, `announceOnOpen` · `@Output` `threadClick`, `closeClick`
-- For a thread pane, render `<cometchat-message-list>` + `<cometchat-message-composer>` with the same `[parentMessageId]`.
-
-### CometChatReactionsComponent
-Selector: `<cometchat-reactions>`
-
-- **`@Input`:** `message`, `alignment`, `reactionsRequestBuilder`, `hoverDebounceTime` · **`@Output`:** `reactionClick`, `reactionListItemClick`
-
-### CometChatSearchComponent
-Selector: `<cometchat-search>`
-
-Unified conversation + message search.
-- **Key `@Input`:** `searchIn`, `searchFilters`, `initialSearchFilter`, `defaultSearchText`, `uid`, `guid`, `conversationsRequestBuilder`, `messagesRequestBuilder`, `hideBackButton` (+ per-result slot views)
-- **`@Output`:** `backClick`, `conversationClick`, `messageClick`, `searchError`
-
----
-
-## Call components
-
-> **Binding nuance:** call components use **`@Input` callback props** (`onAccept`, `onDecline`, `onError`, `onVoiceCallClick`, …) AND some `@Output` EventEmitters. Bind the form that exists per the tables. `<cometchat-incoming-call>` exposes both — prefer the `@Input` callbacks for accept/decline (they carry the kit's call handling) and use the `@Output`s for observing.
-
-### CometChatCallButtonsComponent
-Selector: `<cometchat-call-buttons>`
-
-Voice/video buttons for a `user` or `group`. Drop into a header or contact row.
-- **`@Input`:** `user`, `group`, `callSettingsBuilder`, `hideVoiceCallButton`, `hideVideoCallButton`, `hideOverlays`, `outgoingCallDisableSoundForCalls`, `outgoingCallCustomSoundForCalls`
-- **`@Input` callbacks:** `onVoiceCallClick`, `onVideoCallClick`, `onError`
-- **Slots:** `voiceCallButtonView`, `videoCallButtonView`
-- **`@Output`:** `error`
-
-### CometChatIncomingCallComponent
-Selector: `<cometchat-incoming-call>`
-
-Incoming-call banner/overlay. Mount app-wide (see calls skill).
-- **`@Input`:** `call`, `disableSoundForCalls`, `customSoundForCalls`
-- **`@Input` callbacks:** `onAccept`, `onDecline`, `onError`
-- **Slots:** `itemView`, `titleView`, `subtitleView`, `leadingView`, `trailingView`, `acceptButtonView`, `declineButtonView`
-- **`@Output`:** `callAccepted`, `callDeclined`, `error`
-
-### CometChatOutgoingCallComponent
-Selector: `<cometchat-outgoing-call>`
-
-- **`@Input`:** `call`, `disableSoundForCalls`, `customSoundForCalls` · **`@Input` callback:** `onError` · **Slots:** `titleView`, `subtitleView`, `avatarView`, `cancelButtonView` · **`@Output`:** `callCanceled`, `error`
-
-### CometChatOngoingCallComponent
-Selector: `<cometchat-ongoing-call>`
-
-The active WebRTC call surface.
-- **`@Input`:** `sessionID`, `callSettingsBuilder`, `callWorkflow`, `isAudioOnly` · **`@Input` callback:** `onError` · **Slot:** `callScreenView` · **`@Output`:** `callEnded`, `error`
-
-### CometChatCallLogsComponent
-Selector: `<cometchat-call-logs>`
-
-- **`@Input`:** `activeCall`, `callLogRequestBuilder`, `callSettingsBuilder`, `callInitiatedDateTimeFormat`, `showScrollbar` · **`@Input` callback:** `onError` · **Slots:** `menuView`, `itemView`, `leadingView`, `titleView`, `subtitleView`, `trailingView`, `loadingView`, `emptyView`, `errorView` · **`@Output`:** `itemClick`, `callButtonClicked`
-
----
-
-## AI components
-
-### CometChatConversationStarterComponent
-`<cometchat-conversation-starter>` — `@Input` `user`, `group` · `@Output` `starterClick`
-
-### CometChatConversationSummaryComponent
-`<cometchat-conversation-summary>` — `@Input` `getConversationSummary`, `closeCallback`
-
-### CometChatSmartRepliesComponent
-`<cometchat-smart-replies>` — smart-reply chips
-
-### CometChatAIAssistantChat
-`<cometchat-ai-assistant-chat>` (+ `CometChatAIAssistantChatHistory` / `CometChatAIAssistantMessageBubble`) — AI assistant chat surfaces.
-
-AI views are usually surfaced through `<cometchat-message-list>`'s `showSmartReplies` / `showConversationStarters` inputs and the header's summary button — see the `cometchat-angular-features` skill.
-
----
-
-## Other exported components (selectors)
-
-Building blocks + bubbles + dialogs you rarely instantiate directly (the list/message components compose them), but they're exported and available: `<cometchat-avatar>`, `<cometchat-button>`, `<cometchat-list-item>`, `<cometchat-date>`, `<cometchat-search-bar>`, `<cometchat-emoji-keyboard>`, `<cometchat-stickers-keyboard>`, `<cometchat-media-recorder>`, `<cometchat-reaction-list>`, `<cometchat-reaction-info>`, `<cometchat-create-poll>`, `<cometchat-fullscreen-viewer>`, `<cometchat-confirm-dialog>`, `<cometchat-flag-message-dialog>`, `<cometchat-change-scope>`, `<cometchat-context-menu>`, `<cometchat-popover>`, `<cometchat-toast>`, `<cometchat-typing-indicator>`, and the bubble set (`<cometchat-text-bubble>`, `-image-bubble`, `-video-bubble`, `-audio-bubble`, `-file-bubble`, `-call-bubble`, `-poll-bubble`, `-sticker-bubble`, `-collaborative-document-bubble`, `-collaborative-whiteboard-bubble`, `-action-bubble`, `-delete-bubble`, `-message-bubble`).
-
-To confirm any of their bindings, grep the bundled `.d.ts` for `ɵɵComponentDeclaration<<Class>,` — the input/output names are in the type literal.
-
----
-
-## Anti-patterns
-
-1. **Don't invent bindings.** If a prop isn't in this catalog (or the `.d.ts`), it doesn't exist. v4 prop names frequently differ from v5.
-2. **Don't bind a call `@Input` callback as an `@Output`** (or vice-versa). `[onAccept]="fn"` (input) vs `(callAccepted)="fn($event)"` (output) — use the one listed.
-3. **Don't reach for a composite** (`<cometchat-conversations-with-messages>`) — removed in v5. Compose manually.
-4. **Don't pass both `[user]` and `[group]`** to header/list/composer — they're mutually exclusive; pass exactly one.
-5. **Don't add `CUSTOM_ELEMENTS_SCHEMA`** — v5 components are real Angular components; importing the class is enough.
-6. **Don't forget to import the component class** into the standalone component's `imports: []` — otherwise the selector renders as an unknown element.
-
-## Pointers
-- `<cometchat-angular-core>` — setup, init, login
-- `<cometchat-angular-placement>` — composing these into routes/modals/drawers
-- `<cometchat-angular-customization>` — slot templates, formatters, options overrides
-- `<cometchat-angular-calls>` — full call flow + incoming-call mounting

package/skills/cometchat-angular-core/SKILL.md

@@ -1,386 +0,0 @@
----
-name: cometchat-angular-core
-description: "Foundational rules for CometChat Angular UI Kit v5 (@cometchat/chat-uikit-angular@5) — standalone-component setup, UIKitSettingsBuilder init, Promise-based login (bare uid string), loggedInUser$ observable, environment config, CSS-variable theming, and the anti-patterns that break real Angular apps. Read this first."
-license: "MIT"
-compatibility: "Angular >=17.0.0 <22.0.0 (standalone APIs); @cometchat/chat-uikit-angular ^5.0 (5.0.3 verified — file-based initFromSettings GA); @cometchat/chat-sdk-javascript ^4.1.11; @cometchat/calls-sdk-javascript ^5.0 (optional peer — calls only); dompurify ^3"
-metadata:
-  author: "CometChat"
-  version: "4.0.0"
-  tags: "cometchat angular typescript core init login standalone uikit environment provider v5"
----
-
-## Purpose
-
-Foundational skill for every CometChat **Angular UI Kit v5** (`@cometchat/chat-uikit-angular@5`) integration. It teaches HOW CometChat works in Angular v5 — initialization order, the `UIKitSettingsBuilder` pattern, login, environment config, **standalone-component** wiring, and the anti-patterns that break real apps.
-
-**Angular UI Kit v5 is standalone-component-based and requires Angular 17–21.** This is a hard requirement — the package's peer range is `@angular/core` / `@angular/common` `>=17.0.0 <22.0.0`. Projects on older Angular must upgrade before using UI Kit v5.
-
-**Read this skill first, before any placement, components, or patterns skill.**
-
-Ground truth: `@cometchat/chat-uikit-angular@5.0.3` kit source (`projects/cometchat-uikit/src/lib`) + `docs/ui-kit/angular`. **Official docs:** https://www.cometchat.com/docs/ui-kit/angular/overview · **Docs MCP:** `claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp` (or fetch the URL directly without MCP). Verify any non-obvious symbol against the installed package types before relying on it.
-
----
-
-## 2. Install
-
-```bash
-npm install @cometchat/chat-uikit-angular@^5
-# Calls features only — also install the calls SDK peer:
-npm install @cometchat/calls-sdk-javascript@^5
-```
-
-> ⚠️ **Angular 22 is NOT supported — pin the CLI to 21 when scaffolding (verified — real `npm install` ERESOLVE).** The kit's peer range is `@angular/core`/`@angular/common` `>=17.0.0 <22.0.0`. `npx @angular/cli@latest new …` now installs Angular **22**, so `npm install @cometchat/chat-uikit-angular@^5` then hard-fails with `ERESOLVE … peer @angular/common@">=17.0.0 <22.0.0"`. For a fresh project scaffold with a supported major: `npx -y @angular/cli@21 new <app> …` (Angular 17–21 all work). Existing projects on 22 must stay on the prior major until the kit widens its range.
-
-> ⚠️ **`ng build` (production) fails the default bundle budget — raise it.** The kit's initial bundle is ~3.78 MB; Angular's default production `budgets` cap `initial` at 1 MB `maximumError`, so the literal `ng build` exits non-zero with `bundle initial exceeded maximum budget`. In `angular.json` raise (or remove) the `initial` budget — e.g. set `maximumError` to `5mb` — or build with `--configuration development` while iterating. This is a guaranteed failure otherwise; it is not a problem with your code.
-
-The chat SDK (`@cometchat/chat-sdk-javascript@^4.1.8`), `dompurify@^3`, and (for calls only) the calls SDK are peer deps. `@cometchat/calls-sdk-javascript` is an **optional** peer — npm won't auto-install it; add it yourself when you need calling. There is **no** `@cometchat/uikit-shared` / `-elements` / `-resources` in v5 — do not install or import them.
-
-### Stylesheet (mandatory — layout + tokens break without it)
-
-Add the kit's CSS-variable stylesheet via `angular.json` → `...build.options.styles` (**use this form** — it's the one that builds):
-
-```json
-"styles": [
-  "src/styles.css",
-  "node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css"
-]
-```
-
-> ⚠️ **Do NOT use the `@import` package-specifier form on Angular 17+** (the default `@angular/build` esbuild builder). `@import '@cometchat/chat-uikit-angular/styles/css-variables.css';` fails the build — `Could not resolve … the path "./styles/css-variables.css" is not exported by package` — because the package `exports` map only exposes `.` and `./package.json`. The `angular.json` `styles` array above works because the full `node_modules/...` path bypasses the exports map. (Verified — real `ng build`.)
-
-### Assets (mandatory — icons break without it)
-
-`angular.json` → `projects.<app>.architect.build.options.assets`:
-
-```json
-{
-  "glob": "**/*",
-  "input": "node_modules/@cometchat/chat-uikit-angular/src/lib/assets",
-  "output": "assets"
-}
-```
-
-The kit ships its SVG icons under `src/lib/assets` in the published package — map that to `output: assets`. Missing this = broken icons throughout the kit. It's the most commonly missed step.
-
----
-
-## 3. The init → login → render order
-
-CometChat Angular has exactly one valid lifecycle:
-
-```
-CometChatUIKit.init(UIKitSettings)  →  CometChatUIKit.login(uid)  →  render <cometchat-*> components
-```
-
-Both `init()` and `login()` return **Promises**. Breaking this order produces a blank component, a "CometChat is not initialized" console error, or a hung login.
-
-### File-based init with `cometchat-settings.json` (recommended where available)
-
-> **Version requirement (ENG-35866 — Skills Telemetry).** `CometChatUIKit.initFromSettings(settings)` reads a `cometchat-settings.json` object and lets the SDK self-report `integrationSource = "ai-agent"`. It ships GA in **`@cometchat/chat-uikit-angular >= 5.0.3`** + **`@cometchat/chat-sdk-javascript >= 4.1.11`** (npm `latest`). On an older kit (`<= 5.0.2`) the method does not exist — only the `UIKitSettingsBuilder` + `init()` path below works (reporting `integrationSource = "manual"`); use that fallback. (The kit routes `initFromSettings` to the SDK's `CometChat.initFromSettings`, which stamps `ai-agent` — plain `init(settings)` does not; ENG-36203.)
-
-**Step 1 — create `cometchat-settings.json` at the project root** (e.g. alongside `angular.json`). Fill `appId` / `region` / `credentials.authKey` from the CLI `provision setup` output; leave the rest at the defaults:
-
-```json
-{
-  "appId": "APP_ID_HERE",
-  "region": "us",
-  "credentials": {
-    "authKey": "AUTH_KEY_HERE"
-  },
-  "chatSDK": {
-    "presenceSubscription": {
-      "type": "ALL_USERS",
-      "roles": []
-    },
-    "autoEstablishSocketConnection": true,
-    "adminHost": null,
-    "clientHost": null
-  },
-  "callsSDK": {
-    "host": null,
-    "adminHost": null,
-    "clientHost": null,
-    "callsHost": null
-  },
-  "uiKit": {
-    "subscribePresenceForAllUsers": true
-  }
-}
-```
-
-**Step 2 — init in `main.ts` by importing the JSON.** Angular CLI projects have `resolveJsonModule: true` by default, so the import is type-safe:
-
-```typescript
-// main.ts — initFromSettings ships GA in @cometchat/chat-uikit-angular >= 5.0.3 (ENG-35866)
-import { bootstrapApplication } from "@angular/platform-browser";
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-import { AppComponent } from "./app/app.component";
-import { appConfig } from "./app/app.config";
-import cometchatSettings from "../cometchat-settings.json";
-
-CometChatUIKit.initFromSettings(cometchatSettings)
-  .then(() => bootstrapApplication(AppComponent, appConfig))
-  .catch((err) => console.error("CometChat init failed:", err));
-```
-
-- **Do NOT gitignore `cometchat-settings.json`.** The dev-mode `authKey` ships in the built bundle either way; production uses server-minted auth tokens.
-
-### UIKitSettingsBuilder — the init pattern (fallback — published kit; reports `manual`)
-
-`UIKitSettingsBuilder` and `UIKitSettings` are exported from **`@cometchat/chat-uikit-angular`** (not `uikit-shared`, which no longer exists):
-
-```typescript
-import { UIKitSettingsBuilder, CometChatUIKit } from "@cometchat/chat-uikit-angular";
-import { environment } from "../environments/environment";
-
-const settings = new UIKitSettingsBuilder()
-  .setAppId(environment.cometchat.appId)
-  .setRegion(environment.cometchat.region)          // "us" | "eu" | "in"
-  .setAuthKey(environment.cometchat.authKey)        // dev only — omit in production
-  .subscribePresenceForAllUsers()
-  .build();
-
-const initPromise = CometChatUIKit.init(settings);   // Promise<InitResult> | undefined
-```
-
-> `init()` returns `Promise<InitResult> | undefined` (it returns `undefined` if settings are missing/invalid). Guard for the `undefined` case rather than blindly `.then()`-ing the result.
-
-Builder methods (verified against v5 `UIKitSettings.ts`): `setAppId`, `setRegion`, `setAuthKey`, `subscribePresenceForAllUsers`, `subscribePresenceForFriends`, `subscribePresenceForRoles(roles)`, `setRoles(roles)`, `setAutoEstablishSocketConnection(bool)`, `setAdminHost`, `setClientHost`, `setStorageMode`, `setCallingEnabled(bool)`, `setCallAppSettings`, `build()`.
-
-### Init must run once, before any chat component renders
-
-The canonical pattern (used by both the docs and the kit's own sample app) is to **init in `main.ts` and only bootstrap the Angular app once init resolves.** Do NOT init inside a lazily-loaded route that mounts after a `<cometchat-*>` component could already be on screen.
-
-```typescript
-// main.ts (Angular 17+ standalone bootstrap)
-import { bootstrapApplication } from "@angular/platform-browser";
-import { UIKitSettingsBuilder, CometChatUIKit } from "@cometchat/chat-uikit-angular";
-import { AppComponent } from "./app/app.component";
-import { appConfig } from "./app/app.config";
-import { environment } from "./environments/environment";
-
-// Fail loud if environment.cometchat values are EMPTY (env block missing, or
-// the wrong environment file picked at build). Note: this catches empty/unset
-// only — a non-empty placeholder like "YOUR_APP_ID" is truthy and passes, so
-// still paste real values. Otherwise empty creds surface later as a cryptic
-// init failure. (audit P0-5)
-const cc = environment.cometchat;
-if (!cc?.appId || !cc?.region || !cc?.authKey) {
-  throw new Error(
-    "CometChat credentials are empty in environment.cometchat — fill appId/region/authKey " +
-      "in src/environments/environment.ts (and environment.prod.ts).",
-  );
-}
-
-const settings = new UIKitSettingsBuilder()
-  .setAppId(cc.appId)
-  .setRegion(cc.region)
-  .setAuthKey(cc.authKey)
-  .subscribePresenceForAllUsers()
-  .build();
-
-// `init(...)` is typed `Promise<InitResult> | undefined` in v5.0.2, so coalesce to a
-// Promise before chaining — `init(settings)?.then(...).catch(...)` still leaves the
-// `.catch` on a possibly-undefined value and fails `tsc` strict (TS2532) on Angular 21.
-(CometChatUIKit.init(settings) ?? Promise.resolve())
-  .then(() => {
-    bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
-  })
-  .catch((err) => console.error("CometChat init failed:", err));
-```
-
-Bootstrapping only after init resolves means every component that mounts afterward can safely assume CometChat is initialized. Login (dev user or token) then happens in the root component / a route guard / an auth service — see §4.
-
-> **Filename convention — modern CLI scaffolds differ from these examples.** Examples here use the classic `AppComponent` in `src/app/app.component.ts`. Angular CLI 17+ (and 21) scaffolds the root component as **`App`** in `src/app/app.ts` (no `.component` suffix), with `app.config.ts` + `app.routes.ts`. On a freshly-scaffolded project, import `App` (not `AppComponent`) from `./app/app` and adapt the filenames — the wiring is identical, only the names changed.
-
-> **Alternative — `APP_INITIALIZER`:** if you prefer to bootstrap unconditionally and block on a DI provider, register an `APP_INITIALIZER` factory that returns the `CometChatUIKit.init(settings)` Promise. Angular blocks bootstrap until it resolves. Either way the rule holds: init must finish before any `<cometchat-*>` renders.
-
----
-
-## 4. Login
-
-### Development mode — `login(uid)` takes a BARE STRING
-
-```typescript
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-
-const user = await CometChatUIKit.getLoggedinUser();   // async getter → Promise<User | null>
-if (!user) {
-  await CometChatUIKit.login("cometchat-uid-1");        // ← bare string, NOT { uid: "..." }
-}
-```
-
-> `login()` takes a **string** uid, not an object — its signature is `login(uid: string): Promise<CometChat.User>`. Passing `{ uid: "..." }` fails type-checking. (Token login is a separate method — see Production.)
-
-Every new CometChat app ships 5 pre-seeded test users — `cometchat-uid-1` … `cometchat-uid-5`.
-
-### Reading the current user — three options
-
-```typescript
-// 1. Sync getter — use in components, route guards, anywhere after login completes:
-const user = CometChatUIKit.getLoggedInUser();      // User | null  (note capital "In")
-
-// 2. Async getter — use inside the init/login flow:
-const user = await CometChatUIKit.getLoggedinUser(); // Promise<User | null>  (note lowercase "in")
-
-// 3. Reactive (idiomatic Angular) — react to login/logout in templates with the async pipe:
-CometChatUIKit.loggedInUser$.subscribe(u => this.currentUser = u);
-```
-
-`CometChatUIKitLoginListener` exists only as an **internal** kit class — it is not exported from `@cometchat/chat-uikit-angular`'s public API and has no public `getLoggedInUser()`. Use the static getters or the `loggedInUser$` observable instead. Never hardcode a UID to identify the current user — in production it comes from your auth system.
-
-### Production mode
-
-```typescript
-await CometChatUIKit.loginWithAuthToken(tokenFromYourBackend);
-```
-
-The backend mints the token via the CometChat REST API using the server-only **REST API Key**. See `cometchat-angular-production`.
-
-### Logout
-
-```typescript
-await CometChatUIKit.logout();   // Promise<LogoutResult> — then navigate to your login route
-```
-
----
-
-## 5. Using components — standalone imports (no NgModule, no schema)
-
-v5 components are **standalone Angular components**. Import the component *class* into the `imports: []` of whatever standalone component renders it. They are real Angular components (not generic web components), so **`CUSTOM_ELEMENTS_SCHEMA` is NOT needed** — and there is no NgModule to register.
-
-```typescript
-// chat.component.ts
-import { Component } from "@angular/core";
-import { CometChatConversationsComponent } from "@cometchat/chat-uikit-angular";
-
-@Component({
-  selector: "app-chat",
-  standalone: true,
-  imports: [CometChatConversationsComponent],   // import the class you use; no schema
-  template: `<cometchat-conversations></cometchat-conversations>`,
-})
-export class ChatComponent {}
-```
-
-- Class names carry the **`Component`** suffix (`CometChatConversationsComponent`); the **HTML selectors do not** (`<cometchat-conversations>`).
-- Import only the components you actually use.
-- There is **no composite** `<cometchat-conversations-with-messages>` in v5 — build a two-pane layout by composing `cometchat-conversations` with `cometchat-message-header` / `-list` / `-composer` (see `cometchat-angular-placement`).
-
-> Using an NgModule-based app (not yet migrated to standalone)? You can still add these standalone classes to an `@NgModule({ imports: [...] })` — standalone components are importable into NgModules. You still do **not** need `CUSTOM_ELEMENTS_SCHEMA`.
-
-See `cometchat-angular-components` for the full catalog of selectors, `@Input`/`@Output` bindings, and slot templates.
-
----
-
-## 6. Environment variables
-
-Angular has no `.env` / `process.env`. Config lives in `src/environments/environment.ts`.
-
-```typescript
-// src/environments/environment.ts (development)
-export const environment = {
-  production: false,
-  cometchat: {
-    appId: "YOUR_APP_ID",
-    region: "us",                 // "us" | "eu" | "in"
-    authKey: "YOUR_AUTH_KEY",     // dev only — never in production builds
-  },
-};
-```
-
-```typescript
-// src/environments/environment.prod.ts (production)
-export const environment = {
-  production: true,
-  cometchat: {
-    appId: "YOUR_APP_ID",
-    region: "us",
-    // No authKey in production — mint auth tokens server-side
-    tokenEndpoint: "https://api.yourapp.com/cometchat-token",
-  },
-};
-```
-
-**Never put the REST API Key in any environment file.** Angular bundles `environment.ts` into client JS — the REST API Key is server-only.
-
----
-
-## 7. Theming — CSS variables (no theme service)
-
-v5 has **no `CometChatThemeService`** and no programmatic palette API. Theming is done with CSS custom properties (`--cometchat-*`), the same model as the React kit. Light/dark mode is a single setter:
-
-```typescript
-CometChatUIKit.themeMode = "dark";   // 'light' | 'dark'
-```
-
-```css
-/* styles.css — override brand + tokens globally */
-:root {
-  --cometchat-primary-color: #6852D6;
-}
-```
-
-See `cometchat-angular-theming` for the full CSS-variable token reference and dark-mode strategy. Do **not** reach for `CometChatThemeService` / `theme.palette.setPrimary()` — no such programmatic palette API exists; theming is CSS-variable only.
-
----
-
-## 8. Anti-patterns
-
-1. **Don't target Angular ≤16.** UI Kit v5's peer range is Angular 17–21 (`>=17.0.0 <22.0.0`). On older Angular, upgrade before integrating.
-2. **Don't install or import `@cometchat/uikit-shared` / `-elements` / `-resources`.** They don't exist in the v5 dependency set — everything is in `@cometchat/chat-uikit-angular`.
-3. **Don't add `CUSTOM_ELEMENTS_SCHEMA`** for CometChat components — they are real Angular components (not generic web components), so the schema is unnecessary.
-4. **Don't call `login({ uid })`.** v5 takes a bare string: `login("cometchat-uid-1")`.
-5. **Don't use `CometChatUIKitLoginListener`** — it's an internal class, not public API. Use `CometChatUIKit.getLoggedInUser()` / `getLoggedinUser()` / `loggedInUser$`.
-6. **Don't use `CometChatThemeService`** — it doesn't exist in v5. Theme via CSS variables + `themeMode`.
-7. **Don't reach for `<cometchat-conversations-with-messages>`** — removed in v5. Compose the layout from the individual components.
-8. **Don't init inside a lazy-loaded route.** Init must complete before any `<cometchat-*>` renders — use `APP_INITIALIZER` or gate on an `isReady` flag.
-9. **Don't render `<cometchat-*>` before init+login resolve.** Gate with `*ngIf`.
-10. **Don't bundle the REST API Key** in any `src/` file — Angular ships `src/` to the client.
-
----
-
-## 9. SDK access
-
-For raw SDK calls (e.g. `CometChat.getUser(uid)`), import the `CometChat` namespace directly from the chat SDK peer dependency:
-
-```typescript
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-```
-
-Use the kit's `CometChatUIKit.*` helpers (sendTextMessage, createUser, updateUser, etc.) when available — they emit the UI events the components listen for.
-
----
-
-## 10. Docs MCP (recommended)
-
-```bash
-claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp
-```
-
-Use it to confirm prop names, event signatures, theme tokens, or error meanings before writing non-obvious code.
-
----
-
-## 11. Visual Builder — not available for Angular
-
-The dashboard's Visual Builder export ships ZIPs for React / React Native / iOS / Android / Flutter — there is **no Angular emitter**. On an Angular project the dispatcher auto-routes to the code-driven path (sets `customize=code`), skips the Visually-vs-In-code prompt, and continues with this skill + `cometchat-angular-{components,placement,patterns,theming}`. If a stale `customize=visual` carried over from another project, the dispatcher overwrites it to `code` (a `builder ... --platform angular` call would be rejected at the CLI). Theming is via CSS variables (§7), not a builder.
-
----
-
-## Skill routing reference
-
-| Skill | When to load |
-|---|---|
-| `cometchat-angular-core` | Always — before any integration code |
-| `cometchat-angular-components` | Always — before writing any `<cometchat-*>` HTML |
-| `cometchat-angular-placement` | When integrating — route / modal / drawer / embedded patterns |
-| `cometchat-angular-patterns` | Standalone wiring, routing, NgZone, change detection |
-| `cometchat-angular-theming` | CSS-variable theming, dark mode, typography |
-| `cometchat-angular-features` | Calls, extensions, AI |
-| `cometchat-angular-customization` | Slot templates, formatters, builders, events |
-| `cometchat-angular-production` | Server-side auth tokens + user management |
-| `cometchat-angular-troubleshooting` | Build errors, runtime failures, drift |
-| `cometchat-angular-calls` | Voice/video calling |
-| `cometchat-angular-push` | Push notifications |
-| `cometchat-angular-testing` | Unit / component / E2E tests |