Mentions Formatter - CometChat Docs

AI Agent Component Spec

Field	Value
Package	`@cometchat/chat-uikit-react`
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
Sample app	GitHub
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 "path-to-your-file";

const mentionsFormatter = new CometChatMentions();
mentionsFormatter.setCometChatUserGroupMembers(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.getFormattedText(unformattedMessage);
// Render formattedMessage in your message component