CometChatMentionsTextFormatter

Introduction

Bring your chat conversations to life with CometChatMentionsTextFormatter. This class allows you to transform user mentions into clickable elements, enriching the communication experience and making it easy for users to notice and interact with each other within the chat.

Features

• Auto-detected Mentions: Automatically finds and highlights mentions in messages.
• Clickable: Makes each mention a clickable entity, enabling further user interaction.
• Customizable: Offers the flexibility to style mentions to fit the design of your chat UI.

Usage Guide

Setup the Formatter

To get started, import and initialize the mentions formatter:

import { CometChatMentionsTextFormatter } from "path-to-your-file";

// Initialize the formatter
const mentionsFormatter = new CometChatMentionsTextFormatter();
mentionsFormatter.setCometChatUserGroupMembers(userList);

Process Chat Messages

When rendering messages in the UI, apply the formatter to process mentions:

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

The formattedMessage now contains HTML with styled mentions that can be directly inserted into your message component.

UserMentionStyle

Styling properties for CometChatMentionsTextFormatter component.

Attributes	Type	Description
mentionTextFont	string	Sets font for mentions
mentionTextColor	string	Sets color for mentions
mentionTextBackground	string	Sets background for mentions
loggedInUserTextFont	string	Sets font for loggedIn user mentions
loggedInUserTextColor	string	Sets color for loggedIn user mentions
loggedInUserTextBackground	string	Sets background for loggedIn user mentions