Mentions Formatter

Add @mentions with styled tokens, suggestion list, and click handling in CometChat Angular UI Kit.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-angular
Key class	CometChatMentionsFormatter (extends CometChatTextFormatter)
Required setup	CometChatUIKit.init(uiKitSettings) then CometChatUIKit.login("UID")
Purpose	Format @mentions with styled tokens, suggestion list, and click handling for users and group members
Related	Custom Text Formatter | All Guides

CometChatMentionsFormatter extends CometChatTextFormatter to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.

Capability	Description
Mention formatting	Auto-formats <@uid:...> placeholders into styled tokens
Custom styles	Colors, fonts, and backgrounds for mention text
User and group mentions	Works with both individual users and group members
Suggestion list	Generates mention candidates from user input
Click handling	Listener interface for tap/click on rendered mentions

---

Usage

1. Initialize the formatter

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

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

2. Format a message

Provide the raw message string containing mention placeholders, then apply the formatter:

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

The output contains HTML with styled mentions ready for rendering.

3. Pass to components

Use the textFormatters input on cometchat-message-list, cometchat-message-composer, or cometchat-conversations.

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;
    });
  }
}

The CometChatMentionsFormatter is included by default in the message composer and message list. You only need to pass it explicitly if you want to customize its behavior or combine it with other formatters.

---

Customization

Custom mention styles

Override the default mention token styles using CSS. The formatter applies BEM classes that you can target:

.cometchat-mentions-you {
  color: var(--cometchat-static-white);
  background-color: var(--cometchat-primary-color);
  font-weight: 600;
  border-radius: 4px;
  padding: 0 4px;
}

.cometchat-mentions-other {
  color: var(--cometchat-primary-color);
  background-color: var(--cometchat-background-color-03);
  font-weight: 600;
  border-radius: 4px;
  padding: 0 4px;
}

Configuring the formatter

Set the logged-in user so the formatter can distinguish self-mentions:

mentionsFormatter.setLoggedInUser(loggedInUser);
mentionsFormatter.setAllMentionConfig(true, 'everyone');

---

Next Steps

Custom Text Formatter

Build custom inline text patterns.

Message List

Render real-time message threads.

All Guides

Browse all feature and formatter guides.

URL Formatter

Auto-detect and style URLs as clickable links.