Saved Messages - CometChat Docs

AI Integration Quick Reference

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

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, 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

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.

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

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

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

Pin & Save Messages Guide

Wire the pinned and saved screens into your app

Pinned Messages

A conversation’s pinned list

Message List

The Save / Unsave options and jump-to-message

Save A Message (SDK)

The SDK APIs underneath

​Where It Fits

​Quick Start

​Actions and Events

​Callback Methods

​onItemTap

​Unsave

​Real-Time Updates (Automatic)

​Functionality

​Responsive presentation

​Style

​Next Steps

Pin & Save Messages Guide

Pinned Messages

Message List

Save A Message (SDK)

Where It Fits

Quick Start

Actions and Events

Callback Methods

`onItemTap`

Unsave

Real-Time Updates (Automatic)

Functionality

Responsive presentation

Style

Next Steps