Saved Messages

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatSavedMessagesComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-saved-demo',
  standalone: true,
  imports: [CometChatSavedMessagesComponent],
  template: `
    <cometchat-saved-messages
      (messageClick)="onMessageClick($event)"
      (closeClick)="onClose()">
    </cometchat-saved-messages>
  `
})
export class SavedDemoComponent {
  /** Open the source conversation and jump to the message. */
  onMessageClick(message: CometChat.BaseMessage): void {
    console.log('open', message.getConversationId?.(), message.getId());
  }

  onClose(): void {
    console.log('Panel closed');
  }
}

@Component({
  selector: 'app-saved-readonly-demo',
  standalone: true,
  imports: [CometChatSavedMessagesComponent],
  template: `
    <cometchat-saved-messages
      [hideUnsaveMessageOption]="true"
      (messageClick)="onMessageClick($event)">
    </cometchat-saved-messages>
  `
})
export class SavedReadonlyDemoComponent {
  onMessageClick(message: CometChat.BaseMessage): void {}
}

@Component({
  selector: 'app-saved-empty-demo',
  standalone: true,
  imports: [CometChatSavedMessagesComponent],
  template: `
    <cometchat-saved-messages [emptyView]="empty"></cometchat-saved-messages>

    <ng-template #empty>
      <div class="my-empty">Nothing saved yet — tap Save on any message.</div>
    </ng-template>
  `
})
export class SavedEmptyDemoComponent {}

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatSavedMessagesComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-saved-filtered',
  standalone: true,
  imports: [CometChatSavedMessagesComponent],
  template: `
    <cometchat-saved-messages
      [messagesRequestBuilder]="builder">
    </cometchat-saved-messages>
  `
})
export class SavedFilteredComponent {
  builder = new CometChat.MessagesRequestBuilder()
    .setSaved(true) // required — scopes the fetch to saved messages
    .setLimit(30);
}