docs(ui-kit/angular): add scoped Angular v5 LLM docs index (ENG-38204)

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

@@ -1,12 +1,16 @@
+---
+title: "Formatter Config Service"
+description: "Service Reference for the centralized text-formatter configuration service in CometChat Angular UIKit"
+---
 
 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 +30,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 +43,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 +65,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 +88,7 @@
 
   ngOnInit() {
     // Replace defaults with custom formatters
     const customFormatters = [
       new MyCustomMentionsFormatter(),
       new MyCustomUrlFormatter(),
       new HashtagFormatter(),
@@ -96,16 +100,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 +117,7 @@
   private formatterConfig = inject(FormatterConfigService);
 
   ngOnInit() {
     // Add custom formatters to defaults
     const additionalFormatters = [
       new HashtagFormatter(),
       new EmailFormatter(),
@@ -128,11 +132,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 +145,7 @@
 export class SettingsComponent {
   private formatterConfig = inject(FormatterConfigService);
 
   resetFormatters() {
     // Clear all customizations
     this.formatterConfig.resetToDefaults();
 
@@ -153,13 +157,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 +180,7 @@
 ```typescript expandable
 export class MessageListComponent implements OnInit {
   private formatterConfig = inject(FormatterConfigService);
   private formatters: CometChatTextFormatter[] = [];
 
   ngOnInit() {
     const loggedInUser = CometChat.getLoggedInUser();
@@ -190,7 +194,7 @@
       );
 
       // Pass to text bubble component
       message.formatters = formatters;
     });
   }
 
@@ -243,9 +247,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 +265,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 +290,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 +312,7 @@
 }
 ```
 
 **When to use:** When you want to add functionality without losing the built-in formatters.
 
 ### Pattern 4: Context-Aware Formatting
 
@@ -325,7 +329,7 @@
       const alignment = this.getMessageAlignment(message);
 
       // Get formatters with context
       const formatters = this.formatterConfig.getFormattersWithContext(
         loggedInUser,
         alignment
       );
@@ -339,7 +343,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 +355,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 +411,7 @@
 
 ## Formatter Priority
 
 Formatters execute in order of their `priority` property (lower number = earlier execution):
 
 | Formatter | Priority | Execution Order |
 |-----------|----------|-----------------|
@@ -428,7 +432,7 @@
 // Result: Both mentions and URLs are properly formatted
 ```
 
 **Setting priority in custom formatters:**
 
 ```typescript
 export class EmailFormatter extends CometChatTextFormatter {
@@ -445,7 +449,7 @@
 
 ### 1. Singleton Instances
 
 Formatters are created once and reused across all components:
 
 ```typescript
 // ✅ GOOD: Service reuses instances
@@ -465,7 +469,7 @@
 
 ### 3. Conditional Execution
 
 Formatters check `shouldFormat()` before applying regex:
 
 ```typescript expandable
 export class MyFormatter extends CometChatTextFormatter {
@@ -534,7 +538,7 @@
 
 ### 1. Configure Once, Use Everywhere
 
 Set formatters globally in app initialization:
 
 ```typescript expandable
 // ✅ GOOD: Configure once in AppComponent
@@ -571,7 +575,7 @@
 
 ### 3. Respect Formatter Priority
 
 Set appropriate priority values for custom formatters:
 
 ```typescript expandable
 // ✅ GOOD: Logical priority
@@ -609,7 +613,7 @@
 
 ### 5. Handle Edge Cases
 
 Ensure formatters handle empty or invalid input:
 
 ```typescript
 // ✅ GOOD: Defensive programming
@@ -624,9 +628,9 @@
 
 ## Common Patterns
 
 ### Pattern: Feature Flag for Formatters
 
 Enable/disable formatters based on feature flags:
 
 ```typescript expandable
 export class AppComponent implements OnInit {
@@ -652,7 +656,7 @@
 }
 ```
 
 ### Pattern: User Preference for Formatters
 
 Allow users to customize formatter behavior:
 
@@ -710,11 +714,11 @@
 
 ## Troubleshooting
 
 ### Formatters Not Applied
 
 **Problem:** Text is not being formatted.
 
 **Solution:** Check that formatters are configured:
 
 ```typescript
 // Debug: Log formatters
@@ -759,9 +763,9 @@
 ]);
 ```
 
 ### Formatters Execute in Wrong Order
 
 **Problem:** Formatters execute in unexpected order.
 
 **Solution:** Check priority values:
 
@@ -783,7 +787,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/rich-text-editor-service.mdx

@@ -1,4 +1,7 @@
-# RichTextEditorService API Reference
+---
+title: "Rich Text Editor Service"
+description: "Service Reference for the native-API rich text editor service in CometChat Angular UIKit"
+---
 
 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 +221,7 @@
 
 ### `getHTML(editor: RichTextEditor): string`
 
 Gets the HTML content from the editor with XSS sanitization.
 
 **Returns:** Sanitized HTML string
 
@@ -334,9 +337,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 +470,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 +498,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/guides/rich-text-formatting.mdx

@@ -1,10 +1,14 @@
-# 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."
+---
 
 This guide explains how to use rich text formatting in the CometChat Angular V5 UIKit, including text formatting, mentions, links, and more.
 
 ## Overview
 
 The UIKit provides a custom rich text editor built on native browser APIs, offering:
 - Lightweight implementation (no external dependencies)
 - Full formatting support (bold, italic, underline, etc.)
 - Mentions integration
@@ -145,7 +149,7 @@
 - **Enter**: Creates a new list item
 - **Enter** (twice): Exits the list
 - **Tab**: Indents the list item
 - **Shift+Tab**: Outdents the list item
 
 ### Example
 
@@ -505,7 +509,7 @@
 
 ### Optimization Tips
 
 1. **Debounce updates**: Use debouncing for expensive operations
 2. **Lazy load mentions**: Load mention suggestions on demand
 3. **Limit history**: History is automatically limited to 100 entries
 4. **Clean up**: Always destroy editors when done

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
+  (`<cometchat-conversations>`), 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)
+

ui-kit/angular/overview.mdx

@@ -9,7 +9,7 @@
 | 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 |
@@ -43,7 +43,7 @@
 
 <CardGroup cols={2}>
   <Card title="Integration Guide" icon="rocket" href="/ui-kit/angular/integration">
     Set up CometChat UIKit in your Angular project
   </Card>
   <Card title="Quickstart" icon="bolt" href="/ui-kit/angular/quickstart">
     Get up and running in 5 minutes