CometChatConversations is an iOS UI Kit component that displays a list of recent conversations for the logged-in user, with real-time updates, typing indicators, read receipts, and customizable styling.
As CometChatConversations is a custom view controller, it can be initiated either by tapping a button or through the trigger of any event. It offers multiple parameters and methods for tailoring its user interface.
swift
let cometChatConversations = CometChatConversations()self.navigationController.pushViewController(cometChatConversations, animated: true)
Integration (With Custom Request Builder)
During the initialization of CometChatConversations, users can provide this custom request builder.
swift
// You can create ConversationRequestBuilder as per your requirementlet conversationRequestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20)let cometChatConversations = CometChatConversations()cometChatConversations.set(conversationRequestBuilder: conversationRequestBuilder)self.navigationController.pushViewController(cometChatConversations, animated: true)
If a navigation controller is already in use, opt for the pushViewController method instead of presenting the view controller.
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.
set(onItemClick:)
set(OnItemClick:) is triggered when you click on a ListItem of the Conversations component. This set(OnItemClick:) method proves beneficial when a user intends to customize the on-click behavior in CometChatConversations.
Swift
// syntax for set(onItemClick: @escaping ((_ conversation: Conversation, _ indexPath: IndexPath) -> Void))cometChatConversations.set(onItemClick: { conversation, indexPath in // Override on item click})
set(OnItemLongClick:)
set(OnItemLongClick:) is triggered when you long press on a ListItem of the Conversations component. This set(OnItemLongClick:) method proves beneficial when a user intends to additional functionality on long press on list item in CometChatConversations.
Swift
// syntax for set(onItemLongClick: @escaping ((_ conversation: Conversation, _ indexPath: IndexPath) -> Void))cometChatConversations.set(onItemLongClick: { conversation, indexPath in // Override on item click})
3. set(onBack:)
This set(onBack:) method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatConversations.
Swift
// syntax for set(onBack: @escaping () -> Void)cometChatConversations.set(onBack: { // Override on back})
4. set(onSelection:)
The set(onSelection:) only gets trigger when selection mode is set to multiple of single. And this gets trigger on every selection, and returns the list of selected conversations.
Swift
conversations.set(onSelection: { conversations in //Handle action})
5. set(onError:)
This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatConversations.
Swift
// syntax for set(onError: @escaping ((_ error: CometChatException) -> Void))cometChatConversations.set(onError: { error in // Override on error})
6. set(onEmpty:)
This set(onEmpty:) method is triggered when the conversations list is empty in CometChatConversations.
This set(onLoad:) gets triggered when a conversation list is fully fetched and going to displayed on the screen, this return the list of conversations to get displayed on the screen.
Swift
// syntax for set(onLoad: @escaping ((_ conversations: [Conversation]) -> Void))cometChatConversations.set(onLoad: { conversations in // Handle loaded conversations})
You can set ConversationsRequestBuilder in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to ConversationRequestBuilder.You can set filters using the following parameters.
Conversation Type: Filters on type of Conversation, User or Groups
Limit: Number of conversations fetched in a single request.
WithTags: Filter on fetching conversations containing tags
Tags: Filters on specific Tag
UserTags: Filters on specific User Tag
GroupTags: Filters on specific Group Tag
Swift
// You can create ConversationRequestBuilder as per your requirementlet conversationRequestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20)let cometChatConversations = CometChatConversations()cometChatConversations.set(conversationRequestBuilder: conversationRequestBuilder)self.navigationController.pushViewController(cometChatConversations, animated: true)
If a navigation controller is already in use, opt for the pushViewController method instead of presenting the view controller.
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.
1. ConversationDeleted
This event will be emitted when the user deletes a conversation
Swift
Add Listener
// View controller from your project where you want to listen events.public class ViewController: UIViewController { public override func viewDidLoad() { super.viewDidLoad() // Subscribing for the listener to listen events from conversation module CometChatConversationEvents.addListener("UNIQUE_ID", self as CometChatConversationEventListener) }} // Listener events from conversation moduleextension ViewController: CometChatConversationEventListener { func ccConversationDelete(conversation: Conversation) { // Do Stuff }}
Remove Listener
public override func viewWillDisappear(_ animated: Bool) { // Uncubscribing for the listener to listen events from conversation module CometChatConversationEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")}
To align with your app’s design specifications, you have the flexibility to customize the appearance of the conversation component. We offer accessible methods that empower you to tailor the experience and functionality to meet your unique requirements.
Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.
1. Conversation Style
The CometChatConversation component allows developers to customize its appearance through the ConversationStyle class. This enables global-level or instance-specific styling.Global level styling
To apply customized styles to the Avatar component in the Conversations Component, you can use the following code snippet. For more information, visit Avatar Styles.Global level styling
To apply customized styles to the Status Indicator component in the Conversations Component, you can use the following code snippet. For more information, visit Indicator Styles.Global level styling
To apply customized styles to the Badge component in the Conversations Component, you can use the following code snippet. For more information, visit Badge StylesGlobal level styling
These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.Below is a list of customizations along with corresponding code snippets
Property
Description
Code
hideErrorView
Hides the error state view.
hideErrorView = true
hideNavigationBar
Hides or shows the navigation bar.
hideNavigationBar = true
hideSearch
Hides the search bar.
hideSearch = true
hideBackButton
Hides the back button.
hideBackButton = true
hideLoadingState
Hides the loading state indicator.
hideLoadingState = true
hideReceipts
Hides message read/delivery receipts.
hideReceipts = true
hideDeleteConversationOption
Hides the option to delete a conversation.
hideDeleteConversationOption = true
hideUserStatus
Hides the online/offline status of users.
hideUserStatus = true
hideGroupType
Hides the group type (private/public).
hideGroupType = true
set(conversationRequestBuilder:)
Sets the request builder for fetching conversations.
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.
The CometChatConversations component supports full customization of how date and time are displayed using the CometChatDateTimeFormatter.This enables developers to localize, format, or personalize the date and time strings shown next to each conversation—such as “Today”, “Yesterday”, “12:45 PM”, etc.
Component-Level (Global)
Swift
CometChatConversations.dateTimeFormatter.time = { timestamp in return "at " + DateFormatter.localizedString(from: Date(timeIntervalSince1970: TimeInterval(timestamp)), dateStyle: .none, timeStyle: .short)}CometChatConversations.dateTimeFormatter.today = { timestamp in return "Today • \(formattedTime(from: timestamp))"}CometChatConversations.dateTimeFormatter.otherDay = { timestamp in // This will display older dates as "24 Apr 2025" instead of the default relative format. let formatter = DateFormatter() formatter.dateFormat = "dd MMM yyyy" return formatter.string(from: Date(timeIntervalSince1970: TimeInterval(timestamp)))}
Instance-Level (Local)
Swift
let conversations = CometChatConversations()conversations.dateTimeFormatter.yesterday = { timestamp in return "Yesterday at " + formattedTime(from: timestamp)}
Available closures
Property
Description
Code
time
Called to format a timestamp as a standard time (e.g., “12:30 PM”).
You can modify the text formatters by using .set(textFormatters:). This method accepts an array of CometChatTextFormatter, allowing you to apply multiple text formatters to the conversation text.
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.
Swift
cometChatConversations.set(datePattern: { conversation in if let time = conversation.lastMessage?.sentAt { let date = Date(timeIntervalSince1970: TimeInterval(time)) let dateFormatter = DateFormatter() dateFormatter.dateFormat = "dd MMM, hh:mm a" dateFormatter.amSymbol = "AM" dateFormatter.pmSymbol = "PM" return dateFormatter.string(from: date) } return ""})
You can define custom options for each conversation using .set(options:). This method allows you to return an array of CometChatConversationOption based on the conversation object.
Swift
cometChatConversations.set(options: { conversation in return [MuteOption(), DeleteOption()] })
You can customize the notification sound for incoming messages using .set(customSoundForMessages:). This method accepts a URL pointing to the audio file.
Swift
let soundURL = Bundle.main.url(forResource: "notification_sound", withExtension: "mp3") cometChatConversations.set(customSoundForMessages: soundURL!)
You can customize the subtitle view for each conversation item to meet your requirements
Swift
cometChatConversations.set(subtitleView: { conversation in let customSubtitleView = CustomSubtitleView() customSubtitleView.set(conversation: conversation) return customSubtitleView})
Demonstration
You need to create a SubtitleView a custom UIViewcocoa touch file and inflate it in the setSubtitleView apply function. Then, you can define individual actions depending on your requirements.
SubtitleView file should should appear as follows:
