cometchat-angular-features

Imported from cometchat/cometchat-skills (skills/cometchat-angular-features/SKILL.md). Install upstream with npx skills add cometchat/cometchat-skills --skill cometchat-angular-features. Copyright stays with the author (MIT).

Purpose

Teaches Claude how to add features on top of a working CometChat Angular UI Kit v5 (@cometchat/chat-uikit-angular@5) integration. Each feature falls into exactly one of five categories; this skill gives the correct recipe for each and — critically — names the precise component @Input you flip, every one of which is verified against the v5 component catalog / .d.ts.

Read cometchat-angular-core + cometchat-angular-components first — a base v5 integration (standalone components, UIKitSettingsBuilder init, login(uid) bare string, CSS-variable theming) must already exist before features layer on. For the full voice/video call flow, read cometchat-angular-calls.

Ground truth: @cometchat/chat-uikit-angular@5.0.2 source (component @Input/@Output declarations in projects/cometchat-uikit/src/lib/components/**) + docs/ui-kit/angular. Never invent a component @Input — every prop cited here is verified against the v5 component source.

1. Feature taxonomy

Every CometChat Angular v5 feature falls into exactly one of these five mechanism categories — they tell you how to wire each feature (the actionable Angular view), and map onto the product's canonical 5-tier "work-needed" model (Core Zero-Setup → Builder-Enabled → Config-Only → Config+Settings → SDK-Integrated; see cometchat-features §3 + packages/registry/v6/features/catalog.json; canonical public matrix → Features & Extensions Guide, which outranks this snapshot on conflict): Auto-enabled ≈ Core; Component-prop ≈ Core/Config; Dashboard-extension ≈ Config-Only; AI-with-OpenAI-key ≈ Config+Settings; Package-install ≈ SDK-Integrated:

The cometchat apply-feature <id> CLI and the dashboard toggles are not code symbols — they configure the backend. The code-side work for dashboard-extension features is usually zero; for component-prop and AI features it's a single @Input.

2. Auto-enabled features (no work) + the two component-prop ones

Already on from day 1 — no feature-enabling step

Rendering the three messaging components gives you all of these for free:

• Instant messaging (text, real-time delivery)
• Media sharing (images, video, audio, files)
• Read receipts (sent / delivered / read ticks)
• Typing indicators
• Reactions — on by default in <cometchat-message-list>. Click any message → emoji reaction. To turn it off, set [hideReactionOption]="true" (verified hide flag on the message list).
• Replies / threads (hideReplyOption, hideReplyInThreadOption to hide)
• Edit / delete own messages (hideEditMessageOption, hideDeleteMessageOption)
• Message info (hideMessageInfoOption)
• Voice messages (record + send from composer; hideVoiceRecordingButton to hide)
• User presence (online/offline status indicators render on avatars in <cometchat-conversations>, <cometchat-users>, <cometchat-group-members> by default — there is no per-list presence-hide @Input in v5; the only hideUserStatus flag lives on <cometchat-search>)
• Search — <cometchat-users> and <cometchat-groups> render a search bar by default; set [hideSearch]="true" to remove it (verified hide flag, default false). <cometchat-conversations> is the inverse: it has a [showSearchBar] @Input (default false — search hidden), so set [showSearchBar]="true" to show it; it also exposes a [searchView] template slot for a fully custom search surface.

These need no install and no toggle. If a customer reports one "missing," the cause is almost always a hide* input set to true somewhere — grep the templates first.

Mentions (@mentions) — component-prop

Mentions are not auto-on; they surface only when you pass a CometChatMentionsFormatter into the verified textFormatters @Input (which exists on <cometchat-message-list>, <cometchat-message-composer>, and <cometchat-conversations>):

// chat.component.ts
import { Component } from "@angular/core";
import {
  CometChatMessageListComponent,
  CometChatMessageComposerComponent,
  CometChatMentionsFormatter,
} from "@cometchat/chat-uikit-angular";
import { CometChat } from "@cometchat/chat-sdk-javascript";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [CometChatMessageListComponent, CometChatMessageComposerComponent],
  template: `
    <cometchat-message-list  [user]="user" [textFormatters]="formatters"></cometchat-message-list>
    <cometchat-message-composer [user]="user" [textFormatters]="formatters"></cometchat-message-composer>
  `,
})
export class ChatComponent {
  @Input() user!: CometChat.User;
  // Pass the SAME formatter array to list + composer so typed @mentions render consistently
  formatters = [new CometChatMentionsFormatter()];
}

• @all mentions: the composer enables mention-all by default; set [disableMentionAll]="true" to suppress it (verified composer hide flag).
• To disable mentions entirely, set [disableMentions]="true" on the composer instead of omitting the formatter.

Why a formatter, not a toggle? Mentions are a text-rendering concern. CometChatMentionsFormatter (verified export) is a CometChatTextFormatter subclass; the kit runs it over message text in the list and over input in the composer.

3. Dashboard-extension features (polls, stickers, collaborative, translation, link preview)

These are backend extensions. Enable each in the CometChat dashboard, or via the cross-family CLI. The components auto-render the result — usually zero code.

Enable via the CLI (preferred — no browser)

Angular projects don't go through cometchat apply (no .cometchat/state.json), so always pass --app-id <id> explicitly. The CLI hits the dashboard API using the bearer from cometchat auth login:

cometchat apply-feature polls --app-id <your-app-id>
cometchat apply-feature stickers --app-id <your-app-id>
cometchat apply-feature message-translation --app-id <your-app-id>
cometchat apply-feature link-preview --app-id <your-app-id>
cometchat apply-feature collaborative-document --app-id <your-app-id>
cometchat apply-feature collaborative-whiteboard --app-id <your-app-id>

cometchat apply-feature and the dashboard toggles configure the backend; they are not code symbols.

Response shapes (--json):

• "status": "applied" → done. Hard-reload the Angular dev server (ng serve restart or browser refresh).
• "status": "already-applied" → already in the desired state.
• "status": "auth-required" → run cometchat auth login first.
• "status": "manual-action-required" → a third-party-config extension (Giphy, Stipop, Tenor, Chatwoot, Intercom, Disappearing Messages, Message Shortcuts). The CLI can't automate these — surface next_steps verbatim and walk the user through the dashboard.
• "status": "error" → surface next_steps.

Enable via the dashboard (fallback)

1. https://app.cometchat.com → your app
2. Chat & Messaging → Features
3. Find the extension by name → flip Status ON
4. Hard-reload the Angular app

Where each toggle surfaces in the v5 UI

These are real, verified @Input hide flags on the v5 components — the feature renders by default once the dashboard toggle is on; you only touch a flag if you want to hide it.

After enabling, run cometchat verify --json and hard-reload. No code changes are needed for the auto-wired subset above.

4. AI features — dashboard toggle + OpenAI key + one component @Input

smart-replies, conversation-starter, and conversation-summary are AI features. Two steps: (1) enable on the backend with an OpenAI key, (2) surface with the verified component @Input.

4a — Enable on the backend (one CLI call)

The CLI sets the OpenAI key on the app and flips the toggle together:

cometchat apply-feature smart-replies        --app-id <your-app-id> --openai-key sk-...
cometchat apply-feature conversation-starter  --app-id <your-app-id> --openai-key sk-...
cometchat apply-feature conversation-summary  --app-id <your-app-id> --openai-key sk-...

The key is stored on the app once, so subsequent AI applies don't need --openai-key repeated. "status": "openai-key-required" → re-run with --openai-key sk-…. Get a key: https://platform.openai.com/api-keys.

4b — Surface smart replies + conversation starters (message-list @Inputs)

These are verified @Inputs on <cometchat-message-list> (confirmed in the v5 .d.ts):

<cometchat-message-list
  [user]="selectedUser"
  [showSmartReplies]="true"
  [showConversationStarters]="true"
  [smartRepliesKeywords]="['help', 'pricing']"
  [smartRepliesDelayDuration]="2000">
</cometchat-message-list>

• showSmartReplies (boolean) — renders smart-reply chips after a recent incoming message.
• showConversationStarters (boolean) — renders starter suggestions when the conversation is empty.
• smartRepliesKeywords (string[]) — only show smart replies when the incoming message contains one of these keywords. Defaults to ['what', 'when', 'why', 'who', 'where', 'how', '?'] in v5 — set your own array to narrow it.
• smartRepliesDelayDuration (number, ms) — debounce before chips appear (v5 default 10000).

<cometchat-message-list> also exposes the (smartReplyClick) and (conversationStarterClick) @Outputs (each emits the selected reply string) if you want to observe selection. (There are also standalone <cometchat-smart-replies> and <cometchat-conversation-starter> components — verified exports under base-elements/ — but the message-list @Inputs are the idiomatic path.)

4c — Surface conversation summary (message-header @Inputs)

Conversation summary is driven by verified @Inputs on <cometchat-message-header>:

<cometchat-message-header
  [user]="selectedUser"
  [showConversationSummaryButton]="true"
  [enableAutoSummaryGeneration]="true"
  [summaryGenerationMessageCount]="50"
  (conversationSummaryClick)="onSummary($event)">
</cometchat-message-header>

• showConversationSummaryButton (boolean, default false) — shows the "Summarize" button in the header.
• enableAutoSummaryGeneration (boolean, default false) — auto-generate a summary once the message count crosses the threshold.
• summaryGenerationMessageCount (number, v5 default 1000) — the message-count threshold that triggers auto-summary. Lower it (e.g. 50) to summarize sooner.
• (conversationSummaryClick) — @Output fired when the summary button is clicked; emits { messageCount: number } (type the $event accordingly).

The standalone <cometchat-conversation-summary> component (verified @Inputs getConversationSummary: () => Promise<string> and closeCallback: () => void) is for fully custom summary UIs. For the standard flow, the header @Inputs above are all you need.

4d — Reading smart-reply metadata for a fully custom UI

If you render your own chips instead of using showSmartReplies, read the server-injected metadata off the incoming message (the AI runs on CometChat's backend, not in your code):

const metadata = message.getMetadata() as Record<string, any>;
const smartReply = metadata?.["@injected"]?.["extensions"]?.["smart-reply"];
if (smartReply) {
  const replies = [
    smartReply.reply_positive,
    smartReply.reply_neutral,
    smartReply.reply_negative,
  ].filter(Boolean);
  // render your own reply chips → on click, CometChatUIKit.sendTextMessage(...)
}

5. Calls (package-install) — pointer to the calls skill

Voice + video calling is the one package-install feature. Two steps:

npm install @cometchat/calls-sdk-javascript@^5

// in your UIKitSettingsBuilder chain, before CometChatUIKit.init(...)
const settings = new UIKitSettingsBuilder()
  .setAppId(environment.cometchat.appId)
  .setRegion(environment.cometchat.region)
  .setAuthKey(environment.cometchat.authKey)
  .setCallingEnabled(true)        // verified builder method (v5 .d.ts)
  .build();

setCallingEnabled(true) is a verified UIKitSettingsBuilder method. Once the calls SDK peer is installed and calling is enabled, the kit's standalone call components work: <cometchat-call-buttons>, <cometchat-incoming-call>, <cometchat-outgoing-call>, <cometchat-ongoing-call>, <cometchat-call-logs>.

For the full call flow — app-wide incoming-call mounting, the @Input-callback-vs-@Output binding split ([onAccept] input vs (callAccepted) output), NgZone correctness, getUserMedia handling, additive-vs-standalone modes — read cometchat-angular-calls. Do not re-derive the call wiring here; that skill is the source of truth.

Quick reminder on call-button placement (header [auxiliaryButtonView] / [menuView] slot):

<cometchat-message-header [user]="selectedUser" [auxiliaryButtonView]="callButtons"></cometchat-message-header>
<ng-template #callButtons>
  <cometchat-call-buttons
    [user]="selectedUser"
    [onVoiceCallClick]="handleVoiceCall"
    [onVideoCallClick]="handleVideoCall">
  </cometchat-call-buttons>
</ng-template>

onVoiceCallClick / onVideoCallClick are @Input callback props (square brackets, function refs) — not @Outputs. See the components catalog and calls skill.

6. AI Agent (dashboard setup, no dedicated v5 component)

1. https://app.cometchat.com → your app → AI → Agents
2. Create an agent (name, system prompt, model) and assign it a UID (e.g. ai-support-agent).
3. Users message the agent like any other user.

Angular v5 ships AI-assistant building blocks (CometChatAIAssistantChat, -ChatHistory, -MessageBubble are exported), but the standard, supported path to chat with an agent is the normal message components targeted at the agent's UID:

CometChat.getUser("ai-support-agent").then((agent) => { this.aiAgent = agent; });

<cometchat-message-header   [user]="aiAgent"></cometchat-message-header>
<cometchat-message-list     [user]="aiAgent"></cometchat-message-list>
<cometchat-message-composer [user]="aiAgent"></cometchat-message-composer>

Smart replies / conversation starter / summary surface through the §4 @Inputs once enabled.

7. Finding a feature's category quickly

1. In the auto-enabled list (§2)? → Already works. Confirm no hide* @Input is turning it off.
2. @mentions? → Component-prop: pass [textFormatters]="[new CometChatMentionsFormatter()]" (§2).
3. Smart replies / conversation starter / summary? → AI feature: enable with cometchat apply-feature <id> --app-id <X> --openai-key sk-…, then set the message-list / message-header @Input (§4).
4. Polls / stickers / collaborative doc-or-whiteboard / message translation / link preview / thumbnails? → Dashboard-extension: cometchat apply-feature <id> --app-id <X>, then hard-reload (§3).
5. Giphy / Stipop / Tenor / Chatwoot / Intercom / Disappearing Messages / Message Shortcuts? → Dashboard-extension needing third-party config; CLI returns manual-action-required. Walk the user through https://app.cometchat.com → Chat & Messaging → Features.
6. Voice / video / call logs? → Package-install: npm install @cometchat/calls-sdk-javascript@^5 + .setCallingEnabled(true) → cometchat-angular-calls (§5).
7. AI agent? → §6.
8. Custom text formatting / custom message templates / custom slot views / theming? → That's customization, not a feature. Route to cometchat-angular-customization / cometchat-angular-theming.
9. Not on this list? → Check docs/ui-kit/angular/guide-overview + the kit's exports. If still nothing, the feature isn't in the UI Kit; the user may need the raw SDK.

8. Anti-patterns

1. Don't invent a component @Input. Every prop in this skill (showSmartReplies, showConversationStarters, smartRepliesKeywords, smartRepliesDelayDuration, showConversationSummaryButton, enableAutoSummaryGeneration, summaryGenerationMessageCount, textFormatters, the hide* flags, setCallingEnabled) is verified against the v5 .d.ts. If a prop isn't in cometchat-angular-components or the .d.ts, it doesn't exist — v4 prop names frequently differ.
2. Don't treat reactions/mentions as a backend toggle. Reactions are auto-on (hide via hideReactionOption); mentions are a textFormatters @Input. Neither uses apply-feature.
3. Don't speculatively install the calls SDK. Install @cometchat/calls-sdk-javascript only after the user asks for calls, and pin ^5.
4. Don't enable extensions the app doesn't use. Each enabled extension adds data-fetching overhead.
5. Don't omit --app-id. Angular has no .cometchat/state.json; every apply-feature call needs --app-id <id>.
6. Don't bind a call @Input callback as an @Output. [onVoiceCallClick]="fn" (input) vs (voiceCallClick)="fn($event)" (output) — use the one the catalog lists.
7. Don't reference AI streaming APIs from memory. They change across minor versions — confirm against the docs MCP / .d.ts before generating code.

Skill routing reference

Sources

• Core features
• Extensions
• AI features
• Calling integration