cometchat · aanshisingh-cometchat · Aug 7, 2026
diff --git a/docs.json b/docs.json
@@ -2723,6 +2723,13 @@
                                   "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"
+                                ]
+                              },
                               {
                                 "group": "Message Bubbles",
                                 "pages": [
@@ -2787,6 +2794,8 @@
                               "ui-kit/angular/guides/guides-overview",
                               "ui-kit/angular/guides/state-management",
                               "ui-kit/angular/guides/threaded-messages",
+                              "ui-kit/angular/guides/thread-subscription",
+                              "ui-kit/angular/guides/pin-and-save-messages",
                               "ui-kit/angular/guides/group-chat",
                               "ui-kit/angular/guides/new-chat",
                               "ui-kit/angular/guides/block-unblock-user",

@@ -21,8 +21,21 @@
 - **8 Granular Events**: Respond to precise user interactions
 - **Display Configuration**: Hide receipts, user status, or group type icons
 - **Context Menu Support**: Customizable actions for each conversation
+- **Pin Marker**: Marks a pinned conversation in the trailing area, alongside the unread badge
 - **OnPush Change Detection**: Optimized for performance
 
+### Pinned Conversations
+
+A conversation the user has pinned is marked in the row's trailing area. The state is derived from the conversation itself — there is no input for it:
+
+```typescript
+const isPinned = conversation.isPinned?.();
+```
+
+The presence of `pinnedAt` *is* the boolean; an unpinned conversation carries no key at all, so this is never "pinned at 0". `isPinned()` covers both a personal pin and an app-wide one, and the accessor is optional-called because older Chat SDK builds do not expose it.
+
+The marker itself is `aria-hidden`, so the state reaches screen readers through the row's accessible label instead — otherwise pinned and unpinned rows would be indistinguishable without sight. Pinning is performed from [CometChatConversations](/ui-kit/angular/components/cometchat-conversations#pinned-conversations), which also owns the ordering.
+
 ## Basic Usage
 
 ### Simple Implementation
@@ -125,7 +138,7 @@
 | `hideGroupType` | `boolean` | `false` | Hide the group type icon (public, private, password) |
 | `disableDefaultContextMenu` | `boolean` | `true` | When true, prevents the browser's native context menu. Custom CometChat menu visibility depends on the component's context-menu options and interaction state. |
 | `dateFormat` | `CalendarObject` | `undefined` | Custom date format configuration for the timestamp display |
 | `textFormatters` | `CometChatTextFormatter[]` | `[]` | Array of text formatters applied to the last message subtitle text |

 ### Customization Properties

@@ -645,6 +658,12 @@
   --cometchat-conversations-status-size: 14px;
   --cometchat-conversations-status-online-color: var(--cometchat-success-color);
   --cometchat-conversations-status-offline-color: var(--cometchat-neutral-color-400);
+
+  /* Pin marker (trailing area, beside the unread badge) */
+  --cometchat-conversations-pin-width: 16px;
+  --cometchat-conversations-pin-height: 16px;
+  --cometchat-conversations-pin-color: var(--cometchat-icon-color-secondary);
+  --cometchat-conversations-tail-markers-gap: var(--cometchat-spacing-1);
 
   /* Title */
   --cometchat-conversations-title-text-font: var(--cometchat-font-body-medium);
@@ -768,7 +787,7 @@
 </Tip>

 <Warning>
  When handling granular click events (avatarClick, titleClick, etc.), the component automatically calls `stopPropagation()` to prevent the main `itemClick` event from firing. Design your event handlers accordingly.
 </Warning>

 <Info>

@@ -19,7 +19,7 @@
 - **Service-Based Architecture**: Clean separation of concerns with Angular best practices
 - **Keyboard Navigation**: Full keyboard accessibility with arrow keys and shortcuts (WCAG 2.1 Level AA compliant)
 - **Selection Modes**: Support for single and multiple conversation selection
 - **Search Functionality**: Built-in search with debouncing
 - **Context Menu**: Customizable actions for each conversation
 - **Sound Notifications**: Optional notification sounds for new messages
 - **Error Handling**: Comprehensive error handling with retry logic
@@ -59,7 +59,7 @@
 - `aria-label` with conversation details (name, last message, unread count)
 - `aria-selected` indicates selected conversations
 - `aria-live="polite"` region for screen reader announcements
 - Proper `tabindex` management (roving tabindex pattern)

 **Screen Reader Support:**
 - Announces conversation details when focused
@@ -72,7 +72,7 @@
 - Visible focus indicators (2px border) meeting WCAG contrast requirements
 - Focus trap within modals (delete confirmation)
 - Focus restoration after closing overlays
 - Roving tabindex for efficient keyboard navigation
 - High contrast mode support

 **WCAG 2.1 Compliance:**
@@ -156,6 +156,7 @@
 |----------|------|---------|-------------|
 | `hideReceipts` | `boolean` | `false` | Hide message read receipts in conversation items |
 | `hideError` | `boolean` | `false` | Hide error views when errors occur |
+| `hidePinConversation` | `boolean` | `false` | Hide the pin/unpin option in the row context menu. See [Pinned Conversations](#pinned-conversations) |
 | `hideDeleteConversation` | `boolean` | `false` | Hide delete option in context menu |
 | `hideUserStatus` | `boolean` | `false` | Hide online/offline status indicators |
 | `hideGroupType` | `boolean` | `false` | Hide group type icons for group conversations |
@@ -343,6 +344,43 @@
 </Tab>
 </Tabs>
 
+## Pinned Conversations
+
+Each row's context menu carries a **Pin conversation** / **Unpin conversation** entry, placed above Delete — the safe, reversible action comes first. Pinning is per-user: it rearranges this user's list and changes nothing anyone else sees.
+
+```html expandable
+<cometchat-conversations
+  [hidePinConversation]="false"
+  (itemClick)="onConversationClick($event)">
+</cometchat-conversations>
+```
+
+The option renders whenever the installed Chat SDK exposes `pinConversation` / `unpinConversation`. There is no app-level feature flag for it, unlike [pinning a message](/ui-kit/angular/guides/pin-and-save-messages).
+
+### Ordering
+
+Pinned conversations are lifted above unpinned ones. The partition is **stable**: recency still decides the order among pinned chats and among unpinned ones, so a pinned chat with a new message still rises to the top of its block, and a message in an unpinned chat can never push the pinned block down.
+
+An unpinned list is returned unchanged, so the common case pays nothing for this.
+
+### Reading the State
+
+```typescript
+const isPinned = conversation.isPinned?.();
+```
+
+The presence of `pinnedAt` *is* the boolean — an unpinned conversation carries no key at all, so this is never "pinned at 0". `isPinned()` covers both a personal pin and an app-wide one (`pinnedBy === "app_system"`). The accessor is optional-called because older Chat SDK builds do not expose it.
+
+### Behavior
+
+| Behavior | Detail |
+|:---|:---|
+| Confirmation | Pinning runs straight away; **unpinning asks first**. A pin is a deliberate arrangement of the list, and a misplaced click should not undo it |
+| Marker | The row shows a pin marker, styled with `--cometchat-conversations-pin-color`, `--cometchat-conversations-pin-width`, and `--cometchat-conversations-pin-height` |
+| Accessibility | The marker is `aria-hidden`; the state reaches screen readers through the row's own accessible label |
+| Limits | The pin cap is server-owned. Exceeding it shows "You can pin up to N conversations." with the real number read from the rejection |
+| New-message sound | The list scans every row rather than index 0 when deciding whether to play a sound, so a pinned chat sitting first does not silence it |
+
 ## Advanced Usage
 
 ### Filtering Conversations
@@ -1259,7 +1297,7 @@
 - Clear focus indicators using the primary color
 - Focus is maintained when navigating with keyboard
 - Focus returns to the last focused item after menu interactions
 - Focus is trapped within modal dialogs (context menus)

 ### High Contrast Mode

@@ -1356,7 +1394,7 @@

 ### Retry Logic

 The service includes automatic retry logic with exponential backoff for recoverable errors:

 - Network errors: Retries up to 3 times
 - Timeout errors: Retries with increasing delays (1s, 2s, 4s)

@@ -2,7 +2,7 @@
 title: "Message Bubble"
 description: "A flexible container component for rendering chat messages with configurable view slots, message options, and support for multiple message types"
 ---
 The `CometChatMessageBubble` component is a versatile container component that renders chat messages with configurable view slots. It serves as the primary wrapper for displaying messages in the CometChat Angular UIKit, handling message alignment, options menus, status indicators, and content rendering based on message type.

 ## Overview

@@ -81,15 +81,15 @@

 | View Slot | Description | Default Content |
 |-----------|-------------|-----------------|
 | **bubbleView** | Complete bubble override - replaces entire message bubble | Header + Reply + Content + StatusInfo + Bottom + Footer |
 | **leadingView** | Avatar section on the left side of incoming messages | User avatar with online status |
 | **headerView** | Sender information above the message content | Sender name (shown in group chats) |
 | **replyView** | Quoted message preview for reply messages | Message preview component |
 | **contentView** | Main message content area | Text/Image/Video/Audio/File bubble |
 | **statusInfoView** | Timestamp and delivery status | Time, receipts, edited label |
 | **bottomView** | Additional content below the message | Link previews, load more button |
 | **footerView** | Reactions and footer content | Reaction emojis |
 | **threadView** | Thread reply indicators | Reply count and thread icon |

 ## Basic Usage

@@ -222,7 +222,7 @@
 | `group` | `CometChat.Group \| null` | `null` | Group context for group conversations. Enables avatar and sender name display |
 | `options` | `Array<CometChatActionsIcon \| CometChatActionsView>` | `[]` | Message options to display in context menu |
 | `quickOptionsCount` | `number` | `2` | Number of options to show directly on bubble before overflow |
 | `textFormatters` | `CometChatTextFormatter[]` | `[]` | Text formatters for text message content |
 | `dateFormat` | `CalendarObject` | `undefined` | Custom date format for timestamp display |
 | `translatedText` | `string` | `undefined` | Translated text to display for text messages |
 | `reactionsRequestBuilder` | `CometChat.ReactionsRequestBuilder` | `undefined` | Custom request builder for fetching reactions |
@@ -289,6 +289,52 @@
 [`CometChatMessageComposer`](/ui-kit/angular/components/cometchat-message-composer#multiple-attachments) has an `enableMultipleAttachments` input, but it governs only the **send** side — whether picking files stages them in a tray for one batched send. It has no effect on rendering.
 </Note>
 
+### Pinned and Saved Indicators
+
+A pinned or saved message is marked in the bubble's status-info footer, beside the timestamp. Both are derived from the message itself — there is no input for either:
+
+| Indicator | Derived from | Who sees it |
+| --- | --- | --- |
+| Pin marker | `message.getPinnedAt()` | Everyone in the conversation — a pin is conversation-wide |
+| Bookmark marker | `message.getSavedAt()` | Only the user who saved it — `savedAt` is simply not present in anyone else's copy |
+
+The presence of the timestamp *is* the boolean: the backend omits these fields entirely when unset, so an absent value means "not pinned" / "not saved", never zero. Neither indicator shows on a deleted message.
+
+A batched media message normally shows its footer on the last bubble only. A pinned or saved bubble keeps its footer regardless — hiding it would hide the very badge that explains the mark.
+
+```css expandable
+/* Both markers */
+.cometchat-message-bubble__pinned-indicator,
+.cometchat-message-bubble__saved-indicator {
+  background-color: var(--cometchat-message-bubble-meta-indicator-color, var(--cometchat-text-color-secondary));
+}
+
+/* Outgoing bubbles invert them */
+.cometchat-message-bubble__wrapper--outgoing .cometchat-message-bubble__pinned-indicator,
+.cometchat-message-bubble__wrapper--outgoing .cometchat-message-bubble__saved-indicator {
+  background-color: var(--cometchat-message-bubble-meta-indicator-color-outgoing, var(--cometchat-text-color-white));
+}
+
+/* Individual sizes */
+.cometchat-message-bubble__pinned-indicator {
+  width: var(--cometchat-message-bubble-pinned-indicator-width, 7px);
+  height: var(--cometchat-message-bubble-pinned-indicator-height, 11px);
+}
+
+.cometchat-message-bubble__saved-indicator {
+  width: var(--cometchat-message-bubble-saved-indicator-width, 9px);
+  height: var(--cometchat-message-bubble-saved-indicator-height, 11px);
+}
+
+/* Dot between the markers and the timestamp */
+.cometchat-message-bubble__meta-separator {
+  width: var(--cometchat-message-bubble-meta-separator-size, 3px);
+  height: var(--cometchat-message-bubble-meta-separator-size, 3px);
+}
+```
+
+Providing a [`statusInfoView`](#statusinfoview) replaces the footer wholesale, indicators included — render them yourself from `getPinnedAt()` / `getSavedAt()` if you need them. See the [Pin and Save guide](/ui-kit/angular/guides/pin-and-save-messages) for the full feature.
+
 ## Bubble Parts Customization
 
 Each bubble part can be customized independently using Angular `TemplateRef`. The customization follows a priority system:
@@ -297,7 +343,7 @@
 2. **Service configured view** (via `MessageBubbleConfigService`) - Medium priority
 3. **Default rendering** - Lowest priority

 ### bubbleView

 The `bubbleView` provides complete control over the entire message bubble. When set, it replaces all other views (header, content, footer, etc.).

@@ -382,7 +428,7 @@
 }
 ```

 ### leadingView

 The `leadingView` customizes the avatar section that appears on the left side of incoming messages in group conversations.

@@ -461,7 +507,7 @@
 }
 ```

 ### headerView

 The `headerView` customizes the sender name section that appears above the message content in group conversations.

@@ -533,7 +579,7 @@
 }
 ```

 ### replyView

 The `replyView` customizes the quoted message preview that appears when a message is a reply to another message.

@@ -643,7 +689,7 @@
 ```


 ### contentView

 The `contentView` customizes the main message content area. This is where the actual message (text, image, video, etc.) is displayed.

@@ -856,7 +902,7 @@
 }
 ```

 ### bottomView

 The `bottomView` customizes the section below the main content, typically used for link previews, warnings, or additional information.

@@ -984,7 +1030,7 @@
 ```


 ### footerView

 The `footerView` customizes the reactions section that appears below the message content.

@@ -1112,7 +1158,7 @@
 }
 ```

 ### threadView

 The `threadView` customizes the thread reply indicator that appears when a message has replies.

@@ -1388,7 +1434,7 @@

 ### Component-Specific CSS Variables

 In addition to the global theme tokens above, the Message Bubble component exposes its own overridable CSS custom properties, prefixed with `--cometchat-message-bubble-`. Override these to customize appearance for this component specifically, independently of the global theme tokens.

 <Info>
  The component exposes `--cometchat-message-bubble-` prefixed CSS custom properties that can be overridden. Inspect the rendered `.cometchat-message-bubble` element in your browser's developer tools to discover the exact variable names exposed by your installed version of the UI Kit.
@@ -1488,7 +1534,7 @@
 }
 ```

 ### With Text Formatters

 ```typescript expandable
 import { Component } from '@angular/core';

@@ -138,6 +138,7 @@ export class GroupChatComponent {
 | `hideVideoCallButton` | `boolean` | `true` | Hide the video call button. Defaults to `true` (hidden). When calling is enabled via `UIKitSettingsBuilder.setCallingEnabled(true)`, the resolved default becomes `false` (visible). Set to `true` explicitly to hide even when calling is enabled. |
 | `showSearchOption` | `boolean` | `false` | Show the search option in the header |
 | `showConversationSummaryButton` | `boolean` | `false` | Show the AI conversation summary button |
+| `showPinnedMessagesOption` | `boolean` | `false` | Add a "Pinned messages" entry to the overflow menu. The header only asks for the panel — the host opens it. See [Pinned Messages](#pinned-messages) |
 | `callSettingsBuilder` | `CallSettingsBuilder` | `undefined` | Custom `CallSettingsBuilder` forwarded to the call buttons and ongoing call screen. Follows the three-tier priority: @Input > [GlobalConfig](/ui-kit/angular/customization/global-config) > default. |
 
 ### AI Configuration Properties
@@ -176,8 +177,52 @@ export class GroupChatComponent {
 | `conversationSummaryClick` | `{ messageCount: number }` | Emitted when the conversation summary button is clicked or auto-generation is triggered |
 | `voiceCallClick` | `CometChat.User \| CometChat.Group` | Emitted when the voice call button is clicked |
 | `videoCallClick` | `CometChat.User \| CometChat.Group` | Emitted when the video call button is clicked |
+| `pinnedMessagesClick` | `void` | Emitted when "Pinned messages" is selected from the overflow menu |
 | `error` | `CometChat.CometChatException` | Emitted when an error occurs in the component or service |
 
+## Pinned Messages
+
+Set `showPinnedMessagesOption` to add a **Pinned messages** entry to the overflow menu. The header emits `pinnedMessagesClick` and does nothing else — where the panel appears is the host's decision.
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+  CometChatMessageHeaderComponent,
+  CometChatPinnedMessagesComponent,
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+  selector: 'app-messages',
+  standalone: true,
+  imports: [CometChatMessageHeaderComponent, CometChatPinnedMessagesComponent],
+  template: `
+    <cometchat-message-header
+      [group]="group"
+      [showPinnedMessagesOption]="true"
+      (pinnedMessagesClick)="showPinned = true">
+    </cometchat-message-header>
+
+    @if (showPinned) {
+      <cometchat-pinned-messages
+        [group]="group"
+        (closeClick)="showPinned = false">
+      </cometchat-pinned-messages>
+    }
+  `,
+})
+export class MessagesComponent {
+  group!: CometChat.Group;
+  showPinned = false;
+}
+```
+
+<Note>
+  The overflow menu appears only once **more than one** of `showSearchOption`, `showConversationSummaryButton`, and `showPinnedMessagesOption` is set. A single action stays a plain button rather than hiding behind a ⋮.
+</Note>
+
+Saved messages has no header entry point by design: a save is per-user and spans every conversation, so hanging it off one chat would misrepresent what it contains. Put [CometChatSavedMessages](/ui-kit/angular/components/cometchat-saved-messages) in your app chrome instead.
+
 ## Usage Patterns
 
 CometChatMessageHeader supports two usage patterns for receiving the active user or group context.

@@ -22,7 +22,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
 - **Keyboard Navigation**: Full keyboard accessibility (WCAG 2.1 Level AA compliant)
 - **Sound Notifications**:  notification sounds for new messages

@@ -68,7 +68,7 @@
 export class ChatComponent implements OnInit {
  chatUser?: CometChat.User;

  async ngOnInit(): Promise<void> {
    try {
      this.chatUser = await CometChat.getUser('RECEIVER_UID');
    } catch (error) {
@@ -315,14 +315,14 @@
 | `parentMessageId` | `number` | `undefined` | Parent message ID for displaying thread replies. When set, the component shows only replies to this message. |
 | `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). |
 | `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. |

 #### Display Control Properties

@@ -335,6 +335,11 @@
 | `hideGroupActionMessages` | `boolean` | `false` | Hides system messages for group actions (member joined, left, etc.). |
 | `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). |
+| `hideUnpinMessageOption` | `boolean` | `false` | Hides "Unpin message" from the Organise flyout. |
+| `hideSaveMessageOption` | `boolean` | `false` | Hides "Save message" from the Organise flyout. |
+| `hideUnsaveMessageOption` | `boolean` | `false` | Hides "Unsave message" from the Organise 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). |
@@ -384,6 +389,53 @@
 | `conversationStarterClick` | `string` | Emitted when a conversation starter is clicked. The payload is the starter text. |
 | `messagePrivatelyClick` | `{ message: CometChat.BaseMessage, user: CometChat.User }` | Emitted when "Message Privately" option is clicked in a group chat. |
 | `replyClick` | `CometChat.BaseMessage` | Emitted when the "Reply" option is clicked on a message. Handle this to show reply preview in composer. |
+| `threadSubscriptionChange` | `IThreadSubscriptionChanged` | Emitted when a thread's follow state changes — from this list, from the thread header, or from a server-side auto-subscribe. Payload: `{ parentMessageId: number, state: CometChat.ThreadSubscriptionState, source: string }`. |
+
+### Thread Subscription
+
+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: "Notify me about replies" when the user does not follow the thread, "Stop reply notifications" when they do.
+
+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`.
+
+```html expandable
+<cometchat-message-list
+  [group]="group"
+  [hideThreadSubscriptionOption]="false"
+  (threadSubscriptionChange)="onSubscriptionChange($event)">
+</cometchat-message-list>
+```
+
+The option is offered on messages with **zero replies** — following a message before anyone answers is the point of it — and on replies as well.
+
+<Note>
+  On a reply, the action resolves to the reply's **parent**, never the reply's own ID. CometChat has no nested threads, and a subscription rooted at a reply would write a thread-list row pointing at a thread that cannot be opened.
+</Note>
+
+See the [Thread Subscription guide](/ui-kit/angular/guides/thread-subscription) for the full feature.
+
+### 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.
+
+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.
+
+```html expandable
+<cometchat-message-list
+  [group]="group"
+  [hidePinMessageOption]="false"
+  [hideSaveMessageOption]="false">
+</cometchat-message-list>
+```
+
+| Behavior | Detail |
+|:---|:---|
+| Feature gate | The app-level flags reported by `CometChat.isPinMessageEnabled()` / `isSaveMessageEnabled()`, overridable via `enablePinMessage` / `enableSaveMessage` in global config |
+| Eligibility | Excludes deleted, in-flight, moderation-held, and `action` category messages. Thread replies **are** eligible |
+| Pin permission | In a group, a known participant is denied; everyone else is offered the option and the server is the backstop. Saving has no scope gate |
+| Confirmation | Pin and Save run immediately; **Unpin and Unsave ask first** |
+| 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.
 
 ### Methods
 
@@ -539,7 +591,7 @@

 ### Usage Examples for Complex Properties

 #### Custom Text Formatters

 ```typescript expandable
 import { CometChatTextFormatter } from '@cometchat/chat-uikit-angular';
@@ -626,7 +678,7 @@

 ### Customization Approaches

 CometChat UIKit offers multiple ways to customize the message list:

 | Approach | Use Case | Scope |
 |----------|----------|-------|
@@ -634,7 +686,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 |

 ---

@@ -1043,7 +1095,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.

 <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`.
@@ -1167,13 +1219,13 @@
 ---


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

 #### Understanding Text Formatters

 Text formatters extend the `CometChatTextFormatter` base class:

 ```typescript expandable
 import { CometChat } from '@cometchat/chat-sdk-javascript';
@@ -1297,7 +1349,7 @@
 }
 ```

 #### Using Custom Formatters

 ```typescript expandable
 import { Component, OnInit } from '@angular/core';
@@ -1355,7 +1407,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.
 </Note>

 ---
@@ -1447,7 +1499,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.

 #### Core CSS Variables

@@ -1631,7 +1683,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.

 #### Switching Themes

@@ -1811,7 +1863,7 @@
 ```

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

 ---
@@ -3092,11 +3144,11 @@

 | Key | Action | Context |
 |-----|--------|---------|
 | `Tab` | Move focus to next focusable element | Global navigation |
 | `Shift + Tab` | Move focus to previous focusable element | Global navigation |
 | `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 |
 | `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 |
@@ -3187,11 +3239,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.

 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:

 ```css expandable
 /* Focus indicator styles (built into the component) */
@@ -3224,13 +3276,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 |
 | `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 |
 | `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 |
@@ -3349,7 +3401,7 @@
 </div>
 ```

 **Modal Dialogs:**
 ```html expandable
 <!-- Delete confirmation dialog -->
 <div 
@@ -3457,8 +3509,8 @@
 - [ ] Error messages are announced immediately
 - [ ] Loading states are announced

 **Dialogs and Modals:**
 - [ ] Dialogs are announced when opened
 - [ ] Focus moves to dialog when opened
 - [ ] Can navigate dialog with Tab key
 - [ ] Escape key closes dialog
@@ -3934,7 +3986,7 @@
 }
 ```

 #### 3. Implement trackBy for Custom Lists

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

@@ -3978,9 +4030,9 @@
 }
 ```

 #### 5. Debounce Scroll Events

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

 ```typescript expandable
 import { Component, OnInit, OnDestroy } from '@angular/core';
@@ -4021,9 +4073,9 @@
 }
 ```

 #### 6. Optimize Text Formatters

 Keep text formatters efficient by avoiding complex regex patterns:

 ```typescript expandable
 // ❌ BAD: Complex regex with backtracking
@@ -4513,8 +4565,8 @@
 #### Runtime Optimization
 - [ ] Avoid expensive computations in templates
 - [ ] Use `trackBy` for all `@for` loops
 - [ ] Debounce scroll and resize event handlers
 - [ ] Keep text formatters simple and efficient

 #### Memory Management
 - [ ] Clean up subscriptions on component destroy
@@ -4539,7 +4591,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.
 </Warning>


@@ -5106,7 +5158,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.)
 - `YOUR_AUTH_KEY` → Your Auth Key
 - `CURRENT_USER_ID` → The logged-in user's ID
 - `RECEIVER_USER_ID` → The user ID to chat with