docs(ui-kit/angular): Angular v5 skills docs — LLM index + AI Integration Quick References (ENG-38204)

ui-kit/angular/api-reference/chat-state-service.mdx

@@ -1,10 +1,28 @@
 ---
 title: "Chat State Service"
 description: "Service Reference for the centralized chat state management service in CometChat Angular UIKit"
 ---
+
+<Accordion title="AI Integration Quick Reference">
+
+| 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) |
+
+</Accordion>
 ## 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.
 
 The service is provided at the root level (`providedIn: 'root'`) and is available throughout your application via Angular dependency injection.
 
@@ -28,15 +46,15 @@
 }
 ```
 
 ## Signals (Readonly)
 
 `ChatStateService` exposes Angular Signals for synchronous, fine-grained reactivity with automatic dependency tracking and efficient change detection.
 
 | Signal | Type | Description |
 |--------|------|-------------|
 | `activeUser` | `Signal<CometChat.User \| null>` | Readonly signal for the currently active user. Returns `null` when no user is active. |
 | `activeGroup` | `Signal<CometChat.Group \| null>` | Readonly signal for the currently active group. Returns `null` when no group is active. |
 | `activeConversation` | `Signal<CometChat.Conversation \| null>` | Readonly signal for the currently active conversation. Returns `null` when no conversation is active. |
 
 
 ## Observables

ui-kit/angular/api-reference/formatter-config-service.mdx

@@ -1,12 +1,32 @@
+---
+title: "Formatter Config Service"
+description: "Service Reference for the centralized text-formatter configuration service in CometChat Angular UIKit"
+---
+
+<Accordion title="AI Integration Quick Reference">
+
+| 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) |
+
+</Accordion>
 
 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.
 
 ## Overview
 
 The service manages text formatters that transform raw text into formatted HTML with support for:
 - Mentions (@user) with self-mention detection
 - URLs with automatic link creation
 - Custom formatters (hashtags, emails, etc.)
 - Context-aware formatting (logged-in user, message alignment)
 - Formatter priority ordering
 - Performance optimization through instance reuse
@@ -26,7 +46,7 @@
 
 ## Default Behavior
 
 When no custom formatters are configured, the service provides two built-in formatters:
 
 1. **CometChatMentionsFormatter** (priority 20)
    - Detects mentions in format `<@uid:{uid}>` or `<@all:{label}>`
@@ -39,19 +59,19 @@
    - Converts to clickable links
    - Adds security attributes (`target="_blank"`, `rel="noopener noreferrer"`)
 
 These formatters are singleton instances, reused across all components for optimal performance.
 
 ## Core Methods
 
 ### `getDefaultFormatters(): CometChatTextFormatter[]`
 
 Gets the configured default formatters.
 
 **Returns:** Array of text formatters in priority order
 
 **Priority:**
 1. Custom formatters (if set via `setDefaultFormatters`)
 2. Built-in defaults + additional formatters (if added via `addFormatters`)
 3. Built-in defaults only (mentions + URLs)
 
 **Example:**
@@ -61,20 +81,20 @@
   private formatters: CometChatTextFormatter[] = [];
 
   ngOnInit() {
     // Get default formatters
     this.formatters = this.formatterConfig.getDefaultFormatters();
   }
 }
 ```
 
 ### `setDefaultFormatters(formatters: CometChatTextFormatter[]): void`
 
 Replaces the built-in default formatters with custom formatters.
 
 **Parameters:**
 - `formatters`: Array of custom formatters to use as defaults
 
 **Use Case:** When you want complete control over which formatters are used globally.
 
 **Example:**
 ```typescript expandable
@@ -84,7 +104,7 @@
 
   ngOnInit() {
     // Replace defaults with custom formatters
     const customFormatters = [
       new MyCustomMentionsFormatter(),
       new MyCustomUrlFormatter(),
       new HashtagFormatter(),
@@ -96,16 +116,16 @@
 }
 ```
 
 **Note:** Once custom formatters are set, `addFormatters()` has no effect. To add to custom formatters, include them in the array passed to `setDefaultFormatters()`.
 
 ### `addFormatters(formatters: CometChatTextFormatter[]): void`
 
 Adds additional formatters to the built-in defaults without replacing them.
 
 **Parameters:**
 - `formatters`: Array of formatters to add to the default set
 
 **Use Case:** When you want to keep the built-in formatters (mentions + URLs) and add custom ones.
 
 **Example:**
 ```typescript expandable
@@ -113,7 +133,7 @@
   private formatterConfig = inject(FormatterConfigService);
 
   ngOnInit() {
     // Add custom formatters to defaults
     const additionalFormatters = [
       new HashtagFormatter(),
       new EmailFormatter(),
@@ -128,11 +148,11 @@
 }
 ```
 
 **Note:** If custom formatters have been set via `setDefaultFormatters()`, this method has no effect.
 
 ### `resetToDefaults(): void`
 
 Resets to the built-in default formatters, clearing any custom or additional formatters.
 
 **Use Case:** When you want to restore the original formatter configuration.
 
