cometchat · aanshisingh-cometchat · Aug 7, 2026 · Sep 7, 2026 · Sep 7, 2026 · Sep 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,50 @@
 </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 when conversation pinning is enabled for your app — the `features.ux.conversations.pinned.enabled` app setting, which the UI Kit reads once per session through `CometChat.isPinConversationEnabled()` — and the installed Chat SDK exposes `pinConversation` / `unpinConversation`. See [Pin and Save](/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.
+
+### System Pins
+
+An app can also pin a conversation **app-wide**, for everyone, rather than for one user — including a conversation that is still empty. A system pin sorts above every personal pin and cannot be lifted from the UI: it belongs to no member, so the server refuses to unpin it for any of them and the option is not offered.
+
+System pins are capped separately from personal ones, through the `features.ux.conversations.pinned.system.limit` app setting.
+
+### 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; `isSystemPinned()` distinguishes them, which is preferable to comparing `getPinnedBy()` against `"app_system"` yourself. 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 cap comes from the `features.ux.conversations.pinned.limit` app setting, read through `CometChat.getPinnedConversationsLimit()`. Exceeding it shows "You can only pin N chats. Unpin one to pin another.", or generic copy when the app configures no cap |
+| 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 |
+| Events | Pinning and unpinning publish `ccConversationPinned` / `ccConversationUnpinned` on [`CometChatPinSaveEvents`](/ui-kit/angular/events#cometchatpinsaveevents), with `ccConversationPinChanged` for this client's own optimistic flip. This component re-orders itself without them — subscribe to keep a list of your own in sync |
+
 ## Advanced Usage
 
 ### Filtering Conversations
@@ -1259,7 +1304,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 +1401,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';

@@ -15,7 +15,7 @@

 ### Key Features

 - **Auto-Expanding Text Input**: Textarea that grows with content up to a configurable maximum height
 - **Attachments**: Multi-attachment support for images, videos, audio, and files — staged in a tray and sent as a batch (see [Multiple Attachments](#multiple-attachments))
 - **Rich Text Editing**: Optional rich text formatting using custom RichTextEditorService (bold, italic, lists, code blocks, etc.)
 - **Emoji Picker**: Built-in emoji keyboard with category navigation
@@ -143,7 +143,7 @@
 This layout is ideal for:
 - Desktop applications with ample horizontal space
 - Chat interfaces where vertical space is limited
 - Traditional messaging UIs similar to Slack or Teams

 ```typescript expandable
 import { Component } from '@angular/core';
@@ -180,7 +180,7 @@
 This layout is ideal for:
 - Mobile applications where horizontal space is limited
 - Interfaces where you want to maximize input area width
 - Chat UIs that prioritize typing space over button visibility

 ```typescript expandable
 import { Component } from '@angular/core';
@@ -338,7 +338,7 @@

 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
 | `enableRichText` | `boolean` | `true` | Enable rich text editing. When disabled, pasting/adding content won't apply rich text formatting. Mentions and other formatters still work independently. |
 | `hideRichTextToolbar` | `boolean` | `false` | Hide the rich text formatting toolbar. |
 | `showBubbleMenuOnSelection` | `boolean` | `false` | Show floating bubble menu when text is selected (Web/Desktop only) |

@@ -352,7 +352,7 @@
 | `liveReactionIcon` | `string` | `undefined` | Custom icon for live reaction button |
 | `messageToEdit` | `CometChat.BaseMessage` | `undefined` | Message to edit (enables edit mode) |
 | `messageToReply` | `CometChat.BaseMessage` | `undefined` | Message to reply to (enables reply preview) |
 | `textFormatters` | `CometChatTextFormatter[]` | `undefined` | Array of text formatters to apply |
 | `hideError` | `boolean` | `false` | Hides the built-in composer error UI (useful when using `(error)` or a custom `errorView`). |


@@ -368,6 +368,7 @@
 | `attachmentIconView` | `TemplateRef<any>` | `undefined` | Custom template for the attachment icon |
 | `voiceRecordingIconView` | `TemplateRef<any>` | `undefined` | Custom template for the voice recording icon |
 | `emojiIconView` | `TemplateRef<any>` | `undefined` | Custom template for the emoji icon |
+| `toolbarTrailingView` | `TemplateRef<unknown>` | `undefined` | Custom template rendered at the trailing end of the rich-text formatting toolbar. See [Toolbar Trailing View](#toolbar-trailing-view) |
 
 ## Events
 
@@ -662,10 +663,73 @@
 - No external dependencies
 - Smaller bundle size (100KB+ reduction)
 - Full keyboard shortcut support
 - XSS protection with HTML sanitization
 - Unicode and emoji support
 - Undo/redo with history grouping (500ms delay)
 
+### Toolbar Trailing View
+
+`toolbarTrailingView` renders your own controls at the trailing end of the rich-text formatting toolbar, after the built-in groups and an automatically inserted separator. It is the place for a button that drives a custom formatter from `textFormatters` — a color button, a highlight button, anything that acts on the text being typed.
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+  CometChatMessageComposerComponent,
+  CometChatTextFormatter,
+} from '@cometchat/chat-uikit-angular';
+import { ColorFormatter } from './formatters/color-formatter';
+
+@Component({
+  selector: 'app-composer-with-color',
+  standalone: true,
+  imports: [CometChatMessageComposerComponent],
+  template: `
+    <cometchat-message-composer
+      [group]="group"
+      [enableRichText]="true"
+      [hideRichTextToolbar]="false"
+      [textFormatters]="formatters"
+      [toolbarTrailingView]="colorButton">
+    </cometchat-message-composer>
+
+    <ng-template #colorButton let-composer="composer">
+      <button
+        type="button"
+        aria-label="Color selected text"
+        (mousedown)="$event.preventDefault()"
+        (click)="composer.insertTextIntoRichTextEditor('{color=#e5484d}text{/color}')">
+        🎨
+      </button>
+    </ng-template>
+  `
+})
+export class ComposerWithColorComponent {
+  group!: CometChat.Group;
+  formatters: CometChatTextFormatter[] = [new ColorFormatter()];
+}
+```
+
+**Template context**
+
+| Field | Type | Description |
+|:---|:---|:---|
+| `composer` | `CometChatMessageComposerComponent` | The composer itself. A template cannot otherwise reach the editor, and a formatting button has to act on the text being typed — use `insertTextIntoRichTextEditor(text)` to write into it |
+| `user` | `CometChat.User \| undefined` | The active one-on-one conversation, when there is one |
+| `group` | `CometChat.Group \| undefined` | The active group, when there is one |
+
+<Note>
+  The slot renders only while the rich-text editor **and** its toolbar are on — `[enableRichText]="true"` with `[hideRichTextToolbar]="false"`. It is rendered in **both** the fixed toolbar and the selection bubble menu, so a slot filled once appears wherever the built-in formatting controls do.
+</Note>
+
+<Note>
+  `(mousedown)="$event.preventDefault()"` is the detail that matters. Without it, clicking your button moves focus out of the editor and clears the selection before the click handler runs.
+</Note>
+
+Your template is rendered as-is, with no wrapper class — style it yourself. It sits inside `.cometchat-message-composer__toolbar`, after an automatically inserted `.cometchat-message-composer__toolbar-separator`. Wrap several buttons in one element if you need more than one.
+
+For a complete walkthrough that builds the formatter as well as the button, see the [Custom Text Formatter guide](/ui-kit/angular/guides/custom-text-formatter).
+
 ### Rich Text Enhancements
 
 The message composer includes advanced rich text features for improved user experience:
@@ -712,7 +776,7 @@

 #### Always-Visible Toolbar

 Keep the formatting toolbar visible at all times for improved discoverability.

 ```typescript
 <cometchat-message-composer
@@ -725,7 +789,7 @@

 **Benefits:**
 - Toolbar remains visible even when editor is empty
 - Improved discoverability of formatting options
 - Consistent UI with no layout shifts
 - Ideal for professional/business contexts

@@ -1253,11 +1317,11 @@
 }
 ```

 ## Text Formatters

 The component supports custom text formatters for automatic text transformation and metadata extraction.

 ### Built-in Formatters

 **CometChatMentionsFormatter:**
 - Detects @mention patterns in text
@@ -1266,12 +1330,12 @@
 - Supports @all mentions for groups

 **CometChatUrlFormatter:**
 - Detects URL patterns (http://, https://, www.)
 - Converts URLs to clickable links
 - Opens links in new tabs
 - Extracts URL metadata

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