> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Saved Messages
> A screen listing the logged-in user's saved messages across every conversation, with long-press unsave and tap-to-open.
| Field | Value |
| - | - |
| Component | `CometChatSavedMessages` |
| Package | `cometchat_chat_uikit` |
| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` |
| Purpose | A screen listing the logged-in user's saved messages across every conversation, with long-press unsave and tap-to-open. |
| Data props | None — the list is always the logged-in user's saves. |
| Actions | `onItemTap` — [details](#actions-and-events) |
| Presentation | No built-in entry point — push it from your own app chrome (a profile menu, a settings row, a tab). |
| Styling | `style` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. |
| Prerequisites | `CometChatUIKit` initialised, a user logged in, and the Save Message feature enabled for the app. |
| Full props | [6 props](#functionality) |
**Available from UI Kit v6.1.1.** This component requires `cometchat_chat_uikit` v6.1.1 or later, which depends on `cometchat_sdk` v5.0.7.
`CometChatSavedMessages` lists the logged-in user's saved (bookmarked) messages across **every** conversation — unlike [Pinned Messages](/docs/ui-kit/flutter/pinned-messages), it is not scoped to one chat. Rows are ordered newest-saved-first. Each row shows the conversation's avatar and name, a preview of the message, and the date it was saved; a thread reply is titled by its author ("You" for your own) instead of the conversation name.
Saves are private to the logged-in user and sync across their own devices.
***
## Where It Fits
Saved messages are **user-level**, so the entry point belongs in app chrome — a profile or user menu on the conversations screen, a settings row, or a navigation tab — not inside a single chat. The kit does not add one for you.
***
## Quick Start
```dart theme={null}
if (CometChat.isSaveMessageEnabled()) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => CometChatSavedMessages(
onItemTap: (message) {
// open the message's conversation, then jump to it
},
),
),
);
}
```
Because a saved message can belong to any conversation, `onItemTap` usually has to open the conversation first and then jump — see the [Pin & Save Messages guide](/docs/ui-kit/flutter/guide-pin-and-save-messages#open-a-saved-message).
***
## Actions and Events
### Callback Methods
#### `onItemTap`
Fires when a row is tapped. With `popOnItemTap` left at `true`, the screen asks its route to pop first, so the conversation you open is not stacked on top of the list.
### Unsave
Long-pressing a row opens an **Unsave message?** confirmation, then unsaves the message and shows a "Message unsaved" toast. Set `hideUnsaveOption: true` to turn the long-press off.
### Real-Time Updates (Automatic)
| Source | Internal behavior |
| - | - |
| `ccMessageSaved` / `ccMessageUnsaved` (UI Kit events) | Adds or drops the row for actions taken elsewhere in the app |
| `onMessageSaved` / `onMessageUnsaved` (SDK listener) | Reflects saves made on the user's other devices |
| Message edited, moderated, pinned or unpinned | Refreshes the row in place |
| Message deleted | Drops the row |
The list is fetched once on open, 100 at a time until exhausted, with a Retry action if the fetch fails and an empty state ("No saved messages yet") when there are none.
***
## Functionality
| Property | Type | Default | Description |
| - | - | - | - |
| `onItemTap` | `Function(BaseMessage message)?` | `null` | Fires on row tap. |
| `hideUnsaveOption` | `bool?` | `null` | Turns off long-press unsave on the rows. |
| `popOnItemTap` | `bool` | `true` | Pops this screen **before** `onItemTap` fires. Right for a pushed mobile route; set `false` when the list lives in a persistent panel that should survive the jump. |
| `showBackButton` | `bool` | `true` | Shows the app-bar back button. |
| `useCloseButton` | `bool` | `false` | Swaps the leading back arrow for a trailing ✕ with the title left-aligned — the chrome a desktop panel uses, where the screen is dismissed rather than navigated back from. Only read when `showBackButton` is `true`. |
| `style` | `CometChatSavedMessagesStyle?` | `null` | Styling overrides. |
### Responsive presentation
`popOnItemTap` and `useCloseButton` let one component serve both layouts: a pushed mobile route that pops on jump, and a desktop panel that stays put and closes with a ✕.
```dart theme={null}
CometChatSavedMessages(
onItemTap: _openSavedMessage,
popOnItemTap: !isDesktop,
useCloseButton: isDesktop,
)
```
***
## Style
| Property | Applies to |
| - | - |
| `backgroundColor` | The screen background |
| `appBarColor` | The app bar background |
| `titleTextStyle` | The "Saved Messages" title |
| `iconColor` | The back arrow or ✕ |
| `separatorColor` | The divider under the app bar |
| `itemTitleTextStyle` | The row title — the conversation name, or the author of a thread reply |
| `itemSubtitleTextStyle` | The message preview |
| `itemDateTextStyle` | The saved date |
| `unsaveIconColor` | The bookmark icon in the unsave confirmation dialog. *Applied since v6.2.0.* |
```dart theme={null}
CometChatSavedMessages(
style: CometChatSavedMessagesStyle(
itemTitleTextStyle: const TextStyle(fontWeight: FontWeight.w600),
itemDateTextStyle: TextStyle(color: Colors.grey.shade600),
),
)
```
On v6.1.1, `unsaveIconColor` is declared but has no visible effect — upgrade to v6.2.0 to use it. The class also declares `itemContextTextStyle`, which no release up to v6.2.0 applies.
***
## Next Steps
Wire the pinned and saved screens into your app
A conversation's pinned list
The Save / Unsave options and jump-to-message
The SDK APIs underneath
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.