feat(thread-sub-pin-save-toolbar-react): add documentation for thread subscription, pin/save messages, pin conversation and toolbarTrailingView prop + Custom formatter guide in react v7 uikit docs

docs.json

@@ -568,6 +568,8 @@
                                 ]
                               },
                               "ui-kit/react/components/thread-header",
+                              "ui-kit/react/components/pinned-messages",
+                              "ui-kit/react/components/saved-messages",
                               "ui-kit/react/components/message-information",
                               "ui-kit/react/components/reactions",
                               "ui-kit/react/components/reaction-list",
@@ -612,6 +614,8 @@
                               "ui-kit/react/guide-block-unblock-user",
                               "ui-kit/react/guide-group-chat-setup",
                               "ui-kit/react/guide-threaded-messages",
+                              "ui-kit/react/guide-pin-and-save-messages",
+                              "ui-kit/react/guide-custom-text-formatter",
                               "ui-kit/react/guide-search-messages",
                               "ui-kit/react/guide-new-chat-creation",
                               "ui-kit/react/guide-message-privately"

ui-kit/react/components-overview.mdx

@@ -5,11 +5,11 @@
 
 ## Architecture
 
 The UI Kit provides a set of independent, composable React components that wire together into complete chat layouts. A typical two-panel layout uses four core components:
 
 - **CometChatConversations** — sidebar listing recent conversations
 - **CometChatMessageHeader** — toolbar showing avatar, name, status, and typing indicator
 - **CometChatMessageList** — scrollable message feed with reactions, receipts, and threads
 - **CometChatMessageComposer** — rich text input with attachments, mentions, and voice notes
 
 Data flow: selecting a conversation yields a `CometChat.User` or `CometChat.Group` object. Pass that object as a prop (`user` or `group`) to the message components. They handle SDK calls internally — the composer sends messages, the list receives them via real-time listeners.
