Pinned Messages

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

@Component({
  selector: 'app-pinned-demo',
  standalone: true,
  imports: [CometChatPinnedMessagesComponent],
  template: `
    <cometchat-pinned-messages
      [group]="group"
      (messageClick)="onMessageClick($event)"
      (closeClick)="onClose()">
    </cometchat-pinned-messages>
  `
})
export class PinnedDemoComponent {
  group!: CometChat.Group;

  /** Jump the main message list to the tapped message. */
  onMessageClick(message: CometChat.BaseMessage): void {
    console.log('scroll to', message.getId());
  }

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

@Component({
  selector: 'app-pinned-dm-demo',
  standalone: true,
  imports: [CometChatPinnedMessagesComponent],
  template: `
    <cometchat-pinned-messages
      [user]="user"
      (closeClick)="onClose()">
    </cometchat-pinned-messages>
  `
})
export class PinnedDmDemoComponent {
  user!: CometChat.User;

  onClose(): void {}
}

@Component({
  selector: 'app-messages',
  standalone: true,
  imports: [CometChatMessageHeaderComponent, CometChatPinnedMessagesComponent],
  template: `
    <cometchat-message-header
      [group]="group"
      [showPinnedMessagesOption]="true"
      (pinnedMessagesClick)="showPinned = true">
    </cometchat-message-header>

    @if (showPinned) {
      <cometchat-pinned-messages
        [group]="group"
        (messageClick)="onMessageClick($event)"
        (closeClick)="showPinned = false">
      </cometchat-pinned-messages>
    }
  `
})
export class MessagesComponent {
  group!: CometChat.Group;
  showPinned = false;

  onMessageClick(message: CometChat.BaseMessage): void {}
}

@Component({
  selector: 'app-pinned-options-demo',
  standalone: true,
  imports: [CometChatPinnedMessagesComponent],
  template: `
    <cometchat-pinned-messages
      [group]="group"
      (messageOptionClick)="onOptionClick($event)">
    </cometchat-pinned-messages>
  `
})
export class PinnedOptionsDemoComponent {
  group!: CometChat.Group;

  onOptionClick(event: { option: ContextMenuItem; message: CometChat.BaseMessage }): void {
    console.log(event.option.id, event.message.getId());
  }
}

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

@Component({
  selector: 'app-pinned-filtered',
  standalone: true,
  imports: [CometChatPinnedMessagesComponent],
  template: `
    <cometchat-pinned-messages
      [group]="group"
      [messagesRequestBuilder]="builder">
    </cometchat-pinned-messages>
  `
})
export class PinnedFilteredComponent {
  group!: CometChat.Group;

  builder = new CometChat.MessagesRequestBuilder()
    .setPinned(true) // required — scopes the fetch to pinned messages
    .setLimit(30);
}