Threaded Messages Header - CometChat Docs

The CometChatThreadedMessageHeader component displays the header for threaded message conversations showing parent message info. By default, the parent message appears at the top, the message composer is at the bottom, and a message list containing all replies is displayed between them.

AI Integration Quick Reference

{
  "component": "CometChatThreadedMessageHeader",
  "package": "CometChatUIKitSwift",
  "import": "import CometChatUIKitSwift\nimport CometChatSDK",
  "description": "Displays the header for threaded message conversations showing parent message info",
  "inherits": "UIView",
  "primaryOutput": {
    "callback": "onBack",
    "type": "() -> Void"
  },
  "props": {
    "data": {
      "parentMessage": { "type": "BaseMessage", "required": true }
    },
    "callbacks": {
      "onBack": "() -> Void"
    }
  },
  "events": [],
  "sdkListeners": [],
  "compositionExample": {
    "description": "ThreadedMessageHeader is used within ThreadedMessages component",
    "components": ["CometChatThreadedMessageHeader", "CometChatMessageList", "CometChatMessageComposer"],
    "flow": "User opens thread → sees parent message in header → views/sends replies below"
  }
}

Field	Value
Component	`CometChatThreadedMessageHeader`
Package	`CometChatUIKitSwift`
Inherits	`UIView`

ThreadedMessages is composed of the following components:

Component	Description
MessageList	CometChatMessageList is a component that displays a list of Messages
MessageComposer	CometChatMessageComposer is a component that helps in writing and editing of messages and also sending attachments

Usage

Integration

Since CometChatThreadedMessageHeader is a view, you can add it to your view controller using the following code snippet:

Swift

let threadedMessage = CometChatThreadedMessageHeader()
view.addSubview(threadedMessage)

Ensure to pass and present threadedMessage. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.

Filters

Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria for a more customized experience. Filters can be applied using RequestBuilders of Chat SDK. ThreadedMessages does not have its own Filters. However, you can filter the messages list in ThreadedMessages Component using MessageListConfiguration. Example In this example, we are filtering messages and searching for messages that contain the keyword “payment”:

Swift

// MARK: - Filter messages by search keyword
let messageRequestBuilder = MessagesRequest.MessageRequestBuilder()
    .set(uid: "your UID")
    .set(searchKeyword: "sure")

let messageList = CometChatMessageList()
messageList.set(user: user)
messageList.set(messagesRequestBuilder: messageRequestBuilder)

Events

Events are emitted by a Component. By using events, you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed. The MessageList Component does not emit any events of its own.

Customization

To fit your app’s design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

Style

ThreadedMessageHeaderStyle contains various properties which can be used to customize the UI of CometChatThreadedMessageHeader. Global Level Styling

Swift

// MARK: - Apply global styling
CometChatThreadedMessageHeader.style.backgroundColor = UIColor(hex: "#F76808")
CometChatThreadedMessageHeader.style.dividerTintColor = UIColor(hex: "#F76808")
CometChatThreadedMessageHeader.style.bubbleContainerBackgroundColor = UIColor(hex: "#F76808")

Instance Level Styling

Swift

// MARK: - Apply instance-level styling
let customThreadedHeaderStyle = ThreadedMessageHeaderStyle()
customThreadedHeaderStyle.backgroundColor = UIColor(hex: "#F76808")
customThreadedHeaderStyle.dividerTintColor = UIColor(hex: "#F76808")
customThreadedHeaderStyle.bubbleContainerBackgroundColor = UIColor(hex: "#F76808")
        
let threadedMessage = CometChatThreadedMessageHeader()
threadedMessage.style = customThreadedHeaderStyle

List of properties available for configuring in ThreadedMessagesStyle:

Property	Description	Code
Background Color	Background color for the header.	`CometChatThreadedMessageHeader.style.backgroundColor = CometChatTheme.backgroundColor03`
Border Color	Border color for the header.	`CometChatThreadedMessageHeader.style.borderColor = UIColor.clear`
Border Width	Border width for the header.	`CometChatThreadedMessageHeader.style.borderWith = 0`
Corner Radius	Corner radius for the header.	`CometChatThreadedMessageHeader.style.cornerRadius = CometChatCornerStyle?`
Bubble Container Background Color	Background color for the bubble container.	`CometChatThreadedMessageHeader.style.bubbleContainerBackgroundColor = UIColor.clear`
Bubble Container Border Color	Border color for the bubble container.	`CometChatThreadedMessageHeader.style.bubbleContainerBorderColor = UIColor.clear`
Bubble Container Border Width	Border width for the bubble container.	`CometChatThreadedMessageHeader.style.bubbleContainerBorderWidth = 0`
Bubble Container Corner Radius	Corner radius for the bubble container.	`CometChatThreadedMessageHeader.style.bubbleContainerCornerRadius = CometChatCornerStyle?`
Divider Tint Color	Tint color for the divider.	`CometChatThreadedMessageHeader.style.dividerTintColor = CometChatTheme.extendedPrimaryColor100`
Count Text Color	Text color for the message count text.	`CometChatThreadedMessageHeader.style.countTextColor = CometChatTheme.textColorSecondary`
Count Text Font	Font for the message count text.	`CometChatThreadedMessageHeader.style.countTextFont = CometChatTypography.Body.regular`

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can set maximum lines the text area will show before scrolling in the composer, edit a message, add header view and footer view to the composer, and more. Below is a list of customizations along with corresponding code snippets:

