Skip to main content

​
Overview

The CometChatMentionsFormatter class is part of the CometChat UI Kit, a ready-to-use chat UI component library for integrating CometChat into your iOS applications. This class provides functionality to format mentions within text messages displayed in the chat interface. Mentions allow users to reference other users within a conversation, providing a convenient way to direct messages or involve specific participants.

​
Features

  • Mention Formatting: Automatically formats mentions within text messages based on provided styles and settings
  • Customizable Styles: Allows customization of text styles for mentions, including colors, fonts, and background colors
  • User and Group Member Mentions: Supports mentions for both individual users and group members, providing flexibility in communication scenarios
  • Mention List Generation: Generates a list of suggested mentions based on user input, facilitating easy selection of recipients during message composition
  • Mention Click Handling: Provides a listener interface for handling click events on mentions, enabling custom actions to be performed when a mention is tapped by the user

​
Usage

To integrate the CometChatMentionsFormatter class into your application:
  1. Initialization: Create an instance of the CometChatMentionsFormatter class and configure it with desired settings, such as mention text styles and limit settings.
  2. Set Mention Listeners: Set listeners for handling mention click events (.setOnMentionClicked).
  3. Format Messages: Use the .set(leftBubbleTextStyle), .set(rightBubbleTextStyle), .set(composerTextStyle), and .set(conversationListTextStyle) methods to format text messages with mentions appropriately for display in the chat interface.
  4. Customization: Customize the appearance and behavior of mentions by adjusting the text styles, colors, and other formatting properties as needed.
CometChatMentionsFormatter can be directly initialized, tweaked using its properties, and passed into different configurations. Below is an example demonstrating how to use the CometChatMentionsFormatter class in components such as CometChatConversations, CometChatMessageList, and CometChatMessageComposer. 
// Create a custom mention formatter instance
let customMentionFormatter = CometChatMentionsFormatter()

// Apply the formatter to a message list
let messageListView = CometChatMessageList()
messageListView.set(textFormatters: [customMentionFormatter])

​
Actions

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

​
setOnMentionClick

Setting a listener for mention-click events in Message Bubbles enhances interactivity within the chat. This listener is activated when a mention is clicked, returning the corresponding user object. This feature transforms mentions into interactive links, enabling more in-depth and contextual engagement with the user associated with the clicked mention. 
// Set up mention click handler
let customMentionFormatter = CometChatMentionsFormatter()
customMentionFormatter.set { message, tappedText, controller in
    // Display the name of the first mentioned user
    controller?.view.showToastMessage(message: "\(message.mentionedUsers.first?.name)")
}
The following code snippet represents a UIView extension used to display showToastMessage: 
extension UIView {
    func showToastMessage(message: String) {
        // Create toast label with centered positioning
        let toastLabel = UILabel(frame: CGRect(
            x: self.frame.size.width/2 - 100,
            y: self.frame.size.height - 120,
            width: 200,
            height: 35
        ))
        
        // Configure toast appearance
        toastLabel.backgroundColor = UIColor.black
        toastLabel.textColor = UIColor.white
        toastLabel.textAlignment = .center
        toastLabel.text = message
        toastLabel.alpha = 2.0
        toastLabel.layer.cornerRadius = 13
        toastLabel.clipsToBounds = true
        
        self.addSubview(toastLabel)
        
        // Animate fade out and remove
        UIView.animate(withDuration: 4.0, delay: 0.4, options: .curveEaseOut, animations: {
            toastLabel.alpha = 0.0
        }, completion: { isCompleted in
            toastLabel.removeFromSuperview()
        })
    }
}

​
Customization

MethodDescriptionType
Set Conversation List TextStyleSets styling for conversation list’s formatted textMentionTextStyle
Set GroupMembersRequestBuilderSets the builder for fetching group membersGroupMembersRequest.GroupMembersRequestBuilder?
Set UsersRequestBuilderSets the builder for fetching usersUsersRequest.UsersRequestBuilder?
Set OnMentionClickSets a listener for mention click events in Message Bubbles((_ baseMessage: BaseMessage, _ tappedText: String, _ controller: UIViewController?)->())
Set composerTextStyleSets styling for composer’s formatted textMentionTextStyle

​
Advanced

For advanced-level customization, you can set the style of the Mentions formatters. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your own formatter styles.

​
Composer Mention Text Style

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for CometChatMessageComposer, refer to the code snippet below. 
// Create and configure composer mention style
let composerMentionStyle = MentionTextStyle()
composerMentionStyle.textColor = UIColor(hex: "#30A46C")

// Apply the style globally
CometChatMentionsFormatter.composerTextStyle = composerMentionStyle

​
Message Bubble Mention Text Style

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for CometChatMessageList, refer to the code snippet below. 
// Configure left bubble (incoming) mention style
var leftBubbleMentionsStyle = MentionTextStyle()
leftBubbleMentionsStyle.textColor = UIColor(hex: "#D6409F")
CometChatMentionsFormatter.leftBubbleTextStyle = leftBubbleMentionsStyle

// Configure right bubble (outgoing) mention style
var rightBubbleMentionsStyle = MentionTextStyle()
rightBubbleMentionsStyle.textColor = UIColor(hex: "#30A46C")
CometChatMentionsFormatter.rightBubbleTextStyle = rightBubbleMentionsStyle

​
Conversations Mention Text Style

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for CometChatConversations, refer to the code snippet below. 
// Create and configure conversation list mention style
let mentionsStyle = MentionTextStyle()
mentionsStyle.textColor = UIColor(hex: "#30A46C")

// Apply the style globally
CometChatMentionsFormatter.conversationListTextStyle = mentionsStyle

​
Next Steps