Pin and Save Messages

import { ApplicationConfig } from '@angular/core';
import { COMETCHAT_GLOBAL_CONFIG, GlobalConfig } from '@cometchat/chat-uikit-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: COMETCHAT_GLOBAL_CONFIG,
      useValue: {
        enablePinMessage: true,
        enableSaveMessage: true,
      } as GlobalConfig,
    },
  ],
};

<cometchat-message-list
  [group]="group"
  [hidePinMessageOption]="false"
  [hideUnpinMessageOption]="false"
  [hideSaveMessageOption]="false"
  [hideUnsaveMessageOption]="false">
</cometchat-message-list>

/* 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 {
  background-color: var(--cometchat-message-bubble-meta-indicator-color-outgoing, var(--cometchat-text-color-white));
}

<cometchat-message-header
  [group]="group"
  [showPinnedMessagesOption]="true"
  (pinnedMessagesClick)="showPinnedPanel = true">
</cometchat-message-header>

@if (showPinnedPanel) {
  <cometchat-pinned-messages
    [group]="group"
    (messageClick)="scrollToMessage($event)"
    (closeClick)="showPinnedPanel = false">
  </cometchat-pinned-messages>
}

<cometchat-saved-messages
  (messageClick)="openSourceConversation($event)"
  (closeClick)="showSavedPanel = false">
</cometchat-saved-messages>

<cometchat-conversations
  [hidePinConversation]="false"
  (itemClick)="onConversationClick($event)">
</cometchat-conversations>

const isPinned = conversation.isPinned?.();

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CometChatPinSaveEvents } from '@cometchat/chat-uikit-angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-pin-listener',
  standalone: true,
  template: `<!-- your template -->`,
})
export class PinListenerComponent implements OnInit, OnDestroy {
  private subscriptions = new Subscription();

  ngOnInit(): void {
    this.subscriptions.add(
      CometChatPinSaveEvents.ccMessagePinned.subscribe(({ message }) => {
        // Swap your copy of the message wholesale — do not patch fields.
        this.replaceMessage(message);
      })
    );

    this.subscriptions.add(
      CometChatPinSaveEvents.ccMessageUnpinned.subscribe(({ message }) => {
        this.replaceMessage(message);
      })
    );
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }

  private replaceMessage(message: unknown): void {}
}

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

@Component({
  selector: 'app-custom-pin-button',
  standalone: true,
  template: `<button (click)="togglePin()">Pin</button>`,
})
export class CustomPinButtonComponent {
  private readonly pinSave = inject(PinSaveService);
  message!: CometChat.BaseMessage;

  async togglePin(): Promise<void> {
    const action = this.pinSave.isPinned(this.message) ? 'unpin' : 'pin';
    const updated = await this.pinSave.run(action, this.message);
    // `null` means the call failed; the service has already reverted and shown a toast.
  }
}