diff --git a/agent-skills.mdx b/agent-skills.mdx
new file mode 100644
index 000000000..4b187daf2
--- /dev/null
+++ b/agent-skills.mdx
@@ -0,0 +1,293 @@
+---
+title: "Build CometChat with AI Agent Skills"
+sidebarTitle: "Agent Skills"
+description: "Install the CometChat agent skills and let your AI coding agent — Claude Code, Cursor, GitHub Copilot, Replit, and more — add production-grade chat and calling to your React or Angular app from natural-language prompts."
+canonical: "https://www.cometchat.com/docs/agent-skills"
+---
+
+**CometChat Agent Skills** teach your AI coding agent how to build with CometChat.
+Install the skills once, then open your project and say *"add chat to my app"* —
+the agent has a short conversation with you (framework, intent, placement,
+credentials), then writes production-grade integration code directly into the
+files you already have.
+
+The skills author against the official **React UI Kit v7** and **Angular UI Kit v5**
+task guides and verify their output against them, so what the agent writes builds and
+runs against the current published UI Kit — not a hallucinated API.
+
+
+The skills work **inside your existing project** with your existing agent. They
+don't scaffold a throwaway demo — they detect your setup and integrate CometChat
+into the app you're already building.
+
+
+## Prerequisites
+
+- **Node.js 18+** — the installer runs through `npx`, so there's nothing to install globally.
+- A **CometChat account** — [sign up free](https://app.cometchat.com) to get an app's App ID, Region, and Auth Key.
+- An **existing React or Angular app**:
+ - **React** 18+ — **Vite**, **Create React App**, **Next.js**, **React Router**, or **Astro**.
+ - **Angular** 17–21 — **Angular CLI** or **Nx**. (Angular 22 is not yet installable: the UI Kit's peer range is `<22.0.0`.)
+- One of the [supported AI coding agents](#supported-agents) below.
+
+
+The skills target the **React UI Kit v7** and the **Angular UI Kit v5** today. The
+installer tells you if it can't detect a supported setup — it never guesses or
+scaffolds a throwaway project. In an empty or ambiguous project the agent asks which
+framework you're building rather than assuming one.
+
+
+## Install
+
+Run the installer in your project root:
+
+```bash
+npx @cometchat/skills add
+```
+
+It detects your React or Angular setup and opens a picker to install the skills for
+the AI agent(s) you use. To pin a single agent — useful in CI or a Dockerfile — pass
+`--ide`:
+
+```bash
+npx @cometchat/skills add --ide claude # Claude Code → .claude/skills/
+npx @cometchat/skills add --ide cursor # Cursor → ./.cometchat/skills + router
+npx @cometchat/skills add --ide replit # Replit Agent → .agents/skills/
+npx @cometchat/skills add --ide all # every supported agent
+```
+
+### Supported agents
+
+| Agent | Install with |
+| --- | --- |
+| Claude Code | `--ide claude` |
+| Cursor | `--ide cursor` |
+| GitHub Copilot | `--ide copilot` |
+| Windsurf | `--ide windsurf` |
+| Replit Agent | `--ide replit` |
+| Cline | `--ide cline` |
+| Codex | `--ide codex` |
+| Gemini | `--ide gemini` |
+| Continue | `--ide continue` |
+| Aider | `--ide aider` |
+| Kiro | `--ide kiro` |
+| Antigravity | `--ide antigravity` |
+
+
+Claude Code, Kiro, and Replit get a native `SKILL.md` tree. The other agents get
+an orienting router plus a `./.cometchat/skills` tree. Add `--global` (Claude
+Code, Kiro, and Replit only) to install into your user-level directory instead of
+the project.
+
+
+## Use it
+
+Open your project in your agent and prompt it:
+
+```
+add chat to my app
+```
+
+or type the dispatcher directly:
+
+```
+/cometchat
+```
+
+The `cometchat` dispatcher detects your framework and routes to `cometchat-onboarding`,
+which walks a short **discover → understand → plan → approve** flow. Once you
+approve the plan, it hands a scoped build directive to that family's `core` skill
+(`cometchat-react-v7-core` or `cometchat-angular-v5-core`) and pulls in the other
+skills as the plan needs them (components, placement, theming, features, calls, push).
+
+Keep iterating in plain language afterward:
+
+- *"Add message reactions and threaded replies."*
+- *"Switch the chat to dark mode and match my brand color."*
+- *"Add a group details side panel."*
+- *"Set up production authentication."*
+
+## Connect your credentials
+
+You don't paste your **App ID / Region / Auth Key** by hand. During the build,
+when the skill notices they're missing, it offers two paths and defaults to
+fetching them from your dashboard:
+
+- **Fetch from your dashboard (recommended)** — the skill runs the standalone
+ [CometChat CLI](/cli) for you, on demand: it opens the dashboard login in your
+ browser, lets you pick one of your **existing** apps, pulls the credentials,
+ and writes a neutral `.cometchat/config.json`. You can also run the CLI yourself
+ — it works on its own, in a script, or in CI.
+- **Paste manually** — copy App ID, Region, and Auth Key from **Dashboard → Your
+ App → Credentials** if you'd rather not log in.
+
+Either way, the **skill** then writes the framework env file (`.env` / `VITE_` /
+`NEXT_PUBLIC_` …) from those credentials — the CLI only fetches them and never
+touches your framework code.
+
+
+**Keep credentials out of version control.** Both `.cometchat/config.json` and
+the generated env file contain your **Auth Key**. Make sure they're in
+`.gitignore` — Vite, CRA, and Astro ignore only `*.local` (not `.env`), so add
+`.env` yourself; Next.js ignores `.env.local` by default. The Auth Key is for
+**development only**: in production, mint a short-lived per-user **auth token** on
+your backend and log in with `loginWithAuthToken()` — never ship the Auth Key to
+a production client.
+
+
+
+Prefer to drive it yourself? The credential CLI is also a standalone tool —
+`npx @cometchat/skills-cli auth login`, then `provision run`. See the
+[CLI reference](/cli) for the full command surface.
+
+
+## What's in the pack
+
+Task-shaped skills the agent loads on demand — two shared, then one set per framework:
+
+| Skill | Purpose |
+| --- | --- |
+| `cometchat` | Thin dispatcher — detect the framework and route |
+| `cometchat-onboarding` | Discover → understand → plan → approve (the front door) |
+| `cometchat-react-v7-core` | Install · credentials · init → login → render · the golden-path chat surface |
+| `cometchat-react-v7-components` | The v7 component catalog + props / slots |
+| `cometchat-react-v7-placement` | Where chat lives — full app / sidebar / popup / embed |
+| `cometchat-react-v7-customization` | Theming · brand · light/dark · view slots |
+| `cometchat-react-v7-patterns` | Vite / Next.js / React Router / Astro glue (env · SSR · routing) |
+| `cometchat-react-v7-features` | Enable a feature — reactions · polls · AI · moderation · … |
+| `cometchat-react-v7-calls` | Voice / video calling |
+| `cometchat-react-v7-push` | Web push (Notifications product) |
+| `cometchat-react-v7-migration` | Upgrade a v6 UI Kit → v7 |
+
+**Angular UI Kit v5**
+
+| Skill | Purpose |
+| --- | --- |
+| `cometchat-angular-v5-core` | Install · credentials · init → login → render · the golden-path chat surface |
+| `cometchat-angular-v5-components` | The v5 component catalog + inputs / outputs / view slots |
+| `cometchat-angular-v5-placement` | Where chat lives — chat shell · thread and details panels · routing |
+| `cometchat-angular-v5-customization` | Theming · brand · light/dark · view slots |
+| `cometchat-angular-v5-patterns` | Angular CLI / Nx glue (environments · SSR · lazy routes · RxJS) |
+| `cometchat-angular-v5-features` | Enable a feature — reactions · polls · AI · moderation · … |
+| `cometchat-angular-v5-calls` | Voice / video calling |
+| `cometchat-angular-v5-push` | Web push (Notifications product) |
+| `cometchat-angular-v5-production` | Server-minted auth tokens · hardening before you ship |
+| `cometchat-angular-v5-testing` | Testing an app that embeds CometChat |
+| `cometchat-angular-v5-troubleshooting` | Diagnosing a broken integration |
+
+## Example prompts
+
+Everything starts from one prompt — **"add chat to my app"** — then you refine in
+plain language. Example prompts, grouped by goal:
+
+**Get started**
+
+- *"Add chat to my app."* — the default: a conversation list + message view
+- *"Add 1:1 direct messaging between my users."*
+- *"Add group chat with file sharing."*
+- *"Build a full chat app with Chats, Users, and Calls tabs."*
+
+**Where chat lives**
+
+- *"Add a support chat widget in the bottom-right corner."*
+- *"Add a floating chat popup I can toggle open and closed."*
+- *"Put chat in a sidebar next to my app."*
+- *"Embed a chat panel on my dashboard page."*
+
+**Features**
+
+- *"Add message reactions, typing indicators, and read receipts."*
+- *"Add threaded replies and @mentions."*
+- *"Add image and file sharing."*
+- *"Add message search."*
+- *"Add polls and stickers."*
+
+**Calling & AI**
+
+- *"Add voice and video calling with a click-to-call button."*
+- *"Add smart replies and conversation summaries."*
+- *"Add an AI assistant to the chat."*
+- *"Turn on moderation so banned words are blocked before delivery."*
+
+**Look & feel**
+
+- *"Switch the chat to dark mode and match my brand color."*
+- *"Make the chat follow the user's system light/dark setting."*
+
+**Ship it**
+
+- *"Set up production authentication with auth tokens."*
+- *"Add web push notifications."*
+- *"Migrate my v6 UI Kit to v7."*
+
+The agent plans each change with you, then writes the integration into your
+existing files — you don't have to know the component or prop names.
+
+## Manage the skills
+
+- **Update** — re-run `npx @cometchat/skills add` to pull the latest skills; it overwrites the installed skill tree in place.
+- **Inspect** — `npx @cometchat/skills list` shows the installed skills, and `npx @cometchat/skills doctor` runs an environment health check.
+- **Uninstall** — delete the installed skill directory for your agent (for example `.claude/skills/cometchat*`, `.agents/skills/`, or `./.cometchat/skills`).
+- **Version control** — commit the skill files so your whole team shares the same setup. Do **not** commit `.cometchat/config.json` or the generated env file — they hold your Auth Key.
+
+## Troubleshooting
+
+| Symptom | Likely cause | Fix |
+| --- | --- | --- |
+| The agent doesn't pick up the skills | Installed for a different agent, or a router-based agent needs pointing at the tree | Re-run `npx @cometchat/skills add --ide `. For router agents (Cursor, Copilot, …) open `.cometchat/skills/cometchat/SKILL.md` to orient it. |
+| Blank screen, no errors | A UI Kit component rendered before `init()` + `login()` resolved, or the wrong Region / env prefix | The `init → login → render` order is required. Check that the Region matches your dashboard app and the env prefix matches your bundler (`VITE_` / `NEXT_PUBLIC_` / `PUBLIC_`). |
+| `login()` fails — "user not found" | Logging in a UID that doesn't exist in the app | Use a UID that exists (Dashboard → your app → **Users**; fresh apps seed `cometchat-uid-1`). |
+| Auth error on init / login | Region mismatch between your code and the dashboard app | Re-check the Region (`us` / `eu` / `in`) in both the dashboard and your env file. |
+| `ERROR_API_KEY_NOT_FOUND` | An env var is empty or not picked up by the bundler | Confirm the env file uses the right prefix for your bundler, then restart the dev server. |
+| Version conflict during install | An older **v6** UI Kit is already installed | Ask the agent to migrate — the `cometchat-react-v7-migration` skill upgrades v6 → v7. |
+
+## Compatibility
+
+**React**
+
+| Dependency | Version |
+| --- | --- |
+| `@cometchat/chat-uikit-react` | `7.x` (verified 7.1.x) |
+| `@cometchat/chat-sdk-javascript` | `4.x` |
+| `@cometchat/calls-sdk-javascript` | `5.x` (calling) |
+| React | `≥ 18` |
+
+**Angular**
+
+| Dependency | Version |
+| --- | --- |
+| `@cometchat/chat-uikit-angular` | `5.x` (verified 5.1.0) |
+| `@cometchat/chat-sdk-javascript` | `^4.1.13` |
+| `@cometchat/cards-angular` | `^1.0.0` |
+| `@cometchat/calls-sdk-javascript` | `^5.0.3` (calling) |
+| `dompurify` | `^3.0.0` |
+| Angular | `≥ 17` and `< 22` |
+
+
+Angular 22 is not yet installable — the UI Kit's peer range is `>=17.0.0 <22.0.0`, so
+`npm install` fails with `ERESOLVE` on Angular 22. Scaffold with `@angular/cli@21` until
+a kit release widens the range.
+
+
+## Next steps
+
+
+
+ Authenticate, provision credentials, and manage the skills from your terminal
+
+
+ Connect CometChat to any Model Context Protocol–compatible agent
+
+
+ The manual React UI Kit setup the skills automate
+
+
+ The manual Angular UI Kit setup the skills automate
+
+
+ Browse all prebuilt React components
+
+
+ Browse all prebuilt Angular components
+
+
diff --git a/ui-kit/angular/angular-conversation.mdx b/ui-kit/angular/angular-conversation.mdx
index e28dc08fe..c4e3e0a0a 100644
--- a/ui-kit/angular/angular-conversation.mdx
+++ b/ui-kit/angular/angular-conversation.mdx
@@ -87,8 +87,10 @@ import { CometChat } from "@cometchat/chat-sdk-javascript";
styles: `
:host {
display: flex;
- height: 100vh;
- width: 100vw;
+ height: 100dvh; /* dvh, not vh: 100vh includes mobile browser chrome and overflows */
+ width: 100%;
+ min-height: 0; /* without this a flex child refuses to shrink below its content */
+ overflow: hidden; /* the shell never scrolls — the kit's lists scroll internally */
}
.chat-layout {
display: flex;
@@ -134,6 +136,14 @@ export class AppComponent implements OnInit {
}
```
+
+**The shell needs `overflow: hidden`, and every flex ancestor of the message list needs `min-height: 0`.**
+
+`height: 100vh` alone is not enough. The kit's lists scroll internally, but a flex child defaults to `min-height: auto` and refuses to shrink below its content — so the message list pushes the shell past the viewport and the browser scrolls the **page** instead of the list, carrying the header and composer off-screen with it.
+
+One missing `min-height: 0` anywhere between the viewport and the message list is enough to bring the page scroll back. `100dvh` is preferred over `100vh` because `vh` units include mobile browser chrome and overflow on phones.
+
+
How it works:
- `cometchat-conversations` calls `ChatStateService.setActiveConversation()` automatically when a conversation is clicked.
- `setActiveConversation()` extracts the `User` or `Group` and sets it as the active entity, enforcing mutual exclusivity (setting a user clears the group, and vice versa).
diff --git a/ui-kit/angular/angular-one-to-one-chat.mdx b/ui-kit/angular/angular-one-to-one-chat.mdx
index 78b75bf8b..47766e5c6 100644
--- a/ui-kit/angular/angular-one-to-one-chat.mdx
+++ b/ui-kit/angular/angular-one-to-one-chat.mdx
@@ -79,8 +79,10 @@ import { CometChat } from "@cometchat/chat-sdk-javascript";
.chat-window {
display: flex;
flex-direction: column;
- height: 100vh;
- width: 100vw;
+ height: 100dvh; /* dvh, not vh: 100vh includes mobile browser chrome and overflows */
+ width: 100%;
+ min-height: 0; /* without this a flex child refuses to shrink below its content */
+ overflow: hidden; /* the shell never scrolls — the kit's lists scroll internally */
}
.empty-conversation {
height: 100vh;
@@ -139,6 +141,14 @@ export class AppComponent implements OnInit {
}
```
+
+**The shell needs `overflow: hidden`, and every flex ancestor of the message list needs `min-height: 0`.**
+
+`height: 100vh` alone is not enough. The kit's lists scroll internally, but a flex child defaults to `min-height: auto` and refuses to shrink below its content — so the message list pushes the shell past the viewport and the browser scrolls the **page** instead of the list, carrying the header and composer off-screen with it.
+
+One missing `min-height: 0` anywhere between the viewport and the message list is enough to bring the page scroll back. `100dvh` is preferred over `100vh` because `vh` units include mobile browser chrome and overflow on phones.
+
+
Key points:
- `CometChat.getUser(UID)` fetches the user object from the SDK — you need a real user object, not a manually constructed one.
- `chatStateService.setActiveUser(user)` sets the active entity — all message components auto-subscribe and render accordingly.
diff --git a/ui-kit/angular/angular-tab-based-chat.mdx b/ui-kit/angular/angular-tab-based-chat.mdx
index cb1d10a8b..0c55da243 100644
--- a/ui-kit/angular/angular-tab-based-chat.mdx
+++ b/ui-kit/angular/angular-tab-based-chat.mdx
@@ -123,8 +123,10 @@ import { CometChat } from "@cometchat/chat-sdk-javascript";
styles: `
:host {
display: flex;
- height: 100vh;
- width: 100vw;
+ height: 100dvh; /* dvh, not vh: 100vh includes mobile browser chrome and overflows */
+ width: 100%;
+ min-height: 0; /* without this a flex child refuses to shrink below its content */
+ overflow: hidden; /* the shell never scrolls — the kit's lists scroll internally */
}
.tab-layout {
display: flex;
@@ -196,6 +198,14 @@ export class AppComponent implements OnInit {
}
```
+
+**The shell needs `overflow: hidden`, and every flex ancestor of the message list needs `min-height: 0`.**
+
+`height: 100vh` alone is not enough. The kit's lists scroll internally, but a flex child defaults to `min-height: auto` and refuses to shrink below its content — so the message list pushes the shell past the viewport and the browser scrolls the **page** instead of the list, carrying the header and composer off-screen with it.
+
+One missing `min-height: 0` anywhere between the viewport and the message list is enough to bring the page scroll back. `100dvh` is preferred over `100vh` because `vh` units include mobile browser chrome and overflow on phones.
+
+
How it works:
- The `activeTab` property drives which list component renders — `cometchat-conversations`, `cometchat-call-logs`, or `cometchat-users`.
- `cometchat-conversations` calls `ChatStateService.setActiveConversation()` on click, which extracts the `User` or `Group` and sets it as the active entity.
diff --git a/ui-kit/angular/api-reference/chat-state-service.mdx b/ui-kit/angular/api-reference/chat-state-service.mdx
index 36681ba60..00f692e71 100644
--- a/ui-kit/angular/api-reference/chat-state-service.mdx
+++ b/ui-kit/angular/api-reference/chat-state-service.mdx
@@ -2,6 +2,24 @@
title: "Chat State Service"
description: "Service Reference for the centralized chat state management service in CometChat Angular UIKit"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | The single source of truth for the ACTIVE chat (user / group / conversation). Use it instead of a local `selected` field — two sources drift and the list stops highlighting the open row. |
+| Class | `ChatStateService` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { ChatStateService } from "@cometchat/chat-uikit-angular";` |
+| Injected with | `private svc = inject(ChatStateService);` — `providedIn: 'root'`, no module wiring |
+| Key methods | `setActiveUser` · `setActiveGroup` · `setActiveConversation` · `getActiveUser` · `getActiveGroup` · `getActiveConversation` … +2 |
+| Reactive state (signals) | `activeUser` · `activeGroup` · `activeConversation` — use directly in templates, no subscription |
+| Reactive state (observables) | `activeUser$` · `activeGroup$` · `activeConversation$` — `takeUntil(destroy$)` in `ngOnDestroy` |
+| Full API | See [Setter Methods](#setter-methods) |
+| Usage | See [Usage Examples](#usage-examples) |
+| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
## Overview
`ChatStateService` is the centralized Angular service for managing active chat state across the CometChat Angular UIKit. It provides a single source of truth for the currently active chat entity (User, Group, or Conversation) in your application.
diff --git a/ui-kit/angular/api-reference/formatter-config-service.mdx b/ui-kit/angular/api-reference/formatter-config-service.mdx
index a2cdc3eb6..d31bd089e 100644
--- a/ui-kit/angular/api-reference/formatter-config-service.mdx
+++ b/ui-kit/angular/api-reference/formatter-config-service.mdx
@@ -1,3 +1,23 @@
+---
+title: "Formatter Config Service"
+description: "Service Reference for the centralized text-formatter configuration service in CometChat Angular UIKit"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | App-wide default text formatters, so mentions/URLs/hashtags are configured once rather than per component instance. |
+| Class | `FormatterConfigService` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { FormatterConfigService } from "@cometchat/chat-uikit-angular";` |
+| Injected with | `private svc = inject(FormatterConfigService);` — `providedIn: 'root'`, no module wiring |
+| Key methods | `getDefaultFormatters` · `setDefaultFormatters` · `addFormatters` · `resetToDefaults` · `getFormattersWithContext` |
+| Full API | See [Core Methods](#core-methods) |
+| Usage | See [Usage Patterns](#usage-patterns) |
+| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `FormatterConfigService` is a centralized Angular service for managing default text formatters across the CometChat UIKit. It provides a single source of truth for formatter configuration, allowing you to set formatters once and have them automatically applied across all text-displaying components.
diff --git a/ui-kit/angular/api-reference/introduction.mdx b/ui-kit/angular/api-reference/introduction.mdx
index bc365ee1a..306fcbe13 100644
--- a/ui-kit/angular/api-reference/introduction.mdx
+++ b/ui-kit/angular/api-reference/introduction.mdx
@@ -2,6 +2,18 @@
title: Services
description: "Reference for CometChat UIKit Angular injectable services."
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Index of the Angular UI Kit's injectable services — start here to find the right one |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Services | `ChatStateService` · `FormatterConfigService` · `MessageBubbleConfigService` · `RichTextEditorService` · `SearchConversationsService` · `SearchMessagesService` · `CometChatTemplatesService` |
+| Injected with | `inject()` — all are `providedIn: 'root'` |
+| Full list | See [Services](#services) |
+
+
This section documents the Angular services provided by the CometChat UIKit. These are injectable services you use via Angular's dependency injection to manage state, configure components, and customize behavior.
## Core Classes
diff --git a/ui-kit/angular/api-reference/message-bubble-config-service.mdx b/ui-kit/angular/api-reference/message-bubble-config-service.mdx
index 79111b0b7..9dae82625 100644
--- a/ui-kit/angular/api-reference/message-bubble-config-service.mdx
+++ b/ui-kit/angular/api-reference/message-bubble-config-service.mdx
@@ -2,6 +2,23 @@
title: "Message Bubble Config Service"
description: "API reference for the centralized message bubble view configuration service in CometChat Angular UIKit"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | App-wide message-bubble configuration with per-component overrides; priority logic decides which wins. |
+| Class | `MessageBubbleConfigService` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { MessageBubbleConfigService } from "@cometchat/chat-uikit-angular";` |
+| Injected with | `private svc = inject(MessageBubbleConfigService);` — `providedIn: 'root'`, no module wiring |
+| Key methods | `setBubbleView` · `setGlobalView` · `setGlobalViews` · `getView` · `setMessageTemplates` · `clearAll` … +2 |
+| Reactive state (signals) | `configVersion` — use directly in templates, no subscription |
+| Full API | See [Methods](#methods) |
+| Usage | See [Usage Examples](#usage-examples) |
+| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
`MessageBubbleConfigService` is the centralized Angular service for configuring how message bubbles are rendered across the CometChat Angular UIKit. It lets you customize individual sections of any message bubble — globally or per message type — without touching component templates.
The service is `providedIn: 'root'` (singleton by default). All `cometchat-message-list` instances share the same configuration unless you [scope the service](#scoping-for-multiple-instances).
diff --git a/ui-kit/angular/api-reference/rich-text-editor-service.mdx b/ui-kit/angular/api-reference/rich-text-editor-service.mdx
index ebcb49dc5..ba69354e3 100644
--- a/ui-kit/angular/api-reference/rich-text-editor-service.mdx
+++ b/ui-kit/angular/api-reference/rich-text-editor-service.mdx
@@ -1,4 +1,23 @@
-# RichTextEditorService API Reference
+---
+title: "Rich Text Editor Service"
+description: "Service Reference for the native-API rich text editor service in CometChat Angular UIKit"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Drives the composer's rich text editing (bold, lists, links, undo) on native browser APIs — no third-party editor. |
+| Class | `RichTextEditorService` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { RichTextEditorService } from "@cometchat/chat-uikit-angular";` |
+| Injected with | `private svc = inject(RichTextEditorService);` — `providedIn: 'root'`, no module wiring |
+| Key methods | `createEditor` · `destroyEditor` · `resetFormatState` · `getFormatState` · `toggleBold` · `toggleItalic` … +28 |
+| Reactive state (signals) | `formatState` — use directly in templates, no subscription |
+| Full API | see the page body |
+| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `RichTextEditorService` is an Angular service that provides rich text editing capabilities using native browser APIs. It is a lightweight, custom implementation with no external dependencies.
diff --git a/ui-kit/angular/api-reference/search-conversations-service.mdx b/ui-kit/angular/api-reference/search-conversations-service.mdx
index 540718d81..7581e143f 100644
--- a/ui-kit/angular/api-reference/search-conversations-service.mdx
+++ b/ui-kit/angular/api-reference/search-conversations-service.mdx
@@ -3,6 +3,22 @@ title: Search Conversations Service
description: Signal-based service for conversation search state, SDK queries, pagination, and real-time listener management.
---
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Headless conversation search: reactive results without mounting a search component. |
+| Class | `SearchConversationsService` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { SearchConversationsService } from "@cometchat/chat-uikit-angular";` |
+| Injected with | `private svc = inject(SearchConversationsService);` — `providedIn: 'root'`, no module wiring |
+| Key methods | `search` · `loadMore` · `attachListeners` · `detachListeners` · `reset` |
+| Full API | See [Methods](#methods) |
+| Usage | See [Usage](#usage) |
+| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
The `SearchConversationsService` manages conversation search state using Angular signals. It handles SDK query building, pagination, and attaches real-time listeners for message, user status, group, call, typing, and receipt events to keep results up to date.
## Import
diff --git a/ui-kit/angular/api-reference/search-messages-service.mdx b/ui-kit/angular/api-reference/search-messages-service.mdx
index e87577f10..3f6f35cf7 100644
--- a/ui-kit/angular/api-reference/search-messages-service.mdx
+++ b/ui-kit/angular/api-reference/search-messages-service.mdx
@@ -3,6 +3,22 @@ title: Search Messages Service
description: Signal-based service for message search state, SDK queries, attachment-type filtering, and pagination.
---
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Headless message search: reactive results without mounting a search component. |
+| Class | `SearchMessagesService` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { SearchMessagesService } from "@cometchat/chat-uikit-angular";` |
+| Injected with | `private svc = inject(SearchMessagesService);` — `providedIn: 'root'`, no module wiring |
+| Key methods | `search` · `loadMore` · `reset` |
+| Full API | See [Methods](#methods) |
+| Usage | See [Usage](#usage) |
+| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
The `SearchMessagesService` manages message search state using Angular signals. It handles SDK query building with keyword, attachment-type, and user/group scoping, plus pagination for loading more results.
## Import
diff --git a/ui-kit/angular/api-reference/templates-service.mdx b/ui-kit/angular/api-reference/templates-service.mdx
index 2eb695740..3774b91d4 100644
--- a/ui-kit/angular/api-reference/templates-service.mdx
+++ b/ui-kit/angular/api-reference/templates-service.mdx
@@ -2,6 +2,24 @@
title: CometChat Templates Service
description: SDK-wide template customization service for all list components
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | DI alternative to `*View` inputs — set a template once app-wide instead of passing it to every instance. NOT a custom-message-type registry. |
+| Class | `CometChatTemplatesService` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatTemplatesService } from "@cometchat/chat-uikit-angular";` |
+| Injected with | `private svc = inject(CometChatTemplatesService);` — `providedIn: 'root'`, no module wiring |
+| Key methods | `setSharedTemplates` · `getSharedTemplates` · `clearSharedTemplates` · `setConversationItemTemplate` · `setConversationLeadingTemplate` · `setConversationTitleTemplate` … +29 |
+| Reactive state (signals) | `sharedTemplates` · `conversationTemplates` · `userTemplates` · `groupTemplates` · `groupMemberTemplates` · `callLogTemplates` … +3 — use directly in templates, no subscription |
+| Reactive state (observables) | `sharedTemplates$` · `conversationTemplates$` · `userTemplates$` · `groupTemplates$` · `groupMemberTemplates$` · `callLogTemplates$` … +3 — `takeUntil(destroy$)` in `ngOnDestroy` |
+| Full API | See [Methods](#methods) |
+| Usage | See [Usage Examples](#usage-examples) |
+| Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatTemplatesService` provides centralized template customization across all CometChat list components. Register templates once and have them apply to conversations, users, groups, group members, call logs, and message list components.
## Import
diff --git a/ui-kit/angular/components/cometchat-action-bubble.mdx b/ui-kit/angular/components/cometchat-action-bubble.mdx
index 05de0050d..0067fd705 100644
--- a/ui-kit/angular/components/cometchat-action-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-action-bubble.mdx
@@ -2,6 +2,24 @@
title: "Action Bubble"
description: "A simple Angular component for displaying action/system messages in a chat interface"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatActionBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatActionBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-action-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | — (no outputs) |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatActionBubble` component is a simple presentational Angular component that displays action/system messages in a chat interface. These are messages like "User joined the group", "User left the group", or "Group name changed to X".
## Overview
diff --git a/ui-kit/angular/components/cometchat-ai-assistant-chat.mdx b/ui-kit/angular/components/cometchat-ai-assistant-chat.mdx
index 6eabdfe0a..c869bc665 100644
--- a/ui-kit/angular/components/cometchat-ai-assistant-chat.mdx
+++ b/ui-kit/angular/components/cometchat-ai-assistant-chat.mdx
@@ -3,6 +3,26 @@ title: "CometChatAIAssistantChat"
description: "Top-level orchestrator component for the AI assistant chat experience with real-time streaming, tool call dispatch, chat history, and suggestion pills."
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatAIAssistantChat` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-ai-assistant-chat` |
+| Standalone | Add `CometChatAIAssistantChat` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(backClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | see the page body |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
`CometChatAIAssistantChat` is the top-level orchestrator for the AI assistant chat experience. It wires together `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`, and the `CometChatAIAssistantChatHistory` sidebar into a single cohesive interface.
diff --git a/ui-kit/angular/components/cometchat-audio-bubble.mdx b/ui-kit/angular/components/cometchat-audio-bubble.mdx
index 74da4982e..a515cb1a9 100644
--- a/ui-kit/angular/components/cometchat-audio-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-audio-bubble.mdx
@@ -2,6 +2,25 @@
title: "Audio Bubble"
description: "A comprehensive Angular component for rendering audio messages with real-time waveform visualization, playback controls, download functionality, and caption support"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatAudioBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatAudioBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-audio-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(playStateChange)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatAudioBubble` component is a sophisticated audio message display component that renders audio messages with real-time waveform visualization and playback controls. It serves as the primary content renderer for audio-based messages in the CometChat Angular UIKit, handling everything from single audio display to complex multi-audio layouts with expand/collapse behavior.
## Overview
diff --git a/ui-kit/angular/components/cometchat-call-bubble.mdx b/ui-kit/angular/components/cometchat-call-bubble.mdx
index 468173643..bec828b2a 100644
--- a/ui-kit/angular/components/cometchat-call-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-call-bubble.mdx
@@ -2,6 +2,25 @@
title: "Call Bubble"
description: "An Angular component for displaying call messages in a chat interface with call type, status, duration, and optional action button"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCallBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatCallBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-call-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(buttonClick)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatCallBubble` component is a standalone Angular component that renders call messages within chat conversations. It displays call information including call type (audio/video), call status, duration, and an optional action button for call-back functionality.
## Overview
diff --git a/ui-kit/angular/components/cometchat-call-buttons.mdx b/ui-kit/angular/components/cometchat-call-buttons.mdx
index a4c70c387..a032e3f62 100644
--- a/ui-kit/angular/components/cometchat-call-buttons.mdx
+++ b/ui-kit/angular/components/cometchat-call-buttons.mdx
@@ -3,6 +3,28 @@ title: "Call Buttons"
description: "A standalone Angular component that provides voice and video call initiation buttons for user-to-user and group calls"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCallButtonsComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatCallButtonsComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-call-buttons` |
+| Standalone | Add `CometChatCallButtonsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(error)` — call initiation failures |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Bind `[user]`/`[group]`. The message header already renders call buttons, so check before adding a second set. |
+| Automatic behaviour | Call initiation and permission prompts are internal |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatCallButtons component renders voice and video call buttons for initiating calls to a user or group. It delegates call state management and initiation logic to an internal service, and displays the outgoing call overlay and ongoing call screen automatically when a call is in progress.
diff --git a/ui-kit/angular/components/cometchat-call-logs.mdx b/ui-kit/angular/components/cometchat-call-logs.mdx
index 822588078..0d06062cc 100644
--- a/ui-kit/angular/components/cometchat-call-logs.mdx
+++ b/ui-kit/angular/components/cometchat-call-logs.mdx
@@ -3,6 +3,27 @@ title: "Call Logs"
description: "A comprehensive Angular component for displaying call history with support for audio/video call initiation, custom templates, and real-time call overlays"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCallLogsComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatCallLogsComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-call-logs` |
+| Standalone | Add `CometChatCallLogsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` — emits the selected call log |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Wire `(itemClick)` → a detail view; see [Call Log Details](/ui-kit/angular/guides/call-log-details). |
+| Automatic behaviour | Pagination and live updates are automatic |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatCallLogs component displays a paginated, scrollable list of call history records for the logged-in user. Each call log entry shows the other party's avatar and name, the call direction (incoming, outgoing, or missed), the call type (audio or video), and the timestamp. Users can initiate new calls directly from the list and view real-time call overlays for outgoing and ongoing calls.
diff --git a/ui-kit/angular/components/cometchat-card-bubble.mdx b/ui-kit/angular/components/cometchat-card-bubble.mdx
index e59984deb..8f9fee095 100644
--- a/ui-kit/angular/components/cometchat-card-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-card-bubble.mdx
@@ -3,6 +3,25 @@ title: "Card Bubble"
description: "Angular component that renders a developer Card Message inside a message bubble using the prebuilt CometChat Cards renderer, with pure-forwarded card actions."
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCardBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatCardBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-card-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(onCardAction)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
The `CometChatCardBubbleComponent` renders a **developer Card Message** (`message.category === "card"`) as a card bubble inside a conversation. It is the card equivalent of [`CometChatTextBubble`](/ui-kit/angular/components/cometchat-text-bubble): the surrounding [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble) wrapper supplies the container, receipts, reactions, long-press options, reply and thread view — this component only replaces the **content view** with the rendered card.
## Overview
diff --git a/ui-kit/angular/components/cometchat-collaborative-document-bubble.mdx b/ui-kit/angular/components/cometchat-collaborative-document-bubble.mdx
index 939418a0e..75ad7c4d7 100644
--- a/ui-kit/angular/components/cometchat-collaborative-document-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-collaborative-document-bubble.mdx
@@ -2,6 +2,25 @@
title: "Collaborative Document Bubble"
description: "An Angular component for rendering collaborative document messages with banner images, localized text, and action buttons"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCollaborativeDocumentBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatCollaborativeDocumentBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-collaborative-document-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(buttonClick)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatCollaborativeDocumentBubble` component renders collaborative document messages within chat. It displays a banner image, title, subtitle, and an action button that opens the document in a new fullscreen window.
## Overview
diff --git a/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble.mdx b/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble.mdx
index 34ba29a95..bd42eae3a 100644
--- a/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble.mdx
@@ -2,6 +2,25 @@
title: "Collaborative Whiteboard Bubble"
description: "An Angular component for rendering collaborative whiteboard messages with banner images, localized text, and action buttons"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCollaborativeWhiteboardBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatCollaborativeWhiteboardBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-collaborative-whiteboard-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(buttonClick)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatCollaborativeWhiteboardBubble` component renders collaborative whiteboard messages within chat. It displays a banner image, title, subtitle, and an action button that opens the whiteboard in a new fullscreen window.
## Overview
diff --git a/ui-kit/angular/components/cometchat-conversation-item.mdx b/ui-kit/angular/components/cometchat-conversation-item.mdx
index 2cc5f2946..da6bec312 100644
--- a/ui-kit/angular/components/cometchat-conversation-item.mdx
+++ b/ui-kit/angular/components/cometchat-conversation-item.mdx
@@ -3,6 +3,25 @@ title: "Conversation Item"
description: "A focused Angular component for rendering a single conversation item with slot-based customization and granular event handling"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatConversationItemComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatConversationItemComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-conversation-item` |
+| Standalone | Add `CometChatConversationItemComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatConversationItem component is a standalone Angular component designed to render a single conversation item. It is part of the enterprise refactoring that decomposes the monolithic CometChatConversations component into smaller, focused pieces.
diff --git a/ui-kit/angular/components/cometchat-conversation-starter.mdx b/ui-kit/angular/components/cometchat-conversation-starter.mdx
index b2fb4ceda..1e9c06e95 100644
--- a/ui-kit/angular/components/cometchat-conversation-starter.mdx
+++ b/ui-kit/angular/components/cometchat-conversation-starter.mdx
@@ -2,6 +2,26 @@
title: "Conversation Starter"
description: "An AI-powered component that displays conversation starter suggestions for new or empty conversations"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatConversationStarterComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatConversationStarterComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-conversation-starter` |
+| Standalone | Add `CometChatConversationStarterComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(starterClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatConversationStarter` component displays AI-generated conversation starter suggestions as clickable chips. It integrates with the CometChat AI extension to generate up to 4 contextual prompts for starting a conversation.
## Overview
diff --git a/ui-kit/angular/components/cometchat-conversation-summary.mdx b/ui-kit/angular/components/cometchat-conversation-summary.mdx
index 82d0e2632..d4e2282b0 100644
--- a/ui-kit/angular/components/cometchat-conversation-summary.mdx
+++ b/ui-kit/angular/components/cometchat-conversation-summary.mdx
@@ -2,6 +2,26 @@
title: "Conversation Summary"
description: "An AI-powered component that displays a conversation summary panel with loading, empty, and error states"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatConversationSummaryComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatConversationSummaryComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-conversation-summary` |
+| Standalone | Add `CometChatConversationSummaryComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | — (no outputs) |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatConversationSummary` component displays an AI-generated conversation summary in a panel with a localized title, close button, and body area. It fetches the summary via a provided callback on initialization, showing a loading shimmer during the fetch, then transitions to loaded, empty, or error state.
## Overview
diff --git a/ui-kit/angular/components/cometchat-conversations.mdx b/ui-kit/angular/components/cometchat-conversations.mdx
index 695589a0f..f269cb019 100644
--- a/ui-kit/angular/components/cometchat-conversations.mdx
+++ b/ui-kit/angular/components/cometchat-conversations.mdx
@@ -3,6 +3,27 @@ title: "Conversations"
description: "A comprehensive Angular component for displaying and managing real-time chat conversations with extensive customization options"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatConversationsComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatConversationsComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-conversations` |
+| Standalone | Add `CometChatConversationsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` — emits the clicked conversation |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Wire `(itemClick)` → derive the subject with `conversation.getConversationWith()` → bind it to `` / `` / ``. Pass the same value back as `[activeConversation]` or the open row never highlights. Prefer the exported `ChatStateService` over a local field — see [New Chat](/ui-kit/angular/guides/new-chat). |
+| Automatic behaviour | Messages, typing, receipts, presence and unread counts are handled internally — wire no SDK listeners |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatConversations component displays a real-time list of conversations (both user and group conversations) for the logged-in user. It provides a rich set of features including real-time updates, search functionality, selection modes, keyboard navigation, and extensive customization through templates and styling.
diff --git a/ui-kit/angular/components/cometchat-delete-bubble.mdx b/ui-kit/angular/components/cometchat-delete-bubble.mdx
index b7642dcea..636792f38 100644
--- a/ui-kit/angular/components/cometchat-delete-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-delete-bubble.mdx
@@ -2,6 +2,24 @@
title: "Delete Bubble"
description: "A simple Angular component for displaying deleted message placeholders in a chat interface"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatDeleteBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatDeleteBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-delete-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | — (no outputs) |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatDeleteBubble` component is a simple presentational Angular component that displays a placeholder indicating a message has been deleted. Unlike other message bubble components, it does NOT accept a CometChat message object - only simple inputs for styling and text customization.
## Overview
diff --git a/ui-kit/angular/components/cometchat-file-bubble.mdx b/ui-kit/angular/components/cometchat-file-bubble.mdx
index 8fcabf9d0..eed2bce14 100644
--- a/ui-kit/angular/components/cometchat-file-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-file-bubble.mdx
@@ -2,6 +2,24 @@
title: "File Bubble"
description: "A comprehensive Angular component for rendering file attachment messages with inline expand/collapse, file type icons, and caption support"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatFileBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatFileBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-file-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | — (no outputs) |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The File Bubble component renders file attachments within chat messages while maintaining visual consistency with the design system and ensuring full accessibility:
- **Message Object Processing**: Extracts attachments and metadata from CometChat.MediaMessage objects
diff --git a/ui-kit/angular/components/cometchat-group-item.mdx b/ui-kit/angular/components/cometchat-group-item.mdx
index 52f9c8209..ff6e07e4f 100644
--- a/ui-kit/angular/components/cometchat-group-item.mdx
+++ b/ui-kit/angular/components/cometchat-group-item.mdx
@@ -3,6 +3,26 @@ title: "Group Item"
description: "A standalone Angular component for rendering a single group item with avatar, group type indicator, member count, and context menu support"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatGroupItemComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatGroupItemComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-group-item` |
+| Standalone | Add `CometChatGroupItemComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatGroupItem component renders a single group entry within a list. It displays the group's icon/avatar, name, type indicator (public, private, password-protected), and member count. The component supports custom templates for all visual sections, integrates a context menu for group-specific actions, and provides full keyboard accessibility with ARIA support.
diff --git a/ui-kit/angular/components/cometchat-group-member-item.mdx b/ui-kit/angular/components/cometchat-group-member-item.mdx
index 963344c5c..4442a72db 100644
--- a/ui-kit/angular/components/cometchat-group-member-item.mdx
+++ b/ui-kit/angular/components/cometchat-group-member-item.mdx
@@ -3,6 +3,26 @@ title: "Group Member Item"
description: "A standalone Angular component for rendering a single group member item with avatar, role badge, status indicator, and context menu support"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatGroupMemberItemComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatGroupMemberItemComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-group-member-item` |
+| Standalone | Add `CometChatGroupMemberItemComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatGroupMemberItem component renders a single group member entry within a member list. It displays the member's avatar, name, online/offline status indicator, and a role badge (owner, admin, moderator). The component supports custom templates for all visual sections, integrates a context menu for member-specific actions (kick, ban, change scope), and provides full keyboard accessibility with ARIA support.
diff --git a/ui-kit/angular/components/cometchat-group-members.mdx b/ui-kit/angular/components/cometchat-group-members.mdx
index 68fbdf5de..34e63c41a 100644
--- a/ui-kit/angular/components/cometchat-group-members.mdx
+++ b/ui-kit/angular/components/cometchat-group-members.mdx
@@ -3,6 +3,27 @@ title: "Group Members"
description: "A comprehensive Angular component for displaying and managing group members with search, scope management, and extensive customization options"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatGroupMembersComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatGroupMembersComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-group-members` |
+| Standalone | Add `CometChatGroupMembersComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` — emits the selected member |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Bind `[group]`. View/kick/ban/scope-change are built in; the BANNED list has no component and comes from the SDK. Scope change uses ``. |
+| Automatic behaviour | Membership updates arrive in real time |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatGroupMembers component displays a real-time, scrollable list of members belonging to a specific CometChat group. It provides built-in search functionality, allowing you to locate any specific member swiftly. For each member listed, the component displays the member's name and avatar, along with their scope (owner, admin, moderator, or participant) and online/offline status.
diff --git a/ui-kit/angular/components/cometchat-groups.mdx b/ui-kit/angular/components/cometchat-groups.mdx
index fc43b0c46..f996d7dd2 100644
--- a/ui-kit/angular/components/cometchat-groups.mdx
+++ b/ui-kit/angular/components/cometchat-groups.mdx
@@ -3,6 +3,27 @@ title: "Groups"
description: "A comprehensive Angular component for displaying and managing real-time group lists with extensive customization options"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatGroupsComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatGroupsComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-groups` |
+| Standalone | Add `CometChatGroupsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` — emits the selected group |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Wire `(itemClick)` → set the active group → bind it to the message pane. |
+| Automatic behaviour | Membership changes and pagination are automatic |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatGroups component displays a real-time, scrollable list of groups with support for search, selection modes, and extensive customization. It provides an integral search functionality, allowing you to locate any specific group swiftly and easily. For each group listed, the component displays the group's name by default, in conjunction with their avatar when available. Furthermore, it includes a group type indicator (public, private, or password-protected) and member count.
diff --git a/ui-kit/angular/components/cometchat-image-bubble.mdx b/ui-kit/angular/components/cometchat-image-bubble.mdx
index 2d4601ec9..2ab94ed60 100644
--- a/ui-kit/angular/components/cometchat-image-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-image-bubble.mdx
@@ -2,6 +2,25 @@
title: "Image Bubble"
description: "A comprehensive Angular component for rendering image messages with grid layouts, fullscreen gallery viewer, and caption support"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatImageBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatImageBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-image-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(imageClick)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatImageBubble` component is a sophisticated image message display component that renders image messages with advanced layout capabilities. It serves as the primary content renderer for image-based messages in the CometChat Angular UIKit, handling everything from single image display to complex multi-image grid layouts with fullscreen viewing capabilities.
## Overview
diff --git a/ui-kit/angular/components/cometchat-incoming-call.mdx b/ui-kit/angular/components/cometchat-incoming-call.mdx
index 15dbc27fd..dc482154e 100644
--- a/ui-kit/angular/components/cometchat-incoming-call.mdx
+++ b/ui-kit/angular/components/cometchat-incoming-call.mdx
@@ -3,6 +3,28 @@ title: "Incoming Call"
description: "A standalone Angular component that displays an incoming call notification with accept and decline actions"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatIncomingCallComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatIncomingCallComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-incoming-call` |
+| Standalone | Add `CometChatIncomingCallComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(callAccepted)` — emits the accepted call |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Mount at **app root**, not inside the chat route, or calls stop ringing on every other route. Requires `@cometchat/calls-sdk-javascript` and calling enabled in the dashboard. |
+| Automatic behaviour | Ringing, decline and the ongoing-call handoff are internal |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatIncomingCall component renders an incoming call notification card when a user receives a voice or video call. It displays the caller's name, avatar, and call type icon using a `CometChatListItem`, along with Accept and Decline buttons. After accepting, it automatically renders the ongoing call screen.
diff --git a/ui-kit/angular/components/cometchat-markdown-renderer.mdx b/ui-kit/angular/components/cometchat-markdown-renderer.mdx
index 0d202021f..7b7fbf01c 100644
--- a/ui-kit/angular/components/cometchat-markdown-renderer.mdx
+++ b/ui-kit/angular/components/cometchat-markdown-renderer.mdx
@@ -3,6 +3,23 @@ title: "CometChatMarkdownRenderer"
description: "Zero-dependency Angular component that parses and renders markdown to HTML with streaming support, XSS sanitization, and a copy button per code block."
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatMarkdownRenderer` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatMarkdownRenderer } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| Standalone | Add `CometChatMarkdownRenderer` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(imageClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | see the page body |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
`CometChatMarkdownRenderer` converts a markdown string to sanitized HTML using a custom TypeScript parser — no third-party markdown library is required. It is used internally by `CometChatAIAssistantMessageBubble` (completed messages) and `CometChatStreamMessageBubble` (live streaming), but can be used standalone anywhere you need markdown rendering.
diff --git a/ui-kit/angular/components/cometchat-message-bubble.mdx b/ui-kit/angular/components/cometchat-message-bubble.mdx
index b4d7c8c12..6cf0fda50 100644
--- a/ui-kit/angular/components/cometchat-message-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-message-bubble.mdx
@@ -2,6 +2,23 @@
title: "Message Bubble"
description: "A flexible container component for rendering chat messages with configurable view slots, message options, and support for multiple message types"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatMessageBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatMessageBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-message-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(optionClick)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | see the page body |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatMessageBubble` component is a versatile container component that renders chat messages with configurable view slots. It serves as the primary wrapper for displaying messages in the CometChat Angular UIKit, handling message alignment, options menus, status indicators, and content rendering based on message type.
## Overview
diff --git a/ui-kit/angular/components/cometchat-message-composer.mdx b/ui-kit/angular/components/cometchat-message-composer.mdx
index 08ed8c3af..ff2325158 100644
--- a/ui-kit/angular/components/cometchat-message-composer.mdx
+++ b/ui-kit/angular/components/cometchat-message-composer.mdx
@@ -3,6 +3,27 @@ title: "Message Composer"
description: "A comprehensive Angular component for composing and sending messages with rich text editing, attachments, emoji picker, voice recording, and @mentions"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatMessageComposerComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatMessageComposerComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-message-composer` |
+| Standalone | Add `CometChatMessageComposerComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(sendButtonClick)` — fires after the message is sent |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Bind the same `[user]`/`[group]` as the header and list, and `[parentMessageId]` when composing inside a thread. Sending is handled internally; the output is for reacting, not for sending yourself. |
+| Automatic behaviour | Attachments, voice notes, emoji, mentions and typing events are built in |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatMessageComposer is a feature-rich Angular component for composing and sending messages in chat applications. It provides a comprehensive set of features including text input, file attachments, emoji picker, voice recording, @mentions, and optional rich text editing capabilities similar to Slack.
@@ -271,6 +292,28 @@ Both layouts work seamlessly with rich text editing:
**Note:** All composer features (attachments, emoji picker, voice recording, mentions, etc.) work identically in both layouts. The only difference is the visual arrangement of elements.
+## Adding a custom attachment option
+
+`attachmentOptions` **appends** to the built-in attachment menu — it does not replace it. Supplying one option leaves image, video, audio, file, poll and the collaborative document/whiteboard entries in place, with yours added after them in array order.
+
+```ts
+import { CometChatMessageComposerAction } from '@cometchat/chat-uikit-angular';
+
+readonly attachmentOptions = [
+ new CometChatMessageComposerAction({
+ id: 'location',
+ title: 'Location',
+ iconURL: 'assets/location.svg',
+ onClick: () => this.shareLocation(),
+ }),
+];
+```
+```html
+
+```
+
+To remove a built-in option instead, use its `hide*` input (`hidePollsOption`, `hideCollaborativeDocumentOption`, and so on) rather than passing a replacement array.
+
## Properties
### Entity Configuration Properties
@@ -302,7 +345,7 @@ Both layouts work seamlessly with rich text editing:
| Property | Type | Default | Description |
|----------|------|---------|-------------|
-| `attachmentOptions` | `CometChatMessageComposerAction[]` | `undefined` | Custom attachment options for the attachment menu |
+| `attachmentOptions` | `CometChatMessageComposerAction[]` | `undefined` | Custom attachment options, **appended to** the built-in menu (image, video, audio, file, poll, collaborative document/whiteboard) — they do not replace it. Yours appear after the built-ins, in array order. |
| `enableMultipleAttachments` | `boolean` | `true` | Enables the multi-attachment staging tray and batch send. When `true` (default), selecting attachments stages them in a tray for one batched send; when `false`, each attachment reverts to the legacy send-immediately behavior. See [Multiple Attachments](#multiple-attachments). |
### Hide Option Properties
diff --git a/ui-kit/angular/components/cometchat-message-header.mdx b/ui-kit/angular/components/cometchat-message-header.mdx
index 609d5bff2..f3764176f 100644
--- a/ui-kit/angular/components/cometchat-message-header.mdx
+++ b/ui-kit/angular/components/cometchat-message-header.mdx
@@ -3,6 +3,27 @@ title: "Message Header"
description: "A feature-rich Angular component for displaying the header section of a chat conversation with real-time status updates, typing indicators, and action buttons"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatMessageHeaderComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatMessageHeaderComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-message-header` |
+| Standalone | Add `CometChatMessageHeaderComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(backClick)` — for the mobile one-pane layout |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Bind the same subject as the list and composer. On mobile wire `(backClick)` to clear the active chat so the list returns — see [Placement](/ui-kit/angular/angular-tab-based-chat). |
+| Automatic behaviour | Presence, typing indicator and the voice/video call buttons render automatically (call buttons respect `COMETCHAT_GLOBAL_CONFIG`) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatMessageHeader component displays the header section of a chat conversation. It shows information about the user or group being chatted with, including real-time status updates, typing indicators, and provides action buttons for calls, search, and AI-powered conversation summary.
diff --git a/ui-kit/angular/components/cometchat-message-information.mdx b/ui-kit/angular/components/cometchat-message-information.mdx
index e95952cc4..87654f6c7 100644
--- a/ui-kit/angular/components/cometchat-message-information.mdx
+++ b/ui-kit/angular/components/cometchat-message-information.mdx
@@ -2,6 +2,26 @@
title: "Message Information"
description: "A panel component for displaying detailed message information including delivery and read receipts"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatMessageInformationComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatMessageInformationComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-message-information` |
+| Standalone | Add `CometChatMessageInformationComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(closeClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatMessageInformation` component displays detailed information about a message, including its content preview, sent timestamp, and delivery/read receipts with user avatars, names, and timestamps. It supports both one-on-one and group conversations with pagination for large groups.
## Overview
diff --git a/ui-kit/angular/components/cometchat-message-list.mdx b/ui-kit/angular/components/cometchat-message-list.mdx
index 262b6c0dd..a30668584 100644
--- a/ui-kit/angular/components/cometchat-message-list.mdx
+++ b/ui-kit/angular/components/cometchat-message-list.mdx
@@ -3,6 +3,27 @@ title: "Message List"
description: "A comprehensive Angular component for displaying real-time chat messages with extensive customization option and accessibility features"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatMessageListComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatMessageListComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-message-list` |
+| Standalone | Add `CometChatMessageListComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(threadRepliesClick)` — emits the parent message to open in a thread |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Bind `[user]` **or** `[group]` (never both). Wire `(threadRepliesClick)` → render `` plus a second list with `[parentMessageId]`, or hide the reply affordance — a wired-but-dead reply button is a defect. See [Threaded Messages](/ui-kit/angular/guides/threaded-messages). |
+| Automatic behaviour | Real-time delivery, receipts, reactions, and every message-type bubble are rendered by the list — do not hand-roll bubbles |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | see the page body |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatMessageList component displays a real-time list of messages for the active conversation. It is a composite component that effectively manages real-time operations and includes various types of messages such as Text Messages, Media Messages, Stickers, and more.
@@ -293,10 +314,30 @@ export class FilteredMessagesComponent implements OnInit {
To fetch messages for a specific entity, you need to provide either a `User` or `Group` object. The component will not display any messages without one of these inputs.
+
+**Supplying `messagesRequestBuilder` REPLACES the component's default builder — it does not merge with it.**
+
+When you leave the input unset, the component builds its own request with a default limit, `setTypes(DEFAULT_MESSAGE_TYPES)` and `setCategories(DEFAULT_MESSAGE_CATEGORIES)`. The moment you pass a builder, yours is used as-is and **none of those defaults are applied**. A builder that omits types and categories therefore fetches far less than the list shows by default, which reads as "my messages disappeared" rather than as a configuration mistake.
+
+Spread the exported defaults and add to them, rather than starting from an empty builder:
+
+```typescript
+import { DEFAULT_MESSAGE_TYPES, DEFAULT_MESSAGE_CATEGORIES } from "@cometchat/chat-uikit-angular";
+
+this.messagesBuilder = new CometChat.MessagesRequestBuilder()
+ .setLimit(30)
+ .setTypes([...DEFAULT_MESSAGE_TYPES, "location"]) // keep the built-ins, add yours
+ .setCategories([...DEFAULT_MESSAGE_CATEGORIES, CometChat.CATEGORY_CUSTOM]);
+```
+
+
-The following parameters in `messagesRequestBuilder` will always be overridden by the component:
-1. UID (set from the `user` input)
-2. GUID (set from the `group` input)
+Whichever builder is used, the component always applies these on top of it — setting them yourself has no effect:
+
+1. **UID** — from the `user` input
+2. **GUID** — from the `group` input
+3. **`parentMessageId`** — from the `parentMessageId` input, when rendering a thread
+4. **`hideReplies`** — enabled in the main list, disabled in thread mode
@@ -385,6 +426,15 @@ This section provides a complete reference of all @Input properties, @Output eve
| `messagePrivatelyClick` | `{ message: CometChat.BaseMessage, user: CometChat.User }` | Emitted when "Message Privately" option is clicked in a group chat. |
| `replyClick` | `CometChat.BaseMessage` | Emitted when the "Reply" option is clicked on a message. Handle this to show reply preview in composer. |
+
+**These outputs are affordances, not behaviour — an unbound output leaves a visible control that does nothing.**
+
+The thread-replies indicator is the one that bites. It renders automatically on any message that has replies, and it is clickable whether or not you bind `(threadRepliesClick)`. Leave it unbound and the user clicks it, nothing happens, and there is no error in the console to explain why — the component simply emitted into a listener that was never attached.
+
+Either wire the output to a thread surface (`` plus a second `` bound to `[parentMessageId]`), or hide the affordance. Do not ship it visible and dead. The same applies to `smartReplyClick`, `conversationStarterClick` and `messagePrivatelyClick`.
+
+
+
### Methods
The following public methods are available on the CometChatMessageList component instance:
diff --git a/ui-kit/angular/components/cometchat-outgoing-call.mdx b/ui-kit/angular/components/cometchat-outgoing-call.mdx
index 1921e8286..991e69dfe 100644
--- a/ui-kit/angular/components/cometchat-outgoing-call.mdx
+++ b/ui-kit/angular/components/cometchat-outgoing-call.mdx
@@ -3,6 +3,26 @@ title: "Outgoing Call"
description: "A standalone Angular component that displays an outgoing call overlay with receiver information and a cancel button"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatOutgoingCallComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatOutgoingCallComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-outgoing-call` |
+| Standalone | Add `CometChatOutgoingCallComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(callCanceled)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatOutgoingCall component renders a full-screen outgoing call overlay when a user initiates a voice or video call. It displays the receiver's name, a "Calling..." subtitle, the receiver's avatar, and a cancel button. The component plays an outgoing ringtone and provides focus-trapped dialog behavior.
diff --git a/ui-kit/angular/components/cometchat-poll-bubble.mdx b/ui-kit/angular/components/cometchat-poll-bubble.mdx
index 6e5ad24bb..3be18fa6a 100644
--- a/ui-kit/angular/components/cometchat-poll-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-poll-bubble.mdx
@@ -2,6 +2,25 @@
title: "Poll Bubble"
description: "An Angular component for displaying poll messages with voting functionality in a chat interface"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatPollBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatPollBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-poll-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(voteSubmit)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatPollBubble` component is a standalone Angular component that renders poll messages with voting functionality within chat conversations. It extracts poll data from CometChat CustomMessage metadata and displays the poll question, voting options with radio buttons, vote counts, progress bars, and voter avatars.
## Overview
diff --git a/ui-kit/angular/components/cometchat-reaction-info.mdx b/ui-kit/angular/components/cometchat-reaction-info.mdx
index 32bb21e0b..1b98ce123 100644
--- a/ui-kit/angular/components/cometchat-reaction-info.mdx
+++ b/ui-kit/angular/components/cometchat-reaction-info.mdx
@@ -2,6 +2,26 @@
title: "Reaction Info"
description: "A tooltip component that displays who reacted with a specific emoji on a message"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatReactionInfoComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatReactionInfoComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-reaction-info` |
+| Standalone | Add `CometChatReactionInfoComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | — (no outputs) |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatReactionInfo` component displays a tooltip showing the names of users who reacted with a specific emoji on a message. It fetches reaction details from the CometChat SDK and formats the display with "You" for the logged-in user and an "and X others" suffix when there are more reactors than the fetch limit.
## Overview
diff --git a/ui-kit/angular/components/cometchat-reaction-list.mdx b/ui-kit/angular/components/cometchat-reaction-list.mdx
index 8d8d5aa10..98f2910e0 100644
--- a/ui-kit/angular/components/cometchat-reaction-list.mdx
+++ b/ui-kit/angular/components/cometchat-reaction-list.mdx
@@ -2,6 +2,25 @@
title: "Reaction List"
description: "A component for displaying all users who reacted to a message, with emoji filtering and pagination support"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatReactionListComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatReactionListComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-reaction-list` |
+| Standalone | Add `CometChatReactionListComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | see the page body |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatReactionList` component displays all users who have reacted to a message. It groups reactions by emoji type and allows filtering by specific emoji, providing a comprehensive view of message reactions with pagination support.
## Overview
diff --git a/ui-kit/angular/components/cometchat-reactions.mdx b/ui-kit/angular/components/cometchat-reactions.mdx
index 1a7aa5a9b..e67378c12 100644
--- a/ui-kit/angular/components/cometchat-reactions.mdx
+++ b/ui-kit/angular/components/cometchat-reactions.mdx
@@ -2,6 +2,26 @@
title: "Reactions"
description: "A component that renders emoji reaction pills on a message bubble with overflow handling and popover support"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatReactionsComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatReactionsComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-reactions` |
+| Standalone | Add `CometChatReactionsComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(reactionClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatReactions` component renders emoji reaction pills on a message bubble's footer area. It dynamically calculates how many pills to show based on the parent container width and provides overflow handling via a "+N" button with a popover list.
## Overview
diff --git a/ui-kit/angular/components/cometchat-search.mdx b/ui-kit/angular/components/cometchat-search.mdx
index b11eab162..f81563490 100644
--- a/ui-kit/angular/components/cometchat-search.mdx
+++ b/ui-kit/angular/components/cometchat-search.mdx
@@ -3,6 +3,27 @@ title: "CometChatSearch"
description: "A unified Angular search component for cross-entity search across conversations and messages with filter chips, scoped search, and template customization"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatSearchComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatSearchComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-search` |
+| Standalone | Add `CometChatSearchComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(messageClick)` — emits the matched message to jump to |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Set scope via `[searchIn]` / `[searchFilters]`; pass `[uid]`/`[guid]` to scope to one chat. Render as a column, not an overlay — see [Search Messages](/ui-kit/angular/guides/search-messages). |
+| Automatic behaviour | Debounce and pagination are handled internally |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatSearch component provides a unified search experience across conversations and messages. It combines a debounced search input, a filter chip bar, and two lazy-loaded result sections (conversations and messages) into a single, cohesive UI.
diff --git a/ui-kit/angular/components/cometchat-smart-replies.mdx b/ui-kit/angular/components/cometchat-smart-replies.mdx
index b1e2460a2..1194dcf6e 100644
--- a/ui-kit/angular/components/cometchat-smart-replies.mdx
+++ b/ui-kit/angular/components/cometchat-smart-replies.mdx
@@ -2,6 +2,26 @@
title: "Smart Replies"
description: "An AI-powered component that displays smart reply suggestions based on the last received message"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatSmartRepliesComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatSmartRepliesComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-smart-replies` |
+| Standalone | Add `CometChatSmartRepliesComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(replyClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatSmartReplies` component displays AI-generated reply suggestions as clickable chips. It integrates with the CometChat AI extension to analyze the last received message and generate up to 3 contextual reply options.
## Overview
diff --git a/ui-kit/angular/components/cometchat-sticker-bubble.mdx b/ui-kit/angular/components/cometchat-sticker-bubble.mdx
index ca06a9984..edd1e4f0f 100644
--- a/ui-kit/angular/components/cometchat-sticker-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-sticker-bubble.mdx
@@ -2,6 +2,24 @@
title: "Sticker Bubble"
description: "A standalone Angular component for rendering sticker messages with automatic URL extraction and alignment support"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatStickerBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatStickerBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-sticker-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | — (no outputs) |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatStickerBubble` component is a presentational Angular component that renders sticker messages as images within the chat interface. It extracts the sticker image URL from the message's metadata or custom data using a priority-based fallback chain and displays it with proper sizing, alignment, and accessibility support.
## Overview
diff --git a/ui-kit/angular/components/cometchat-stickers-keyboard.mdx b/ui-kit/angular/components/cometchat-stickers-keyboard.mdx
index 127faaffa..feabf746e 100644
--- a/ui-kit/angular/components/cometchat-stickers-keyboard.mdx
+++ b/ui-kit/angular/components/cometchat-stickers-keyboard.mdx
@@ -2,6 +2,26 @@
title: "Stickers Keyboard"
description: "A component for browsing and selecting stickers organized by category tabs with a grid layout"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatStickersKeyboardComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatStickersKeyboardComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-stickers-keyboard` |
+| Standalone | Add `CometChatStickersKeyboardComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(stickerClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatStickersKeyboard` component provides a browsable sticker picker that fetches stickers from the CometChat stickers extension. Stickers are organized by category tabs with a grid layout, supporting loading, empty, and error states.
## Overview
diff --git a/ui-kit/angular/components/cometchat-text-bubble.mdx b/ui-kit/angular/components/cometchat-text-bubble.mdx
index 2554b9abf..8f3d67fa9 100644
--- a/ui-kit/angular/components/cometchat-text-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-text-bubble.mdx
@@ -2,6 +2,25 @@
title: "Text Bubble"
description: "A comprehensive Angular component for rendering text messages with rich formatting, link previews, translations, mentions, and intelligent content truncation"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatTextBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatTextBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-text-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(linkClick)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatTextBubble` component is a sophisticated message display component that renders text messages with rich formatting capabilities. It serves as the primary content renderer for text-based messages in the CometChat Angular UIKit, handling everything from simple text display to complex features like link previews, translations, mentions, and rich text formatting.
## Overview
diff --git a/ui-kit/angular/components/cometchat-thread-header.mdx b/ui-kit/angular/components/cometchat-thread-header.mdx
index f4a4cd6ba..844a95fa0 100644
--- a/ui-kit/angular/components/cometchat-thread-header.mdx
+++ b/ui-kit/angular/components/cometchat-thread-header.mdx
@@ -2,6 +2,28 @@
title: "Thread Header"
description: "A header component for threaded message views displaying the parent message preview, reply count, and close button"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatThreadHeaderComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatThreadHeaderComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-thread-header` |
+| Standalone | Add `CometChatThreadHeaderComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(closeClick)` — emits when the thread panel should close |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Bind `[parentMessage]` from the list's `(threadRepliesClick)`. Closing must restore the prior layout exactly. |
+| Automatic behaviour | Reply count updates live |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatThreadHeader` component displays a header bar for threaded message views. It shows a truncated preview of the parent message, the reply count, and a close button to return to the main chat. Media parent messages display an appropriate icon (image, video, audio, file).
## Overview
diff --git a/ui-kit/angular/components/cometchat-user-item.mdx b/ui-kit/angular/components/cometchat-user-item.mdx
index d6ad6a7c1..58f4792c6 100644
--- a/ui-kit/angular/components/cometchat-user-item.mdx
+++ b/ui-kit/angular/components/cometchat-user-item.mdx
@@ -3,6 +3,26 @@ title: "User Item"
description: "A standalone Angular component for rendering a single user item with avatar, status indicator, custom templates, and context menu support"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatUserItemComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatUserItemComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-user-item` |
+| Standalone | Add `CometChatUserItemComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatUserItem component renders a single user entry within a list. It displays the user's avatar, name, and online/offline status indicator, and supports custom templates for all visual sections. The component integrates a context menu for user-specific actions and provides full keyboard accessibility with ARIA support.
diff --git a/ui-kit/angular/components/cometchat-users.mdx b/ui-kit/angular/components/cometchat-users.mdx
index 671e47d29..6e8107f22 100644
--- a/ui-kit/angular/components/cometchat-users.mdx
+++ b/ui-kit/angular/components/cometchat-users.mdx
@@ -3,6 +3,27 @@ title: "Users"
description: "A comprehensive Angular component for displaying and managing real-time user lists with extensive customization options"
---
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatUsersComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatUsersComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-users` |
+| Standalone | Add `CometChatUsersComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
+| Primary output | `(itemClick)` — emits the selected user |
+| Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
+| Stitching | Wire `(itemClick)` → set the active user → bind it to the message pane. Same shape as conversations. |
+| Automatic behaviour | Presence and pagination are automatic |
+| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChatUsers component displays a real-time, scrollable list of users with support for search, selection modes, and extensive customization. It provides an integral search functionality, allowing you to locate any specific user swiftly and easily. For each user listed, the component displays the user's name by default, in conjunction with their avatar when available. Furthermore, it includes a status indicator, visually informing you whether a user is currently online or offline.
diff --git a/ui-kit/angular/components/cometchat-video-bubble.mdx b/ui-kit/angular/components/cometchat-video-bubble.mdx
index 230b3cec4..58e532e7b 100644
--- a/ui-kit/angular/components/cometchat-video-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-video-bubble.mdx
@@ -2,6 +2,25 @@
title: "Video Bubble"
description: "A comprehensive Angular component for rendering video messages with thumbnails, play overlays, duration badges, and fullscreen video player"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatVideoBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatVideoBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-video-bubble` |
+| Mounting | Rendered **by** `` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(videoClick)` |
+| Prerequisites | A rendered `` — the bubble has no standalone lifecycle |
+| Full props | See [Properties](#properties) |
+| Events | See [Events](#events) |
+| Customization | See [Customization](#customization) |
+| Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The `CometChatVideoBubble` component is a sophisticated video message display component that renders video messages with advanced layout capabilities. It serves as the primary content renderer for video-based messages in the CometChat Angular UIKit, handling everything from single video display to complex multi-video grid layouts with fullscreen playback capabilities.
## Overview
diff --git a/ui-kit/angular/customization/global-config.mdx b/ui-kit/angular/customization/global-config.mdx
index 17cfe3652..760a3f4f1 100644
--- a/ui-kit/angular/customization/global-config.mdx
+++ b/ui-kit/angular/customization/global-config.mdx
@@ -3,6 +3,19 @@ title: "Global Configuration"
description: "Centralized configuration for CometChat Angular UIKit components using the COMETCHAT_GLOBAL_CONFIG injection token"
---
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | App-wide kit defaults through one injection token, instead of repeating the same input on every component instance. |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Key symbols | `COMETCHAT_GLOBAL_CONFIG` |
+| Common trap | Not knowing it is there — a component appearing to ignore a default (call buttons hidden, say) is usually global config, not the component. |
+| On this page | [Setup](#setup) · [Configuration Properties](#configuration-properties) · [Components That Read GlobalConfig](#components-that-read-globalconfig) |
+| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChat Angular UIKit provides a centralized configuration system through the `COMETCHAT_GLOBAL_CONFIG` injection token. This allows you to set default values for common properties across all UIKit components from a single location, without having to pass the same inputs to every component instance.
diff --git a/ui-kit/angular/customization/theming.mdx b/ui-kit/angular/customization/theming.mdx
index 305fca53c..674725c1b 100644
--- a/ui-kit/angular/customization/theming.mdx
+++ b/ui-kit/angular/customization/theming.mdx
@@ -2,6 +2,19 @@
title: Theming
description: "Customize the look and feel of CometChat UIKit using CSS variables"
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Brand the kit with `--cometchat-*` CSS variables, and switch or follow light/dark. |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Key symbols | `ThemeService` · `initFromPreference()` · `toggleTheme()` · `--cometchat-primary-color` |
+| Common trap | Targeting generated class names, or fighting the kit with `!important`. If a token is not applying, the kit stylesheet is not registered in `angular.json` — override variables, not internals. Note `ThemeService` applies and follows the OS but does **not** persist a manual choice. |
+| On this page | [How It Works](#how-it-works) · [Light / Dark Mode](#light-dark-mode) · [Customizing Colors](#customizing-colors) |
+| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
The Angular UIKit uses a CSS variable-based theming system. There are no theme objects or style input props — all customization is done by overriding CSS variables in your global stylesheet.
## How It Works
@@ -59,6 +72,44 @@ export class MyComponent {
|---|---|
| `setTheme(theme)` | Set `'light'` or `'dark'` |
| `toggleTheme()` | Flip between light and dark |
+| `initFromPreference()` | Apply the theme that matches the OS `prefers-color-scheme` |
+| `currentTheme` | Signal holding the applied theme — read it to render a toggle's state |
+
+### Matching the system theme
+
+`ThemeService` follows the operating system automatically. You do not need a `matchMedia` recipe of your own: the service reads `prefers-color-scheme` in its constructor via `initFromPreference()`, and registers a `change` listener so the UI keeps following the OS while the app is open. It writes `data-theme` through Angular's `DOCUMENT` token, so it is SSR-safe.
+
+
+**A manual choice is not sticky — know this before you build a theme toggle.**
+
+Two behaviours surprise people, and both are current as of `@cometchat/chat-uikit-angular@5.1.0`:
+
+1. **The OS listener overrides a manual choice.** Calling `setTheme('dark')` applies immediately, but the next time the OS switches (for example at sunset) the listener applies the OS theme and discards the user's selection.
+2. **Nothing is persisted.** `setTheme()` and `toggleTheme()` do not write to `localStorage`, so any manual choice is gone after a reload and the app returns to the OS theme.
+
+If your product needs a sticky preference, own it in your own app: persist the choice, and re-apply it after the service initialises.
+
+```typescript
+import { Component, effect, inject } from '@angular/core';
+import { ThemeService } from '@cometchat/chat-uikit-angular';
+
+@Component({ /* … */ })
+export class ThemeToggle {
+ private themeService = inject(ThemeService);
+
+ constructor() {
+ // Re-apply a stored preference over the OS default on startup.
+ const saved = localStorage.getItem('app-theme');
+ if (saved === 'light' || saved === 'dark') this.themeService.setTheme(saved);
+
+ // Persist every subsequent change yourself.
+ effect(() => localStorage.setItem('app-theme', this.themeService.currentTheme()));
+ }
+
+ toggle() { this.themeService.toggleTheme(); }
+}
+```
+
> **SSR Note:** Always use Angular's `DOCUMENT` injection token instead of `document` directly.
diff --git a/ui-kit/angular/guides/rich-text-formatting.mdx b/ui-kit/angular/guides/rich-text-formatting.mdx
index b81bd7ebc..4b05f9437 100644
--- a/ui-kit/angular/guides/rich-text-formatting.mdx
+++ b/ui-kit/angular/guides/rich-text-formatting.mdx
@@ -1,4 +1,21 @@
-# Rich Text Formatting Guide
+---
+title: "Rich Text Formatting"
+sidebarTitle: "Rich Text Formatting"
+description: "Apply rich text formatting — bold, italic, links and mentions — in the CometChat Angular UIKit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | The composer's built-in rich text editing — bold, italic, lists, links, undo/redo — on native browser APIs. |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Key symbols | `RichTextEditorService` · `[enableRichText]` · `[hideRichTextToolbar]` |
+| Common trap | Bolting on a third-party editor. It fights the composer's own state; the kit ships this with no external dependency. |
+| On this page | [Basic Usage](#basic-usage) · [Text Formatting](#text-formatting) · [Content Management](#content-management) |
+| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
This guide explains how to use rich text formatting in the CometChat Angular V5 UIKit, including text formatting, mentions, links, and more.
diff --git a/ui-kit/angular/guides/state-management.mdx b/ui-kit/angular/guides/state-management.mdx
index 20a36879f..f0fd3e13c 100644
--- a/ui-kit/angular/guides/state-management.mdx
+++ b/ui-kit/angular/guides/state-management.mdx
@@ -3,6 +3,19 @@ title: "State Management"
description: "Understanding the Hybrid Approach architecture for managing chat state in the CometChat Angular UIKit"
---
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | How to hold the ACTIVE chat and pass it between the list and the message pane — the decision every Angular integration makes first. |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Key symbols | `ChatStateService` · `activeUser` / `activeGroup` / `activeConversation` signals |
+| Common trap | Keeping a local `selected` field **as well as** the service. The two drift and the list stops highlighting the open conversation — which reads as a styling bug and is not. |
+| On this page | [Decision Matrix](#decision-matrix) · [Service-Based Pattern](#service-based-pattern) · [Mutual Exclusivity](#mutual-exclusivity) |
+| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
The CometChat Angular UIKit uses a **Hybrid Approach** for managing active chat state. At its core, `ChatStateService` acts as a single source of truth for the currently active chat entity — a `CometChat.User`, `CometChat.Group`, or `CometChat.Conversation`.
diff --git a/ui-kit/angular/guides/subscription-patterns.mdx b/ui-kit/angular/guides/subscription-patterns.mdx
index eb16718b8..2bd414588 100644
--- a/ui-kit/angular/guides/subscription-patterns.mdx
+++ b/ui-kit/angular/guides/subscription-patterns.mdx
@@ -3,6 +3,19 @@ title: "RxJS Subscription Patterns"
description: "Approved patterns for managing RxJS subscriptions in the CometChat Angular V5 UIKit to prevent memory leaks."
---
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | RxJS lifecycle rules for CometChat streams and SDK listeners in Angular components. |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Key symbols | `takeUntil(destroy$)` · `ngOnDestroy` · `CometChat.removeMessageListener` |
+| Common trap | No teardown. Subscriptions and listeners outlive the component, so memory grows on every route change and stale handlers fire against destroyed views — often surfacing as duplicate messages. |
+| On this page | [Approved Patterns](#approved-patterns) · [Anti-Patterns to Avoid](#anti-patterns-to-avoid) |
+| Related | [All guides](/ui-kit/angular/guides/guides-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
+
+
+
## Overview
This guide documents the approved patterns for managing RxJS subscriptions in the CometChat Angular V5 UIKit. Following these patterns ensures that subscriptions are automatically cleaned up when components and services are destroyed, preventing memory leaks in long-running sessions.
diff --git a/ui-kit/angular/llms-angular-v5.mdx b/ui-kit/angular/llms-angular-v5.mdx
new file mode 100644
index 000000000..4be4c090f
--- /dev/null
+++ b/ui-kit/angular/llms-angular-v5.mdx
@@ -0,0 +1,156 @@
+---
+title: "Angular UI Kit v5 — LLM docs index"
+description: "Machine-readable, Angular-v5-scoped index of every UI Kit page as a clean .md twin. Built for AI coding agents; kept out of the human sidebar."
+---
+
+{/*
+ SCOPED LLM INDEX for the Angular v5 UI Kit.
+ - UNLISTED, NOT hidden: intentionally omitted from docs.json navigation so it never shows in
+ the human sidebar — but it IS built, served as a clean .md twin, and INDEXED for search +
+ AI assistants (so AI tools, and the skills pack via its docs-map, can discover and read it).
+ - We deliberately do NOT use `hidden: true`/`noindex` here: in Mintlify `hidden` auto-applies
+ noindex, which would drop this page from search AND the auto global llms.txt / AI context.
+ We want it discoverable, so it stays indexable.
+ - Scope is v5 ONLY. The 2.0/, 3.0/ and v4/ trees are deliberately excluded — linking them
+ would route agents at dead API surfaces.
+*/}
+
+# Angular UI Kit v5 — LLM docs index (Latest)
+
+> Stateful, drop-in Angular chat/calling UI. Package `@cometchat/chat-uikit-angular@5` +
+> `@cometchat/chat-sdk-javascript@4` (peers also include `@cometchat/cards-angular@^1` and
+> `dompurify@^3`). This page is an **Angular-v5-only** routing index for AI agents — a scoped
+> alternative to the site-wide `/docs/llms.txt`.
+
+## How to use this index
+Each link points to the docs page; **append `.md`** to its URL to fetch the clean Markdown twin
+(verbatim code + an "AI Integration Quick Reference" block with input/output names, types, and
+defaults). Pick the page for the intent, then read the API there.
+- Convention: any docs page URL + `.md` → raw Markdown.
+- Fallback: if a `.md` twin 404s, fetch the same URL **without** `.md` (HTML). Never read a
+ package `.d.ts` and never answer inputs/outputs from memory.
+- Angular specifics: components are used as kebab-case selectors in templates
+ (``), configured via `@Input()`, and customized through
+ content-projection slots / `TemplateRef` — not React-style render props.
+
+## Hot path — usually no fetch needed
+For a plain "add chat" the install, `init → login → render` ordering, standalone/NgModule imports,
+and the core drop-in inputs are stable; a well-built agent skill bakes them. Fetch below only for
+exhaustive inputs, long-tail components, theming tokens, or feature enablement.
+- Setup: [Integration](/ui-kit/angular/integration) · [Quickstart](/ui-kit/angular/quickstart)
+- Environment config lives in `src/environments/environment.ts` (not `.env`).
+- Core drop-ins: [Conversations](/ui-kit/angular/components/cometchat-conversations) · [Message Header](/ui-kit/angular/components/cometchat-message-header) · [Message List](/ui-kit/angular/components/cometchat-message-list) · [Message Composer](/ui-kit/angular/components/cometchat-message-composer)
+
+## Getting started / integration
+- [Angular UI Kit](/ui-kit/angular/overview)
+- [Quickstart](/ui-kit/angular/quickstart)
+- [Integration](/ui-kit/angular/integration)
+
+## Core & configuration
+- [Core Features](/ui-kit/angular/core-features)
+- [Methods](/ui-kit/angular/methods)
+- [Events](/ui-kit/angular/events)
+- [Sound Manager](/ui-kit/angular/sound-manager)
+- [Extensions](/ui-kit/angular/extensions)
+- [Campaigns](/ui-kit/angular/campaigns)
+- [Accessibility](/ui-kit/angular/accessibility)
+- [Troubleshooting](/ui-kit/angular/troubleshooting)
+- [Services](/ui-kit/angular/api-reference/introduction)
+- [Chat State Service](/ui-kit/angular/api-reference/chat-state-service)
+- [CometChat Templates Service](/ui-kit/angular/api-reference/templates-service)
+- [Formatter Config Service](/ui-kit/angular/api-reference/formatter-config-service)
+- [Message Bubble Config Service](/ui-kit/angular/api-reference/message-bubble-config-service)
+- [Rich Text Editor Service](/ui-kit/angular/api-reference/rich-text-editor-service)
+- [Search Conversations Service](/ui-kit/angular/api-reference/search-conversations-service)
+- [Search Messages Service](/ui-kit/angular/api-reference/search-messages-service)
+
+## Theming & customization
+- [Theming](/ui-kit/angular/customization/theming)
+- [Global Configuration](/ui-kit/angular/customization/global-config)
+- [Localization](/ui-kit/angular/customization/localization)
+- [Date & Time Formatting](/ui-kit/angular/customization/date-time-formatting)
+- [Message Bubble Styling](/ui-kit/angular/message-bubble-styling)
+
+## Components — conversations & lists
+- [Overview](/ui-kit/angular/components/components-overview)
+- [Conversations](/ui-kit/angular/components/cometchat-conversations)
+- [Conversation Item](/ui-kit/angular/components/cometchat-conversation-item)
+- [Users](/ui-kit/angular/components/cometchat-users)
+- [User Item](/ui-kit/angular/components/cometchat-user-item)
+- [Groups](/ui-kit/angular/components/cometchat-groups)
+- [Group Item](/ui-kit/angular/components/cometchat-group-item)
+- [Group Members](/ui-kit/angular/components/cometchat-group-members)
+- [Group Member Item](/ui-kit/angular/components/cometchat-group-member-item)
+
+## Components — messages
+- [Message List](/ui-kit/angular/components/cometchat-message-list)
+- [Message Composer](/ui-kit/angular/components/cometchat-message-composer)
+- [Message Header](/ui-kit/angular/components/cometchat-message-header)
+- [Message Information](/ui-kit/angular/components/cometchat-message-information)
+- [Thread Header](/ui-kit/angular/components/cometchat-thread-header)
+- [Reactions](/ui-kit/angular/components/cometchat-reactions)
+- [Reaction Info](/ui-kit/angular/components/cometchat-reaction-info)
+- [Reaction List](/ui-kit/angular/components/cometchat-reaction-list)
+- [Stickers Keyboard](/ui-kit/angular/components/cometchat-stickers-keyboard)
+
+## Components — message bubbles
+- [Action Bubble](/ui-kit/angular/components/cometchat-action-bubble)
+- [Audio Bubble](/ui-kit/angular/components/cometchat-audio-bubble)
+- [Call Bubble](/ui-kit/angular/components/cometchat-call-bubble)
+- [Card Bubble](/ui-kit/angular/components/cometchat-card-bubble)
+- [Collaborative Document Bubble](/ui-kit/angular/components/cometchat-collaborative-document-bubble)
+- [Collaborative Whiteboard Bubble](/ui-kit/angular/components/cometchat-collaborative-whiteboard-bubble)
+- [Delete Bubble](/ui-kit/angular/components/cometchat-delete-bubble)
+- [File Bubble](/ui-kit/angular/components/cometchat-file-bubble)
+- [Image Bubble](/ui-kit/angular/components/cometchat-image-bubble)
+- [CometChatMarkdownRenderer](/ui-kit/angular/components/cometchat-markdown-renderer)
+- [Message Bubble](/ui-kit/angular/components/cometchat-message-bubble)
+- [Poll Bubble](/ui-kit/angular/components/cometchat-poll-bubble)
+- [Sticker Bubble](/ui-kit/angular/components/cometchat-sticker-bubble)
+- [Text Bubble](/ui-kit/angular/components/cometchat-text-bubble)
+- [Video Bubble](/ui-kit/angular/components/cometchat-video-bubble)
+
+## Components — calling
+- [Call Features](/ui-kit/angular/call-features)
+- [Call Buttons](/ui-kit/angular/components/cometchat-call-buttons)
+- [Call Logs](/ui-kit/angular/components/cometchat-call-logs)
+- [Incoming Call](/ui-kit/angular/components/cometchat-incoming-call)
+- [Outgoing Call](/ui-kit/angular/components/cometchat-outgoing-call)
+
+## Components — search, AI & notifications
+- [AI Smart Chat Features](/ui-kit/angular/ai-features)
+- [CometChatSearch](/ui-kit/angular/components/cometchat-search)
+- [CometChatAIAssistantChat](/ui-kit/angular/components/cometchat-ai-assistant-chat)
+- [Smart Replies](/ui-kit/angular/components/cometchat-smart-replies)
+- [Conversation Starter](/ui-kit/angular/components/cometchat-conversation-starter)
+- [Conversation Summary](/ui-kit/angular/components/cometchat-conversation-summary)
+- [Notification Feed](/ui-kit/angular/components/notification-feed)
+
+## Task guides (recipes)
+- [Block/Unblock Users](/ui-kit/angular/guides/block-unblock-user)
+- [Call Log Details](/ui-kit/angular/guides/call-log-details)
+- [Card Messages](/ui-kit/angular/guides/card-messages)
+- [Custom Message Types](/ui-kit/angular/guides/custom-message-types)
+- [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter)
+- [Group Chat](/ui-kit/angular/guides/group-chat)
+- [Hashtag Formatter](/ui-kit/angular/guides/hashtag-formatter)
+- [Mentions Formatter](/ui-kit/angular/guides/mentions-formatter)
+- [Message Privately](/ui-kit/angular/guides/message-privately)
+- [New Chat](/ui-kit/angular/guides/new-chat)
+- [Rich Text Formatting](/ui-kit/angular/guides/rich-text-formatting)
+- [Search Messages](/ui-kit/angular/guides/search-messages)
+- [ShortCut Formatter](/ui-kit/angular/guides/shortcut-formatter)
+- [State Management](/ui-kit/angular/guides/state-management)
+- [RxJS Subscription Patterns](/ui-kit/angular/guides/subscription-patterns)
+- [Threaded Messages](/ui-kit/angular/guides/threaded-messages)
+- [URL Formatter](/ui-kit/angular/guides/url-formatter)
+
+## Framework recipes (full-page layouts)
+- [Conversation List + Message View](/ui-kit/angular/angular-conversation)
+- [One-to-One / Group Chat](/ui-kit/angular/angular-one-to-one-chat)
+- [Tab-Based Chat](/ui-kit/angular/angular-tab-based-chat)
+
+## Migration & misc
+- [Guides](/ui-kit/angular/guides/guides-overview)
+- [Upgrading From V4](/ui-kit/angular/customization/migration-guide)
+
diff --git a/ui-kit/angular/overview.mdx b/ui-kit/angular/overview.mdx
index a363c55c2..ee0f4ebb8 100644
--- a/ui-kit/angular/overview.mdx
+++ b/ui-kit/angular/overview.mdx
@@ -9,7 +9,7 @@ description: "Use CometChat Angular UI Kit to add standalone chat components, vo
| Field | Value |
| --- | --- |
| Package | `@cometchat/chat-uikit-angular` v5.x |
-| Peer deps | `@cometchat/chat-sdk-javascript`, `dompurify` |
+| Peer deps | `@cometchat/chat-sdk-javascript`, `@cometchat/cards-angular`, `dompurify` |
| Calling | Optional — `@cometchat/calls-sdk-javascript` |
| Angular | v18, v19, v20, v21, v22 (v22 requires Node.js 24+) |
| Localization | 19 languages built-in |