Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 9 additions & 49 deletions docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -2694,55 +2694,15 @@
"ui-kit/angular/components/cometchat-group-member-item"
]
},
{
"group": "Message Header",
"pages": [
"ui-kit/angular/components/cometchat-message-header"
]
},
{
"group": "Search",
"pages": [
"ui-kit/angular/components/cometchat-search"
]
},
{
"group": "Message List",
"pages": [
"ui-kit/angular/components/cometchat-message-list"
]
},
{
"group": "Message Composer",
"pages": [
"ui-kit/angular/components/cometchat-message-composer"
]
},
{
"group": "Message Bubble",
"pages": [
"ui-kit/angular/components/cometchat-message-bubble"
]
},
{
"group": "Message Information",
"pages": [
"ui-kit/angular/components/cometchat-message-information"
]
},
{
"group": "Thread Header",
"pages": [
"ui-kit/angular/components/cometchat-thread-header"
]
},
{
"group": "Pinned & Saved",
"pages": [
"ui-kit/angular/components/cometchat-pinned-messages",
"ui-kit/angular/components/cometchat-saved-messages"
]
},
"ui-kit/angular/components/cometchat-message-header",
"ui-kit/angular/components/cometchat-search",
"ui-kit/angular/components/cometchat-message-list",
"ui-kit/angular/components/cometchat-message-composer",
"ui-kit/angular/components/cometchat-message-bubble",
"ui-kit/angular/components/cometchat-message-information",
"ui-kit/angular/components/cometchat-thread-header",
"ui-kit/angular/components/cometchat-pinned-messages",
"ui-kit/angular/components/cometchat-saved-messages",
{
"group": "Message Bubbles",
"pages": [
Expand Down
2 changes: 1 addition & 1 deletion ui-kit/angular/components/cometchat-message-list.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
| 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 `<cometchat-thread-header>` 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). |

Check warning on line 18 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L18

Did you really mean 'affordance'?
| 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 |
Expand Down Expand Up @@ -43,7 +43,7 @@
- **Conversation Starters**: AI-generated conversation starters for empty conversations
- **Message Options**: Customizable context menu with actions like edit, delete, reply, forward
- **Reactions**: Support for message reactions with emoji picker
- **Text Formatters**: Extensible text formatting for mentions, links, and custom patterns

Check warning on line 46 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L46

Did you really mean 'Formatters'?
- **Keyboard Navigation**: Full keyboard accessibility (WCAG 2.1 Level AA compliant)
- **Sound Notifications**: notification sounds for new messages

Expand Down Expand Up @@ -89,7 +89,7 @@
export class ChatComponent implements OnInit {
chatUser?: CometChat.User;

async ngOnInit(): Promise<void> {

Check warning on line 92 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L92

Did you really mean 'ng'?
try {
this.chatUser = await CometChat.getUser('RECEIVER_UID');
} catch (error) {
Expand Down Expand Up @@ -357,14 +357,14 @@
| `parentMessageId` | `number` | `undefined` | **Deprecated — pass `parentMessage` instead.** Enables thread mode by id. Still honoured when `parentMessage` is absent, so existing integrations keep working. |
| `messagesRequestBuilder` | `CometChat.MessagesRequestBuilder` | `undefined` | Custom request builder for advanced message filtering and pagination configuration. |
| `reactionsRequestBuilder` | `CometChat.ReactionsRequestBuilder` | `undefined` | Custom request builder for configuring how reactions are fetched. |
| `textFormatters` | `CometChatTextFormatter[]` | `undefined` | Array of text formatters for processing message text content (mentions, links, custom patterns). |

Check warning on line 360 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L360

Did you really mean 'formatters'?
| `messageAlignment` | `MessageListAlignment` | `'standard'` | Message alignment mode. Options: `'left'` (all messages left-aligned) or `'standard'` (sent right, received left). |
| `scrollToBottomOnNewMessages` | `boolean` | `false` | When `true`, automatically scrolls to the bottom when new messages arrive. |
| `quickOptionsCount` | `number` | `2` | Number of quick action options to display directly on the message bubble. |
| `disableSoundForMessages` | `boolean` | `false` | When `true`, disables notification sounds for incoming messages. |
| `customSoundForMessages` | `string` | `undefined` | Custom sound URL to play for message notifications instead of the default sound. |
| `goToMessageId` | `string` | `undefined` | Message ID to scroll to and highlight when the component loads. |
| `showScrollbar` | `boolean` | `false` | When `true`, shows the scrollbar in the message list container. |

Check warning on line 367 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L367

Did you really mean 'scrollbar'?

#### Display Control Properties

Expand All @@ -378,10 +378,10 @@
| `hideError` | `boolean` | `false` | Hides error views when errors occur during message loading. |
| `hideReplyInThreadOption` | `boolean` | `false` | Hides the "Reply in Thread" option from message context menu. |
| `hideThreadSubscriptionOption` | `boolean` | `false` | Hides the thread follow/unfollow option from the message context menu, without turning the feature off. See [Thread Subscription](#thread-subscription). |
| `hidePinMessageOption` | `boolean` | `false` | Hides "Pin message" from the Organise flyout. See [Pin and Save](#pin-and-save). |

Check warning on line 381 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L381

Did you really mean 'flyout'?
| `hideUnpinMessageOption` | `boolean` | `false` | Hides "Unpin message" from the Organise flyout. |

Check warning on line 382 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L382

Did you really mean 'flyout'?
| `hideSaveMessageOption` | `boolean` | `false` | Hides "Save message" from the Organise flyout. |

Check warning on line 383 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L383

Did you really mean 'flyout'?
| `hideUnsaveMessageOption` | `boolean` | `false` | Hides "Unsave message" from the Organise flyout. |

Check warning on line 384 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L384

Did you really mean 'Unsave'?

Check warning on line 384 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L384

Did you really mean 'flyout'?
| `hideTranslateMessageOption` | `boolean` | `false` | Hides the "Translate" option from message context menu. |
| `hideEditMessageOption` | `boolean` | `false` | Hides the "Edit" option from message context menu (only shown for own text messages). |
| `hideDeleteMessageOption` | `boolean` | `false` | Hides the "Delete" option from message context menu (only shown for own messages). |
Expand Down Expand Up @@ -437,7 +437,7 @@

When the feature is enabled, the context menu carries a single follow/unfollow option immediately after **Reply in thread**, so the two thread actions stay together. Its title flips with the state: "Subscribe to thread" when the user does not follow the thread, "Unsubscribe from thread" when they do — the same wording the thread header's control uses.

The option renders only when `enableThreadSubscription: true` is provided through [`COMETCHAT_GLOBAL_CONFIG`](/ui-kit/angular/customization/global-config#enablethreadsubscription) — the feature is **off by default** — and `hideThreadSubscriptionOption` is `false`.
The option renders only when `enableThreadSubscription: true` is provided through `COMETCHAT_GLOBAL_CONFIG` — the feature is **off by default** — and `hideThreadSubscriptionOption` is `false`.

```html expandable
<cometchat-message-list
Expand All @@ -457,9 +457,9 @@

### Pin and Save

**Pin message** and **Save message** are gathered under an **Organise ▸** flyout, placed before Translate. The flyout is omitted entirely when neither action applies, rather than opening onto nothing.

Check warning on line 460 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L460

Did you really mean 'flyout'?

Check warning on line 460 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L460

Did you really mean 'flyout'?

The menu shows Pin **or** Unpin, and Save **or** Unsave — never a toggling third state — because the presence of `pinnedAt` / `savedAt` on the message *is* the boolean.

Check warning on line 462 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L462

Did you really mean 'Unsave'?

```html expandable
<cometchat-message-list
Expand All @@ -471,20 +471,20 @@

| Behavior | Detail |
|:---|:---|
| Feature gate | The `features.ux.messages.pinned.enabled` / `features.ux.messages.saved.enabled` app settings, reported by `CometChat.isPinMessageEnabled()` / `isSaveMessageEnabled()` and overridable via `enablePinMessage` / `enableSaveMessage` in global config |

Check warning on line 474 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L474

Did you really mean 'overridable'?
| Eligibility | Excludes deleted, in-flight, moderation-held, and `action` category messages. Thread replies **are** eligible |
| Pin permission | No client-side role gate — Pin is offered to every member and the server decides, refusing with `ERR_ACTION_NOT_ALLOWED`. The one client-side exception is a system pin, whose Unpin is withheld. Saving has no gate |
| Confirmation | Pin and Save run immediately; **Unpin and Unsave ask first** |

Check warning on line 477 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L477

Did you really mean 'Unsave'?
| Indicators | Pinned and saved bubbles keep their status-info footer and show a marker there, even mid-batch |

See the [Pin and Save guide](/ui-kit/angular/guides/pin-and-save-messages) for the full feature.

<Warning>
**These outputs are affordances, not behaviour — an unbound output leaves a visible control that does nothing.**

Check warning on line 483 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L483

Did you really mean 'affordances'?

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 (`<cometchat-thread-header>` plus a second `<cometchat-message-list>` bound to `[parentMessageId]`), or hide the affordance. Do not ship it visible and dead. The same applies to `smartReplyClick`, `conversationStarterClick` and `messagePrivatelyClick`.

Check warning on line 487 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L487

Did you really mean 'affordance'?
</Warning>


Expand Down Expand Up @@ -642,7 +642,7 @@

### Usage Examples for Complex Properties

#### Custom Text Formatters

Check warning on line 645 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L645

Did you really mean 'Formatters'?

```typescript expandable
import { CometChatTextFormatter } from '@cometchat/chat-uikit-angular';
Expand Down Expand Up @@ -729,7 +729,7 @@

### Customization Approaches

CometChat UIKit offers multiple ways to customize the message list:

Check warning on line 732 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L732

Did you really mean 'UIKit'?

| Approach | Use Case | Scope |
|----------|----------|-------|
Expand All @@ -737,7 +737,7 @@
| **Service-based** | Global customization via MessageBubbleConfigService | All message list instances |
| **CSS Variables** | Visual styling and theming | Global or scoped |
| **Custom Templates** | Complete control over message rendering | Per message type or global |
| **Text Formatters** | Custom text processing and formatting | All text messages |

Check warning on line 740 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L740

Did you really mean 'Formatters'?

---

Expand Down Expand Up @@ -1146,7 +1146,7 @@

By default, `MessageBubbleConfigService` and `FormatterConfigService` are provided at the root level (`providedIn: 'root'`), meaning all message list instances share the same configuration. This works well for most applications.

However, if you need different bubble styles or formatters for different message lists (e.g., a main chat panel and a thread panel side by side), you can scope these services to a wrapper component using Angular's hierarchical dependency injection.

Check warning on line 1149 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1149

Did you really mean 'formatters'?

<Note>
Each `<cometchat-message-list>` already gets its own `MessageListService` instance automatically (the component provides it internally). The scoping technique below applies only to customization services like `MessageBubbleConfigService` and `FormatterConfigService`.
Expand Down Expand Up @@ -1270,13 +1270,13 @@
---


### Custom Text Formatters

Check warning on line 1273 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1273

Did you really mean 'Formatters'?

Text formatters allow you to process and transform message text content. They can detect patterns like mentions, URLs, hashtags, or custom patterns and apply formatting.

Check warning on line 1275 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1275

Did you really mean 'formatters'?

#### Understanding Text Formatters

Check warning on line 1277 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1277

Did you really mean 'Formatters'?

Text formatters extend the `CometChatTextFormatter` base class:

Check warning on line 1279 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1279

Did you really mean 'formatters'?

```typescript expandable
import { CometChat } from '@cometchat/chat-sdk-javascript';
Expand Down Expand Up @@ -1400,7 +1400,7 @@
}
```

#### Using Custom Formatters

Check warning on line 1403 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1403

Did you really mean 'Formatters'?

```typescript expandable
import { Component, OnInit } from '@angular/core';
Expand Down Expand Up @@ -1458,7 +1458,7 @@
```

<Note>
Formatters are applied in order of their `priority` property (lower numbers run first). Each formatter receives the output of the previous formatter as its input.

Check warning on line 1461 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1461

Did you really mean 'Formatters'?
</Note>

---
Expand Down Expand Up @@ -1550,7 +1550,7 @@

### CSS Variable Customization

CometChat UIKit uses CSS variables for styling, making it easy to customize the appearance without modifying component code. Override these variables in your global styles or scoped to specific components.

Check warning on line 1553 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1553

Did you really mean 'UIKit'?

#### Core CSS Variables

Expand Down Expand Up @@ -1734,7 +1734,7 @@

### Theming (Light/Dark Mode)

CometChat UIKit supports both light and dark themes through CSS variables. The theme is controlled by the `data-theme` attribute on the root element.

Check warning on line 1737 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1737

Did you really mean 'UIKit'?

#### Switching Themes

Expand Down Expand Up @@ -1914,7 +1914,7 @@
```

<Tip>
Use CSS variables consistently throughout your application to ensure theme changes propagate correctly. Avoid hardcoding color values in component styles.

Check warning on line 1917 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L1917

Did you really mean 'hardcoding'?
</Tip>

---
Expand Down Expand Up @@ -2258,7 +2258,7 @@
<Warning>
`parentMessageId` is **deprecated**. Pass the whole `parentMessage` instead.

The id alone cannot answer "is this thread subscribed right now", and a reply arriving over the socket carries no subscription flag of its own — it has to inherit the parent's. A list holding only the id therefore renders realtime replies with the wrong subscription state in their action menu. The id used for scoping is derived from `parentMessage` when it is present, so passing both is redundant; passing only the id still works, it just opts out of realtime subscription state on replies.

Check warning on line 2261 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L2261

Did you really mean 'realtime'?

Check warning on line 2261 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L2261

Did you really mean 'realtime'?
</Warning>

Re-pass `parentMessage` when the parent updates in real time, so the list keeps reading its current state.
Expand Down Expand Up @@ -3211,11 +3211,11 @@

| Key | Action | Context |
|-----|--------|---------|
| `Tab` | Move focus to next focusable element | Global navigation |

Check warning on line 3214 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3214

Did you really mean 'focusable'?
| `Shift + Tab` | Move focus to previous focusable element | Global navigation |

Check warning on line 3215 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3215

Did you really mean 'focusable'?
| `Enter` | Activate focused button or link | Buttons, links, interactive elements |
| `Space` | Activate focused button, toggle checkbox | Buttons, checkboxes, toggles |
| `Escape` | Close modal, menu, or panel; Cancel current action | Modals, context menus, thread panels, dialogs |

Check warning on line 3218 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3218

Did you really mean 'dialogs'?
| `Arrow Up` | Navigate to previous item in list | Context menus, reaction picker, message options |
| `Arrow Down` | Navigate to next item in list | Context menus, reaction picker, message options |
| `Arrow Left` | Navigate to previous option | Horizontal option lists, emoji picker |
Expand Down Expand Up @@ -3306,11 +3306,11 @@

The component implements proper focus management for a seamless keyboard experience:

1. **Focus Trapping in Modals**: When dialogs (delete confirmation, flag message, etc.) are open, focus is trapped within the modal until it's closed.

Check warning on line 3309 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3309

Did you really mean 'dialogs'?

2. **Focus Restoration**: When a modal or menu is closed, focus returns to the element that triggered it.

3. **Visible Focus Indicators**: All focusable elements have visible focus indicators using CSS:

Check warning on line 3313 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3313

Did you really mean 'focusable'?

```css expandable
/* Focus indicator styles (built into the component) */
Expand Down Expand Up @@ -3343,13 +3343,13 @@
| `role="list"` | Message container | Identifies the message container as a list |
| `role="listitem"` | Message bubble | Identifies each message as a list item |
| `role="button"` | Interactive elements | Identifies clickable elements as buttons |
| `role="dialog"` | Modals | Identifies modal dialogs |

Check warning on line 3346 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3346

Did you really mean 'dialogs'?
| `role="menu"` | Context menu | Identifies the context menu |
| `role="menuitem"` | Menu options | Identifies individual menu items |
| `role="status"` | Status indicators | Identifies status information (typing, receipts) |
| `role="alert"` | Error messages | Identifies important alerts |
| `aria-label` | Buttons, icons | Provides accessible names for elements without visible text |
| `aria-labelledby` | Dialogs, sections | References the element that labels this element |

Check warning on line 3352 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3352

Did you really mean 'Dialogs'?
| `aria-describedby` | Complex elements | References elements that describe this element |
| `aria-live` | Dynamic content | Announces content changes to screen readers |
| `aria-expanded` | Expandable elements | Indicates whether an element is expanded or collapsed |
Expand Down Expand Up @@ -3468,7 +3468,7 @@
</div>
```

**Modal Dialogs:**

Check warning on line 3471 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3471

Did you really mean 'Dialogs'?
```html expandable
<!-- Delete confirmation dialog -->
<div
Expand Down Expand Up @@ -3576,8 +3576,8 @@
- [ ] Error messages are announced immediately
- [ ] Loading states are announced

**Dialogs and Modals:**

Check warning on line 3579 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3579

Did you really mean 'Dialogs'?
- [ ] Dialogs are announced when opened

Check warning on line 3580 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L3580

Did you really mean 'Dialogs'?
- [ ] Focus moves to dialog when opened
- [ ] Can navigate dialog with Tab key
- [ ] Escape key closes dialog
Expand Down Expand Up @@ -4053,7 +4053,7 @@
}
```

#### 3. Implement trackBy for Custom Lists

Check warning on line 4056 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L4056

Did you really mean 'trackBy'?

If you render additional lists within message templates, always use `trackBy`:

Expand Down Expand Up @@ -4097,9 +4097,9 @@
}
```

#### 5. Debounce Scroll Events

Check warning on line 4100 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L4100

Did you really mean 'Debounce'?

If you add custom scroll handlers, debounce them to prevent performance issues:

Check warning on line 4102 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L4102

Did you really mean 'debounce'?

```typescript expandable
import { Component, OnInit, OnDestroy } from '@angular/core';
Expand Down Expand Up @@ -4140,9 +4140,9 @@
}
```

#### 6. Optimize Text Formatters

Check warning on line 4143 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L4143

Did you really mean 'Formatters'?

Keep text formatters efficient by avoiding complex regex patterns:

Check warning on line 4145 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L4145

Did you really mean 'formatters'?

```typescript expandable
// ❌ BAD: Complex regex with backtracking
Expand Down Expand Up @@ -4632,8 +4632,8 @@
#### Runtime Optimization
- [ ] Avoid expensive computations in templates
- [ ] Use `trackBy` for all `@for` loops
- [ ] Debounce scroll and resize event handlers

Check warning on line 4635 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L4635

Did you really mean 'Debounce'?
- [ ] Keep text formatters simple and efficient

Check warning on line 4636 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L4636

Did you really mean 'formatters'?

#### Memory Management
- [ ] Clean up subscriptions on component destroy
Expand All @@ -4658,7 +4658,7 @@
</Tip>

<Warning>
Avoid premature optimization. Focus on the most impactful optimizations first (pagination, lazy loading, change detection) before micro-optimizing. Always measure before and after changes to verify improvements.

Check warning on line 4661 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L4661

Did you really mean 'impactful'?
</Warning>


Expand Down Expand Up @@ -5225,7 +5225,7 @@
<Step title="Update Configuration">
Replace placeholder values in the code:
- `YOUR_APP_ID` → Your CometChat App ID
- `YOUR_REGION` → Your region (us, eu, in, etc.)

Check warning on line 5228 in ui-kit/angular/components/cometchat-message-list.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-message-list.mdx#L5228

Did you really mean 'eu'?
- `YOUR_AUTH_KEY` → Your Auth Key
- `CURRENT_USER_ID` → The logged-in user's ID
- `RECEIVER_USER_ID` → The user ID to chat with
Expand Down
2 changes: 1 addition & 1 deletion ui-kit/angular/components/cometchat-search.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "CometChatSearch"
title: "Search"
description: "A unified Angular search component for cross-entity search across conversations and messages with filter chips, scoped search, and template customization"
---

Expand All @@ -16,7 +16,7 @@
| 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 |

Check warning on line 19 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L19

Did you really mean 'Debounce'?
| Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
| Full props | See [Properties](#properties) |
| Events | See [Events](#events) |
Expand All @@ -26,7 +26,7 @@

## 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.

Check warning on line 29 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L29

Did you really mean 'debounced'?

The component follows a **service-driven architecture**:
- **SearchConversationsService** handles conversation search queries, pagination, and real-time listener updates
Expand All @@ -39,7 +39,7 @@
- **Cross-Entity Search**: Search across both conversations and messages simultaneously, or scope to one
- **9 Filter Types**: Audio, Documents, Groups, Photos, Videos, Links, Unread, Conversations, Messages
- **Scoped Search**: Narrow results to a specific user (`uid`) or group (`guid`)
- **Debounced Input**: 500ms debounce prevents excessive SDK calls while typing

Check warning on line 42 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L42

Did you really mean 'Debounced'?

Check warning on line 42 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L42

Did you really mean 'debounce'?
- **Lazy-Loaded Sections**: Conversation and message result lists use `@defer` for optimal initial load
- **Unified State Views**: Single empty/error view when both sections report the same state
- **Template Customization**: Override any section of conversation or message result items
Expand Down Expand Up @@ -160,7 +160,7 @@
| `conversationsRequestBuilder` | `ConversationsRequestBuilder` | `undefined` | Custom request builder for conversation search queries |
| `messagesRequestBuilder` | `MessagesRequestBuilder` | `undefined` | Custom request builder for message search queries |
| `conversationOptions` | `(conv: Conversation) => CometChatOption[]` | `undefined` | Function to provide custom context menu options for conversation results |
| `textFormatters` | `CometChatTextFormatter[]` | `[]` | Custom text formatters for message content display |

Check warning on line 163 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L163

Did you really mean 'formatters'?
| `messageSentAtDateTimeFormat` | `CalendarObject` | `undefined` | Custom date/time format for message timestamps |

### Display Control Properties
Expand Down Expand Up @@ -637,7 +637,7 @@
**Focus Management:**
- Search input auto-focuses on component load
- Clear button restores focus to search input after clearing
- Result items are focusable with `tabindex="0"` (message results)

Check warning on line 640 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L640

Did you really mean 'focusable'?
- Visible focus indicators meeting WCAG contrast requirements

## Styling with CSS Variables
Expand Down Expand Up @@ -733,7 +733,7 @@

### Error State Behavior

- If only one section errors while the other has results, the errored section shows its own error view with its section header

Check warning on line 736 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L736

Did you really mean 'errored'?
- If both sections error, a single unified error view is shown without section headers
- Custom `errorView` templates are used when provided

Expand Down Expand Up @@ -850,7 +850,7 @@
- **Change Detection**: Uses `OnPush` strategy for optimal performance
- **Lazy Loading**: Child result components use `@defer` blocks for code splitting
- **Signal-Based State**: Services use Angular signals for reactive state management
- **Debounced Search**: 500ms debounce on the search input to reduce SDK calls

Check warning on line 853 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L853

Did you really mean 'Debounced'?

Check warning on line 853 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L853

Did you really mean 'debounce'?
- **BEM CSS**: Follows Block Element Modifier naming convention (`cometchat-search__*`)
- **Localization**: All text uses the `translate` pipe for i18n support

Expand All @@ -862,4 +862,4 @@
- [SearchMessagesService](/ui-kit/angular/api-reference/search-messages-service) — Message search state, attachment-type filtering, scoped queries
- [CometChatTemplatesService](/ui-kit/angular/api-reference/templates-service) — Template resolution priority chain and global template overrides
- [Accessibility](/ui-kit/angular/accessibility#search) — Cross-component keyboard accessibility reference
- [Events](/ui-kit/angular/events) — UIKit event bus for decoupled component communication

Check warning on line 865 in ui-kit/angular/components/cometchat-search.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-search.mdx#L865

Did you really mean 'UIKit'?
2 changes: 1 addition & 1 deletion ui-kit/angular/components/cometchat-thread-header.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
- **Media Icons**: Displays type-specific icons for image, video, audio, and file messages
- **Reply Count**: Shows the number of replies with singular/plural localization
- **Close Button**: Returns the user to the main chat view
- **Follow / Unfollow Control**: An icon-only bell that subscribes the user to the thread's replies, when the feature is enabled

Check warning on line 37 in ui-kit/angular/components/cometchat-thread-header.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-thread-header.mdx#L37

Did you really mean 'Unfollow'?
- **Keyboard Navigation**: Supports Tab, Enter, Space, and Escape key interactions
- **Full ARIA Support**: Includes `role="banner"`, descriptive labels, and accessible close button

Expand Down Expand Up @@ -178,11 +178,11 @@

## Thread Subscription

When thread subscription is enabled, the header's top bar carries an icon-only bell that follows or unfollows the thread. Following opts the user into notifications for the thread's replies; it is per-user and changes nothing anyone else sees.

Check warning on line 181 in ui-kit/angular/components/cometchat-thread-header.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-thread-header.mdx#L181

Did you really mean 'unfollows'?

The control renders only when **all** of the following hold:

1. `enableThreadSubscription: true` is provided through [`COMETCHAT_GLOBAL_CONFIG`](/ui-kit/angular/customization/global-config#enablethreadsubscription) — the feature is **off by default**
1. `enableThreadSubscription: true` is provided through `COMETCHAT_GLOBAL_CONFIG` — the feature is **off by default**
2. The installed Chat SDK exposes the thread API
3. `hideThreadSubscriptionToggle` is `false`
4. The server has not reported the thread as deleted or off-limits
Expand Down Expand Up @@ -330,7 +330,7 @@
- The header uses `role="banner"` for landmark navigation
- An `aria-label` combines the parent message preview and reply count for context
- The close button has a dedicated `aria-label` (e.g., "Close thread")
- The follow control exposes `aria-pressed` for its state, and its tooltip and accessible name are the **same string**, so a voice-control user can say what the tooltip showed them (WCAG 2.5.3)

Check warning on line 333 in ui-kit/angular/components/cometchat-thread-header.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-thread-header.mdx#L333

Did you really mean 'tooltip'?

Check warning on line 333 in ui-kit/angular/components/cometchat-thread-header.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-thread-header.mdx#L333

Did you really mean 'tooltip'?
- Toggling announces the resulting state through a live region, rather than re-reading the button label — the label names the *next* action, which reads backwards once the state has changed

### High Contrast & Reduced Motion
Expand All @@ -340,7 +340,7 @@

## Related

- [Thread Subscription](/ui-kit/angular/guides/thread-subscription) - Following and unfollowing threads, end to end

Check warning on line 343 in ui-kit/angular/components/cometchat-thread-header.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/components/cometchat-thread-header.mdx#L343

Did you really mean 'unfollowing'?
- [Threaded Messages](/ui-kit/angular/guides/threaded-messages) - Building the thread view itself
- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Displays messages within the thread
- [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) - Renders individual messages in the thread
4 changes: 2 additions & 2 deletions ui-kit/angular/core-features.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

</Accordion>

The Angular UIKit components work together to deliver a complete chat experience. The sections below map each core feature to the components that implement it, so you can quickly find the right building block for any capability.

Check warning on line 19 in ui-kit/angular/core-features.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/core-features.mdx#L19

Did you really mean 'UIKit'?

## Instant Messaging

Expand Down Expand Up @@ -101,7 +101,7 @@
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders reaction indicators on message bubbles and provides the reaction picker action. |
| [cometchat-reactions](/ui-kit/angular/components/cometchat-reactions) | Displays the reaction bar beneath a message bubble showing all reactions and their counts. |
| [cometchat-reaction-list](/ui-kit/angular/components/cometchat-reaction-list) | Shows the full list of users who reacted to a message, grouped by reaction type. |
| [cometchat-reaction-info](/ui-kit/angular/components/cometchat-reaction-info) | Displays a tooltip or popover with details about a specific reaction on hover. |

Check warning on line 104 in ui-kit/angular/core-features.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/core-features.mdx#L104

Did you really mean 'tooltip'?

## Mentions

Expand Down Expand Up @@ -131,9 +131,9 @@
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders thread replies when `parentMessageId` is set. |
| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Sends replies within a thread when `parentMessageId` is set. |

## Thread Subscription
### Thread Subscription

Thread Subscription lets a user follow one specific thread so they are notified about its replies, and unfollow when they no longer want them. It is per-user and per-thread, and is **off by default** — enable it with `enableThreadSubscription` in [Global Configuration](/ui-kit/angular/customization/global-config#enablethreadsubscription).
Thread Subscription lets a user follow one specific thread so they are notified about its replies, and unfollow when they no longer want them. It is per-user and per-thread, and is **off by default** — enable it with `enableThreadSubscription` in `COMETCHAT_GLOBAL_CONFIG`.

Check warning on line 136 in ui-kit/angular/core-features.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/core-features.mdx#L136

Did you really mean 'unfollow'?

| Component | Functionality |
| --- | --- |
Expand All @@ -148,7 +148,7 @@

| Component | Functionality |
| --- | --- |
| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Offers Pin, Unpin, Save, and Unsave under an "Organise" flyout in the message action menu. |

Check warning on line 151 in ui-kit/angular/core-features.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/core-features.mdx#L151

Did you really mean 'Unsave'?

Check warning on line 151 in ui-kit/angular/core-features.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/core-features.mdx#L151

Did you really mean 'flyout'?
| [cometchat-message-bubble](/ui-kit/angular/components/cometchat-message-bubble) | Marks pinned and saved messages in the bubble's status-info footer. |
| [cometchat-pinned-messages](/ui-kit/angular/components/cometchat-pinned-messages) | Lists a conversation's pinned messages, with attribution and inline unpin. |
| [cometchat-saved-messages](/ui-kit/angular/components/cometchat-saved-messages) | Lists the logged-in user's saved messages across every conversation. |
Expand Down Expand Up @@ -272,7 +272,7 @@

<CardGroup cols={2}>
<Card title="Components Overview" icon="grid-2" href="/ui-kit/angular/components/components-overview">
Browse all available Angular UIKit components

Check warning on line 275 in ui-kit/angular/core-features.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/core-features.mdx#L275

Did you really mean 'UIKit'?
</Card>
<Card title="Theme" icon="palette" href="/ui-kit/angular/customization/theming">
Customize the look and feel of your chat UI
Expand Down
21 changes: 2 additions & 19 deletions ui-kit/angular/customization/global-config.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Global Configuration"
description: "Centralized configuration for CometChat Angular UIKit components using the COMETCHAT_GLOBAL_CONFIG injection token"

Check warning on line 3 in ui-kit/angular/customization/global-config.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/customization/global-config.mdx#L3

Did you really mean 'UIKit'?
---

<Accordion title="AI Integration Quick Reference">
Expand All @@ -18,7 +18,7 @@

## 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.

Check warning on line 21 in ui-kit/angular/customization/global-config.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/customization/global-config.mdx#L21

Did you really mean 'UIKit'?

Check warning on line 21 in ui-kit/angular/customization/global-config.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/customization/global-config.mdx#L21

Did you really mean 'UIKit'?

### Priority System

Expand Down Expand Up @@ -85,7 +85,7 @@
disableSoundForMessages: envService.isMobile,
showSearchBar: true,
}),
deps: [EnvironmentService],

Check warning on line 88 in ui-kit/angular/customization/global-config.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/customization/global-config.mdx#L88

Did you really mean 'deps'?
}
```

Expand All @@ -106,7 +106,6 @@
| `customSoundForCalls` | `string` | `undefined` | Custom sound URL for calls |
| `customSoundForMessages` | `string` | `undefined` | Custom sound URL for messages |
| `hideAvatar` | `boolean` | `undefined` | Hide avatar across components |
| `enableThreadSubscription` | `boolean` | `undefined` (off) | Enable the thread follow/unfollow surfaces — the control in the thread header and the follow option in the message action sheet |
| `enablePinMessage` | `boolean` | `undefined` | Force the Pin Message surfaces on or off, overriding the app-level flag the Chat SDK reports |
| `enableSaveMessage` | `boolean` | `undefined` | Force the Save Message surfaces on or off, overriding the app-level flag the Chat SDK reports |
| `callSettingsBuilder` | `CallSettingsBuilder` | `undefined` | Custom `CallSettingsBuilder` for call components (call buttons, call logs, ongoing call) |
Expand All @@ -117,22 +116,7 @@

## Feature Gates

Three properties gate whole features rather than tune a component's appearance. They behave differently from the rest of the table, so they are worth calling out.

### enableThreadSubscription

Defaults to **off**. The backend exposes no capability flag a client could feature-detect from, so whether the threads endpoints are deployed is something only you know. When off, neither the thread header control nor the action-sheet option renders and no thread request is made — whatever the per-component `hideThreadSubscription*` inputs say.

```typescript expandable
{
provide: COMETCHAT_GLOBAL_CONFIG,
useValue: {
enableThreadSubscription: true,
} as GlobalConfig,
}
```

See the [Thread Subscription guide](/ui-kit/angular/guides/thread-subscription).
Two properties gate whole features rather than tune a component's appearance. They behave differently from the rest of the table, so they are worth calling out.

### enablePinMessage and enableSaveMessage

Expand Down Expand Up @@ -214,8 +198,7 @@
|-----------|----------------|
| CometChatConversations | `hideReceipts`, `hideError`, `hideUserStatus`, `hideGroupType`, `showScrollbar`, `showSearchBar`, `disableSoundForMessages`, `textFormatters`, `customSoundForMessages`, `hideAvatar`, `disableDefaultContextMenu` |
| CometChatMessageHeader | `hideUserStatus` |
| CometChatMessageList | `hideReceipts`, `hideError`, `textFormatters`, `disableSoundForMessages`, `customSoundForMessages`, `disableDefaultContextMenu`, `enableThreadSubscription`, `enablePinMessage`, `enableSaveMessage` |
| CometChatThreadHeader | `enableThreadSubscription` |
| CometChatMessageList | `hideReceipts`, `hideError`, `textFormatters`, `disableSoundForMessages`, `customSoundForMessages`, `disableDefaultContextMenu`, `enablePinMessage`, `enableSaveMessage` |
| CometChatMessageComposer | `textFormatters`, `disableSoundForMessages`, `customSoundForMessages` |
| CometChatCallButtons | `disableSoundForCalls`, `customSoundForCalls`, `callSettingsBuilder` |
| CometChatCallLogs | `showScrollbar`, `callSettingsBuilder` |
Expand Down
2 changes: 1 addition & 1 deletion ui-kit/angular/guides/threaded-messages.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat Angular UIKit."

Check warning on line 4 in ui-kit/angular/guides/threaded-messages.mdx

View check run for this annotation

Mintlify / Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/angular/guides/threaded-messages.mdx#L4

Did you really mean 'UIKit'?
---

<Accordion title="AI Integration Quick Reference">
Expand Down Expand Up @@ -234,7 +234,7 @@
Both read the current state, flip it optimistically on click, and show a toast if the server rejects the change. No wiring is required to make them work.

<Note>
Thread subscription is **off by default**. Turn it on with `enableThreadSubscription` in [Global Configuration](/ui-kit/angular/customization/global-config#enablethreadsubscription) — no backend capability flag exists for the kit to feature-detect from, so whether the thread endpoints are deployed for your app is something only you know.
Thread subscription is **off by default**. Turn it on with `enableThreadSubscription` in `COMETCHAT_GLOBAL_CONFIG` — no backend capability flag exists for the kit to feature-detect from, so whether the thread endpoints are deployed for your app is something only you know.
</Note>

To react to a change, handle `(threadSubscriptionChange)` on either surface:
Expand Down