Property	Description	Code
hideReplyCount	Hides the reply count for threaded messages.	`hideReplyCount = true`
hideReplyCountBar	Hides the reply count bar in the thread.	`hideReplyCountBar = true`
hideReceipts	Hides read and delivery receipts for messages.	`hideReceipts = true`
hideAvatar	Hides the avatar in the threaded message view.	`hideAvatar = true`
setMaxHeight	Sets the maximum height for the threaded message view.	`setMaxHeight(300)`
setMessageAlignment	Sets the alignment of messages (e.g., left or right).	`setMessageAlignment(.right)`
setParentMessage	Sets the parent message for the threaded conversation.	`setParentMessage(parentMessage)`

Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

SetDatePattern

You can modify the date pattern to your requirement using .set(datePattern:). This method accepts a function with a return type String. Inside the function, you can create your own pattern and return it as a String. Example

Swift

// MARK: - Custom date pattern
let threadedMessageHeader = CometChatThreadedMessageHeader()
threadedMessageHeader.set(datePattern: { timestamp in
    guard let timestamp = timestamp else {
        return ""
    }
    let date = Date(timeIntervalSince1970: TimeInterval(timestamp / 1000))
    let formatter = DateFormatter()
    formatter.dateFormat = "dd-MM-yyyy"
    return formatter.string(from: date)
})

SetTextFormatters

This functionality dynamically assigns a list of text formatters. If a custom list is provided, it uses that list. Otherwise, it gracefully falls back to the default text formatters retrieved from the data source for seamless integration. Example This code customizes a CometChat text formatter to identify and style the word “sure”, with handling options for interactions like string search, scrolling, and item clicks. The custom formatter is then applied to CometChat messages.

Swift

// MARK: - Apply custom text formatter
let myCustomTextFormatter = MyCustomTextFormatter(trackingCharacter: "#")

let threadedMessageHeader = CometChatThreadedMessageHeader()
    .set(user: user)
    .set(textFormatter: [myCustomTextFormatter])

Demonstration:

MyCustomTextFormatter

import Foundation
import CometChatSDK
import CometChatUIKitSwift

class MyCustomTextFormatter: CometChatTextFormatter {
    
    // MARK: - Regex Pattern
    override func getRegex() -> String {
        return "(\\bsure\\b)"
    }

    // MARK: - Tracking Character
    override func getTrackingCharacter() -> Character {
        return "#"
    }

    // MARK: - Search
    override func search(string: String, suggestedItems: ((_: [SuggestionItem]) -> ())? = nil) {
        // This function would call an API or perform a local search
        // For now, it does nothing
    }

    // MARK: - Pagination
    override func onScrollToBottom(suggestionItemList: [SuggestionItem], listItem: ((_: [SuggestionItem]) -> ())?) {
        // This function would call the next page of an API
        // For now, it does nothing
    }

    // MARK: - Item Selection
    override func onItemClick(suggestedItem: SuggestionItem, user: User?, group: Group?) {
        // Do something with the clicked item
    }

    // MARK: - Pre-Send Processing
    override func handlePreMessageSend(baseMessage: BaseMessage, suggestionItemList: [SuggestionItem]) {
        // This function would modify the message before it's sent
        // For now, it does nothing
    }

    // MARK: - Message String Formatting
    override func prepareMessageString(
        baseMessage: BaseMessage,
        regexString: String,
        alignment: MessageBubbleAlignment = .left,
        formattingType: FormattingType
    ) -> NSAttributedString {
        let attrString = NSMutableAttributedString(string: "SURE")
        if alignment == .left {
            // Received message styling
            attrString.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 0, length: attrString.length))
        } else {
            // Sent message styling
            attrString.addAttribute(.foregroundColor, value: UIColor.green, range: NSRange(location: 0, length: attrString.length))
        }
        attrString.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: 18), range: NSRange(location: 0, length: attrString.length))
        return attrString
    }

    // MARK: - Text Tap Handler
    override func onTextTapped(baseMessage: BaseMessage, tappedText: String, controller: UIViewController?) {
        // Your Action
    }
}