@@ -63,7 +63,7 @@
 
 ## Compound Composition
 
 For full layout control, use the compound pattern. Each feature component is a namespace with sub-components:
 
 ```tsx
 <CometChatConversations.Root onItemClick={handleClick}>
@@ -111,7 +111,7 @@
 
 | Component | Purpose | Page |
 | --- | --- | --- |
 | `CometChatConversations` | Scrollable list of recent conversations with real-time updates | [Conversations](/ui-kit/react/components/conversations) |
 | `CometChatUsers` | Searchable list of users with selection support | [Users](/ui-kit/react/components/users) |
 | `CometChatGroups` | Searchable list of groups with selection support | [Groups](/ui-kit/react/components/groups) |
 | `CometChatGroupMembers` | List of group members with role-based actions | [Group Members](/ui-kit/react/components/group-members) |
@@ -121,10 +121,12 @@
 | Component | Purpose | Page |
 | --- | --- | --- |
 | `CometChatMessageHeader` | Toolbar with avatar, name, status, typing indicator, and call buttons | [Message Header](/ui-kit/react/components/message-header) |
 | `CometChatMessageList` | Scrollable message feed with plugin-based bubble rendering | [Message List](/ui-kit/react/components/message-list) |
 | `CometChatMessageComposer` | Rich text input with attachments, emoji, voice recording, and formatting | [Message Composer](/ui-kit/react/components/message-composer) |
 | `CometChatMessageBubble` | Message bubble container with alignment, receipts, options, and reactions | [Message Bubble](/ui-kit/react/components/message-bubble) |
 | `CometChatThreadHeader` | Parent message bubble and reply count for threaded conversations | [Thread Header](/ui-kit/react/components/thread-header) |
+| `CometChatPinnedMessages` | Panel of the messages pinned in a conversation | [Pinned Messages](/ui-kit/react/components/pinned-messages) |
+| `CometChatSavedMessages` | The current user's saved messages across all conversations | [Saved Messages](/ui-kit/react/components/saved-messages) |
 | `CometChatMessageInformation` | Message delivery and read receipt details panel | [Message Information](/ui-kit/react/components/message-information) |
 | `CometChatReactions` | Reaction chips bar with reactor list popover | [Reactions](/ui-kit/react/components/reactions) |
 | `CometChatReactionList` | Full reactor list with tabs and pagination | [Reaction List](/ui-kit/react/components/reaction-list) |
@@ -137,8 +139,8 @@
 | Component | Message Type | Purpose | Page |
 | --- | --- | --- | --- |
 | `CometChatTextBubble` | `text` | Formatted text with mentions, URLs, markdown, and link previews | [Text Bubble](/ui-kit/react/components/text-bubble) |
 | `CometChatImagesBubble` | `image` | Image grid with captions, batch grouping, and a fullscreen gallery | [Image Bubble](/ui-kit/react/components/image-bubble) |
 | `CometChatVideosBubble` | `video` | Video grid with poster thumbnails, duration, and a fullscreen viewer | [Video Bubble](/ui-kit/react/components/video-bubble) |
 | `CometChatAudiosBubble` | `audio` | Stacked audio player cards with seek, duration, and download | [Audio Bubble](/ui-kit/react/components/audio-bubble) |
 | `CometChatVoiceNoteBubble` | `audio` (`voice_note`) | Waveform player for recorded voice notes | [Voice Note Bubble](/ui-kit/react/components/voice-note-bubble) |
 | `CometChatFilesBubble` | `file` | Stacked file cards with type icons, size, and download | [File Bubble](/ui-kit/react/components/file-bubble) |
@@ -158,7 +160,7 @@
 | `CometChatCallButtons` | Voice and video call initiation buttons | [Call Buttons](/ui-kit/react/components/call-buttons) |
 | `CometChatIncomingCall` | Incoming call notification with accept/decline | [Incoming Call](/ui-kit/react/components/incoming-call) |
 | `CometChatOutgoingCall` | Outgoing call screen with cancel control | [Outgoing Call](/ui-kit/react/components/outgoing-call) |
 | `CometChatCallLogs` | Scrollable list of call history | [Call Logs](/ui-kit/react/components/call-logs) |
 
 ### Search and AI
 

ui-kit/react/components/conversations.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Conversations"
 description: "Scrollable list of recent one-on-one and group conversations for the logged-in user with real-time updates."
 ---
 
 <Accordion title="AI Integration Quick Reference">
@@ -47,11 +47,12 @@
       "onSearchBarClicked": "() => void"
     },
     "visibility": {
       "hideReceipts": { "type": "boolean", "default": false },
       "hideUserStatus": { "type": "boolean", "default": false },
       "hideGroupType": { "type": "boolean", "default": false },
       "hideUnreadCount": { "type": "boolean", "default": false },
       "hideDeleteConversation": { "type": "boolean", "default": false },
+      "hidePinConversation": { "type": "boolean", "default": false },
       "showSearchBar": { "type": "boolean", "default": true },
       "showScrollbar": { "type": "boolean", "default": false }
     },
@@ -60,7 +61,7 @@
       "customSoundForMessages": { "type": "string", "default": "built-in" }
     },
     "selection": {
       "selectionMode": {
         "type": "CometChatConversationsSelectionMode",
         "values": ["'none'", "'single'", "'multiple'"],
         "default": "'none'"
@@ -85,6 +86,11 @@
       "name": "ui:conversation/deleted",
       "payload": "{ conversation: CometChat.Conversation }",
       "description": "Conversation deleted from list"
+    },
+    {
+      "name": "ui:conversation/pin-changed",
+      "payload": "{ conversation: CometChat.Conversation, pinned: boolean }",
+      "description": "Emitted by the row's Pin/Unpin action; also received to keep the list ordering in sync"
     }
   ],
   "sdkListeners": [
@@ -155,6 +161,7 @@
 - Real-time updates (new messages, typing indicators, presence changes)
 - Search filtering
 - Selection mode (single/multiple)
+- Pin conversation — pin a chat to the top of the list, with a pin indicator on the row
 
 ---
 
@@ -294,9 +301,9 @@
 | Prop | Signature | Fires when |
 | --- | --- | --- |
 | `onItemClick` | `(conversation: CometChat.Conversation) => void` | User clicks a conversation item |
 | `onSelect` | `(conversation: CometChat.Conversation, selected: boolean) => void` | Conversation selected/deselected (selection mode) |
 | `onError` | `((error: CometChat.CometChatException) => void) \| null` | SDK error occurs |
 | `onEmpty` | `() => void` | List is empty after initial fetch |
 | `onSearchBarClicked` | `() => void` | Search bar is clicked (makes input read-only) |
 
 ### Events Emitted
@@ -306,6 +313,7 @@
 | Event | Payload | Fires when |
 | --- | --- | --- |
 | `ui:conversation/deleted` | `{ conversation }` | User deletes a conversation |
+| `ui:conversation/pin-changed` | `{ conversation, pinned }` | User pins or unpins a conversation from the row menu |
 
 ### Events Received
 
@@ -320,6 +328,7 @@
 | `ui:conversation/updated` | `{ conversation }` | Updates the conversation in the list |
 | `ui:conversation/read` | `{ conversationId }` | Resets unread count by conversation ID |
 | `ui:conversation/deleted` | `{ conversation }` | Removes the conversation from the list |
+| `ui:conversation/pin-changed` | `{ conversation, pinned }` | Optimistically re-orders the list when a chat is pinned/unpinned |
 | `ui:group/created` | `{ group }` | Adds the new group conversation to the list |
 | `ui:group/deleted` | `{ group }` | Removes the group conversation from the list |
 | `ui:group/left` | `{ group }` | Removes the group conversation from the list |
@@ -342,14 +351,22 @@
 
 ## Customization
 
+### Pin Conversation
+
+When pinning is enabled for your app (the `features.ux.conversations.pinned.enabled` app setting), each row's context menu carries a **Pin / Unpin** action, and pinned chats sort to the top of the list with a pin indicator on the row. This is wired out of the box — no props required.
+
+Pins are personal to each user, and your app can cap how many a user may pin through the `features.ux.conversations.pinned.limit` app setting; when a user reaches the cap, the kit shows a toast naming the limit. To remove the menu action entirely, set [`hidePinConversation`](#hidepinconversation). See [Core Features → Pin & Save](/ui-kit/react/core-features#pin-and-save-messages).
+
+A conversation can also be **system-pinned** app-wide (even when empty). System pins always sort above user pins and cannot be unpinned from the UI.
+
 ### View Props
 
 Use view props to replace sections of the default UI while keeping the component's behavior intact:
 
 ```tsx
 <CometChatConversations
   headerView={<MyCustomHeader />}
   itemView={(conversation) => <MyCustomItem conversation={conversation} />}
   emptyView={<EmptyState />}
   loadingView={<Skeleton />}
   errorView={<ErrorBanner />}