@@ -141,7 +161,7 @@
 export class SettingsComponent {
   private formatterConfig = inject(FormatterConfigService);
 
   resetFormatters() {
     // Clear all customizations
     this.formatterConfig.resetToDefaults();
 
@@ -153,13 +173,13 @@
 
 ### `getFormattersWithContext(loggedInUser?, alignment?): CometChatTextFormatter[]`
 
 Gets formatters configured with context for self-mention detection and direction CSS classes.
 
 **Parameters:**
 - `loggedInUser` (optional): The logged-in user for self-mention detection
 - `alignment` (optional): Message bubble alignment for direction CSS classes
 
 **Returns:** Array of formatters configured with the provided context
 
 **Context Configuration:**
 
@@ -176,7 +196,7 @@
 ```typescript expandable
 export class MessageListComponent implements OnInit {
   private formatterConfig = inject(FormatterConfigService);
   private formatters: CometChatTextFormatter[] = [];
 
   ngOnInit() {
     const loggedInUser = CometChat.getLoggedInUser();
@@ -190,7 +210,7 @@
       );
 
       // Pass to text bubble component
       message.formatters = formatters;
     });
   }
 
@@ -243,9 +263,9 @@
 
 ## Usage Patterns
 
 ### Pattern 1: Use Default Formatters (Recommended)
 
 The simplest approach - let the service provide the default formatters.
 
 ```typescript
 export class TextBubbleComponent implements OnInit {
@@ -261,9 +281,9 @@
 
 **When to use:** Most components should use this pattern.
 
 ### Pattern 2: Set Custom Formatters Globally
 
 Replace the built-in formatters with your own custom set.
 
 ```typescript expandable
 // In app initialization (main.ts or app.component.ts)
@@ -286,7 +306,7 @@
 
 **When to use:** When you need complete control over formatter behavior globally.
 
 ### Pattern 3: Extend Default Formatters
 
 Keep the built-in formatters and add custom ones.
 
@@ -308,7 +328,7 @@
 }
 ```
 
 **When to use:** When you want to add functionality without losing the built-in formatters.
 
 ### Pattern 4: Context-Aware Formatting
 
@@ -325,7 +345,7 @@
       const alignment = this.getMessageAlignment(message);
 
       // Get formatters with context
       const formatters = this.formatterConfig.getFormattersWithContext(
         loggedInUser,
         alignment
       );
@@ -339,7 +359,7 @@
 
 **When to use:** In message lists where self-mention detection and direction classes are needed.
 
 ### Pattern 5: Component-Specific Formatters
 
 Override formatters for a specific component instance.
 
@@ -351,14 +371,14 @@
   private formatters: CometChatTextFormatter[] = [];
 
   ngOnInit() {
     // Use input formatters if provided, otherwise use defaults
     this.formatters = this.textFormatters || 
                       this.formatterConfig.getDefaultFormatters();
   }
 }
 ```
 
 **When to use:** When a specific component needs different formatters than the global defaults.
 
 ## Creating Custom Formatters
 
@@ -407,7 +427,7 @@
 
 ## Formatter Priority
 
 Formatters execute in order of their `priority` property (lower number = earlier execution):
 
 | Formatter | Priority | Execution Order |
 |-----------|----------|-----------------|
@@ -428,7 +448,7 @@
 // Result: Both mentions and URLs are properly formatted
 ```
 
 **Setting priority in custom formatters:**
 
 ```typescript
 export class EmailFormatter extends CometChatTextFormatter {
@@ -445,7 +465,7 @@
 
 ### 1. Singleton Instances
 
 Formatters are created once and reused across all components:
 
 ```typescript
 // ✅ GOOD: Service reuses instances
@@ -465,7 +485,7 @@
 
 ### 3. Conditional Execution
 
 Formatters check `shouldFormat()` before applying regex:
 
 ```typescript expandable
 export class MyFormatter extends CometChatTextFormatter {
@@ -534,7 +554,7 @@
 
 ### 1. Configure Once, Use Everywhere
 
 Set formatters globally in app initialization:
 
 ```typescript expandable
 // ✅ GOOD: Configure once in AppComponent
@@ -571,7 +591,7 @@
 
 ### 3. Respect Formatter Priority
 
 Set appropriate priority values for custom formatters:
 
 ```typescript expandable
 // ✅ GOOD: Logical priority
@@ -609,7 +629,7 @@
 
 ### 5. Handle Edge Cases
 
 Ensure formatters handle empty or invalid input:
 
 ```typescript
 // ✅ GOOD: Defensive programming
@@ -624,9 +644,9 @@
 
 ## Common Patterns
 
 ### Pattern: Feature Flag for Formatters
 
 Enable/disable formatters based on feature flags:
 
 ```typescript expandable
 export class AppComponent implements OnInit {
@@ -652,7 +672,7 @@
 }
 ```
 
 ### Pattern: User Preference for Formatters
 
 Allow users to customize formatter behavior:
 
@@ -710,11 +730,11 @@
 
 ## Troubleshooting
 
 ### Formatters Not Applied
 
 **Problem:** Text is not being formatted.
 
 **Solution:** Check that formatters are configured:
 
 ```typescript
 // Debug: Log formatters
@@ -759,9 +779,9 @@
 ]);
 ```
 
 ### Formatters Execute in Wrong Order
 
 **Problem:** Formatters execute in unexpected order.
 
 **Solution:** Check priority values:
 
@@ -783,7 +803,7 @@
 
 ## Scoping for Multiple Instances
 
 `FormatterConfigService` is provided at the root level (`providedIn: 'root'`), so all components share the same formatter configuration by default. If you need different formatters for different message lists (e.g., a main chat with full formatting vs. a thread panel with minimal formatting), scope the service to a wrapper component:
 
 ```typescript expandable
 @Component({

ui-kit/angular/api-reference/introduction.mdx

@@ -1,14 +1,26 @@
 ---
 title: Services
 description: "Reference for CometChat UIKit Angular injectable services."
 ---
+
+<Accordion title="AI Integration Quick Reference">
+
+| 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(<Service>)` — all are `providedIn: 'root'` |
+| Full list | See [Services](#services) |
+
+</Accordion>
 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
 
 ### CometChatUIKit
 
 The main entry point for initializing and configuring the UIKit.
 
 ```typescript expandable
 class CometChatUIKit {
@@ -27,7 +39,7 @@
 ```
 
 <Note>
   The UIKit exposes two session-check methods with intentionally different casing — this mirrors the underlying CometChat SDK naming.
 
   - `getLoggedInUser()` (capital **I**, synchronous) — returns the in-memory cached user immediately. Use this for quick checks inside components where you already know the user is logged in.
   - `getLoggedinUser()` (lowercase **i**, async) — makes an SDK call to verify the session. Use this in `ngOnInit` or `main.ts` before rendering components, as it is the authoritative check.
@@ -61,7 +73,7 @@
 | `subscribePresenceForRoles(roles)` | `string[]` | — | Subscribe to presence updates for specific roles |
 | `setAutoEstablishSocketConnection(auto)` | `boolean` | `true` | Auto-establish WebSocket connection on init |
 | `setCallingEnabled(enabled)` | `boolean` | `false` | Enable voice/video calling. When `true`, the Calls SDK is initialized after login and call buttons become visible in MessageHeader, CallButtons, and CallLogs. When `false` (default), call buttons are hidden and the Calls SDK is not initialized |
 | `setCallAppSettings(settings)` | `any` | — | Custom `CallAppSettings` for the Calls SDK. Built via `CometChatUIKitCalls.CallAppSettingsBuilder`. If not set, the UIKit builds default settings from `appId` and `region` |
 | `setStorageMode(mode)` | `CometChat.StorageMode` | `LOCAL` | Storage mode for the SDK |
 | `setAdminHost(host)` | `string` | — | Override the admin host URL |
 | `setClientHost(host)` | `string` | — | Override the client host URL |
@@ -79,7 +91,7 @@
 | ChatStateService | Centralized chat state management service — tracks active user, group, and conversation across components | [ChatStateService](/ui-kit/angular/api-reference/chat-state-service) |
 | MessageBubbleConfigService | Centralized message bubble view configuration — customize bubble parts globally or per message type | [MessageBubbleConfigService](/ui-kit/angular/api-reference/message-bubble-config-service) |
 | CometChatTemplatesService | SDK-wide template customization service — shared and component-specific templates for all list components | [CometChatTemplatesService](/ui-kit/angular/api-reference/templates-service) |
 | FormatterConfigService | Text formatter configuration service — manages text formatting rules and custom formatters | [FormatterConfigService](/ui-kit/angular/api-reference/formatter-config-service) |
 | RichTextEditorService | Rich text editor configuration service — controls editor behavior, toolbar options, and input modes | [RichTextEditorService](/ui-kit/angular/api-reference/rich-text-editor-service) |
 | GlobalConfig | Centralized configuration via `COMETCHAT_GLOBAL_CONFIG` injection token — sets defaults for display, sound, calls, and more across all components | [GlobalConfig](/ui-kit/angular/customization/global-config) |
 

ui-kit/angular/api-reference/message-bubble-config-service.mdx

@@ -1,8 +1,25 @@
 ---
 title: "Message Bubble Config Service"
 description: "API reference for the centralized message bubble view configuration service in CometChat Angular UIKit"
 ---
+
+<Accordion title="AI Integration Quick Reference">
+
+| 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) |
+
+</Accordion>
 `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).
 
@@ -143,7 +160,7 @@
 });
 ```
 
 ### getView
 
 Retrieves the resolved view for a message type and bubble part, applying the priority chain.
 
@@ -153,7 +170,7 @@
 
 Returns `null` if no view is configured (component uses default rendering).
 
 ### clearAll
 
 Clears all type-specific and global configurations, resetting to default rendering.
 
@@ -161,7 +178,7 @@
 clearAll(): void
 ```
 
 ### clearType
 
 Clears configuration for a specific message type. Global views and other types are unaffected.
 
@@ -270,7 +287,7 @@
 
 ## Scoping for Multiple Instances
 
 By default, `MessageBubbleConfigService` is a root-level singleton — all message lists share the same configuration. To give a specific component subtree its own independent configuration (e.g., a thread panel with different bubble styles), provide the service at the wrapper component level:
 
 ```typescript expandable
 import { Component, inject } from '@angular/core';

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"
+---
+
+<Accordion title="AI Integration Quick Reference">
+
+| 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) |
+
+</Accordion>
 
 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.
 
@@ -218,7 +237,7 @@
 
 ### `getHTML(editor: RichTextEditor): string`
 
 Gets the HTML content from the editor with XSS sanitization.
 
 **Returns:** Sanitized HTML string
 
@@ -334,9 +353,9 @@
 
 ### `getUniqueMentionUids(editor: RichTextEditor): Set<string>`
 
 Gets the set of unique mention UIDs from the editor content.
 
 **Returns:** Set of unique mention UIDs
 
 **Example:**
 ```typescript
@@ -467,7 +486,7 @@
 - **Arrow keys**: Navigate content
 
 ### ARIA Support
 - `role="textbox"` on contenteditable element
 - `aria-label` for editor purpose
 - `aria-multiline="true"` for multiline editor
 - `aria-placeholder` for placeholder text
@@ -495,7 +514,7 @@
 - **Formatting operations**: < 100ms
 - **Initialization**: < 50ms
 - **History grouping**: Rapid typing is grouped into single undo steps (500ms delay)
 - **Event delegation**: Single event listener on contenteditable element
 - **Memory management**: Automatic cleanup on destroy
 
 ## Security

ui-kit/angular/api-reference/search-conversations-service.mdx

@@ -3,6 +3,22 @@
 description: Signal-based service for conversation search state, SDK queries, pagination, and real-time listener management.
 ---
 
+<Accordion title="AI Integration Quick Reference">
+
+| 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) |
+
+</Accordion>
+
 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
@@ -46,7 +62,7 @@
 
 ### loadMore()
 
 Fetches the next page of results and appends to the existing list. Deduplicates by conversation ID.
 
 ```typescript
 async loadMore(): Promise<void>

ui-kit/angular/api-reference/search-messages-service.mdx

@@ -3,6 +3,22 @@
 description: Signal-based service for message search state, SDK queries, attachment-type filtering, and pagination.
 ---
 
+<Accordion title="AI Integration Quick Reference">
+
+| 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) |
+
+</Accordion>
+
 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