SetTemplate and AddTemplate

CometChatMessageTemplate is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to CometChatMessageTemplate.

Common Patterns

Open Thread from Message List

Present the threaded messages view when a user taps on a message’s reply count:

Swift

// In your message list delegate or action handler
func openThread(for parentMessage: BaseMessage) {
    // Create a view controller to host the threaded messages
    let threadVC = UIViewController()
    threadVC.view.backgroundColor = .systemBackground
    
    // Create threaded message header
    let threadedHeader = CometChatThreadedMessageHeader()
    threadedHeader.set(parentMessage: parentMessage)
    threadedHeader.set(controller: threadVC)
    threadedHeader.translatesAutoresizingMaskIntoConstraints = false
    
    // Create message list for thread replies
    let messageList = CometChatMessageList()
    if let user = parentMessage.sender {
        messageList.set(user: user)
    }
    messageList.set(parentMessage: parentMessage)
    messageList.set(controller: threadVC)
    messageList.translatesAutoresizingMaskIntoConstraints = false
    
    // Create composer for thread replies
    let composer = CometChatMessageComposer()
    if let user = parentMessage.sender {
        composer.set(user: user)
    }
    composer.set(parentMessage: parentMessage)
    composer.set(controller: threadVC)
    composer.translatesAutoresizingMaskIntoConstraints = false
    
    // Add to view
    threadVC.view.addSubview(threadedHeader)
    threadVC.view.addSubview(messageList)
    threadVC.view.addSubview(composer)
    
    // Layout constraints
    NSLayoutConstraint.activate([
        threadedHeader.topAnchor.constraint(equalTo: threadVC.view.safeAreaLayoutGuide.topAnchor),
        threadedHeader.leadingAnchor.constraint(equalTo: threadVC.view.leadingAnchor),
        threadedHeader.trailingAnchor.constraint(equalTo: threadVC.view.trailingAnchor),
        
        messageList.topAnchor.constraint(equalTo: threadedHeader.bottomAnchor),
        messageList.leadingAnchor.constraint(equalTo: threadVC.view.leadingAnchor),
        messageList.trailingAnchor.constraint(equalTo: threadVC.view.trailingAnchor),
        messageList.bottomAnchor.constraint(equalTo: composer.topAnchor),
        
        composer.leadingAnchor.constraint(equalTo: threadVC.view.leadingAnchor),
        composer.trailingAnchor.constraint(equalTo: threadVC.view.trailingAnchor),
        composer.bottomAnchor.constraint(equalTo: threadVC.view.safeAreaLayoutGuide.bottomAnchor)
    ])
    
    self.navigationController?.pushViewController(threadVC, animated: true)
}

Customize Thread Header with Parent Message Info

Display additional context about the parent message in the thread header:

Swift

let threadedHeader = CometChatThreadedMessageHeader()
threadedHeader.set(parentMessage: parentMessage)

// Custom date formatting
threadedHeader.set(datePattern: { timestamp in
    guard let timestamp = timestamp else { return "" }
    let date = Date(timeIntervalSince1970: TimeInterval(timestamp / 1000))
    let formatter = DateFormatter()
    formatter.dateFormat = "MMM d 'at' h:mm a"
    return formatter.string(from: date)
})

Filter Thread Replies

Show only specific types of messages in the thread:

Swift

// Filter to show only text messages in thread
let messageRequestBuilder = MessagesRequest.MessageRequestBuilder()
    .set(parentMessageId: parentMessage.id)
    .set(types: ["text"])
    .set(limit: 30)

let messageList = CometChatMessageList()
messageList.set(messagesRequestBuilder: messageRequestBuilder)

To ensure that the CometChatThreadedMessageHeader is properly configured, passing the controller is mandatory.

let threadedMessageHeader = CometChatThreadedMessageHeader()
threadedMessageHeader.set(controller: UIViewController) // Passing the controller is required

​Usage

​Integration

​Filters

​Events

​Customization

​Style

​Functionality

​Advanced

​SetDatePattern

​SetTextFormatters

​SetTemplate and AddTemplate

​Common Patterns

​Open Thread from Message List

​Customize Thread Header with Parent Message Info

​Filter Thread Replies

Usage

Integration

Filters

Events

Customization

Style

Functionality

Advanced

SetDatePattern

SetTextFormatters

SetTemplate and AddTemplate

Common Patterns

Open Thread from Message List

Customize Thread Header with Parent Message Info

Filter Thread Replies