​
Overview

ThreadedMessages is a Composite Component that displays all replies made to a particular message in a conversation. By default, the parent message will be displayed at the top, the message composer will be at the bottom and between them a message list will contain all replies.
ThreadedMessages is composed of the following components:
ComponentDescription
MessageListCometChatMessageList is a component that displays a list of Messages
MessageComposerCometChatMessageComposer is a component that helps in writing and editing of messages and also sending attachments

​
Usage

​
Integration

As CometChatThreadedMessageHeader is a view, you can add it to your view controller by adding the following code snippet. 
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, allowing for a more customized. 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”. 
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 event 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

ThreadedMessagesStyle contains various properties which can be used to customize the UI of CometChatThreadedMessages. Global level styling 
CometChatThreadedMessageHeader.style.backgroundColor = UIColor(hex: "#F76808")
CometChatThreadedMessageHeader.style.dividerTintColor = UIColor(hex: "#F76808")
CometChatThreadedMessageHeader.style.bubbleContainerBackgroundColor = UIColor(hex: "#F76808")
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:
PropertyDescriptionCode
Background ColorBackground color for the header.CometChatThreadedMessageHeader.style.backgroundColor = CometChatTheme.backgroundColor03
Border ColorBorder color for the header.CometChatThreadedMessageHeader.style.borderColor = UIColor.clear
Border WidthBorder width for the header.CometChatThreadedMessageHeader.style.borderWith = 0
Corner RadiusCorner radius for the header.CometChatThreadedMessageHeader.style.cornerRadius = CometChatCornerStyle?
Bubble Container Background ColorBackground color for the bubble container.CometChatThreadedMessageHeader.style.bubbleContainerBackgroundColor = UIColor.clear
Bubble Container Border ColorBorder color for the bubble container.CometChatThreadedMessageHeader.style.bubbleContainerBorderColor = UIColor.clear
Bubble Container Border WidthBorder width for the bubble container.CometChatThreadedMessageHeader.style.bubbleContainerBorderWidth = 0
Bubble Container Corner RadiusCorner radius for the bubble container.CometChatThreadedMessageHeader.style.bubbleContainerCornerRadius = CometChatCornerStyle?
Divider Tint ColorTint color for the divider.CometChatThreadedMessageHeader.style.dividerTintColor = CometChatTheme.extendedPrimaryColor100
Count Text ColorText color for the message count text.CometChatThreadedMessageHeader.style.countTextColor = CometChatTheme.textColorSecondary
Count Text FontFont 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 text area will show before scrolling in the composer, edit a message, add header view and footer view to the composer, etc. Below is a list of customizations along with corresponding code snippets message composer offers
PropertyDescriptionCode
hideReplyCountHides the reply count for threaded messages.hideReplyCount = true
hideReplyCountBarHides the reply count bar in the thread.hideReplyCountBar = true
hideReceiptsHides read and delivery receipts for messages.hideReceipts = true
hideAvatarHides the avatar in the threaded message view.hideAvatar = true
setMaxHeightSets the maximum height for the threaded message view.setMaxHeight(300)
setMessageAlignmentSets the alignment of messages (e.g., left or right).setMessageAlignment(.right)
setParentMessageSets 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 
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
let myCustomTextFormatter = MyCustomTextFormatter(trackingCharacter: "#")

let threadedMessageHeader  = CometChatThreadedMessageHeader()
    .set(user: user)
    .set(textFormatter: [myCustomTextFormatter])
Demonstration: 
import Foundation
import CometChatSDK
import CometChatUIKitSwift

class MyCustomTextFormatter: CometChatTextFormatter {
override func getRegex() -> String {
return "(\\bsure\\b)"

    }

    override func getTrackingCharacter() -> Character {
        return "#"
    }

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

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

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

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

    override func prepareMessageString(
      baseMessage: BaseMessage,
      regexString: String,
      alignment: MessageBubbleAlignment = .left,
      formattingType: FormattingType
    ) -> NSAttributedString {
        let attrString = NSMutableAttributedString(string: "SURE")
        if alignment == .left { // Received message
            attrString.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 0, length: attrString.length))
        } else { // Sent message
            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
    }

    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.
To ensure that the ThreadedMessages is properly configured, passing the controller is mandatory.
  • Swift
let threadedMessageView = CometChatThreadedMessages()
threadedMessageView.set(controller: UIViewController) // Passing the controller is required