@@ -359,10 +376,10 @@
 | Slot | Signature | Replaces |
 | --- | --- | --- |
 | `itemView` | `(conversation) => ReactNode` | Entire conversation row |
 | `leadingView` | `(conversation) => ReactNode` | Avatar section |
 | `titleView` | `(conversation) => ReactNode` | Conversation name |
 | `subtitleView` | `(conversation) => ReactNode` | Last message preview |
 | `trailingView` | `(conversation) => ReactNode` | Timestamp + unread badge |
 | `headerView` | `ReactNode` | Header area |
 | `searchView` | `ReactNode` | Search bar |
 | `loadingView` | `ReactNode` | Loading shimmer |
@@ -679,7 +696,7 @@
 
     let className = "conversations__trailing-view-min";
     let topLabel = `${diffInMinutes}`;
     let bottomLabel = diffInMinutes === 1 ? "Min ago" : "Mins ago";
 
     if (diffInHours >= 1 && diffInHours <= 10) {
       className = "conversations__trailing-view-hour";
@@ -894,7 +911,7 @@
 | Sub-component | Description | Props | Flat API equivalent |
 | --- | --- | --- | --- |
 | `Root` | Context provider and container | All Root props + `children` | — |
 | `List` | Scrollable conversation list | `itemView`, `className` | `itemView` |
 | `Item` | Individual conversation row | `leadingView`, `titleView`, `subtitleView`, `trailingView`, `className` | Per-item view props |
 | `Header` | Header area | `title`, `children` | `headerView` |
 | `SearchBar` | Search input | `placeholder`, `onClick` | `searchView` |
@@ -951,7 +968,7 @@
 
 ---
 
 ### searchKeyword
 
 Initial search keyword to pre-filter conversations on mount.
 
@@ -962,7 +979,7 @@
 
 ---
 
 ### activeConversation
 
 The currently active/highlighted conversation. The matching item receives an active visual state.
 
@@ -1039,6 +1056,17 @@
 
 ---
 
+### hidePinConversation
+
+Remove the built-in **Pin / Unpin** option from the conversation item's context menu. See [Pin Conversation](#pin-conversation) for the feature overview.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
 ### showSearchBar
 
 Whether to show the search bar. Set to `false` to hide it entirely.
@@ -1050,9 +1078,9 @@
 
 ---
 
 ### showScrollbar
 
 Show the native scrollbar on the conversation list.
 
 | | |
 | --- | --- |
@@ -1210,6 +1238,7 @@
 | Unread badge | `.cometchat-conversations .cometchat-badge` |
 | Subtitle text | `.cometchat-conversations .cometchat-conversations__subtitle-text` |
 | Status indicator | `.cometchat-conversations .cometchat-status-indicator` |
+| Pin indicator (pinned row) | `.cometchat-conversations__item-pin-indicator` |
 | Read receipts | `.cometchat-conversations .cometchat-receipts-read` |
 | Active item | `.cometchat-conversations__list-item-active .cometchat-list-item` |
 | Typing indicator | `.cometchat-conversations__subtitle-typing` |

ui-kit/react/components/message-bubble.mdx

@@ -91,7 +91,7 @@
     <CometChatMessageBubble
       message={message}
       alignment={alignment}
       contentView={
         <CometChatTextBubble message={message} isSentByMe={alignment === "right"} />
       }
     />
@@ -114,14 +114,39 @@
 | Receipts | Outgoing + `!hideReceipts` | `message.getReadAt()` / `getDeliveredAt()` |
 | Edited indicator | `message.getEditedAt()` truthy | "(edited)" text |
 | Thread replies | `message.getReplyCount() > 0` + `!hideThreadView` | Reply count button |
+| Pinned indicator | `message.getPinnedAt()` is set | Pin icon in the status-info area |
+| Saved indicator | `message.getSavedAt()` is set | Bookmark icon in the status-info area |
 | Context menu | `options.length > 0` + `!disableInteraction` | Hover/click |
 
+## Pinned and Saved Indicators
+
+When a message is pinned (visible to everyone in the conversation) or saved (personal to the current user), the bubble shows a small indicator in its status-info area alongside the timestamp — a pin icon for pinned, a bookmark icon for saved. A message can carry both at once.
+
+This is automatic: the bubble derives each indicator from the message's own state (`getPinnedAt()` / `getSavedAt()`), and it updates live as messages are pinned, unpinned, saved, and unsaved. No props are required.
+
+<Info>
+**Live Preview** — a bubble carrying both the pinned and saved indicators.
+
+[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--pinned-and-saved)
+</Info>
+
+<iframe
+  src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble--pinned-and-saved&viewMode=story&shortcuts=false&singleStory=true"
+  className="w-full rounded-xl"
+  loading="lazy"
+  style={{height: "250px", border: "1px solid #e0e0e0"}}
+  title="CometChat Message Bubble — Pinned & Saved"
+  allow="clipboard-write"
+></iframe>
+
+To restyle or hide the indicators, target their selectors (see [CSS Selectors](#css-selectors)). To learn how users pin and save messages, see the [Pin & Save Messages guide](/ui-kit/react/guide-pin-and-save-messages).
+
 ## GlobalConfig Integration
 
 `hideReceipts` reads from `GlobalConfigContext` when the prop is not explicitly set:
 
 ```tsx lines
 <GlobalConfigProvider config={{ hideReceipts: true }}>
   {/* All bubbles hide receipts unless overridden */}
   <CometChatMessageBubble hideReceipts={false} ... />  {/* This one shows receipts */}
 </GlobalConfigProvider>
@@ -170,7 +195,7 @@
 
 ---
 
 ### hideAvatar / hideSenderName / hideTimestamp / hideThreadView
 
 Per-bubble display controls. Not in GlobalConfig.
 
@@ -192,7 +217,7 @@
 
 ---
 
 ### showError
 
 Show error receipt icon instead of normal receipts.
 
@@ -203,7 +228,7 @@
 
 ---
 
 ### disableInteraction
 
 Disable hover options and keyboard interactions.
 
@@ -313,5 +338,8 @@
 | Body | `.cometchat-message-bubble__body` |
 | Content | `.cometchat-message-bubble__body-content-view` |
 | Status info | `.cometchat-message-bubble__body-status-info-view` |
+| Pin/save indicator (base) | `.cometchat-message-bubble__status-info-view-indicator` |
+| Pinned indicator | `.cometchat-message-bubble__status-info-view-indicator--pinned` |
+| Saved indicator | `.cometchat-message-bubble__status-info-view-indicator--saved` |
 | Receipts | `.cometchat-receipts` |
 | Thread button | `.cometchat-message-bubble__thread-button` |

ui-kit/react/components/message-composer.mdx

@@ -29,7 +29,7 @@
       }
     },
     "textInput": {
       "initialText": { "type": "string", "default": "undefined" },
       "text": { "type": "string", "default": "undefined", "note": "Controlled mode — consumer owns state" },
       "placeholder": { "type": "string", "default": "'Type a message...'" },
       "enterKeyBehavior": {
@@ -48,7 +48,7 @@
       "messageToReply": { "type": "CometChat.BaseMessage | null", "default": "null" }
     },
     "attachments": {
       "attachmentOptions": { "type": "CometChatComposerAttachmentOption[]", "default": "undefined" },
       "hideAttachmentOptions": { "type": "CometChatAttachmentHideOptions", "default": "undefined" },
       "showAttachmentPreview": { "type": "boolean", "default": true },
       "enableMultipleAttachments": { "type": "boolean", "default": true, "note": "Enable multi-attachment staging tray and batch send. Set false for legacy single-select behavior." },
@@ -89,6 +89,7 @@
       "emojiButtonIconView": "ReactNode",
       "sendButtonView": "ReactNode",
       "auxiliaryButtonView": "ReactNode",
+      "toolbarTrailingView": "ReactNode",
       "headerView": "ReactNode"
     },
     "callbacks": {
@@ -279,12 +280,12 @@
 
 Each staged file is a tile with its own upload lifecycle:
 
 | State | Meaning | Tile UI | Retryable |
 | --- | --- | --- | --- |
 | `uploading` | Bytes are transferring | Progress ring with percentage | — |
 | `success` | Uploaded, ready to send | Thumbnail (image/video) or file card | — |
 | `failed` | Transfer failed (transient — e.g. network drop) | Retry control on the tile | Yes |
 | `rejected` | File not accepted (see below) | Rejected marker + hover tooltip | No |
 
 This mirrors the underlying SDK upload semantics: **failed** uploads are transient and can be retried, while **rejected** files must be swapped out.
 
@@ -295,15 +296,15 @@
 
 ### Why a file is rejected
 
 A rejected tile explains itself on hover via a tooltip:
 
 | Reason | What the tooltip conveys |
 | --- | --- |
 | File exceeds the maximum size | The file is too large, including the configured size limit in MB. |
 | File type not permitted | The file's type is blocked by your app's role-based file-type permissions (RBAC/SBAC). |
 
 <Note>
 The per-file **size** and **type** rejections surface on the individual tile (with the hover tooltip above). The **count** limit is different — it rejects the whole over-limit pick at once and surfaces as a validation banner, not a per-tile tooltip.
 </Note>
 
 ### Batch send
@@ -336,8 +337,8 @@
 
 | Event | Payload | Fires when |
 | --- | --- | --- |
 | `ui:message/sent` | `{ message, status }` | Message sent (inprogress → success/error) |
 | `ui:compose/edit` | `{ message, status }` | Message edit (inprogress → success/error/cancelled) |
 | `ui:compose/reply` | `{ message, status }` | Reply context set/cleared |
 | `ui:compose/recording-started` | `{ composerInstanceId }` | Voice recording started (stops other instances) |
 
@@ -383,9 +384,10 @@
 | `emojiButtonIconView` | `ReactNode` | Icon inside the emoji button |
 | `sendButtonView` | `ReactNode` | Content inside the send button |
 | `auxiliaryButtonView` | `ReactNode` | Additional buttons in the actions area |
+| `toolbarTrailingView` | `ReactNode` | Content at the trailing end of the rich-text formatting toolbar |
 | `headerView` | `ReactNode` | Header area above the input |
 
 #### attachmentOptions
 
 Override the default attachment options.
 
@@ -436,6 +438,33 @@
 }
 ```
 
+#### toolbarTrailingView
+
+Render a node at the trailing end of the rich-text formatting toolbar, after the built-in buttons and an auto-inserted separator. This is the place for a button that drives a custom formatter from `textFormatters` — for example, a color button that wraps the selected text.
+
+```tsx
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+import { ColorFormatter } from "./formatters/ColorFormatter";
+import { ColorButton } from "./components/ColorButton";
+
+function ComposerWithColor({ chatUser }: { chatUser: CometChat.User }) {
+  return (
+    <CometChatMessageComposer
+      user={chatUser}
+      enableRichTextEditor
+      textFormatters={[new ColorFormatter()]}
+      toolbarTrailingView={<ColorButton />}
+    />
+  );
+}
+```
+
+<Note>
+The toolbar (and therefore the trailing view) only renders when the rich-text editor is enabled — pass `enableRichTextEditor`. For a complete walkthrough that builds the button and formatter, see the [Custom Text Formatter guide](/ui-kit/react/guide-custom-text-formatter).
+</Note>
+
+Your node is rendered as-is with **no wrapper class** — style it yourself. It sits inside `.cometchat-formatting-toolbar`, after an auto-inserted `.cometchat-formatting-toolbar__separator`.
+
 #### sendButtonView
 
 Replace the send button.
@@ -513,7 +542,7 @@
 All props are optional unless noted.
 
 <Note>
-View slot props (`headerView`, `sendButtonView`, `auxiliaryButtonView`, `attachmentButtonIconView`, `voiceRecordingButtonIconView`, `emojiButtonIconView`) are convenience props available only on the flat API. In compound composition mode, use the corresponding sub-components directly or pass children to them.
+View slot props (`headerView`, `sendButtonView`, `auxiliaryButtonView`, `toolbarTrailingView`, `attachmentButtonIconView`, `voiceRecordingButtonIconView`, `emojiButtonIconView`) are convenience props available only on the flat API. In compound composition mode, use the corresponding sub-components directly or pass children to them.
 </Note>
 
 ---
@@ -1064,6 +1093,17 @@
 
 ---
 
+#### toolbarTrailingView
+
+Custom ReactNode rendered at the trailing end of the rich-text formatting toolbar, after the built-in buttons and an auto-inserted separator. Only shown when the rich-text editor and its toolbar are enabled. Intended for a button that drives a custom formatter from `textFormatters`. See the [Custom Text Formatter guide](/ui-kit/react/guide-custom-text-formatter).
+
+| | |
+| --- | --- |
+| Type | `ReactNode` |
+| Default | `undefined` |
+
+---
+
 #### headerView
 
 Custom ReactNode for the header area above the input (replaces edit/reply preview + validation).

ui-kit/react/components/message-header.mdx

@@ -48,6 +48,7 @@
       "onSummaryClick": "() => void",
       "onVoiceCallClick": "(entity: CometChat.User | CometChat.Group) => void",
       "onVideoCallClick": "(entity: CometChat.User | CometChat.Group) => void",
+      "onPinnedMessagesClicked": "() => void",
       "onError": "((error: CometChat.CometChatException) => void) | null"
     },
     "visibility": {
@@ -57,7 +58,8 @@
       "showConversationSummaryButton": { "type": "boolean", "default": false },
       "enableAutoSummaryGeneration": { "type": "boolean", "default": false },
       "hideVoiceCallButton": { "type": "boolean", "default": false },
-      "hideVideoCallButton": { "type": "boolean", "default": false }
+      "hideVideoCallButton": { "type": "boolean", "default": false },
+      "hidePinnedMessagesOption": { "type": "boolean", "default": false }
     },
     "viewSlots": {
       "leadingView": "ReactNode",
@@ -202,7 +204,7 @@
     <CometChatMessageHeader
       user={user}
       onItemClick={(entity) => openDetails(entity)}
       onBack={() => navigateBack()}
     />
   );
 }
@@ -300,7 +302,8 @@
 | `onSummaryClick` | `() => void` | User clicks the AI summary button |
 | `onVoiceCallClick` | `(entity: CometChat.User \| CometChat.Group) => void` | User clicks the voice call button |
 | `onVideoCallClick` | `(entity: CometChat.User \| CometChat.Group) => void` | User clicks the video call button |
+| `onPinnedMessagesClicked` | `() => void` | User clicks "Pinned messages" in the overflow menu |
 | `onError` | `((error: CometChat.CometChatException) => void) \| null` | SDK error occurs |
 
 ### Events Emitted
 
@@ -352,7 +355,7 @@
 
 | Slot | Type | Replaces |
 | --- | --- | --- |
 | `leadingView` | `ReactNode` | Avatar area |
 | `titleView` | `ReactNode` | Display name |
 | `subtitleView` | `ReactNode` | Status / typing indicator |
 | `trailingView` | `ReactNode` | Call buttons + overflow menu |
@@ -360,7 +363,7 @@
 
 #### Custom item layout
 
 Combine `leadingView`, `titleView`, and `subtitleView` to fully replace the header's item area.
 
 <Frame>
   <img src="/images/0a3d38de-messages_header_list_item_view_web_screens-024979a70f09486b76e913633bfc9e81.png" />
@@ -676,6 +679,17 @@
 
 ---
 
+### hidePinnedMessagesOption
+
+Remove the "Pinned messages" entry from the overflow menu. The entry only appears when pinning is enabled for your app (the `features.ux.messages.pinned.enabled` app setting) **and** `onPinnedMessagesClicked` is provided; use this prop to hide it even then.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
 ### callSettingsBuilder
 
 Custom call settings builder for ongoing call sessions. Passed to the OngoingCall component when a call is started. Falls back to `GlobalConfig.callSettingsBuilder`, then the built-in default.
@@ -764,6 +778,17 @@
 
 ---
 
+### onPinnedMessagesClicked
+
+Callback when the user clicks "Pinned messages" in the overflow menu. Provide it to open a [`CometChatPinnedMessages`](/ui-kit/react/components/pinned-messages) panel for the current conversation. The menu entry only appears when pinning is enabled for your app (the `features.ux.messages.pinned.enabled` app setting) and this callback is set.
+
+| | |
+| --- | --- |
+| Type | `() => void` |
+| Default | `undefined` |
+
+---
+
 ### onError
 
 Callback when an SDK error occurs during call operations or other internal processes.

ui-kit/react/components/message-list.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Message List"
 description: "Scrollable message feed with plugin-based bubble rendering, reactions, receipts, threads, and real-time updates."
 ---
 
 <Accordion title="AI Integration Quick Reference">
@@ -66,7 +66,7 @@
       }
     },
     "visibility": {
       "hideReceipts": { "type": "boolean", "default": false },
       "hideStickyDate": { "type": "boolean", "default": false },
       "hideDateSeparator": { "type": "boolean", "default": false },
       "hideAvatar": { "type": "boolean", "default": false },
@@ -82,6 +82,11 @@
     "optionToggles": {
       "hideReplyOption": { "type": "boolean", "default": false },
       "hideReplyInThreadOption": { "type": "boolean", "default": false },
+      "hidePinMessageOption": { "type": "boolean", "default": false },
+      "hideUnpinMessageOption": { "type": "boolean", "default": false },
+      "hideSaveMessageOption": { "type": "boolean", "default": false },
+      "hideUnsaveMessageOption": { "type": "boolean", "default": false },
+      "hideThreadSubscriptionOption": { "type": "boolean", "default": false },
       "hideEditMessageOption": { "type": "boolean", "default": false },
       "hideDeleteMessageOption": { "type": "boolean", "default": false },
       "hideCopyMessageOption": { "type": "boolean", "default": false },
@@ -209,7 +214,7 @@
 
 ## Overview
 
 `CometChatMessageList` is a scrollable message feed component. It renders messages for a given user or group conversation and emits thread navigation via `onThreadRepliesClick`. Wire it between `CometChatMessageHeader` and `CometChatMessageComposer` to build a standard chat panel.
 <Info>
 **Live Preview** — interact with the default message list.
 
@@ -483,6 +488,30 @@
 
 ## Customization
 
+### Pin and Save Options
+
+When pinning and saving are enabled for your app (the `features.ux.messages.pinned.enabled` and `features.ux.messages.saved.enabled` app settings), `CometChatMessageList` automatically adds **Pin**, **Unpin**, **Save**, and **Unsave** to the message context menu — no props required. Who can pin is enforced by the SDK based on the conversation and the user's role (in a group, owners, admins, and moderators can pin).
+
+Use the `hide*` props to remove any of these options:
+
+```tsx
+<CometChatMessageList
+  group={group}
+  hideSaveMessageOption   // drop Save/Unsave from the menu
+  hideUnsaveMessageOption
+/>
+```
+
+| Prop | Removes |
+| --- | --- |
+| `hidePinMessageOption` | Pin |
+| `hideUnpinMessageOption` | Unpin |
+| `hideSaveMessageOption` | Save |
+| `hideUnsaveMessageOption` | Unsave |
+| `hideThreadSubscriptionOption` | Subscribe / unsubscribe thread |
+
+See the [Pin & Save Messages guide](/ui-kit/react/guide-pin-and-save-messages) for the full screen, and [Core Features → Pin & Save](/ui-kit/react/core-features#pin-and-save-messages) for enabling the features.
+
 ### View Props
 
 Use view props to replace sections of the default UI while keeping the component's behavior intact:
@@ -490,12 +519,12 @@
 ```tsx
 <CometChatMessageList
   user={user}
   headerView={<TypingIndicator />}
   footerView={<SmartRepliesBar />}
   emptyView={<EmptyConversation />}
   loadingView={<MessageSkeleton />}
   errorView={<ErrorBanner />}
   bubbleView={(message, loggedInUser) => <CustomBubble message={message} />}
 />
 ```
 
@@ -524,7 +553,7 @@
 import { CometChatMessageList, CometChatButton } from "@cometchat/chat-uikit-react";
 
 function MessageListWithHeader() {
   const [chatUser, setChatUser] = useState<CometChat.User>();
 
   useEffect(() => {
     CometChat.getUser("uid").then((user) => setChatUser(user));
@@ -645,7 +674,7 @@
 | Sub-component | Description | Props | Flat API equivalent |
 | --- | --- | --- | --- |
 | `Root` | Context provider, data hook, container | All Root props + `children` | — |
 | `View` | Scrollable message feed | `className` | — |
 | `Header` | Content above the feed | `children`, `className` | `headerView` |
 | `Footer` | Content below the feed | `children`, `className` | `footerView` |
 | `ScrollToBottom` | Floating scroll button | `className` | — |
@@ -745,7 +774,7 @@
 
 ---
 
 ### messageTypes
 
 Restrict which message types are fetched and displayed.
 
@@ -756,7 +785,7 @@
 
 ---
 
 ### messageCategories
 
 Restrict which message categories are fetched and displayed.
 
@@ -837,7 +866,7 @@
 
 ---
 
 ### hideAvatar
 
 Hide the avatar on incoming messages in group conversations.
 
@@ -870,9 +899,9 @@
 
 ---
 
 ### showScrollbar
 
 Show the native scrollbar on the message list. When `false`, the scrollbar is hidden but scrolling still works.
 
 | | |
 | --- | --- |
@@ -914,7 +943,7 @@
 
 ---
 
 ### disableTruncation
 
 Disable text truncation (read more / show less) in text bubbles. When `true`, full message text is always shown.
 
@@ -962,6 +991,61 @@
 
 ---
 
+### hidePinMessageOption
+
+Hide the "Pin" option from the message context menu. Pinning must also be enabled for your app (the `features.ux.messages.pinned.enabled` app setting).
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideUnpinMessageOption
+
+Hide the "Unpin" option from the message context menu.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideSaveMessageOption
+
+Hide the "Save" option from the message context menu. Saving must also be enabled for your app (the `features.ux.messages.saved.enabled` app setting).
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideUnsaveMessageOption
+
+Hide the "Unsave" option from the message context menu.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideThreadSubscriptionOption
+
+Hide the thread subscription (subscribe/unsubscribe) option from the message context menu. See [Threaded Messages → Thread Subscription](/ui-kit/react/guide-threaded-messages#thread-subscription).
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
 ### hideEditMessageOption
 
 Hide the "Edit" option from the message context menu.
@@ -1052,7 +1136,7 @@
 
 ### hideFlagRemarkField
 
 Hide the remark textarea in the flag/report message dialog.
 
 | | |
 | --- | --- |
@@ -1124,7 +1208,7 @@
 
 ---
 
 ### messageAlignment
 
 Controls message bubble alignment. `0` aligns all messages to the left. `1` uses standard alignment (sent on right, received on left).
 
@@ -1178,7 +1262,7 @@
 
 ### smartRepliesDelayDuration
 
 Delay in milliseconds before showing smart replies after a qualifying message is received. Acts as a debounce — if another message arrives within this window, the timer resets.
 
 | | |
 | --- | --- |
@@ -1312,7 +1396,7 @@
 
 ---
 
 ### onError
 
 Callback when an SDK error occurs during fetch or real-time operations.
 
@@ -1432,7 +1516,7 @@
     Display thread context above a threaded message list
   </Card>
   <Card title="Plugins Overview" icon="puzzle-piece" href="/ui-kit/react/plugins/overview">
     Learn how plugins register custom bubble renderers
   </Card>
   <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
     Customize colors, fonts, and spacing