CometChat Angular Chat Placement

What it does

When your agent uses it

• Adding a chat page and route to an Angular app
• Putting a conversation list beside a message pane in a dashboard
• Opening thread or details panels from a chat view
• Making the chat layout fall back to one pane on mobile
• Embedding a single-conversation support widget

Example prompts

• “Add a chat page at /chat with the conversation list on the left and messages on the right.”
• “Put chat inside my existing dashboard layout without touching the other widgets.”
• “Open a thread panel when a user clicks reply on a message.”
• “Make the chat page show one pane at a time on phones.”

Requirements

• `@cometchat/chat-uikit-angular` version 5
• Angular 17 to 21
• CometChat credentials
• Compatibility (from SKILL.md): @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

1. 1Do not re-init CometChat per route. Init happens once at bootstrap (core). A route guard may await login, never re-init.
2. 2Tear down on leave. Every subscription in the chat component needs takeUntil(destroy$) in ngOnDestroy, or navigating away leaks listeners…

What it can do on your machine

Read from SKILL.md and the folder at commit 911b108. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript, html and css).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  @cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21

  From compatibility in the SKILL.md frontmatter.

Context cost

CometChat Angular Chat Placement loads about 2.2k tokens when it runs, and up to ~7.1k if it reads all its reference files. Until then it costs about 87 tokens; SKILL.md has 729 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~87

When it runs · the whole SKILL.md, loaded when a task matches

~2.2k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~7.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from cometchat/cometchat-skills at commit 911b108, republished under its MIT licence (© cometchat). 729 words, ~2,191 tokens.

name

cometchat-angular-v5-placement

description

Where CometChat components go in an Angular app — the chat shell layout, thread and details panels, search, routing a chat page, and the mobile one-pane fallback. Triggers: 'add a chat page', 'put chat in my dashboard', 'conversation list beside messages', 'open a thread panel', 'chat route', 'make chat responsive'.

compatibility

@cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21

license

MIT

metadata.author

CometChat

metadata.version

1.0.0

metadata.tags

cometchat angular placement v5 layout routing panels responsive shell

import { Component, computed, inject } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { ChatStateService, CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';

@Component({ selector: 'app-chat-shell', standalone: true, template: '' })
export class ChatShellComponent {
  readonly chatState = inject(ChatStateService);
  // The service's signals are `T | null`, but the kit's inputs are optional
  // (`T | undefined`) — bind the raw signal and Angular's strict template check
  // rejects it. Normalise once, here.
  readonly activeUser = computed(() => this.chatState.activeUser() ?? undefined);
  readonly activeGroup = computed(() => this.chatState.activeGroup() ?? undefined);

  // (itemClick) emits a Conversation — resolve the subject, then branch on its TYPE.
  // A Conversation has no getGuid(), so duck-typing routes groups into the user slot
  // and the message pane throws "getUid is not a function". See references/core-surface.md.
  open(conversation: CometChat.Conversation) {
    const subject = conversation.getConversationWith();
    if (conversation.getConversationType() === CometChatUIKitConstants.MessageReceiverType.group) {
      this.chatState.setActiveGroup(subject as CometChat.Group);
    } else {
      this.chatState.setActiveUser(subject as CometChat.User);
    }
  }
  closeChat() { this.chatState.clearActiveChat(); }
}

<div class="cc-shell">
  <aside class="cc-side"><!-- list --></aside>
  <main class="cc-main"><!-- header · list · composer --></main>
  <aside class="cc-panel" *ngIf="threadParent()"><!-- thread --></aside>
</div>

.cc-shell { display: flex; height: 100dvh; width: 100%; min-height: 0; overflow: hidden; }
.cc-side  { width: 320px; min-height: 0; overflow: hidden; }
.cc-main  { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cc-panel { width: 360px; min-height: 0; overflow: hidden; border-left: 1px solid var(--cometchat-border-color-default); }

// app.routes.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
  { path: 'chat', loadComponent: () => import('./chat/chat.component').then(m => m.ChatComponent) },
  { path: 'chat/:uid', loadComponent: () => import('./chat/chat.component').then(m => m.ChatComponent) },
];

.dashboard-chat-slot { height: calc(100dvh - var(--app-header-height)); min-height: 0; display: flex; }

<div class="cc-shell">
  <aside class="cc-side" [hidden]="isMobile() && hasActiveChat()"><!-- list --></aside>
  <main class="cc-main" [hidden]="isMobile() && !hasActiveChat()"><!-- message pane --></main>
</div>

© cometchat, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in skills/cometchat-angular-v5-placement of cometchat/cometchat-skills.

• SKILL.md
• references/combined-app.md
• references/core-surface.md

Open the folder on GitHubat commit 911b108