> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Threaded Messages Header ## Overview ThreadedMessages is a [Composite Component](/ui-kit/ios/components-overview#composite-components) 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: | Component | Description | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | [MessageList](/ui-kit/ios/message-list) | CometChatMessageList is a component that displays a list of Messages | | [MessageComposer](/ui-kit/ios/message-composer) | CometChatMessageComposer 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. ```swift theme={null} 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](#configuration). **Example** In this example, we are filtering messages and searching for messages that contain the keyword "payment". ```swift theme={null} let messageRequestBuilder = MessagesRequest.MessageRequestBuilder() .set(uid: "your UID") .set(searchKeyword: "sure") let messageList = CometChatMessageList() messageList.set(user: user) messageList.set(messagesRequestBuilder: messageRequestBuilder) ``` *** ### Events [Events](/ui-kit/ios/components-overview#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** ```swift theme={null} CometChatThreadedMessageHeader.style.backgroundColor = UIColor(hex: "#F76808") CometChatThreadedMessageHeader.style.dividerTintColor = UIColor(hex: "#F76808") CometChatThreadedMessageHeader.style.bubbleContainerBackgroundColor = UIColor(hex: "#F76808") ``` **Instance level styling** ```swift theme={null} 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 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 | 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 theme={null} 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. ```ruby Swift theme={null} let myCustomTextFormatter = MyCustomTextFormatter(trackingCharacter: "#") let threadedMessageHeader = CometChatThreadedMessageHeader() .set(user: user) .set(textFormatter: [myCustomTextFormatter]) ``` Demonstration: ```swift theme={null} 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](/ui-kit/ios/message-template) 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](/ui-kit/ios/message-template). *** To ensure that the `ThreadedMessages` is properly configured, passing the controller is mandatory. * Swift ```swift theme={null} let threadedMessageView = CometChatThreadedMessages() threadedMessageView.set(controller: UIViewController) // Passing the controller is required ``` ***