Mentions Formatter

import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-angular";

const mentionsFormatter = new CometChatMentionsFormatter();
mentionsFormatter.setCometChatUserGroupMembers(userList);

const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage);
// Render formattedMessage in your message component

import { Component, OnInit } from "@angular/core";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatMessageListComponent,
  CometChatMessageComposerComponent,
  CometChatMentionsFormatter,
} from "@cometchat/chat-uikit-angular";

@Component({
  selector: "app-mentions-demo",
  standalone: true,
  imports: [CometChatMessageListComponent, CometChatMessageComposerComponent],
  template: `
    <cometchat-message-list
      [user]="chatUser"
      [textFormatters]="textFormatters">
    </cometchat-message-list>
    <cometchat-message-composer
      [user]="chatUser"
      [textFormatters]="textFormatters">
    </cometchat-message-composer>
  `,
})
export class MentionsDemoComponent implements OnInit {
  chatUser: CometChat.User | undefined;
  textFormatters = [new CometChatMentionsFormatter()];

  ngOnInit() {
    CometChat.getUser("uid").then((user) => {
      this.chatUser = user;
    });
  }
}

const mentionsFormatter = new CometChatMentionsFormatter();
mentionsFormatter.setMentionStyle({
  color: "#7c4dff",
  backgroundColor: "#ede7f6",
  fontWeight: "600",
  borderRadius: "4px",
  padding: "0 4px",
});

mentionsFormatter.setOnMentionClick((user: CometChat.User) => {
  console.log("Mention clicked:", user.getName());
  // Navigate to user profile or show details panel
});