@@ -45,7 +61,7 @@
 | `customBuilder` | `MessagesRequestBuilder` | Optional custom builder that overrides the default |
 | `alwaysShowSeeMore` | `boolean` | When true, limits initial results to 3 (preview mode with "See more" button) |
 
 Validation: search requires at least one of: non-empty keyword, active message filter, uid, or guid. Otherwise `fetchState` is set to `States.empty`.
 
 ### loadMore()
 
@@ -69,8 +85,8 @@
 
 - `hideDeletedMessages(true)` — always excludes deleted messages
 - `setSearchKeyword()` — when keyword is non-empty
 - `setUID()` — when uid is provided (scoped to user)
 - `setGUID()` — when guid is provided (scoped to group)
 - `hasLinks(true)` — when the `Links` filter is active
 - `setAttachmentTypes()` — maps filters to SDK attachment types:
 

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
 ---
+
+<Accordion title="AI Integration Quick Reference">
+
+| 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) |
+
+</Accordion>
 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

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"
 ---
+
+<Accordion title="AI Integration Quick Reference">
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatActionBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatActionBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `<cometchat-action-bubble>` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-action-bubble` |
+| Mounting | Rendered **by** `<cometchat-message-list>` when a matching message arrives — do **not** mount it yourself |
+| Primary output | — (no outputs) |
+| Prerequisites | A rendered `<cometchat-message-list>` — 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) |
+
+</Accordion>
 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

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."
 ---
 
+<Accordion title="AI Integration Quick Reference">
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatAIAssistantChat` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-angular";` |
+| Selector | `<cometchat-ai-assistant-chat>` — 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) |
+
+</Accordion>
+
 ## 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.

ui-kit/angular/components/cometchat-audio-bubble.mdx

@@ -2,7 +2,26 @@
 title: "Audio Bubble"
 description: "A comprehensive Angular component for rendering audio messages with real-time waveform visualization, playback controls, download functionality, and caption support"
 ---
+
+<Accordion title="AI Integration Quick Reference">
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatAudioBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatAudioBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `<cometchat-audio-bubble>` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-audio-bubble` |
+| Mounting | Rendered **by** `<cometchat-message-list>` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(playStateChange)` |
+| Prerequisites | A rendered `<cometchat-message-list>` — 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) |
+
+</Accordion>
 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
 
@@ -591,7 +610,7 @@
 </Tip>
 
 <Warning>
   The component does NOT open a modal or fullscreen view. Expansion happens inline within the message bubble.
 </Warning>
 
 <Info>

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"
 ---
+
+<Accordion title="AI Integration Quick Reference">
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCallBubbleComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatCallBubbleComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `<cometchat-call-bubble>` — the class name is NOT a valid tag |
+| CSS root class | `.cometchat-call-bubble` |
+| Mounting | Rendered **by** `<cometchat-message-list>` when a matching message arrives — do **not** mount it yourself |
+| Primary output | `(buttonClick)` |
+| Prerequisites | A rendered `<cometchat-message-list>` — 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) |
+
+</Accordion>
 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
@@ -371,7 +390,7 @@
 </Tip>
 
 <Info>
   All text in the component is localized. The component uses existing localization keys from the UIKit for call-related text.
 </Info>
 
 ## Related Components

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"
 ---
 
+<Accordion title="AI Integration Quick Reference">
+
+| Field | Value |
+| --- | --- |
+| Component | `CometChatCallButtonsComponent` |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Import | `import { CometChatCallButtonsComponent } from "@cometchat/chat-uikit-angular";` |
+| Selector | `<cometchat-call-buttons>` — 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) |
+
+</Accordion>
+
 ## 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.