diff --git a/ui-kit/ios/ai-assistant-chat-history.mdx b/ui-kit/ios/ai-assistant-chat-history.mdx
index cc24e42a..5e2b7243 100644
--- a/ui-kit/ios/ai-assistant-chat-history.mdx
+++ b/ui-kit/ios/ai-assistant-chat-history.mdx
@@ -1,424 +1,728 @@
---
title: "AI Assistant Chat History"
+sidebarTitle: "AI Assistant Chat History"
+description: "Complete guide to displaying AI assistant conversation history in iOS apps - production-ready code included"
---
## Overview
-The `AI Assistant Chat History` component is a pre-built user interface component designed to display the conversation history between users and an AI assistant within a chat application. It provides a structured and visually appealing way to present past interactions, making it easy for users to review previous messages and context.
+`CometChatAIAssistanceChatHistory` displays past conversations between users and AI assistants. Users can review previous AI interactions and start new conversations.
-## Usage
-
-### Integration
-
-##### Using Navigation Controller to Present `CometChatAIAssistantChatHistory`
+---
-The `CometChatAIAssistanceChatHistory` component can be launched using a navigation controller.
-This approach is ideal when you want to present the chat history as a standalone screen within your app’s navigation flow
+## Prerequisites
-
-
-```swift
-let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.user = user // A User or Group object is required to launch this component.
-self.navigationController?.pushViewController(chatHistory, animated: true)
+
+
+Add to your Podfile:
+```ruby
+pod 'CometChatUIKitSwift', '5.1.7'
```
-
-
-
-
-
-Simply adding the CometChatAIAssistanceChatHistory component to your view hierarchy without providing a User or Group object will only display a loading indicator.
-To fetch and display actual messages, you must assign either a User or a Group object to the component.
+Run `pod install`
+
-
-
-***
-
-
-### Actions
-
-[Actions](/ui-kit/ios/components-overview#actions) define how a component behaves and responds to user interactions.
+
+Go to [CometChat Dashboard](https://app.cometchat.com) → AI → Enable AI features
+
-##### onNewChatButtonClicked
-
-`onNewChatButtonClicked` The `onNewChatButtonClicked` action is triggered when the user taps on the “New Chat” button.
-You can override it to define custom functionality, such as navigating to a new chat creation screen or initiating a new AI chat session.
-
-
-
+
```swift
-let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.user = user // A User or Group object is required to launch this component.
-
-chatHistory.onNewChatButtonClicked = {
- // TODO: Implement custom behavior here
+import CometChatUIKitSwift
+
+let uikitSettings = UIKitSettings()
+ .set(appID: "YOUR_APP_ID")
+ .set(authKey: "YOUR_AUTH_KEY")
+ .set(region: "YOUR_REGION")
+ .build()
+
+CometChatUIKit.init(uiKitSettings: uikitSettings) { result in
+ switch result {
+ case .success:
+ CometChatUIKit.login(uid: "USER_ID") { _ in }
+ case .failure(let error):
+ print(error.localizedDescription)
+ }
}
```
+
+
-
-
-
-
-***
-
-##### onMessageClicked
+---
-You can customize this behavior by using the provided code snippet to override the onMessageClicked callback.
-This allows you to define custom actions when a user taps on a message inside the AI Assistant Chat History component.
+## Basic Implementation
-
+
```swift
-let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.user = user // A User or Group object is required to launch this component.
-chatHistory.onMessageClicked = { message in
-// TODO: Implement custom behavior when a message is clicked
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ViewController: UIViewController {
+
+ var user: CometChat.User!
+
+ func showAIChatHistory() {
+ let chatHistory = CometChatAIAssistanceChatHistory()
+ chatHistory.user = user // Required!
+
+ navigationController?.pushViewController(chatHistory, animated: true)
+ }
}
```
-
-
-***
-
-##### onError
-
-You can customize this behavior by overriding the `onError` callback to improve error handling within the component.
-This is useful for displaying custom error messages or performing recovery actions when data fetching fails.
-
-
-
-```swift
-let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.user = user // A User or Group object is required to launch this component.
-
-chatHistory.set(onError: { error in
- // Override on error
-})
-```
-
-
+
+You **must** set either `user` or `group`. Without this, only a loading indicator will display.
+
-
+---
-##### onLoad
+## Production-Ready Implementation
-The `onLoad` callback is invoked when the message list is successfully fetched and loaded.
-This can be used to track component readiness or perform actions once messages are displayed.
+Complete implementation with all features:
-
+
```swift
-let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.user = user // A User or Group object is required to launch this component.
-
-chatHistory.set(onLoad: { history in
- // Handle loaded ai chat history
-})
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class AIAssistantViewController: UIViewController {
+
+ // MARK: - Properties
+ private var user: CometChat.User!
+ private var chatHistoryComponent: CometChatAIAssistanceChatHistory!
+
+ // MARK: - Initialization
+ convenience init(user: CometChat.User) {
+ self.init()
+ self.user = user
+ }
+
+ // MARK: - Lifecycle
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupChatHistory()
+ }
+
+ // MARK: - Setup
+ private func setupChatHistory() {
+ chatHistoryComponent = CometChatAIAssistanceChatHistory()
+ chatHistoryComponent.user = user
+
+ // Configure callbacks
+ setupCallbacks()
+
+ // Configure styling
+ setupStyling()
+
+ // Configure date formatting
+ setupDateFormatting()
+
+ // Configure empty/error states
+ setupStateViews()
+
+ // Present
+ navigationController?.pushViewController(chatHistoryComponent, animated: true)
+ }
+
+ // MARK: - Callbacks
+ private func setupCallbacks() {
+ // New chat button tapped
+ chatHistoryComponent.onNewChatButtonClicked = { [weak self] in
+ self?.startNewAIChat()
+ }
+
+ // Message tapped
+ chatHistoryComponent.onMessageClicked = { [weak self] message in
+ self?.handleMessageTap(message)
+ }
+
+ // Data loaded successfully
+ chatHistoryComponent.set(onLoad: { messages in
+ print("✅ Loaded \(messages.count) AI messages")
+ })
+
+ // No data available
+ chatHistoryComponent.set(onEmpty: { [weak self] in
+ print("📭 No AI chat history")
+ })
+
+ // Error occurred
+ chatHistoryComponent.set(onError: { [weak self] error in
+ self?.showError(error.localizedDescription)
+ })
+ }
+
+ // MARK: - Styling
+ private func setupStyling() {
+ let style = AiAssistantChatHistoryStyle()
+
+ // Background
+ style.backgroundColor = .systemBackground
+
+ // Item text
+ style.itemTextFont = UIFont.systemFont(ofSize: 16, weight: .medium)
+ style.itemTextColor = .label
+
+ // New chat button
+ style.newChatTitleFont = UIFont.systemFont(ofSize: 18, weight: .bold)
+ style.newChatTitleColor = .systemBlue
+
+ chatHistoryComponent.style = style
+ }
+
+ // MARK: - Date Formatting
+ private func setupDateFormatting() {
+ // Today's messages
+ chatHistoryComponent.dateTimeFormatter.today = { timestamp in
+ let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
+ let formatter = DateFormatter()
+ formatter.timeStyle = .short
+ return "Today at \(formatter.string(from: date))"
+ }
+
+ // Yesterday's messages
+ chatHistoryComponent.dateTimeFormatter.yesterday = { timestamp in
+ let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
+ let formatter = DateFormatter()
+ formatter.timeStyle = .short
+ return "Yesterday at \(formatter.string(from: date))"
+ }
+
+ // Older messages
+ chatHistoryComponent.dateTimeFormatter.otherDay = { timestamp in
+ let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
+ let formatter = DateFormatter()
+ formatter.dateFormat = "MMM d, yyyy 'at' h:mm a"
+ return formatter.string(from: date)
+ }
+ }
+
+ // MARK: - State Views
+ private func setupStateViews() {
+ // Empty state text
+ chatHistoryComponent.emptyStateText = "No AI conversations yet"
+ chatHistoryComponent.emptyStateSubtitleText = "Tap 'New Chat' to start talking with AI"
+
+ // Error state text
+ chatHistoryComponent.errorStateText = "Couldn't load history"
+ chatHistoryComponent.errorStateSubtitleText = "Please check your connection and try again"
+ }
+
+ // MARK: - Actions
+ private func startNewAIChat() {
+ // Option 1: Open messages view for new AI chat
+ let messagesVC = CometChatMessages()
+ messagesVC.user = user
+ navigationController?.pushViewController(messagesVC, animated: true)
+
+ // Option 2: Show action sheet with options
+ // showNewChatOptions()
+ }
+
+ private func handleMessageTap(_ message: BaseMessage) {
+ print("Tapped message ID: \(message.id)")
+ print("Message text: \(message.text ?? "No text")")
+
+ // Show message details or continue conversation
+ let alert = UIAlertController(
+ title: "Message",
+ message: message.text,
+ preferredStyle: .alert
+ )
+ alert.addAction(UIAlertAction(title: "Continue Chat", style: .default) { [weak self] _ in
+ self?.continueChat(from: message)
+ })
+ alert.addAction(UIAlertAction(title: "Close", style: .cancel))
+ present(alert, animated: true)
+ }
+
+ private func continueChat(from message: BaseMessage) {
+ let messagesVC = CometChatMessages()
+ messagesVC.user = user
+ navigationController?.pushViewController(messagesVC, animated: true)
+ }
+
+ private func showError(_ message: String) {
+ let alert = UIAlertController(
+ title: "Error",
+ message: message,
+ preferredStyle: .alert
+ )
+ alert.addAction(UIAlertAction(title: "Retry", style: .default) { [weak self] _ in
+ self?.setupChatHistory()
+ })
+ alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+ present(alert, animated: true)
+ }
+}
```
-
-
-***
+---
-##### onEmpty
+## Custom Views
-The `onEmpty` callback is triggered when no messages are available.
-You can use this to show placeholder content, such as an empty state message or an illustration.
+### Custom Loading View
-
+
```swift
let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.user = user // A User or Group object is required to launch this component.
+chatHistory.user = user
-chatHistory.set(onEmpty: {
- // Handle empty state
-})
-```
+// Custom loading indicator
+let loadingView = UIActivityIndicatorView(style: .large)
+loadingView.color = .systemBlue
+loadingView.startAnimating()
+chatHistory.set(loadingView: loadingView)
+```
-
-***
-
-### Filters
-
-You can customize the message list displayed in the `CometChatAIAssistanceChatHistory` component by modifying the `MessagesRequestBuilder`.
-This allows you to filter messages according to your app’s needs — for example, fetching messages that match a search term or belong to a specific user or group.
-
-In the example below, we are applying a filter to the messages based on a search substring and for a specific user. This means that only messages that contain the search term and are associated with the specified user will be displayed
+### Custom Empty State View
-
+
```swift
-swift let builder = MessagesRequest.MessageRequestBuilder()
- .set(uid: user.uid) // Example: filter messages by user UID
+import UIKit
+import CometChatUIKitSwift
+
+class CustomEmptyView: UIView {
+
+ private let imageView: UIImageView = {
+ let iv = UIImageView()
+ iv.image = UIImage(systemName: "sparkles")
+ iv.tintColor = .systemBlue
+ iv.contentMode = .scaleAspectFit
+ iv.translatesAutoresizingMaskIntoConstraints = false
+ return iv
+ }()
+
+ private let titleLabel: UILabel = {
+ let label = UILabel()
+ label.text = "No AI Conversations"
+ label.font = .systemFont(ofSize: 20, weight: .bold)
+ label.textAlignment = .center
+ label.translatesAutoresizingMaskIntoConstraints = false
+ return label
+ }()
+
+ private let subtitleLabel: UILabel = {
+ let label = UILabel()
+ label.text = "Start a conversation with AI to see it here"
+ label.font = .systemFont(ofSize: 16)
+ label.textColor = .secondaryLabel
+ label.textAlignment = .center
+ label.numberOfLines = 0
+ label.translatesAutoresizingMaskIntoConstraints = false
+ return label
+ }()
+
+ let startChatButton: UIButton = {
+ let button = UIButton(type: .system)
+ button.setTitle("Start New Chat", for: .normal)
+ button.titleLabel?.font = .systemFont(ofSize: 16, weight: .semibold)
+ button.backgroundColor = .systemBlue
+ button.setTitleColor(.white, for: .normal)
+ button.layer.cornerRadius = 12
+ button.translatesAutoresizingMaskIntoConstraints = false
+ return button
+ }()
+
+ override init(frame: CGRect) {
+ super.init(frame: frame)
+ setupUI()
+ }
+
+ required init?(coder: NSCoder) {
+ fatalError("init(coder:) has not been implemented")
+ }
+
+ private func setupUI() {
+ addSubview(imageView)
+ addSubview(titleLabel)
+ addSubview(subtitleLabel)
+ addSubview(startChatButton)
+
+ NSLayoutConstraint.activate([
+ imageView.centerXAnchor.constraint(equalTo: centerXAnchor),
+ imageView.centerYAnchor.constraint(equalTo: centerYAnchor, constant: -80),
+ imageView.widthAnchor.constraint(equalToConstant: 80),
+ imageView.heightAnchor.constraint(equalToConstant: 80),
+
+ titleLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 24),
+ titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 32),
+ titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -32),
+
+ subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8),
+ subtitleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 32),
+ subtitleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -32),
+
+ startChatButton.topAnchor.constraint(equalTo: subtitleLabel.bottomAnchor, constant: 24),
+ startChatButton.centerXAnchor.constraint(equalTo: centerXAnchor),
+ startChatButton.widthAnchor.constraint(equalToConstant: 180),
+ startChatButton.heightAnchor.constraint(equalToConstant: 48)
+ ])
+ }
+}
+// Usage
let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.user = user // A User or Group object is required to launch this component.
-chatHistory.set(messagesRequestBuilder: builder)
-```
-
-
-
-
-
-
-
-The following parameters in `messagesRequestBuilder` will always be modified internally by the component:
-
-1. `uid`
-2. `guid`
-3. `types`
-4. `categories`
-
-
-
-***
-
-### Events
-
-[Events](/ui-kit/flutter/components-overview#events) are emitted by a `Component`.
-
-By using events, you can extend existing functionality. Since events are global in nature, they can be added or removed from multiple locations within the app.
-The CometChatAIAssistanceChatHistory component does not emit any events of its own.
-
-***
+chatHistory.user = user
-## Customization
+let emptyView = CustomEmptyView()
+emptyView.startChatButton.addTarget(self, action: #selector(startNewChat), for: .touchUpInside)
-To meet your app’s design and UX requirements, you can customize the appearance and functionality of the `CometChatAIAssistanceChatHistory` component.
-We provide multiple exposed properties and methods that allow you to modify both the visual style and interactive behavior according to your needs.
-
-### Style
-
-The style property allows you to customize the look and feel of the component in your app.
-These parameters control key design aspects such as colors, fonts, text styles, and background appearance for various subviews like headers, date separators, and message items
-
-##### 1. AiAssistantChatHistoryStyle
-
-You can assign a custom `AiAssistantChatHistoryStyle` to the component to override the default visual theme.
-
-**Global level styling**
-
-
-
-```swift
-CometChatAIAssistanceChatHistory.style.backgroundColor =
-CometChatAIAssistanceChatHistory.style.itemTextFont =
-CometChatAIAssistanceChatHistory.style.newChatTitleFont =
+chatHistory.set(emptyView: emptyView)
```
-
-
-**Instance level styling**
+### Custom Error State View
```swift
-let aiAssistantChatHistoryStyle = AiAssistantChatHistoryStyle()
-aiAssistantChatHistoryStyle.backgroundColor =
-aiAssistantChatHistoryStyle.itemTextFont =
-aiAssistantChatHistoryStyle.newChatTitleFont =
-
-let aIAssistanceChatHistory = CometChatAIAssistanceChatHistory()
-aIAssistanceChatHistory.style = aiAssistantChatHistoryStyle
-```
-
-
-
-
-
-
- 
-
-
-***
+import UIKit
+import CometChatUIKitSwift
+
+class CustomErrorView: UIView {
+
+ private let iconView: UIImageView = {
+ let iv = UIImageView()
+ iv.image = UIImage(systemName: "exclamationmark.triangle")
+ iv.tintColor = .systemRed
+ iv.contentMode = .scaleAspectFit
+ iv.translatesAutoresizingMaskIntoConstraints = false
+ return iv
+ }()
+
+ private let titleLabel: UILabel = {
+ let label = UILabel()
+ label.text = "Something went wrong"
+ label.font = .systemFont(ofSize: 18, weight: .semibold)
+ label.textAlignment = .center
+ label.translatesAutoresizingMaskIntoConstraints = false
+ return label
+ }()
+
+ private let messageLabel: UILabel = {
+ let label = UILabel()
+ label.text = "We couldn't load your AI chat history.\nPlease check your connection."
+ label.font = .systemFont(ofSize: 14)
+ label.textColor = .secondaryLabel
+ label.textAlignment = .center
+ label.numberOfLines = 0
+ label.translatesAutoresizingMaskIntoConstraints = false
+ return label
+ }()
+
+ let retryButton: UIButton = {
+ let button = UIButton(type: .system)
+ button.setTitle("Try Again", for: .normal)
+ button.titleLabel?.font = .systemFont(ofSize: 16, weight: .medium)
+ button.backgroundColor = .systemBlue
+ button.setTitleColor(.white, for: .normal)
+ button.layer.cornerRadius = 10
+ button.translatesAutoresizingMaskIntoConstraints = false
+ return button
+ }()
+
+ override init(frame: CGRect) {
+ super.init(frame: frame)
+ setupUI()
+ }
+
+ required init?(coder: NSCoder) {
+ fatalError("init(coder:) has not been implemented")
+ }
+
+ private func setupUI() {
+ addSubview(iconView)
+ addSubview(titleLabel)
+ addSubview(messageLabel)
+ addSubview(retryButton)
+
+ NSLayoutConstraint.activate([
+ iconView.centerXAnchor.constraint(equalTo: centerXAnchor),
+ iconView.centerYAnchor.constraint(equalTo: centerYAnchor, constant: -60),
+ iconView.widthAnchor.constraint(equalToConstant: 60),
+ iconView.heightAnchor.constraint(equalToConstant: 60),
+
+ titleLabel.topAnchor.constraint(equalTo: iconView.bottomAnchor, constant: 16),
+ titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 24),
+ titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -24),
+
+ messageLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8),
+ messageLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 24),
+ messageLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -24),
+
+ retryButton.topAnchor.constraint(equalTo: messageLabel.bottomAnchor, constant: 20),
+ retryButton.centerXAnchor.constraint(equalTo: centerXAnchor),
+ retryButton.widthAnchor.constraint(equalToConstant: 140),
+ retryButton.heightAnchor.constraint(equalToConstant: 44)
+ ])
+ }
+}
-### Functionality
+// Usage
+let chatHistory = CometChatAIAssistanceChatHistory()
+chatHistory.user = user
-These functional customizations allow you to fine-tune the overall behavior and user experience of the component.
-With these options, you can modify text, customize icons, and toggle visibility for specific UI elements within the `CometChatAIAssistanceChatHistory` component.
+let errorView = CustomErrorView()
+errorView.retryButton.addTarget(self, action: #selector(retryLoading), for: .touchUpInside)
-
-
-```swift
-swift let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.user = user // A User or Group object is required to launch this component.
-
-// Example: Adding a custom back button
-let backButton = UIButton(type: .system)
-backButton.setImage(UIImage(systemName: "snowflake"), for: .normal)
-backButton.tintColor = .systemRed
-backButton.addTarget(self, action: #selector(didTapBackButton), for: .touchUpInside)
-chatHistory.backButton = backButton
+chatHistory.set(errorView: errorView)
```
-
-
-## CometChatMessageList Properties
-
-Below is a list of customizations along with corresponding code snippets:
-
-| **Property** | **Description** | **Code** |
-| -------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| **User** | Used to set the user for displaying their AI chat history. | `CometChatAIAssistantChatHistory.set(user: user)` |
-| **Group** | Used to set the group for displaying its AI chat history. | `CometChatAIAssistantChatHistory.set(group: group)` |
-| **Messages Request Builder** | Used to pass a custom message request builder to fetch AI chat history. | `CometChatAIAssistantChatHistory.set(messagesRequestBuilder: customBuilder)` |
-| **Loading State View** | Used to set a custom loading view when fetching AI chat history. | `CometChatAIAssistantChatHistory.set(loadingStateView: customLoadingView)` |
-| **Empty State View** | Used to set a custom view when no messages are available. | `CometChatAIAssistantChatHistory.set(emptyStateView: customEmptyView)` |
-| **Error State View** | Used to set a custom error view when message fetching fails. | `CometChatAIAssistantChatHistory.set(errorStateView: customErrorView)` |
-| **On Message Clicked** | Used to handle actions when a message is clicked. | `CometChatAIAssistantChatHistory.set(onMessageClicked: { message in })` |
-| **On Error** | Used to handle actions when an error occurs while fetching data. | `CometChatAIAssistantChatHistory.set(onError: { })` |
-| **On Load** | Used to handle actions when chat history is successfully loaded. | `CometChatAIAssistantChatHistory.set(onLoad: { })` |
-| **On Empty** | Used to handle actions when chat history is empty. | `CometChatAIAssistantChatHistory.set(onEmpty: { })` |
-| **On New Chat Button Clicked** | Used to handle actions when the “New Chat” button is clicked. | `CometChatAIAssistantChatHistory.set(onNewChatButtonClicked: { user in })` |
-| **On Close** | Used to handle actions when the back button is pressed. | `CometChatAIAssistantChatHistory.set(onClose: { })` |
-| **Empty State Text** | Used to set the text when the chat history list is empty. | `CometChatAIAssistantChatHistory.emptyStateText = "No conversations yet"` |
-| **Empty State Subtitle Text** | Used to set a subtitle when the chat history list is empty. | `CometChatAIAssistantChatHistory.emptyStateSubtitleText = "Start a new chat to begin"` |
-| **Error State Text** | Used to set the text when an error occurs. | `CometChatAIAssistantChatHistory.errorStateText = "Failed to load history"` |
-| **Error State Subtitle Text** | Used to set a subtitle when an error occurs. | `CometChatAIAssistantChatHistory.errorStateSubtitleText = "Please try again later"` |
-| **Hide Date Separator** | Used to hide or show the date separator in the chat history list. | `CometChatAIAssistantChatHistory.hideDateSeparator = true` |
-***
-
-### Advance
-
-For advanced-level customization, you can inject custom views or functions into the component.
-This allows you to tailor the `CometChatAIAssistanceChatHistory` experience to align perfectly with your app’s interface and logic.
-
-#### dateSeparatorPattern
-
-You can modify the format of the date separator displayed between messages using the `dateSeparatorPattern` property.
-This closure accepts a `Date` object and returns a formatted `String`.
+---
-**Example**
+## Filter Messages
-Here is the complete example for reference:
+Customize which messages are displayed:
-
+
```swift
-let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.user = user // A User or Group object is required to launch this component.
-chatHistory.dateTimeFormatter.time = { timestamp in
- return "at " + DateFormatter.localizedString(from: Date(timeIntervalSince1970: TimeInterval(timestamp)), dateStyle: .none, timeStyle: .short)
-}
-chatHistory.dateTimeFormatter.today = { timestamp in
- return "Today • \(formattedTime(from: timestamp))"
-}
+import CometChatSDK
+import CometChatUIKitSwift
-// for global level
-CometChatAIAssistanceChatHistory.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)))
-}
-```
+let chatHistory = CometChatAIAssistanceChatHistory()
+chatHistory.user = user
-
+// Create custom message request builder
+let builder = MessagesRequest.MessageRequestBuilder()
+ .set(uid: user.uid ?? "")
+ .set(limit: 50)
+chatHistory.set(messagesRequestBuilder: builder)
+```
+
-***
-
-#### loadingStateView
+
+These parameters are **always overridden** by the component:
+- `uid` / `guid`
+- `types`
+- `categories`
+
-Customize the loading view displayed when messages are being fetched.
-Use this property to show a spinner, skeleton loader, or a custom loading message for better UX.
+---
-Use Cases:
+## Embed in Your App
-* Show a spinner or skeleton loader for smooth UX.
-* Display a "Fetching history..." text.
+### As a Tab
-
+
```swift
-let loadingView = UIActivityIndicatorView(style: .large)
-loadingView.startAnimating()
-
-let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.set(loadingView: loadingView)
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class MainTabBarController: UITabBarController {
+
+ var currentUser: CometChat.User!
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ fetchUserAndSetupTabs()
+ }
+
+ private func fetchUserAndSetupTabs() {
+ // Get current logged in user
+ guard let user = CometChat.getLoggedInUser() else { return }
+ currentUser = user
+ setupTabs()
+ }
+
+ private func setupTabs() {
+ // Chats Tab
+ let chatsVC = CometChatConversationsWithMessages()
+ let chatsNav = UINavigationController(rootViewController: chatsVC)
+ chatsNav.tabBarItem = UITabBarItem(
+ title: "Chats",
+ image: UIImage(systemName: "message"),
+ selectedImage: UIImage(systemName: "message.fill")
+ )
+
+ // AI Assistant Tab
+ let aiVC = CometChatAIAssistanceChatHistory()
+ aiVC.user = currentUser
+ aiVC.onNewChatButtonClicked = { [weak self] in
+ self?.startNewAIChat()
+ }
+ let aiNav = UINavigationController(rootViewController: aiVC)
+ aiNav.tabBarItem = UITabBarItem(
+ title: "AI Assistant",
+ image: UIImage(systemName: "sparkles"),
+ selectedImage: UIImage(systemName: "sparkles")
+ )
+
+ // Users Tab
+ let usersVC = CometChatUsersWithMessages()
+ let usersNav = UINavigationController(rootViewController: usersVC)
+ usersNav.tabBarItem = UITabBarItem(
+ title: "Users",
+ image: UIImage(systemName: "person.2"),
+ selectedImage: UIImage(systemName: "person.2.fill")
+ )
+
+ viewControllers = [chatsNav, aiNav, usersNav]
+ }
+
+ private func startNewAIChat() {
+ let messagesVC = CometChatMessages()
+ messagesVC.user = currentUser
+
+ if let nav = selectedViewController as? UINavigationController {
+ nav.pushViewController(messagesVC, animated: true)
+ }
+ }
+}
```
-
-
-***
-
-#### emptyStateView
-
-Customize the view displayed when there are no messages in the chat history.
-This is typically used to show a friendly placeholder or an illustration..
-
-Use Cases:
-
-* Display “No chat history yet” text.
-* Add a button prompting users to start a new chat.
+### As a Button Action
-
+
```swift
-let emptyView = UILabel()
-emptyView.text = "No chat history yet."
-emptyView.textAlignment = .center
-emptyView.textColor = .gray
-
-let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.set(emptyView: emptyView)
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ProfileViewController: UIViewController {
+
+ var user: CometChat.User!
+
+ private let aiHistoryButton: UIButton = {
+ let button = UIButton(type: .system)
+ button.setTitle("View AI Chat History", for: .normal)
+ button.setImage(UIImage(systemName: "sparkles"), for: .normal)
+ button.backgroundColor = .systemBlue
+ button.tintColor = .white
+ button.layer.cornerRadius = 12
+ button.translatesAutoresizingMaskIntoConstraints = false
+ return button
+ }()
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupUI()
+ }
+
+ private func setupUI() {
+ view.backgroundColor = .systemBackground
+ view.addSubview(aiHistoryButton)
+
+ NSLayoutConstraint.activate([
+ aiHistoryButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+ aiHistoryButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
+ aiHistoryButton.widthAnchor.constraint(equalToConstant: 250),
+ aiHistoryButton.heightAnchor.constraint(equalToConstant: 50)
+ ])
+
+ aiHistoryButton.addTarget(self, action: #selector(showAIHistory), for: .touchUpInside)
+ }
+
+ @objc private func showAIHistory() {
+ let chatHistory = CometChatAIAssistanceChatHistory()
+ chatHistory.user = user
+
+ chatHistory.onNewChatButtonClicked = { [weak self] in
+ let messagesVC = CometChatMessages()
+ messagesVC.user = self?.user
+ self?.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+
+ navigationController?.pushViewController(chatHistory, animated: true)
+ }
+}
```
-
-
-***
-
-#### errorStateView
-
-You can define a custom view to display when an error occurs during message loading.
-This could include a retry button or a helpful error message for better recovery..
+---
-Use Cases:
+## API Reference
+
+### Properties
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `user` | `CometChat.User` | Yes* | User for AI chat history |
+| `group` | `CometChat.Group` | Yes* | Group for AI chat history |
+| `style` | `AiAssistantChatHistoryStyle` | No | Custom styling |
+| `emptyStateText` | `String` | No | Empty state title |
+| `emptyStateSubtitleText` | `String` | No | Empty state subtitle |
+| `errorStateText` | `String` | No | Error state title |
+| `errorStateSubtitleText` | `String` | No | Error state subtitle |
+| `hideDateSeparator` | `Bool` | No | Hide date separators |
+| `backButton` | `UIButton` | No | Custom back button |
+
+*Either `user` or `group` is required
+
+### Callbacks
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `onNewChatButtonClicked` | `() -> Void` | New chat button tapped |
+| `onMessageClicked` | `(BaseMessage) -> Void` | Message tapped |
+| `set(onLoad:)` | `([BaseMessage]) -> Void` | Data loaded |
+| `set(onEmpty:)` | `() -> Void` | No data |
+| `set(onError:)` | `(Error) -> Void` | Error occurred |
+
+### Custom Views
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `set(loadingView:)` | `UIView` | Custom loading view |
+| `set(emptyView:)` | `UIView` | Custom empty state |
+| `set(errorView:)` | `UIView` | Custom error state |
+| `set(messagesRequestBuilder:)` | `MessagesRequestBuilder` | Filter messages |
+
+### Style Properties (AiAssistantChatHistoryStyle)
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `backgroundColor` | `UIColor` | Background color |
+| `itemTextFont` | `UIFont` | Message text font |
+| `itemTextColor` | `UIColor` | Message text color |
+| `newChatTitleFont` | `UIFont` | New chat button font |
+| `newChatTitleColor` | `UIColor` | New chat button color |
-* Show a retry option on network failure.
-* Display “Unable to load messages. Check your connection.".
+---
-
-
-```swift
-let errorView = UIView()
-let errorLabel = UILabel()
-errorLabel.text = "Couldn't load history. Check your connection."
-errorLabel.textAlignment = .center
-errorLabel.textColor = .systemRed
-errorView.addSubview(errorLabel)
-errorLabel.translatesAutoresizingMaskIntoConstraints = false
-NSLayoutConstraint.activate([
-errorLabel.centerXAnchor.constraint(equalTo: errorView.centerXAnchor),
-errorLabel.centerYAnchor.constraint(equalTo: errorView.centerYAnchor)
-])
+## Troubleshooting
-let chatHistory = CometChatAIAssistanceChatHistory()
-chatHistory.set(errorView: errorView)
-```
+| Problem | Solution |
+|---------|----------|
+| Only loading indicator shows | Set `user` or `group` property |
+| No messages displayed | Enable AI features in CometChat Dashboard |
+| Styling not applied | Apply style before presenting view |
+| Callbacks not firing | Set callbacks before pushing to navigation |
+| Empty state not showing | Check `set(onEmpty:)` callback |
-
+---
-
+## Related
-***
\ No newline at end of file
+- [AI Features Overview](/ui-kit/ios/ai-features) - All AI features
+- [Message List](/ui-kit/ios/message-list) - Chat message display
+- [Message Composer](/ui-kit/ios/message-composer) - Message input
+- [Components Overview](/ui-kit/ios/components-overview) - All components
diff --git a/ui-kit/ios/ai-features.mdx b/ui-kit/ios/ai-features.mdx
index 90f86183..38031c90 100644
--- a/ui-kit/ios/ai-features.mdx
+++ b/ui-kit/ios/ai-features.mdx
@@ -1,47 +1,507 @@
---
-title: "AI"
+title: "AI Features"
+sidebarTitle: "AI"
+description: "Complete guide to AI-powered chat features in iOS apps - conversation starters, smart replies, and summaries"
---
## Overview
-CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the iOS UI Kit achieves these features.
+CometChat AI features enhance your chat experience with intelligent suggestions and summaries. Once enabled in your dashboard, they integrate automatically into the UI Kit components.
-## Conversation Starters
+| Feature | What It Does | Where It Appears |
+|---------|--------------|------------------|
+| Conversation Starters | Suggests opening messages for new chats | `CometChatMessageList` |
+| Smart Replies | Suggests responses based on context | `CometChatMessageComposer` |
+| Conversation Summary | Summarizes long conversations | `CometChatMessageComposer` |
+| AI Assistant | Chat with AI bot | `CometChatAIAssistanceChatHistory` |
+
+---
+
+## Enable AI Features
+
+
+
+Go to [app.cometchat.com](https://app.cometchat.com) and select your app.
+
+
+
+Click **AI** in the sidebar, then enable the features you want:
+- ✅ Conversation Starter
+- ✅ Smart Replies
+- ✅ Conversation Summary
+
+
+
+Customize AI behavior, response style, and triggers in the dashboard settings.
+
+
+
+**That's it!** AI features now work automatically in your app.
-When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starters.
+---
-For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
+## Conversation Starters
-Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/ios/message-list) Component of UI Kits.
+When a user opens a new chat with no message history, AI suggests conversation openers.
-## Smart Replies
+### How It Works
+
+1. User opens chat with someone they haven't messaged before
+2. AI analyzes user profiles and context
+3. Suggested messages appear in the message list
+4. User taps a suggestion to send it
-Smart Replies are AI-generated responses to messages. They can predict what a user might want to say next by analyzing the context of the conversation. This allows for quicker and more convenient responses, especially on mobile devices.
+### Implementation
-For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies).
+Conversation starters appear automatically in `CometChatMessages`:
-Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/ios/message-composer) Component of UI Kits.
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ChatViewController: UIViewController {
+
+ func openChatWithUser(uid: String) {
+ CometChat.getUser(UID: uid) { [weak self] user in
+ DispatchQueue.main.async {
+ let messagesVC = CometChatMessages()
+ messagesVC.user = user
+
+ // Conversation starters appear automatically
+ // if enabled in dashboard and no previous messages exist
+
+ self?.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+
+
+---
+
+## Smart Replies
+
+AI suggests contextual responses based on the conversation.
-## Conversation Summary
+### How It Works
+
+1. User receives a message
+2. AI analyzes the message and conversation context
+3. Smart reply suggestions appear in the composer action sheet
+4. User taps a suggestion to insert it
-The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation.
+### Implementation
-For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).
+Smart replies appear automatically in `CometChatMessageComposer`:
-Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/ios/message-composer) Component of UI Kits.
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ChatViewController: UIViewController {
+
+ func openChat(with user: CometChat.User) {
+ let messagesVC = CometChatMessages()
+ messagesVC.user = user
+
+ // Smart replies appear automatically in the composer
+ // when enabled in dashboard
+
+ navigationController?.pushViewController(messagesVC, animated: true)
+ }
+}
+```
+
+
+
+---
+
+## Conversation Summary
+
+AI generates summaries of long conversations so users can catch up quickly.
+
+### How It Works
+
+1. User opens a conversation with many messages
+2. User taps the summary option in composer action sheet
+3. AI processes the conversation
+4. Summary of key points is displayed
+
+### Implementation
+
+Conversation summary is available automatically:
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ChatViewController: UIViewController {
+
+ func openChat(with user: CometChat.User) {
+ let messagesVC = CometChatMessages()
+ messagesVC.user = user
+
+ // Conversation summary option appears in composer action sheet
+ // when enabled in dashboard and sufficient messages exist
+
+ navigationController?.pushViewController(messagesVC, animated: true)
+ }
+}
+```
+
+
+
+---
+
+## AI Assistant Chat History
+
+View and continue conversations with AI assistants.
+
+### Basic Implementation
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class AIAssistantViewController: UIViewController {
+
+ var user: CometChat.User!
+
+ func showAIChatHistory() {
+ let chatHistory = CometChatAIAssistanceChatHistory()
+ chatHistory.user = user // Required
+
+ navigationController?.pushViewController(chatHistory, animated: true)
+ }
+}
+```
+
+
+
+### Full Implementation with Callbacks
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class AIAssistantViewController: UIViewController {
+
+ var user: CometChat.User!
+
+ func showAIChatHistory() {
+ let chatHistory = CometChatAIAssistanceChatHistory()
+ chatHistory.user = user
+
+ // Handle new chat button
+ chatHistory.onNewChatButtonClicked = { [weak self] in
+ self?.startNewAIChat()
+ }
+
+ // Handle message tap
+ chatHistory.onMessageClicked = { message in
+ print("Tapped message: \(message.text ?? "")")
+ }
+
+ // Handle load success
+ chatHistory.set(onLoad: { messages in
+ print("Loaded \(messages.count) AI messages")
+ })
+
+ // Handle empty state
+ chatHistory.set(onEmpty: {
+ print("No AI chat history")
+ })
+
+ // Handle errors
+ chatHistory.set(onError: { [weak self] error in
+ self?.showError(error.localizedDescription)
+ })
+
+ navigationController?.pushViewController(chatHistory, animated: true)
+ }
+
+ private func startNewAIChat() {
+ // Navigate to new AI chat
+ print("Starting new AI conversation")
+ }
+
+ private func showError(_ message: String) {
+ let alert = UIAlertController(title: "Error", message: message, preferredStyle: .alert)
+ alert.addAction(UIAlertAction(title: "OK", style: .default))
+ present(alert, animated: true)
+ }
+}
+```
+
+
+
+### Customize AI Chat History Styling
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+
+class AIAssistantViewController: UIViewController {
+
+ var user: CometChat.User!
+
+ func showStyledAIChatHistory() {
+ let chatHistory = CometChatAIAssistanceChatHistory()
+ chatHistory.user = user
+
+ // Custom styling
+ let style = AiAssistantChatHistoryStyle()
+ style.backgroundColor = .systemBackground
+ style.itemTextFont = UIFont.systemFont(ofSize: 16, weight: .medium)
+ style.itemTextColor = .label
+ style.newChatTitleFont = UIFont.systemFont(ofSize: 18, weight: .bold)
+ style.newChatTitleColor = .systemBlue
+ chatHistory.style = style
+
+ // Custom empty state
+ chatHistory.emptyStateText = "No AI conversations yet"
+ chatHistory.emptyStateSubtitleText = "Tap 'New Chat' to start"
+
+ // Custom date formatting
+ chatHistory.dateTimeFormatter.today = { timestamp in
+ let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
+ let formatter = DateFormatter()
+ formatter.timeStyle = .short
+ return "Today at \(formatter.string(from: date))"
+ }
+
+ navigationController?.pushViewController(chatHistory, animated: true)
+ }
+}
+```
+
+
+
+---
+
+## Complete App with AI Features
+
+Full implementation showing all AI features:
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+// MARK: - Scene Delegate
+class SceneDelegate: UIResponder, UIWindowSceneDelegate {
+
+ var window: UIWindow?
+
+ func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
+ guard let windowScene = (scene as? UIWindowScene) else { return }
+
+ let uikitSettings = UIKitSettings()
+ .set(appID: "YOUR_APP_ID")
+ .set(authKey: "YOUR_AUTH_KEY")
+ .set(region: "YOUR_REGION")
+ .subscribePresenceForAllUsers()
+ .build()
+
+ CometChatUIKit.init(uiKitSettings: uikitSettings) { [weak self] result in
+ switch result {
+ case .success:
+ CometChatUIKit.login(uid: "cometchat-uid-1") { loginResult in
+ switch loginResult {
+ case .success:
+ DispatchQueue.main.async {
+ self?.setupUI(windowScene: windowScene)
+ }
+ case .onError(let error):
+ print("Login failed: \(error.description)")
+ @unknown default:
+ break
+ }
+ }
+ case .failure(let error):
+ print("Init failed: \(error.localizedDescription)")
+ }
+ }
+ }
+
+ private func setupUI(windowScene: UIWindowScene) {
+ let tabBar = AIEnabledTabBarController()
+ window = UIWindow(windowScene: windowScene)
+ window?.rootViewController = tabBar
+ window?.makeKeyAndVisible()
+ }
+}
+
+// MARK: - Tab Bar Controller
+class AIEnabledTabBarController: UITabBarController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupTabs()
+ }
+
+ private func setupTabs() {
+ // Chats - AI features (starters, smart replies, summary) work automatically
+ let chatsVC = CometChatConversationsWithMessages()
+ let chatsNav = UINavigationController(rootViewController: chatsVC)
+ chatsNav.tabBarItem = UITabBarItem(
+ title: "Chats",
+ image: UIImage(systemName: "message"),
+ selectedImage: UIImage(systemName: "message.fill")
+ )
+
+ // AI Assistant
+ let aiVC = AIAssistantListViewController()
+ let aiNav = UINavigationController(rootViewController: aiVC)
+ aiNav.tabBarItem = UITabBarItem(
+ title: "AI Assistant",
+ image: UIImage(systemName: "sparkles"),
+ selectedImage: UIImage(systemName: "sparkles")
+ )
+
+ // Users
+ let usersVC = CometChatUsersWithMessages()
+ let usersNav = UINavigationController(rootViewController: usersVC)
+ usersNav.tabBarItem = UITabBarItem(
+ title: "Users",
+ image: UIImage(systemName: "person.2"),
+ selectedImage: UIImage(systemName: "person.2.fill")
+ )
+
+ viewControllers = [chatsNav, aiNav, usersNav]
+ }
+}
+
+// MARK: - AI Assistant List
+class AIAssistantListViewController: UIViewController {
+
+ private let tableView = UITableView()
+ private var users: [CometChat.User] = []
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ title = "AI Assistant"
+ setupTableView()
+ fetchUsers()
+ }
+
+ private func setupTableView() {
+ view.addSubview(tableView)
+ tableView.frame = view.bounds
+ tableView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+ tableView.delegate = self
+ tableView.dataSource = self
+ tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
+ }
+
+ private func fetchUsers() {
+ let request = UsersRequest.UsersRequestBuilder()
+ .set(limit: 30)
+ .build()
+
+ request.fetchNext { [weak self] users in
+ self?.users = users
+ DispatchQueue.main.async {
+ self?.tableView.reloadData()
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+
+extension AIAssistantListViewController: UITableViewDelegate, UITableViewDataSource {
+
+ func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+ return users.count
+ }
+
+ func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+ let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
+ let user = users[indexPath.row]
+ cell.textLabel?.text = user.name
+ cell.accessoryType = .disclosureIndicator
+ return cell
+ }
+
+ func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+ tableView.deselectRow(at: indexPath, animated: true)
+
+ let user = users[indexPath.row]
+ let chatHistory = CometChatAIAssistanceChatHistory()
+ chatHistory.user = user
+
+ chatHistory.onNewChatButtonClicked = { [weak self] in
+ // Start new AI chat
+ let messagesVC = CometChatMessages()
+ messagesVC.user = user
+ self?.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+
+ navigationController?.pushViewController(chatHistory, animated: true)
+ }
+}
+```
+
+
+
+---
+
+## Troubleshooting
+
+| Problem | Solution |
+|---------|----------|
+| AI features not appearing | Enable them in CometChat Dashboard → AI |
+| Conversation starters not showing | Only appear for new conversations with no messages |
+| Smart replies not appearing | Ensure feature is enabled and messages exist |
+| Summary not generating | Need sufficient messages in conversation |
+| AI Assistant empty | Verify user has AI chat history |
+
+---
+
+## Related
+
+- [AI Assistant Chat History](/ui-kit/ios/ai-assistant-chat-history) - Full component documentation
+- [Message List](/ui-kit/ios/message-list) - Where conversation starters appear
+- [Message Composer](/ui-kit/ios/message-composer) - Where smart replies appear
+- [Conversation Starter Guide](/fundamentals/ai-user-copilot/conversation-starter) - Platform configuration
+- [Smart Replies Guide](/fundamentals/ai-user-copilot/smart-replies) - Platform configuration
diff --git a/ui-kit/ios/call-features.mdx b/ui-kit/ios/call-features.mdx
index c22dfa28..cbfca1a1 100644
--- a/ui-kit/ios/call-features.mdx
+++ b/ui-kit/ios/call-features.mdx
@@ -1,39 +1,26 @@
---
-title: "Call"
+title: "Calling Features"
+sidebarTitle: "Call"
+description: "Complete guide to adding voice and video calling to iOS apps with CometChat UI Kit - production-ready code included"
---
## Overview
-CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the iOS UI Kit.
+Add one-on-one and group audio/video calling to your iOS app. Once integrated, call buttons automatically appear in chat headers, and incoming/outgoing call screens are handled for you.
-## Integration
-
-First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/ios/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your iOS project.
-
-Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here's how you do it:
-
-**1. CocoaPods**
-
-We recommend using CocoaPods, as they are the most advanced way of managing iOS project dependencies. Open a terminal window, move to your project directory, and then create a Podfile by running the following command.
-
-
-
-1. You can install CometChatCallsSDK for iOS through Swift Package Manager or Cocoapods
-
-2. CometChatCallsSDK supports iOS 13 and aboveSwift 5.0+
-
-3. CometChatCallsSDK supports Swift 5.0+
-
-
+
+ 
+
-```ruby Swift
-$ pod init
-```
+---
-Add the following lines to the Podfile.
+## Quick Setup
-```ruby Swift
-platform :ios, '11.0'
+
+
+Add to your `Podfile`:
+```ruby
+platform :ios, '13.0'
use_frameworks!
target 'YourApp' do
@@ -42,86 +29,592 @@ target 'YourApp' do
end
```
-And then install the CometChatCallsSDK framework through CocoaPods.
+Run:
+```bash
+pod install
+```
+
+
+
+Add to `Info.plist`:
+```xml
+NSCameraUsageDescription
+Camera access required for video calls
-```ruby Swift
-$ pod install
+NSMicrophoneUsageDescription
+Microphone access required for voice and video calls
+```
+
+
+
+In `SceneDelegate.swift`:
+```swift
+import CometChatUIKitSwift
+
+func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
+ guard let windowScene = (scene as? UIWindowScene) else { return }
+
+ let uikitSettings = UIKitSettings()
+ .set(appID: "YOUR_APP_ID")
+ .set(authKey: "YOUR_AUTH_KEY")
+ .set(region: "YOUR_REGION") // "us", "eu", or "in"
+ .build()
+
+ CometChatUIKit.init(uiKitSettings: uikitSettings) { result in
+ switch result {
+ case .success:
+ CometChatUIKit.login(uid: "cometchat-uid-1") { loginResult in
+ switch loginResult {
+ case .success:
+ // Calling is now enabled automatically
+ print("✅ Ready for calls")
+ case .onError(let error):
+ print("❌ Login failed: \(error.description)")
+ @unknown default:
+ break
+ }
+ }
+ case .failure(let error):
+ print("❌ Init failed: \(error.localizedDescription)")
+ }
+ }
+}
```
+
+
+
+**That's it!** Call buttons now appear in `CometChatMessages` header automatically.
-If you're facing any issues while installing pods then use the below command.
+---
-```ruby Swift
-$ pod install --repo-update
+## Production-Ready Implementation
+
+Complete app with calling, chat, and call history:
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class SceneDelegate: UIResponder, UIWindowSceneDelegate {
+
+ var window: UIWindow?
+
+ func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
+ guard let windowScene = (scene as? UIWindowScene) else { return }
+
+ // Initialize CometChat
+ let uikitSettings = UIKitSettings()
+ .set(appID: "YOUR_APP_ID")
+ .set(authKey: "YOUR_AUTH_KEY")
+ .set(region: "YOUR_REGION")
+ .subscribePresenceForAllUsers()
+ .build()
+
+ CometChatUIKit.init(uiKitSettings: uikitSettings) { [weak self] result in
+ switch result {
+ case .success:
+ print("✅ CometChat initialized")
+ self?.loginAndSetupUI(windowScene: windowScene)
+
+ case .failure(let error):
+ print("❌ Init failed: \(error.localizedDescription)")
+ }
+ }
+ }
+
+ private func loginAndSetupUI(windowScene: UIWindowScene) {
+ CometChatUIKit.login(uid: "cometchat-uid-1") { [weak self] result in
+ switch result {
+ case .success:
+ print("✅ Logged in")
+ DispatchQueue.main.async {
+ self?.setupMainInterface(windowScene: windowScene)
+ }
+
+ case .onError(let error):
+ print("❌ Login failed: \(error.description)")
+
+ @unknown default:
+ break
+ }
+ }
+ }
+
+ private func setupMainInterface(windowScene: UIWindowScene) {
+ let tabBar = MainTabBarController()
+
+ window = UIWindow(windowScene: windowScene)
+ window?.rootViewController = tabBar
+ window?.makeKeyAndVisible()
+ }
+}
+```
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+
+class MainTabBarController: UITabBarController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupTabs()
+ setupAppearance()
+ }
+
+ private func setupTabs() {
+ // Chats Tab - with calling enabled
+ let chatsVC = CometChatConversationsWithMessages()
+ let chatsNav = UINavigationController(rootViewController: chatsVC)
+ chatsNav.tabBarItem = UITabBarItem(
+ title: "Chats",
+ image: UIImage(systemName: "message"),
+ selectedImage: UIImage(systemName: "message.fill")
+ )
+
+ // Calls Tab - call history
+ let callsVC = CometChatCallLogs()
+ callsVC.set(onItemClick: { [weak self] callLog, _ in
+ self?.handleCallLogTap(callLog)
+ })
+ let callsNav = UINavigationController(rootViewController: callsVC)
+ callsNav.tabBarItem = UITabBarItem(
+ title: "Calls",
+ image: UIImage(systemName: "phone"),
+ selectedImage: UIImage(systemName: "phone.fill")
+ )
+
+ // Users Tab
+ let usersVC = CometChatUsersWithMessages()
+ let usersNav = UINavigationController(rootViewController: usersVC)
+ usersNav.tabBarItem = UITabBarItem(
+ title: "Users",
+ image: UIImage(systemName: "person.2"),
+ selectedImage: UIImage(systemName: "person.2.fill")
+ )
+
+ // Groups Tab
+ let groupsVC = CometChatGroupsWithMessages()
+ let groupsNav = UINavigationController(rootViewController: groupsVC)
+ groupsNav.tabBarItem = UITabBarItem(
+ title: "Groups",
+ image: UIImage(systemName: "person.3"),
+ selectedImage: UIImage(systemName: "person.3.fill")
+ )
+
+ viewControllers = [chatsNav, callsNav, usersNav, groupsNav]
+ }
+
+ private func setupAppearance() {
+ tabBar.tintColor = .systemBlue
+ tabBar.backgroundColor = .systemBackground
+ }
+
+ private func handleCallLogTap(_ callLog: CallLog) {
+ // Get the other user from call log
+ let loggedInUser = CometChat.getLoggedInUser()
+ var otherUserUID: String?
+
+ if let initiator = callLog.initiator as? CallUser,
+ initiator.uid != loggedInUser?.uid {
+ otherUserUID = initiator.uid
+ } else if let receiver = callLog.receiver as? CallUser {
+ otherUserUID = receiver.uid
+ }
+
+ guard let uid = otherUserUID else { return }
+
+ // Fetch user and open chat
+ CometChat.getUser(UID: uid) { [weak self] user in
+ DispatchQueue.main.async {
+ let messagesVC = CometChatMessages()
+ messagesVC.user = user
+
+ if let nav = self?.selectedViewController as? UINavigationController {
+ nav.pushViewController(messagesVC, animated: true)
+ }
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
```
+
+
-Always get the latest version of CometChatCallsSDK by command.
+---
-```ruby Swift
-$ pod update CometChatCallsSDK
+## Initiate Calls Programmatically
+
+### Voice Call to User
+
+
+
+```swift
+import CometChatSDK
+
+func startVoiceCall(to userUID: String) {
+ let call = CometChat.Call(
+ receiverId: userUID,
+ callType: .audio,
+ receiverType: .user
+ )
+
+ CometChat.initiateCall(call: call) { call in
+ print("✅ Voice call started: \(call?.sessionId ?? "")")
+ } onError: { error in
+ print("❌ Call failed: \(error?.errorDescription ?? "")")
+ }
+}
+
+// Usage
+startVoiceCall(to: "cometchat-uid-2")
```
+
+
+
+### Video Call to User
+
+
+
+```swift
+import CometChatSDK
+
+func startVideoCall(to userUID: String) {
+ let call = CometChat.Call(
+ receiverId: userUID,
+ callType: .video,
+ receiverType: .user
+ )
+
+ CometChat.initiateCall(call: call) { call in
+ print("✅ Video call started: \(call?.sessionId ?? "")")
+ } onError: { error in
+ print("❌ Call failed: \(error?.errorDescription ?? "")")
+ }
+}
+
+// Usage
+startVideoCall(to: "cometchat-uid-2")
+```
+
+
+
+### Group Call
+
+
+
+```swift
+import CometChatSDK
+
+func startGroupCall(to groupGUID: String, type: CometChat.CallType) {
+ let call = CometChat.Call(
+ receiverId: groupGUID,
+ callType: type,
+ receiverType: .group
+ )
+
+ CometChat.initiateCall(call: call) { call in
+ print("✅ Group call started: \(call?.sessionId ?? "")")
+ } onError: { error in
+ print("❌ Call failed: \(error?.errorDescription ?? "")")
+ }
+}
+
+// Usage
+startGroupCall(to: "group-guid", type: .video)
+```
+
+
-
+---
-Always ensure to open the XCFramework file after adding the dependencies.
+## Custom Call Buttons
+
+Add call buttons anywhere in your app:
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class UserProfileViewController: UIViewController {
+
+ var user: CometChat.User!
+
+ private let voiceCallButton: UIButton = {
+ let button = UIButton(type: .system)
+ button.setImage(UIImage(systemName: "phone.fill"), for: .normal)
+ button.setTitle(" Voice Call", for: .normal)
+ button.backgroundColor = .systemGreen
+ button.tintColor = .white
+ button.layer.cornerRadius = 12
+ button.translatesAutoresizingMaskIntoConstraints = false
+ return button
+ }()
+
+ private let videoCallButton: UIButton = {
+ let button = UIButton(type: .system)
+ button.setImage(UIImage(systemName: "video.fill"), for: .normal)
+ button.setTitle(" Video Call", for: .normal)
+ button.backgroundColor = .systemBlue
+ button.tintColor = .white
+ button.layer.cornerRadius = 12
+ button.translatesAutoresizingMaskIntoConstraints = false
+ return button
+ }()
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupUI()
+ }
+
+ private func setupUI() {
+ view.backgroundColor = .systemBackground
+
+ let stackView = UIStackView(arrangedSubviews: [voiceCallButton, videoCallButton])
+ stackView.axis = .horizontal
+ stackView.spacing = 16
+ stackView.distribution = .fillEqually
+ stackView.translatesAutoresizingMaskIntoConstraints = false
+
+ view.addSubview(stackView)
+
+ NSLayoutConstraint.activate([
+ stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+ stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
+ stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 32),
+ stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -32),
+
+ voiceCallButton.heightAnchor.constraint(equalToConstant: 50),
+ videoCallButton.heightAnchor.constraint(equalToConstant: 50)
+ ])
+
+ voiceCallButton.addTarget(self, action: #selector(voiceCallTapped), for: .touchUpInside)
+ videoCallButton.addTarget(self, action: #selector(videoCallTapped), for: .touchUpInside)
+ }
+
+ @objc private func voiceCallTapped() {
+ initiateCall(type: .audio)
+ }
+
+ @objc private func videoCallTapped() {
+ initiateCall(type: .video)
+ }
+
+ private func initiateCall(type: CometChat.CallType) {
+ guard let uid = user.uid else { return }
+
+ let call = CometChat.Call(
+ receiverId: uid,
+ callType: type,
+ receiverType: .user
+ )
+
+ CometChat.initiateCall(call: call) { [weak self] call in
+ print("✅ Call initiated")
+ } onError: { [weak self] error in
+ self?.showError(error?.errorDescription ?? "Call failed")
+ }
+ }
+
+ private func showError(_ message: String) {
+ let alert = UIAlertController(title: "Error", message: message, preferredStyle: .alert)
+ alert.addAction(UIAlertAction(title: "OK", style: .default))
+ present(alert, animated: true)
+ }
+}
+```
+
+
-
+---
-***
+## Using CometChatCallButtons Component
+
+The built-in call buttons component:
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ChatHeaderViewController: UIViewController {
+
+ var user: CometChat.User!
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupCallButtons()
+ }
+
+ private func setupCallButtons() {
+ let callButtons = CometChatCallButtons()
+ callButtons.user = user
+
+ // Customize actions
+ callButtons.set(onVoiceCallClick: { user, group in
+ print("Voice call to: \(user?.name ?? group?.name ?? "")")
+ })
+
+ callButtons.set(onVideoCallClick: { user, group in
+ print("Video call to: \(user?.name ?? group?.name ?? "")")
+ })
+
+ callButtons.set(onError: { error in
+ print("Error: \(error.errorDescription)")
+ })
+
+ // Add to navigation bar
+ let hostingController = UIHostingController(rootView: callButtons)
+ addChild(hostingController)
+
+ navigationItem.rightBarButtonItem = UIBarButtonItem(customView: hostingController.view)
+ }
+}
+```
+
+
-**2. Swift Package Manager.**
+---
-Add the Call SDK dependency :
+## Handle Incoming Calls
+
+Incoming calls are handled automatically. For custom handling:
+
+
+
+```swift
+import CometChatSDK
+
+class CallHandler: NSObject, CometChatCallDelegate {
+
+ static let shared = CallHandler()
+
+ func registerForCalls() {
+ CometChat.calldelegate = self
+ }
+
+ // Called when receiving an incoming call
+ func onIncomingCallReceived(incomingCall: CometChat.Call?, error: CometChat.CometChatException?) {
+ guard let call = incomingCall else { return }
+
+ print("📞 Incoming call from: \(call.sender?.name ?? "")")
+ print("Call type: \(call.callType == .audio ? "Audio" : "Video")")
+
+ // The UI Kit automatically shows the incoming call screen
+ // Add custom logic here if needed
+ }
+
+ // Called when an outgoing call is accepted
+ func onOutgoingCallAccepted(acceptedCall: CometChat.Call?, error: CometChat.CometChatException?) {
+ guard let call = acceptedCall else { return }
+ print("✅ Call accepted: \(call.sessionId ?? "")")
+ }
+
+ // Called when an outgoing call is rejected
+ func onOutgoingCallRejected(rejectedCall: CometChat.Call?, error: CometChat.CometChatException?) {
+ guard let call = rejectedCall else { return }
+ print("❌ Call rejected: \(call.sessionId ?? "")")
+ }
+
+ // Called when an incoming call is cancelled
+ func onIncomingCallCancelled(canceledCall: CometChat.Call?, error: CometChat.CometChatException?) {
+ guard let call = canceledCall else { return }
+ print("📵 Call cancelled: \(call.sessionId ?? "")")
+ }
+
+ // Called when a call ends
+ func onCallEnded(endedCall: CometChat.Call?, error: CometChat.CometChatException?) {
+ guard let call = endedCall else { return }
+ print("📴 Call ended: \(call.sessionId ?? "")")
+ }
+}
+
+// Register in AppDelegate or SceneDelegate
+// CallHandler.shared.registerForCalls()
+```
+
+
-You can install **Calling SDK for iOS** through **Swift Package Manager.**
+---
-1. Go to your Swift Package Manager's File tab and select Add Packages
+## Calling Components Reference
-2. Add `CometChatCallsSDK` into your `Package Repository` as below:
+### CometChatCallButtons
-```sh Bash
-https://github.com/cometchat/calls-sdk-ios.git
-```
+Renders voice and video call buttons.
-3. To add the package, select Version Rules, enter Up to Exact Version, **4.0.5** and click Next.
+```swift
+let callButtons = CometChatCallButtons()
+callButtons.user = user // or callButtons.group = group
-
+// Callbacks
+callButtons.set(onVoiceCallClick: { user, group in })
+callButtons.set(onVideoCallClick: { user, group in })
+callButtons.set(onError: { error in })
+```
-Before Adding the Call SDK dependency to your project's dependencies please make sure that you have completed the Chat UI Kit Integration.
+### CometChatIncomingCall
-
+Displays incoming call screen with accept/reject options.
-After adding this dependency, the iOS UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/ios/call-buttons) component rendered in [MessageHeader](/ui-kit/ios/message-header) Component.
+```swift
+let incomingCall = CometChatIncomingCall()
+incomingCall.set(call: call)
-
-
-
+incomingCall.set(onAcceptClick: { call in })
+incomingCall.set(onDeclineClick: { call in })
+```
-## Features
+### CometChatOutgoingCall
-### Incoming Call
+Displays outgoing call screen while waiting for answer.
-The [Incoming Call](/ui-kit/ios/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
+```swift
+let outgoingCall = CometChatOutgoingCall()
+outgoingCall.set(call: call)
-When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.
+outgoingCall.set(onCancelClick: { call in })
+```
-
- 
-
+### CometChatCallLogs
-### Outgoing Call
+Displays call history. See [Call Logs](/ui-kit/ios/call-logs) for full documentation.
-The [Outgoing Call](/ui-kit/ios/incoming-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status.
+```swift
+let callLogs = CometChatCallLogs()
+callLogs.set(onItemClick: { callLog, indexPath in })
+```
-Importantly, the Outgoing Call component is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.
+---
-
- 
-
+## Troubleshooting
-### Call Logs
+| Problem | Solution |
+|---------|----------|
+| Call buttons not showing | Verify `CometChatCallsSDK` is in Podfile and run `pod install` |
+| "Permission denied" error | Add camera/microphone permissions to Info.plist |
+| Calls not connecting | Check network connection and CometChat credentials |
+| No incoming call UI | Ensure `CometChatCallsSDK` is initialized before login |
+| Audio not working | Check device is not on silent mode |
-[Call Logs](/ui-kit/ios/call-logs) component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.
+---
-
- 
-
+## Related
+
+- [Call Logs](/ui-kit/ios/call-logs) - Display call history
+- [Call Buttons](/ui-kit/ios/call-buttons) - Call button component
+- [Incoming Call](/ui-kit/ios/incoming-call) - Incoming call screen
+- [Outgoing Call](/ui-kit/ios/outgoing-call) - Outgoing call screen
+- [Ongoing Call](/ui-kit/ios/ongoing-call) - Active call screen
diff --git a/ui-kit/ios/color-resources.mdx b/ui-kit/ios/color-resources.mdx
index 097b7039..deb77163 100644
--- a/ui-kit/ios/color-resources.mdx
+++ b/ui-kit/ios/color-resources.mdx
@@ -1,60 +1,320 @@
---
title: "Color Resources"
+sidebarTitle: "Color Resources"
+description: "Complete guide to customizing colors in CometChat iOS UI Kit - themes, dark mode, and branding"
---
## Overview
-Color resources in CometChatTheme for iOS enable you to maintain a consistent visual identity across your application. These predefined colors are used for various UI elements, including text, buttons, backgrounds, alerts, and more.
+CometChat UI Kit uses `CometChatTheme` to manage colors across all components. Colors automatically adapt to Light and Dark mode, ensuring a consistent experience.
-CometChatTheme adapts seamlessly to **Light mode** and **Dark mode**, ensuring an optimal user experience across different system appearances.
-
-The color resources are divided into the following categories:
+
+
+
+ 
+
+
+
+
+ 
+
+
+
-* **Primary Colors**: Define the main theme of the application.
-* **Neutral Colors**: Used for backgrounds, strokes, and secondary UI elements.
-* **Alert Colors**: Highlight states like success, warning, error, or information.
-* **Text Colors**: Used for typography.
-* **Icon Colors**: Define icon appearances.
-* **Button Colors**: Customize button backgrounds, icons, and text.
+---
-CometChatTheme provides separate color definitions for light and dark modes, allowing seamless adaptation to the system's theme.
+## Color Categories
-## Usage
+| Category | Purpose | Examples |
+|----------|---------|----------|
+| **Primary** | Main brand color, buttons, links | `primaryColor` |
+| **Background** | Screen and component backgrounds | `backgroundColor01`, `backgroundColor02` |
+| **Text** | Typography colors | `textColorPrimary`, `textColorSecondary` |
+| **Border** | Dividers and outlines | `borderColorLight`, `borderColorDark` |
+| **Alert** | Status indicators | `successColor`, `errorColor`, `warningColor` |
+| **Icon** | Icon tints | `iconColorPrimary`, `iconColorSecondary` |
-Default Colors CometChatTheme includes predefined color sets for Light and Dark modes. These color sets ensure proper visual contrast, accessibility, and consistent branding. With CometChatTheme, the predefined colors are automatically applied based on the system’s appearance.
+---
-You can access and use these default colors directly through the CometChatTheme class.
+## Quick Start
-Example: Light Mode Color Usage
+### Access Default Colors
```swift
-CometChatTheme.primaryColor // Example: UIColor(hex: "#6852D6")
-CometChatTheme.backgroundColor01 // Light: UIColor(hex: "#FFFFFF")
+import CometChatUIKitSwift
+
+// Primary brand color
+let primary = CometChatTheme.primaryColor // #6852D6
+
+// Background colors
+let background = CometChatTheme.backgroundColor01 // White (light) / #141414 (dark)
+let secondaryBg = CometChatTheme.backgroundColor02
+
+// Text colors
+let primaryText = CometChatTheme.textColorPrimary
+let secondaryText = CometChatTheme.textColorSecondary
+
+// Alert colors
+let success = CometChatTheme.successColor // Green
+let error = CometChatTheme.errorColor // Red
+let warning = CometChatTheme.warningColor // Orange
+
+// Icon colors
+let iconPrimary = CometChatTheme.iconColorPrimary
+let iconSecondary = CometChatTheme.iconColorSecondary
```
+
+
+---
+
+## Customize Theme Colors
+
+### Change Primary Color (Brand Color)
+
+
+
+```swift
+import CometChatUIKitSwift
+
+// Set your brand color globally
+CometChatTheme.primaryColor = UIColor(hex: "#FF5722") // Orange brand
+
+// All components will now use this color for:
+// - Buttons
+// - Links
+// - Selected states
+// - Accent elements
+```
+
+### Complete Theme Customization
+
+
+
+```swift
+import CometChatUIKitSwift
+
+class ThemeManager {
+
+ static func applyCustomTheme() {
+ // Brand colors
+ CometChatTheme.primaryColor = UIColor(hex: "#6200EE") // Purple
+
+ // Background colors
+ CometChatTheme.backgroundColor01 = UIColor(hex: "#FFFFFF")
+ CometChatTheme.backgroundColor02 = UIColor(hex: "#F5F5F5")
+ CometChatTheme.backgroundColor03 = UIColor(hex: "#EEEEEE")
+
+ // Text colors
+ CometChatTheme.textColorPrimary = UIColor(hex: "#212121")
+ CometChatTheme.textColorSecondary = UIColor(hex: "#757575")
+ CometChatTheme.textColorTertiary = UIColor(hex: "#9E9E9E")
+
+ // Border colors
+ CometChatTheme.borderColorLight = UIColor(hex: "#E0E0E0")
+ CometChatTheme.borderColorDark = UIColor(hex: "#BDBDBD")
+
+ // Alert colors
+ CometChatTheme.successColor = UIColor(hex: "#4CAF50")
+ CometChatTheme.errorColor = UIColor(hex: "#F44336")
+ CometChatTheme.warningColor = UIColor(hex: "#FF9800")
+ CometChatTheme.infoColor = UIColor(hex: "#2196F3")
+
+ // Icon colors
+ CometChatTheme.iconColorPrimary = UIColor(hex: "#212121")
+ CometChatTheme.iconColorSecondary = UIColor(hex: "#757575")
+ }
+}
+
+// Apply in AppDelegate or SceneDelegate
+ThemeManager.applyCustomTheme()
+```
+
-
-
-
+---
+
+## Dark Mode Support
-Example: Dark Mode Color Usage
+CometChat automatically adapts to system appearance. You can also customize dark mode colors:
```swift
-CometChatTheme.primaryColor // Example: UIColor(hex: "#6852D6")
-CometChatTheme.backgroundColor01 // Light: UIColor(hex: "#141414")
-```
+import CometChatUIKitSwift
+import UIKit
+class ThemeManager {
+
+ static func applyTheme() {
+ // Create dynamic colors that adapt to light/dark mode
+ CometChatTheme.primaryColor = UIColor { traitCollection in
+ return traitCollection.userInterfaceStyle == .dark
+ ? UIColor(hex: "#BB86FC") // Light purple for dark mode
+ : UIColor(hex: "#6200EE") // Purple for light mode
+ }
+
+ CometChatTheme.backgroundColor01 = UIColor { traitCollection in
+ return traitCollection.userInterfaceStyle == .dark
+ ? UIColor(hex: "#121212") // Dark background
+ : UIColor(hex: "#FFFFFF") // White background
+ }
+
+ CometChatTheme.textColorPrimary = UIColor { traitCollection in
+ return traitCollection.userInterfaceStyle == .dark
+ ? UIColor(hex: "#FFFFFF") // White text
+ : UIColor(hex: "#212121") // Dark text
+ }
+ }
+}
+```
+
+
+---
+
+## Color Reference
+
+### Primary Colors
+
+| Property | Light Mode | Dark Mode | Usage |
+|----------|------------|-----------|-------|
+| `primaryColor` | `#6852D6` | `#6852D6` | Buttons, links, accents |
+
+### Background Colors
+
+| Property | Light Mode | Dark Mode | Usage |
+|----------|------------|-----------|-------|
+| `backgroundColor01` | `#FFFFFF` | `#141414` | Main background |
+| `backgroundColor02` | `#F5F5F5` | `#1E1E1E` | Secondary background |
+| `backgroundColor03` | `#EEEEEE` | `#2C2C2C` | Tertiary background |
+
+### Text Colors
+
+| Property | Light Mode | Dark Mode | Usage |
+|----------|------------|-----------|-------|
+| `textColorPrimary` | `#141414` | `#FFFFFF` | Main text |
+| `textColorSecondary` | `#727272` | `#A0A0A0` | Secondary text |
+| `textColorTertiary` | `#A0A0A0` | `#727272` | Hints, placeholders |
+
+### Alert Colors
+
+| Property | Color | Usage |
+|----------|-------|-------|
+| `successColor` | `#09C26F` | Success states |
+| `errorColor` | `#F44649` | Errors, missed calls |
+| `warningColor` | `#FFAB00` | Warnings |
+| `infoColor` | `#2196F3` | Information |
+
+### Border Colors
+
+| Property | Light Mode | Dark Mode | Usage |
+|----------|------------|-----------|-------|
+| `borderColorLight` | `#E8E8E8` | `#2C2C2C` | Subtle borders |
+| `borderColorDark` | `#CCCCCC` | `#404040` | Prominent borders |
+
+---
+
+## Production Example
+
+Complete app with custom branding:
+
+
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+
+ // Apply custom theme before initializing CometChat
+ applyBrandTheme()
+
+ return true
+ }
+
+ private func applyBrandTheme() {
+ // Your brand colors
+ let brandPrimary = UIColor(hex: "#1E88E5") // Blue
+ let brandSecondary = UIColor(hex: "#FFC107") // Amber
+
+ // Apply to CometChat theme
+ CometChatTheme.primaryColor = brandPrimary
+
+ // Customize backgrounds
+ CometChatTheme.backgroundColor01 = UIColor { trait in
+ trait.userInterfaceStyle == .dark
+ ? UIColor(hex: "#0D1117")
+ : UIColor(hex: "#FFFFFF")
+ }
+
+ CometChatTheme.backgroundColor02 = UIColor { trait in
+ trait.userInterfaceStyle == .dark
+ ? UIColor(hex: "#161B22")
+ : UIColor(hex: "#F6F8FA")
+ }
+
+ // Customize text
+ CometChatTheme.textColorPrimary = UIColor { trait in
+ trait.userInterfaceStyle == .dark
+ ? UIColor(hex: "#C9D1D9")
+ : UIColor(hex: "#24292F")
+ }
+
+ CometChatTheme.textColorSecondary = UIColor { trait in
+ trait.userInterfaceStyle == .dark
+ ? UIColor(hex: "#8B949E")
+ : UIColor(hex: "#57606A")
+ }
+
+ // Alert colors
+ CometChatTheme.successColor = UIColor(hex: "#238636")
+ CometChatTheme.errorColor = UIColor(hex: "#DA3633")
+ CometChatTheme.warningColor = brandSecondary
+ }
+}
+// UIColor extension for hex support
+extension UIColor {
+ convenience init(hex: String) {
+ var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
+ hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")
+
+ var rgb: UInt64 = 0
+ Scanner(string: hexSanitized).scanHexInt64(&rgb)
+
+ let r = CGFloat((rgb & 0xFF0000) >> 16) / 255.0
+ let g = CGFloat((rgb & 0x00FF00) >> 8) / 255.0
+ let b = CGFloat(rgb & 0x0000FF) / 255.0
+
+ self.init(red: r, green: g, blue: b, alpha: 1.0)
+ }
+}
+```
+
-
-
-
+---
+
+## Troubleshooting
+
+| Problem | Solution |
+|---------|----------|
+| Colors not applying | Apply theme before `CometChatUIKit.init()` |
+| Dark mode not working | Use `UIColor { traitCollection in }` for dynamic colors |
+| Inconsistent colors | Set all related colors (text, background, border) together |
+
+---
+
+## Related
+
+- [Component Styling](/ui-kit/ios/component-styling) - Style individual components
+- [Theme Introduction](/ui-kit/ios/theme-introduction) - Complete theming guide
+- [Getting Started](/ui-kit/ios/getting-started) - Initial setup
diff --git a/ui-kit/ios/component-styling.mdx b/ui-kit/ios/component-styling.mdx
index 369923b4..f3308ea0 100644
--- a/ui-kit/ios/component-styling.mdx
+++ b/ui-kit/ios/component-styling.mdx
@@ -1,240 +1,320 @@
---
title: "Component Styling"
+sidebarTitle: "Component Styling"
+description: "Complete guide to styling CometChat iOS UI Kit components - colors, fonts, and custom appearances"
---
## Overview
-CometChat UIKit for iOS enables developers to integrate customizable components into their applications effortlessly. Each component is designed to ensure a consistent user experience, offering flexibility to align with your app’s design system. You can modify attributes such as colors, fonts, sizes, and more using CometChatTheme or directly applying styles to components.
+Every CometChat component can be styled to match your app's design. You can apply styles globally (affects all instances) or per-instance (affects one component).
-Below is a detailed guide for styling individual components within the UIKit.
-
-## Components
+---
-### Conversations
+## Styling Methods
-The `CometChatConversations` component provides a list of recent chats, displaying participants, message previews, and timestamps. It supports default themes while offering extensive customization for text appearance, icons, and layout. This component allows you to create an intuitive and visually appealing chat list that matches your app's branding.
+### Global Styling
-You can check out the list of styling properties offered by [CometChatConversations](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Conversations/ConversationsStyle.swift)
+Apply once, affects all instances of a component:
```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = 8
+import CometChatUIKitSwift
-let customReceiptStyle = ReceiptStyle()
-customReceiptStyle.backgroundColor = UIColor(hex: "#F76808")
-
-let customBadgeStyle = BadgeStyle()
-customBadgeStyle.backgroundColor = UIColor(hex: "#F76808")
-
-let customConversation = CometChatConversation()
-customConversation.avatarStyle = customAvatarStyle
-customConversation.receiptStyle = customReceiptStyle
-customConversation.badgeStyle = customBadgeStyle
+// Set before using any components (e.g., in AppDelegate)
+CometChatConversations.style.titleColor = UIColor(hex: "#6200EE")
+CometChatConversations.style.titleFont = UIFont.systemFont(ofSize: 28, weight: .bold)
+CometChatConversations.style.backgroundColor = .systemBackground
```
-
-
-
- 
-
-
-### Users
+### Instance Styling
-The CometChatUsers component displays a scrollable list of users, ideal for showcasing available contacts for messaging, calls, or group creation. Customization includes user avatars, status indicators, and list backgrounds, enabling alignment with your app's design system.
-
-You can check out the list of styling properties offered by [CometChatUsers](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Users/UsersStyle.swift)
+Apply to a specific component instance:
```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = 8
-
-let customReceiptStyle = ReceiptStyle()
-customReceiptStyle.backgroundColor = UIColor(hex: "#F76808")
+import CometChatUIKitSwift
-let customBadgeStyle = BadgeStyle()
-customBadgeStyle.backgroundColor = UIColor(hex: "#F76808")
+let style = ConversationsStyle()
+style.titleColor = UIColor(hex: "#6200EE")
+style.titleFont = UIFont.systemFont(ofSize: 28, weight: .bold)
+style.backgroundColor = .systemBackground
-CometChatUsers.style.titleColor = UIColor(hexString: "#F76808")
-CometChatUsers.style.titleFont = UIFont(name: "Times-New-Roman", size: 34)
-CometChatUsers.avatarStyle = customAvatarStyle
-CometChatUsers.receiptStyle = customReceiptStyle
-CometChatUsers.badgeStyle = customBadgeStyle
+let conversations = CometChatConversations()
+conversations.style = style
```
-
-
-
- 
-
+---
-### Groups
+## Component Styles
-The CometChatGroups component enables displaying and interacting with chat groups. Each group item highlights key details like group name, participant count, and last active time. Developers can customize avatar styles, fonts, borders, and background colors.
+### Conversations
-You can check out the list of styling properties offered by [CometChatGroups](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Groups/GroupsStyle.swift)
+
+
+
```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = 8
+import CometChatUIKitSwift
+
+// Create custom styles
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
+
+let badgeStyle = BadgeStyle()
+badgeStyle.backgroundColor = UIColor(hex: "#F76808")
+badgeStyle.textColor = .white
+badgeStyle.textFont = UIFont.systemFont(ofSize: 12, weight: .bold)
+
+let receiptStyle = ReceiptStyle()
+receiptStyle.readIconTint = UIColor(hex: "#6200EE")
+receiptStyle.deliveredIconTint = UIColor(hex: "#9E9E9E")
+
+// Apply to conversations
+let conversations = CometChatConversations()
+conversations.avatarStyle = avatarStyle
+conversations.badgeStyle = badgeStyle
+conversations.receiptStyle = receiptStyle
+
+// Style the list
+conversations.style.titleColor = UIColor(hex: "#212121")
+conversations.style.titleFont = UIFont.systemFont(ofSize: 17, weight: .semibold)
+conversations.style.subtitleColor = UIColor(hex: "#757575")
+conversations.style.subtitleFont = UIFont.systemFont(ofSize: 14)
+conversations.style.backgroundColor = .systemBackground
+conversations.style.listItemBackground = .systemBackground
+```
+
+
-let customReceiptStyle = ReceiptStyle()
-customReceiptStyle.backgroundColor = UIColor(hex: "#F76808")
+[View all ConversationsStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Conversations/ConversationsStyle.swift)
-let customBadgeStyle = BadgeStyle()
-customBadgeStyle.backgroundColor = UIColor(hex: "#F76808")
+---
-CometChatGroups.style.titleColor = UIColor(hexString: "#F76808")
-CometChatGroups.style.titleFont = UIFont(name: "Times-New-Roman", size: 34)
-CometChatGroups.avatarStyle = customAvatarStyle
-CometChatGroups.receiptStyle = customReceiptStyle
-CometChatGroups.badgeStyle = customBadgeStyle
-```
+### Users
-
+
+
+
+
+
+```swift
+import CometChatUIKitSwift
+
+// Avatar style
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
+
+// Status indicator style
+let statusStyle = StatusIndicatorStyle()
+statusStyle.backgroundColor = .systemGreen
+statusStyle.borderColor = .white
+statusStyle.borderWidth = 2
+
+// Apply styles
+let users = CometChatUsers()
+users.avatarStyle = avatarStyle
+users.statusIndicatorStyle = statusStyle
+
+// List styling
+users.style.titleColor = UIColor(hex: "#F76808")
+users.style.titleFont = UIFont(name: "Helvetica-Bold", size: 28)
+users.style.listItemTitleColor = UIColor(hex: "#212121")
+users.style.listItemTitleFont = UIFont.systemFont(ofSize: 16, weight: .medium)
+users.style.backgroundColor = .systemBackground
+```
+
-
- 
-
+[View all UsersStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Users/UsersStyle.swift)
-### Message Header
+---
-The CometChatMessageHeader component displays essential information about the active chat, such as the recipient's name, avatar, and status (online/offline). It also includes navigation, search, or menu buttons. Customization options include header background, text appearance, and icon styles.
+### Groups
-You can check out the list of styling properties offered by [CometChatMessageHeader](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Header/MessageHeaderStyle.swift)
+
+
+
```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-
-CometChatMessageHeader.style.titleTextColor = UIColor(hexString: "#F76808")
-CometChatMessageHeader.style.titleTextFont = UIFont(name: "Times-New-Roman", size: 16)
-CometChatMessageHeader.style.avatarStyle = customAvatarStyle
+import CometChatUIKitSwift
+
+// Avatar style for group icons
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
+
+// Apply styles
+let groups = CometChatGroups()
+groups.avatarStyle = avatarStyle
+
+// List styling
+groups.style.titleColor = UIColor(hex: "#F76808")
+groups.style.titleFont = UIFont(name: "Helvetica-Bold", size: 28)
+groups.style.listItemTitleColor = UIColor(hex: "#212121")
+groups.style.listItemSubtitleColor = UIColor(hex: "#757575")
+groups.style.backgroundColor = .systemBackground
```
-
-
-
- 
-
+[View all GroupsStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Groups/GroupsStyle.swift)
-### Message List
+---
-The CometChatMessageList component displays a conversation's sequence of messages, supporting text, media, reactions, and more. Developers can customize bubble colors, text appearance, timestamps, and alignment to enhance the chat experience.
+### Message Header
-You can check out the list of styling properties offered by [CometChatMessageList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageListStyle.swift)
+
+
+
```swift
-CometChatMessageList.style.backgroundColor = UIColor(hexString: "#FBAA75")
-CometChatMessageList.messageBubbleStyle.outgoing.backgroundColor = UIColor(hexString: "#F76808")
+import CometChatUIKitSwift
+
+// Avatar style
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
+
+// Apply to message header
+CometChatMessageHeader.style.titleTextColor = UIColor(hex: "#F76808")
+CometChatMessageHeader.style.titleTextFont = UIFont(name: "Helvetica-Bold", size: 18)
+CometChatMessageHeader.style.subtitleTextColor = UIColor(hex: "#757575")
+CometChatMessageHeader.style.backgroundColor = .systemBackground
+CometChatMessageHeader.avatarStyle = avatarStyle
```
-
-
-
- 
-
+[View all MessageHeaderStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Header/MessageHeaderStyle.swift)
-### Message Composer
+---
-The CometChatMessageComposer component provides users with an interface to compose and send messages, including text, attachments, and stickers. Developers can style input boxes, buttons, and icons to match their app’s design.
+### Message List
-You can check out the list of styling properties offered by [CometChatMessageList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Composer/MessageComposerStyle.swift)
+
+
+
```swift
-CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = UIColor(hexString: "#F76808")
-CometChatMessageComposer.style.attachmentImageTint = UIColor(hexString: "#F76808")
-CometChatMessageComposer.style.voiceRecordingImageTint = UIColor(hexString: "#F76808")
-CometChatMessageComposer.style.stickerTint = UIColor(hexString: "#F76808")
-CometChatMessageComposer.style.aiImageTint = UIColor(hexString: "#F76808")
-```
+import CometChatUIKitSwift
-
+// Background color
+CometChatMessageList.style.backgroundColor = UIColor(hex: "#FBAA75")
+// Outgoing message bubbles (your messages)
+CometChatMessageList.messageBubbleStyle.outgoing.backgroundColor = UIColor(hex: "#F76808")
+CometChatMessageList.messageBubbleStyle.outgoing.textColor = .white
+CometChatMessageList.messageBubbleStyle.outgoing.textFont = UIFont.systemFont(ofSize: 15)
+
+// Incoming message bubbles (other's messages)
+CometChatMessageList.messageBubbleStyle.incoming.backgroundColor = UIColor(hex: "#E8E8E8")
+CometChatMessageList.messageBubbleStyle.incoming.textColor = UIColor(hex: "#212121")
+CometChatMessageList.messageBubbleStyle.incoming.textFont = UIFont.systemFont(ofSize: 15)
+
+// Timestamp style
+CometChatMessageList.style.timestampTextColor = UIColor(hex: "#9E9E9E")
+CometChatMessageList.style.timestampTextFont = UIFont.systemFont(ofSize: 11)
+```
+
-
- 
-
+[View all MessageListStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageListStyle.swift)
-### Call Logs
+---
-The CometChatCallLogs Component provides a comprehensive list of recent voice and video calls. Each call log displays details such as the caller’s name, avatar, call type (audio/video), call status (missed, incoming, outgoing), and timestamps. This component ensures smooth integration and allows developers to customize styles, icons, and colors to align with the app’s branding.
+### Message Composer
-You can check out the list of styling properties offered by [CometChatCallLogs](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Calls/Call%20Log/Call%20Logs/CallLogStyle.swift)
+
+
+
```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = 8
-
-CometChatCallLogs.style.titleColor = UIColor(hexString: "#F76808")
-CometChatCallLogs.style.titleFont = UIFont(name: "Roboto", size: 24)
-CometChatCallLogs.avatarStyle = customAvatarStyle
+import CometChatUIKitSwift
+
+// Send button
+CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = UIColor(hex: "#F76808")
+CometChatMessageComposer.style.sendButtonImageTint = .white
+
+// Action icons
+CometChatMessageComposer.style.attachmentImageTint = UIColor(hex: "#F76808")
+CometChatMessageComposer.style.voiceRecordingImageTint = UIColor(hex: "#F76808")
+CometChatMessageComposer.style.stickerTint = UIColor(hex: "#F76808")
+CometChatMessageComposer.style.aiImageTint = UIColor(hex: "#F76808")
+
+// Input field
+CometChatMessageComposer.style.inputBackgroundColor = UIColor(hex: "#F5F5F5")
+CometChatMessageComposer.style.inputTextColor = UIColor(hex: "#212121")
+CometChatMessageComposer.style.inputTextFont = UIFont.systemFont(ofSize: 16)
+CometChatMessageComposer.style.placeholderTextColor = UIColor(hex: "#9E9E9E")
+
+// Background
+CometChatMessageComposer.style.backgroundColor = .systemBackground
+CometChatMessageComposer.style.borderColor = UIColor(hex: "#E8E8E8")
```
-
-
+[View all MessageComposerStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Composer/MessageComposerStyle.swift)
+
+---
+
+### Call Logs
+
-### AI Assistant Chat History
-
-The CometChatAIAssistantChatHistory component provides a pre-built interface to display the conversation history between a user and an AI assistant. Each message shows the sender, timestamp, and message content. This component ensures smooth integration and allows developers to customize styles, icons, and colors to align with the app’s branding.
-
```swift
-let customDateStyle = CometChatDateStyle(
-textColor: UIColor(hexString: "#8E8E93"),
-textStyle: UIFont.systemFont(ofSize: 12)
-)
-CometChatAIAssistantChatHistory.style.backgroundColor = UIColor(hexString: "#FFF9F2")
-CometChatAIAssistantChatHistory.style.headerBackgroundColor = UIColor(hexString: "#FFF9F2")
-CometChatAIAssistantChatHistory.style.headerTitleTextColor = UIColor(hexString: "#141414")
-CometChatAIAssistantChatHistory.style.headerTitleTextFont = UIFont.boldSystemFont(ofSize: 18)
-CometChatAIAssistantChatHistory.style.newChatIconColor = UIColor(hexString: "#F76808")
-CometChatAIAssistantChatHistory.style.itemTextColor = UIColor(hexString: "#141414")
-CometChatAIAssistantChatHistory.style.itemTextFont = UIFont.systemFont(ofSize: 14)
-CometChatAIAssistantChatHistory.style.dateSeparatorStyle = customDateStyle
+import CometChatUIKitSwift
+
+// Avatar style
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
+
+// Apply styles
+CometChatCallLogs.style.titleColor = UIColor(hex: "#F76808")
+CometChatCallLogs.style.titleFont = UIFont(name: "Helvetica-Bold", size: 24)
+CometChatCallLogs.style.listItemTitleTextColor = UIColor(hex: "#212121")
+CometChatCallLogs.style.listItemSubTitleTextColor = UIColor(hex: "#757575")
+CometChatCallLogs.style.backgroundColor = .systemBackground
+
+// Call type icons
+CometChatCallLogs.style.incomingCallIconTint = .systemRed
+CometChatCallLogs.style.outgoingCallIconTint = .systemGreen
+CometChatCallLogs.style.missedCallTitleColor = .systemRed
+
+CometChatCallLogs.avatarStyle = avatarStyle
```
-
-
-### Search
+[View all CallLogStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Calls/Call%20Log/Call%20Logs/CallLogStyle.swift)
+
+---
-The `CometChatSearch` component allows users to search through conversations and messages. It provides a user-friendly interface for finding specific content quickly, with customizable styles for various elements such as background colors, text appearances, and section headers.
+### Search
@@ -242,129 +322,231 @@ The `CometChatSearch` component allows users to search through conversations and
-
```swift
+import CometChatUIKitSwift
-// component level styling
+// Instance styling
let style = SearchStyle()
style.backgroundColor = UIColor(hex: "#EDEAFA")
style.listItemBackground = UIColor(hex: "#EDEAFA")
-style.listItemTitleFont = UIFont(name: "TimesNewRomanPS-Regular", size: 16)
-style.titleFont = UIFont(name: "TimesNewRomanPS-Bold", size: 12)
-style.searchBarPlaceholderTextFont = UIFont(name: "TimesNewRomanPS-Regular", size: 12)
-
+style.listItemTitleFont = UIFont(name: "Helvetica", size: 16)
+style.titleFont = UIFont(name: "Helvetica-Bold", size: 12)
+style.searchBarPlaceholderTextFont = UIFont(name: "Helvetica", size: 12)
+style.searchBarBackgroundColor = .white
+style.searchBarTextColor = UIColor(hex: "#212121")
+
let searchVC = CometChatSearch()
searchVC.style = style
-self?.navigationController?.pushViewController(searchVC, animated: true)
-
-
-// global level styling
+
+// Or global styling
CometChatSearch.style.backgroundColor = UIColor(hex: "#EDEAFA")
CometChatSearch.style.listItemBackground = UIColor(hex: "#EDEAFA")
-CometChatSearch.style.listItemTitleFont = UIFont(name: "TimesNewRomanPS-Regular", size: 16)
-CometChatSearch.style.titleFont = UIFont(name: "TimesNewRomanPS-Bold", size: 12)
-CometChatSearch.style.searchBarPlaceholderTextFont = UIFont(name: "TimesNewRomanPS-Regular", size: 12)
```
-
-***
-
-## Base Component
-
-### Avatar
-
-The `CometChatAvatar` Component is used across the UIKit to represent users, groups, or placeholders visually. This highly reusable component supports various shapes (circle or square), sizes, borders, and fallback icons, allowing complete design consistency for profile or group images.
-
-You can check out the list of styling properties offered by [CometChatAvatar](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Avatar/AvatarStyle.swift)
-
-### Status indicator
-
-The `CometChatStatusIndicator` visually represents user presence (online, offline, or custom states). It can be styled for different shapes, sizes, and colors to reflect your app’s visual preferences while maintaining clarity in conveying status information.
-
-You can check out the list of styling properties offered by [CometChatStatusIndicator](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Status%20Indicator/StatusIndicatorStyle.swift)
-
-### Badge
-
-The `CometChatBadge` Component displays notifications or counts, such as unread messages. It can be styled for background colors, border radius, text size, and colors, allowing you to create visually distinct indicators for different notifications.
-
-You can check out the list of styling properties offered by [CometChatBadge](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Badge/BadgeCountStyle.swift)
-
-### Date
-
-The `CometChatDate` Component formats and displays timestamps in conversation lists and message threads. It ensures time-related information is clear and consistent. Developers can customize its text appearance, alignment, and colors to fit various contexts.
-
-You can check out the list of styling properties offered by [CometChatDate](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Date/DateStyle.swift)
-
-### Receipts
-
-The `CometChatReceipts` Component indicates message delivery and read statuses using intuitive icons. These can be styled for icon size, tint, and alignment, ensuring they remain clear and consistent with your app’s UI.
-
-You can check out the list of styling properties offered by [CometChatReceipts](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Receipt/ReceiptStyle.swift)
-
-### Media Recorder
-
-The `CometChatMediaRecorder` Component facilitates the recording of audio and video messages. It supports full customization of its recording controls, including button sizes, shapes, and colors, making it an integral part of your media-rich chat experience.
-
-You can check out the list of styling properties offered by [CometChatMediaRecorder](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/MediaRecorder/MediaRecorderStyle.swift)
-
-### Sticker Keyboard
-
-The `CometChatStickerKeyboard` simplifies the integration of sticker-based messaging. Customize the background, grid layout, and sticker display styles to align with your chat experience. This component provides a visually rich and interactive way to enhance conversations.
+---
-You can check out the list of styling properties offered by [CometChatStickerKeyboard](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Extensions/Sticker/StickerKeyboardStyle.swift)
+### AI Assistant Chat History
-### Reaction list
+
+
+```swift
+import CometChatUIKitSwift
-The `CometChatReactionList` Component provides a visual representation of emoji reactions on messages. It supports customization for reaction sizes, spacing, and colors, enabling you to build an engaging and personalized messaging environment.
+// Date separator style
+let dateStyle = CometChatDateStyle()
+dateStyle.textColor = UIColor(hex: "#8E8E93")
+dateStyle.textFont = UIFont.systemFont(ofSize: 12)
-You can check out the list of styling properties offered by [CometChatReactionList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/ReactionsHelper/ReactionList/ReactionListStyle.swift)
+// Apply styles
+CometChatAIAssistantChatHistory.style.backgroundColor = UIColor(hex: "#FFF9F2")
+CometChatAIAssistantChatHistory.style.headerBackgroundColor = UIColor(hex: "#FFF9F2")
+CometChatAIAssistantChatHistory.style.headerTitleTextColor = UIColor(hex: "#141414")
+CometChatAIAssistantChatHistory.style.headerTitleTextFont = UIFont.boldSystemFont(ofSize: 18)
+CometChatAIAssistantChatHistory.style.newChatIconColor = UIColor(hex: "#F76808")
+CometChatAIAssistantChatHistory.style.itemTextColor = UIColor(hex: "#141414")
+CometChatAIAssistantChatHistory.style.itemTextFont = UIFont.systemFont(ofSize: 14)
+CometChatAIAssistantChatHistory.style.dateSeparatorStyle = dateStyle
+```
+
+
-### Conversation Starter
+---
-The `CometChatConversationStarter` Component offers AI-based suggestions or reply options to initiate a chat. Developers can customize the background, text styles, and button appearances to ensure seamless integration with the app’s visual language.
+## Base Component Styles
-You can check out the list of styling properties offered by [CometChatConversationStarter](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Conversation%20Starter/AIConversationStarterStyle.swift)
+### Avatar
-### Conversation Summary
+
+
+```swift
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#6200EE")
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 24) // Circle
+avatarStyle.borderWidth = 2
+avatarStyle.borderColor = .white
+avatarStyle.textFont = UIFont.systemFont(ofSize: 16, weight: .bold)
+avatarStyle.textColor = .white
+```
+
+
-The `CometChatConversationSummary` Component highlights the essence of a conversation, including participant details, last message, and timestamp. Customize text sizes, colors, and spacing to create visually distinct summaries that improve readability and engagement.
+[View AvatarStyle →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Avatar/AvatarStyle.swift)
-You can check out the list of styling properties offered by [CometChatConversationSummary](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Summarizer/AIConversationSummaryStyle.swift)
+### Badge
-### Smart Replies
+
+
+```swift
+let badgeStyle = BadgeStyle()
+badgeStyle.backgroundColor = UIColor(hex: "#F44336")
+badgeStyle.textColor = .white
+badgeStyle.textFont = UIFont.systemFont(ofSize: 12, weight: .bold)
+badgeStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 10)
+badgeStyle.borderWidth = 0
+```
+
+
-The `CometChatSmartReplies` Component provides AI-driven suggestions for quick message replies. Fully customizable for button styles, padding, and colors, this component enables a streamlined and modern chat experience for users.
+[View BadgeStyle →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Badge/BadgeCountStyle.swift)
-You can check out the list of styling properties offered by [CometChatSmartReplies](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Smart%20Replies/AISmartRepliesStyle.swift)
+### Status Indicator
-### Message Information
+
+
+```swift
+let statusStyle = StatusIndicatorStyle()
+statusStyle.backgroundColor = .systemGreen // Online color
+statusStyle.borderColor = .white
+statusStyle.borderWidth = 2
+statusStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 6) // Circle
+```
+
+
-The `CometChatMessageInformation` Component displays metadata for messages, such as delivery timestamps, sender details, and read receipts. Customization options include text styles, colors, and alignment, making it adaptable to various app layouts.
+[View StatusIndicatorStyle →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Status%20Indicator/StatusIndicatorStyle.swift)
-You can check out the list of styling properties offered by [CometChatMessageInformation](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Information/MessageInformationStyle.swift)
+### Receipt
-### Message option sheet
+
+
+```swift
+let receiptStyle = ReceiptStyle()
+receiptStyle.sentIconTint = UIColor(hex: "#9E9E9E")
+receiptStyle.deliveredIconTint = UIColor(hex: "#9E9E9E")
+receiptStyle.readIconTint = UIColor(hex: "#6200EE")
+receiptStyle.errorIconTint = UIColor(hex: "#F44336")
+```
+
+
-The `CometChatMessageOptionSheet` Component is a context menu for performing actions on messages, such as replying, forwarding, or deleting. Developers can style its background, icons, and text to match the app’s menu system.
+[View ReceiptStyle →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Receipt/ReceiptStyle.swift)
-You can check out the list of styling properties offered by [CometChatMessageOptionSheet](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Models/CometChatMessageOption.swift)
+---
-### Attachment option sheet
+## Complete Styling Example
-The `CometChatAttachmentOptionSheet` Component provides a sleek interface for users to attach media, documents, or other files. It supports icon and text customizations to create a cohesive attachment experience.
+Apply consistent branding across all components:
-You can check out the list of styling properties offered by [CometChatAttachmentOptionSheet](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Message%20Action%20Sheet/ActionSheetStyle.swift)
+
+
+```swift
+import CometChatUIKitSwift
+import UIKit
+
+class StyleManager {
+
+ // Brand colors
+ static let primaryColor = UIColor(hex: "#6200EE")
+ static let secondaryColor = UIColor(hex: "#03DAC6")
+ static let backgroundColor = UIColor.systemBackground
+ static let surfaceColor = UIColor(hex: "#F5F5F5")
+ static let textPrimary = UIColor(hex: "#212121")
+ static let textSecondary = UIColor(hex: "#757575")
+
+ static func applyGlobalStyles() {
+ // Theme colors
+ CometChatTheme.primaryColor = primaryColor
+
+ // Avatar style (used everywhere)
+ let avatarStyle = AvatarStyle()
+ avatarStyle.backgroundColor = secondaryColor
+ avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
+
+ // Badge style
+ let badgeStyle = BadgeStyle()
+ badgeStyle.backgroundColor = primaryColor
+ badgeStyle.textColor = .white
+
+ // Apply to Conversations
+ CometChatConversations.avatarStyle = avatarStyle
+ CometChatConversations.badgeStyle = badgeStyle
+ CometChatConversations.style.titleColor = textPrimary
+ CometChatConversations.style.titleFont = UIFont.systemFont(ofSize: 28, weight: .bold)
+ CometChatConversations.style.backgroundColor = backgroundColor
+
+ // Apply to Users
+ CometChatUsers.avatarStyle = avatarStyle
+ CometChatUsers.style.titleColor = textPrimary
+ CometChatUsers.style.backgroundColor = backgroundColor
+
+ // Apply to Groups
+ CometChatGroups.avatarStyle = avatarStyle
+ CometChatGroups.style.titleColor = textPrimary
+ CometChatGroups.style.backgroundColor = backgroundColor
+
+ // Apply to Message Header
+ CometChatMessageHeader.avatarStyle = avatarStyle
+ CometChatMessageHeader.style.titleTextColor = textPrimary
+ CometChatMessageHeader.style.backgroundColor = backgroundColor
+
+ // Apply to Message List
+ CometChatMessageList.style.backgroundColor = surfaceColor
+ CometChatMessageList.messageBubbleStyle.outgoing.backgroundColor = primaryColor
+ CometChatMessageList.messageBubbleStyle.outgoing.textColor = .white
+ CometChatMessageList.messageBubbleStyle.incoming.backgroundColor = .white
+ CometChatMessageList.messageBubbleStyle.incoming.textColor = textPrimary
+
+ // Apply to Message Composer
+ CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = primaryColor
+ CometChatMessageComposer.style.attachmentImageTint = primaryColor
+ CometChatMessageComposer.style.backgroundColor = backgroundColor
+
+ // Apply to Call Logs
+ CometChatCallLogs.avatarStyle = avatarStyle
+ CometChatCallLogs.style.titleColor = textPrimary
+ CometChatCallLogs.style.backgroundColor = backgroundColor
+ }
+}
+
+// Apply in AppDelegate
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ StyleManager.applyGlobalStyles()
+ return true
+ }
+}
+```
+
+
-### AIOption Sheet
+---
-The `CometChatAIOptionSheet` Component offers AI-powered action options, like generating replies or initiating voice-to-text commands. It allows developers to style icons, colors, and interaction elements for a polished and user-friendly interface.
+## Troubleshooting
-You can check out the list of styling properties offered by [CometChatAIOptionSheet](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Shared%20Views/AIOptionsStyle.swift)
+| Problem | Solution |
+|---------|----------|
+| Styles not applying | Apply global styles before `CometChatUIKit.init()` |
+| Instance style overridden | Instance styles take precedence over global |
+| Colors look wrong in dark mode | Use dynamic colors with `UIColor { traitCollection in }` |
+| Font not loading | Verify font name is correct and font is added to project |
-### Mentions
+---
-The `CometChatMentions` Component highlights referenced users or groups within messages. With customizable styles for text color and background, you can ensure mentions stand out clearly in chats while maintaining a cohesive visual theme.
+## Related
-You can check out the list of styling properties offered by [CometChatMentions](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Composer/TextFormatter/MentionTextStyle.swift)
+- [Color Resources](/ui-kit/ios/color-resources) - Theme colors
+- [Theme Introduction](/ui-kit/ios/theme-introduction) - Complete theming
+- [Components Overview](/ui-kit/ios/components-overview) - All components
diff --git a/ui-kit/ios/components-overview.mdx b/ui-kit/ios/components-overview.mdx
index 3888e4b0..0eebab19 100644
--- a/ui-kit/ios/components-overview.mdx
+++ b/ui-kit/ios/components-overview.mdx
@@ -1,47 +1,370 @@
---
-title: "Overview"
+title: "Components Overview"
+sidebarTitle: "Overview"
+description: "Understanding CometChat iOS UI Kit components - types, actions, events, and customization"
---
-CometChat's **UI Kit** is a set of pre-built UI components that allows you to easily craft an in-app chat with all the essential messaging features.
+## Overview
-## Type of Components
+CometChat UI Kit provides pre-built components that you can use to quickly build a chat experience. Components are organized into three types based on complexity.
-UI components based on the behaviour and functionality can be categorized into three types: Base Components, Components, and Composite Components.
+---
+
+## Component Types
### Base Components
-Base Components form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These components provide the foundational appearance and behavior for your UI.
+Simple UI elements with no business logic. They display data you pass to them.
+
+| Component | Purpose |
+|-----------|---------|
+| `CometChatAvatar` | User/group profile images |
+| `CometChatBadge` | Notification counts |
+| `CometChatStatusIndicator` | Online/offline status |
+| `CometChatDate` | Formatted timestamps |
+| `CometChatReceipt` | Message delivery status |
+
+
+
+```swift
+import CometChatUIKitSwift
+
+// Avatar - displays user image
+let avatar = CometChatAvatar()
+avatar.setAvatar(avatarUrl: user.avatar, with: user.name)
+
+// Badge - shows unread count
+let badge = CometChatBadge()
+badge.set(count: 5)
+
+// Status indicator - shows online status
+let status = CometChatStatusIndicator()
+status.set(status: .online)
+```
+
+
+
+---
### Components
-Components build upon Base Components by incorporating business logic. They not only render UI elements but also manage data loading, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Components essential for creating dynamic and interactive UIs.
+UI elements with built-in business logic. They fetch data, handle actions, and emit events.
+
+| Component | Purpose |
+|-----------|---------|
+| `CometChatUsers` | List of users |
+| `CometChatGroups` | List of groups |
+| `CometChatConversations` | Recent chats list |
+| `CometChatMessageList` | Chat messages |
+| `CometChatMessageComposer` | Message input |
+| `CometChatMessageHeader` | Chat header |
+| `CometChatCallLogs` | Call history |
+
+
+
+```swift
+import CometChatUIKitSwift
+
+// Users list - fetches and displays users automatically
+let users = CometChatUsers()
+users.set(onItemClick: { user, indexPath in
+ print("Selected: \(user.name ?? "")")
+})
+
+// Conversations - shows recent chats
+let conversations = CometChatConversations()
+conversations.set(onItemClick: { conversation, indexPath in
+ // Open chat
+})
+
+// Message list - displays messages for a user/group
+let messageList = CometChatMessageList()
+messageList.set(user: user)
+```
+
+
+
+---
### Composite Components
-Composite Components are advanced UI elements that combine multiple Components or other Composite Components to achieve complex functionality. By layering components together, Composite Components offer a sophisticated and flexible approach to designing UIs. They enable diverse functionalities and interactions, making them versatile tools for creating rich user experiences.
+Combine multiple components into complete features.
+
+| Component | Contains |
+|-----------|----------|
+| `CometChatMessages` | MessageHeader + MessageList + MessageComposer |
+| `CometChatUsersWithMessages` | Users + Messages |
+| `CometChatGroupsWithMessages` | Groups + Messages |
+| `CometChatConversationsWithMessages` | Conversations + Messages |
+
+
+
+```swift
+import CometChatUIKitSwift
+
+// Complete chat experience in one component
+let conversationsWithMessages = CometChatConversationsWithMessages()
+navigationController?.pushViewController(conversationsWithMessages, animated: true)
+
+// Or just the messages view
+let messages = CometChatMessages()
+messages.user = user // or messages.group = group
+navigationController?.pushViewController(messages, animated: true)
+```
+
+
+
+---
## Actions
-Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions.
+Actions define how components respond to user interactions.
### Predefined Actions
-These are actions that are inherently programmed into a UI component. They are ingrained in the component itself by default, and they execute automatically in response to user interaction,without needing any additional user input.
+Built-in behaviors that work automatically:
+
+
+
+```swift
+// CometChatConversations has predefined actions:
+// - Tap conversation → Opens messages
+// - Long press → Shows options
+// - Swipe → Delete conversation
-### User-Defined Actions
+let conversations = CometChatConversations()
+// These work automatically!
+```
+
+
-These are actions that must be explicitly specified by the user. They are not innately part of the component like predefined actions. Instead, they must be developed based on the unique needs of the user or the application. User-defined actions provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application.
+### Custom Actions
-To customize the behavior of a component, actions must be overridden by the user. This provides the user with control over how the component responds to specific events or interactions.
+Override default behavior with your own logic:
-Both Components and Composite Components expose actions to the user, which means that users can interact with these types of components through predefined or user-defined actions. On the other hand, Base Components do not expose actions to the user as they are the foundational building blocks mainly responsible for rendering the user interface and do not carry any business logic or actions.
+
+
+```swift
+import CometChatUIKitSwift
+import CometChatSDK
+
+let conversations = CometChatConversations()
+
+// Override tap action
+conversations.set(onItemClick: { conversation, indexPath in
+ // Your custom logic
+ print("Tapped: \(conversation.conversationWith?.name ?? "")")
+
+ // Navigate to custom screen instead of default
+ let customChatVC = MyChatViewController()
+ customChatVC.conversation = conversation
+ self.navigationController?.pushViewController(customChatVC, animated: true)
+})
+
+// Override long press
+conversations.set(onItemLongClick: { conversation, indexPath in
+ // Show custom options
+ self.showCustomOptions(for: conversation)
+})
+
+// Handle errors
+conversations.set(onError: { error in
+ print("Error: \(error.localizedDescription)")
+})
+
+// Handle empty state
+conversations.set(onEmpty: {
+ print("No conversations")
+})
+```
+
+
+
+---
## Events
-Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
+Events allow components to communicate without direct references. Subscribe to events from anywhere in your app.
-Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+### Available Events
+
+| Event | Triggered When |
+|-------|----------------|
+| `ccMessageSent` | Message is sent |
+| `ccMessageEdited` | Message is edited |
+| `ccMessageDeleted` | Message is deleted |
+| `ccMessageRead` | Message is read |
+| `ccUserBlocked` | User is blocked |
+| `ccUserUnblocked` | User is unblocked |
+| `ccGroupCreated` | Group is created |
+| `ccGroupDeleted` | Group is deleted |
+| `ccGroupMemberAdded` | Member added to group |
+| `ccGroupMemberRemoved` | Member removed from group |
+
+### Subscribe to Events
+
+
+
+```swift
+import CometChatUIKitSwift
+import Combine
+
+class ChatManager {
+
+ private var cancellables = Set()
+
+ func subscribeToEvents() {
+ // Message sent event
+ CometChatMessageEvents.ccMessageSent
+ .sink { message in
+ print("Message sent: \(message.text ?? "")")
+ // Update UI, analytics, etc.
+ }
+ .store(in: &cancellables)
+
+ // Message deleted event
+ CometChatMessageEvents.ccMessageDeleted
+ .sink { message in
+ print("Message deleted: \(message.id)")
+ }
+ .store(in: &cancellables)
+
+ // User blocked event
+ CometChatUserEvents.ccUserBlocked
+ .sink { user in
+ print("Blocked: \(user.name ?? "")")
+ }
+ .store(in: &cancellables)
+
+ // Group member added
+ CometChatGroupEvents.ccGroupMemberAdded
+ .sink { (action, addedBy, addedUser, group) in
+ print("\(addedUser.name ?? "") added to \(group.name ?? "")")
+ }
+ .store(in: &cancellables)
+ }
+
+ func unsubscribe() {
+ cancellables.removeAll()
+ }
+}
+```
+
+
+
+---
## Configurations
-Configurations offer the ability to customize the properties of each individual component within a Composite Component. If a Composite Component includes multiple components, each of these components will have its own set of properties that can be configured. This means multiple sets of configurations are available, one for each constituent component. This allows for fine-tuned customization of the Composite Component, enabling you to tailor its behavior and appearance to match specific requirements in a granular manner.
+Customize nested components within composite components:
+
+
+
+```swift
+import CometChatUIKitSwift
+
+// CometChatMessages contains: MessageHeader, MessageList, MessageComposer
+// You can configure each one:
+
+let messages = CometChatMessages()
+messages.user = user
+
+// Configure MessageHeader
+let headerConfig = MessageHeaderConfiguration()
+headerConfig.hideBackButton = false
+headerConfig.set(subtitleView: { user, group in
+ let label = UILabel()
+ label.text = user?.status == .online ? "Online" : "Offline"
+ label.textColor = user?.status == .online ? .systemGreen : .gray
+ return label
+})
+messages.set(messageHeaderConfiguration: headerConfig)
+
+// Configure MessageList
+let listConfig = MessageListConfiguration()
+listConfig.set(emptyStateText: "No messages yet")
+listConfig.set(errorStateText: "Failed to load messages")
+messages.set(messageListConfiguration: listConfig)
+
+// Configure MessageComposer
+let composerConfig = MessageComposerConfiguration()
+composerConfig.set(placeholderText: "Type a message...")
+composerConfig.hideLiveReaction = true
+messages.set(messageComposerConfiguration: composerConfig)
+```
+
+
+
+---
+
+## Component Hierarchy
+
+```
+CometChatConversationsWithMessages
+├── CometChatConversations
+│ ├── CometChatListItem
+│ │ ├── CometChatAvatar
+│ │ ├── CometChatBadge
+│ │ ├── CometChatStatusIndicator
+│ │ └── CometChatDate
+│ └── CometChatListBase
+└── CometChatMessages
+ ├── CometChatMessageHeader
+ │ ├── CometChatAvatar
+ │ └── CometChatStatusIndicator
+ ├── CometChatMessageList
+ │ ├── CometChatMessageBubble
+ │ ├── CometChatReceipt
+ │ └── CometChatDate
+ └── CometChatMessageComposer
+ ├── CometChatMediaRecorder
+ └── CometChatStickerKeyboard
+```
+
+---
+
+## Quick Reference
+
+### When to Use Each Type
+
+| Need | Use |
+|------|-----|
+| Display user avatar | `CometChatAvatar` (Base) |
+| Show list of users | `CometChatUsers` (Component) |
+| Complete chat with user selection | `CometChatUsersWithMessages` (Composite) |
+| Custom chat UI | Individual Components |
+| Quick integration | Composite Components |
+
+### Common Patterns
+
+
+
+```swift
+// Pattern 1: Quick integration with composite
+let chat = CometChatConversationsWithMessages()
+navigationController?.pushViewController(chat, animated: true)
+
+// Pattern 2: Custom flow with components
+let users = CometChatUsers()
+users.set(onItemClick: { user, _ in
+ let messages = CometChatMessages()
+ messages.user = user
+ self.navigationController?.pushViewController(messages, animated: true)
+})
+
+// Pattern 3: Fully custom with base components
+let customCell = UITableViewCell()
+let avatar = CometChatAvatar()
+avatar.setAvatar(avatarUrl: user.avatar, with: user.name)
+customCell.contentView.addSubview(avatar)
+```
+
+
+
+---
+
+## Related
+
+- [Component Styling](/ui-kit/ios/component-styling) - Customize appearance
+- [Color Resources](/ui-kit/ios/color-resources) - Theme colors
+- [Getting Started](/ui-kit/ios/getting-started) - Initial setup
diff --git a/ui-kit/ios/conversations.mdx b/ui-kit/ios/conversations.mdx
index b8b80440..c62e53e1 100644
--- a/ui-kit/ios/conversations.mdx
+++ b/ui-kit/ios/conversations.mdx
@@ -1,1186 +1,491 @@
---
title: "Conversations"
+description: "Display and manage all chat conversations for the logged-in user"
---
-## Overview
-
-The Conversations is a [Component](/ui-kit/ios/components-overview#components), That shows all conversations related to the currently logged-in user,
+The `CometChatConversations` component displays a list of all conversations (one-on-one and group chats) for the currently logged-in user. It shows the last message, unread count, typing indicators, and user presence in real-time.
-## Usage
-
-### Integration
-
-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.
-
-```ruby 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.
-
-```ruby swift
-// You can create ConversationRequestBuilder as per your requirement
-let conversationRequestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20).set(conversationType: .both)
-
-let cometChatConversations = CometChatConversations(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
-
-[Actions](/ui-kit/ios/components-overview#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.
-
-1. ##### 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
-})
-```
-
-
-
-
-
-***
-
-2. ##### 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
-})
-```
-
-
-
-
+## Prerequisites
-***
+Before using this component, ensure you have:
-##### 6. set(onEmpty:)
+1. [Initialized the CometChat UI Kit](/ui-kit/ios/getting-started)
+2. [Logged in a user](/ui-kit/ios/getting-started#login)
-This `set(onEmpty:)` method is triggered when the conversations list is empty in CometChatConversations.
+## Basic Usage
-
-
```swift
-// syntax for set(onEmpty: @escaping () -> Void)
-cometChatConversations.set(onEmpty: {
- // Handle empty state
-})
-```
-
-
-
-
-
-***
-
-##### 7. setOnLoad
-
-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
-})
-```
-
-
-
-
-
-***
-
-### Filters
-
-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](/sdk/ios/retrieve-conversations).
-
-You can set filters using the following parameters.
-
-1. **Conversation Type:** Filters on type of Conversation, `User` or `Groups`
-2. **Limit:** Number of conversations fetched in a single request.
-3. **WithTags:** Filter on fetching conversations containing tags
-4. **Tags:** Filters on specific `Tag`
-5. **UserTags:** Filters on specific User `Tag`
-6. **GroupTags:** Filters on specific Group `Tag`
-
-
-
-```swift
-// You can create ConversationRequestBuilder as per your requirement
-let conversationRequestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20).set(conversationType: .both)
-
-let cometChatConversations = CometChatConversations(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
-
-[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.
-
-##### 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 {
+import CometChatUIKitSwift
- public override func viewDidLoad() {
+class ConversationsViewController: UIViewController {
+
+ 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 module
-extension ViewController: CometChatConversationEventListener {
-
- func ccConversationDelete(conversation: Conversation) {
- // Do Stuff
+
+ let conversations = CometChatConversations()
+
+ // Push to navigation stack
+ navigationController?.pushViewController(conversations, animated: true)
}
-
}
```
-```ruby 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")
-}
-```
-
-
-
-
+## Production-Ready Implementation
-## Customization
+This example shows a complete conversations screen with navigation to messages, custom filtering, and error handling:
-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.
-
-### Style
-
-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**
-
-
-
```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = 8
-
-let customReceiptStyle = ReceiptStyle()
-customReceiptStyle.backgroundColor = UIColor(hex: "#F76808")
-
-var customBadgeStyle = BadgeStyle()
-customBadgeStyle.backgroundColor = UIColor(hex: "#F76808")
-
-CometChatConversation.style.backgroundColor = CometChatTheme.backgroundColor01
-CometChatConversation.style.avatarStyle = customAvatarStyle
-CometChatConversation.style.receiptStyle = customReceiptStyle
-CometChatConversation.style.badgeStyle = customBadgeStyle
-```
-
-
-
-
-
-**Instance level styling**
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-
-
-```swift
-let conversationStyle = ConversationsStyle()
-conversationStyle.backgroundColor = CometChatTheme.backgroundColor01
+class ChatListViewController: UIViewController {
+
+ private var conversationsController: CometChatConversations!
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupConversations()
+ }
+
+ private func setupConversations() {
+ // Create custom request builder for filtering
+ let requestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 30)
+ .set(conversationType: .both) // Show both user and group conversations
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = 8
-
-let customReceiptStyle = ReceiptStyle()
-customReceiptStyle.backgroundColor = UIColor(hex: "#F76808")
-
-let customBadgeStyle = BadgeStyle()
-customBadgeStyle.backgroundColor = UIColor(hex: "#F76808")
-
-let customConversation = CometChatConversation()
-customConversation.avatarStyle = customAvatarStyle
-customConversation.receiptStyle = customReceiptStyle
-customConversation.badgeStyle = customBadgeStyle
-customConversation.style = conversationStyle
-```
-
-
-
-
-
-
-
-
-
-List of properties exposed by ConversationStyle
-
-| **Property** | **Description** | **Code** |
-| ------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| **Background Color** | Used to set the background color of the conversation screen. | `CometChatConversation.style.backgroundColor = UIColor.white` |
-| **Background Drawable** | Used to set a background image for the conversation screen. | `CometChatConversation.style.backgroundDrawable = UIImage(named: "background")` |
-| **Border Width** | Used to set the border width of the conversation UI. | `CometChatConversation.style.borderWidth = 2.0` |
-| **Border Color** | Used to set the border color of the conversation UI. | `CometChatConversation.style.borderColor = UIColor.gray` |
-| **Corner Radius** | Used to set the corner radius of the conversation UI. | `CometChatConversation.style.cornerRadius = 10.0` |
-| **Back Icon Tint** | Used to set the tint color of the back icon in the conversation UI. | `CometChatConversation.style.backIconTint = UIColor.blue` |
-| **Back Icon** | Used to set a custom back icon for the conversation UI. | `CometChatConversation.style.backIcon = UIImage(named: "customBackIcon")` |
-| **Separator Color** | Used to set the color of separators in the conversation list. | `CometChatConversation.style.separatorColor = UIColor.lightGray` |
-| **Separator Width** | Used to set the width of separators in the conversation list. | `CometChatConversation.style.separatorWidth = 1.0` |
-| **Error Text Color** | Used to set the color of error messages in the conversation UI. | `CometChatConversation.style.errorTextColor = UIColor.red` |
-| **Last Message Text Color** | Used to set the color of the last message text in the conversation list. | `CometChatConversation.style.lastMessageTextColor = UIColor.darkGray` |
-| **Typing Indicator Color** | Used to set the color of the typing indicator in the conversation UI. | `CometChatConversation.style.typingIndicatorColor = UIColor.green` |
-| **Title Appearance** | Used to customize the appearance of the conversation screen's title. | `CometChatConversation.style.titleAppearance = UIFont.boldSystemFont(ofSize: 18.0)` |
-| **Last Message Appearance** | Used to customize the appearance of the last message text in the list. | `CometChatConversation.style.lastMessageAppearance = UIFont.italicSystemFont(ofSize: 14.0)` |
-| **Thread Indicator Appearance** | Used to customize the appearance of thread indicators in the list. | `CometChatConversation.style.threadIndicatorTextAppearance = UIFont.systemFont(ofSize: 12.0)` |
-| **Avatar Style** | Used to customize the appearance of avatars in the conversation list. | `CometChatConversation.style.avatarStyle = customAvatarStyle` |
-| **Status Indicator Style** | Used to customize the style of status indicators for online/offline members. | `CometChatConversation.style.statusIndicatorStyle = customStatusIndicatorStyle` |
-| **Date Style** | Used to customize the appearance of date labels in the conversation list. | `CometChatConversation.style.dateStyle = customDateStyle` |
-| **Badge Style** | Used to customize the appearance of badges in the conversation list. | `CometChatConversation.style.badgeStyle = customBadgeStyle` |
-| **List Item Style** | Used to customize the appearance of the list items in the conversation list. | `CometChatConversation.style.listItemStyle = customListItemStyle` |
-
-##### 2. Avatar Style
-
-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](/ui-kit/ios/component-styling#avatar).
-
-**Global level styling**
-
-
-
-```swift
-CometChatAvatar.style.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-CometChatAvatar.style.backgroundColor = UIColor(hex: "#F76808")
+ // Initialize conversations component
+ conversationsController = CometChatConversations(conversationRequestBuilder: requestBuilder)
+
+ // Handle conversation selection - navigate to messages
+ conversationsController.set(onItemClick: { [weak self] conversation, indexPath in
+ self?.openMessages(for: conversation)
+ })
+
+ // Handle long press for additional options
+ conversationsController.set(onItemLongClick: { [weak self] conversation, indexPath in
+ self?.showConversationOptions(for: conversation)
+ })
+
+ // Handle errors
+ conversationsController.set(onError: { error in
+ print("Conversations error: \(error.errorDescription)")
+ })
+
+ // Handle empty state
+ conversationsController.set(onEmpty: {
+ print("No conversations found")
+ })
+
+ // Handle when conversations are loaded
+ conversationsController.set(onLoad: { conversations in
+ print("Loaded \(conversations.count) conversations")
+ })
+
+ // Present the conversations
+ navigationController?.pushViewController(conversationsController, animated: true)
+ }
+
+ private func openMessages(for conversation: Conversation) {
+ if let user = conversation.conversationWith as? User {
+ let messagesVC = CometChatMessages()
+ messagesVC.set(user: user)
+ navigationController?.pushViewController(messagesVC, animated: true)
+ } else if let group = conversation.conversationWith as? Group {
+ let messagesVC = CometChatMessages()
+ messagesVC.set(group: group)
+ navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ }
+
+ private func showConversationOptions(for conversation: Conversation) {
+ let alert = UIAlertController(title: "Options", message: nil, preferredStyle: .actionSheet)
+
+ alert.addAction(UIAlertAction(title: "Delete", style: .destructive) { _ in
+ CometChat.deleteConversation(
+ conversationWith: conversation.conversationWith?.uid ?? "",
+ conversationType: conversation.conversationType
+ ) { success in
+ print("Conversation deleted")
+ } onError: { error in
+ print("Delete failed: \(error?.errorDescription ?? "")")
+ }
+ })
+
+ alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+ present(alert, animated: true)
+ }
+}
```
-
-
-
+## Filter Conversations
-**Instance level styling**
+Use `ConversationRequestBuilder` to filter which conversations appear:
-
-
```swift
-var customAvatarStyle = AvatarStyle()
-customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-customAvatarStyle.backgroundColor = UIColor(hex: "#F76808")
-
-let customAvatar = CometChatAvatar()
-customAvatar.style = customAvatarStyle
-```
-
-
-
-
-
-
- 
-
-
-##### 3. StatusIndicator Style
-
-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](/ui-kit/ios/status-indicator).
-
-**Global level styling**
+// Show only one-on-one conversations
+let userOnlyBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20)
+ .set(conversationType: .user)
-
-
-```swift
-CometChatStatusIndicator.style.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-CometChatStatusIndicator.style.backgroundColor = UIColor(hex: "#F76808")
+let conversations = CometChatConversations(conversationRequestBuilder: userOnlyBuilder)
```
-
-
-
-
-**Instance level styling**
-
-
-
```swift
-var customStatusIndicatorStyle = StatusIndicatorStyle()
-customStatusIndicatorStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-customStatusIndicatorStyle.backgroundColor = UIColor(hex: "#F76808")
+// Show only group conversations
+let groupOnlyBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20)
+ .set(conversationType: .group)
-CometChatStatusIndicator.style = customStatusIndicatorStyle
+let conversations = CometChatConversations(conversationRequestBuilder: groupOnlyBuilder)
```
-
-
-
-
-
- 
-
-
-##### 4. Badge Style
-
-To apply customized styles to the `Badge` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Badge Styles](https://www.cometchat.com/docs/ui-kit/ios/component-styling#badge)
-
-**Global level styling**
-
-
-
```swift
-CometChatBadge.style.backgroundColor = UIColor(hex: "#F44649")
-CometChatBadge.style.cornerRadius = CometChatCornerStyle(cornerRadius: 4)
-```
-
-
-
-
+// Filter by tags
+let taggedBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20)
+ .set(conversationType: .both)
+ .withTags(true)
+ .set(tags: ["support", "sales"])
-**Instance level styling**
-
-
-
-```swift
-let customBadgeStyle = BadgeStyle()
-customBadgeStyle.backgroundColor = UIColor(hex: "#F44649")
-customBadgeStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 4)
-
-CometChatBadge.style = customBadgeStyle
+let conversations = CometChatConversations(conversationRequestBuilder: taggedBuilder)
```
-
-
-
-
-
- 
-
-
-### 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 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` |
-
-### 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.
-
-***
+## Actions Reference
-#### Date Time Formatter
+| Method | Description | Example |
+|--------|-------------|---------|
+| `set(onItemClick:)` | Triggered when a conversation is tapped | Navigate to messages |
+| `set(onItemLongClick:)` | Triggered on long press | Show options menu |
+| `set(onBack:)` | Triggered when back button is pressed | Custom navigation |
+| `set(onSelection:)` | Triggered in selection mode | Multi-select conversations |
+| `set(onError:)` | Triggered when an error occurs | Show error alert |
+| `set(onEmpty:)` | Triggered when list is empty | Show empty state |
+| `set(onLoad:)` | Triggered when conversations load | Analytics tracking |
-The **CometChatConversations** component supports full customization of how date and time are displayed using the [CometChatDateTimeFormatter](/ui-kit/ios/localize#datetimeformatter).
+## Styling
-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.
+### Quick Styling
-1. 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)))
-}
-```
-
-
-
-
-
-2. Instance-Level (Local)
-
-
-
```swift
let conversations = CometChatConversations()
-conversations.dateTimeFormatter.yesterday = { timestamp in
- return "Yesterday at " + formattedTime(from: timestamp)
-}
-```
-
+// Apply custom colors
+CometChatConversation.style.backgroundColor = .systemBackground
+CometChatConversation.style.lastMessageTextColor = .secondaryLabel
+CometChatConversation.style.typingIndicatorColor = .systemGreen
-
+// Custom avatar style
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#6851D6")
+avatarStyle.cornerRadius = 8
+CometChatConversation.style.avatarStyle = avatarStyle
-##### Available closures
-
-| Property | Description | Code |
-| --------- | ------------------------------------------------------------------- | -------------------------------------------------------------- |
-| time | Called to format a timestamp as a standard time (e.g., "12:30 PM"). | `CometChatConversations.dateTimeFormatter.time = { ... }` |
-| today | Called when rendering messages sent today. | `CometChatConversations.dateTimeFormatter.today = { ... }` |
-| yesterday | Called for yesterday's messages. | `CometChatConversations.dateTimeFormatter.yesterday = { ... }` |
-| lastweek | Called for messages within the last week. | `CometChatConversations.dateTimeFormatter.lastweek = { ... }` |
-| otherDay | Called for dates older than last week. | `CometChatConversations.dateTimeFormatter.otherDay = { ... }` |
-| minute | Called when referring to "a minute ago". | `CometChatConversations.dateTimeFormatter.minute = { ... }` |
-| minutes | Called for "x minutes ago". | `CometChatConversations.dateTimeFormatter.minutes = { ... }` |
-| hour | Called for "an hour ago". | `CometChatConversations.dateTimeFormatter.hour = { ... }` |
-| hours | Called for "x hours ago". | `CometChatConversations.dateTimeFormatter.hours = { ... }` |
-
-Each closure receives a timestamp (Int, representing UNIX time) and must return a String representing the formatted time.
-
-***
-
-#### SetTextFormatters
-
-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.
-
-
-
-cometChatConversations.set(textFormatters: \[CometChatTextFormatter])
-
-
-
-
-
-***
-
-#### 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.
-
-
-
-```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 ""
-})
+// Custom badge style for unread count
+let badgeStyle = BadgeStyle()
+badgeStyle.backgroundColor = UIColor(hex: "#F44649")
+badgeStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 10)
+CometChatConversation.style.badgeStyle = badgeStyle
```
-
+### Style Properties
-
+| Property | Description |
+|----------|-------------|
+| `backgroundColor` | Background color of the list |
+| `lastMessageTextColor` | Color of the last message preview |
+| `typingIndicatorColor` | Color of "typing..." indicator |
+| `separatorColor` | Color of row separators |
+| `avatarStyle` | Style for user/group avatars |
+| `badgeStyle` | Style for unread message count |
+| `receiptStyle` | Style for read/delivered receipts |
+| `dateStyle` | Style for timestamp labels |
-Demonstration
+## Hide UI Elements
-
- 
-
-
-***
-
-#### SetOptions
-
-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()]
-})
-```
-
-
-
-
-
-***
-
-#### AddOptions
-
-You can dynamically add options to conversations using .add(options:). This method lets you return additional CometChatConversationOption elements.
-
-
-
-```swift
-cometChatConversations.add(options: { conversation in
- return [ArchiveOption()]
-})
-```
-
-
-
-
-
-***
-
-#### SetCustomSoundForMessages
-
-You can customize the notification sound for incoming messages using .set(customSoundForMessages:). This method accepts a URL pointing to the audio file.
+let conversations = CometChatConversations()
-
-
-```swift
-let soundURL = Bundle.main.url(forResource: "notification_sound", withExtension: "mp3")
-cometChatConversations.set(customSoundForMessages: soundURL!)
+// Hide elements as needed
+conversations.hideSearch = true // Hide search bar
+conversations.hideReceipts = true // Hide read/delivered receipts
+conversations.hideUserStatus = true // Hide online/offline status
+conversations.hideGroupType = true // Hide public/private group icons
+conversations.hideDeleteConversationOption = true // Hide delete option
+conversations.hideNavigationBar = true // Hide navigation bar
+conversations.hideBackButton = true // Hide back button
```
-
-
-
+## Custom Views
-***
+### Custom List Item
-#### SetListItemView
+Replace the entire conversation row with your own design:
-With this function, you can assign a custom ListItem view to the Conversations Component.
-
-
-
```swift
-cometChatConversations.set(listItemView: { conversation in
- let customListItem = CustomListItem()
- customListItem.set(conversation: conversation)
- return customListItem
+conversations.set(listItemView: { conversation in
+ let customView = CustomConversationCell()
+ customView.configure(with: conversation)
+ return customView
})
```
-
-
-
-
-Demonstration
-
-
- 
-
-
-You can create a `CustomListItemView` as a custom `UIView`. Which we will inflate in `setListItemView()`
-
-```swift swift
-
-import UIKit
-import CometChatUIKitSwift
-
-class CustomListItem: UIView {
- // Initialize UI components
- private var profileImageView: CometChatAvatar = {
- let imageView = CometChatAvatar(image: UIImage())
- imageView.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
- return imageView
- }()
-
- private var nameLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
- return label
- }()
-
+```swift
+// CustomConversationCell.swift
+class CustomConversationCell: UIView {
+
+ private let avatarView = CometChatAvatar(image: UIImage())
+ private let nameLabel = UILabel()
+ private let messageLabel = UILabel()
+ private let timeLabel = UILabel()
+ private let unreadBadge = UILabel()
+
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
-
- required init?(coder aDecoder: NSCoder) {
+
+ required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
-
+
private func setupUI() {
- addSubview(profileImageView)
+ avatarView.translatesAutoresizingMaskIntoConstraints = false
+ nameLabel.translatesAutoresizingMaskIntoConstraints = false
+ messageLabel.translatesAutoresizingMaskIntoConstraints = false
+ timeLabel.translatesAutoresizingMaskIntoConstraints = false
+ unreadBadge.translatesAutoresizingMaskIntoConstraints = false
+
+ nameLabel.font = .systemFont(ofSize: 16, weight: .semibold)
+ messageLabel.font = .systemFont(ofSize: 14)
+ messageLabel.textColor = .secondaryLabel
+ timeLabel.font = .systemFont(ofSize: 12)
+ timeLabel.textColor = .tertiaryLabel
+
+ unreadBadge.font = .systemFont(ofSize: 12, weight: .bold)
+ unreadBadge.textColor = .white
+ unreadBadge.backgroundColor = .systemBlue
+ unreadBadge.textAlignment = .center
+ unreadBadge.layer.cornerRadius = 10
+ unreadBadge.clipsToBounds = true
+
+ addSubview(avatarView)
addSubview(nameLabel)
-
+ addSubview(messageLabel)
+ addSubview(timeLabel)
+ addSubview(unreadBadge)
+
NSLayoutConstraint.activate([
- // Profile image constraints
- profileImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
- profileImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
- profileImageView.widthAnchor.constraint(equalToConstant: 40),
- profileImageView.heightAnchor.constraint(equalToConstant: 40),
-
- nameLabel.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: 8),
- nameLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
- nameLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
+ avatarView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
+ avatarView.centerYAnchor.constraint(equalTo: centerYAnchor),
+ avatarView.widthAnchor.constraint(equalToConstant: 50),
+ avatarView.heightAnchor.constraint(equalToConstant: 50),
+
+ nameLabel.leadingAnchor.constraint(equalTo: avatarView.trailingAnchor, constant: 12),
+ nameLabel.topAnchor.constraint(equalTo: avatarView.topAnchor, constant: 4),
+ nameLabel.trailingAnchor.constraint(lessThanOrEqualTo: timeLabel.leadingAnchor, constant: -8),
+
+ messageLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor),
+ messageLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 4),
+ messageLabel.trailingAnchor.constraint(lessThanOrEqualTo: unreadBadge.leadingAnchor, constant: -8),
+
+ timeLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
+ timeLabel.topAnchor.constraint(equalTo: nameLabel.topAnchor),
+
+ unreadBadge.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
+ unreadBadge.centerYAnchor.constraint(equalTo: messageLabel.centerYAnchor),
+ unreadBadge.widthAnchor.constraint(greaterThanOrEqualToConstant: 20),
+ unreadBadge.heightAnchor.constraint(equalToConstant: 20)
])
}
-
- func set(conversation: Conversation) {
+
+ func configure(with conversation: Conversation) {
+ var name = ""
var avatarURL: String?
- if let group = conversation.conversationWith as? Group {
- nameLabel.text = group.name
- avatarURL = group.icon
- }
-
+
if let user = conversation.conversationWith as? User {
- nameLabel.text = user.name
+ name = user.name ?? ""
avatarURL = user.avatar
+ } else if let group = conversation.conversationWith as? Group {
+ name = group.name ?? ""
+ avatarURL = group.icon
}
-
-
-
-
- self.profileImageView.setAvatar(avatarUrl: avatarURL, with: nameLabel.text)
+
+ nameLabel.text = name
+ avatarView.setAvatar(avatarUrl: avatarURL, with: name)
+
+ // Set last message
+ if let textMessage = conversation.lastMessage as? TextMessage {
+ messageLabel.text = textMessage.text
+ } else if conversation.lastMessage is MediaMessage {
+ messageLabel.text = "📎 Attachment"
+ } else {
+ messageLabel.text = "No messages yet"
+ }
+
+ // Set time
+ if let sentAt = conversation.lastMessage?.sentAt {
+ let date = Date(timeIntervalSince1970: TimeInterval(sentAt))
+ let formatter = DateFormatter()
+ formatter.dateFormat = "h:mm a"
+ timeLabel.text = formatter.string(from: date)
+ }
+
+ // Set unread count
+ let unreadCount = conversation.unreadMessageCount
+ unreadBadge.isHidden = unreadCount == 0
+ unreadBadge.text = unreadCount > 99 ? "99+" : "\(unreadCount)"
}
}
```
-***
-
-#### SetLeadingView
-
-You can modify the leading view of a conversation cell using .set(leadingView:).
-
-
-
-```swift
-cometChatConversations.set(leadingView: { conversation in
- let view = CustomLeadingView()
- return view
-})
-```
-
-
+### Custom Subtitle View
-
+Customize just the subtitle area (below the name):
-Demonstration
-
-
- 
-
-
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
-
-
-
```swift
-import UIKit
-
-class CustomLeadingView: UIView {
+conversations.set(subtitleView: { conversation in
+ let label = UILabel()
+ label.font = .systemFont(ofSize: 13)
+ label.textColor = .secondaryLabel
- private let chatIcon: UIImageView = {
- let imageView = UIImageView()
- let config = UIImage.SymbolConfiguration(pointSize: 20, weight: .bold)
- imageView.image = UIImage(systemName: "bubble.left.and.bubble.right.fill", withConfiguration: config)
- imageView.tintColor = .black
- imageView.translatesAutoresizingMaskIntoConstraints = false
- return imageView
- }()
-
- init() {
- super.init(frame: .zero)
- setupUI()
- }
-
- required init?(coder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
+ if let textMessage = conversation.lastMessage as? TextMessage {
+ label.text = textMessage.text
+ } else if conversation.lastMessage is MediaMessage {
+ label.text = "📷 Photo"
}
- private func setupUI() {
- backgroundColor = UIColor.purple.withAlphaComponent(0.2)
- layer.cornerRadius = 8
- layer.borderWidth = 2
- layer.borderColor = UIColor.orange.cgColor
- translatesAutoresizingMaskIntoConstraints = false
-
- addSubview(chatIcon)
-
- NSLayoutConstraint.activate([
- chatIcon.centerXAnchor.constraint(equalTo: centerXAnchor),
- chatIcon.centerYAnchor.constraint(equalTo: centerYAnchor)
- ])
- }
-}
-```
-
-
-
-
-
-***
-
-#### SetTitleView
-
-You can customize the title view of a conversation cell using .set(titleView:).
-
-
-
-```swift
-cometChatConversations.set(titleView: { conversation in
- let view = CustomTitleView()
- return view
-})
+ return label
+})
```
-
+### Custom Date Format
-
-
-Demonstration
-
-
- 
-
-
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
-
-
-
```swift
-import UIKit
-
-class CustomTitleView: UIView {
-
- private let avatarImageView: UIView = {
- let view = UIView()
- view.backgroundColor = UIColor.purple.withAlphaComponent(0.3)
- view.layer.cornerRadius = 20
- view.translatesAutoresizingMaskIntoConstraints = false
-
- let initialsLabel = UILabel()
- initialsLabel.text = "GA"
- initialsLabel.font = UIFont.boldSystemFont(ofSize: 16)
- initialsLabel.textColor = .white
- initialsLabel.translatesAutoresizingMaskIntoConstraints = false
-
- view.addSubview(initialsLabel)
- NSLayoutConstraint.activate([
- initialsLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
- initialsLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor)
- ])
-
- return view
- }()
-
- private let onlineIndicator: UIView = {
- let view = UIView()
- view.backgroundColor = .green
- view.layer.cornerRadius = 5
- view.translatesAutoresizingMaskIntoConstraints = false
- return view
- }()
+conversations.set(datePattern: { conversation in
+ guard let sentAt = conversation.lastMessage?.sentAt else { return "" }
- private let nameLabel: UILabel = {
- let label = UILabel()
- label.text = "George Alan"
- label.font = UIFont.boldSystemFont(ofSize: 14)
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
-
- private let statusLabel: UILabel = {
- let label = UILabel()
- label.text = "📅 In meeting"
- label.textColor = .systemBlue
- label.font = UIFont.systemFont(ofSize: 14)
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
-
- private let timestampLabel: UILabel = {
- let label = UILabel()
- label.text = "07:35 PM"
- label.textColor = .gray
- label.font = UIFont.systemFont(ofSize: 12)
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
-
- private let messageLabel: UILabel = {
- let label = UILabel()
- label.text = "I'll take it. Can you ship it?"
- label.textColor = .darkGray
- label.font = UIFont.systemFont(ofSize: 14)
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
+ let date = Date(timeIntervalSince1970: TimeInterval(sentAt))
+ let formatter = DateFormatter()
- init() {
- super.init(frame: .zero)
- setupUI()
+ if Calendar.current.isDateInToday(date) {
+ formatter.dateFormat = "h:mm a"
+ } else if Calendar.current.isDateInYesterday(date) {
+ return "Yesterday"
+ } else {
+ formatter.dateFormat = "MMM d"
}
- required init?(coder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
- }
-
- private func setupUI() {
- addSubview(avatarImageView)
- addSubview(onlineIndicator)
- addSubview(nameLabel)
- addSubview(statusLabel)
- addSubview(timestampLabel)
- addSubview(messageLabel)
-
- NSLayoutConstraint.activate([
- avatarImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
- avatarImageView.topAnchor.constraint(equalTo: topAnchor),
- avatarImageView.widthAnchor.constraint(equalToConstant: 40),
- avatarImageView.heightAnchor.constraint(equalToConstant: 40),
-
- onlineIndicator.bottomAnchor.constraint(equalTo: avatarImageView.bottomAnchor, constant: -2),
- onlineIndicator.trailingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: -2),
- onlineIndicator.widthAnchor.constraint(equalToConstant: 10),
- onlineIndicator.heightAnchor.constraint(equalToConstant: 10),
-
- nameLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 8),
- nameLabel.topAnchor.constraint(equalTo: topAnchor),
-
- statusLabel.leadingAnchor.constraint(equalTo: nameLabel.trailingAnchor, constant: 4),
- statusLabel.centerYAnchor.constraint(equalTo: nameLabel.centerYAnchor),
-
- timestampLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
- timestampLabel.topAnchor.constraint(equalTo: topAnchor),
-
- messageLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor),
- messageLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 2),
- messageLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
- messageLabel.bottomAnchor.constraint(equalTo: bottomAnchor)
- ])
- }
-}
-
+ return formatter.string(from: date)
+})
```
-
-
-
+## Listen for Events
-***
+React to conversation changes in your app:
-#### SetTrailView
-
-You can modify the trailing view of a conversation cell using .set(trailView:).
-
-
-
```swift
-cometChatConversations.set(trailView: { conversation in
- let view = CustomTrailView()
- return view
-})
-```
-
-
-
-
-
-Demonstration
-
-
- 
-
-
-You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`
-
-
-
-```swift
-import UIKit
-
-class CustomTrailView: UIView {
-
- private let timeLabel: UILabel = {
- let label = UILabel()
- label.text = "10"
- label.font = UIFont.boldSystemFont(ofSize: 20)
- label.textColor = .purple
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
+class MyViewController: UIViewController, CometChatConversationEventListener {
- private let subtextLabel: UILabel = {
- let label = UILabel()
- label.text = "Mins ago"
- label.font = UIFont.systemFont(ofSize: 14)
- label.textColor = .purple
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
-
- init() {
- super.init(frame: .zero)
- setupUI()
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ CometChatConversationEvents.addListener("my-listener", self)
}
- required init?(coder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
+ override func viewWillDisappear(_ animated: Bool) {
+ super.viewWillDisappear(animated)
+ CometChatConversationEvents.removeListener("my-listener")
}
- private func setupUI() {
- backgroundColor = UIColor.purple.withAlphaComponent(0.2)
- layer.cornerRadius = 8
- translatesAutoresizingMaskIntoConstraints = false
-
- addSubview(timeLabel)
- addSubview(subtextLabel)
-
- NSLayoutConstraint.activate([
- timeLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
- timeLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
-
- subtextLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
- subtextLabel.topAnchor.constraint(equalTo: timeLabel.bottomAnchor, constant: 4),
- subtextLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
- ])
+ // Called when a conversation is deleted
+ func ccConversationDelete(conversation: Conversation) {
+ print("Conversation deleted: \(conversation.conversationId ?? "")")
}
}
-
```
-
-
-
+## Complete App Example
-***
+Here's a full implementation with tab bar integration:
-#### SetSubtitleView
-
-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 `UIView` `cocoa 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:
-
-```swift swift
import UIKit
import CometChatUIKitSwift
import CometChatSDK
-class CustomSubtitleView: UIView {
-
- // MARK: - Properties
- private let subtitleLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false
- label.font = UIFont.systemFont(ofSize: 14, weight: .regular) // Customize font
- label.textColor = .darkGray // Customize text color
- label.numberOfLines = 1 // Single line
- label.textAlignment = .left // Align to the left
- return label
- }()
-
- // MARK: - Initializers
- override init(frame: CGRect) {
- super.init(frame: frame)
- setupView()
- }
+class MainTabBarController: UITabBarController {
- required init?(coder: NSCoder) {
- super.init(coder: coder)
- setupView()
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupTabs()
}
- // MARK: - Setup
- private func setupView() {
- addSubview(subtitleLabel)
+ private func setupTabs() {
+ // Conversations Tab
+ let conversationsVC = ConversationsContainerViewController()
+ conversationsVC.tabBarItem = UITabBarItem(
+ title: "Chats",
+ image: UIImage(systemName: "message"),
+ selectedImage: UIImage(systemName: "message.fill")
+ )
- // Constraints
- NSLayoutConstraint.activate([
- subtitleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
- subtitleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
- subtitleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 4),
- subtitleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -4)
- ])
+ // Users Tab
+ let usersVC = UINavigationController(rootViewController: CometChatUsers())
+ usersVC.tabBarItem = UITabBarItem(
+ title: "Users",
+ image: UIImage(systemName: "person.2"),
+ selectedImage: UIImage(systemName: "person.2.fill")
+ )
+
+ // Groups Tab
+ let groupsVC = UINavigationController(rootViewController: CometChatGroups())
+ groupsVC.tabBarItem = UITabBarItem(
+ title: "Groups",
+ image: UIImage(systemName: "person.3"),
+ selectedImage: UIImage(systemName: "person.3.fill")
+ )
+
+ viewControllers = [conversationsVC, usersVC, groupsVC]
}
+}
+
+class ConversationsContainerViewController: UINavigationController {
- // MARK: - Configuration
- func set(conversation: Conversation) {
- subtitleLabel.text = conversation.lastMessage
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ let conversations = CometChatConversations()
+
+ // Navigate to messages on tap
+ conversations.set(onItemClick: { [weak self] conversation, _ in
+ let messagesVC = CometChatMessages()
+
+ if let user = conversation.conversationWith as? User {
+ messagesVC.set(user: user)
+ } else if let group = conversation.conversationWith as? Group {
+ messagesVC.set(group: group)
+ }
+
+ self?.pushViewController(messagesVC, animated: true)
+ })
+
+ setViewControllers([conversations], animated: false)
}
}
```
-***
-
-#### SetLoadingView
-
-You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.
-
-
-
-```swift
-let loadingIndicator = UIActivityIndicatorView(style: .medium)
-loadingIndicator.startAnimating()
-cometChatConversations.set(loadingView: loadingIndicator)
-```
-
-
-
-
-
-***
-
-#### SetErrorView
-
-You can customize the error view using .set(errorView:). This method accepts a UIView that appears when an error occurs.
-
-
-
-```swift
-let errorLabel = UILabel()
-errorLabel.text = "Something went wrong!"
-errorLabel.textColor = .red
-cometChatConversations.set(errorView: errorLabel)
-```
-
-
-
-
-
-***
-
-#### SetEmptyView
-
-You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no conversations are available.
-
-
-
-```swift
-let emptyLabel = UILabel()
-emptyLabel.text = "No conversations found"
-emptyLabel.textColor = .gray
-emptyLabel.textAlignment = .center
-cometChatConversations.set(emptyView: emptyLabel)
-```
+## Troubleshooting
-
+| Issue | Solution |
+|-------|----------|
+| Empty conversation list | Ensure user is logged in and has existing conversations |
+| Conversations not updating | Check that real-time listeners are active |
+| Navigation not working | Verify `navigationController` is not nil |
+| Custom views not appearing | Ensure custom view has proper constraints |
-
+## Related Components
-***
+- [Messages](/ui-kit/ios/message-header) - Display messages in a conversation
+- [Users](/ui-kit/ios/users) - List all users to start new conversations
+- [Groups](/ui-kit/ios/groups) - List all groups
+- [Message Composer](/ui-kit/ios/message-composer) - Send messages
diff --git a/ui-kit/ios/core-features.mdx b/ui-kit/ios/core-features.mdx
index f8e94281..1f22abf2 100644
--- a/ui-kit/ios/core-features.mdx
+++ b/ui-kit/ios/core-features.mdx
@@ -1,209 +1,850 @@
---
-title: "Core"
+title: "Core Features"
+description: "Essential chat features built into CometChat UI Kit for iOS"
---
-## Overview
-
-The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
-
-Here's how different UI Kit components work together to achieve CometChat's Core features:
+CometChat UI Kit provides production-ready components that work together to deliver a complete chat experience. This guide shows how to implement each core feature with copy-paste code examples.
## Instant Messaging
-At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
-
-| Components | Functionality |
-| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [MessageComposer](/ui-kit/ios/message-composer) | [MessageComposer](/ui-kit/ios/message-composer) is a Component that enables users to write and send a variety of messages. |
-| [MessageList](/ui-kit/ios/message-list) | [MessageList](/ui-kit/ios/message-list) is a Component that renders a list of messages sent and messages received using [TextBubble](/ui-kit/ios/message-bubble-styling#text-bubble). |
-
-> [Messages](/ui-kit/ios/message-header) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/ios/message-composer) and the [MessageList](/ui-kit/ios/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it.
-
-## Media Sharing
-
-Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
+Send and receive text messages in real-time.
-| Components | Functionality |
-| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [MessageComposer](/ui-kit/ios/message-composer) | [MessageComposer](/ui-kit/ios/message-composer) is a Component that has ActionSheet, ActionSheet is a menu that appears over the context of the app, providing multiple options for sharing media files. |
-| [MessageList](/ui-kit/ios/message-list) | [MessageList](/ui-kit/ios/message-list) is a Component that renders different Media Message bubbles like [Image Bubble](/ui-kit/ios/message-bubble-styling-styling#image-bubble), [File Bubble](/ui-kit/ios/message-bubble-styling-styling), [Audio Bubble](/ui-kit/ios/message-bubble-styling-styling#audio-bubble) [Video Bubble](/ui-kit/ios/message-bubble-styling#video-bubble) |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ChatViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // For one-on-one chat
+ let messagesVC = CometChatMessages()
+
+ // Set the user to chat with
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+**Components Used:**
+- [MessageComposer](/ui-kit/ios/message-composer) - Text input and send button
+- [MessageList](/ui-kit/ios/message-list) - Displays sent and received messages
+- [Messages](/ui-kit/ios/message-header) - Complete messaging screen (includes both)
-> [Messages](/ui-kit/ios/message-header) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/ios/message-composer) and the [MessageList](/ui-kit/ios/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it.
+## Media Sharing
+
+Share images, videos, audio files, and documents.
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class MediaChatViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ let messagesVC = CometChatMessages()
+
+ // The message composer automatically includes media sharing options
+ // Users can tap the attachment button to share:
+ // - Photos from library
+ // - Camera capture
+ // - Documents
+ // - Audio files
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Send media programmatically
+ func sendImage(to receiverUID: String, imageURL: URL) {
+ let mediaMessage = MediaMessage(
+ receiverUid: receiverUID,
+ fileurl: imageURL.absoluteString,
+ messageType: .image,
+ receiverType: .user
+ )
+
+ CometChat.sendMediaMessage(message: mediaMessage) { message in
+ print("Image sent successfully")
+ } onError: { error in
+ print("Error sending image: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+**Supported Media Types:**
+| Type | Bubble Component |
+|------|------------------|
+| Images | [Image Bubble](/ui-kit/ios/message-bubble-styling#image-bubble) |
+| Videos | [Video Bubble](/ui-kit/ios/message-bubble-styling#video-bubble) |
+| Audio | [Audio Bubble](/ui-kit/ios/message-bubble-styling#audio-bubble) |
+| Files | [File Bubble](/ui-kit/ios/message-bubble-styling#file-bubble) |
## Read Receipts
-CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
+Show when messages are delivered and read.
-| Components | Functionality |
-| ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations) is a Component that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
-| [MessageList](/ui-kit/ios/message-list) | [MessageList](/ui-kit/ios/message-list) is a Component that renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
-| [MessageInformation](/ui-kit/ios/message-information) | [MessageInformation](/ui-kit/ios/message-information) component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. |
-
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ReceiptsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Read receipts are enabled by default
+ let messagesVC = CometChatMessages()
+
+ // To hide receipts:
+ // messagesVC.hideReceipts = true
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // View detailed message information
+ func showMessageInfo(for message: BaseMessage) {
+ let messageInfo = CometChatMessageInformation()
+ messageInfo.set(message: message)
+ navigationController?.pushViewController(messageInfo, animated: true)
+ }
+}
+```
+
+**Receipt States:**
+- ✓ Sent - Message sent to server
+- ✓✓ Delivered - Message delivered to recipient's device
+- ✓✓ (blue) Read - Recipient has seen the message
+
+**Components Used:**
+- [Conversations](/ui-kit/ios/conversations) - Shows receipt status on last message
+- [MessageList](/ui-kit/ios/message-list) - Shows receipts on each message
+- [MessageInformation](/ui-kit/ios/message-information) - Detailed delivery/read info
## Mark As Unread
-Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off.
+Let users mark messages as unread to revisit later.
-| Components | Functionality |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/ios/message-list) | [Message List](/ui-kit/ios/message-list#functionality) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations#functionality) component listens to conversation updates and reflects the updated unread count in real-time. |
-
-## Typing Indicator
-
-The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class UnreadMessagesViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ let messagesVC = CometChatMessages()
+
+ // Enable starting from first unread message
+ messagesVC.scrollToUnreadMessages = true
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Mark a message as unread programmatically
+ func markAsUnread(message: BaseMessage) {
+ CometChat.markAsUnread(
+ baseMessage: message
+ ) { _ in
+ print("Marked as unread")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+## Typing Indicators
+
+Show when users are typing in real-time.
-| Components | Functionality |
-| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations) is a Component that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
-| [Message Header](/ui-kit/ios/message-header) | [Message Header](/ui-kit/ios/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class TypingIndicatorViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Typing indicators are enabled by default in:
+ // - CometChatConversations (shows "typing..." in conversation list)
+ // - CometChatMessageHeader (shows "typing..." below user name)
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Send typing indicator manually
+ func startTyping(to receiverUID: String) {
+ let typingIndicator = TypingIndicator(
+ receiverID: receiverUID,
+ receiverType: .user
+ )
+ CometChat.startTyping(indicator: typingIndicator)
+ }
+
+ func stopTyping(to receiverUID: String) {
+ let typingIndicator = TypingIndicator(
+ receiverID: receiverUID,
+ receiverType: .user
+ )
+ CometChat.endTyping(indicator: typingIndicator)
+ }
+}
+```
+
+**Components Used:**
+- [Conversations](/ui-kit/ios/conversations) - Shows typing in conversation list
+- [MessageHeader](/ui-kit/ios/message-header) - Shows typing below user/group name
## User Presence
-CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
+Display online/offline status for users.
-| Components | Functionality |
-| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations) is a Component that renders Conversations item List, Conversations item also shows user presence information. |
-| [Message Header](/ui-kit/ios/message-header) | [Message Header](/ui-kit/ios/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
-| [Users](/ui-kit/ios/users) | [Users](/ui-kit/ios/users) renders list of users available in your app.It also responsible to render users Presence information. |
-| [Group Members](/ui-kit/ios/group-members) | [Group Members](/ui-kit/ios/group-members) renders list of users available in the group. The Group Members component also handles user Presence information. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class PresenceViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // User presence is shown automatically in:
+ // - CometChatConversations (green dot for online users)
+ // - CometChatMessageHeader (shows "Online" or "Last seen")
+ // - CometChatUsers (green dot for online users)
+ // - CometChatGroupMembers (green dot for online members)
+
+ let conversations = CometChatConversations()
+
+ // To hide user status:
+ // conversations.hideUserStatus = true
+
+ navigationController?.pushViewController(conversations, animated: true)
+ }
+
+ // Listen for presence changes
+ func listenForPresenceChanges() {
+ CometChat.addUserListener("presence-listener", self)
+ }
+}
+
+extension PresenceViewController: CometChatUserDelegate {
+ func onUserOnline(user: User) {
+ print("\(user.name ?? "") is now online")
+ }
+
+ func onUserOffline(user: User) {
+ print("\(user.name ?? "") went offline")
+ }
+}
+```
## Reactions
-CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
-
-The number of reactions displayed depends on the width of the view. For instance, if a message contains 5 reactions but the width of the CometChatReactions view can only accommodate 4 reactions at a time, the first three reactions will be shown along with an additional UI element at the end of the row. This element indicates the number of other unique reactions that are not immediately visible, informing users of the total count of different reactions.
-
-In the example, tapping on this element (depicted as "+2" in the provided image) will by default trigger the CometChatReactionList component. This action opens a modal sheet from the bottom of the screen, displaying all reactions received by the message.
+Let users react to messages with emojis.
-| Components | Functionality |
-| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [MessageList](/ui-kit/ios/message-list) | [MessageList](/ui-kit/ios/message-list) is a Component that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
-| [Messages](/ui-kit/ios/message-header) | [Messages](/ui-kit/ios/message-header) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/ios/message-composer) and the [MessageList](/ui-kit/ios/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ReactionsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Reactions are enabled by default
+ // Users can long-press a message to add reactions
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Add reaction programmatically
+ func addReaction(to message: BaseMessage, emoji: String) {
+ CometChat.addReaction(
+ messageId: message.id,
+ reaction: emoji
+ ) { message in
+ print("Reaction added")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Remove reaction
+ func removeReaction(from message: BaseMessage, emoji: String) {
+ CometChat.removeReaction(
+ messageId: message.id,
+ reaction: emoji
+ ) { message in
+ print("Reaction removed")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
## Mentions
-Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation.
+Tag users in messages with @mentions.
-| Components | Functionality |
-| ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. |
-| [MessageComposer](/ui-kit/ios/message-composer) | [MessageComposer](/ui-kit/ios/message-composer)is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. |
-| [MessageList](/ui-kit/ios/message-list) | [MessageList](/ui-kit/ios/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
-| [Messages](/ui-kit/ios/message-header) | [Messages](/ui-kit/ios/message-header) The component is a comprehensive element in CometChat's UI Kit, encapsulating both the [MessageComposer](/ui-kit/ios/message-composer) and [MessageList](/ui-kit/ios/message-list) components. It fully supports the Mentions feature, providing a streamlined way to implement an interactive and engaging messaging function in your application. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class MentionsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Mentions are enabled by default
+ // Type @ in the composer to see mention suggestions
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getGroup(GUID: "group-123") { group in
+ DispatchQueue.main.async {
+ messagesVC.set(group: group)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Send message with mention programmatically
+ func sendMessageWithMention(to groupID: String, mentionedUser: User) {
+ let textMessage = TextMessage(
+ receiverUid: groupID,
+ text: "Hey @\(mentionedUser.name ?? ""), check this out!",
+ receiverType: .group
+ )
+
+ // Add mentioned users
+ textMessage.mentionedUsers = [mentionedUser]
+
+ CometChat.sendTextMessage(message: textMessage) { message in
+ print("Message with mention sent")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
## Threaded Conversations
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+Reply to specific messages in threads.
-| Components | Functionality |
-| ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| [Threaded Messages](/ui-kit/ios/threaded-messages-header) | [Threaded Messages](/ui-kit/ios/threaded-messages-header) that displays all replies made to a particular message in a conversation. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ThreadedMessagesViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Threaded messages are enabled by default
+ // Users can tap "Reply in thread" on any message
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Open thread view for a message
+ func openThread(for parentMessage: BaseMessage, user: User) {
+ let threadedMessages = CometChatThreadedMessages()
+ threadedMessages.set(parentMessage: parentMessage)
+ threadedMessages.set(user: user)
+ navigationController?.pushViewController(threadedMessages, animated: true)
+ }
+
+ // Send reply in thread programmatically
+ func sendThreadReply(parentMessage: BaseMessage, text: String) {
+ let reply = TextMessage(
+ receiverUid: parentMessage.receiverUid,
+ text: text,
+ receiverType: parentMessage.receiverType
+ )
+ reply.parentMessageId = parentMessage.id
+
+ CometChat.sendTextMessage(message: reply) { message in
+ print("Thread reply sent")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+**Component Used:**
+- [ThreadedMessages](/ui-kit/ios/threaded-messages-header) - Displays thread replies
## Group Chat
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+Create and manage group conversations.
-For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/ios/groups).
-
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class GroupChatViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ showGroupsList()
+ }
+
+ // Show all groups
+ func showGroupsList() {
+ let groups = CometChatGroups()
+
+ groups.set(onItemClick: { [weak self] group, _ in
+ self?.openGroupChat(group: group)
+ })
+
+ navigationController?.pushViewController(groups, animated: true)
+ }
+
+ // Open chat for a group
+ func openGroupChat(group: Group) {
+ let messagesVC = CometChatMessages()
+ messagesVC.set(group: group)
+ navigationController?.pushViewController(messagesVC, animated: true)
+ }
+
+ // Create a new group
+ func createGroup(name: String, type: CometChat.groupType) {
+ let group = Group(
+ guid: UUID().uuidString,
+ name: name,
+ groupType: type,
+ password: nil
+ )
+
+ CometChat.createGroup(group: group) { createdGroup in
+ print("Group created: \(createdGroup.name ?? "")")
+ DispatchQueue.main.async {
+ self.openGroupChat(group: createdGroup)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Join a public group
+ func joinGroup(guid: String) {
+ CometChat.joinGroup(
+ GUID: guid,
+ groupType: .public,
+ password: nil
+ ) { group in
+ print("Joined group: \(group.name ?? "")")
+ DispatchQueue.main.async {
+ self.openGroupChat(group: group)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+**Related Guide:** [Groups](/ui-kit/ios/groups)
## Quoted Reply
-Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.
+Reply to specific messages with context.
-| Components | Functionality |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/android/message-list) | [Message List](/ui-kit/android/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
-| [Message Composer](/ui-kit/android/message-composer) | [Message Composer](/ui-kit/android/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
-
-## Conversation and Advanced Search
-
-Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class QuotedReplyViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Quoted reply is enabled by default
+ // Users can swipe right on a message or tap "Reply" in message actions
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+## Search
+
+Search across conversations and messages.
-| Components | Functionality |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Search](/ui-kit/ios/search) | [Search](/ui-kit/ios/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
-| [Message Header](/ui-kit/ios/message-header) | [Message Header](/ui-kit/ios/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
-| [Message List](/ui-kit/ios/message-list) | [Message List](/ui-kit/ios/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations) displays the search input. |
-
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class SearchViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Search is available in:
+ // - CometChatConversations (search bar at top)
+ // - CometChatMessageHeader (search button)
+
+ let conversations = CometChatConversations()
+
+ // Search is enabled by default
+ // To hide search:
+ // conversations.hideSearch = true
+
+ navigationController?.pushViewController(conversations, animated: true)
+ }
+
+ // Open dedicated search screen
+ func openSearch() {
+ let search = CometChatSearch()
+ navigationController?.pushViewController(search, animated: true)
+ }
+}
+```
+
+**Components Used:**
+- [Search](/ui-kit/ios/search) - Dedicated search screen
+- [MessageHeader](/ui-kit/ios/message-header) - Search within conversation
+- [Conversations](/ui-kit/ios/conversations) - Search conversations
## Moderation
-CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.
+Automatically filter inappropriate content.
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ModerationViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Moderation is handled automatically based on your
+ // CometChat dashboard settings
+
+ // Blocked messages are displayed appropriately
+ // based on your moderation rules
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
-Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation.
+Configure moderation rules in your [CometChat Dashboard](/moderation/overview).
-| Components | Functionality |
-| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/ios/message-list) | [Message List](/ui-kit/ios/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. |
-
-After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators.
-
## Report Message
-The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.
-
-
-Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation.
-
+Allow users to report inappropriate messages.
-| Components | Functionality |
-| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/android/message-list) | [Message List](/ui-kit/android/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ReportMessageViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Report message is available in message actions
+ // Users can long-press a message and select "Report"
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+
+View and manage reported messages in [Flagged Messages](/moderation/flagged-messages).
+
+
+## Complete Chat App Example
+
+Here's a production-ready implementation combining all core features:
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+ var window: UIWindow?
+
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+
+ // Initialize CometChat
+ let uiKitSettings = UIKitSettings()
+ .set(appID: "YOUR_APP_ID")
+ .set(authKey: "YOUR_AUTH_KEY")
+ .set(region: "YOUR_REGION")
+ .build()
+
+ CometChatUIKit.init(uiKitSettings: uiKitSettings) { result in
+ switch result {
+ case .success:
+ self.loginAndShowChat()
+ case .failure(let error):
+ print("Init failed: \(error.localizedDescription)")
+ }
+ }
+
+ return true
+ }
+
+ private func loginAndShowChat() {
+ CometChatUIKit.login(uid: "user-123") { result in
+ switch result {
+ case .success(let user):
+ print("Logged in as: \(user.name ?? "")")
+ DispatchQueue.main.async {
+ self.showMainScreen()
+ }
+ case .failure(let error):
+ print("Login failed: \(error.localizedDescription)")
+ }
+ }
+ }
+
+ private func showMainScreen() {
+ let tabBar = MainTabBarController()
+ window?.rootViewController = tabBar
+ window?.makeKeyAndVisible()
+ }
+}
+
+class MainTabBarController: UITabBarController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Conversations Tab
+ let conversationsNav = UINavigationController()
+ let conversations = CometChatConversations()
+ conversations.set(onItemClick: { [weak conversationsNav] conversation, _ in
+ let messagesVC = CometChatMessages()
+ if let user = conversation.conversationWith as? User {
+ messagesVC.set(user: user)
+ } else if let group = conversation.conversationWith as? Group {
+ messagesVC.set(group: group)
+ }
+ conversationsNav?.pushViewController(messagesVC, animated: true)
+ })
+ conversationsNav.setViewControllers([conversations], animated: false)
+ conversationsNav.tabBarItem = UITabBarItem(
+ title: "Chats",
+ image: UIImage(systemName: "message"),
+ selectedImage: UIImage(systemName: "message.fill")
+ )
+
+ // Users Tab
+ let usersNav = UINavigationController()
+ let users = CometChatUsers()
+ users.set(onItemClick: { [weak usersNav] user, _ in
+ let messagesVC = CometChatMessages()
+ messagesVC.set(user: user)
+ usersNav?.pushViewController(messagesVC, animated: true)
+ })
+ usersNav.setViewControllers([users], animated: false)
+ usersNav.tabBarItem = UITabBarItem(
+ title: "Users",
+ image: UIImage(systemName: "person.2"),
+ selectedImage: UIImage(systemName: "person.2.fill")
+ )
+
+ // Groups Tab
+ let groupsNav = UINavigationController()
+ let groups = CometChatGroups()
+ groups.set(onItemClick: { [weak groupsNav] group, _ in
+ let messagesVC = CometChatMessages()
+ messagesVC.set(group: group)
+ groupsNav?.pushViewController(messagesVC, animated: true)
+ })
+ groupsNav.setViewControllers([groups], animated: false)
+ groupsNav.tabBarItem = UITabBarItem(
+ title: "Groups",
+ image: UIImage(systemName: "person.3"),
+ selectedImage: UIImage(systemName: "person.3.fill")
+ )
+
+ viewControllers = [conversationsNav, usersNav, groupsNav]
+ }
+}
+```
+
+## Feature Summary
+
+| Feature | Component | Enabled by Default |
+|---------|-----------|-------------------|
+| Text Messaging | [Messages](/ui-kit/ios/message-header) | ✅ |
+| Media Sharing | [MessageComposer](/ui-kit/ios/message-composer) | ✅ |
+| Read Receipts | [MessageList](/ui-kit/ios/message-list) | ✅ |
+| Typing Indicators | [MessageHeader](/ui-kit/ios/message-header) | ✅ |
+| User Presence | [Conversations](/ui-kit/ios/conversations) | ✅ |
+| Reactions | [MessageList](/ui-kit/ios/message-list) | ✅ |
+| Mentions | [MessageComposer](/ui-kit/ios/message-composer) | ✅ |
+| Threads | [ThreadedMessages](/ui-kit/ios/threaded-messages-header) | ✅ |
+| Search | [Search](/ui-kit/ios/search) | ✅ |
+| Moderation | Dashboard Config | Configure in Dashboard |
diff --git a/ui-kit/ios/events.mdx b/ui-kit/ios/events.mdx
index ccdfc705..a47d9739 100644
--- a/ui-kit/ios/events.mdx
+++ b/ui-kit/ios/events.mdx
@@ -1,1462 +1,718 @@
---
title: "Events"
+description: "Listen and respond to user actions and state changes in CometChat UI Kit"
---
-## Overview
+Events allow different parts of your app to communicate without direct dependencies. When a user performs an action (like blocking someone, deleting a conversation, or sending a message), events are emitted so other components can react accordingly.
-Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
+## How Events Work
-Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+1. **Subscribe** to events using `addListener` in `viewDidLoad`
+2. **React** to events in your listener callback methods
+3. **Unsubscribe** using `removeListener` in `viewWillDisappear`
-## User Events
-
-CometChatUserEvents emits events when the logged-in user executes some action on another user
-
-It contains the following properties and methods
-
-### observer
-
-This is a List of Dictionary that contains components listening to user events in key value pairs
-
-### Type
-
-`[String: CometChatUserEventListener]()`
-
-***
-
-### addListener
-
-this method stores the passed listenerClass against the passed id in the usersListener.
-
-### Signature
-
-### Uses
-
-
-
-```swift
-addListener(_ id: String,_ observer: CometChatUserEventListener)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | -------------------------- | -------------------------------------- |
-| id | String | the key to store the component against |
-| observer | CometChatUserEventListener | the component listening to user events |
-
-***
-
-### removeListener
-
-this method removes the entry with the passed id from the usersListener.
-
-### Signature
-
-
-
-```swift
-removeListener(_ id: String)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ------ | ------------------------------ |
-| id | String | the key of the entry to remove |
-
-***
-
-### onUserBlock
-
-This method is used to perform some task when the logged-in user has blocked a user
-
-### Signature
-
-
-
```swift
-onUserBlock(user: User)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ---- | ------------------------------ |
-| user | User | the user that has been blocked |
-
-***
-
-### onUserUnblock
-
-This method is used to perform some task when the logged-in user has unblocked a blocked user.
-
-### Signature
-
-
-
-```swift
-onUserUnblock(user: User)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ---- | -------------------------------- |
-| user | User | the user that has been unblocked |
-
-### Return Type
-
-`void`
-
-### Emitting User Events
-
-There are two types of user event listeners, one is for the SDK, which listens for events emitted from the backend for actions taken by users other than the logged in user and second, the events specific to the UI Kit which listens for events emitted from the client side for actions made by the logged-in user. The code snippets shared below contains how to emit such client-side user events to inform other UI components in your project that a user has been blocked or unblocked, the methods being used are static and hence they can be called without having to create an instance of CometChatUserEvents class.
-
-
-
-```swift
-//pass the [User] object of the user which has been blocked by the logged in user
- CometChatUserEvents.emitOnUserBlock(user: User)
-
-//pass the [User] object of the user which has been unblocked by the logged in user
- CometChatUserEvents.emitOnUserUnblock(user: User)
-```
-
-
-
-
-
-***
-
-### Listening to User Events
-
-Here we will go through how anyone can listen to these client-side User Events to update the state of the UI accordingly.
-
-| Events | Description |
-| ----------------- | --------------------------------------------------------------------- |
-| `onUserBlocked` | This will get triggered when the logged in user blocks another user |
-| `onUserUnblocked` | This will get triggered when the logged in user unblocks another user |
-
-
-
-```swift
-// 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 user module
- CometChatUserEvents.addListener("UNIQUE_ID", self as CometChatUserEventListener)
- }
-
- public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events from user module
- CometChatUserEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
- }
-
-
-}
-
- // Listener events from user module
-extension ViewController: CometChatUserEventListener {
-
- func onUserBlock(user: User) {
- // Do Stuff
- }
-
- func onUserUnblock(user: User) {
- // Do Stuff
- }
-}
-```
-
-
-
-
-
-## Group Events
-
-CometChatGroupEvents emits events when the logged-in user executes some action on a group or group member
-
-It contains the following properties and methods:
-
-### observer
-
-This is a List of Dictionary that contains components listening to group events in key value pairs
-
-### Type
-
-`[String: CometChatGroupEventListener]()`
-
-***
-
-### addListener
-
-this method stores the passed listenerClass against the passed listenerId in the observer.
-
-### Signature
-
-
-
-```swift
-addListener(_ id: String,_ observer: CometChatGroupEventListener)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | --------------------------- | --------------------------------------- |
-| id | String | the key to store the component against |
-| observer | CometChatGroupEventListener | the component listening to group events |
-
-***
-
-### removeListener
-
-this method removes the entry with the passed listenerId from the observer.
-
-### Signature
-
-
-
-```swift
-removeListener(_ id: String)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ------ | ------------------------------ |
-| id | String | the key of the entry to remove |
-
-***
-
-### onGroupCreate
-
-This method is used to perform some task when the logged-in user has created a group
-
-### Signature
-
-
-
-```swift
-onGroupCreate(group: Group)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ----- | ----------------------------------- |
-| group | Group | the new group that has been created |
-
-***
-
-### onCreateGroupClick
-
-This method is used to perform some task when the logged-in user click on Create group button
-
-### Signature
-
-
-
-```swift
-onCreateGroupClick()
-```
-
-
-
-
-
-***
-
-### onGroupDelete
-
-This method is used to perform some task when the logged-in user has deleted a group.
-
-### Signature
-
-
-
-```swift
-onGroupDelete(group: Group)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ----- | ------------------------------- |
-| group | Group | the group that has been deleted |
-
-***
-
-### onGroupMemberLeave
-
-This method is used to perform some task when the logged-in user has left a group.
-
-### Signature
-
-
-
-```swift
-onGroupMemberLeave(leftUser: User, leftGroup: Group)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ----- | --------------------------------------------- |
-| leftUser | User | the user that has left the group |
-| leftGroup | Group | the group from which the logged-user has left |
-
-***
-
-### onGroupMemberChangeScope
-
-This method is used to perform some task when the logged-in user has changed the scope of a member of a group.
-
-### Signature
-
-
-
-```swift
-onGroupMemberChangeScope(updatedBy: User , updatedUser: User , scopeChangedTo: CometChat.MemberScope , scopeChangedFrom: CometChat.MemberScope, group: Group)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------------- | ------ | -------------------------------------------------- |
-| updatedBy | User | the user who changed the scope of group member |
-| updatedUser | User | the user whose scope has been changed |
-| scopeChangedTo | String | the new scope |
-| scopeChangedFrom | String | the old scope |
-| group | Group | the group from where the scope change has occurred |
-
-***
-
-### onGroupMemberBan
-
-This method is used to perform some task when the logged-in user has banned a user from the group.
-
-### Signature
-
-
-
-```swift
-onGroupMemberBan(bannedUser: User, bannedGroup: Group, bannedBy: User)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ----- | --------------------------------------------- |
-| bannedUser | User | the user that has been banned |
-| bannedBy | User | the user who has banned |
-| bannedFrom | Group | the group from which the user has been banned |
-
-***
-
-### onGroupMemberKick
-
-This method is used to perform some task when the logged-in user has kicked a user from the group.
-
-### Signature
-
-
-
-```swift
-onGroupMemberKick(kickedUser: User, kickedGroup: Group, kickedBy: User)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ----------- | ----- | --------------------------------------------- |
-| kickedUser | User | the banned user that has been kicked |
-| kickedBy | User | the user who has kicked |
-| kickedGroup | Group | the group from which the user has been kicked |
-
-***
-
-### onGroupMemberUnban
-
-This method is used to perform some task when the logged-in user has unbanned a banned user from a group.
-
-### Signature
-
-
-
-```swift
-onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group, unbannedBy: User)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ------------ | ----- | ------------------------------------------------------ |
-| unbannedUser | User | the banned user that has been unbanned |
-| unbannedBy | User | the user who has unbanned |
-| unbannedFrom | Group | the group from which the banned user has been unbanned |
-
-***
-
-### onGroupMemberJoin
-
-This method is used to perform some task when the logged-in user has joined a group.
-
-### Signature
-
-
-
-```swift
-onGroupMemberJoin(joinedUser: User, joinedGroup: Group)
-```
-
-
-
-
-
-### Parameters
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-| Parameters | Type | Description |
-| ----------- | ----- | -------------------------------------- |
-| joinedUser | User | the user that has been unblocked |
-| joinedGroup | Group | the group the users have been added to |
-
-***
-
-### onGroupMemberAdd
-
-This method is used to perform some task when the logged-in user has added new members to the group
-
-### Signature
-
-
-
-```swift
-onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ----------- | ---------------------------------------- |
-| members | List\ | the list of users added |
-| group | Group | the group the users have been added to |
-| addedBy | User | the user who has added those new members |
-
-***
-
-### onOwnershipChange
-
-This method is used to perform some task when the logged-in user has transferred their ownership of a group.
-
-### Signature
-
-
-
-```swift
-onOwnershipChange(group: Group?, member: GroupMember?)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ----------- | ----------------------------------------------------- |
-| group | Group | the group where the ownership has been changed |
-| member | GroupMember | the group member who has been made owner of the group |
-
-***
-
-### Emitting Group Events
-
-There are two types of group event listeners, one is for the SDK, which listens for events emitted from the backend for actions taken by users other than the logged in user and second, the events specific to the UI Kit which listens for events emitted from the client side for actions made by the logged-in user. The code snippets shared below contains how to emit such client-side group events to inform other UI components in a project that a group has been created or deleted or new members have been added to the group, the logged in user themselves have joined a group, members being banned by the logged in user or the change of ownership or scope of a group member, the methods being used are static and hence they can be called without having to create an instance of CometChatGroupEvents class.
-
-
-
-```swift
-//you need to pass the [Group] object of the group which is created
-CometChatGroupEvents.emitOnGroupCreate(group: Group)
-
-//you need to pass the [Group] object of the group which is deleted
-CometChatGroupEvents.emitOnGroupDelete(group: Group)
-
-//emit this when logged in user leaves the group.
-CometChatGroupEvents.emitOnGroupMemberLeave(leftUser: User, leftGroup: Group)
-
-//emit this when group member's scope is changed by logged in user.
-CometChatGroupEvents.emitOnGroupMemberChangeScope(updatedBy: User , updatedUser: User , scopeChangedTo: CometChat.MemberScope , scopeChangedFrom: CometChat.MemberScope, group: Group)
-
-//emit this when group member is banned from the group by logged in user.
-CometChatGroupEvents.emitOnGroupMemberBan(bannedUser: User, bannedGroup: Group, bannedBy: User)
-
-//emit this when group member is kicked from the group by logged in user.
-CometChatGroupEvents.emitOnGroupMemberKick(kickedUser: User, kickedGroup: Group, kickedBy: User)
-
-//emit this when a banned group member is unbanned from group by logged in user.
-CometChatGroupEvents.emitOnGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group, unbannedBy: User)
-
-//emit this when logged in user has joined a group successfully.
-CometChatGroupEvents.emitOnGroupMemberJoin(joinedUser: User, joinedGroup: Group)
-
-//emit this when members are added to a group by the logged in user.
-CometChatGroupEvents.emitOnGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User)
-
-//emit this when ownership is changed by logged in user.
-CometChatGroupEvents.emitOnGroupMemberChangeScope(updatedBy: User , updatedUser: User , scopeChangedTo: CometChat.MemberScope , scopeChangedFrom: CometChat.MemberScope, group: Group)
-```
-
-
-
-
-
-***
-
-### Listening to Group Events
-
-Here we will go through how anyone can listen to these client-side Group Events to update the state of the UI accordingly.
-
-| Events | Description |
-| -------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| `onGroupCreate` | This will get triggered when the logged in user creates a group |
-| `onGroupDelete` | This will get triggered when the logged in user deletes a group |
-| `onGroupMemberLeave` | This will get triggered when the logged in user leaves a group |
-| `onGroupMemberChangeScope` | This will get triggered when the logged in user changes the scope of another group member |
-| `onGroupMemberBan` | This will get triggered when the logged in user bans a group member from the group |
-| `onGroupMemberKick` | This will get triggered when the logged in user kicks another group member from the group |
-| `onGroupMemberUnban` | This will get triggered when the logged in user unbans a user banned from the group |
-| `onGroupMemberJoin` | This will get triggered when the logged in user joins a group |
-| `onGroupMemberAdd` | This will get triggered when the logged in user add new members to the group |
-| `onOwnershipChange` | This will get triggered when the logged in user transfer the ownership of their group to some other member |
-
-
-
-```swift
-// View controller from your project where you want to listen events.
-public class ViewController: UIViewController {
-
- public override func viewDidLoad() {
+class MyViewController: UIViewController {
+
+ private let listenerId = "my-unique-listener"
+
+ override func viewDidLoad() {
super.viewDidLoad()
-
- // Subscribing for the listener to listen events from user module
- CometChatGroupEvents.addListener("UNIQUE_ID", self as CometChatGroupEventListener)
- }
-
- public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events from user module
- CometChatGroupEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
- }
-
-
-}
-
- // Listener events from groups module
-extension ViewController: CometChatGroupEventListener {
-
- public func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) {
- // Do Stuff
- }
-
- public func onCreateGroupClick() {
- // Do Stuff
- }
-
- public func onGroupCreate(group: Group) {
- // Do Stuff
- }
-
- public func onGroupDelete(group: Group) {
- // Do Stuff
- }
-
- public func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) {
- // Do Stuff
- }
-
- public func onGroupMemberLeave(leftUser: User, leftGroup: Group) {
- // Do Stuff
+
+ // Subscribe to events
+ CometChatUserEvents.addListener(listenerId, self)
+ CometChatGroupEvents.addListener(listenerId, self)
+ CometChatConversationEvents.addListener(listenerId, self)
+ CometChatMessageEvents.addListener(listenerId, self)
+ CometChatCallEvents.addListener(listenerId, self)
}
-
- public func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {
- // Do Stuff
- }
-
- public func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group) {
- // Do Stuff
- }
-
- public func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {
- // Do Stuff
- }
-
- public func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {
- // Do Stuff
- }
-
- public func onOwnershipChange(group: Group?, member: GroupMember?) {
- // Do Stuff
+
+ override func viewWillDisappear(_ animated: Bool) {
+ super.viewWillDisappear(animated)
+
+ // Unsubscribe to prevent memory leaks
+ CometChatUserEvents.removeListener(listenerId)
+ CometChatGroupEvents.removeListener(listenerId)
+ CometChatConversationEvents.removeListener(listenerId)
+ CometChatMessageEvents.removeListener(listenerId)
+ CometChatCallEvents.removeListener(listenerId)
}
}
```
-
-
-
-
-## Conversation Events
-
-CometChatConversationEvents emits events when the logged-in user executes some action on a conversation object
-
-It contains the following properties and methods:
-
-* `ccConversationDeleted`: Triggered when the logged-in user deletes a conversation.
-* `ccUpdateConversation`: Triggered when there is an update in the conversation.
-
-### observer
-
-This is a List of Dictionary that contains components listening to user events in key value pairs
-
-### Type
-
-`[String: CometChatConversationEventListener]()`
-
-***
-
-### addListener
-
-this method stores the passed listenerClass against the passed listenerId in the observer.
-
-### Signature
-
-
-
-```swift
-addListener(_ id: String, _ observer: CometChatConversationEventListener)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | --------------------------- | ---------------------------------------------- |
-| id | String | the key to store the component against |
-| observer | CometChatConversationEvents | the component listening to conversation events |
-
-***
-
-### removeListener
-
-this method removes the entry with the passed id from the observer.
-
-### Signature
-
-
-
-```swift
-removeListener(_ id: String)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ------ | ------------------------------ |
-| id | String | the key of the entry to remove |
-
-### Return Type
-
-`void`
-
-***
-
-### Parameters
-
-| Parameters | Type | Description |
-| ------------ | ------------ | ------------------------------ |
-| conversation | Conversation | the user that has been deleted |
-
-***
-
-### Emitting Conversation Events
+## User Events
-Here we will go through how to emit events specific to the UI Kit which listens for events emitted from the client side for actions made by the logged-in user. The code snippets shared below contains how to emit such client-side conversation events to inform other UI components in a project that a conversation has been deleted, the methods being used are static and hence they can be called without having to create an instance of CometChatConversationEvents class.
+Listen for user-related actions like blocking and unblocking.
-
-
```swift
-//pass the conversation object you want to delete
-CometChatConversationEvents.ccConversationDelete(conversation: Conversation)
-CometChatConversationEvents.ccUpdateConversation(conversation: Conversation)
-```
-
-
-
-
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-***
-
-### Listening to Conversation Events
-
-Here we will go through how anyone can listen to these client-side Conversation Events to update the state of the UI accordingly.
-
-| Event | Description |
-| ---------------------- | --------------------------------------------------------------------------- |
-| `onConversationDelete` | This event will be triggered when the logged in user deletes a conversation |
-| `ccUpdateConversation` | This event will be triggered when the logged in user updates a conversation |
-
-
-
-
-```swift
-// View controller from your project where you want to listen events.
-public class ViewController: UIViewController {
- public override func viewDidLoad() {
+class UserEventsViewController: UIViewController {
+
+ override func viewDidLoad() {
super.viewDidLoad()
-
- // Subscribing for the listener to listen events from conversation module
- CometChatConversationEvents.addListener("UNIQUE_ID", self as CometChatConversationEventListener)
+ CometChatUserEvents.addListener("user-listener", self)
}
-
- 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")
+
+ override func viewWillDisappear(_ animated: Bool) {
+ super.viewWillDisappear(animated)
+ CometChatUserEvents.removeListener("user-listener")
}
}
- // Listener events from conversation module
-extension ViewController: CometChatConversationEventListener {
+extension UserEventsViewController: CometChatUserEventListener {
- func ccConversationDeleted(conversation: Conversation) {
- // Do stuff
+ func onUserBlock(user: User) {
+ print("Blocked: \(user.name ?? "")")
+ // Update UI - hide user from lists, disable messaging
}
- func ccUpdateConversation(conversation: Conversation) {
- // Do stuff
+ func onUserUnblock(user: User) {
+ print("Unblocked: \(user.name ?? "")")
+ // Update UI - show user in lists, enable messaging
}
}
```
-
-
-
-
-## Message Events
-
-CometChatMessageEvents emits events when the logged-in user executes some action involving any message object.
-
-It contains the following properties and methods:
-
-### observer
-
-This is a List of Dictionary that contains components listening to message events in key value pairs
-
-### Type
-
-`[String: CometChatMessageEventListener]()`
-
-***
-
-### addListener
-
-this method stores the passed listenerClass against the passed id in the observer.
-
-### Signature
-
-
-
-```swift
-addListener(_ id: String,_ observer: CometChatMessageEventListener)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ----------------------------- | ----------------------------------------- |
-| id | String | the key to store the component against |
-| observer | CometChatMessageEventListener | the component listening to message events |
-
-***
-
-### removeListener
-
-this method removes the entry with the passed id from the observer.
-
-### Signature
-
-
-
-```swift
-removeListener(_ id: String)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ------ | ------------------------------ |
-| id | String | the key of the entry to remove |
-
-***
-
-### onMessageSent
-
-This method is used to perform some task when the logged-in user has sent a message
-
-### Signature
-
-
-
-```swift
-onMessageSent(message: BaseMessage, status: MessageStatus)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ------------- | ------------- | -------------------------------------------------------------------- |
-| message | BaseMessage | the message that has been sent |
-| messageStatus | MessageStatus | the status of the message, it can be `inProgress`, `sent` or `error` |
-
-***
-
-### onMessageEdit
-
-This method is used to perform some task when the logged-in user has edited a message
-
-### Signature
-
-
-
-```swift
-onMessageEdit(message: BaseMessage, status: MessageStatus)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ------------- | ----------------- | -------------------------------------------------------------- |
-| message | BaseMessage | the message that has been sent |
-| messageStatus | MessageEditStatus | the status of the message, it can be `inProgress` or `success` |
-
-***
-
-### onMessageDelete
-
-This method is used to perform some task when the logged-in user has deleted a message
-
-### Signature
-
-
-
-```swift
-onMessageDelete(message: BaseMessage)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ------------- | ----------- | -------------------------------------------------------------- |
-| message | BaseMessage | the message that has been sent |
-| messageStatus | EventStatus | the status of the message, it can be `inProgress` or `success` |
-
-***
-
-### onMessageRead
-
-This method is used to perform some task when the logged-in user has read a message
-
-### Signature
-
-
-
-```swift
-onMessageRead(message: BaseMessage)
-```
-
-
-
-
-
-### Parameters
-
-| Parameters | Type | Description |
-| ---------- | ----------- | ------------------------------ |
-| message | BaseMessage | the message that has been read |
-
-***
-
-### onLiveReaction
-
-This method is used to perform some task when the logged-in user has a sent a transient message
+### Emit User Events
-### Signature
+Notify other components when you block/unblock a user:
-
-
```swift
-onLiveReaction(reaction: TransientMessage)
+// After blocking a user
+CometChatUserEvents.emitOnUserBlock(user: blockedUser)
+
+// After unblocking a user
+CometChatUserEvents.emitOnUserUnblock(user: unblockedUser)
```
-
+### User Events Reference
+
+| Event | Description |
+|-------|-------------|
+| `onUserBlock` | User was blocked by logged-in user |
+| `onUserUnblock` | User was unblocked by logged-in user |
-
+## Group Events
-### Parameters
+Listen for group-related actions like creating groups, adding members, and role changes.
-| Parameters | Type | Description |
-| ---------- | ---------------- | -------------------------------------- |
-| reaction | TransientMessage | the image to send as transient message |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-***
+class GroupEventsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ CometChatGroupEvents.addListener("group-listener", self)
+ }
+
+ override func viewWillDisappear(_ animated: Bool) {
+ super.viewWillDisappear(animated)
+ CometChatGroupEvents.removeListener("group-listener")
+ }
+}
-### onViewInformation
+extension GroupEventsViewController: CometChatGroupEventListener {
+
+ // Group lifecycle
+ func onGroupCreate(group: Group) {
+ print("Group created: \(group.name ?? "")")
+ }
+
+ func onGroupDelete(group: Group) {
+ print("Group deleted: \(group.name ?? "")")
+ }
+
+ func onCreateGroupClick() {
+ print("Create group button tapped")
+ }
+
+ // Member join/leave
+ func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) {
+ print("\(joinedUser.name ?? "") joined \(joinedGroup.name ?? "")")
+ }
+
+ func onGroupMemberLeave(leftUser: User, leftGroup: Group) {
+ print("\(leftUser.name ?? "") left \(leftGroup.name ?? "")")
+ }
+
+ func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) {
+ print("\(members.count) members added to \(group.name ?? "")")
+ }
+
+ // Moderation
+ func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {
+ print("\(kickedUser.name ?? "") kicked from \(kickedGroup.name ?? "")")
+ }
+
+ func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {
+ print("\(bannedUser.name ?? "") banned from \(bannedGroup.name ?? "")")
+ }
+
+ func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group) {
+ print("\(unbannedUserUser.name ?? "") unbanned")
+ }
+
+ // Role changes
+ func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {
+ print("\(updatedUser.name ?? "") role: \(scopeChangedFrom) → \(scopeChangedTo)")
+ }
+
+ func onOwnershipChange(group: Group?, member: GroupMember?) {
+ print("Ownership transferred to \(member?.name ?? "")")
+ }
+}
+```
-This method is used to perform some task when the logged-in user click on detail button.
+### Emit Group Events
-### Signature
+Notify other components about group actions:
-
-
```swift
-onViewInformation(group: Group)
-```
+// Group created
+CometChatGroupEvents.emitOnGroupCreate(group: newGroup)
-
+// Group deleted
+CometChatGroupEvents.emitOnGroupDelete(group: deletedGroup)
-
+// Member joined
+CometChatGroupEvents.emitOnGroupMemberJoin(joinedUser: user, joinedGroup: group)
-| Parameters | Type | Description |
-| ---------- | ----- | -------------------------------------------------- |
-| group | Group | the group for which the information has been shown |
+// Member left
+CometChatGroupEvents.emitOnGroupMemberLeave(leftUser: user, leftGroup: group)
-***
+// Members added
+CometChatGroupEvents.emitOnGroupMemberAdd(group: group, members: newMembers, addedBy: currentUser)
-### onParentMessageUpdate
+// Member kicked
+CometChatGroupEvents.emitOnGroupMemberKick(kickedUser: user, kickedGroup: group, kickedBy: admin)
-This method is used to perform some task when the logged-in user updates a message that has replies.
+// Member banned
+CometChatGroupEvents.emitOnGroupMemberBan(bannedUser: user, bannedGroup: group, bannedBy: admin)
-### Signature
+// Member unbanned
+CometChatGroupEvents.emitOnGroupMemberUnban(unbannedUserUser: user, unbannedUserGroup: group, unbannedBy: admin)
-
-
-```swift
-onParentMessageUpdate(message: BaseMessage)
+// Role changed
+CometChatGroupEvents.emitOnGroupMemberChangeScope(
+ updatedBy: admin,
+ updatedUser: member,
+ scopeChangedTo: .admin,
+ scopeChangedFrom: .participant,
+ group: group
+)
```
-
+### Group Events Reference
-
+| Event | Description |
+|-------|-------------|
+| `onGroupCreate` | New group created |
+| `onGroupDelete` | Group deleted |
+| `onCreateGroupClick` | Create group button tapped |
+| `onGroupMemberJoin` | User joined a group |
+| `onGroupMemberLeave` | User left a group |
+| `onGroupMemberAdd` | Members added to group |
+| `onGroupMemberKick` | Member kicked from group |
+| `onGroupMemberBan` | Member banned from group |
+| `onGroupMemberUnban` | Member unbanned |
+| `onGroupMemberChangeScope` | Member role changed |
+| `onOwnershipChange` | Group ownership transferred |
-| Parameters | Type | Description |
-| ---------- | ----------- | --------------------------------- |
-| message | BaseMessage | the message that has been updated |
-
-***
-
-### Emitting Message Events
+## Conversation Events
-There are two types of message event listeners, one is for the SDK, which listens for events emitted from the backend for actions taken by users other than the logged in user; and second, the events specific to the UI Kit which listens for events emitted from the client side for actions made by the logged-in user. The code snippets shared below contains how to emit such client-side message events to inform other UI components in a project.
+Listen for conversation-level actions like delete and update.
-
-
```swift
-//emit this when the logged in user has sent a message. Pass the object of the [TextMessage], [MediaMessage] or [CustomMessage] being sent and the [MessageStatus] if [inProgress], [sent] successfully or failed with [error]*_
-CometChatMessageEvents.emitOnMessageSent(message: BaseMessage, status: MessageStatus)
-
-//emit this for when a message is edited by logged-in user. Pass the object of the [TextMessage], [MediaMessage] or [CustomMessage] being edited and the [MessageEditStatus] if [inProgress] or [success]*_
-CometChatMessageEvents.emitOnMessageEdit(message: BaseMessage, status: MessageStatus)
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-//emit this when a message is being deleted by logged-in user. Pass the object of the [TextMessage], [MediaMessage] or [CustomMessage] being deleted and also pass the [EventStatus] if [inProgress] or [success]*_
-CometChatMessageEvents.emitOnMessageDelete(message: BaseMessage)
+class ConversationEventsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ CometChatConversationEvents.addListener("conversation-listener", self)
+ }
+
+ override func viewWillDisappear(_ animated: Bool) {
+ super.viewWillDisappear(animated)
+ CometChatConversationEvents.removeListener("conversation-listener")
+ }
+}
-//emit this when a message is read by logged-in user. Pass the object of the [TextMessage], [MediaMessage] or [CustomMessage] being read*_
-CometChatMessageEvents.emitOnMessageRead(message: BaseMessage)
+extension ConversationEventsViewController: CometChatConversationEventListener {
+
+ func ccConversationDeleted(conversation: Conversation) {
+ print("Conversation deleted: \(conversation.conversationId ?? "")")
+ // Remove from local list, update UI
+ }
+
+ func ccUpdateConversation(conversation: Conversation) {
+ print("Conversation updated: \(conversation.conversationId ?? "")")
+ // Refresh conversation data in UI
+ }
+}
+```
-//emit this when a transient message is sent by logged-in user. Pass a [String] asset image of the Live Reaction to show in the animation*_
-CometChatMessageEvents.emitOnLiveReaction(reaction: TransientMessage)
+### Emit Conversation Events
-//emit this when the logged in user clicked on detail icon.*_
-CometChatMessageEvents.emitOnViewInformation(user: User)
+```swift
+// Conversation deleted
+CometChatConversationEvents.ccConversationDelete(conversation: deletedConversation)
-//emit this when the logged in user updates a message that contains replies.*_
-CometChatMessageEvents.emitOnParentMessageUpdate(message: BaseMessage)
+// Conversation updated
+CometChatConversationEvents.ccUpdateConversation(conversation: updatedConversation)
```
-
-
-
+### Conversation Events Reference
-***
+| Event | Description |
+|-------|-------------|
+| `ccConversationDeleted` | Conversation was deleted |
+| `ccUpdateConversation` | Conversation was updated |
-### Listening to Message Events
-
-Here we will go through how anyone can listen to these client-side Message Events to update the state of the UI accordingly.
+## Message Events
-| Events | Description |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| onMessageSent | Triggers whenever a loggedIn user sends any message, it will have two states such as: inProgress & sent |
-| onMessageEdit | Triggers whenever a loggedIn user edits any message from the list of messages .it will have two states such as: inProgress & sent |
-| onMessageDelete | Triggers whenever a loggedIn user deletes any message from the list of messages |
-| onMessageRead | Triggers whenever a loggedIn user reads any message. |
-| onLiveReaction | Triggers whenever a loggedIn user clicks on live reaction |
-| onViewInformation | Triggers whenever a loggedIn user clicks on detail icon |
-| onParentMessageUpdate | Triggers whenever a loggedIn user updates a message that contains replies. |
+Listen for message-related actions like send, edit, delete, and reactions.
-
-
```swift
-// View controller from your project where you want to listen events.
-public class ViewController: UIViewController {
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
- public override func viewDidLoad() {
+class MessageEventsViewController: UIViewController {
+
+ override func viewDidLoad() {
super.viewDidLoad()
-
- // Subscribing for the listener to listen events from message module
- CometChatMessageEvents.addListener("UNIQUE_ID", self as CometChatMessageEventListener)
+ CometChatMessageEvents.addListener("message-listener", self)
}
-
- public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events from message module
- CometChatMessageEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
+
+ override func viewWillDisappear(_ animated: Bool) {
+ super.viewWillDisappear(animated)
+ CometChatMessageEvents.removeListener("message-listener")
}
-
-
}
- // Listener events from message module
-extension ViewController: CometChatMessageEventListener {
-
- func onMessageSent(message: BaseMessage, status: MessageStatus) {
- // Do Stuff
+extension MessageEventsViewController: CometChatMessageEventListener {
+
+ // Message lifecycle
+ func onMessageSent(message: BaseMessage, status: MessageStatus) {
+ switch status {
+ case .inProgress:
+ print("Sending...")
+ case .success:
+ print("Message sent: \(message.id)")
+ case .error:
+ print("Send failed")
+ @unknown default:
+ break
+ }
}
-
+
func onMessageEdit(message: BaseMessage, status: MessageStatus) {
- // Do Stuff
+ print("Message edited: \(message.id)")
}
-
+
func onMessageDelete(message: BaseMessage, status: MessageStatus) {
- // Do Stuff
+ print("Message deleted: \(message.id)")
}
-
+
+ func onMessageRead(message: BaseMessage) {
+ print("Message read: \(message.id)")
+ }
+
func onMessageReply(message: BaseMessage, status: MessageStatus) {
- // Do Stuff
+ print("Reply sent to: \(message.id)")
}
-
- func onMessageRead(message: BaseMessage) {
- // Do Stuff
+
+ // Reactions
+ func onMessageReact(message: BaseMessage, reaction: CometChatMessageReaction) {
+ print("Reaction: \(reaction.reaction ?? "")")
}
-
+
func onLiveReaction(reaction: TransientMessage) {
- // Do Stuff
+ print("Live reaction received")
}
-
- func onMessageError(error: CometChatException) {
- // Do Stuff
+
+ // Thread updates
+ func onParentMessageUpdate(message: BaseMessage) {
+ print("Thread parent updated: \(message.id)")
}
-
- func onVoiceCall(user: User) {
- // Do Stuff
+
+ // Navigation
+ func onViewInformation(user: User) {
+ print("View user info: \(user.name ?? "")")
}
-
- func onVoiceCall(group: Group) {
- // Do Stuff
+
+ func onViewInformation(group: Group) {
+ print("View group info: \(group.name ?? "")")
}
-
+
+ // Calls from message screen
+ func onVoiceCall(user: User) {
+ print("Voice call to: \(user.name ?? "")")
+ }
+
func onVideoCall(user: User) {
- // Do Stuff
+ print("Video call to: \(user.name ?? "")")
}
-
- func onVideoCall(group: Group) {
- // Do Stuff
+
+ func onVoiceCall(group: Group) {
+ print("Group voice call: \(group.name ?? "")")
}
-
- func onViewInformation(user: User) {
- // Do Stuff
+
+ func onVideoCall(group: Group) {
+ print("Group video call: \(group.name ?? "")")
}
-
- func onMessageReact(message: BaseMessage, reaction: CometChatMessageReaction) {
- // Do Stuff
+
+ // Errors
+ func onMessageError(error: CometChatException) {
+ print("Error: \(error.errorDescription)")
}
-
}
```
-
-
-
-
-## Call Events
-
-CometChatCallEvents emits events when the logged-in user executes some action involving any call object.
-
-It contains the following properties and methods:
-
-### observer
-
-This is a List of Dictionary that contains components listening to call events in key value pairs
-
-### Type
-
-`[String:`CometChatCallEventListener]\()
-
-***
-
-### addListener
-
-This method stores the passed listenerClass against the passed id in the addListener.
-
-### Signature
-
-
-
-```swift
-addListener(_ id: String,_ observer: CometChatCallEventListener)
-```
-
-
-
-
-
-| Parameters | Type | Description |
-| ---------- | -------------------------- | -------------------------------------- |
-| id | String | the key to store the component against |
-| observer | CometChatCallEventListener | the component listening to call events |
+### Emit Message Events
-***
-
-### removeListener
-
-This method removes the entry with the passed id from the observer.
-
-### Signature
-
-
-
```swift
-removeListener(_ id: String)
-```
-
-
+// Message sent (with status)
+CometChatMessageEvents.emitOnMessageSent(message: sentMessage, status: .success)
-
+// Message edited
+CometChatMessageEvents.emitOnMessageEdit(message: editedMessage, status: .success)
-| Parameter | Type | Description |
-| --------- | ------ | ------------------------------ |
-| id | String | the key of the entry to remove |
+// Message deleted
+CometChatMessageEvents.emitOnMessageDelete(message: deletedMessage)
-***
+// Message read
+CometChatMessageEvents.emitOnMessageRead(message: readMessage)
-### onIncomingCallAccepted
+// Live reaction
+CometChatMessageEvents.emitOnLiveReaction(reaction: transientMessage)
-This method is used to perform some task when the logged-in user accepts the incoming call
+// View user/group info
+CometChatMessageEvents.emitOnViewInformation(user: selectedUser)
-### Signature
-
-
-
-```swift
-onIncomingCallAccepted(call: Call)
+// Thread parent updated
+CometChatMessageEvents.emitOnParentMessageUpdate(message: parentMessage)
```
-
+### Message Events Reference
-
+| Event | Description |
+|-------|-------------|
+| `onMessageSent` | Message sent (inProgress, success, or error) |
+| `onMessageEdit` | Message edited |
+| `onMessageDelete` | Message deleted |
+| `onMessageRead` | Message marked as read |
+| `onMessageReply` | Reply sent to a message |
+| `onMessageReact` | Reaction added to message |
+| `onLiveReaction` | Live reaction sent |
+| `onParentMessageUpdate` | Thread parent message updated |
+| `onViewInformation` | Info button tapped (user or group) |
+| `onVoiceCall` | Voice call initiated |
+| `onVideoCall` | Video call initiated |
+| `onMessageError` | Message operation failed |
-| Parameters | Type | Description |
-| ---------- | ---- | ------------------------------- |
-| call | Call | the call that has been accepted |
-
-***
-
-### onIncomingCallRejected
-
-This method is used to perform some task when the logged-in user rejects the incoming call
+## Call Events
-### Signature
+Listen for call-related actions like initiating, accepting, and ending calls.
-
-
```swift
-onIncomingCallRejected(call: Call)
-```
-
-
-
-
-
-| Parameters | Type | Description |
-| ---------- | ---- | ------------------------------- |
-| call | Call | the call that has been rejected |
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-***
-
-### onCallInitiated
-
-This method is used to perform some task when the logged-in user initiates a call
-
-### Signature
+class CallEventsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ CometChatCallEvents.addListener("call-listener", self)
+ }
+
+ override func viewWillDisappear(_ animated: Bool) {
+ super.viewWillDisappear(animated)
+ CometChatCallEvents.removeListener("call-listener")
+ }
+}
-
-
-```swift
-onCallInitiated(call: Call)
+extension CallEventsViewController: CometChatCallEventListener {
+
+ // Outgoing calls
+ func onCallInitiated(call: Call) {
+ print("Calling: \(call.receiverUid)")
+ }
+
+ func onOutgoingCallAccepted(call: Call) {
+ print("Call accepted by recipient")
+ }
+
+ func onOutgoingCallRejected(call: Call) {
+ print("Call rejected by recipient")
+ }
+
+ // Incoming calls
+ func onIncomingCallAccepted(call: Call) {
+ print("You accepted the call")
+ }
+
+ func onIncomingCallRejected(call: Call) {
+ print("You rejected the call")
+ }
+
+ // Call ended
+ func onCallEnded(call: Call) {
+ print("Call ended")
+ }
+}
```
-
-
-
-
-| Parameters | Type | Description |
-| ---------- | ---- | -------------------------------- |
-| call | Call | the call that has been initiated |
-
-***
-
-### onCallEnded
-
-This method is used to perform some task when the ongoing or outgoing call ends.
-
-### Signature
+### Emit Call Events
-
-
```swift
-onCallEnded(call: Call)
-```
-
-
-
-
-
-| Parameters | Type | Description |
-| ---------- | ---- | ---------------------------- |
-| call | Call | the call that has been ended |
+// Call initiated
+CometChatCallEvents.emitOnCallInitiated(call: outgoingCall)
-***
+// Call ended
+CometChatCallEvents.emitOnCallEnded(call: endedCall)
-### onOutgoingCallAccepted
+// Incoming call accepted
+CometChatCallEvents.emitOnIncomingCallAccepted(call: acceptedCall)
-This method is used to perform some task when the outgoing call is accepted.
+// Incoming call rejected
+CometChatCallEvents.emitOnIncomingCallRejected(call: rejectedCall)
-### Signature
+// Outgoing call accepted
+CometChatCallEvents.emitOnOutgoingCallAccepted(call: acceptedCall)
-
-
-```swift
-onOutgoingCallAccepted(call: Call)
+// Outgoing call rejected
+CometChatCallEvents.emitOnOutgoingCallRejected(call: rejectedCall)
```
-
-
-
-
-| Parameters | Type | Description |
-| ---------- | ---- | -------------------------------------------------- |
-| call | Call | the call that has been accepted by the other user. |
-
-***
+### Call Events Reference
-### onOutgoingCallRejected
+| Event | Description |
+|-------|-------------|
+| `onCallInitiated` | Outgoing call started |
+| `onOutgoingCallAccepted` | Recipient accepted the call |
+| `onOutgoingCallRejected` | Recipient rejected the call |
+| `onIncomingCallAccepted` | You accepted an incoming call |
+| `onIncomingCallRejected` | You rejected an incoming call |
+| `onCallEnded` | Call ended (any reason) |
-This method is used to perform some task when the outgoing call is rejected.
+## Complete Example: App-Wide Event Manager
-### Signature
+Create a centralized event manager to handle events across your entire app:
-
-
```swift
-onOutgoingCallRejected(call: Call)
-```
-
-
-
-
-
-| Parameters | Type | Description |
-| ---------- | ---- | -------------------------------------------------- |
-| call | Call | the call that has been rejected by the other user. |
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-***
-
-### Emitting Call Events
+// MARK: - Singleton Event Manager
+class ChatEventManager {
+
+ static let shared = ChatEventManager()
+ private let listenerId = "app-event-manager"
+
+ private init() {}
+
+ func startListening() {
+ CometChatUserEvents.addListener(listenerId, self)
+ CometChatGroupEvents.addListener(listenerId, self)
+ CometChatConversationEvents.addListener(listenerId, self)
+ CometChatMessageEvents.addListener(listenerId, self)
+ CometChatCallEvents.addListener(listenerId, self)
+ }
+
+ func stopListening() {
+ CometChatUserEvents.removeListener(listenerId)
+ CometChatGroupEvents.removeListener(listenerId)
+ CometChatConversationEvents.removeListener(listenerId)
+ CometChatMessageEvents.removeListener(listenerId)
+ CometChatCallEvents.removeListener(listenerId)
+ }
+}
-There are two types of call event listeners, one for the SDK, which listens for events emitted from the backend for actions taken by users other than the logged-in user; and another for events specific to the UI Kit, which listens for events emitted from the client side for actions made by the logged-in user. The code snippets shared below contain how to emit such client-side call events to inform other UI components in a project.
+// MARK: - User Events
+extension ChatEventManager: CometChatUserEventListener {
+ func onUserBlock(user: User) {
+ NotificationCenter.default.post(name: .userBlocked, object: user)
+ }
+
+ func onUserUnblock(user: User) {
+ NotificationCenter.default.post(name: .userUnblocked, object: user)
+ }
+}
-
-
-```swift
-//emit this when logged in user initiates a call
-CometChatCallEvents.emitOnCallInitiated(call: Call)
+// MARK: - Group Events
+extension ChatEventManager: CometChatGroupEventListener {
+ func onGroupCreate(group: Group) {
+ NotificationCenter.default.post(name: .groupCreated, object: group)
+ }
+
+ func onGroupDelete(group: Group) {
+ NotificationCenter.default.post(name: .groupDeleted, object: group)
+ }
+
+ func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) {
+ NotificationCenter.default.post(name: .memberJoined, object: nil,
+ userInfo: ["user": joinedUser, "group": joinedGroup])
+ }
+
+ func onGroupMemberLeave(leftUser: User, leftGroup: Group) {
+ NotificationCenter.default.post(name: .memberLeft, object: nil,
+ userInfo: ["user": leftUser, "group": leftGroup])
+ }
+
+ // Implement other required methods...
+ func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) {}
+ func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {}
+ func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {}
+ func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group) {}
+ func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {}
+ func onOwnershipChange(group: Group?, member: GroupMember?) {}
+ func onCreateGroupClick() {}
+}
-//emit this when logged in user cancels a call
-CometChatCallEvents.emitOnCallEnded(call: Call)
+// MARK: - Conversation Events
+extension ChatEventManager: CometChatConversationEventListener {
+ func ccConversationDeleted(conversation: Conversation) {
+ NotificationCenter.default.post(name: .conversationDeleted, object: conversation)
+ }
+
+ func ccUpdateConversation(conversation: Conversation) {
+ NotificationCenter.default.post(name: .conversationUpdated, object: conversation)
+ }
+}
-//emit this when logged in user accepts the incoming call
-CometChatCallEvents.emitOnIncomingCallAccepted(call: Call)
+// MARK: - Message Events
+extension ChatEventManager: CometChatMessageEventListener {
+ func onMessageSent(message: BaseMessage, status: MessageStatus) {
+ if status == .success {
+ NotificationCenter.default.post(name: .messageSent, object: message)
+ }
+ }
+
+ // Implement other required methods...
+ func onMessageEdit(message: BaseMessage, status: MessageStatus) {}
+ func onMessageDelete(message: BaseMessage, status: MessageStatus) {}
+ func onMessageRead(message: BaseMessage) {}
+ func onLiveReaction(reaction: TransientMessage) {}
+ func onMessageReact(message: BaseMessage, reaction: CometChatMessageReaction) {}
+ func onParentMessageUpdate(message: BaseMessage) {}
+ func onViewInformation(user: User) {}
+ func onViewInformation(group: Group) {}
+ func onVoiceCall(user: User) {}
+ func onVideoCall(user: User) {}
+ func onVoiceCall(group: Group) {}
+ func onVideoCall(group: Group) {}
+ func onMessageError(error: CometChatException) {}
+ func onMessageReply(message: BaseMessage, status: MessageStatus) {}
+}
-//emit this when logged in user rejects the incoming call
-CometChatCallEvents.emitOnIncomingCallRejected(call: Call)
-//emit this when the other user accepts the call
-CometChatCallEvents.emitOnOutgoingCallAccepted(call: Call)
+// MARK: - Call Events
+extension ChatEventManager: CometChatCallEventListener {
+ func onCallInitiated(call: Call) {
+ NotificationCenter.default.post(name: .callStarted, object: call)
+ }
+
+ func onCallEnded(call: Call) {
+ NotificationCenter.default.post(name: .callEnded, object: call)
+ }
+
+ func onIncomingCallAccepted(call: Call) {}
+ func onIncomingCallRejected(call: Call) {}
+ func onOutgoingCallAccepted(call: Call) {}
+ func onOutgoingCallRejected(call: Call) {}
+}
-//emit this when the other user rejects a call
-CometChatCallEvents.emitOnOutgoingCallRejected(call: Call)
+// MARK: - Notification Names
+extension Notification.Name {
+ static let userBlocked = Notification.Name("userBlocked")
+ static let userUnblocked = Notification.Name("userUnblocked")
+ static let groupCreated = Notification.Name("groupCreated")
+ static let groupDeleted = Notification.Name("groupDeleted")
+ static let memberJoined = Notification.Name("memberJoined")
+ static let memberLeft = Notification.Name("memberLeft")
+ static let conversationDeleted = Notification.Name("conversationDeleted")
+ static let conversationUpdated = Notification.Name("conversationUpdated")
+ static let messageSent = Notification.Name("messageSent")
+ static let callStarted = Notification.Name("callStarted")
+ static let callEnded = Notification.Name("callEnded")
+}
```
-
-
-
-
-### Listening to Call Events
-
-Here we will go through how anyone can listen to these client-side Call Events to update the state of the UI accordingly.
-
-| Event | Description |
-| ---------------------- | ------------------------------------------------------- |
-| onIncomingCallAccepted | Triggers whenever incoming call is accepted by the user |
-| onIncomingCallRejected | Triggers whenever incoming call is rejected by the user |
-| onCallEnded | Triggers whenever the call is ended |
-| onCallInitiated | Triggers whenever the call is getting initiated |
-| onOutgoingCallAccepted | Triggers whenever outgoing call is accepted by the user |
-| onOutgoingCallRejected | Triggers whenever outgoing call is rejected by the user |
+### Using the Event Manager
-
-
```swift
-// View controller from your project where you want to listen events.
-public class ViewController: UIViewController {
+// AppDelegate.swift
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+
+ // Start listening for events app-wide
+ ChatEventManager.shared.startListening()
+
+ return true
+ }
+}
- public override func viewDidLoad() {
+// Any ViewController
+class MyViewController: UIViewController {
+
+ override func viewDidLoad() {
super.viewDidLoad()
-
- // Subscribing for the listener to listen events from user module
- CometChatCallEvents.addListener("UNIQUE_ID", self as CometChatCallEventListener)
+
+ // Listen for specific events via NotificationCenter
+ NotificationCenter.default.addObserver(
+ self,
+ selector: #selector(handleUserBlocked),
+ name: .userBlocked,
+ object: nil
+ )
}
-
- public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events from user module
- CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
+
+ @objc private func handleUserBlocked(_ notification: Notification) {
+ guard let user = notification.object as? User else { return }
+ print("User blocked: \(user.name ?? "")")
+ // Update your UI
+ }
+
+ deinit {
+ NotificationCenter.default.removeObserver(self)
}
-
-
}
+```
- // Listener events from user module
-extension ViewController: CometChatCallEventListener {
-
- func onIncomingCallAccepted(call: Call) {
- // Do Stuff
- }
+## Best Practices
- func onIncomingCallRejected(call: Call)
- // Do Stuff
- }
+1. **Always remove listeners** - Call `removeListener` in `viewWillDisappear` to prevent memory leaks
- func onCallEnded(call: Call) {
- // Do Stuff
- }
+2. **Use unique listener IDs** - Avoid conflicts between components by using descriptive, unique IDs
- func onCallInitiated(call: Call)
- // Do Stuff
- }
+3. **Update UI on main thread** - Dispatch UI updates to the main thread when handling events
- func onOutgoingCallAccepted(call: Call) {
- // Do Stuff
- }
+4. **Don't emit unnecessarily** - Only emit events when state actually changes
- func onOutgoingCallRejected(call: Call)
- // Do Stuff
- }
-}
-```
+5. **Use a central manager** - For app-wide event handling, create a singleton manager
-
+## Troubleshooting
-
+| Issue | Solution |
+|-------|----------|
+| Events not firing | Verify listener is added before the action occurs |
+| Duplicate events | Check you're not adding the same listener multiple times |
+| Memory leaks | Ensure `removeListener` is called in `viewWillDisappear` |
+| UI not updating | Dispatch UI updates to main thread with `DispatchQueue.main.async` |
+| Listener ID conflicts | Use unique, descriptive IDs for each listener |
diff --git a/ui-kit/ios/extensions.mdx b/ui-kit/ios/extensions.mdx
index fef6939e..8bde20ad 100644
--- a/ui-kit/ios/extensions.mdx
+++ b/ui-kit/ios/extensions.mdx
@@ -1,131 +1,209 @@
---
title: "Extensions"
+description: "Enable powerful chat features with zero code using CometChat extensions"
---
-## Overview
+Extensions add powerful features to your chat app without writing any code. Simply enable them in your [CometChat Dashboard](https://app.cometchat.com), and they automatically appear in the UI Kit components.
-CometChat’s UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient.
+## How Extensions Work
-Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide For detailed information on [Extensions](/fundamentals/extensions-overview)
+1. Log in to your [CometChat Dashboard](https://app.cometchat.com)
+2. Navigate to the **Extensions** section
+3. Enable the extensions you want
+4. The features automatically appear in your app after initialization
-Once you have successfully enabled the desired extension in your dashboard, it will be reflected in your CometChat application upon initialization and successful login. Please note, that the extension features will only be available if they are supported by CometChat UI Kit.
+
+Extensions are enabled at the dashboard level. Once activated, they work across all platforms (iOS, Android, Web) using the same CometChat app. No code changes required.
+
-CometChat’s UI Kit offers built-in support for 12 powerful extensions. This seamless integration makes it easy for you to enhance your chat application with engaging features without any extra coding effort. Just enable the desired extensions from the CometChat Dashboard, and they will be automatically reflected in the relevant components of your application, providing a richer and more engaging experience for your users.
+For detailed information on all extensions, see [Extensions Overview](/fundamentals/extensions-overview).
-## Built-in Extensions
-
-Here's a guide on how you can enable and integrate these extensions:
+## Available Extensions
### Stickers
-The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
-
-Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits.
+Let users express emotions with fun, pre-designed stickers.
-### Polls
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) attachment menu |
+| Setup guide | [Sticker Extension](/fundamentals/stickers) |
+| Code required | None - automatic after dashboard activation |
-The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+### Polls
-Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits.
+Create polls to gather opinions in group chats quickly.
-### Collaborative Whiteboard
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) action sheet |
+| Setup guide | [Polls Extension](/fundamentals/polls) |
+| Code required | None - automatic after dashboard activation |
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+### Collaborative Whiteboard
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits.
+Real-time whiteboard for drawing, brainstorming, and sharing ideas together.
-### Collaborative Document
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) action sheet |
+| Setup guide | [Collaborative Whiteboard](/fundamentals/collaborative-whiteboard) |
+| Code required | None - automatic after dashboard activation |
-With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+### Collaborative Document
-Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits.
+Work together on shared documents in real-time with other users.
-### Message Reactions
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) action sheet |
+| Setup guide | [Collaborative Document](/fundamentals/collaborative-document) |
+| Code required | None - automatic after dashboard activation |
-Message Reactions extension lets users express their emotions towards a message by choosing from a range of emojis. It provides a quick way to respond to any shared message. For a comprehensive understanding and guide on implementing and using the Message Reactions Extension, refer to our specific guide on the [Message Reactions Extension](/fundamentals/reactions).
+### Message Reactions
-Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Let users react to messages with a range of emojis for quick responses.
-### Message Translation
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) long-press menu |
+| Setup guide | [Reactions Extension](/fundamentals/reactions) |
+| Code required | None - automatic after dashboard activation |
-The Message Translation extension in CometChat is designed to translate any message into your local. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+### Message Translation
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Translate messages into any language instantly, eliminating language barriers.
-### Link Preview
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) message actions |
+| Setup guide | [Message Translation](/fundamentals/message-translation) |
+| Code required | None - automatic after dashboard activation |
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+### Link Preview
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Show rich previews for URLs shared in chat including title, description, and thumbnail.
-### Profanity Filter
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) message bubbles |
+| Setup guide | [Link Preview](/fundamentals/link-preview) |
+| Code required | None - automatic after dashboard activation |
-The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+### Profanity Filter
-Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Automatically censor inappropriate and obscene words in messages.
-### Data Masking
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) - filtered automatically |
+| Setup guide | [Legacy Extensions](/moderation/legacy-extensions) |
+| Code required | None - automatic after dashboard activation |
-The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+### Data Masking
-Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Automatically mask sensitive data like credit card numbers and phone numbers.
-### Image Moderation
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) - masked automatically |
+| Setup guide | [Legacy Extensions](/moderation/legacy-extensions) |
+| Code required | None - automatic after dashboard activation |
-The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+### Image Moderation
-Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Detect and filter inappropriate or explicit images using AI/ML.
-### Thumbnail Generation
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) - filtered automatically |
+| Setup guide | [Legacy Extensions](/moderation/legacy-extensions) |
+| Code required | None - automatic after dashboard activation |
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+### Thumbnail Generation
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Automatically create smaller preview images for faster loading and reduced bandwidth.
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) image bubbles |
+| Setup guide | [Thumbnail Generation](/fundamentals/thumbnail-generation) |
+| Code required | None - automatic after dashboard activation |
+
### Smart Replies
-Smart Replies extension provides automated, predictive text responses, making the conversation more efficient by reducing the response time. For a comprehensive understanding and guide on implementing and using the Smart Replies Extension, refer to our specific guide on the [Smart Replies Extension](/fundamentals/smart-replies).
+AI-powered suggested responses for faster, more efficient conversations.
+
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) suggestions |
+| Setup guide | [Smart Replies](/fundamentals/smart-replies) |
+| Code required | None - automatic after dashboard activation |
+
+## Extensions Summary
+
+| Extension | Component | Use Case |
+|-----------|-----------|----------|
+| Stickers | Message Composer | Fun expression |
+| Polls | Message Composer | Group decisions |
+| Whiteboard | Message Composer | Visual collaboration |
+| Document | Message Composer | Document collaboration |
+| Reactions | Message List | Quick responses |
+| Translation | Message List | Multi-language support |
+| Link Preview | Message List | Rich URL previews |
+| Profanity Filter | Message List | Content moderation |
+| Data Masking | Message List | Privacy protection |
+| Image Moderation | Message List | Safe content |
+| Thumbnails | Message List | Faster loading |
+| Smart Replies | Message Composer | Quick responses |
+
+## Related
+
+- [Extensions Overview](/fundamentals/extensions-overview) - Full extension documentation
+- [Moderation](/moderation/overview) - Content moderation features
+- [Message Composer](/ui-kit/ios/message-composer) - Where composer extensions appear
+- [Message List](/ui-kit/ios/message-list) - Where message extensions appear
diff --git a/ui-kit/ios/group-members.mdx b/ui-kit/ios/group-members.mdx
index 0d7d3e21..3a5a9c3e 100644
--- a/ui-kit/ios/group-members.mdx
+++ b/ui-kit/ios/group-members.mdx
@@ -1,1080 +1,440 @@
---
title: "Group Members"
+description: "Display and manage members of a CometChat group"
---
-## Overview
-
-`CometChatGroupMembers` is a versatile [Component](/ui-kit/ios/components-overview#components) designed to showcase all users who are either added to or invited to a group, thereby enabling them to participate in group discussions, access shared content, and engage in collaborative activities. Group members have the capability to communicate in real-time through messaging, voice and video calls, and various other interactions. Additionally, they can interact with each other, share files, and join calls based on the permissions established by the group administrator or owner.
+The `CometChatGroupMembers` component displays all members of a group with their roles (owner, admin, participant). It supports member management actions like kick, ban, and role changes.
-The `CometChatGroupMembers` component is composed of the following BaseComponents:
-
-| Components | Description |
-| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [CometChatListBase](/ui-kit/ios/list-base) | `CometChatListBase` serves as a container component equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list view. |
-| [CometChatListItem](/ui-kit/ios/list-item) | This component renders information extracted from a `User` object onto a tile, featuring a title, subtitle, leading view, and trailing view. experience, facilitating seamless navigation and interaction within the component. |
-
-***
-
-## Usage
-
-### Integration
-
-`CometChatGroupMembers`, as a custom **view controller**, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action. Additionally, it seamlessly integrates into tab view controllers. With group members, users gain access to a wide range of parameters and methods for effortless customization of its user interface.
-
-The following code snippet exemplifies how you can seamlessly integrate the GroupMembers component into your application.
-
-
-
-```swift
-let group = Group(guid: <#T##String#>, name: <#T##String#>, groupType: <#T##CometChat.groupType#>, password: <#T##String?#>)
-let cometChatGroupMembers = CometChatGroupMembers(group: group)
-let naviVC = UINavigationController(rootViewController: cometChatGroupMembers)
-self.present(naviVC, animated: true)
-```
-
-
-
-
-
-
-
-If you are already using a navigation controller, you can use the pushViewController function instead of presenting the view controller.
-
-
-
-***
-
-### Actions
-
-[Actions](/ui-kit/ios/components-overview#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.
-
-1. ##### set(onItemClick:)
-
-`set(OnItemClick:)` is triggered when you click on a ListItem of the groups component. This `set(OnItemClick:)` method proves beneficial when a user intends to customize the on-click behavior in CometChatGroupMembers.
-
-
-
-```swift
-cometChatGroupMembers.set(onItemClick: { user, indexPath in
- // Override on item click
-})
-```
-
-
-
-
-
-***
-
-2. ##### set(OnItemLongClick:)
-
-`set(OnItemLongClick:)` is triggered when you long press on a ListItem of the group members component. This `set(OnItemLongClick:)` method proves beneficial when a user intends to additional functionality on long press on list item in CometChatGroupMembers.
-
-
-
-```swift
-cometChatGroupMembers.set(onItemLongClick: { groupMember, 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 CometChatGroupMembers.
-
-
-
-```swift
-cometChatGroupMembers.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 group members.
-
-
-
-```swift
-
-cometChatGroupMembers.set(onSelection: { groupMembers in
- //Handle action
-})
-```
-
-
-
-
-
-***
-
-##### 5. set(onError:)
-
-This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatGroupMembers.
-
-
-
-```swift
-cometChatGroupMembers.set(onError: { error in
- // Override on error
-})
-```
-
-
-
-
-
-***
-
-##### 6. set(onEmpty:)
-
-This `set(onEmpty:)` method is triggered when the groups list is empty in CometChatGroupMembers.
-
-
-
-```swift
-cometChatGroupMembers.set(onEmpty: {
- // Handle empty state
-})
-```
-
-
-
-
-
-***
-
-##### 7. setOnLoad
-
-This set(onLoad:) gets triggered when a group members list is fully fetched and going to displayed on the screen, this return the list of group members to get displayed on the screen.
-
-
-
-```swift
-cometChatGroupMembers.set(onLoad: { groups in
- // Handle loaded users
-})
-```
-
-
-
-
-
-***
-
-### 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.
-
-##### 1. GroupsRequestBuilder
-
-The [GroupsRequestBuilder](/sdk/ios/retrieve-groups) enables you to filter and customize the group list based on available parameters in GroupsRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupsRequestBuilder](/sdk/ios/retrieve-groups)
-
-| Methods | Type | Description |
-| -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| **setLimit** | Int | Configure the maximum number of groups to fetch in a single request, optimizing pagination for smoother navigation. |
-| **setSearchKeyword** | String | Employed to retrieve groups that match the provided string, facilitating precise searches. |
-| **scopes** | \[String] | used for fetching group members based on multiple scopes |
-
-**Example**
-
-In the example below, we are applying a filter to the Group List based on limit and scope.
-
-
-
-```swift
-let group = Group(guid: "mrc-uid", name: "", groupType: .public, password: .none)
-let groupMembersRequestBuilder = GroupMembersRequest.GroupMembersRequestBuilder(guid: group.guid).set(limit: 2).set(scopes: ["admin"])
-
-let cometChatGroupMembers = CometChatGroupMembers(group: group, groupMembersRequestBuilder: groupMembersRequestBuilder)
-
-let naviVC = UINavigationController(rootViewController: cometChatGroupMembers)
-self.present(naviVC, animated: true)
-```
-
-
-
-
-
-##### 2. SearchRequestBuilder
+## Prerequisites
-The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/ios/retrieve-groups) enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder. This feature allows you to keep uniformity between the displayed Groups List and searched Group List.
+Before using this component:
+1. [Initialize CometChat UI Kit](/ui-kit/ios/getting-started)
+2. [Log in a user](/ui-kit/ios/getting-started#step-4-initialize-and-login)
+3. Have a valid `Group` object
-**Example**
+## Basic Usage
-
-
```swift
-let group = Group(guid: "mrc-uid", name: "", groupType: .public, password: .none)
-let groupMembersRequestBuilder = GroupMembersRequest.GroupMembersRequestBuilder(guid: group.guid)
- .set(searchKeyword: "")
-
-let cometChatGroupMembers = CometChatGroupMembers(group: group, groupMembersRequestBuilder: groupMembersRequestBuilder)
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-let naviVC = UINavigationController(rootViewController: cometChatGroupMembers)
-self.present(naviVC, animated: true)
+class GroupDetailViewController: UIViewController {
+
+ var group: Group!
+
+ func showGroupMembers() {
+ let groupMembers = CometChatGroupMembers(group: group)
+ let nav = UINavigationController(rootViewController: groupMembers)
+ present(nav, animated: true)
+ }
+}
```
-
-
-
-
-***
-
-### 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.
+## Production-Ready Implementation
-Events emitted by the Join Group component is as follows.
+Complete example with member actions and navigation:
-| Event | Description |
-| ---------------------------- | ----------------------------------------------------------------- |
-| **onGroupMemberBan** | Triggers when the group member banned from the group successfully |
-| **onGroupMemberKick** | Triggers when the group member kicked from the group successfully |
-| **onGroupMemberChangeScope** | Triggers when the group member scope is changed in the group |
-
-
-
```swift
-// View controller from your project where you want to listen events.
-public class ViewController: UIViewController {
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
- public override func viewDidLoad() {
+class GroupMembersViewController: UIViewController {
+
+ var group: Group!
+
+ override func viewDidLoad() {
super.viewDidLoad()
-
- // Subscribing for the listener to listen events from user module
- CometChatGroupEvents.addListener("UNIQUE_ID", self as CometChatGroupEventListener)
+ setupGroupMembers()
}
-}
- // Listener events from groups module
-extension ViewController: CometChatGroupEventListener {
- public func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {
- // Do Stuff
+
+ private func setupGroupMembers() {
+ let groupMembers = CometChatGroupMembers(group: group)
+
+ // Handle member tap
+ groupMembers.set(onItemClick: { [weak self] member, indexPath in
+ self?.showMemberProfile(member)
+ })
+
+ // Handle long press for options
+ groupMembers.set(onItemLongClick: { [weak self] member, indexPath in
+ self?.showMemberOptions(member)
+ })
+
+ // Handle errors
+ groupMembers.set(onError: { error in
+ print("Error: \(error.errorDescription)")
+ })
+
+ // Handle empty state
+ groupMembers.set(onEmpty: {
+ print("No members found")
+ })
+
+ // Handle back button
+ groupMembers.set(onBack: { [weak self] in
+ self?.navigationController?.popViewController(animated: true)
+ })
+
+ navigationController?.pushViewController(groupMembers, animated: true)
}
- public func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {
- // Do Stuff
+
+ private func showMemberProfile(_ member: GroupMember) {
+ // Open user profile or start direct chat
+ let messages = CometChatMessages()
+ messages.set(user: member)
+ navigationController?.pushViewController(messages, animated: true)
}
- public func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {
- // Do Stuff
+
+ private func showMemberOptions(_ member: GroupMember) {
+ let alert = UIAlertController(title: member.name, message: nil, preferredStyle: .actionSheet)
+
+ alert.addAction(UIAlertAction(title: "Message", style: .default) { [weak self] _ in
+ self?.showMemberProfile(member)
+ })
+
+ alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+ present(alert, animated: true)
}
}
```
-```swift Emitting Group Events
-///emit this when group member is banned from the group by logged in user.
-CometChatGroupEvents.emitOnGroupMemberBan(bannedUser: User, bannedGroup: Group, bannedBy: User)
-
-///emit this when group member is kicked from the group by logged in user.
-CometChatGroupEvents.emitOnGroupMemberKick(kickedUser: User, kickedGroup: Group, kickedBy: User)
-
-///emit this when group member's scope is changed by logged in user.
-CometChatGroupEvents.emitOnGroupMemberChangeScope(updatedBy: User , updatedUser: User , scopeChangedTo: CometChat.MemberScope , scopeChangedFrom: CometChat.MemberScope, group: Group)
-```
-
-
+## Filter Members
-
+Use `GroupMembersRequestBuilder` to filter the member list:
-***
+```swift
+// Filter by scope (admin, moderator, participant)
+let requestBuilder = GroupMembersRequest.GroupMembersRequestBuilder(guid: group.guid)
+ .set(limit: 20)
+ .set(scopes: ["admin", "moderator"])
-
-
-```swift View Controller
-public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events from user module
-CometChatGroupEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
-}
+let groupMembers = CometChatGroupMembers(
+ group: group,
+ groupMembersRequestBuilder: requestBuilder
+)
```
-
+```swift
+// Search members
+let searchBuilder = GroupMembersRequest.GroupMembersRequestBuilder(guid: group.guid)
+ .set(searchKeyword: "john")
-
+let groupMembers = CometChatGroupMembers(
+ group: group,
+ groupMembersRequestBuilder: searchBuilder
+)
+```
-## Customization
+## Actions Reference
-To fit your app's design requirements, you can customize the appearance of the Groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+| Method | Description |
+|--------|-------------|
+| `set(onItemClick:)` | Member tapped |
+| `set(onItemLongClick:)` | Member long-pressed |
+| `set(onBack:)` | Back button pressed |
+| `set(onSelection:)` | Selection changed (multi-select mode) |
+| `set(onError:)` | Error occurred |
+| `set(onEmpty:)` | No members found |
+| `set(onLoad:)` | Members loaded |
-### Style
+## Hide UI Elements
-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.
+```swift
+let groupMembers = CometChatGroupMembers(group: group)
-##### 1. GroupMembers Style
+groupMembers.hideSearch = true // Hide search bar
+groupMembers.hideUserStatus = true // Hide online/offline status
+groupMembers.hideKickMemberOption = true // Hide kick option
+groupMembers.hideBanMemberOption = true // Hide ban option
+groupMembers.hideScopeChangeOption = true // Hide role change option
+groupMembers.hideNavigationBar = true // Hide navigation bar
+groupMembers.hideBackIcon = true // Hide back button
+```
-You can set the `GroupMembersStyle` to the `Group Memebers` Component to customize the styling.
+## Styling
-**Global level styling**
+### Quick Styling
-
-
```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-
-CometChatGroupMembers.style.titleColor = UIColor(hex: "#F76808")
-CometChatGroupMembers.style.titleFont = UIFont(name: "Times-New-Roman", size: 34)
-CometChatGroupMembers.avatarStyle = customAvatarStyle
-```
+// Global styling
+CometChatGroupMembers.style.titleColor = UIColor(hex: "#6851D6")
+CometChatGroupMembers.style.titleFont = .systemFont(ofSize: 20, weight: .bold)
+CometChatGroupMembers.style.backgroundColor = .systemBackground
-
-
-
+// Custom avatar style
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
+CometChatGroupMembers.avatarStyle = avatarStyle
+```
-**Instance level styling**
+### Instance Styling
-
-
```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
-
let groupMembersStyle = GroupMembersStyle()
groupMembersStyle.titleColor = UIColor(hex: "#F76808")
-groupMembersStyle.titleFont = UIFont(name: "Times-New-Roman", size: 34)
-
-let groupMember = CometChatGroupMembers()
-groupMember.style = groupMembersStyle
-groupMember.avatarStyle = customAvatarStyle
-```
-
-
+groupMembersStyle.backgroundColor = .white
+groupMembersStyle.listItemTitleTextColor = .black
-
+let groupMembers = CometChatGroupMembers(group: group)
+groupMembers.style = groupMembersStyle
+```
-List of properties exposed by GroupMemberStyle
-
-| Property | Description | Code |
-| --------------------------------- | ---------------------------------------------------- | ------------------------------------------------ |
-| retryButtonTextColor | Sets the text color for the retry button. | `.retryButtonTextColor: UIColor` |
-| retryButtonTextFont | Sets the text font for the retry button. | `.retryButtonTextFont: UIFont` |
-| retryButtonBackgroundColor | Sets the background color for the retry button. | `.retryButtonBackgroundColor: UIColor` |
-| retryButtonBorderColor | Sets the border color for the retry button. | `.retryButtonBorderColor: UIColor` |
-| retryButtonBorderWidth | Sets the border width for the retry button. | `.retryButtonBorderWidth: CGFloat` |
-| retryButtonCornerRadius | Sets the corner radius for the retry button. | `.retryButtonCornerRadius: CometChatCornerStyle` |
-| listItemSelectedBackground | Sets the background color for selected list items. | `.listItemSelectedBackground: UIColor` |
-| listItemDeSelectedImageTint | Sets the tint color for deselected list item images. | `.listItemDeSelectedImageTint: UIColor` |
-| listItemSelectionImageTint | Sets the tint color for selected list item images. | `.listItemSelectionImageTint: UIColor` |
-| listItemSelectedImage | Sets the image for selected list items. | `.listItemSelectedImage: UIImage` |
-| listItemDeSelectedImage | Sets the image for deselected list items. | `.listItemDeSelectedImage: UIImage` |
-| backgroundColor | Sets the background color. | `.backgroundColor: UIColor` |
-| borderWidth | Sets the border width. | `.borderWidth: CGFloat` |
-| borderColor | Sets the border color. | `.borderColor: UIColor` |
-| cornerRadius | Sets the corner radius style. | `.cornerRadius: CometChatCornerStyle` |
-| titleFont | Sets the font for the title. | `.titleFont: UIFont?` |
-| largeTitleFont | Sets the font for the large title. | `.largeTitleFont: UIFont?` |
-| titleColor | Sets the color for the title text. | `.titleColor: UIColor?` |
-| largeTitleColor | Sets the color for the large title text. | `.largeTitleColor: UIColor?` |
-| navigationBarTintColor | Sets the tint color for the navigation bar. | `.navigationBarTintColor: UIColor?` |
-| navigationBarItemsTintColor | Sets the tint color for navigation bar items. | `.navigationBarItemsTintColor: UIColor?` |
-| errorTitleTextFont | Sets the font for the error title text. | `.errorTitleTextFont: UIFont` |
-| errorTitleTextColor | Sets the color for the error title text. | `.errorTitleTextColor: UIColor` |
-| errorSubTitleFont | Sets the font for the error subtitle text. | `.errorSubTitleFont: UIFont` |
-| errorSubTitleTextColor | Sets the color for the error subtitle text. | `.errorSubTitleTextColor: UIColor` |
-| emptyTitleTextFont | Sets the font for the empty state title text. | `.emptyTitleTextFont: UIFont` |
-| emptyTitleTextColor | Sets the color for the empty state title text. | `.emptyTitleTextColor: UIColor` |
-| emptySubTitleFont | Sets the font for the empty state subtitle text. | `.emptySubTitleFont: UIFont` |
-| emptySubTitleTextColor | Sets the color for the empty state subtitle text. | `.emptySubTitleTextColor: UIColor` |
-| tableViewSeparator | Sets the color for the table view separator. | `.tableViewSeparator: UIColor` |
-| listItemTitleTextColor | Sets the text color for list item titles. | `.listItemTitleTextColor: UIColor` |
-| listItemTitleFont | Sets the font for list item titles. | `.listItemTitleFont: UIFont` |
-| listItemSubTitleTextColor | Sets the text color for list item subtitles. | `.listItemSubTitleTextColor: UIColor` |
-| listItemSubTitleFont | Sets the font for list item subtitles. | `.listItemSubTitleFont: UIFont` |
-| listItemBackground | Sets the background color for list items. | `.listItemBackground: UIColor` |
-| listItemBorderWidth | Sets the border width for list items. | `.listItemBorderWidth: CGFloat` |
-| listItemBorderColor | Sets the border color for list items. | `.listItemBorderColor: UIColor` |
-| listItemCornerRadius | Sets the corner radius for list items. | `.listItemCornerRadius: CometChatCornerStyle` |
-| messageTypeImageTint | Sets the tint color for message type icons. | `.messageTypeImageTint: UIColor` |
-| passwordGroupImageTintColor | Sets the tint color for password group icons. | `.passwordGroupImageTintColor: UIColor` |
-| passwordGroupImageBackgroundColor | Sets the background color for password group icons. | `.passwordGroupImageBackgroundColor: UIColor` |
-| privateGroupImageTintColor | Sets the tint color for private group icons. | `.privateGroupImageTintColor: UIColor` |
-| privateGroupImageBackgroundColor | Sets the background color for private group icons. | `.privateGroupImageBackgroundColor: UIColor` |
-
-***
-
-### 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 change text, set custom icons, and toggle the visibility of UI elements.
-
-
-
-```swift
-let cometChatGroupMembers = CometChatGroupMembers(group: group)
-cometChatGroupMembers.set(title: "Cc", mode: .automatic)
-cometChatGroupMembers.disable(usersPresence: true)
-```
+## Custom Views
-
+### Custom List Item
-
+Replace the entire member row with your own design:
-| Method | Description | Code |
-| -------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------- |
-| set(groupMembersRequestBuilder:) | Sets the request builder for fetching group members. | `set(groupMembersRequestBuilder: GroupMembersRequest.GroupMembersRequestBuilder)` |
-| set(searchRequestBuilder:) | Sets the request builder for searching group members. | `set(searchRequestBuilder: searchRequestBuilder)` |
-| set(searchKeyword:) | Sets the search keyword to filter group members. | `set(searchKeyword: "group_name")` |
-| hideError | Hides the error state view. | `hideError = true` |
-| hideUserStatus | Hides the online/offline status of users. | `hideUserStatus = true` |
-| hideNavigationBar | Hides or shows the navigation bar. | `hideNavigationBar = true` |
-| hideLoadingState | Hides the loading state indicator. | `hideLoadingState = true` |
-| hideBackIcon | Hides the back button/icon. | `hideBackIcon = true` |
-| hideKickMemberOption | Hides the option to kick a member from the group. | `hideKickMemberOption = true` |
-| hideBanMemberOption | Hides the option to ban a member from the group. | `hideBanMemberOption = true` |
-| hideScopeChangeOption | Hides the option to change a member’s scope (role). | `hideScopeChangeOption = true` |
-| hideSearch | Hides the search bar. | `hideSearch = true` |
-
-### 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 own views, layouts, and UI elements and then incorporate those into the component.
-
-The `Join Group` component does not provide additional functionalities beyond this level of customization.
-
-#### SetListItemView
-
-Utilize this property to assign a custom ListItem to the GroupMembers Component, allowing for enhanced customization and flexibility in its rendering.
-
-
-
```swift
-let cometChatGroupMembers = CometChatGroupMembers(group: group)
-cometChatGroupMembers.set(listItemView:{ groupMember in
- let customListItemGroupView = CustomListItemGroupView()
- customListItemGroupView.configure(with: groupMember!) // pass group member here
- return customListItemGroupView
+let groupMembers = CometChatGroupMembers(group: group)
+
+groupMembers.set(listItemView: { member in
+ let customView = MemberRowView()
+ customView.configure(with: member!)
+ return customView
})
```
-
-
-
-
-**Example**
-
-In this example, we will create a UIView file `CustomListItemGroupView` and pass it inside the `setListItemView()` method.
-
-```swift CustomListItemGroupView
-
+```swift
+// MemberRowView.swift
import UIKit
import CometChatSDK
import CometChatUIKitSwift
-class CustomListItemView: UIView {
-
- private let profileImageView: CometChatAvatar = {
- let imageView = CometChatAvatar()
- imageView.layer.cornerRadius = 12 // Rounded corners
- imageView.translatesAutoresizingMaskIntoConstraints = false
- return imageView
- }()
+class MemberRowView: UIView {
- private let nameLabel: UILabel = {
- let label = UILabel()
- label.textColor = .black
- label.font = UIFont.boldSystemFont(ofSize: 18)
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
-
- private let roleBadgeButton: UIButton = {
- let button = UIButton(type: .system)
- button.setTitle("Owner", for: .normal)
- button.setTitleColor(.white, for: .normal)
- button.backgroundColor = UIColor.purple
- button.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .medium)
- button.layer.cornerRadius = 12
- button.translatesAutoresizingMaskIntoConstraints = false
- return button
- }()
+ private let avatar = CometChatAvatar(image: UIImage())
+ private let nameLabel = UILabel()
+ private let roleButton = UIButton(type: .system)
override init(frame: CGRect) {
super.init(frame: frame)
- setupView()
+ setupUI()
}
required init?(coder: NSCoder) {
- super.init(coder: coder)
- setupView()
+ fatalError("init(coder:) has not been implemented")
}
- private func setupView() {
- addSubview(profileImageView)
- addSubview(nameLabel)
- addSubview(roleBadgeButton)
+ private func setupUI() {
+ avatar.translatesAutoresizingMaskIntoConstraints = false
+ avatar.layer.cornerRadius = 20
- NSLayoutConstraint.activate([
- // Profile Image Constraints
- profileImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
- profileImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
- profileImageView.widthAnchor.constraint(equalToConstant: 50),
- profileImageView.heightAnchor.constraint(equalToConstant: 50),
-
- // Name Label Constraints
- nameLabel.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: 12),
- nameLabel.centerYAnchor.constraint(equalTo: profileImageView.centerYAnchor),
-
- // Role Badge Button Constraints
- roleBadgeButton.leadingAnchor.constraint(greaterThanOrEqualTo: nameLabel.trailingAnchor, constant: 12),
- roleBadgeButton.trailingAnchor.constraint(equalTo: trailingAnchor),
- roleBadgeButton.centerYAnchor.constraint(equalTo: profileImageView.centerYAnchor),
- roleBadgeButton.heightAnchor.constraint(equalToConstant: 24),
- roleBadgeButton.widthAnchor.constraint(equalToConstant: 70)
- ])
- }
-
- // Method to configure the view with data
- func configure(with groupMember: GroupMember) {
- nameLabel.text = groupMember.name ?? ""
- profileImageView.setAvatar(avatarUrl: groupMember.avatar ?? "")
- roleBadgeButton.setTitle("\(groupMember.scope)", for: .normal)
- }
-}
-```
-
-***
-
-#### SetLeadingView
-
-You can modify the leading view of a group member cell using .set(leadingView:).
-
-
-
-```swift
-cometChatGroupMember.set(leadingView: { groupMember in
- let view = CustomLeadingView()
- view.configure(with groupMember: groupMember)
- return view
-})
-```
-
-
-
-
-
-Demonstration
-
-
- 
-
-
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
-
-
-
-```swift
-import UIKit
-
-class CustomLeadingView: UIView {
-
- private let profileImageView: CometChatAvatar = {
- let imageView = CometChatAvatar()
- imageView.layer.cornerRadius = 12 // Rounded corners
- imageView.translatesAutoresizingMaskIntoConstraints = false
- return imageView
- }()
-
- private let badgeContainer: UIView = {
- let view = UIView()
- view.backgroundColor = UIColor.blue
- view.layer.cornerRadius = 8
- view.translatesAutoresizingMaskIntoConstraints = false
- return view
- }()
-
- private let starIcon: UIImageView = {
- let imageView = UIImageView()
- imageView.image = UIImage(systemName: "star.fill") // SF Symbol for star
- imageView.tintColor = .yellow
- imageView.translatesAutoresizingMaskIntoConstraints = false
- return imageView
- }()
-
- private let roleLabel: UILabel = {
- let label = UILabel()
- label.textColor = .white
- label.font = UIFont.boldSystemFont(ofSize: 16)
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
-
- override init(frame: CGRect) {
- super.init(frame: frame)
- setupView()
- }
-
- required init?(coder: NSCoder) {
- super.init(coder: coder)
- setupView()
- }
-
- private func setupView() {
- addSubview(profileImageView)
- addSubview(badgeContainer)
- badgeContainer.addSubview(starIcon)
- badgeContainer.addSubview(roleLabel)
+ nameLabel.translatesAutoresizingMaskIntoConstraints = false
+ nameLabel.font = .systemFont(ofSize: 16, weight: .semibold)
- NSLayoutConstraint.activate([
- profileImageView.topAnchor.constraint(equalTo: topAnchor),
- profileImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
- profileImageView.trailingAnchor.constraint(equalTo: trailingAnchor),
- profileImageView.heightAnchor.constraint(equalTo: profileImageView.widthAnchor), // Square shape
-
- badgeContainer.leadingAnchor.constraint(equalTo: profileImageView.leadingAnchor),
- badgeContainer.trailingAnchor.constraint(equalTo: profileImageView.trailingAnchor),
- badgeContainer.bottomAnchor.constraint(equalTo: profileImageView.bottomAnchor),
- badgeContainer.heightAnchor.constraint(equalToConstant: 40),
-
- starIcon.leadingAnchor.constraint(equalTo: badgeContainer.leadingAnchor, constant: 10),
- starIcon.centerYAnchor.constraint(equalTo: badgeContainer.centerYAnchor),
- starIcon.widthAnchor.constraint(equalToConstant: 20),
- starIcon.heightAnchor.constraint(equalToConstant: 20),
-
- roleLabel.leadingAnchor.constraint(equalTo: starIcon.trailingAnchor, constant: 5),
- roleLabel.centerYAnchor.constraint(equalTo: badgeContainer.centerYAnchor)
- ])
- }
-
- func configure(with groupMember: GroupMember) {
- if let avatarUrl = groupMember.avatar {
- groupImageView.setAvatar(avatarUrl: avatarUrl, with: groupMember.name ?? "")
- }
- roleLabel.text = "\(groupMember.scope)"
- }
-}
-```
-
-
-
-
-
-***
-
-#### SetTitleView
-
-You can customize the title view of a group member cell using .set(titleView:).
-
-
-
-```swift
-cometChatGroupMember.set(titleView: { groupMember in
- let view = CustomTitleView()
- view.configure(with groupMember: groupMember)
- return view
-})
-```
-
-
-
-
-
-Demonstration
-
-
- 
-
-
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
-
-
-
-```swift
- import UIKit
-
-class CustomTitleView: UIView {
-
- private let nameLabel: UILabel = {
- let label = UILabel()
- label.font = UIFont.boldSystemFont(ofSize: 20)
- label.textColor = .black
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
-
- private let roleButton: UIButton = {
- let button = UIButton()
- button.setTitleColor(.white, for: .normal)
- button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
- button.backgroundColor = .blue
- button.contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
- button.layer.cornerRadius = 12
- button.translatesAutoresizingMaskIntoConstraints = false
- return button
- }()
-
- override init(frame: CGRect) {
- super.init(frame: frame)
- setupView()
- }
-
- required init?(coder: NSCoder) {
- super.init(coder: coder)
- setupView()
- }
-
- private func setupView() {
+ roleButton.translatesAutoresizingMaskIntoConstraints = false
+ roleButton.titleLabel?.font = .systemFont(ofSize: 12, weight: .medium)
+ roleButton.setTitleColor(.white, for: .normal)
+ roleButton.backgroundColor = .systemPurple
+ roleButton.layer.cornerRadius = 10
+ roleButton.contentEdgeInsets = UIEdgeInsets(top: 4, left: 8, bottom: 4, right: 8)
+
+ addSubview(avatar)
addSubview(nameLabel)
addSubview(roleButton)
NSLayoutConstraint.activate([
- nameLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
+ avatar.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
+ avatar.centerYAnchor.constraint(equalTo: centerYAnchor),
+ avatar.widthAnchor.constraint(equalToConstant: 40),
+ avatar.heightAnchor.constraint(equalToConstant: 40),
+
+ nameLabel.leadingAnchor.constraint(equalTo: avatar.trailingAnchor, constant: 12),
nameLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
- roleButton.leadingAnchor.constraint(equalTo: nameLabel.trailingAnchor, constant: 8),
- roleButton.centerYAnchor.constraint(equalTo: centerYAnchor),
- roleButton.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor)
+ roleButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
+ roleButton.centerYAnchor.constraint(equalTo: centerYAnchor)
])
}
- func configure(with groupMember: GroupMember) {
- nameLabel.text = groupMember.name ?? ""
- roleButton.setTitle("\(groupMember.scope)", for: .normal)
+ func configure(with member: GroupMember) {
+ nameLabel.text = member.name ?? ""
+ avatar.setAvatar(avatarUrl: member.avatar ?? "", with: member.name ?? "")
+ roleButton.setTitle(member.scope.rawValue.capitalized, for: .normal)
}
}
```
-
-
-
-
-***
+### Custom Subtitle View
-#### SetTrailView
+Customize the subtitle area below the member name:
-You can set a custom Tailview using `.setTailView()` to match the `TailView` view of your app.
-
-
-
```swift
-let cometChatGroupMembers = CometChatGroupMembers(group: group)
-cometChatGroupMembers.setTailView(tailView: { groupMember in
- let customTailGroupView = CustomTailGroupView()
- customTailGroupView.configure(with: groupMember!)
- return customTailGroupView
+groupMembers.setSubtitleView(subtitleView: { member in
+ let label = UILabel()
+ label.font = .systemFont(ofSize: 12)
+ label.textColor = .secondaryLabel
+
+ let date = Date(timeIntervalSince1970: Double(member!.joinedAt))
+ let formatter = DateFormatter()
+ formatter.dateStyle = .medium
+ label.text = "Joined: \(formatter.string(from: date))"
+
+ return label
})
```
-
-
-
-
-**Example**
-
- 
+ 
-In this example, we will create a UIView file `Custom_Tail_GroupView` and pass it inside the `.setTailView()` method.
-
-```swift Custom_Tail_GroupView
-
-import UIKit
-import CometChatSDK
-import CometChatUIKitSwift
-
-class CustomTailGroupView: UIView {
-
- let tailLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false
- label.font = UIFont.systemFont(ofSize: 10, weight: .semibold)
- label.textColor = UIColor(hex: "#6852D6")
- return label
- }()
-
- override init(frame: CGRect) {
- super.init(frame: frame)
- addSubview(tailLabel)
- NSLayoutConstraint.activate([
- tailLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
- tailLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
- self.heightAnchor.constraint(equalToConstant: 22),
- self.layer.cornerRadius = 11
- ])
- self.backgroundColor = UIColor(hex: "#EDEAFA")
- }
+### Custom Tail View
- required init?(coder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
- }
+Add custom content on the right side of each row:
- // Configure the view with a group member
- func configure(with groupMember: GroupMember) {
- tailLabel.text = "\(groupMember.name!.description )"
- }
-}
-```
-
-***
-
-#### SubtitleView
-
-You can set your custom Subtitle view using the `.setSubtitleView()` method. But keep in mind, by using this you will override the default Subtitle view functionality.
-
-
-
```swift
-let cometChatGroupMembers = CometChatGroupMembers(group: group)
-cometChatGroupMembers.setSubtitleView(subtitleView: { groupMember in
- let customSubtitleGroupMemberView = CustomSubtitleGroupMemberView()
- customSubtitleGroupMemberView.configure(with: groupMember!)
- return customSubtitleGroupMemberView
+groupMembers.setTailView(tailView: { member in
+ let badge = UILabel()
+ badge.text = member!.scope.rawValue.capitalized
+ badge.font = .systemFont(ofSize: 10, weight: .semibold)
+ badge.textColor = UIColor(hex: "#6852D6")
+ badge.backgroundColor = UIColor(hex: "#EDEAFA")
+ badge.textAlignment = .center
+ badge.layer.cornerRadius = 10
+ badge.clipsToBounds = true
+ return badge
})
```
-
-
-
-
-* You can customize the subtitle view for each GroupMembers item to meet your requirements
-
-**Example**
-
-
+
-In this example, we will create a `Custom_Subtitle_GroupMember_View`a UIView file.
+## Custom Swipe Options
-```swift Custom_Subtitle_GroupMember_View
+Add custom actions when swiping on a member:
-import UIKit
-import CometChatSDK
-import CometChatUIKitSwift
-
-class CustomSubtitleGroupMemberView: UIView {
-
- let memberNameLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false
- label.textColor = .init(red: 0.42, green: 0.01, blue: 0.84, alpha: 1.00)
- label.font = UIFont.systemFont(ofSize: 15, weight: .bold)
- return label
- }()
-
- let joinedAtLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false
- label.textColor = .systemBrown
- label.font = UIFont.systemFont(ofSize: 10, weight: .medium)
- return label
- }()
-
- override init(frame: CGRect) {
- super.init(frame: frame)
- addSubview(memberNameLabel)
- addSubview(joinedAtLabel)
-
- NSLayoutConstraint.activate([
- memberNameLabel.topAnchor.constraint(equalTo: topAnchor),
- memberNameLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
- memberNameLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
-
- joinedAtLabel.topAnchor.constraint(equalTo: memberNameLabel.bottomAnchor, constant: 2),
- joinedAtLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
- joinedAtLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
- joinedAtLabel.bottomAnchor.constraint(equalTo: bottomAnchor)
- ])
- }
-
- required init?(coder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
+```swift
+let deleteOption = CometChatGroupMemberOption(
+ id: "delete",
+ title: "Remove",
+ icon: UIImage(systemName: "trash"),
+ backgroundColor: .systemRed,
+ onClick: { member, group, section, option, controller in
+ print("Remove \(member.name ?? "")")
+ // Implement remove logic
}
-
- func configure(with groupMember: GroupMember) {
- memberNameLabel.text = "Member: \(groupMember.name ?? "")"
-
- let date = Date(timeIntervalSince1970: Double(groupMember.joinedAt))
- let dateFormatter = DateFormatter()
- dateFormatter.dateStyle = .medium
- joinedAtLabel.text = "Joined at: \(dateFormatter.string(from: date))"
+)
+
+let messageOption = CometChatGroupMemberOption(
+ id: "message",
+ title: "Message",
+ icon: UIImage(systemName: "message"),
+ backgroundColor: .systemBlue,
+ onClick: { member, group, section, option, controller in
+ let messages = CometChatMessages()
+ messages.set(user: member)
+ controller.navigationController?.pushViewController(messages, animated: true)
}
-}
-```
-
-***
-
-#### Options
-
-Enhance your GroupsMembers component by setting Custom Options to incorporate additional functionalities when swiping
+)
-
-
-```swift
-let cometChatGroupMembers = CometChatGroupMembers(group: group)
-cometChatGroupMembers.setOptions (options:{ group, groupMember in
- //Perform Your Action
+groupMembers.setOptions(options: { group, member in
+ return [messageOption, deleteOption]
})
```
-
-
-
-
-* You can customize the options for group members to meet your requirements
-
-**Example**
-
-In this example, we've enhanced the interface of `CometChatGroupMembers` by introducing a tailored feature. By adding a custom option, such as "Delete" with a corresponding trash icon, users can now enjoy a more interactive and user-friendly experience.
-
-
-
-```swift
-let customOption = CometChatGroupMemberOption(id: "custom_option_1",
- title: "Delete",
- icon: UIImage(systemName: "trash.square"),
- backgroundColor: .red,
- onClick: { groupMember, group, section, option, controller in
- print("Custom option clicked!")
-})
-
-let cometChatGroupMembers = CometChatGroupMembers(group: group)
-cometChatGroupMembers.setOptions(options: { group, groupMember in
- return [customOption]
-})
-```
-
-
-
-
-
-***
+## Custom Menu Buttons
-#### Menus
+Add buttons to the navigation bar:
-You can set the Custom Menus to add more options to the Group members component.
-
-
-
```swift
-let cometChatGroupMembers = CometChatGroupMembers(group: group)
-cometChatGroupMembers.set(menus: [UIBarButtonItem])
+let addButton = UIBarButtonItem(
+ image: UIImage(systemName: "person.badge.plus"),
+ style: .plain,
+ target: self,
+ action: #selector(addMemberTapped)
+)
+
+groupMembers.set(menus: [addButton])
+
+@objc func addMemberTapped() {
+ // Show add member screen
+ let addMembers = CometChatAddMembers(group: group)
+ navigationController?.pushViewController(addMembers, animated: true)
+}
```
-
-
-
-
-* You can customize the menus for groups to meet your requirements
-
-**Example**
-
-In this example, we'll craft a custom button tailored for `CometChatGroupMembers`, enhancing its interface with a personalized `menu` for a more user-friendly experience.
-
-
-
-```swift
-let customMenuButton: UIBarButtonItem = {
- let button = UIButton(type: .system)
- button.setImage(UIImage(systemName: "person.badge.plus"), for: .normal)
- button.setTitle("", for: .normal)
- button.addTarget(self, action: #selector(handleCustomMenu), for: .touchUpInside)
- let barButtonItem = UIBarButtonItem(customView: button)
- return barButtonItem
-}()
-
-let cometChatGroupMembers = CometChatGroupMembers(group: group)
-cometChatGroupMembers.set(menus: [customMenuButton])
-```
+## Listen for Events
-
+React to member changes in your app:
-
-
-***
-
-#### SetLoadingView
-
-You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.
-
-
-
```swift
-let loadingIndicator = UIActivityIndicatorView(style: .medium)
-loadingIndicator.startAnimating()
-cometChatGroupMember.set(loadingView: loadingIndicator)
-```
-
-
-
-
-
-***
-
-#### SetErrorView
-
-You can customize the error view using .set(errorView:). This method accepts a UIView that appears when an error occurs.
-
-
-
-```swift
-let errorLabel = UILabel()
-errorLabel.text = "Something went wrong!"
-errorLabel.textColor = .red
-cometChatGroupMember.set(errorView: errorLabel)
-```
-
-
-
-
-
-***
-
-#### SetEmptyView
-
-You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no group members are available.
-
-
-
-```swift
-let emptyLabel = UILabel()
-emptyLabel.text = "No groups found"
-emptyLabel.textColor = .gray
-emptyLabel.textAlignment = .center
-cometChatGroupMember.set(emptyView: emptyLabel)
+class MyViewController: UIViewController, CometChatGroupEventListener {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ CometChatGroupEvents.addListener("member-listener", self)
+ }
+
+ override func viewWillDisappear(_ animated: Bool) {
+ super.viewWillDisappear(animated)
+ CometChatGroupEvents.removeListener("member-listener")
+ }
+
+ // Member kicked
+ func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {
+ print("\(kickedUser.name ?? "") was kicked")
+ }
+
+ // Member banned
+ func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {
+ print("\(bannedUser.name ?? "") was banned")
+ }
+
+ // Member role changed
+ func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {
+ print("\(updatedUser.name ?? "") is now \(scopeChangedTo)")
+ }
+}
```
-
-
-
+## Style Properties
-***
+| Property | Description |
+|----------|-------------|
+| `backgroundColor` | Background color |
+| `titleColor` | Title text color |
+| `titleFont` | Title font |
+| `listItemTitleTextColor` | Member name color |
+| `listItemTitleFont` | Member name font |
+| `listItemSubTitleTextColor` | Subtitle color |
+| `listItemBackground` | Row background color |
+| `separatorColor` | Row separator color |
-
+## Troubleshooting
-Ensure to pass and present `CometChatGroupMembers`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
+| Issue | Solution |
+|-------|----------|
+| Empty member list | Verify group GUID is correct |
+| Actions not showing | Check user has admin/owner permissions |
+| Custom views not appearing | Ensure views have proper constraints |
+| Events not firing | Verify listener is added before actions |
-
+## Related Components
-***
+- [Groups](/ui-kit/ios/groups) - List all groups
+- [Banned Members](/ui-kit/ios/banned-members) - View banned users
diff --git a/ui-kit/ios/groups.mdx b/ui-kit/ios/groups.mdx
index d105be4d..5db2c5ff 100644
--- a/ui-kit/ios/groups.mdx
+++ b/ui-kit/ios/groups.mdx
@@ -1,560 +1,583 @@
---
title: "Groups"
+description: "Display and manage group chats in your iOS app"
---
-## Overview
-
-`CometChatGroups` functions as a standalone [component](/ui-kit/ios/components-overview#components) designed to create a screen displaying a list of groups, with the added functionality of enabling users to search for specific groups. Acting as a container component, CometChatGroups encapsulates and formats the `CometChatListBase` without introducing any additional behavior of its own.
+The `CometChatGroups` component displays a searchable list of groups, enabling users to browse, join, and interact with group conversations.
-The `Groups` component is composed of the following BaseComponents:
+## Prerequisites
-| Components | Description |
-| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [CometChatListBase](/ui-kit/ios/list-base) | `CometChatListBase` serves as a container component equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list view. |
-| [CometChatListItem](/ui-kit/ios/list-item) | This component renders information extracted from a `Group` object onto a tile, featuring a title, subtitle, leading view, and trailing view. |
+Before using this component, ensure you have:
-***
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- User logged in with `CometChatUIKit.login()`
+- At least one group created in your CometChat dashboard
## Usage
-### Integration
+### Basic Implementation
-The following code snippet illustrates how you can can launch **CometChatGroups**.
+Display a groups list and open messages when a group is tapped:
-
-
```swift
-let groups = CometChatGroups()
-let naviVC = UINavigationController(rootViewController: groups)
-self.present(naviVC, animated: true)
-```
-
-
-
-
-
-
-
-If you are already using a navigation controller, you can use the `pushViewController` function instead of presenting the view controller.
-
-
-
-### Actions
-
-[Actions](/ui-kit/ios/components-overview#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.
-
-1. ##### set(onItemClick:)
-
-`set(OnItemClick:)` is triggered when you click on a ListItem of the groups component. This `set(OnItemClick:)` method proves beneficial when a user intends to customize the on-click behavior in CometChatGroups.
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-
-
-```swift
-cometChatGroups.set(onItemClick: { group, indexPath in
- // Override on item click
-})
+class GroupsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupGroups()
+ }
+
+ private func setupGroups() {
+ let groups = CometChatGroups()
+
+ // Handle group selection
+ groups.set(onItemClick: { [weak self] group, indexPath in
+ self?.openMessages(for: group)
+ })
+
+ let navController = UINavigationController(rootViewController: groups)
+ navController.modalPresentationStyle = .fullScreen
+ present(navController, animated: true)
+ }
+
+ private func openMessages(for group: Group) {
+ let messages = CometChatMessages()
+ messages.set(group: group)
+
+ if let nav = presentedViewController as? UINavigationController {
+ nav.pushViewController(messages, animated: true)
+ }
+ }
+}
```
-
-
-
-
-***
-
-2. ##### set(OnItemLongClick:)
+### Production Implementation
-`set(OnItemLongClick:)` is triggered when you long press on a ListItem of the groups component. This `set(OnItemLongClick:)` method proves beneficial when a user intends to additional functionality on long press on list item in CometChatGroups.
+Complete implementation with selection mode, error handling, and navigation:
-
-
```swift
-cometChatGroups.set(onItemLongClick: { group, indexPath in
- // Override on item click
-})
-```
-
-
-
-
-
-***
-
-##### 3. set(onBack:)
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
-This `set(onBack:)` method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatGroups.
+class ProductionGroupsViewController: UIViewController {
+
+ private var groups: CometChatGroups!
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ view.backgroundColor = .systemBackground
+ setupGroups()
+ setupEventListeners()
+ }
+
+ private func setupGroups() {
+ // Configure request builder for joined groups only
+ let requestBuilder = GroupsRequest.GroupsRequestBuilder(limit: 30)
+ .set(joinedOnly: true)
+
+ groups = CometChatGroups(groupsRequestBuilder: requestBuilder)
+
+ // Handle group tap
+ groups.set(onItemClick: { [weak self] group, indexPath in
+ self?.openGroupChat(group)
+ })
+
+ // Handle long press for options
+ groups.set(onItemLongClick: { [weak self] group, indexPath in
+ self?.showGroupOptions(group)
+ })
+
+ // Handle back button
+ groups.set(onBack: { [weak self] in
+ self?.navigationController?.popViewController(animated: true)
+ })
+
+ // Handle errors
+ groups.set(onError: { [weak self] error in
+ self?.showError(error)
+ })
+
+ // Handle empty state
+ groups.set(onEmpty: { [weak self] in
+ print("No groups available")
+ })
+
+ // Handle loaded groups
+ groups.set(onLoad: { groups in
+ print("Loaded \(groups.count) groups")
+ })
+
+ navigationController?.pushViewController(groups, animated: true)
+ }
+
+ private func setupEventListeners() {
+ CometChatGroupEvents.addListener("groups-vc-listener", self as CometChatGroupEventListener)
+ }
+
+ private func openGroupChat(_ group: Group) {
+ let messages = CometChatMessages()
+ messages.set(group: group)
+ navigationController?.pushViewController(messages, animated: true)
+ }
+
+ private func showGroupOptions(_ group: Group) {
+ let alert = UIAlertController(title: group.name, message: nil, preferredStyle: .actionSheet)
+
+ alert.addAction(UIAlertAction(title: "View Details", style: .default) { [weak self] _ in
+ self?.showGroupDetails(group)
+ })
+
+ alert.addAction(UIAlertAction(title: "Leave Group", style: .destructive) { [weak self] _ in
+ self?.leaveGroup(group)
+ })
+
+ alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+
+ present(alert, animated: true)
+ }
+
+ private func showGroupDetails(_ group: Group) {
+ let details = CometChatGroupDetails()
+ details.set(group: group)
+ navigationController?.pushViewController(details, animated: true)
+ }
+
+ private func leaveGroup(_ group: Group) {
+ CometChat.leaveGroup(GUID: group.guid) { [weak self] _ in
+ DispatchQueue.main.async {
+ self?.groups.remove(group: group)
+ }
+ } onError: { error in
+ print("Leave group error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ private func showError(_ error: CometChatException) {
+ let alert = UIAlertController(
+ title: "Error",
+ message: error.errorDescription,
+ preferredStyle: .alert
+ )
+ alert.addAction(UIAlertAction(title: "OK", style: .default))
+ present(alert, animated: true)
+ }
+
+ deinit {
+ CometChatGroupEvents.removeListener("groups-vc-listener")
+ }
+}
-
-
-```swift
-cometChatGroups.set(onBack: {
- // Override on back
-})
+// MARK: - Group Event Listener
+extension ProductionGroupsViewController: CometChatGroupEventListener {
+
+ func onGroupCreate(group: Group) {
+ groups.insert(group: group, at: 0)
+ }
+
+ func onGroupDelete(group: Group) {
+ groups.remove(group: group)
+ }
+
+ func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) {
+ groups.update(group: joinedGroup)
+ }
+
+ func onGroupMemberLeave(leftUser: User, leftGroup: Group) {
+ groups.update(group: leftGroup)
+ }
+
+ func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) {
+ groups.update(group: group)
+ }
+
+ func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {
+ groups.update(group: bannedGroup)
+ }
+
+ func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group) {
+ groups.update(group: unbannedUserGroup)
+ }
+
+ func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {
+ groups.update(group: kickedGroup)
+ }
+
+ func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {
+ groups.update(group: group)
+ }
+
+ func onOwnershipChange(group: Group?, member: GroupMember?) {
+ if let group = group {
+ groups.update(group: group)
+ }
+ }
+}
```
-
-
-
+## Actions
-***
+Actions let you customize component behavior through callbacks.
-##### 4. set(onSelection:)
+| Action | Description |
+|--------|-------------|
+| `set(onItemClick:)` | Triggered when a group is tapped |
+| `set(onItemLongClick:)` | Triggered on long press |
+| `set(onBack:)` | Triggered when back button is pressed |
+| `set(onSelection:)` | Triggered when groups are selected (selection mode) |
+| `set(onError:)` | Triggered when an error occurs |
+| `set(onEmpty:)` | Triggered when the list is empty |
+| `set(onLoad:)` | Triggered when groups are loaded |
-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 groups.
-
-
-
```swift
+let groups = CometChatGroups()
-cometChatGroups.set(onSelection: { groups in
- //Handle action
+groups.set(onItemClick: { group, indexPath in
+ print("Tapped: \(group.name ?? "")")
})
-```
-
-
-
-
-
-***
-##### 5. set(onError:)
-
-This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatGroups.
-
-
-
-```swift
-cometChatGroups.set(onError: { error in
- // Override on error
+groups.set(onItemLongClick: { group, indexPath in
+ print("Long pressed: \(group.name ?? "")")
})
-```
-
-
-
-
-
-***
-
-##### 6. set(onEmpty:)
-
-This `set(onEmpty:)` method is triggered when the groups list is empty in CometChatGroups.
-
-
-```swift
-cometChatGroups.set(onEmpty: {
- // Handle empty state
+groups.set(onBack: {
+ print("Back button pressed")
})
-```
-
-
-
-
-***
+groups.set(onSelection: { selectedGroups in
+ print("Selected \(selectedGroups.count) groups")
+})
-##### 7. setOnLoad
+groups.set(onError: { error in
+ print("Error: \(error.errorDescription)")
+})
-This set(onLoad:) gets triggered when a group list is fully fetched and going to displayed on the screen, this return the list of groups to get displayed on the screen.
+groups.set(onEmpty: {
+ print("No groups found")
+})
-
-
-```swift
-cometChatGroups.set(onLoad: { groups in
- // Handle loaded groups
+groups.set(onLoad: { groups in
+ print("Loaded \(groups.count) groups")
})
```
-
+## Filters
-
+Filter the groups list using `GroupsRequestBuilder`.
-***
+| Method | Type | Description |
+|--------|------|-------------|
+| `setLimit` | Int | Maximum groups per request |
+| `setSearchKeyword` | String | Filter by search term |
+| `joinedOnly` | Bool | Show only joined groups |
+| `setTags` | [String] | Filter by tags |
+| `withTags` | Bool | Include tag information |
-### Filters
+### Show Only Joined Groups
-**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.
-
-##### 1. GroupsRequestBuilder
-
-The [GroupsRequestBuilder](/sdk/ios/retrieve-groups) enables you to filter and customize the group list based on available parameters in GroupsRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupsRequestBuilder](/sdk/ios/retrieve-groups)
-
-| Methods | Type | Description |
-| -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
-| **setLimit** | Int | Configure the maximum number of groups to fetch in a single request, optimizing pagination for smoother navigation. |
-| **setSearchKeyword** | String | Employed to retrieve groups that match the provided string, facilitating precise searches. |
-| **joinedOnly** | boolean | Exclusively fetches joined groups. |
-| **setTags** | \[String] | Utilized to fetch groups containing the specified tags. |
-| **withTags** | boolean | Utilized to retrieve groups with specific tags. |
-
-**Example**
-
-In the example below, we are applying a filter to the Group List based on only joined groups.
-
-
-
```swift
-// You can create GroupRequestBuilder as per your requirement
-let groupsRequestBuilder = GroupsRequest.GroupsRequestBuilder(limit: 20).set(joinedOnly: true)
+let requestBuilder = GroupsRequest.GroupsRequestBuilder(limit: 30)
+ .set(joinedOnly: true)
-let groups = CometChatGroups(groupsRequestBuilder: groupsRequestBuilder)
-let naviVC = UINavigationController(rootViewController: groups)
-self.present(naviVC, animated: true)
+let groups = CometChatGroups(groupsRequestBuilder: requestBuilder)
```
-
-
-
-
-##### 2. SearchRequestBuilder
-
-The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/ios/retrieve-groups) enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder. This feature allows you to keep uniformity between the displayed Groups List and searched Group List.
+### Search Groups
-**Example**
-
-
-
```swift
-// You can create GroupRequestBuilder as per your requirement
-let groupsRequestBuilder = GroupsRequest.GroupsRequestBuilder(limit: 2).set(searchKeyword: "")
+let searchBuilder = GroupsRequest.GroupsRequestBuilder(limit: 20)
+ .set(searchKeyword: "design")
-let groups = CometChatGroups(groupsRequestBuilder: groupsRequestBuilder)
-let naviVC = UINavigationController(rootViewController: groups)
-self.present(naviVC, animated: true)
+let groups = CometChatGroups(groupsRequestBuilder: searchBuilder)
```
-
-
-
+### Filter by Tags
-***
+```swift
+let tagBuilder = GroupsRequest.GroupsRequestBuilder(limit: 30)
+ .set(tags: ["engineering", "marketing"])
+ .set(withTags: true)
-### Events
+let groups = CometChatGroups(groupsRequestBuilder: tagBuilder)
+```
-[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.
+## Events
-The list of events emitted by the Groups component is as follows.
+Listen for group-related events across your app.
-| Event | Description |
-| ---------------------------- | -------------------------------------------------------------------------------------------------------- |
-| **onGroupCreate** | This gets triggered when the logged in user creates a group. |
-| **onGroupDelete** | This gets triggered when the logged in user deletes a group. |
-| **onGroupMemberLeave** | This gets triggered when the logged in user leaves a group. |
-| **onGroupMemberChangeScope** | This gets triggered when the logged in user changes the scope of another group member. |
-| **onGroupMemberBan** | This gets triggered when the logged in user bans a group member from the group. |
-| **onGroupMemberKick** | This gets triggered when the logged in user kicks another group member from the group. |
-| **onGroupMemberUnban** | This gets triggered when the logged in user unbans a user banned from the group. |
-| **onGroupMemberJoin** | This gets triggered when the logged in user joins a group. |
-| **onGroupMemberAdd** | This gets triggered when the logged in user adds new members to the group. |
-| **onOwnershipChange** | This gets triggered when the logged in user transfers the ownership of their group to some other member. |
+| Event | Description |
+|-------|-------------|
+| `onGroupCreate` | Group was created |
+| `onGroupDelete` | Group was deleted |
+| `onGroupMemberJoin` | User joined a group |
+| `onGroupMemberLeave` | User left a group |
+| `onGroupMemberAdd` | Members were added |
+| `onGroupMemberBan` | Member was banned |
+| `onGroupMemberUnban` | Member was unbanned |
+| `onGroupMemberKick` | Member was kicked |
+| `onGroupMemberChangeScope` | Member scope changed |
+| `onOwnershipChange` | Group ownership transferred |
-Adding `CometChatGroupsEvents` Listener's
+### Add Event Listener
-
-
```swift
-// View controller from your project where you want to listen events.
-public class ViewController: UIViewController {
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
- public override func viewDidLoad() {
+class GroupEventsViewController: UIViewController {
+
+ private let listenerID = "group-events-listener"
+
+ override func viewDidLoad() {
super.viewDidLoad()
-
- // Subscribing for the listener to listen events from user module
- CometChatGroupEvents.addListener("UNIQUE_ID", self as CometChatGroupEventListener)
+ CometChatGroupEvents.addListener(listenerID, self as CometChatGroupEventListener)
}
-
-}
-
- // Listener events from groups module
-extension ViewController: CometChatGroupEventListener {
-
- public func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) {
- // Do Stuff
+
+ deinit {
+ CometChatGroupEvents.removeListener(listenerID)
}
+}
- public func onCreateGroupClick() {
- // Do Stuff
+extension GroupEventsViewController: CometChatGroupEventListener {
+
+ func onGroupCreate(group: Group) {
+ print("Group created: \(group.name ?? "")")
}
-
- public func onGroupCreate(group: Group) {
- // Do Stuff
+
+ func onGroupDelete(group: Group) {
+ print("Group deleted: \(group.name ?? "")")
}
-
- public func onGroupDelete(group: Group) {
- // Do Stuff
+
+ func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) {
+ print("\(joinedUser.name ?? "") joined \(joinedGroup.name ?? "")")
}
-
- public func onGroupMemberJoin(joinedUser: User, joinedGroup: Group) {
- // Do Stuff
+
+ func onGroupMemberLeave(leftUser: User, leftGroup: Group) {
+ print("\(leftUser.name ?? "") left \(leftGroup.name ?? "")")
}
-
- public func onGroupMemberLeave(leftUser: User, leftGroup: Group) {
- // Do Stuff
+
+ func onGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User) {
+ print("\(members.count) members added to \(group.name ?? "")")
}
-
- public func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {
- // Do Stuff
+
+ func onGroupMemberBan(bannedUser: User, bannedGroup: Group) {
+ print("\(bannedUser.name ?? "") banned from \(bannedGroup.name ?? "")")
}
-
- public func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group) {
- // Do Stuff
+
+ func onGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group) {
+ print("\(unbannedUserUser.name ?? "") unbanned from \(unbannedUserGroup.name ?? "")")
}
-
- public func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {
- // Do Stuff
+
+ func onGroupMemberKick(kickedUser: User, kickedGroup: Group) {
+ print("\(kickedUser.name ?? "") kicked from \(kickedGroup.name ?? "")")
}
-
- public func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {
- // Do Stuff
+
+ func onGroupMemberChangeScope(updatedBy: User, updatedUser: User, scopeChangedTo: CometChat.MemberScope, scopeChangedFrom: CometChat.MemberScope, group: Group) {
+ print("\(updatedUser.name ?? "") scope changed to \(scopeChangedTo)")
}
-
- public func onOwnershipChange(group: Group?, member: GroupMember?) {
- // Do Stuff
+
+ func onOwnershipChange(group: Group?, member: GroupMember?) {
+ print("Ownership transferred to \(member?.name ?? "")")
}
}
```
-
+### Emit Events
-
-
-```swift Emitting Group Events
-///you need to pass the [Group] object of the group which is created
-CometChatGroupEvents.emitOnGroupCreate(group: Group)
-
-///you need to pass the [Group] object of the group which is deleted
-CometChatGroupEvents.emitOnGroupDelete(group: Group)
-
-///emit this when logged in user leaves the group.
-CometChatGroupEvents.emitOnGroupMemberLeave(leftUser: User, leftGroup: Group)
+```swift
+// Emit group created event
+CometChatGroupEvents.emitOnGroupCreate(group: group)
-///emit this when group member's scope is changed by logged in user.
-CometChatGroupEvents.emitOnGroupMemberChangeScope(updatedBy: User , updatedUser: User , scopeChangedTo: CometChat.MemberScope , scopeChangedFrom: CometChat.MemberScope, group: Group)
+// Emit group deleted event
+CometChatGroupEvents.emitOnGroupDelete(group: group)
-///emit this when group member is banned from the group by logged in user.
-CometChatGroupEvents.emitOnGroupMemberBan(bannedUser: User, bannedGroup: Group, bannedBy: User)
+// Emit member joined event
+CometChatGroupEvents.emitOnGroupMemberJoin(joinedUser: user, joinedGroup: group)
-///emit this when group member is kicked from the group by logged in user.
-CometChatGroupEvents.emitOnGroupMemberKick(kickedUser: User, kickedGroup: Group, kickedBy: User)
+// Emit member left event
+CometChatGroupEvents.emitOnGroupMemberLeave(leftUser: user, leftGroup: group)
-///emit this when a banned group member is unbanned from group by logged in user.
-CometChatGroupEvents.emitOnGroupMemberUnban(unbannedUserUser: User, unbannedUserGroup: Group, unbannedBy: User)
+// Emit members added event
+CometChatGroupEvents.emitOnGroupMemberAdd(group: group, members: members, addedBy: user)
-///emit this when logged in user has joined a group successfully.
-CometChatGroupEvents.emitOnGroupMemberJoin(joinedUser: User, joinedGroup: Group)
+// Emit member banned event
+CometChatGroupEvents.emitOnGroupMemberBan(bannedUser: user, bannedGroup: group, bannedBy: admin)
-//emit this when members are added to a group by the logged in user.
-CometChatGroupEvents.emitOnGroupMemberAdd(group: Group, members: [GroupMember], addedBy: User)
+// Emit member unbanned event
+CometChatGroupEvents.emitOnGroupMemberUnban(unbannedUserUser: user, unbannedUserGroup: group, unbannedBy: admin)
-///emit this when ownership is changed by logged in user.
-CometChatGroupEvents.emitOnGroupMemberChangeScope(updatedBy: User , updatedUser: User , scopeChangedTo: CometChat.MemberScope , scopeChangedFrom: CometChat.MemberScope, group: Group)
+// Emit member kicked event
+CometChatGroupEvents.emitOnGroupMemberKick(kickedUser: user, kickedGroup: group, kickedBy: admin)
```
-Removing `CometChatGroupsEvents` Listener's
-
-
-
-```swift
-public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events
-CometChatGroupEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
-}
-```
+## Styling
-
+Customize the appearance using `GroupsStyle`.
-
+### Global Styling
-## Customization
+Apply styles to all `CometChatGroups` instances:
-To fit your app's design requirements, you can customize the appearance of the groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+```swift
+// Configure avatar style
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-### Style
+// Configure groups style
+CometChatGroups.style.titleColor = UIColor(hex: "#F76808")
+CometChatGroups.style.titleFont = UIFont.systemFont(ofSize: 34, weight: .bold)
+CometChatGroups.avatarStyle = avatarStyle
+```
-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.
+### Instance Styling
-##### 1. Groups Style
+Apply styles to a specific instance:
-Enhance your Groups Component by setting the GroupsStyle to customize its appearance.
+```swift
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
-**Group level styling**
+let groupsStyle = GroupsStyle()
+groupsStyle.titleColor = UIColor(hex: "#F76808")
+groupsStyle.titleFont = UIFont.systemFont(ofSize: 34, weight: .bold)
+groupsStyle.backgroundColor = .systemBackground
+groupsStyle.listItemTitleTextColor = .label
+groupsStyle.listItemSubTitleTextColor = .secondaryLabel
-
-
-```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-
-CometChatGroups.style.titleColor = UIColor(hex: "#F76808")
-CometChatGroups.style.titleFont = UIFont(name: "Times-New-Roman", size: 34)
-CometChatGroups.avatarStyle = customAvatarStyle
+let groups = CometChatGroups()
+groups.style = groupsStyle
+groups.avatarStyle = avatarStyle
```
-
-
-
+
+ 
+
-**Instance level styling**
+### Style Properties
+
+| Property | Description | Code |
+|----------|-------------|------|
+| `listItemSelectedImage` | Check box image when a list item is selected | `listItemSelectedImage` |
+| `listItemDeSelectedImage` | Check box image when a list item is deselected | `listItemDeSelectedImage` |
+| `searchIconTintColor` | Tint color for the search icon | `searchIconTintColor` |
+| `searchBarStyle` | Style of the search bar | `searchBarStyle` |
+| `searchTintColor` | Tint color for the search bar | `searchTintColor` |
+| `searchBarTintColor` | Background color of the search bar | `searchBarTintColor` |
+| `searchBarPlaceholderTextColor` | Placeholder text color for the search bar | `searchBarPlaceholderTextColor` |
+| `searchBarPlaceholderTextFont` | Font for the placeholder text in the search bar | `searchBarPlaceholderTextFont` |
+| `searchBarTextColor` | Color of the text entered in the search bar | `searchBarTextColor` |
+| `searchBarTextFont` | Font for the text in the search bar | `searchBarTextFont` |
+| `searchBarBackgroundColor` | Background color of the search bar | `searchBarBackgroundColor` |
+| `searchBarCancelIconTintColor` | Tint color for the cancel icon in the search bar | `searchBarCancelIconTintColor` |
+| `searchBarCrossIconTintColor` | Tint color for the cross icon in the search bar | `searchBarCrossIconTintColor` |
+| `backgroundColor` | Background color of the overall view | `backgroundColor` |
+| `borderWidth` | Width of the border around the view | `borderWidth` |
+| `borderColor` | Color of the border around the view | `borderColor` |
+| `cornerRadius` | Corner radius settings for the view | `cornerRadius` |
+| `titleColor` | Color for the title text | `titleColor` |
+| `titleFont` | Font used for the title text | `titleFont` |
+| `largeTitleColor` | Color for the large title text | `largeTitleColor` |
+| `largeTitleFont` | Font used for the large title text | `largeTitleFont` |
+| `navigationBarTintColor` | Background color of the navigation bar | `navigationBarTintColor` |
+| `navigationBarItemsTintColor` | Tint color for items in the navigation bar | `navigationBarItemsTintColor` |
+| `errorTitleTextFont` | Font used for the error title text | `errorTitleTextFont` |
+| `errorTitleTextColor` | Color of the error title text | `errorTitleTextColor` |
+| `errorSubTitleFont` | Font used for the error subtitle text | `errorSubTitleFont` |
+| `errorSubTitleTextColor` | Color of the error subtitle text | `errorSubTitleTextColor` |
+| `retryButtonTextColor` | Color for the retry button text | `retryButtonTextColor` |
+| `retryButtonTextFont` | Font used for the retry button text | `retryButtonTextFont` |
+| `retryButtonBackgroundColor` | Background color for the retry button | `retryButtonBackgroundColor` |
+| `retryButtonBorderColor` | Border color for the retry button | `retryButtonBorderColor` |
+| `retryButtonBorderWidth` | Width of the border around the retry button | `retryButtonBorderWidth` |
+| `retryButtonCornerRadius` | Corner radius settings for the retry button | `retryButtonCornerRadius` |
+| `emptyTitleTextFont` | Font used for the empty state title text | `emptyTitleTextFont` |
+| `emptyTitleTextColor` | Color of the empty state title text | `emptyTitleTextColor` |
+| `emptySubTitleFont` | Font used for the empty state subtitle text | `emptySubTitleFont` |
+| `emptySubTitleTextColor` | Color of the empty state subtitle text | `emptySubTitleTextColor` |
+| `tableViewSeparator` | Color of the table view separator | `tableViewSeparator` |
+| `listItemTitleTextColor` | Color of the title text in list items | `listItemTitleTextColor` |
+| `listItemTitleFont` | Font used for the title text in list items | `listItemTitleFont` |
+| `listItemSubTitleTextColor` | Color of the subtitle text in list items | `listItemSubTitleTextColor` |
+| `listItemSubTitleFont` | Font used for the subtitle text in list items | `listItemSubTitleFont` |
+| `listItemBackground` | Background color for list items | `listItemBackground` |
+| `listItemSelectedBackground` | Background color for list items if selected | `listItemSelectedBackground` |
+| `listItemBorderWidth` | Width of the border around list items | `listItemBorderWidth` |
+| `listItemBorderColor` | Color of the border around list items | `listItemBorderColor` |
+| `listItemCornerRadius` | Corner radius settings for list items | `listItemCornerRadius` |
+| `listItemSelectionImageTint` | Tint color for the selection image in list items | `listItemSelectionImageTint` |
+| `listItemDeSelectedImageTint` | Tint color for the deselected image in list items | `listItemDeSelectedImageTint` |
+| `passwordGroupImageTintColor` | Tint color for the password group image | `passwordGroupImageTintColor` |
+| `passwordGroupImageBackgroundColor` | Background color for the password group image | `passwordGroupImageBackgroundColor` |
+| `privateGroupImageTintColor` | Tint color for the private group image | `privateGroupImageTintColor` |
+| `privateGroupImageBackgroundColor` | Background color for the private group image | `privateGroupImageBackgroundColor` |
+| `privateGroupIcon` | Image for a private group icon | `privateGroupIcon` |
+| `protectedGroupIcon` | Image for a protected group icon | `protectedGroupIcon` |
+
+## Functionality
+
+Configure component behavior with these properties and methods:
+
+| Method | Description | Code |
+|--------|-------------|------|
+| `set(groupsRequestBuilder:)` | Sets the request builder for fetching groups | `set(groupsRequestBuilder: requestBuilder)` |
+| `set(searchRequestBuilder:)` | Sets the request builder for searching groups | `set(searchRequestBuilder: searchRequestBuilder)` |
+| `set(searchKeyword:)` | Sets the search keyword to filter groups | `set(searchKeyword: "group_name")` |
+| `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` |
-
-
```swift
-let customAvatarStyle = AvatarStyle()
-customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
-customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
-
-let groupStyle = GroupsStyle()
-groupStyle.titleColor = UIColor(hex: "#F76808")
-groupStyle.titleFont = UIFont(name: "Times-New-Roman", size: 34)
-
-let customGroup = CometChatGroups()
-customGroup.style = groupStyle
-customGroup.avatarStyle = customAvatarStyle
+let groups = CometChatGroups()
+groups.hideSearch = true
+groups.hideGroupType = false
+groups.hideBackButton = true
+groups.hideErrorView = false
+groups.hideLoadingState = false
```
-
+## Custom Views
-
+### SetOptions
-
-
-
+You can define custom options for each group using `.set(options:)`. This method allows you to return an array of `CometChatGroupOption` based on the group object.
-| **Property** | **Description** | **Code** |
-| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| **List Item Selected Image** | Check box image when a list item is selected. | `listItemSelectedImage` |
-| **List Item Deselected Image** | Check box image when a list item is deselected. | `listItemDeSelectedImage` |
-| **Search Icon Tint Color** | Tint color for the search icon, defaults to the secondary icon color from CometChatTheme. | `searchIconTintColor` |
-| **Search Bar Style** | Style of the search bar, defaulting to the standard style. | `searchBarStyle` |
-| **Search Tint Color** | Tint color for the search bar, defaults to the primary color from CometChatTheme. | `searchTintColor` |
-| **Search Bar Tint Color** | Background color of the search bar, defaulting to clear. | `searchBarTintColor` |
-| **Search Bar Placeholder Text Color** | Placeholder text color for the search bar, defaults to the tertiary text color from CometChatTheme. | `searchBarPlaceholderTextColor` |
-| **Search Bar Placeholder Text Font** | Font used for the placeholder text in the search bar, defaults to regular body font. | `searchBarPlaceholderTextFont` |
-| **Search Bar Text Color** | Color of the text entered in the search bar, defaults to the primary text color from CometChatTheme. | `searchBarTextColor` |
-| **Search Bar Text Font** | Font used for the text in the search bar, defaults to regular body font. | `searchBarTextFont` |
-| **Search Bar Background Color** | Background color of the search bar, defaults to a specific background color from CometChatTheme. | `searchBarBackgroundColor` |
-| **Search Bar Cancel Icon Tint Color** | Tint color for the cancel icon in the search bar, defaults to the primary color from CometChatTheme. | `searchBarCancelIconTintColor` |
-| **Search Bar Cross Icon Tint Color** | Tint color for the cross icon in the search bar, defaults to the secondary icon color from CometChatTheme. | `searchBarCrossIconTintColor` |
-| **Background Color** | Background color of the overall view, defaults to a specific background color from CometChatTheme. | `backgroundColor` |
-| **Border Width** | Width of the border around the view, defaults to 0 (no border). | `borderWidth` |
-| **Border Color** | Color of the border around the view, defaults to clear. | `borderColor` |
-| **Corner Radius** | Corner radius settings for the view, defaults to no corner radius. | `cornerRadius` |
-| **Title Color** | Color for the title text, defaults to the primary text color from CometChatTheme. | `titleColor` |
-| **Title Font** | Font used for the title text, defaults to nil (not set). | `titleFont` |
-| **Large Title Color** | Color for the large title text, defaults to the primary text color from CometChatTheme. | `largeTitleColor` |
-| **Large Title Font** | Font used for the large title text, defaults to nil (not set). | `largeTitleFont` |
-| **Navigation Bar Tint Color** | Background color of the navigation bar, defaults to a specific background color from CometChatTheme. | `navigationBarTintColor` |
-| **Navigation Bar Items Tint Color** | Tint color for items in the navigation bar, defaults to the highlight color from CometChatTheme. | `navigationBarItemsTintColor` |
-| **Error Title Text Font** | Font used for the error title text, defaults to a bold heading 3 font from CometChatTypography. | `errorTitleTextFont` |
-| **Error Title Text Color** | Color of the error title text, defaults to the primary text color from CometChatTheme. | `errorTitleTextColor` |
-| **Error Subtitle Font** | Font used for the error subtitle text, defaults to regular body font. | `errorSubTitleFont` |
-| **Error Subtitle Text Color** | Color of the error subtitle text, defaults to the secondary text color from CometChatTheme. | `errorSubTitleTextColor` |
-| **Retry Button Text Color** | Color for the retry button text, defaults to button text color from CometChatTheme. | `retryButtonTextColor` |
-| **Retry Button Text Font** | Font used for the retry button text, defaults to medium button font from CometChatTypography. | `retryButtonTextFont` |
-| **Retry Button Background Color** | Background color for the retry button, defaults to the primary color from CometChatTheme. | `retryButtonBackgroundColor` |
-| **Retry Button Border Color** | Border color for the retry button, defaults to clear. | `retryButtonBorderColor` |
-| **Retry Button Border Width** | Width of the border around the retry button, defaults to 0 (no border). | `retryButtonBorderWidth` |
-| **Retry Button Corner Radius** | Corner radius settings for the retry button, defaults to a specific corner radius from CometChatSpacing. | `retryButtonCornerRadius` |
-| **Empty State Title Font** | Font used for the empty state title text, defaults to a bold heading 3 font from CometChatTypography. | `emptyTitleTextFont` |
-| **Empty State Title Color** | Color of the empty state title text, defaults to the primary text color from CometChatTheme. | `emptyTitleTextColor` |
-| **Empty State Subtitle Font** | Font used for the empty state subtitle text, defaults to regular body font. | `emptySubTitleFont` |
-| **Empty State Subtitle Color** | Color of the empty state subtitle text, defaults to the secondary text color from CometChatTheme. | `emptySubTitleTextColor` |
-| **Table View Separator** | Color of the table view separator, defaults to clear. | `tableViewSeparator` |
-| **List Item Title Text Color** | Color of the title text in list items, defaults to the primary text color from CometChatTheme. | `listItemTitleTextColor` |
-| **List Item Title Font** | Font used for the title text in list items, defaults to medium heading 4 font from CometChatTypography. | `listItemTitleFont` |
-| **List Item Subtitle Text Color** | Color of the subtitle text in list items, defaults to the secondary text color from CometChatTheme. | `listItemSubTitleTextColor` |
-| **List Item Subtitle Font** | Font used for the subtitle text in list items, defaults to regular body font. | `listItemSubTitleFont` |
-| **List Item Background** | Background color for list items, defaults to clear. | `listItemBackground` |
-| **List Item Selected Background** | Background color for list items if selected, defaults to clear. | `listItemSelectedBackground` |
-| **List Item Border Width** | Width of the border around list items, defaults to 0 (no border). | `listItemBorderWidth` |
-| **List Item Border Color** | Color of the border around list items, defaults to the light border color from CometChatTheme. | `listItemBorderColor` |
-| **List Item Corner Radius** | Corner radius settings for list items, defaults to no corner radius. | `listItemCornerRadius` |
-| **List Item Selection Image Tint** | Tint color for the selection image in list items, defaults to the highlight color from CometChatTheme. | `listItemSelectionImageTint` |
-| **List Item Deselection Image Tint** | Tint color for the deselected image in list items. | `listItemDeSelectedImageTint` |
-| **Password Group Image Tint Color** | Tint color for the password group image, defaults to the background color from CometChatTheme. | `passwordGroupImageTintColor` |
-| **Password Group Image Background Color** | Background color for the password group image, defaults to the warning color from CometChatTheme. | `passwordGroupImageBackgroundColor` |
-| **Private Group Image Tint Color** | Tint color for the private group image, defaults to the background color from CometChatTheme. | `privateGroupImageTintColor` |
-| **Private Group Image Background Color** | Background color for the private group image, defaults to the success color from CometChatTheme. | `privateGroupImageBackgroundColor` |
-| **Private Group Icon** | Image for a private group icon. | `privateGroupIcon` |
-| **Protected Group Icon** | Image for a protected group icon. | `protectedGroupIcon` |
-
-***
-
-### 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 change text, set custom icons, and toggle the visibility of UI elements.
-
-Below is a list of customizations along with corresponding code snippets
-
-| Method | Description | Code |
-| ---------------------------- | ---------------------------------------------- | ------------------------------------------------- |
-| set(groupsRequestBuilder:) | Sets the request builder for fetching groups. | `set(groupsRequestBuilder: requestBuilder)` |
-| set(searchRequestBuilder:) | Sets the request builder for searching groups. | `set(searchRequestBuilder: searchRequestBuilder)` |
-| set(searchKeyword:) | Sets the search keyword to filter groups. | `set(searchKeyword: "group_name")` |
-| 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` |
-
-***
-
-### 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.
-
-***
-
-#### SetOptions
-
-You can define custom options for each group using .set(options:). This method allows you to return an array of CometChatGroupOption based on the group object.
-
-
-
```swift
cometChatGroups.set(options: { group in
return [CometChatGroupOptions]
})
```
-
-
-
-
-***
+### AddOptions
-#### AddOptions
+You can dynamically add options to groups using `.add(options:)`. This method lets you return additional `CometChatGroupOption` elements.
-You can dynamically add options to groups using .add(options:). This method lets you return additional CometChatGroupOption elements.
-
-
-
```swift
cometChatGroups.add(options: { group in
return [ArchiveOption()]
})
```
-
-
-
-
-***
-
-#### SetListItemView
+### SetListItemView
With this function, you can assign a custom ListItem to the groups Component.
-
-
```swift
let cometChatGroups = CometChatGroups()
cometChatGroups.set(listItemView: { group in
@@ -563,51 +586,52 @@ cometChatGroups.set(listItemView: { group in
})
```
-
+### Custom List Item
-
+Replace the default group cell with a custom view:
-Demonstration
+```swift
+let groups = CometChatGroups()
+groups.set(listItemView: { group in
+ let customView = CustomGroupCell()
+ customView.configure(with: group)
+ return customView
+})
+```
-You can create a `CustomListItemView` as a custom `UIView`. Which we will inflate in `setListItemView()`
-
-```swift swift
+```swift
import UIKit
import CometChatSDK
-import CometChatUIKitSwift
-class GroupCellView: UIView {
-
- // MARK: - Properties
+class CustomGroupCell: UIView {
private let avatarImageView: UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
- imageView.contentMode = .scaleAspectFit
- imageView.layer.cornerRadius = 20 // Circular avatar
+ imageView.contentMode = .scaleAspectFill
+ imageView.layer.cornerRadius = 20
imageView.clipsToBounds = true
+ imageView.backgroundColor = .systemGray5
return imageView
}()
private let titleLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
- label.font = UIFont.systemFont(ofSize: 16, weight: .bold)
- label.textColor = .black
- label.numberOfLines = 1
+ label.font = .systemFont(ofSize: 16, weight: .semibold)
+ label.textColor = .label
return label
}()
- private let subtitleLabel: UILabel = {
+ private let membersLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
- label.font = UIFont.systemFont(ofSize: 14, weight: .regular)
- label.textColor = .darkGray
- label.numberOfLines = 1
+ label.font = .systemFont(ofSize: 14)
+ label.textColor = .secondaryLabel
return label
}()
@@ -615,17 +639,13 @@ class GroupCellView: UIView {
let button = UIButton(type: .system)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("JOIN", for: .normal)
- button.setTitleColor(.systemBlue, for: .normal)
- button.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
+ button.titleLabel?.font = .systemFont(ofSize: 12, weight: .bold)
button.layer.cornerRadius = 12
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.systemBlue.cgColor
- button.clipsToBounds = true
return button
}()
- // MARK: - Initializers
-
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
@@ -636,40 +656,26 @@ class GroupCellView: UIView {
setupView()
}
- // MARK: - Setup
-
private func setupView() {
- // Add subviews
addSubview(avatarImageView)
addSubview(titleLabel)
- addSubview(subtitleLabel)
+ addSubview(membersLabel)
addSubview(joinButton)
- // Constraints for avatarImageView
NSLayoutConstraint.activate([
avatarImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
avatarImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
avatarImageView.widthAnchor.constraint(equalToConstant: 40),
- avatarImageView.heightAnchor.constraint(equalToConstant: 40)
- ])
-
- // Constraints for titleLabel
- NSLayoutConstraint.activate([
+ avatarImageView.heightAnchor.constraint(equalToConstant: 40),
+
titleLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 12),
- titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
- titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: joinButton.leadingAnchor, constant: -8)
- ])
-
- // Constraints for subtitleLabel
- NSLayoutConstraint.activate([
- subtitleLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 12),
- subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 4),
- subtitleLabel.trailingAnchor.constraint(lessThanOrEqualTo: joinButton.leadingAnchor, constant: -8),
- subtitleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
- ])
-
- // Constraints for joinButton
- NSLayoutConstraint.activate([
+ titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 12),
+ titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: joinButton.leadingAnchor, constant: -8),
+
+ membersLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 12),
+ membersLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 4),
+ membersLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -12),
+
joinButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
joinButton.centerYAnchor.constraint(equalTo: centerYAnchor),
joinButton.widthAnchor.constraint(equalToConstant: 60),
@@ -677,27 +683,32 @@ class GroupCellView: UIView {
])
}
- // MARK: - Configuration
-
- func configure(avatar: UIImage?, title: String, subtitle: String, isJoined: Bool) {
- avatarImageView.image = avatar
- titleLabel.text = title
- subtitleLabel.text = subtitle
+ func configure(with group: Group) {
+ titleLabel.text = group.name
+ membersLabel.text = "\(group.membersCount) members"
+
+ if let iconURL = group.icon, let url = URL(string: iconURL) {
+ URLSession.shared.dataTask(with: url) { [weak self] data, _, _ in
+ if let data = data, let image = UIImage(data: data) {
+ DispatchQueue.main.async {
+ self?.avatarImageView.image = image
+ }
+ }
+ }.resume()
+ }
+
+ let isJoined = group.hasJoined
joinButton.setTitle(isJoined ? "JOINED" : "JOIN", for: .normal)
- joinButton.setTitleColor(isJoined ? .gray : .systemBlue, for: .normal)
- joinButton.layer.borderColor = isJoined ? UIColor.gray.cgColor : UIColor.systemBlue.cgColor
+ joinButton.setTitleColor(isJoined ? .systemGray : .systemBlue, for: .normal)
+ joinButton.layer.borderColor = isJoined ? UIColor.systemGray.cgColor : UIColor.systemBlue.cgColor
}
}
```
-***
+### SetLeadingView
-#### SetLeadingView
+You can modify the leading view of a group cell using `.set(leadingView:)`.
-You can modify the leading view of a group cell using .set(leadingView:).
-
-
-
```swift
cometChatGroups.set(leadingView: { group in
let view = CustomLeadingView()
@@ -705,20 +716,12 @@ cometChatGroups.set(leadingView: { group in
})
```
-
-
-
-
-Demonstration
-
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
+You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`:
-
-
```swift
import UIKit
@@ -758,23 +761,15 @@ class CustomLeadingView: UIView {
addSubview(joinButton)
iconImageView.translatesAutoresizingMaskIntoConstraints = false
- joinButton.translatesAutoresizingMask
+ joinButton.translatesAutoresizingMaskIntoConstraints = false
}
}
```
-
-
-
-
-***
-
-#### SetTitleView
+### SetTitleView
-You can customize the title view of a group cell using .set(titleView:).
+You can customize the title view of a group cell using `.set(titleView:)`.
-
-
```swift
cometChatGroups.set(titleView: { group in
let view = CustomTitleView()
@@ -782,22 +777,14 @@ cometChatGroups.set(titleView: { group in
})
```
-
-
-
-
-Demonstration
-
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`:
-
-
```swift
- class CustomTitleView: UIView {
+class CustomTitleView: UIView {
private let titleLabel: UILabel = {
let label = UILabel()
@@ -865,18 +852,10 @@ You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate i
}
```
-
-
-
+### SetTrailView
-***
+You can modify the trailing view of a group cell using `.set(trailView:)`.
-#### SetTrailView
-
-You can modify the trailing view of a group cell using .set(trailView:).
-
-
-
```swift
cometChatGroups.set(trailView: { group in
let view = CustomTrailView()
@@ -884,22 +863,14 @@ cometChatGroups.set(trailView: { group in
})
```
-
-
-
-
-Demonstration
-
-You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`
+You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`:
-
-
```swift
- import UIKit
+import UIKit
class CustomTrailView: UIView {
@@ -935,22 +906,12 @@ class CustomTrailView: UIView {
])
}
}
-
-
```
-
-
-
+### SetSubTitleView
-***
+You can customize the subtitle view for each group item to meet your requirements:
-#### SetSubTitleView
-
-You can customize the subtitle view for each group item to meet your requirements
-
-
-
```swift
cometChatGroup.set(subtitleView: { group in
let view = CustomSubtitleView()
@@ -958,22 +919,12 @@ cometChatGroup.set(subtitleView: { group in
})
```
-
-
-
-
-**Example**
-
-Demonstration
-
-You can seamlessly integrate this `CustomSubtitleView` UIView file into the `.set(subtitleView:)` method within CometChatGroups.
+You can seamlessly integrate this `CustomSubtitleView` UIView file into the `.set(subtitleView:)` method within CometChatGroups:
-
-
```swift
import UIKit
@@ -993,36 +944,20 @@ class CustomSubtitleView: UILabel {
}
```
-
-
-
-
-***
-
-#### SetLoadingView
+### SetLoadingView
-You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.
+You can set a custom loading view using `.set(loadingView:)`. This method accepts a UIView to display while data is being fetched.
-
-
```swift
let loadingIndicator = UIActivityIndicatorView(style: .medium)
loadingIndicator.startAnimating()
cometChatGroups.set(loadingView: loadingIndicator)
```
-
+### SetErrorView
-
+You can customize the error view using `.set(errorView:)`. This method accepts a UIView that appears when an error occurs.
-***
-
-#### SetErrorView
-
-You can customize the error view using .set(errorView:). This method accepts a UIView that appears when an error occurs.
-
-
-
```swift
let errorLabel = UILabel()
errorLabel.text = "Something went wrong!"
@@ -1030,18 +965,10 @@ errorLabel.textColor = .red
cometChatGroups.set(errorView: errorLabel)
```
-
-
-
+### SetEmptyView
-***
+You can customize the empty state view using `.set(emptyView:)`. This method accepts a UIView that appears when no groups are available.
-#### SetEmptyView
-
-You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no groups are available.
-
-
-
```swift
let emptyLabel = UILabel()
emptyLabel.text = "No groups found"
@@ -1050,8 +977,65 @@ emptyLabel.textAlignment = .center
cometChatGroups.set(emptyView: emptyLabel)
```
-
+## Group Options
+
+Add custom swipe actions to group cells.
+
+### Set Options
+
+Replace default options:
+
+```swift
+groups.set(options: { group in
+ let leaveOption = CometChatGroupOption(
+ id: "leave",
+ title: "Leave",
+ icon: UIImage(systemName: "arrow.right.square"),
+ backgroundColor: .systemRed
+ ) { group in
+ // Handle leave action
+ }
+ return [leaveOption]
+})
+```
+
+### Add Options
+
+Add options to existing ones:
+
+```swift
+groups.add(options: { group in
+ let archiveOption = CometChatGroupOption(
+ id: "archive",
+ title: "Archive",
+ icon: UIImage(systemName: "archivebox"),
+ backgroundColor: .systemOrange
+ ) { group in
+ // Handle archive action
+ }
+ return [archiveOption]
+})
+```
+
+## Component Structure
+
+| Component | Description |
+|-----------|-------------|
+| [CometChatListBase](/ui-kit/ios/list-base) | Container with navigation bar and search |
+| [CometChatListItem](/ui-kit/ios/list-item) | Individual group cell |
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| Groups not loading | Verify user is logged in and has proper permissions |
+| Search not working | Check `searchRequestBuilder` configuration |
+| Events not firing | Ensure listener is added before actions occur |
+| Styling not applied | Apply styles before presenting the component |
+| Custom views not showing | Return non-nil UIView from closure |
-
+## Related Components
-***
+- [Group Members](/ui-kit/ios/group-members) - Display group member list
+- [Conversations](/ui-kit/ios/conversations) - Display conversation list
+- [Users](/ui-kit/ios/users) - Display user list
diff --git a/ui-kit/ios/guide-ai-agent.mdx b/ui-kit/ios/guide-ai-agent.mdx
index 01fc4ad0..1cd558bc 100644
--- a/ui-kit/ios/guide-ai-agent.mdx
+++ b/ui-kit/ios/guide-ai-agent.mdx
@@ -1,27 +1,10 @@
---
title: "AI Agent Integration"
sidebarTitle: "AI Agent Integration"
+description: "Add AI-powered chat assistants to your iOS app"
---
-Enable intelligent conversational AI capabilities in your iOS app using CometChat UIKit v5 with AI Agent integration:
-
-- **AI Assistant Chat History**
-- **Chat History Management**
-- **Contextual Responses**
-- **Agent Detection**
-- **Seamless Handoffs**
-
-Transform your chat experience with AI-powered assistance that provides intelligent responses and offers seamless integration with your existing chat infrastructure.
-
-## Overview
-
-Users can interact with AI agents through a dedicated chat interface that:
-
-- Provides intelligent responses based on conversation context.
-- Maintains chat history for continuity.
-- Seamlessly integrates with your existing user chat system.
-
-The AI Agent chat interface provides a familiar messaging experience enhanced with AI capabilities, accessible through your main chat flow or as a standalone feature.
+Integrate AI agents into your iOS app to provide intelligent conversational experiences with chat history, contextual responses, and seamless handoffs.
@@ -29,166 +12,524 @@ The AI Agent chat interface provides a familiar messaging experience enhanced wi
## Prerequisites
-- **CometChat UIKit for iOS** installed via CocoaPods or Swift Package Manager
-- CometChat initialized with `App ID`, `Region`, and `Auth Key`
-- Message chat enabled in your CometChat app
-- Navigation set up between message and user/group screens
-- Internet permissions
+Before implementing AI agents, ensure you have:
-## Components
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- CometChat UIKit v5+ installed
+- AI features enabled in your [CometChat Dashboard](https://app.cometchat.com)
+- User logged in with `CometChatUIKit.login()`
-| Component/Class | Role |
-|------------------------------ |------------------------------------------------------|
-| `CometChatMessageHeader` | Manages message interactions and state |
-| `CometChatMessageList` | Displays a list of messages |
-| `CometChatMessageComposer` | Composes and sends new messages |
-| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history |
+## Overview
----
+The AI Agent integration provides:
-## Integration Steps
+- **Intelligent Responses** - Context-aware AI conversations
+- **Chat History** - Browse and resume previous AI sessions
+- **Streaming Responses** - Real-time message streaming
+- **Custom Styling** - Match your app's design
+- **Suggested Messages** - Quick-start prompts for users
-### Step 1 - Screen Setup
+## Basic Implementation
-Create a screen for AI Assistant chat using `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`.
+Create a simple AI chat screen:
-
-
```swift
import UIKit
-import CometChatUIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class AIAgentChatViewController: UIViewController {
+
+ private var user: User?
+ private var messageHeader: CometChatMessageHeader!
+ private var messageList: CometChatMessageList!
+ private var messageComposer: CometChatMessageComposer!
+
+ convenience init(user: User) {
+ self.init()
+ self.user = user
+ }
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ view.backgroundColor = .systemBackground
+ setupUI()
+ }
+
+ private func setupUI() {
+ guard let user = user else { return }
+
+ // Message Header
+ messageHeader = CometChatMessageHeader()
+ messageHeader.set(user: user)
+ messageHeader.translatesAutoresizingMaskIntoConstraints = false
+ view.addSubview(messageHeader)
+
+ // Message List
+ messageList = CometChatMessageList()
+ messageList.set(user: user)
+ messageList.translatesAutoresizingMaskIntoConstraints = false
+ view.addSubview(messageList)
+
+ // Message Composer
+ messageComposer = CometChatMessageComposer()
+ messageComposer.set(user: user)
+ messageComposer.translatesAutoresizingMaskIntoConstraints = false
+ view.addSubview(messageComposer)
+
+ setupConstraints()
+ }
+
+ private func setupConstraints() {
+ NSLayoutConstraint.activate([
+ messageHeader.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+ messageHeader.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+ messageHeader.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+ messageHeader.heightAnchor.constraint(equalToConstant: 60),
+
+ messageList.topAnchor.constraint(equalTo: messageHeader.bottomAnchor),
+ messageList.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+ messageList.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+ messageList.bottomAnchor.constraint(equalTo: messageComposer.topAnchor),
+
+ messageComposer.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+ messageComposer.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+ messageComposer.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
+ ])
+ }
+}
+```
-class AIAssistantChatViewController: UIViewController {
+## Production Implementation
- var user: User?
- var group: Group?
- var parentMessage: BaseMessage?
- var isHistory: Bool = false
+Complete AI agent chat with history, navigation, and error handling:
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ProductionAIAgentViewController: UIViewController {
+
+ // MARK: - Properties
+ private var user: User?
+ private var group: Group?
+ private var parentMessage: BaseMessage?
+ private var isHistoryMode: Bool = false
+
+ private var messageHeader: CometChatMessageHeader!
+ private var messageList: CometChatMessageList!
+ private var messageComposer: CometChatMessageComposer!
+
+ // MARK: - Initialization
+ convenience init(user: User, parentMessage: BaseMessage? = nil, isHistory: Bool = false) {
+ self.init()
+ self.user = user
+ self.parentMessage = parentMessage
+ self.isHistoryMode = isHistory
+ }
+
+ convenience init(group: Group, parentMessage: BaseMessage? = nil, isHistory: Bool = false) {
+ self.init()
+ self.group = group
+ self.parentMessage = parentMessage
+ self.isHistoryMode = isHistory
+ }
+
+ // MARK: - Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
- setupUI()
+ view.backgroundColor = .systemBackground
+ setupMessageHeader()
+ setupMessageList()
+ setupMessageComposer()
+ setupConstraints()
}
-
- func setupUI() {
- let messageHeader = CometChatMessageHeader()
- messageHeader.user = user
- messageHeader.group = group
- messageHeader.onBack = { [weak self] in
- self?.navigationController?.popViewController(animated: true)
+
+ // MARK: - Setup
+ private func setupMessageHeader() {
+ messageHeader = CometChatMessageHeader()
+ messageHeader.translatesAutoresizingMaskIntoConstraints = false
+
+ if let user = user {
+ messageHeader.set(user: user)
+ } else if let group = group {
+ messageHeader.set(group: group)
}
- messageHeader.chatHistoryButtonClick = { [weak self] in
+
+ // Back button handler
+ messageHeader.set(onBack: { [weak self] in
+ self?.navigationController?.popViewController(animated: true)
+ })
+
+ // Chat history button handler
+ messageHeader.set(chatHistoryButtonClick: { [weak self] in
self?.openChatHistory()
- }
+ })
+
view.addSubview(messageHeader)
-
- let messageList = CometChatMessageList()
- messageList.user = user
- messageList.group = group
+ }
+
+ private func setupMessageList() {
+ messageList = CometChatMessageList()
+ messageList.translatesAutoresizingMaskIntoConstraints = false
messageList.hideThreadView = true
+
+ if let user = user {
+ messageList.set(user: user)
+ } else if let group = group {
+ messageList.set(group: group)
+ }
+
+ // If resuming from history, set parent message
+ if let parentMessage = parentMessage {
+ messageList.set(parentMessage: parentMessage)
+ }
+
view.addSubview(messageList)
-
- let composer = CometChatMessageComposer()
- composer.user = user
- composer.group = group
- view.addSubview(composer)
}
-
- func openChatHistory() {
- let chatHistoryVC = CometChatAIAssistantChatHistory()
- chatHistoryVC.user = user
- chatHistoryVC.group = group
- chatHistoryVC.onNewChatButtonClicked = {
- self.startNewChat()
+
+ private func setupMessageComposer() {
+ messageComposer = CometChatMessageComposer()
+ messageComposer.translatesAutoresizingMaskIntoConstraints = false
+
+ if let user = user {
+ messageComposer.set(user: user)
+ } else if let group = group {
+ messageComposer.set(group: group)
}
- chatHistoryVC.onMessageClicked = { [weak self] message in
- guard let self = self else { return }
- self.parentMessage = message
- self.isHistory = true
- self.navigationController?.pushViewController(
- AIAssistantChatViewController(),
- animated: true
- )
+
+ // If resuming from history, set parent message
+ if let parentMessage = parentMessage {
+ messageComposer.set(parentMessage: parentMessage)
}
- chatHistoryVC.onClose = {
- self.navigationController?.popViewController(animated: true)
+
+ view.addSubview(messageComposer)
+ }
+
+ private func setupConstraints() {
+ NSLayoutConstraint.activate([
+ messageHeader.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+ messageHeader.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+ messageHeader.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+ messageHeader.heightAnchor.constraint(equalToConstant: 60),
+
+ messageList.topAnchor.constraint(equalTo: messageHeader.bottomAnchor),
+ messageList.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+ messageList.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+ messageList.bottomAnchor.constraint(equalTo: messageComposer.topAnchor),
+
+ messageComposer.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+ messageComposer.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+ messageComposer.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
+ ])
+ }
+
+ // MARK: - Chat History
+ private func openChatHistory() {
+ let chatHistoryVC = CometChatAIAssistantChatHistory()
+
+ if let user = user {
+ chatHistoryVC.set(user: user)
+ } else if let group = group {
+ chatHistoryVC.set(group: group)
}
+
+ // Handle new chat button
+ chatHistoryVC.set(onNewChatButtonClicked: { [weak self] in
+ self?.startNewChat()
+ })
+
+ // Handle message selection to resume conversation
+ chatHistoryVC.set(onMessageClicked: { [weak self] message in
+ self?.resumeConversation(from: message)
+ })
+
+ // Handle close
+ chatHistoryVC.set(onClose: { [weak self] in
+ self?.navigationController?.popViewController(animated: true)
+ })
+
navigationController?.pushViewController(chatHistoryVC, animated: true)
}
+
+ private func startNewChat() {
+ let newChatVC: ProductionAIAgentViewController
+
+ if let user = user {
+ newChatVC = ProductionAIAgentViewController(user: user)
+ } else if let group = group {
+ newChatVC = ProductionAIAgentViewController(group: group)
+ } else {
+ return
+ }
+
+ navigationController?.pushViewController(newChatVC, animated: true)
+ }
+
+ private func resumeConversation(from message: BaseMessage) {
+ let resumeVC: ProductionAIAgentViewController
+
+ if let user = user {
+ resumeVC = ProductionAIAgentViewController(user: user, parentMessage: message, isHistory: true)
+ } else if let group = group {
+ resumeVC = ProductionAIAgentViewController(group: group, parentMessage: message, isHistory: true)
+ } else {
+ return
+ }
+
+ navigationController?.pushViewController(resumeVC, animated: true)
+ }
+}
+```
+
+## Launching AI Agent Chat
- func startNewChat() {
- navigationController?.pushViewController(
- AIAssistantChatViewController(),
- animated: true
- )
+Start an AI agent conversation from your app:
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ChatListViewController: UIViewController {
+
+ func openAIAgentChat(agentUID: String) {
+ // Fetch the AI agent user
+ CometChat.getUser(UID: agentUID) { [weak self] user in
+ DispatchQueue.main.async {
+ // Check if user is an AI agent (role contains "agentic")
+ if user.role?.lowercased().contains("agentic") == true {
+ let aiChatVC = ProductionAIAgentViewController(user: user)
+ self?.navigationController?.pushViewController(aiChatVC, animated: true)
+ } else {
+ // Regular user chat
+ let messages = CometChatMessages()
+ messages.set(user: user)
+ self?.navigationController?.pushViewController(messages, animated: true)
+ }
+ }
+ } onError: { error in
+ print("Error fetching user: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ func detectAndOpenChat(for user: User) {
+ // Detect if user is an AI agent
+ let isAIAgent = user.role?.lowercased().contains("agentic") == true
+
+ if isAIAgent {
+ let aiChatVC = ProductionAIAgentViewController(user: user)
+ navigationController?.pushViewController(aiChatVC, animated: true)
+ } else {
+ let messages = CometChatMessages()
+ messages.set(user: user)
+ navigationController?.pushViewController(messages, animated: true)
+ }
}
}
```
-
+## Styling
+
+Customize the AI chat bubble appearance:
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+
+class AIAgentStylingExample {
+
+ func applyGlobalStyles() {
+ // Configure AI bubble style
+ let aiBubbleStyle = AiAssistantBubbleStyle()
+ aiBubbleStyle.backgroundColor = .clear
+ aiBubbleStyle.borderWidth = 1
+ aiBubbleStyle.borderColor = .systemBlue
+ aiBubbleStyle.textColor = .label
+ aiBubbleStyle.textFont = UIFont.systemFont(ofSize: 14)
+ aiBubbleStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 12)
+
+ // Apply globally
+ CometChatAiAssistantBubble.style = aiBubbleStyle
+ }
+
+ func applyInstanceStyles() -> ProductionAIAgentViewController {
+ let aiChatVC = ProductionAIAgentViewController(user: User())
+
+ // Custom message list style
+ let messageListStyle = MessageListStyle()
+ messageListStyle.backgroundColor = UIColor.systemBackground
+
+ // Custom composer style
+ let composerStyle = MessageComposerStyle()
+ composerStyle.backgroundColor = UIColor.secondarySystemBackground
+ composerStyle.borderColor = UIColor.separator
+ composerStyle.borderWidth = 1
+
+ return aiChatVC
+ }
+}
+```
-
+### Style Properties
+| Property | Description |
+|----------|-------------|
+| `backgroundColor` | Bubble background color |
+| `borderWidth` | Bubble border width |
+| `borderColor` | Bubble border color |
+| `textColor` | Message text color |
+| `textFont` | Message text font |
+| `cornerRadius` | Bubble corner radius |
-### Step 2 - Chat History Screen
+## Customization Options
-Create a screen for AI Assistant chat history using `CometChatAIAssistantChatHistory`.
+### Empty State View
-Features Implemented::
-- Browse their previous AI chat sessions.
-- Resume a previous conversation (onMessageClicked).
-- Start a new chat session (onNewChatButtonClicked).
-- Close the chat history view (onClose).
+Customize the view shown when there are no messages:
-### Step 3 - Custom Styles
+```swift
+let emptyView = UIView()
+let label = UILabel()
+label.text = "Start a conversation with AI"
+label.textAlignment = .center
+label.textColor = .secondaryLabel
+emptyView.addSubview(label)
+
+messageList.set(emptyStateView: emptyView)
+```
-Define custom styles for AI chat bubbles and the composer using `CometChatAiAssistantBubbleStyle`.
+### Streaming Speed
+Adjust how fast AI responses stream:
-
-
```swift
-import UIKit
-import CometChatUIKit
-
-let aiBubbleStyle = AiAssistantBubbleStyle()
-aiBubbleStyle.backgroundColor = .clear
-aiBubbleStyle.border = Border(width: 1, color: .systemBlue)
-aiBubbleStyle.textColor = UIColor(named: "TextPrimary")
-aiBubbleStyle.textStyle = UIFont(name: "TimesNewRoman", size: 14)
-CometChatAiAssistantBubble.style = aiBubbleStyle
+// Configure streaming speed (characters per second)
+messageList.set(streamingSpeed: 50)
```
-
-
+### Suggested Messages
----
+Provide quick-start prompts for users:
-## Implementation Flow Summary
+```swift
+let suggestions = [
+ "What can you help me with?",
+ "Tell me about your capabilities",
+ "How do I get started?"
+]
-| Step | Action |
-|:-----|:-------------------------------------------------------------------------------|
-| 1 | User selects AI agent from chat list |
-| 2 | `AIAssistantChatViewController` launches |
-| 3 | Parse User data and detect agent chat (Role must be `@agentic`) |
-| 4 | Initialize UI with AI-specific styling |
-| 5 | Configure chat history and navigation |
-| 6 | Launch chat with AI agent |
+messageComposer.set(suggestedMessages: suggestions)
+```
----
+### AI Assistant Tools
-## Customization Options
+Configure custom tools for the AI agent:
-- **Custom AI Assistant Empty Chat View:** Customize using `emptyStateView`.
-- **Streaming Speed:** Adjust AI response streaming speed with `streamingSpeed`.
-- **AI Assistant Suggested Messages:** Set quick prompts using `suggestedMessages`.
-- **AI Assistant Tools:** Set AI agent tools using `setAiAssistantTools` callback.
+```swift
+messageComposer.set(aiAssistantTools: { message in
+ // Return custom tools based on context
+ return [
+ AITool(name: "search", description: "Search knowledge base"),
+ AITool(name: "calculate", description: "Perform calculations")
+ ]
+})
+```
----
+## Chat History Component
+
+The `CometChatAIAssistantChatHistory` component displays previous AI conversations:
-## Feature Matrix
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ChatHistoryViewController: UIViewController {
+
+ private var user: User?
+
+ convenience init(user: User) {
+ self.init()
+ self.user = user
+ }
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupChatHistory()
+ }
+
+ private func setupChatHistory() {
+ guard let user = user else { return }
+
+ let chatHistory = CometChatAIAssistantChatHistory()
+ chatHistory.set(user: user)
+
+ // New chat button
+ chatHistory.set(onNewChatButtonClicked: { [weak self] in
+ let newChat = ProductionAIAgentViewController(user: user)
+ self?.navigationController?.pushViewController(newChat, animated: true)
+ })
+
+ // Resume conversation
+ chatHistory.set(onMessageClicked: { [weak self] message in
+ let resumeChat = ProductionAIAgentViewController(
+ user: user,
+ parentMessage: message,
+ isHistory: true
+ )
+ self?.navigationController?.pushViewController(resumeChat, animated: true)
+ })
+
+ // Close handler
+ chatHistory.set(onClose: { [weak self] in
+ self?.dismiss(animated: true)
+ })
+
+ addChild(chatHistory)
+ view.addSubview(chatHistory.view)
+ chatHistory.view.frame = view.bounds
+ chatHistory.didMove(toParent: self)
+ }
+}
+```
-| Feature | Implementation | UI Component |
-|:-----------------------|:-------------------------------------------- |:---------------------- |
-| AI Chat | `AIAssistantChatViewController` | Full chat screen |
-| Chat History | `CometChatAIAssistantChatHistory` | Chat history screen |
+## Implementation Flow
+
+| Step | Action |
+|------|--------|
+| 1 | User selects AI agent from chat list |
+| 2 | Detect agent by checking user role for "agentic" |
+| 3 | Launch `ProductionAIAgentViewController` |
+| 4 | Configure header, message list, and composer |
+| 5 | User sends message, AI responds with streaming |
+| 6 | Access chat history via header button |
+
+## Components Reference
+
+| Component | Purpose |
+|-----------|---------|
+| `CometChatMessageHeader` | Navigation and chat history access |
+| `CometChatMessageList` | Display messages with AI responses |
+| `CometChatMessageComposer` | Send messages to AI agent |
+| `CometChatAIAssistantChatHistory` | Browse previous AI conversations |
+| `CometChatAiAssistantBubble` | AI message bubble styling |
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| AI not responding | Verify AI features are enabled in dashboard |
+| Chat history empty | Ensure conversations are saved properly |
+| Streaming not working | Check network connectivity |
+| Styling not applied | Apply styles before presenting components |
+| Agent not detected | Verify user role contains "agentic" |
+
+## Related Guides
+
+- [AI Features](/ui-kit/ios/ai-features) - Overview of AI capabilities
+- [AI Assistant Chat History](/ui-kit/ios/ai-assistant-chat-history) - Chat history component
+- [Message List](/ui-kit/ios/message-list) - Message display component
+- [Message Header](/ui-kit/ios/message-header) - Message header component
+- [Message Composer](/ui-kit/ios/message-composer) - Message composer component
diff --git a/ui-kit/ios/guide-block-unblock-user.mdx b/ui-kit/ios/guide-block-unblock-user.mdx
index 7920f5ed..5827a39f 100644
--- a/ui-kit/ios/guide-block-unblock-user.mdx
+++ b/ui-kit/ios/guide-block-unblock-user.mdx
@@ -1,178 +1,704 @@
---
-title: "Implementing Block/Unblock User in iOS with CometChat UIKit"
+title: "Block/Unblock User"
sidebarTitle: "Block/Unblock User"
+description: "Implement user blocking and profile management in your iOS app"
---
-Build a comprehensive user profile screen in your iOS app using CometChat’s UIKit for iOS, complete with avatar display, messaging, audio/video calls, and block/unblock actions.
-
-## Overview
-
-The `UserDetailsViewController` provides a detailed view of a CometChat user’s profile and key interaction options, including:
-
-- Displaying the user’s avatar, name, and online status.
-- Initiating one-on-one chats.
-- Starting audio or video calls.
-- Blocking or unblocking users.
-- Deleting the conversation with the user.
+Build a user profile screen with avatar display, messaging, audio/video calls, and block/unblock functionality using CometChat UIKit.
## Prerequisites
-- A UIKit-based iOS project.
-- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager.
-- Valid CometChat **App ID**, **Region**, and **Auth Key**.
-- User authenticated with `CometChat.login()` before presenting the details screen.
+Before implementing this feature, ensure you have:
+
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- CometChat UIKit v5+ installed
+- User logged in with `CometChatUIKit.login()`
+- Navigation controller configured
-## Components
+## Overview
-| Component | Role |
-|:----------------------------------|:--------------------------------------------------------------|
-| `CometChatAvatar` | Displays user’s profile picture with customizable styling. |
-| `CometChatMessagesViewController`| Opens the 1-on-1 chat interface when “Message” is tapped. |
-| `CometChatCallButtons` | Initiates audio/video calls (`CometChat.startCall()`). |
-| `CometChatUIKit.blockUser()` | Blocks the selected user and updates UI accordingly. |
-| `CometChatUIKit.unblockUser()` | Unblocks a user if previously blocked. |
+The user details screen provides:
-## Integration Steps
+- **Profile Display** - Avatar, name, and online status
+- **Messaging** - Start one-on-one chats
+- **Calling** - Audio and video call buttons
+- **Block/Unblock** - Manage user relationships
+- **Delete Conversation** - Remove chat history
-### 1. Presenting the User Details Screen
+## Basic Implementation
-Initialize and push `UserDetailsViewController` with the selected user’s data.
+Create a simple user details screen:
```swift
import UIKit
+import CometChatUIKitSwift
import CometChatSDK
-func showUserDetails(for user: User) {
- let detailsVC = UserDetailsViewController(user: user)
- navigationController?.pushViewController(detailsVC, animated: true)
+class UserDetailsViewController: UIViewController {
+
+ private var user: User?
+
+ convenience init(user: User) {
+ self.init()
+ self.user = user
+ }
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ view.backgroundColor = .systemBackground
+ setupUI()
+ }
+
+ private func setupUI() {
+ guard let user = user else { return }
+
+ // Avatar
+ let avatar = CometChatAvatar()
+ avatar.set(user: user)
+ avatar.translatesAutoresizingMaskIntoConstraints = false
+ view.addSubview(avatar)
+
+ // Name label
+ let nameLabel = UILabel()
+ nameLabel.text = user.name
+ nameLabel.font = .systemFont(ofSize: 24, weight: .bold)
+ nameLabel.textAlignment = .center
+ nameLabel.translatesAutoresizingMaskIntoConstraints = false
+ view.addSubview(nameLabel)
+
+ // Status label
+ let statusLabel = UILabel()
+ statusLabel.text = user.status == .online ? "Online" : "Offline"
+ statusLabel.textColor = user.status == .online ? .systemGreen : .secondaryLabel
+ statusLabel.font = .systemFont(ofSize: 14)
+ statusLabel.textAlignment = .center
+ statusLabel.translatesAutoresizingMaskIntoConstraints = false
+ view.addSubview(statusLabel)
+
+ // Message button
+ let messageButton = UIButton(type: .system)
+ messageButton.setTitle("Message", for: .normal)
+ messageButton.setImage(UIImage(systemName: "message.fill"), for: .normal)
+ messageButton.addTarget(self, action: #selector(openChat), for: .touchUpInside)
+ messageButton.translatesAutoresizingMaskIntoConstraints = false
+ view.addSubview(messageButton)
+
+ // Block button
+ let blockButton = UIButton(type: .system)
+ blockButton.setTitle("Block User", for: .normal)
+ blockButton.setTitleColor(.systemRed, for: .normal)
+ blockButton.addTarget(self, action: #selector(blockUser), for: .touchUpInside)
+ blockButton.translatesAutoresizingMaskIntoConstraints = false
+ view.addSubview(blockButton)
+
+ NSLayoutConstraint.activate([
+ avatar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
+ avatar.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+ avatar.widthAnchor.constraint(equalToConstant: 100),
+ avatar.heightAnchor.constraint(equalToConstant: 100),
+
+ nameLabel.topAnchor.constraint(equalTo: avatar.bottomAnchor, constant: 16),
+ nameLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+
+ statusLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 8),
+ statusLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+
+ messageButton.topAnchor.constraint(equalTo: statusLabel.bottomAnchor, constant: 32),
+ messageButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+
+ blockButton.topAnchor.constraint(equalTo: messageButton.bottomAnchor, constant: 24),
+ blockButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
+ ])
+ }
+
+ @objc private func openChat() {
+ guard let user = user else { return }
+ let messages = CometChatMessages()
+ messages.set(user: user)
+ navigationController?.pushViewController(messages, animated: true)
+ }
+
+ @objc private func blockUser() {
+ guard let user = user else { return }
+ CometChat.blockUsers([user.uid ?? ""]) { [weak self] _ in
+ DispatchQueue.main.async {
+ self?.showAlert(title: "Blocked", message: "\(user.name ?? "User") has been blocked")
+ }
+ } onError: { error in
+ print("Block error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ private func showAlert(title: String, message: String) {
+ let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
+ alert.addAction(UIAlertAction(title: "OK", style: .default))
+ present(alert, animated: true)
+ }
}
```
-**File reference:**
-[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/UserDetailsViewController.swift)
+## Production Implementation
-Ensures the details screen loads with the correct user context.
+Complete user details screen with all features and event handling:
-### 2. Configuring the UI
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+#if canImport(CometChatCallsSDK)
+import CometChatCallsSDK
+#endif
-Arrange avatar, labels, and action buttons on the view.
+class ProductionUserDetailsViewController: UIViewController {
+
+ // MARK: - Properties
+ private var user: User?
+ private var isBlocked: Bool = false
+ private let listenerID = "user-details-listener"
+
+ // MARK: - UI Components
+ private let scrollView = UIScrollView()
+ private let contentView = UIView()
+ private let avatar = CometChatAvatar()
+ private let nameLabel = UILabel()
+ private let statusLabel = UILabel()
+ private let buttonStackView = UIStackView()
+ private let messageButton = UIButton(type: .system)
+ private let audioCallButton = UIButton(type: .system)
+ private let videoCallButton = UIButton(type: .system)
+ private let blockButton = UIButton(type: .system)
+ private let deleteButton = UIButton(type: .system)
+
+ // MARK: - Initialization
+ convenience init(user: User) {
+ self.init()
+ self.user = user
+ }
+
+ // MARK: - Lifecycle
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ view.backgroundColor = .systemBackground
+ setupUI()
+ configureWithUser()
+ checkBlockStatus()
+ addEventListeners()
+ }
+
+ override func viewWillAppear(_ animated: Bool) {
+ super.viewWillAppear(animated)
+ setupNavigationBar()
+ }
+
+ deinit {
+ removeEventListeners()
+ }
-```swift
-override public func viewWillAppear(_ animated: Bool) {
- super.viewWillAppear(animated)
- setupLayout()
- setupNavigationBar()
- if let user = user {
- updateUserStatus(user: user)
+ // MARK: - Setup
+ private func setupNavigationBar() {
+ title = "User Details"
+ navigationController?.navigationBar.prefersLargeTitles = false
+ }
+
+ private func setupUI() {
+ // Scroll View
+ scrollView.translatesAutoresizingMaskIntoConstraints = false
+ view.addSubview(scrollView)
+
+ contentView.translatesAutoresizingMaskIntoConstraints = false
+ scrollView.addSubview(contentView)
+
+ // Avatar
+ avatar.translatesAutoresizingMaskIntoConstraints = false
+ contentView.addSubview(avatar)
+
+ // Name Label
+ nameLabel.font = .systemFont(ofSize: 24, weight: .bold)
+ nameLabel.textAlignment = .center
+ nameLabel.translatesAutoresizingMaskIntoConstraints = false
+ contentView.addSubview(nameLabel)
+
+ // Status Label
+ statusLabel.font = .systemFont(ofSize: 14)
+ statusLabel.textAlignment = .center
+ statusLabel.translatesAutoresizingMaskIntoConstraints = false
+ contentView.addSubview(statusLabel)
+
+ // Button Stack
+ buttonStackView.axis = .horizontal
+ buttonStackView.spacing = 24
+ buttonStackView.distribution = .equalSpacing
+ buttonStackView.translatesAutoresizingMaskIntoConstraints = false
+ contentView.addSubview(buttonStackView)
+
+ // Message Button
+ configureButton(messageButton, title: "Message", icon: "message.fill", action: #selector(openChat))
+ buttonStackView.addArrangedSubview(messageButton)
+
+ // Call Buttons (conditional)
+ #if canImport(CometChatCallsSDK)
+ configureButton(audioCallButton, title: "Audio", icon: "phone.fill", action: #selector(startAudioCall))
+ configureButton(videoCallButton, title: "Video", icon: "video.fill", action: #selector(startVideoCall))
+ buttonStackView.addArrangedSubview(audioCallButton)
+ buttonStackView.addArrangedSubview(videoCallButton)
+ #endif
+
+ // Block Button
+ blockButton.setTitle("Block User", for: .normal)
+ blockButton.setTitleColor(.systemRed, for: .normal)
+ blockButton.titleLabel?.font = .systemFont(ofSize: 16, weight: .medium)
+ blockButton.addTarget(self, action: #selector(toggleBlock), for: .touchUpInside)
+ blockButton.translatesAutoresizingMaskIntoConstraints = false
+ contentView.addSubview(blockButton)
+
+ // Delete Button
+ deleteButton.setTitle("Delete Conversation", for: .normal)
+ deleteButton.setTitleColor(.systemRed, for: .normal)
+ deleteButton.titleLabel?.font = .systemFont(ofSize: 16, weight: .medium)
+ deleteButton.addTarget(self, action: #selector(deleteConversation), for: .touchUpInside)
+ deleteButton.translatesAutoresizingMaskIntoConstraints = false
+ contentView.addSubview(deleteButton)
+
+ setupConstraints()
+ }
+
+ private func configureButton(_ button: UIButton, title: String, icon: String, action: Selector) {
+ button.setTitle(title, for: .normal)
+ button.setImage(UIImage(systemName: icon), for: .normal)
+ button.titleLabel?.font = .systemFont(ofSize: 12)
+ button.tintColor = .systemBlue
+ button.configuration = .plain()
+ button.configuration?.imagePlacement = .top
+ button.configuration?.imagePadding = 8
+ button.addTarget(self, action: action, for: .touchUpInside)
+ }
+
+ private func setupConstraints() {
+ NSLayoutConstraint.activate([
+ scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+ scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+ scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+ scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+
+ contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
+ contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
+ contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
+ contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
+ contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
+
+ avatar.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 40),
+ avatar.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
+ avatar.widthAnchor.constraint(equalToConstant: 100),
+ avatar.heightAnchor.constraint(equalToConstant: 100),
+
+ nameLabel.topAnchor.constraint(equalTo: avatar.bottomAnchor, constant: 16),
+ nameLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
+ nameLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20),
+
+ statusLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 8),
+ statusLabel.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
+
+ buttonStackView.topAnchor.constraint(equalTo: statusLabel.bottomAnchor, constant: 32),
+ buttonStackView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
+
+ blockButton.topAnchor.constraint(equalTo: buttonStackView.bottomAnchor, constant: 48),
+ blockButton.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
+
+ deleteButton.topAnchor.constraint(equalTo: blockButton.bottomAnchor, constant: 16),
+ deleteButton.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
+ deleteButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -40)
+ ])
+ }
+
+ // MARK: - Configuration
+ private func configureWithUser() {
+ guard let user = user else { return }
+
+ avatar.set(user: user)
+ nameLabel.text = user.name
+ updateStatusLabel(user: user)
+ }
+
+ private func updateStatusLabel(user: User) {
+ if isBlocked {
+ statusLabel.text = "Blocked"
+ statusLabel.textColor = .systemRed
+ } else {
+ statusLabel.text = user.status == .online ? "Online" : "Offline"
+ statusLabel.textColor = user.status == .online ? .systemGreen : .secondaryLabel
+ }
+ }
+
+ private func checkBlockStatus() {
+ guard let uid = user?.uid else { return }
+
+ let request = BlockedUserRequest.BlockedUserRequestBuilder()
+ .set(limit: 100)
+ .build()
+
+ request.fetchNext { [weak self] blockedUsers in
+ let isBlocked = blockedUsers?.contains { $0.uid == uid } ?? false
+ DispatchQueue.main.async {
+ self?.isBlocked = isBlocked
+ self?.updateBlockButton()
+ self?.updateStatusLabel(user: self?.user ?? User())
+ }
+ } onError: { error in
+ print("Error checking block status: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ private func updateBlockButton() {
+ let title = isBlocked ? "Unblock User" : "Block User"
+ blockButton.setTitle(title, for: .normal)
+ }
+
+ // MARK: - Actions
+ @objc private func openChat() {
+ guard let user = user else { return }
+
+ if isBlocked {
+ showAlert(title: "User Blocked", message: "Unblock this user to send messages")
+ return
+ }
+
+ let messages = CometChatMessages()
+ messages.set(user: user)
+ navigationController?.pushViewController(messages, animated: true)
+ }
+
+ #if canImport(CometChatCallsSDK)
+ @objc private func startAudioCall() {
+ guard let user = user else { return }
+
+ if isBlocked {
+ showAlert(title: "User Blocked", message: "Unblock this user to make calls")
+ return
+ }
+
+ let call = Call(receiverId: user.uid ?? "", callType: .audio, receiverType: .user)
+ CometChat.initiateCall(call: call) { call in
+ print("Audio call initiated: \(call?.sessionID ?? "")")
+ } onError: { [weak self] error in
+ self?.showAlert(title: "Call Failed", message: error?.errorDescription ?? "Unable to start call")
+ }
+ }
+
+ @objc private func startVideoCall() {
+ guard let user = user else { return }
+
+ if isBlocked {
+ showAlert(title: "User Blocked", message: "Unblock this user to make calls")
+ return
+ }
+
+ let call = Call(receiverId: user.uid ?? "", callType: .video, receiverType: .user)
+ CometChat.initiateCall(call: call) { call in
+ print("Video call initiated: \(call?.sessionID ?? "")")
+ } onError: { [weak self] error in
+ self?.showAlert(title: "Call Failed", message: error?.errorDescription ?? "Unable to start call")
+ }
+ }
+ #endif
+
+ @objc private func toggleBlock() {
+ if isBlocked {
+ unblockUser()
+ } else {
+ showBlockConfirmation()
+ }
+ }
+
+ private func showBlockConfirmation() {
+ let alert = UIAlertController(
+ title: "Block User",
+ message: "Are you sure you want to block \(user?.name ?? "this user")? They won't be able to send you messages or call you.",
+ preferredStyle: .alert
+ )
+
+ alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+ alert.addAction(UIAlertAction(title: "Block", style: .destructive) { [weak self] _ in
+ self?.blockUser()
+ })
+
+ present(alert, animated: true)
+ }
+
+ private func blockUser() {
+ guard let uid = user?.uid else { return }
+
+ CometChat.blockUsers([uid]) { [weak self] blockedUsers in
+ DispatchQueue.main.async {
+ self?.isBlocked = true
+ self?.updateBlockButton()
+ self?.updateStatusLabel(user: self?.user ?? User())
+
+ // Emit event for other components
+ if let user = self?.user {
+ CometChatUserEvents.emitOnUserBlock(user: user)
+ }
+ }
+ } onError: { [weak self] error in
+ self?.showAlert(title: "Error", message: error?.errorDescription ?? "Failed to block user")
+ }
+ }
+
+ private func unblockUser() {
+ guard let uid = user?.uid else { return }
+
+ CometChat.unblockUsers([uid]) { [weak self] unblockedUsers in
+ DispatchQueue.main.async {
+ self?.isBlocked = false
+ self?.updateBlockButton()
+ self?.updateStatusLabel(user: self?.user ?? User())
+
+ // Emit event for other components
+ if let user = self?.user {
+ CometChatUserEvents.emitOnUserUnblock(user: user)
+ }
+ }
+ } onError: { [weak self] error in
+ self?.showAlert(title: "Error", message: error?.errorDescription ?? "Failed to unblock user")
+ }
+ }
+
+ @objc private func deleteConversation() {
+ let alert = UIAlertController(
+ title: "Delete Conversation",
+ message: "Are you sure you want to delete this conversation? This action cannot be undone.",
+ preferredStyle: .alert
+ )
+
+ alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+ alert.addAction(UIAlertAction(title: "Delete", style: .destructive) { [weak self] _ in
+ self?.performDeleteConversation()
+ })
+
+ present(alert, animated: true)
+ }
+
+ private func performDeleteConversation() {
+ guard let uid = user?.uid else { return }
+
+ CometChat.deleteConversation(conversationWith: uid, conversationType: .user) { [weak self] _ in
+ DispatchQueue.main.async {
+ self?.showAlert(title: "Deleted", message: "Conversation has been deleted")
+ }
+ } onError: { [weak self] error in
+ self?.showAlert(title: "Error", message: error?.errorDescription ?? "Failed to delete conversation")
+ }
+ }
+
+ private func showAlert(title: String, message: String) {
+ let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
+ alert.addAction(UIAlertAction(title: "OK", style: .default))
+ present(alert, animated: true)
+ }
+
+ // MARK: - Event Listeners
+ private func addEventListeners() {
+ CometChat.addUserListener(listenerID, self)
+ CometChatUserEvents.addListener(listenerID, self)
+ }
+
+ private func removeEventListeners() {
+ CometChat.removeUserListener(listenerID)
+ CometChatUserEvents.removeListener(listenerID)
}
}
-```
-**File reference:**
-[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/UserDetailsViewController.swift)
+// MARK: - CometChatUserDelegate
+extension ProductionUserDetailsViewController: CometChatUserDelegate {
+
+ func onUserOnline(user: User) {
+ guard user.uid == self.user?.uid else { return }
+ DispatchQueue.main.async {
+ self.user = user
+ self.updateStatusLabel(user: user)
+ }
+ }
+
+ func onUserOffline(user: User) {
+ guard user.uid == self.user?.uid else { return }
+ DispatchQueue.main.async {
+ self.user = user
+ self.updateStatusLabel(user: user)
+ }
+ }
+}
-Applies theme-based styling and updates status label on appearance.
+// MARK: - CometChatUserEventListener
+extension ProductionUserDetailsViewController: CometChatUserEventListener {
+
+ func ccUserBlocked(user: User) {
+ guard user.uid == self.user?.uid else { return }
+ DispatchQueue.main.async {
+ self.isBlocked = true
+ self.updateBlockButton()
+ self.updateStatusLabel(user: user)
+ }
+ }
+
+ func ccUserUnblocked(user: User) {
+ guard user.uid == self.user?.uid else { return }
+ DispatchQueue.main.async {
+ self.isBlocked = false
+ self.updateBlockButton()
+ self.updateStatusLabel(user: user)
+ }
+ }
+}
+```
-### 3. Enabling Call Buttons
+## Launching User Details
-Add audio and video call buttons if calls SDK is available.
+Open the user details screen from your app:
```swift
-#if canImport(CometChatCallsSDK)
-buttonContainerStackView.addArrangedSubview(audioCallButton)
-buttonContainerStackView.addArrangedSubview(videoCallButton)
-#endif
-```
-
-**File reference:**
-[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/UserDetailsViewController.swift)
+import UIKit
+import CometChatSDK
-Conditionally shows call options based on SDK availability.
+class UsersListViewController: UIViewController {
+
+ func showUserDetails(for user: User) {
+ let detailsVC = ProductionUserDetailsViewController(user: user)
+ navigationController?.pushViewController(detailsVC, animated: true)
+ }
+
+ // From a users list
+ func openFromUsersList() {
+ let users = CometChatUsers()
+ users.set(onItemClick: { [weak self] user, _ in
+ self?.showUserDetails(for: user)
+ })
+ navigationController?.pushViewController(users, animated: true)
+ }
+
+ // From a conversation
+ func openFromConversation(_ conversation: Conversation) {
+ if let user = conversation.conversationWith as? User {
+ showUserDetails(for: user)
+ }
+ }
+}
+```
-### 4. Block/Unblock and Delete Actions
+## Block/Unblock API Reference
-Provide block/unblock and delete conversation functionality.
+### Block Users
```swift
-@objc func showBlockAlert() {
- // Toggle block/unblock logic with CometChat.blockUsers / unblockUsers
+// Block single user
+CometChat.blockUsers(["user-uid"]) { blockedUsers in
+ print("Blocked \(blockedUsers?.count ?? 0) users")
+} onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
}
-@objc func showDeleteAlert() {
- // Confirm and call CometChat.deleteConversation()
+// Block multiple users
+CometChat.blockUsers(["user1", "user2", "user3"]) { blockedUsers in
+ print("Blocked users: \(blockedUsers?.map { $0.uid ?? "" } ?? [])")
+} onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
}
```
-**File reference:**
-[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/UserDetailsViewController.swift)
-
-Manages user relationships and conversation lifecycle.
-
-### 5. Listening for User Events
-
-Update UI in response to status, block, and unblock events.
+### Unblock Users
```swift
-func connect() {
- CometChat.addUserListener(listenerID, self)
- CometChatUserEvents.addListener(listenerID, self)
+// Unblock single user
+CometChat.unblockUsers(["user-uid"]) { unblockedUsers in
+ print("Unblocked \(unblockedUsers?.count ?? 0) users")
+} onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
}
-func disconnect() {
- CometChat.removeUserListener(listenerID)
- CometChatUserEvents.removeListener(listenerID)
+// Unblock multiple users
+CometChat.unblockUsers(["user1", "user2"]) { unblockedUsers in
+ print("Unblocked users: \(unblockedUsers?.map { $0.uid ?? "" } ?? [])")
+} onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
}
+```
+
+### Fetch Blocked Users
-extension UserDetailsViewController: CometChatUserEventListener, CometChatUserDelegate {
- func onUserOnline(user: User) { updateUserStatus(user: user) }
- func onUserOffline(user: User) { updateUserStatus(user: user) }
- func ccUserBlocked(user: User) { statusLabel.isHidden = true }
- func ccUserUnblocked(user: User) { statusLabel.isHidden = false; updateUserStatus(user: user) }
+```swift
+let request = BlockedUserRequest.BlockedUserRequestBuilder()
+ .set(limit: 50)
+ .set(direction: .blockedByMe) // or .hasBlockedMe, .both
+ .build()
+
+request.fetchNext { blockedUsers in
+ for user in blockedUsers ?? [] {
+ print("Blocked: \(user.name ?? "")")
+ }
+} onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
}
```
-**File reference:**
-[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/UserDetailsViewController.swift)
+## Styling
-Keeps profile status and block state in sync with real-time events.
+Customize the avatar appearance:
-## Customization Options
+```swift
+let avatarStyle = AvatarStyle()
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 50)
+avatarStyle.borderWidth = 2
+avatarStyle.borderColor = .systemBlue
+avatarStyle.backgroundColor = .systemGray5
+
+avatar.set(style: avatarStyle)
+```
-- **Avatar Styling:** Use `CometChatAvatarStyle` to adjust shape and border.
-- **Button Assets:** Replace default icons with custom images.
-- **Localization:** Override button titles and alerts with localized strings.
-- **Theming:** Leverage `CometChatTheme` and `CometChatTypography` for fonts and colors.
+## Components Reference
-## Filtering & Edge Cases
+| Component | Purpose |
+|-----------|---------|
+| `CometChatAvatar` | Display user profile picture |
+| `CometChatMessages` | Open chat interface |
+| `CometChat.blockUsers()` | Block users |
+| `CometChat.unblockUsers()` | Unblock users |
+| `CometChat.deleteConversation()` | Delete chat history |
+| `CometChat.initiateCall()` | Start audio/video calls |
-- Hide block/unblock controls for the logged-in user.
-- Disable call buttons if calling is disabled in settings.
-- Handle missing or partially loaded user data with fallback UI.
+## Edge Cases
+
+- **Self-blocking**: Hide block controls when viewing your own profile
+- **Already blocked**: Check block status before showing chat/call options
+- **Call SDK unavailable**: Conditionally show call buttons with `#if canImport(CometChatCallsSDK)`
+- **Missing user data**: Show placeholder UI for incomplete profiles
## Error Handling
-- **Fetch Failures:** Show error label or dismiss the view.
-- **Block/Unblock Errors:** Present retry alert on API failure.
-- **Call Failures:** Alert user on call initiation error or permission denial.
-
-## Feature Matrix
-
-| Feature | Component / Method |
-|:-------------------------|:---------------------------------------------|
-| Display user details | `CometChatAvatar`, `UILabel` |
-| Open chat | `CometChatMessagesViewController(user:)` |
-| Audio/video call | `CometChat.startCall()` via Call Buttons |
-| Block user | `CometChatUIKit.blockUser(uid:)` |
-| Unblock user | `CometChatUIKit.unblockUser(uid:)` |
-| Delete conversation | `CometChat.deleteConversation()` |
-
-
-
- Try the complete sample app for User Details:
- [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)
+| Error | Solution |
+|-------|----------|
+| Block failed | Show retry option, check network |
+| Unblock failed | Verify user was previously blocked |
+| Call initiation failed | Check permissions and call SDK setup |
+| Delete conversation failed | Verify conversation exists |
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| Status not updating | Verify event listeners are added |
+| Block state incorrect | Fetch blocked users list on load |
+| Call buttons missing | Import CometChatCallsSDK |
+| Avatar not loading | Check user has valid avatar URL |
+
+## Related Components
+
+- [Users](/ui-kit/ios/users) - Display user list
+- [Conversations](/ui-kit/ios/conversations) - Display conversation list
+- [Message List](/ui-kit/ios/message-list) - Message display component
+
+
+
+ Complete implementation example
-
- Explore CometChat UIKit iOS repository:
- [GitHub → UIKit v5](https://github.com/cometchat/cometchat-uikit-ios/tree/v5)
+
+ CometChat UIKit iOS repository
-
\ No newline at end of file
+
diff --git a/ui-kit/ios/guide-call-log-details.mdx b/ui-kit/ios/guide-call-log-details.mdx
index 89cd141c..77bf8c52 100644
--- a/ui-kit/ios/guide-call-log-details.mdx
+++ b/ui-kit/ios/guide-call-log-details.mdx
@@ -1,145 +1,241 @@
---
-title: "CometChat UIKit iOS — Call Log Details"
+title: "Call Log Details"
sidebarTitle: "Call Log Details"
+description: "Display call history, participants, and recordings in your iOS app"
---
-Learn how to integrate and customize CometChat’s call log components to display call history, participant details, and call recordings in your iOS UIKit chat app.
+Learn how to integrate and customize CometChat's call log components to display call history, participant details, and call recordings in your iOS app.
## Overview
-The `CallLogDetailsVC` module provides a tabbed interface to view details of past calls:
+The `CallLogDetailsVC` module provides a tabbed interface for viewing details of past calls:
-- **History:** Chronological join/leave events.
-- **Participants:** Users who joined the call.
-- **Recordings:** Links to cloud-hosted call recordings.
+- **History** — Chronological join/leave events with timestamps
+- **Participants** — Users who joined the call
+- **Recordings** — Links to cloud-hosted call recordings
-This ensures transparency and auditability for both users and admins.
+This ensures transparency and auditability for both users and administrators.
## Prerequisites
-- A UIKit-based iOS project.
-- **CometChatSDK**, **CometChatCallsSDK**, and **CometChatUIKitSwift** integrated.
-- Active internet connection.
-- A valid, logged-in CometChat user.
+Before implementing call log details, ensure you have:
+
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- CometChat UIKit v5+ installed
+- CometChatCallsSDK integrated
+- User logged in with `CometChatUIKit.login()`
+- Active internet connection
## Components
-| Component | Role |
-|-----------------------------|----------------------------------------------------------------------------------------|
-| `CallLogDetailsVC` | Main container with segmented control and page view. |
-| `CallLogParticipantsVC` | Displays a list of users who participated in the call. |
-| `CallLogHistoryVC` | Shows join/leave history entries with timestamps and statuses. |
-| `CallLogRecordingsVC` | Lists call recordings with playback actions. |
-| `CallLogDetailsHeaderView` | Header view showing call metadata (title, status, duration). |
-| `CallLogUserCell` | UITableViewCell for participants, history, and recordings entries. |
-| `CallLogDetailsModel` | Data model formatting participants, history, and recordings data. |
-| `CallLogViewModel` | Fetches and distributes call log data to the UI components. |
+| Component | Description |
+|-----------|-------------|
+| `CallLogDetailsVC` | Main container with segmented control and page view |
+| `CallLogParticipantsVC` | Displays a list of users who participated in the call |
+| `CallLogHistoryVC` | Shows join/leave history entries with timestamps and statuses |
+| `CallLogRecordingsVC` | Lists call recordings with playback actions |
+| `CallLogDetailsHeaderView` | Header view showing call metadata (title, status, duration) |
+| `CallLogUserCell` | UITableViewCell for participants, history, and recordings entries |
+| `CallLogDetailsModel` | Data model formatting participants, history, and recordings data |
+| `CallLogViewModel` | Fetches and distributes call log data to the UI components |
## Integration Steps
-### 1. Present Call Log Details Screen
+### Step 1: Present Call Log Details Screen
-Show the call log interface for a selected call.
+Show the call log interface for a selected call:
```swift
-let detailsVC = CallLogDetailsVC(call: call)
-navigationController?.pushViewController(detailsVC, animated: true)
+import UIKit
+import CometChatSDK
+import CometChatCallsSDK
+
+class CallLogsViewController: UIViewController {
+
+ func showCallDetails(for call: CallLog) {
+ // Initialize the call log details view controller
+ let detailsVC = CallLogDetailsVC(call: call)
+
+ // Push onto navigation stack
+ navigationController?.pushViewController(detailsVC, animated: true)
+ }
+}
```
-**File reference:**
-[`CallLogDetailsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/CallLogDetailsVC.swift)
+This bundles history, participants, and recordings into a single UI flow.
-Bundles history, participants, and recordings into a single UI flow.
+**File reference:** [`CallLogDetailsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/CallLogDetailsVC.swift)
-### 2. Display Participants List
+### Step 2: Display Participants List
-Populate the participants tab with the call’s members.
+Populate the participants tab with the call's members:
```swift
-participantsTableView.reloadData()
+import UIKit
+import CometChatSDK
+
+class CallLogParticipantsVC: UIViewController {
+
+ var participants: [Participant] = []
+ @IBOutlet weak var participantsTableView: UITableView!
+
+ func loadParticipants() {
+ // Fetch participants from call log data
+ // ...
+
+ // Reload table view to display participants
+ participantsTableView.reloadData()
+ }
+}
```
-**File reference:**
-[`CallLogParticipantsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Participants/CallLogParticipantsVC.swift)
+This provides an audit trail of who was present in the call.
-Audits who was present in the call.
+**File reference:** [`CallLogParticipantsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Participants/CallLogParticipantsVC.swift)
-### 3. Show Call History
+### Step 3: Show Call History
-Render join/leave activities in chronological order.
+Render join/leave activities in chronological order:
```swift
-history.append(CallHistoryEntry(...))
-tableView.reloadData()
+import UIKit
+
+class CallLogHistoryVC: UIViewController {
+
+ var history: [CallHistoryEntry] = []
+ @IBOutlet weak var tableView: UITableView!
+
+ func addHistoryEntry(user: String, action: String, timestamp: Date) {
+ // Create and append new history entry
+ let entry = CallHistoryEntry(user: user, action: action, timestamp: timestamp)
+ history.append(entry)
+
+ // Refresh the table view
+ tableView.reloadData()
+ }
+}
```
-**File references:**
-- [`CallHistoyTVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20History%20/CallHistoyTVC.swift)
-- [`CallLogHistoryVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20History%20/CallLogHistoryVC.swift)
+This tracks user join/leave times for transparency.
-Tracks user join/leave times for transparency.
+**File references:**
+- [`CallHistoyTVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20History%20/CallHistoyTVC.swift)
+- [`CallLogHistoryVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20History%20/CallLogHistoryVC.swift)
-### 4. List and Play Recordings
+### Step 4: List and Play Recordings
-Provide playback links for any recorded calls.
+Provide playback links for any recorded calls:
```swift
-UIApplication.shared.open(url)
+import UIKit
+
+class CallLogRecordingsVC: UIViewController {
+
+ func playRecording(url: URL) {
+ // Open recording URL in default browser/player
+ UIApplication.shared.open(url)
+ }
+}
```
-**File references:**
-- [`CallLogRecordingsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Recording%20/CallLogRecordingsVC.swift)
-- [`CallRecordingTVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Recording%20/CallRecordingTVC.swift)
+This enables administrators and users to review call content (if recording is enabled).
-Enables admins and users to review call content (if recording enabled).
+**File references:**
+- [`CallLogRecordingsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Recording%20/CallLogRecordingsVC.swift)
+- [`CallRecordingTVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Recording%20/CallRecordingTVC.swift)
## Customization Options
-- **Styling:** Customize colors, fonts, and spacing via `CometChatTheme`, `CometChatTypography`, and `CometChatSpacing` in `CallLogUserCell` and `CallLogDetailsHeaderView`.
-- **Filters:** Use `CallLogViewModel` to filter by call type (incoming, outgoing, missed).
-- **Empty States:** Implement an `EmptyStateView` in `CallLogHistoryVC` for no-history scenarios.
+### Styling
-## Filtering & Edge Cases
+Customize colors, fonts, and spacing using CometChat's theming system:
-- **No Call Logs:** Show a custom empty state instead of a blank table.
-- **Pagination:** Add lazy loading in `scrollViewDidScroll` of `CallLogHistoryVC` to fetch more entries.
-- **Blocked Users:** In `CallLogParticipantsVC`, disable profile navigation if the user is blocked.
+```swift
+import CometChatUIKitSwift
-## Error Handling
+// Apply custom theme to call log components
+let theme = CometChatTheme()
+theme.palette.primary = UIColor.systemBlue
-- **Network/API Errors:** Display `UIAlertController` on fetch failures; expose error via `CallLogViewModel` delegate.
-- **Retry Mechanism:** Add pull-to-refresh or a retry button in `CallLogDetailsVC`.
-- **Recording Unavailable:** Gracefully disable playback links if URL is missing.
+// Apply typography
+let typography = CometChatTypography()
+typography.heading = UIFont.systemFont(ofSize: 18, weight: .bold)
-## Optional Notes
+// Apply spacing
+let spacing = CometChatSpacing()
+spacing.padding = 16
+```
-- **Group Calls vs 1:1 Calls:** Customize `CallLogParticipantsVC` display based on call type and participant roles.
-- **Metadata Display:** Use `CallLogDetailsHeaderView` to show titles, call duration, and status icons.
+### Filters
-## Feature Matrix
+Use `CallLogViewModel` to filter by call type:
+
+```swift
+// Filter by call type
+viewModel.filterByType(.incoming) // Show only incoming calls
+viewModel.filterByType(.outgoing) // Show only outgoing calls
+viewModel.filterByType(.missed) // Show only missed calls
+```
+
+### Empty States
+
+Implement an `EmptyStateView` in `CallLogHistoryVC` for no-history scenarios:
+
+```swift
+func showEmptyState() {
+ let emptyView = UILabel()
+ emptyView.text = "No call history available"
+ emptyView.textAlignment = .center
+ emptyView.textColor = .secondaryLabel
+ tableView.backgroundView = emptyView
+}
+```
-| Feature | Component / Method | File(s) |
-|:-----------------------------|:----------------------------------|:--------------------------------------------------------------------------------------------------|
-| Show call log details screen | `CallLogDetailsVC(call:)` | `CallLogDetailsVC.swift` |
-| Display participants | `CallLogParticipantsVC` | `CallLogParticipantsVC.swift` |
-| Display history entries | `CallLogHistoryVC` | `CallHistoyTVC.swift`, `CallLogHistoryVC.swift` |
-| List recordings | `CallLogRecordingsVC` | `CallLogRecordingsVC.swift`, `CallRecordingTVC.swift` |
-| Header metadata | `CallLogDetailsHeaderView` | `CallLogDetailsHeaderView.swift` |
-| Data handling | `CallLogDetailsModel` | `CallLogDetailsModel.swift` |
-| Data fetching & distribution | `CallLogViewModel` | `CallLogViewModel.swift` |
+## Edge Cases
-
+| Scenario | Handling |
+|----------|----------|
+| No call logs | Show a custom empty state instead of a blank table |
+| Large history | Add lazy loading in `scrollViewDidScroll` to fetch more entries |
+| Blocked users | Disable profile navigation in `CallLogParticipantsVC` if the user is blocked |
+| Missing recording URL | Gracefully disable playback links |
-
-Explore a full sample implementation:
-[GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)
+## Error Handling
-
+| Error Type | Solution |
+|------------|----------|
+| Network/API errors | Display `UIAlertController` on fetch failures; expose error via `CallLogViewModel` delegate |
+| Retry mechanism | Add pull-to-refresh or a retry button in `CallLogDetailsVC` |
+| Recording unavailable | Gracefully disable playback links if URL is missing |
-
-Review the call log components in the UIKit library:
-[GitHub → Call Log Components](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details)
+## Additional Notes
-
+- **Group Calls vs 1:1 Calls** — Customize `CallLogParticipantsVC` display based on call type and participant roles
+- **Metadata Display** — Use `CallLogDetailsHeaderView` to show titles, call duration, and status icons
+
+## Feature Matrix
-
\ No newline at end of file
+| Feature | Component / Method | File(s) |
+|---------|-------------------|---------|
+| Show call log details screen | `CallLogDetailsVC(call:)` | `CallLogDetailsVC.swift` |
+| Display participants | `CallLogParticipantsVC` | `CallLogParticipantsVC.swift` |
+| Display history entries | `CallLogHistoryVC` | `CallHistoyTVC.swift`, `CallLogHistoryVC.swift` |
+| List recordings | `CallLogRecordingsVC` | `CallLogRecordingsVC.swift`, `CallRecordingTVC.swift` |
+| Header metadata | `CallLogDetailsHeaderView` | `CallLogDetailsHeaderView.swift` |
+| Data handling | `CallLogDetailsModel` | `CallLogDetailsModel.swift` |
+| Data fetching & distribution | `CallLogViewModel` | `CallLogViewModel.swift` |
+
+## Related Components
+
+- [Call Logs](/ui-kit/ios/call-logs) - Display call log list
+- [Call Features](/ui-kit/ios/call-features) - Overview of calling capabilities
+- [Ongoing Call](/ui-kit/ios/ongoing-call) - Active call interface
+
+
+
+ Explore a full sample implementation
+
+
+ Review the call log components in the UIKit library
+
+
diff --git a/ui-kit/ios/guide-group-chat.mdx b/ui-kit/ios/guide-group-chat.mdx
index dd71cfe6..4d26f85a 100644
--- a/ui-kit/ios/guide-group-chat.mdx
+++ b/ui-kit/ios/guide-group-chat.mdx
@@ -1,6 +1,7 @@
---
title: "Group Details"
sidebarTitle: "Group Details"
+description: "Display and manage group information in your iOS app"
---
Provide a detailed view for CometChat groups in your iOS app, enabling users to see group info, join/leave, manage members, and respond to real-time group events.
@@ -9,113 +10,230 @@ Provide a detailed view for CometChat groups in your iOS app, enabling users to
`GroupDetailsViewController` displays comprehensive group information and actions:
-- **Group Info:** Name, icon, description, and member count.
-- **Actions:** Join/Leave/Delete group.
-- **Member Management:** View members, add members, view banned members.
-- **Real-Time Updates:** Reflects joins, leaves, bans, and ownership changes.
+- **Group Info** — Name, icon, description, and member count
+- **Actions** — Join, leave, or delete group
+- **Member Management** — View members, add members, view banned members
+- **Real-Time Updates** — Reflects joins, leaves, bans, and ownership changes
## Prerequisites
-- A UIKit-based iOS project.
-- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager.
-- Valid CometChat **App ID**, **Region**, and **Auth Key**.
-- User logged in with `CometChat.login()`.
-- Navigation stack (`UINavigationController`) configured.
+Before implementing group details, ensure you have:
+
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- CometChat UIKit v5+ installed via CocoaPods or Swift Package Manager
+- Valid CometChat App ID, Region, and Auth Key
+- User logged in with `CometChatUIKit.login()`
+- Navigation controller (`UINavigationController`) configured
## Components
-| Component | Role |
-|:------------------------------|:----------------------------------------------------------------|
-| `CometChatGroup` | Renders group avatar, name, and metadata. |
-| `GroupActionView` | Custom view for action buttons (view/add/banned members). |
-| `CometChatMessagesViewController` | Opens group chat interface when “Chat” is tapped. |
-| `CometChat.joinGroup()` | Joins public or password-protected groups. |
-| `CometChat.leaveGroup()` | Leaves the current group. |
-| `CometChat.deleteGroup()` | Deletes and exits the group (owners only). |
-| `CometChatGroupMembers` | Lists current group members. |
-| `CometChatGroupDelegate` | Receives real-time group events. |
+| Component | Description |
+|-----------|-------------|
+| `CometChatGroup` | Renders group avatar, name, and metadata |
+| `GroupActionView` | Custom view for action buttons (view/add/banned members) |
+| `CometChatMessagesViewController` | Opens group chat interface when "Chat" is tapped |
+| `CometChat.joinGroup()` | Joins public or password-protected groups |
+| `CometChat.leaveGroup()` | Leaves the current group |
+| `CometChat.deleteGroup()` | Deletes and exits the group (owners only) |
+| `CometChatGroupMembers` | Lists current group members |
+| `CometChatGroupDelegate` | Receives real-time group events |
## Integration Steps
-### 1. Presenting the Group Details Screen
+### Step 1: Present the Group Details Screen
-Push `GroupDetailsViewController` for a selected group.
+Push `GroupDetailsViewController` for a selected group:
```swift
import UIKit
import CometChatSDK
-func showGroupDetails(for group: Group) {
- let detailsVC = GroupDetailsViewController()
- detailsVC.group = group
- navigationController?.pushViewController(detailsVC, animated: true)
+class GroupListViewController: UIViewController {
+
+ func showGroupDetails(for group: Group) {
+ // Initialize the group details view controller
+ let detailsVC = GroupDetailsViewController()
+ detailsVC.group = group
+
+ // Push onto navigation stack
+ navigationController?.pushViewController(detailsVC, animated: true)
+ }
}
```
-**File reference:**
-[`HomeScreenViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/HomeScreenViewController.swift)
+This initializes and presents the details UI with the correct group context.
-Initializes and presents the details UI with the correct group context.
+**File reference:** [`HomeScreenViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/HomeScreenViewController.swift)
-### 2. Setting Up the UI
+### Step 2: Set Up the UI
-Configure scroll view, header, and action views.
+Configure scroll view, header, and action views:
```swift
-override public func viewDidLoad() {
- super.viewDidLoad()
- connect()
- view.backgroundColor = CometChatTheme.backgroundColor01
- setupScrollView()
- setupLayout()
- addButtonActions()
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class GroupDetailsViewController: UIViewController {
+
+ var group: Group?
+
+ override public func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Connect to group event listeners
+ connect()
+
+ // Apply theme
+ view.backgroundColor = CometChatTheme.backgroundColor01
+
+ // Set up UI components
+ setupScrollView()
+ setupLayout()
+ addButtonActions()
+ }
+
+ private func setupScrollView() {
+ // Configure scroll view for content
+ }
+
+ private func setupLayout() {
+ // Arrange header, info, and action views
+ }
}
```
-**File reference:**
-[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)
+This lays out the UI components and registers for group events.
-Lays out the UI components and registers for group events.
+**File reference:** [`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)
-### 3. Enabling Group Action Buttons
+### Step 3: Enable Group Action Buttons
-Wire up view/add/banned members actions.
+Wire up view/add/banned members actions:
```swift
+// Action views for member management
+private let viewMembersView = GroupActionView()
+private let addMembersView = GroupActionView()
+private let bannedMembersView = GroupActionView()
+
public func addButtonActions() {
- viewMembersView.onActionButtonTapped = { self.viewMembers() }
- addMembersView.onActionButtonTapped = { self.addMembers() }
- bannedMembersView.onActionButtonTapped = { self.banMembers() }
+ // View current group members
+ viewMembersView.onActionButtonTapped = { [weak self] in
+ self?.viewMembers()
+ }
+
+ // Add new members to the group
+ addMembersView.onActionButtonTapped = { [weak self] in
+ self?.addMembers()
+ }
+
+ // View banned members
+ bannedMembersView.onActionButtonTapped = { [weak self] in
+ self?.banMembers()
+ }
+}
+
+private func viewMembers() {
+ guard let group = group else { return }
+ let membersVC = CometChatGroupMembers()
+ membersVC.set(group: group)
+ navigationController?.pushViewController(membersVC, animated: true)
+}
+
+private func addMembers() {
+ // Present add members interface
+}
+
+private func banMembers() {
+ // Present banned members list
}
```
-**File reference:**
-[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)
+This enables user interaction for member management.
-Enables user interaction for member management.
+**File reference:** [`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)
-### 4. Handling Leave and Delete Actions
+### Step 4: Handle Leave and Delete Actions
-Provide ownership-aware leave/delete flows.
+Provide ownership-aware leave/delete flows:
```swift
-@objc func showLeaveGroupAlert() { /* ownership transfer or leave logic */ }
+@objc func showLeaveGroupAlert() {
+ guard let group = group else { return }
+
+ let alert = UIAlertController(
+ title: "Leave Group",
+ message: "Are you sure you want to leave this group?",
+ preferredStyle: .alert
+ )
+
+ alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+ alert.addAction(UIAlertAction(title: "Leave", style: .destructive) { [weak self] _ in
+ self?.leaveGroup()
+ })
+
+ present(alert, animated: true)
+}
+
+@objc func showDeleteGroupAlert() {
+ guard let group = group else { return }
+
+ let alert = UIAlertController(
+ title: "Delete Group",
+ message: "Are you sure you want to delete this group? This action cannot be undone.",
+ preferredStyle: .alert
+ )
+
+ alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+ alert.addAction(UIAlertAction(title: "Delete", style: .destructive) { [weak self] _ in
+ self?.deleteGroup()
+ })
+
+ present(alert, animated: true)
+}
+
+private func leaveGroup() {
+ guard let guid = group?.guid else { return }
+
+ CometChat.leaveGroup(GUID: guid) { [weak self] _ in
+ DispatchQueue.main.async {
+ self?.navigationController?.popToRootViewController(animated: true)
+ }
+ } onError: { error in
+ print("Leave group error: \(error?.errorDescription ?? "")")
+ }
+}
-@objc func showDeleteGroupAlert() { /* deleteGroup and pop to Home */ }
+private func deleteGroup() {
+ guard let guid = group?.guid else { return }
+
+ CometChat.deleteGroup(GUID: guid) { [weak self] _ in
+ DispatchQueue.main.async {
+ self?.navigationController?.popToRootViewController(animated: true)
+ }
+ } onError: { error in
+ print("Delete group error: \(error?.errorDescription ?? "")")
+ }
+}
```
-**File reference:**
-[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)
+This manages group exit, with transfer prompt for owners.
-Manages group exit, with transfer prompt for owners.
+**File reference:** [`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)
-### 5. Listening for Group Events
+### Step 5: Listen for Group Events
-Update UI on member joins, leaves, bans, and ownership changes.
+Update UI on member joins, leaves, bans, and ownership changes:
```swift
+private let listenerId = "group-details-listener"
+
func connect() {
+ // Add SDK group listener
CometChat.addGroupListener(listenerId, self)
+
+ // Add UIKit group events listener
CometChatGroupEvents.addListener(listenerId, self)
}
@@ -124,57 +242,141 @@ func disconnect() {
CometChatGroupEvents.removeListener(listenerId)
}
-extension GroupDetailsViewController: CometChatGroupDelegate, CometChatGroupEventListener {
- func onGroupMemberJoined(_ action: ActionMessage, user: User, group: Group) { updateGroupInfo(group) }
- func onGroupMemberLeft(_ action: ActionMessage, user: User, group: Group) { /* hide UI if self-left */ }
- // other event methods...
+deinit {
+ disconnect()
+}
+```
+
+```swift
+// MARK: - CometChatGroupDelegate
+extension GroupDetailsViewController: CometChatGroupDelegate {
+
+ func onGroupMemberJoined(action: ActionMessage, joinedUser: User, joinedGroup: Group) {
+ updateGroupInfo(joinedGroup)
+ }
+
+ func onGroupMemberLeft(action: ActionMessage, leftUser: User, leftGroup: Group) {
+ // Hide UI if current user left
+ if leftUser.uid == CometChat.getLoggedInUser()?.uid {
+ navigationController?.popViewController(animated: true)
+ } else {
+ updateGroupInfo(leftGroup)
+ }
+ }
+
+ func onGroupMemberKicked(action: ActionMessage, kickedUser: User, kickedBy: User, kickedFrom: Group) {
+ updateGroupInfo(kickedFrom)
+ }
+
+ func onGroupMemberBanned(action: ActionMessage, bannedUser: User, bannedBy: User, bannedFrom: Group) {
+ updateGroupInfo(bannedFrom)
+ }
+
+ func onGroupMemberUnbanned(action: ActionMessage, unbannedUser: User, unbannedBy: User, unbannedFrom: Group) {
+ updateGroupInfo(unbannedFrom)
+ }
+
+ func onGroupMemberScopeChanged(action: ActionMessage, scopeChangeduser: User, scopeChangedBy: User, scopeChangedTo: String, scopeChangedFrom: String, group: Group) {
+ updateGroupInfo(group)
+ }
+
+ func onMemberAddedToGroup(action: ActionMessage, addedBy: User, addedUser: User, addedTo: Group) {
+ updateGroupInfo(addedTo)
+ }
+}
+
+// MARK: - CometChatGroupEventListener
+extension GroupDetailsViewController: CometChatGroupEventListener {
+
+ func onOwnershipChange(group: Group?, member: GroupMember?) {
+ if let group = group {
+ updateGroupInfo(group)
+ }
+ }
+}
+
+private func updateGroupInfo(_ group: Group) {
+ self.group = group
+ // Refresh UI with updated group data
}
```
-**File reference:**
-[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift#L200-L245)
+This keeps the group details in sync with back-end events.
-Keeps the group details in sync with back-end events.
+**File reference:** [`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift#L200-L245)
## Customization Options
-- **Header Styling:** Use `CometChatTheme` to customize fonts, colors, and borders.
-- **Button Labels:** Localize or rebrand action texts.
-- **Avatar Placeholder:** Provide fallback initials or default images.
+### Header Styling
+
+Use `CometChatTheme` to customize fonts, colors, and borders:
+
+```swift
+// Apply custom theme
+CometChatTheme.palette.primary = UIColor.systemBlue
+CometChatTheme.typography.heading = UIFont.systemFont(ofSize: 20, weight: .bold)
+```
+
+### Button Labels
+
+Localize or rebrand action texts:
+
+```swift
+viewMembersView.setTitle("View Members", for: .normal)
+addMembersView.setTitle("Add Members", for: .normal)
+bannedMembersView.setTitle("Banned Members", for: .normal)
+```
+
+### Avatar Placeholder
+
+Provide fallback initials or default images:
+
+```swift
+avatarView.set(name: group.name)
+avatarView.set(image: UIImage(named: "default_group_avatar"))
+```
-## Filtering & Edge Cases
+## Edge Cases
-- **Private/Protected Groups:** Prompt for a password before joining.
-- **Already a Member:** Hide or disable Join button.
-- **Empty Group:** Show an empty state when no members.
-- **Owner Restrictions:** Disable Delete for non-owners.
+| Scenario | Handling |
+|----------|----------|
+| Private/Protected groups | Prompt for a password before joining |
+| Already a member | Hide or disable Join button |
+| Empty group | Show an empty state when no members |
+| Owner restrictions | Disable Delete for non-owners |
## Error Handling
-- **Join Failures:** Show alert on network or permission errors.
-- **Leave/Delete Errors:** Display retry prompt on API failure.
-- **Event Errors:** Log and notify user if group events fail.
+| Error Type | Solution |
+|------------|----------|
+| Join failures | Show alert on network or permission errors |
+| Leave/Delete errors | Display retry prompt on API failure |
+| Event errors | Log and notify user if group events fail |
## Feature Matrix
-| Feature | Component / Method | File(s) |
-|:-----------------------|:------------------------------|:--------------------------------------------------------------------------------|
-| Show group details | `GroupDetailsViewController` | `GroupDetailsViewController.swift` |
-| View group members | `viewMembersView` action | `GroupDetailsViewController.swift` |
-| Add members | `addMembersView` action | `GroupDetailsViewController.swift` |
-| Ban members | `bannedMembersView` action | `GroupDetailsViewController.swift` |
-| Join group | `CometChat.joinGroup()` | `GroupDetailsViewController.swift` |
-| Leave group | `showLeaveGroupAlert()` | `GroupDetailsViewController.swift` |
-| Delete group | `showDeleteGroupAlert()` | `GroupDetailsViewController.swift` |
-| Real-time updates | `CometChatGroupDelegate` | `GroupDetailsViewController.swift` |
-
-
-
- Explore the complete Group Details flow:
- [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)
+| Feature | Component / Method | File(s) |
+|---------|-------------------|---------|
+| Show group details | `GroupDetailsViewController` | `GroupDetailsViewController.swift` |
+| View group members | `viewMembersView` action | `GroupDetailsViewController.swift` |
+| Add members | `addMembersView` action | `GroupDetailsViewController.swift` |
+| Ban members | `bannedMembersView` action | `GroupDetailsViewController.swift` |
+| Join group | `CometChat.joinGroup()` | `GroupDetailsViewController.swift` |
+| Leave group | `showLeaveGroupAlert()` | `GroupDetailsViewController.swift` |
+| Delete group | `showDeleteGroupAlert()` | `GroupDetailsViewController.swift` |
+| Real-time updates | `CometChatGroupDelegate` | `GroupDetailsViewController.swift` |
+
+## Related Components
+
+- [Groups](/ui-kit/ios/groups) - Display group list
+- [Group Members](/ui-kit/ios/group-members) - Display group member list
+- [Events](/ui-kit/ios/events) - Listen for chat events
+
+
+
+ Explore the complete Group Details flow
-
- Browse the Group Details implementation:
- [GitHub → GroupDetailsViewController.swift](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)
+
+ Browse the Group Details implementation
-
\ No newline at end of file
+
diff --git a/ui-kit/ios/guide-group-ownership.mdx b/ui-kit/ios/guide-group-ownership.mdx
index 1ee408e8..4d98a700 100644
--- a/ui-kit/ios/guide-group-ownership.mdx
+++ b/ui-kit/ios/guide-group-ownership.mdx
@@ -1,185 +1,411 @@
---
title: "Transfer Group Ownership"
sidebarTitle: "Transfer Group Ownership"
+description: "Enable group owners to transfer ownership to another member"
---
-Enable the current group owner to delegate ownership to another member using CometChat’s UIKit for iOS.
+Enable the current group owner to delegate ownership to another member using CometChat's UIKit for iOS.
## Overview
-The **Transfer Group Ownership** feature provides a modal interface where the group owner can:
+The Transfer Group Ownership feature provides a modal interface where the group owner can:
-- See a list of current group members (excluding themselves).
-- Select exactly one member to become the new owner.
-- Trigger the ownership transfer API call.
-- Automatically exit the group after successful transfer.
+- See a list of current group members (excluding themselves)
+- Select exactly one member to become the new owner
+- Trigger the ownership transfer API call
+- Automatically exit the group after successful transfer
## Prerequisites
-- A UIKit-based iOS project.
-- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager.
-- CometChat SDKs (`CometChatSDK`, `CometChatUIKitSwift`) integrated.
-- Logged-in user with `CometChat.login()`.
-- `UINavigationController` or modal presentation flow set up.
-- Group context (GUID) available when invoking the transfer screen.
+Before implementing ownership transfer, ensure you have:
+
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- CometChat UIKit v5+ installed via CocoaPods or Swift Package Manager
+- CometChatSDK and CometChatUIKitSwift integrated
+- User logged in with `CometChatUIKit.login()`
+- `UINavigationController` or modal presentation flow set up
+- Group context (GUID) available when invoking the transfer screen
## Components
-| Component | Responsibility |
-|:------------------------------------|:--------------------------------------------------------------------|
-| `TransferOwnership` | Subclass of `CometChatGroupMembers` enabling single selection mode. |
-| `viewModel.groupMembers` | Data source array of `GroupMember` objects. |
-| `onSelectedItemProceed` | Closure invoked when user confirms selection. |
-| `CometChat.transferGroupOwnership` | API call to delegate group ownership. |
-| `spinnerView` | `UIActivityIndicatorView` showing loading state. |
-| `leaveGroupCallback` | Callback to perform group exit after transfer. |
+| Component | Description |
+|-----------|-------------|
+| `TransferOwnership` | Subclass of `CometChatGroupMembers` enabling single selection mode |
+| `viewModel.groupMembers` | Data source array of `GroupMember` objects |
+| `onSelectedItemProceed` | Closure invoked when user confirms selection |
+| `CometChat.transferGroupOwnership` | API call to delegate group ownership |
+| `spinnerView` | `UIActivityIndicatorView` showing loading state |
+| `leaveGroupCallback` | Callback to perform group exit after transfer |
## Integration Steps
-### 1. Present Transfer Ownership Screen
+### Step 1: Present Transfer Ownership Screen
-Show the ownership transfer UI modally.
+Show the ownership transfer UI modally:
```swift
-func showTransferOwnership(for group: Group) {
- let transferVC = TransferOwnership()
- transferVC.set(group: group)
- let nav = UINavigationController(rootViewController: transferVC)
- present(nav, animated: true)
+import UIKit
+import CometChatSDK
+import CometChatUIKitSwift
+
+class GroupDetailsViewController: UIViewController {
+
+ var group: Group?
+
+ func showTransferOwnership(for group: Group) {
+ // Initialize transfer ownership view controller
+ let transferVC = TransferOwnership()
+ transferVC.set(group: group)
+
+ // Set callback for after transfer completes
+ transferVC.leaveGroupCallback = { [weak self] in
+ self?.leaveGroup()
+ }
+
+ // Present modally with navigation
+ let nav = UINavigationController(rootViewController: transferVC)
+ present(nav, animated: true)
+ }
+
+ private func leaveGroup() {
+ // Handle leaving group after ownership transfer
+ navigationController?.popToRootViewController(animated: true)
+ }
}
```
-**File reference:**
-[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)
+**File reference:** [`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift)
-### 2. Configure Single Selection Mode
+### Step 2: Configure Single Selection Mode
-Restrict selection to one member and capture selection.
+Restrict selection to one member and capture selection:
```swift
-override func viewDidLoad() {
- selectionMode = .single
- super.viewDidLoad()
- title = "OWNERSHIP_TRANSFER".localize()
- onSelectedItemProceed = { [weak self] users in
- if let newOwner = users.first {
- self?.transferOwnership(to: newOwner)
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class TransferOwnership: CometChatGroupMembers {
+
+ var leaveGroupCallback: (() -> Void)?
+
+ private let spinnerView: UIActivityIndicatorView = {
+ let spinner = UIActivityIndicatorView(style: .medium)
+ spinner.hidesWhenStopped = true
+ return spinner
+ }()
+
+ override func viewDidLoad() {
+ // Enable single selection mode
+ selectionMode = .single
+
+ super.viewDidLoad()
+
+ // Set navigation title
+ title = "OWNERSHIP_TRANSFER".localize()
+
+ // Handle member selection
+ onSelectedItemProceed = { [weak self] users in
+ if let newOwner = users.first as? GroupMember {
+ self?.transferOwnership(to: newOwner)
+ }
+ }
}
- }
}
```
-**File reference:**
-[`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L1-L30)
+**File reference:** [`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L1-L30)
-### 3. Load & Filter Member List
+### Step 3: Load and Filter Member List
-Exclude the current owner from the selectable list.
+Exclude the current owner from the selectable list:
```swift
override func reloadData() {
- super.reloadData()
- viewModel.reload = { [weak self] in
- guard let self = self else { return }
- let currentUID = CometChat.getLoggedInUser()?.uid
- self.viewModel.groupMembers.removeAll { $0.uid == currentUID }
- DispatchQueue.main.async {
- self.removeLoadingView()
- self.removeErrorView()
- self.reload()
- if self.viewModel.groupMembers.isEmpty { self.showEmptyView() }
+ super.reloadData()
+
+ viewModel.reload = { [weak self] in
+ guard let self = self else { return }
+
+ // Get current user's UID
+ let currentUID = CometChat.getLoggedInUser()?.uid
+
+ // Remove current owner from the list
+ self.viewModel.groupMembers.removeAll { $0.uid == currentUID }
+
+ DispatchQueue.main.async {
+ // Update UI state
+ self.removeLoadingView()
+ self.removeErrorView()
+ self.reload()
+
+ // Show empty state if no eligible members
+ if self.viewModel.groupMembers.isEmpty {
+ self.showEmptyView()
+ }
+ }
}
- }
}
```
-**File reference:**
-[`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L31-L60)
+**File reference:** [`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L31-L60)
-### 4. Perform Ownership Transfer
+### Step 4: Perform Ownership Transfer
-Call the API, emit event, and exit the group.
+Call the API, emit event, and exit the group:
```swift
func transferOwnership(to member: GroupMember) {
- addSpinnerView()
- let uid = member.uid ?? ""
- let guid = viewModel.group.guid
-
- CometChat.transferGroupOwnership(UID: uid, GUID: guid) { [weak self] _ in
- DispatchQueue.main.async {
- // Update local state
- self?.viewModel.group.owner = uid
- CometChatGroupEvents.ccOwnershipChanged(group: self!.viewModel.group, newOwner: member)
- self?.leaveGroupCallback?()
- self?.removeSpinnerView()
- self?.dismiss(animated: true)
+ // Show loading indicator
+ addSpinnerView()
+
+ let uid = member.uid ?? ""
+ let guid = viewModel.group.guid
+
+ CometChat.transferGroupOwnership(UID: uid, GUID: guid) { [weak self] successMessage in
+ DispatchQueue.main.async {
+ guard let self = self else { return }
+
+ // Update local group state
+ self.viewModel.group.owner = uid
+
+ // Emit ownership changed event for other components
+ CometChatGroupEvents.ccOwnershipChanged(
+ group: self.viewModel.group,
+ newOwner: member
+ )
+
+ // Execute leave group callback
+ self.leaveGroupCallback?()
+
+ // Hide loading and dismiss
+ self.removeSpinnerView()
+ self.dismiss(animated: true)
+ }
+ } onError: { [weak self] error in
+ DispatchQueue.main.async {
+ self?.removeSpinnerView()
+
+ // Show error alert
+ let alert = UIAlertController(
+ title: "Transfer Failed",
+ message: error?.errorDescription ?? "Unable to transfer ownership",
+ preferredStyle: .alert
+ )
+ alert.addAction(UIAlertAction(title: "OK", style: .default))
+ self?.present(alert, animated: true)
+ }
}
- } onError: { [weak self] error in
- DispatchQueue.main.async {
- self?.removeSpinnerView()
- // TODO: Show error alert
- }
- }
}
```
-**File reference:**
-[`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L61-L100)
+**File reference:** [`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L61-L100)
-### 5. Manage Loading State
+### Step 5: Manage Loading State
-Provide visual feedback during network calls.
+Provide visual feedback during network calls:
```swift
func addSpinnerView() {
- spinnerView.startAnimating()
- navigationItem.rightBarButtonItem = UIBarButtonItem(customView: spinnerView)
+ // Start spinner animation
+ spinnerView.startAnimating()
+
+ // Replace right bar button with spinner
+ navigationItem.rightBarButtonItem = UIBarButtonItem(customView: spinnerView)
}
func removeSpinnerView() {
- spinnerView.stopAnimating()
- navigationItem.rightBarButtonItem = nil
+ // Stop spinner animation
+ spinnerView.stopAnimating()
+
+ // Remove spinner from navigation bar
+ navigationItem.rightBarButtonItem = nil
}
```
-**File reference:**
-[`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L101-L130)
+**File reference:** [`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L101-L130)
+
+## Complete Implementation
+
+Here's the complete `TransferOwnership` class:
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class TransferOwnership: CometChatGroupMembers {
+
+ // MARK: - Properties
+ var leaveGroupCallback: (() -> Void)?
+
+ private let spinnerView: UIActivityIndicatorView = {
+ let spinner = UIActivityIndicatorView(style: .medium)
+ spinner.hidesWhenStopped = true
+ return spinner
+ }()
+
+ // MARK: - Lifecycle
+ override func viewDidLoad() {
+ selectionMode = .single
+ super.viewDidLoad()
+
+ title = "Transfer Ownership"
+
+ onSelectedItemProceed = { [weak self] users in
+ if let newOwner = users.first as? GroupMember {
+ self?.transferOwnership(to: newOwner)
+ }
+ }
+ }
+
+ // MARK: - Data Loading
+ override func reloadData() {
+ super.reloadData()
+
+ viewModel.reload = { [weak self] in
+ guard let self = self else { return }
+
+ let currentUID = CometChat.getLoggedInUser()?.uid
+ self.viewModel.groupMembers.removeAll { $0.uid == currentUID }
+
+ DispatchQueue.main.async {
+ self.removeLoadingView()
+ self.removeErrorView()
+ self.reload()
+
+ if self.viewModel.groupMembers.isEmpty {
+ self.showEmptyView()
+ }
+ }
+ }
+ }
+
+ // MARK: - Transfer Ownership
+ func transferOwnership(to member: GroupMember) {
+ addSpinnerView()
+
+ let uid = member.uid ?? ""
+ let guid = viewModel.group.guid
+
+ CometChat.transferGroupOwnership(UID: uid, GUID: guid) { [weak self] _ in
+ DispatchQueue.main.async {
+ guard let self = self else { return }
+
+ self.viewModel.group.owner = uid
+ CometChatGroupEvents.ccOwnershipChanged(
+ group: self.viewModel.group,
+ newOwner: member
+ )
+
+ self.leaveGroupCallback?()
+ self.removeSpinnerView()
+ self.dismiss(animated: true)
+ }
+ } onError: { [weak self] error in
+ DispatchQueue.main.async {
+ self?.removeSpinnerView()
+ self?.showError(error)
+ }
+ }
+ }
+
+ // MARK: - Loading State
+ func addSpinnerView() {
+ spinnerView.startAnimating()
+ navigationItem.rightBarButtonItem = UIBarButtonItem(customView: spinnerView)
+ }
+
+ func removeSpinnerView() {
+ spinnerView.stopAnimating()
+ navigationItem.rightBarButtonItem = nil
+ }
+
+ // MARK: - Error Handling
+ private func showError(_ error: CometChatException?) {
+ let alert = UIAlertController(
+ title: "Transfer Failed",
+ message: error?.errorDescription ?? "Unable to transfer ownership",
+ preferredStyle: .alert
+ )
+ alert.addAction(UIAlertAction(title: "OK", style: .default))
+ present(alert, animated: true)
+ }
+}
+```
## Customization Options
-- **Title Text:** Replace localization key with custom string.
-- **Spinner Style:** Adjust `spinnerView.style` and color using `CometChatTheme`.
-- **Error Handling:** Customize error alerts in the `onError` closure.
+### Title Text
-## Filtering & Edge Cases
+Replace localization key with custom string:
-- **Empty Member List:** Show an informative empty state when no eligible members exist.
-- **Network Failures:** Disable proceed button until connection restores.
-- **Blocked Members:** Exclude or disable blocked users from selection.
+```swift
+title = "Select New Owner"
+```
+
+### Spinner Style
+
+Adjust `spinnerView.style` and color using `CometChatTheme`:
+
+```swift
+spinnerView.style = .large
+spinnerView.color = CometChatTheme.palette.primary
+```
+
+### Error Handling
+
+Customize error alerts in the `onError` closure:
+
+```swift
+let alert = UIAlertController(
+ title: "Oops!",
+ message: "Could not transfer ownership. Please try again.",
+ preferredStyle: .alert
+)
+alert.addAction(UIAlertAction(title: "Retry", style: .default) { [weak self] _ in
+ self?.transferOwnership(to: member)
+})
+alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
+present(alert, animated: true)
+```
+
+## Edge Cases
+
+| Scenario | Handling |
+|----------|----------|
+| Empty member list | Show an informative empty state when no eligible members exist |
+| Network failures | Disable proceed button until connection restores |
+| Blocked members | Exclude or disable blocked users from selection |
## Error Handling
-- **Transfer Failures:** Present `UIAlertController` with retry option.
-- **Unexpected States:** Ensure `removeSpinnerView()` always executes in `defer`.
+| Error Type | Solution |
+|------------|----------|
+| Transfer failures | Present `UIAlertController` with retry option |
+| Unexpected states | Ensure `removeSpinnerView()` always executes in `defer` |
## Feature Matrix
-| Feature | Method / Component | File(s) |
-|:-------------------------------|:---------------------------------------|:------------------------------------------------------------------------------------------|
-| Launch transfer flow | `showTransferOwnership(for:)` | `GroupDetailsViewController.swift` |
-| Single-member selection | `selectionMode = .single` | `TransferOwnership.swift` |
-| Filter out current owner | `reloadData()` override | `TransferOwnership.swift` |
-| Execute API transfer | `CometChat.transferGroupOwnership()` | `TransferOwnership.swift` |
-| Show/hide loading indicator | `addSpinnerView()`, `removeSpinnerView()` | `TransferOwnership.swift` |
-
-
-
- Explore the transfer ownership feature in context:
- [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)
+| Feature | Method / Component | File(s) |
+|---------|-------------------|---------|
+| Launch transfer flow | `showTransferOwnership(for:)` | `GroupDetailsViewController.swift` |
+| Single-member selection | `selectionMode = .single` | `TransferOwnership.swift` |
+| Filter out current owner | `reloadData()` override | `TransferOwnership.swift` |
+| Execute API transfer | `CometChat.transferGroupOwnership()` | `TransferOwnership.swift` |
+| Show/hide loading indicator | `addSpinnerView()`, `removeSpinnerView()` | `TransferOwnership.swift` |
+
+## Related Components
+
+- [Groups](/ui-kit/ios/groups) - Display group list
+- [Group Members](/ui-kit/ios/group-members) - Display group member list
+- [Events](/ui-kit/ios/events) - Listen for chat events
+
+
+
+ Explore the transfer ownership feature in context
-
- Review the implementation:
- [TransferOwnership.swift](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift)
+
+ Review the implementation
-
\ No newline at end of file
+
diff --git a/ui-kit/ios/guide-message-privately.mdx b/ui-kit/ios/guide-message-privately.mdx
index 8d065a0d..857c5c5b 100644
--- a/ui-kit/ios/guide-message-privately.mdx
+++ b/ui-kit/ios/guide-message-privately.mdx
@@ -1,120 +1,187 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
+description: "Start private one-on-one chats from group conversations"
---
-Enable users to start a private one-on-one chat with a group member directly from a group chat screen using CometChat’s UIKit for iOS.
+Enable users to start a private one-on-one chat with a group member directly from a group chat screen using CometChat's UIKit for iOS.
## Overview
-The **Message Privately** feature allows users to long-press a message in a group chat and select **Message Privately** to transition into a private conversation with the original sender. This streamlines side discussions and follow-ups without manual user searches.
+The Message Privately feature allows users to long-press a message in a group chat and select **Message Privately** to transition into a private conversation with the original sender. This streamlines side discussions and follow-ups without requiring manual user searches.
## Prerequisites
-- UIKit-based iOS project.
-- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager.
-- Valid CometChat **App ID**, **Region**, and **Auth Key**.
-- Functional group chat via `CometChatMessageList`.
-- A one-on-one chat screen (`CometChatMessages` or custom) and navigation flow configured.
+Before implementing this feature, ensure you have:
+
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- CometChat UIKit v5+ installed via CocoaPods or Swift Package Manager
+- Valid CometChat App ID, Region, and Auth Key
+- Functional group chat via `CometChatMessageList`
+- A one-on-one chat screen (`CometChatMessages` or custom) and navigation flow configured
## Components
-| Component | Role |
-|:-----------------------------------|:-------------------------------------------------------------------------------------------------|
-| `CometChatMessageList` | Displays group messages; handles long-press to show options. |
-| `CometChatMessageOption` | Defines the **Message Privately** option in the context menu. |
-| `MessageDataSource` | Supplies the `messagePrivatelyOption` in the options array. |
-| `CometChatMessageListViewModel` | Manages UI state, including `hideMessagePrivatelyOption`. |
-| `CometChatMessages` | Entry point for rendering or pushing the private chat interface. |
-| `CometChatUIKit.getUser(uid:)` | Retrieves the `User` object for the selected message sender. |
-| `CometChatUIKit.getConversationWith(user:)` | Creates or fetches the 1-on-1 conversation instance. |
-| `UIViewController` (Navigation) | Pushes or presents the private chat screen (`CometChatMessages`). |
+| Component | Description |
+|-----------|-------------|
+| `CometChatMessageList` | Displays group messages and handles long-press to show options |
+| `CometChatMessageOption` | Defines the **Message Privately** option in the context menu |
+| `MessageDataSource` | Supplies the `messagePrivatelyOption` in the options array |
+| `CometChatMessageListViewModel` | Manages UI state, including `hideMessagePrivatelyOption` |
+| `CometChatMessages` | Entry point for rendering or pushing the private chat interface |
+| `CometChatUIKit.getUser(uid:)` | Retrieves the `User` object for the selected message sender |
+| `CometChatUIKit.getConversationWith(user:)` | Creates or fetches the 1-on-1 conversation instance |
+| `UIViewController` (Navigation) | Pushes or presents the private chat screen (`CometChatMessages`) |
## Integration Steps
-### 1. Control Option Visibility via ViewModel
+### Step 1: Control Option Visibility via ViewModel
-Dynamically show or hide **Message Privately** based on app context.
+Dynamically show or hide **Message Privately** based on app context:
```swift
+import CometChatUIKitSwift
+
+// Control visibility of the Message Privately option
public var hideMessagePrivatelyOption: Bool = false {
didSet {
+ // Sync with view model
viewModel.hideMessagePrivatelyOption = hideMessagePrivatelyOption
}
}
```
-**File reference:**
-[`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift)
+This ensures the option only appears when appropriate (e.g., based on user permissions).
-Ensures the option only appears when appropriate (e.g., user permissions).
+**File reference:** [`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift)
-### 2. Handle Private Chat Navigation
+### Step 2: Handle Private Chat Navigation
-Retrieve the sender and initiate a private 1-on-1 chat.
+Retrieve the sender and initiate a private 1-on-1 chat:
```swift
-if let uid = selectedMessage.sender?.uid {
- CometChatUIKit.getUser(uid: uid) { user in
- CometChatUIKit.getConversationWith(user: user) { conversation in
- let messagesVC = CometChatMessages(conversation: conversation)
- navigationController?.pushViewController(messagesVC, animated: true)
+import UIKit
+import CometChatSDK
+import CometChatUIKitSwift
+
+func startPrivateChat(with selectedMessage: BaseMessage) {
+ // Get the sender's UID from the selected message
+ if let uid = selectedMessage.sender?.uid {
+
+ // Fetch the user object
+ CometChatUIKit.getUser(uid: uid) { user in
+
+ // Get or create the conversation
+ CometChatUIKit.getConversationWith(user: user) { conversation in
+
+ // Navigate to the private chat screen
+ let messagesVC = CometChatMessages(conversation: conversation)
+ navigationController?.pushViewController(messagesVC, animated: true)
+ }
}
}
}
```
-**File reference:**
-[`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift)
+This automates the transition from group context to private conversation.
-Automates transition from group context to private conversation.
+**File reference:** [`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift)
## Implementation Flow
-1. Long-press a group message in `CometChatMessageList`.
-2. Options menu appears with **Message Privately**.
-3. User taps **Message Privately**.
-4. App fetches `User` via `CometChatUIKit.getUser(uid:)`.
-5. Retrieves or creates conversation via `CometChatUIKit.getConversationWith(user:)`.
-6. Pushes `CometChatMessages` onto the navigation stack.
+| Step | Action |
+|------|--------|
+| 1 | Long-press a group message in `CometChatMessageList` |
+| 2 | Options menu appears with **Message Privately** |
+| 3 | User taps **Message Privately** |
+| 4 | App fetches `User` via `CometChatUIKit.getUser(uid:)` |
+| 5 | Retrieves or creates conversation via `CometChatUIKit.getConversationWith(user:)` |
+| 6 | Pushes `CometChatMessages` onto the navigation stack |
## Customization Options
-- **Styling:** Override `CometChatMessageOption` UI (icons, fonts, colors).
-- **Availability:** Control via `viewModel.hideMessagePrivatelyOption`.
-- **Extend Options:** Add additional actions in `MessageDataSource.getMessageOptions(for:)`.
+### Styling
+
+Override `CometChatMessageOption` UI elements:
+
+```swift
+// Customize the message option appearance
+let privateOption = CometChatMessageOption(
+ id: "message-privately",
+ title: "Message Privately",
+ icon: UIImage(systemName: "person.fill"),
+ backgroundColor: .systemBlue
+)
+```
+
+### Availability
+
+Control visibility via the view model:
+
+```swift
+// Hide the option for specific scenarios
+viewModel.hideMessagePrivatelyOption = true
+```
+
+### Extend Options
+
+Add additional actions in `MessageDataSource.getMessageOptions(for:)`:
+
+```swift
+func getMessageOptions(for message: BaseMessage) -> [CometChatMessageOption] {
+ var options = [CometChatMessageOption]()
+
+ // Add message privately option
+ if !hideMessagePrivatelyOption {
+ options.append(messagePrivatelyOption)
+ }
+
+ // Add custom options
+ options.append(customOption)
+
+ return options
+}
+```
+
+## Edge Cases
+
+| Scenario | Handling |
+|----------|----------|
+| Blocked users | Hide option if the sender is in block list |
+| Existing conversations | Reuse existing thread via `getConversationWith` |
+| Unavailable users | Skip option or show disabled state if user data is missing |
+
+## Error Handling
-## Filtering & Edge Cases
+| Error Type | Solution |
+|------------|----------|
+| Block state | Catch errors from `getUser`/`getConversationWith` and alert user |
+| Network failures | Present retry or toast on navigation errors |
+| Invalid data | Disable option if `sender.uid` is nil |
-- **Blocked Users:** Hide option if the sender is in block list.
-- **Existing Conversations:** Reuse existing thread via `getConversationWith`.
-- **Unavailable Users:** Skip option or show disabled state if user data missing.
+## Additional Notes
-## Error Handling & Blocked-User Handling
+- This feature is only available in **group chat** screens (`CometChatMessageList`)
+- The option is hidden automatically in direct/private chat views
-- **Block State:** Catch errors from `getUser`/`getConversationWith` and alert user.
-- **Network Failures:** Present retry or toast on navigation errors.
-- **Invalid Data:** Disable option if `sender.uid` is nil.
+## Feature Matrix
-## Optional Context-Specific Notes
+| Feature | Component / Method | File(s) |
+|---------|-------------------|---------|
+| Show options menu | `getMessageOptions(for:)` | [`MessageDataSource.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Framework/MessagesDataSource.swift) |
+| Toggle Message Privately | `viewModel.hideMessagePrivatelyOption` | [`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift), [`MessageListViewModel.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift) |
-- Only available in **group chat** screens (`CometChatMessageList`).
-- Hidden automatically in direct/private chat views.
+## Related Components
-## Summary / Feature Matrix
+- [Message List](/ui-kit/ios/message-list) - Display messages in conversations
+- [Users](/ui-kit/ios/users) - Display user list
+- [Conversations](/ui-kit/ios/conversations) - Display conversation list
-| Feature | Component / Method | File(s) |
-|:----------------------------|:------------------------------------------|:--------------------------------------------------------------------------------------------|
-| Show options menu | `getMessageOptions(for:)` | [`MessageDataSource.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Framework/MessagesDataSource.swift) |
-| Toggle **Message Privately**| `viewModel.hideMessagePrivatelyOption` | [`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift),
[`MessageListViewModel.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift) |
-
-
-
- Explore this feature in the CometChat SampleApp:
- [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)
+
+
+ Explore this feature in the CometChat SampleApp
-
- Browse the message list component:
- [GitHub → CometChatMessageList.swift](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift)
+
+ Browse the message list component
-
\ No newline at end of file
+
diff --git a/ui-kit/ios/guide-new-chat.mdx b/ui-kit/ios/guide-new-chat.mdx
index 83716e6d..18d9b7d1 100644
--- a/ui-kit/ios/guide-new-chat.mdx
+++ b/ui-kit/ios/guide-new-chat.mdx
@@ -1,202 +1,308 @@
---
title: "Create Conversation"
sidebarTitle: "Create Conversation"
+description: "Enable users to start new 1:1 or group chats"
---
-Enable users to start new 1:1 or group chats in your iOS app using CometChat’s UIKit for iOS by integrating the **CreateConversationVC** screen.
+Enable users to start new 1:1 or group chats in your iOS app using CometChat's UIKit for iOS by integrating the `CreateConversationVC` screen.
## Overview
-The `CreateConversation` enables users to:
+The `CreateConversation` component enables users to:
-- Browse CometChat users and groups via native list components.
-- Search within users and groups.
-- Toggle between “Users” and “Groups” tabs using a segmented control.
-- Swipe between lists with a `UIPageViewController`.
-- Navigate to `MessagesVC` upon selecting a user or group.
+- Browse CometChat users and groups via native list components
+- Search within users and groups
+- Toggle between "Users" and "Groups" tabs using a segmented control
+- Swipe between lists with a `UIPageViewController`
+- Navigate to `MessagesVC` upon selecting a user or group
## Prerequisites
-- A UIKit-based iOS project.
-- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager.
-- User authenticated with `CometChat.login()` before presenting this screen.
-- A `UINavigationController` embedded in your flow.
-- `MessagesVC` implemented to handle chat screens.
+Before implementing this feature, ensure you have:
+
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- CometChat UIKit v5+ installed via CocoaPods or Swift Package Manager
+- User authenticated with `CometChatUIKit.login()` before presenting this screen
+- A `UINavigationController` embedded in your flow
+- `MessagesVC` implemented to handle chat screens
## Components
-| Component | Role |
-|:------------------------|:------------------------------------------------------------|
-| `UISegmentedControl` | Switches between “Users” and “Groups” tabs. |
-| `UIPageViewController` | Enables swipe navigation between list views. |
-| `CometChatUsers` | Displays the list of CometChat users. |
-| `CometChatGroups` | Displays the list of CometChat groups. |
-| `MessagesVC` | Chat interface, launched upon item selection. |
-| `searchController` | Provides search for both users and groups. |
-| `CometChatTheme` | Applies theming (colors, fonts) for UI consistency. |
-| `CometChatTypography` | Defines text styles for segment labels. |
+| Component | Description |
+|-----------|-------------|
+| `UISegmentedControl` | Switches between "Users" and "Groups" tabs |
+| `UIPageViewController` | Enables swipe navigation between list views |
+| `CometChatUsers` | Displays the list of CometChat users |
+| `CometChatGroups` | Displays the list of CometChat groups |
+| `MessagesVC` | Chat interface, launched upon item selection |
+| `searchController` | Provides search for both users and groups |
+| `CometChatTheme` | Applies theming (colors, fonts) for UI consistency |
+| `CometChatTypography` | Defines text styles for segment labels |
## Integration Steps
-### 1. Presenting the Create Conversation Screen
+### Step 1: Present the Create Conversation Screen
-Push `CreateConversations` to allow starting a chat.
+Push `CreateConversations` to allow starting a chat:
```swift
import UIKit
import CometChatSDK
-func showCreateConversation() {
- let createVC = CreateConversationVC()
- navigationController?.pushViewController(createVC, animated: true)
+class HomeViewController: UIViewController {
+
+ func showCreateConversation() {
+ // Initialize the create conversation view controller
+ let createVC = CreateConversationVC()
+
+ // Push onto navigation stack
+ navigationController?.pushViewController(createVC, animated: true)
+ }
}
```
-**File reference:**
-[`HomeScreenViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/HomeScreenViewController.swift)
+This provides the entry point to the create-conversation flow.
-Provides entry point to the create-conversation flow.
+**File reference:** [`HomeScreenViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/HomeScreenViewController.swift)
-### 2. Setting Up the User Interface
+### Step 2: Set Up the User Interface
-Build the segmented control and page view controller.
+Build the segmented control and page view controller:
```swift
-override public func viewDidLoad() {
- super.viewDidLoad()
- buildUI() // sets up segmentedControl, pageViewController, and searchController
- setupPageViewController()
- segmentedControl.addTarget(self, action: #selector(segmentChanged(_:)), for: .valueChanged)
- navigationItem.searchController = usersViewController.searchController
+import UIKit
+import CometChatUIKitSwift
+
+class CreateConversationVC: UIViewController {
+
+ private var segmentedControl: UISegmentedControl!
+ private var pageViewController: UIPageViewController!
+ private var usersViewController: CometChatUsers!
+ private var groupsViewController: CometChatGroups!
+
+ override public func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Set up segmented control, page view controller, and search
+ buildUI()
+ setupPageViewController()
+
+ // Add target for segment changes
+ segmentedControl.addTarget(
+ self,
+ action: #selector(segmentChanged(_:)),
+ for: .valueChanged
+ )
+
+ // Set initial search controller
+ navigationItem.searchController = usersViewController.searchController
+ }
+
+ private func buildUI() {
+ // Configure segmented control and page view
+ }
+
+ private func setupPageViewController() {
+ // Initialize page view controller with users and groups
+ }
}
```
-**File reference:**
-[`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift)
+This initializes the UI elements and search integration.
-Initializes the UI elements and search integration.
+**File reference:** [`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift)
-### 3. Configuring Segmented Control Navigation
+### Step 3: Configure Segmented Control Navigation
-Toggle between user and group lists when the segment changes.
+Toggle between user and group lists when the segment changes:
```swift
@objc public func segmentChanged(_ sender: UISegmentedControl) {
let index = sender.selectedSegmentIndex
+
+ // Determine navigation direction
let direction: UIPageViewController.NavigationDirection = index == 0 ? .reverse : .forward
+
+ // Update search controller based on selected tab
navigationItem.searchController = (index == 0)
? usersViewController.searchController
: groupsViewController.searchController
- pageViewController.setViewControllers([pages[index]], direction: direction, animated: true)
+
+ // Navigate to the selected page
+ pageViewController.setViewControllers(
+ [pages[index]],
+ direction: direction,
+ animated: true
+ )
}
```
-**File reference:**
-[`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift)
+This keeps the proper search bar and view in sync with the selected tab.
-Keeps the proper search bar and view in sync with the selected tab.
+**File reference:** [`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift)
-### 4. Handling Item Selection
+### Step 4: Handle Item Selection
-Navigate to `MessagesVC` when a user or group is tapped.
+Navigate to `MessagesVC` when a user or group is tapped:
```swift
-// User tap
+// Users list with tap handler
public lazy var usersViewController: CometChatUsers = {
let vc = CometChatUsers()
+
+ // Handle user selection
vc.set(onItemClick: { [weak self] user, _ in
let chatVC = MessagesVC()
chatVC.user = user
self?.navigationController?.pushViewController(chatVC, animated: true)
})
+
+ // Keep navigation bar visible during search
vc.searchController.hidesNavigationBarDuringPresentation = false
+
return vc
}()
-// Group tap
+// Groups list with tap handler
public lazy var groupsViewController: CometChatGroups = {
let vc = CometChatGroups()
+
+ // Handle group selection
vc.set(onItemClick: { [weak self] group, _ in
let chatVC = MessagesVC()
chatVC.group = group
self?.navigationController?.pushViewController(chatVC, animated: true)
})
+
+ // Keep navigation bar visible during search
vc.searchController.hidesNavigationBarDuringPresentation = false
+
return vc
}()
```
-**File reference:**
-[`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift)
+This routes the user to the appropriate chat screen.
-Routes the user to the appropriate chat screen.
+**File reference:** [`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift)
-### 5. Managing Page View Transitions
+### Step 5: Manage Page View Transitions
-Implement data source and delegate for smooth swiping.
+Implement data source and delegate for smooth swiping:
```swift
+// MARK: - UIPageViewControllerDataSource
extension CreateConversationVC: UIPageViewControllerDataSource {
- public func pageViewController(_ pvc: UIPageViewController, viewControllerBefore vc: UIViewController) -> UIViewController? {
+
+ public func pageViewController(
+ _ pvc: UIPageViewController,
+ viewControllerBefore vc: UIViewController
+ ) -> UIViewController? {
guard let idx = pages.firstIndex(of: vc), idx > 0 else { return nil }
return pages[idx - 1]
}
- public func pageViewController(_ pvc: UIPageViewController, viewControllerAfter vc: UIViewController) -> UIViewController? {
+
+ public func pageViewController(
+ _ pvc: UIPageViewController,
+ viewControllerAfter vc: UIViewController
+ ) -> UIViewController? {
guard let idx = pages.firstIndex(of: vc), idx < pages.count - 1 else { return nil }
return pages[idx + 1]
}
}
+// MARK: - UIPageViewControllerDelegate
extension CreateConversationVC: UIPageViewControllerDelegate {
- public func pageViewController(_ pvc: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
- if completed, let current = pvc.viewControllers?.first, let idx = pages.firstIndex(of: current) {
+
+ public func pageViewController(
+ _ pvc: UIPageViewController,
+ didFinishAnimating finished: Bool,
+ previousViewControllers: [UIViewController],
+ transitionCompleted completed: Bool
+ ) {
+ // Sync segmented control with current page
+ if completed,
+ let current = pvc.viewControllers?.first,
+ let idx = pages.firstIndex(of: current) {
segmentedControl.selectedSegmentIndex = idx
}
}
}
```
-**File reference:**
-[`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift)
+This synchronizes the segmented control with page swipes.
-Synchronizes the segmented control with page swipes.
+**File reference:** [`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift)
## Customization Options
-- **Segment Styling:** Use `CometChatTheme` to customize tint and font.
-- **Labels:** Localize or rebrand “USERS” / “GROUPS” labels.
-- **Search:** Adjust `searchController.placeholder` and styling.
+### Segment Styling
-## Filtering & Edge Cases
+Use `CometChatTheme` to customize tint and font:
-- **Live Search:** Built-in in `CometChatUsers` and `CometChatGroups`.
-- **Empty States:** Components display default “no results” views.
-- **Segment Disabled:** Hide tabs if only one list is relevant.
+```swift
+segmentedControl.selectedSegmentTintColor = CometChatTheme.palette.primary
+segmentedControl.setTitleTextAttributes([
+ .font: CometChatTypography.body,
+ .foregroundColor: UIColor.white
+], for: .selected)
+```
+
+### Labels
+
+Localize or rebrand "USERS" / "GROUPS" labels:
+
+```swift
+segmentedControl.setTitle("Contacts", forSegmentAt: 0)
+segmentedControl.setTitle("Teams", forSegmentAt: 1)
+```
+
+### Search
+
+Adjust `searchController.placeholder` and styling:
+
+```swift
+usersViewController.searchController.searchBar.placeholder = "Search contacts..."
+groupsViewController.searchController.searchBar.placeholder = "Search teams..."
+```
+
+## Edge Cases
+
+| Scenario | Handling |
+|----------|----------|
+| Live search | Built-in in `CometChatUsers` and `CometChatGroups` |
+| Empty states | Components display default "no results" views |
+| Segment disabled | Hide tabs if only one list is relevant |
## Error Handling
-- **Load Errors:** Use `setErrorView()` on list components.
-- **Navigation Failures:** Present an alert if push fails.
-- **Blocked Users:** Intercept in `onItemClick` to prevent navigation.
+| Error Type | Solution |
+|------------|----------|
+| Load errors | Use `setErrorView()` on list components |
+| Navigation failures | Present an alert if push fails |
+| Blocked users | Intercept in `onItemClick` to prevent navigation |
## Feature Matrix
-| Feature | Implementation |
-|:------------------------------|:-----------------------------------------------|
-| Show create screen | `showCreateConversation()` |
-| Tabbed lists | `UISegmentedControl` + `UIPageViewController` |
-| Display users | `CometChatUsers()` |
-| Display groups | `CometChatGroups()` |
-| Search functionality | `searchController` |
-| Navigate to chat | `MessagesVC(user:)` / `MessagesVC(group:)` |
-
-
-
- Explore the complete create-conversation flow:
- [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)
+| Feature | Implementation |
+|---------|----------------|
+| Show create screen | `showCreateConversation()` |
+| Tabbed lists | `UISegmentedControl` + `UIPageViewController` |
+| Display users | `CometChatUsers()` |
+| Display groups | `CometChatGroups()` |
+| Search functionality | `searchController` |
+| Navigate to chat | `MessagesVC(user:)` / `MessagesVC(group:)` |
+
+## Related Components
+
+- [Users](/ui-kit/ios/users) - Display user list
+- [Groups](/ui-kit/ios/groups) - Display group list
+- [Conversations](/ui-kit/ios/conversations) - Display conversation list
+
+
+
+ Explore the complete create-conversation flow
-
- Browse the source for `CreateConversationVC`:
- [GitHub → CreateConversationVC.swift](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversationVC.swift)
+
+ Browse the source for CreateConversationVC
-
\ No newline at end of file
+
diff --git a/ui-kit/ios/guide-overview.mdx b/ui-kit/ios/guide-overview.mdx
index 291ee974..01318aeb 100644
--- a/ui-kit/ios/guide-overview.mdx
+++ b/ui-kit/ios/guide-overview.mdx
@@ -1,23 +1,32 @@
---
title: "Overview"
sidebarTitle: "Overview"
+description: "Index of feature guides for iOS UI Kit"
---
-> This page indexes focused, task‑oriented feature guides for the iOS UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UIKit components.
+
+This page indexes focused, task-oriented feature guides for the iOS UI Kit. Each guide shows how to implement a specific capability end-to-end using UIKit components.
## When to Use These Guides
-Use these after completing [Getting Started](/ui-kit/ios/getting-started) and wiring your base conversations / messages flows. Apply them to layer feature depth without rebuilding standard patterns.
+Use these guides after completing [Getting Started](/ui-kit/ios/getting-started) and wiring your base conversations/messages flows. Apply them to layer feature depth without rebuilding standard patterns.
## Guide Directory
| Guide | Description |
-|:------|:------------|
+|-------|-------------|
+| [AI Agent Integration](/ui-kit/ios/guide-ai-agent) | Add AI-powered chat assistants with chat history, contextual responses, and seamless handoffs. |
| [Block / Unblock User](/ui-kit/ios/guide-block-unblock-user) | Add profile-level moderation so users can block or unblock others; hides interaction affordances and protects chat flow. |
-| [Call Log Details](/ui-kit/ios/guide-call-log-details) | Provide a detailed post‑call screen with metadata, participants, history, and recordings for auditing & support. |
+| [Call Log Details](/ui-kit/ios/guide-call-log-details) | Provide a detailed post-call screen with metadata, participants, history, and recordings for auditing and support. |
| [Group Management](/ui-kit/ios/guide-group-chat) | Implement create/join, membership listing, role changes, bans, and structured group moderation actions. |
| [Group Ownership Transfer](/ui-kit/ios/guide-group-ownership) | Allow admins to hand over group ownership securely to another member. |
-| [Message Privately](/ui-kit/ios/guide-message-privately) | Launch a direct 1:1 conversation from a user profile or list; optionally seed with an initial message. |
-| [New Chat](/ui-kit/ios/guide-new-chat) | Offer a unified entry to discover users & groups and jump into new conversations quickly. |
+| [Message Privately](/ui-kit/ios/guide-message-privately) | Launch a direct 1:1 conversation from a group chat; streamlines side discussions without manual user searches. |
+| [New Chat](/ui-kit/ios/guide-new-chat) | Offer a unified entry to discover users and groups and jump into new conversations quickly. |
| [Threaded Messages](/ui-kit/ios/guide-threaded-messages) | Add threaded reply views so users can branch focused discussions off individual messages. |
+## Related Resources
+
+- [Getting Started](/ui-kit/ios/getting-started) - Initial setup and configuration
+- [Components Overview](/ui-kit/ios/components-overview) - All available UI components
+- [Core Features](/ui-kit/ios/core-features) - Messaging, reactions, threads, and more
+
Need another guide? Request one via the [Developer Community](http://community.cometchat.com/) or Support.
diff --git a/ui-kit/ios/guide-threaded-messages.mdx b/ui-kit/ios/guide-threaded-messages.mdx
index a1cee6d7..6086f40d 100644
--- a/ui-kit/ios/guide-threaded-messages.mdx
+++ b/ui-kit/ios/guide-threaded-messages.mdx
@@ -1,153 +1,227 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
+description: "Add threaded reply views to your iOS chat app"
---
-Enhance your iOS chat app with threaded messaging by integrating CometChat’s **UIKit for iOS**, allowing users to reply to specific messages within a focused thread view.
+Enhance your iOS chat app with threaded messaging by integrating CometChat's UIKit for iOS, allowing users to reply to specific messages within a focused thread view.
## Overview
-Threaded messages allow users to reply to specific messages within a conversation, creating a sub-conversation for improved clarity and context. With CometChat’s UIKit for iOS, you can:
+Threaded messages allow users to reply to specific messages within a conversation, creating a sub-conversation for improved clarity and context. With CometChat's UIKit for iOS, you can:
-- Display a dedicated thread view.
-- View and send replies to a selected message.
-- Maintain context between the main conversation and the thread.
+- Display a dedicated thread view
+- View and send replies to a selected message
+- Maintain context between the main conversation and the thread
## Prerequisites
-- A working UIKit-based iOS project.
-- CometChat UIKit for iOS v4+ installed via Swift Package Manager or CocoaPods.
-- Valid CometChat **App ID**, **Region**, and **Auth Key**.
-- A navigation controller configured in your project.
+Before implementing threaded messages, ensure you have:
+
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- CometChat UIKit v4+ installed via Swift Package Manager or CocoaPods
+- Valid CometChat App ID, Region, and Auth Key
+- A navigation controller configured in your project
## Components
-| Component | Role |
-|:----------------------------------|:-----------------------------------------------------------|
-| `CometChatMessageList` | Displays messages and provides `onThreadRepliesClick` handler. |
-| `CometChatThreadedMessageHeader` | Shows the parent message context at the top of the thread. |
-| `CometChatMessageComposer` | Composes messages with an optional `parentMessageId`. |
-| `ThreadedMessagesVC` | View controller that hosts the threaded conversation. |
+| Component | Description |
+|-----------|-------------|
+| `CometChatMessageList` | Displays messages and provides `onThreadRepliesClick` handler |
+| `CometChatThreadedMessageHeader` | Shows the parent message context at the top of the thread |
+| `CometChatMessageComposer` | Composes messages with an optional `parentMessageId` |
+| `ThreadedMessagesVC` | View controller that hosts the threaded conversation |
## Integration Steps
-### Show the "Reply in Thread" Option
+### Step 1: Show the "Reply in Thread" Option
-Navigate to the thread when a message’s thread icon is tapped.
+Navigate to the thread when a message's thread icon is tapped:
```swift
-messageListView.set(onThreadRepliesClick: { [weak self] message, _ in
- guard let self = self else { return }
- let threadVC = ThreadedMessagesVC()
- threadVC.parentMessage = message
- self.navigationController?.pushViewController(threadVC, animated: true)
-})
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class MessagesViewController: UIViewController {
+
+ var messageListView: CometChatMessageList!
+
+ func setupThreadReplies() {
+ // Handle thread replies click
+ messageListView.set(onThreadRepliesClick: { [weak self] message, _ in
+ guard let self = self else { return }
+
+ // Create and configure thread view controller
+ let threadVC = ThreadedMessagesVC()
+ threadVC.parentMessage = message
+
+ // Navigate to thread screen
+ self.navigationController?.pushViewController(threadVC, animated: true)
+ })
+ }
+}
```
-**File reference:**
-[`ThreadedMessagesVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/ThreadedMessagesVC.swift)
-
-Captures user intent and opens a focused thread screen.
+This captures user intent and opens a focused thread screen.
-### Navigate to the Thread Screen
+**File reference:** [`ThreadedMessagesVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/ThreadedMessagesVC.swift)
-Show a dedicated UI for thread replies.
+### Step 2: Navigate to the Thread Screen
-In `ThreadedMessagesVC.swift`:
+Show a dedicated UI for thread replies. In `ThreadedMessagesVC.swift`:
```swift
-view.addSubview(parentMessageView)
-view.addSubview(messageListView)
-view.addSubview(composerView)
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ThreadedMessagesVC: UIViewController {
+
+ var parentMessage: BaseMessage?
+ var user: User?
+ var group: Group?
+
+ private var parentMessageContainerView: CometChatThreadedMessageHeader!
+ private var messageListView: CometChatMessageList!
+ private var composerView: CometChatMessageComposer!
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupUI()
+ }
+
+ private func setupUI() {
+ // Add UI components to view hierarchy
+ view.addSubview(parentMessageView)
+ view.addSubview(messageListView)
+ view.addSubview(composerView)
+ }
+}
```
-Header:
+Header configuration:
```swift
+// Create the threaded message header
let parentMessageContainerView = CometChatThreadedMessageHeader()
```
-Message List:
+Message list configuration:
```swift
+// Configure message list with user and parent message
messageListView.set(user: user, parentMessage: parentMessage)
```
-Provides a focused UI for thread interactions.
+This provides a focused UI for thread interactions.
-### Send a Threaded Message
+### Step 3: Send a Threaded Message
-Ensure new replies are attached to the correct parent message.
+Ensure new replies are attached to the correct parent message:
```swift
+// Set the parent message ID for threaded replies
composerView.set(parentMessageId: parentMessage?.id ?? 0)
```
Set the conversation context:
```swift
+// Configure composer for user conversation
composerView.set(user: user)
+
+// Or configure for group conversation
composerView.set(group: group)
```
-### Fetch & Display Thread Replies
+### Step 4: Fetch and Display Thread Replies
-Only messages that are part of the thread are displayed.
-
-Handled internally by:
+Only messages that are part of the thread are displayed. This is handled internally by:
```swift
+// Configure message list to fetch thread replies
messageListView.set(user: user, parentMessage: parentMessage)
```
-Ensures `CometChatMessageList` fetches replies using the `parentMessageId`.
+This ensures `CometChatMessageList` fetches replies using the `parentMessageId`.
## Customization Options
-- **Header Styling:** Customize `CometChatThreadedMessageHeader` (fonts, colors, etc.).
-- **Composer:** Modify placeholder text, input styles, and icons.
-- **Navigation:** Add a custom `navigationItem.leftBarButtonItem` for back navigation.
-
-## Filtering / Edge Cases
-
-- **Parent Message Deleted:** Display a fallback UI or disable the composer.
-- **No Replies:** Show an empty state (e.g., “No replies yet”).
-- **Offline Mode:** Disable the composer and queue thread operations.
-
-## Error Handling & Edge Cases
-
-- **Fetch Failures:** Show an error UI or retry mechanism when loading thread messages.
-- **Send Failures:** Handle send errors via delegate callbacks or show an alert with retry.
-- **Loading States:** Display a `UIActivityIndicatorView` during fetch/send operations.
-- **Blocked Users:** Remove the composer and display a blocked status label.
-
-## Summary / Feature Matrix
+### Header Styling
-| Feature | Implementation |
-|:----------------------------|:------------------------------------------------------|
-| Show thread option | `CometChatMessageList.onThreadRepliesClick` |
-| Thread view screen | `ThreadedMessagesVC.swift` |
-| Display threaded messages | `CometChatMessageList.set(parentMessage:)` |
-| Send threaded message | `CometChatMessageComposer.set(parentMessageId:)` |
-| Thread header | `CometChatThreadedMessageHeader` |
-| Handle blocked user | Remove composer & show a blocked user label |
+Customize `CometChatThreadedMessageHeader` appearance:
-
-
-
-
-Explore a complete sample application demonstrating threaded messaging.
+```swift
+// Customize fonts, colors, and layout
+let headerStyle = ThreadedMessageHeaderStyle()
+headerStyle.titleFont = UIFont.systemFont(ofSize: 16, weight: .semibold)
+headerStyle.titleColor = .label
+parentMessageContainerView.set(style: headerStyle)
+```
-[View on GitHub](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)
+### Composer
-
+Modify placeholder text, input styles, and icons:
-
+```swift
+// Customize composer appearance
+composerView.set(placeholderText: "Reply in thread...")
+```
-Browse the CometChat UIKit for iOS source code.
+### Navigation
-[View on GitHub](https://github.com/cometchat/cometchat-uikit-ios/tree/v5)
+Add a custom back button for navigation:
-
+```swift
+// Add custom back button
+navigationItem.leftBarButtonItem = UIBarButtonItem(
+ image: UIImage(systemName: "chevron.left"),
+ style: .plain,
+ target: self,
+ action: #selector(goBack)
+)
+```
-
\ No newline at end of file
+## Edge Cases
+
+| Scenario | Handling |
+|----------|----------|
+| Parent message deleted | Display a fallback UI or disable the composer |
+| No replies | Show an empty state (e.g., "No replies yet") |
+| Offline mode | Disable the composer and queue thread operations |
+
+## Error Handling
+
+| Error Type | Solution |
+|------------|----------|
+| Fetch failures | Show an error UI or retry mechanism when loading thread messages |
+| Send failures | Handle send errors via delegate callbacks or show an alert with retry |
+| Loading states | Display a `UIActivityIndicatorView` during fetch/send operations |
+| Blocked users | Remove the composer and display a blocked status label |
+
+## Feature Matrix
+
+| Feature | Implementation |
+|---------|----------------|
+| Show thread option | `CometChatMessageList.onThreadRepliesClick` |
+| Thread view screen | `ThreadedMessagesVC.swift` |
+| Display threaded messages | `CometChatMessageList.set(parentMessage:)` |
+| Send threaded message | `CometChatMessageComposer.set(parentMessageId:)` |
+| Thread header | `CometChatThreadedMessageHeader` |
+| Handle blocked user | Remove composer and show a blocked user label |
+
+## Related Components
+
+- [Message List](/ui-kit/ios/message-list) - Display messages in conversations
+- [Message Composer](/ui-kit/ios/message-composer) - Compose and send messages
+- [Threaded Messages Header](/ui-kit/ios/threaded-messages-header) - Thread header component
+
+
+
+ Explore a complete sample application demonstrating threaded messaging
+
+
+ Browse the CometChat UIKit for iOS source code
+
+
diff --git a/ui-kit/ios/incoming-call.mdx b/ui-kit/ios/incoming-call.mdx
index d3c3876e..bcbf2a73 100644
--- a/ui-kit/ios/incoming-call.mdx
+++ b/ui-kit/ios/incoming-call.mdx
@@ -1,5 +1,6 @@
---
title: "Incoming Call"
+description: "Display and handle incoming voice and video calls"
---
## Overview
@@ -10,37 +11,36 @@ The `Incoming call` is a [Component](/ui-kit/ios/components-overview#components)
-***
+---
## Usage
### Integration
-`CometChatIncomingCall` being a custom **view controller**, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+`CometChatIncomingCall` is a custom view controller that offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
```swift
+// Create and configure incoming call view controller
let cometChatIncomingCall = CometChatIncomingCall().set(call: call)
+
+// Present full screen
cometChatIncomingCall.modalPresentationStyle = .fullScreen
self.present(cometChatIncomingCall, animated: true)
```
-
-
-
If you are already using a navigation controller, you can use the `pushViewController` function instead of presenting the view controller.
-
### Actions
[Actions](/ui-kit/ios/components-overview#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.
-##### 1. SetOnAcceptClick
+#### 1. SetOnAcceptClick
The `setOnAcceptClick` action is typically triggered when the user clicks on the accept button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
@@ -48,17 +48,14 @@ The `setOnAcceptClick` action is typically triggered when the user clicks on the
```swift
let cometChatIncomingCall = CometChatIncomingCall()
-.set(onAcceptClick: { call, controller in
-//Perform Your Action
-
-})
+ .set(onAcceptClick: { call, controller in
+ // Perform your custom action when call is accepted
+ })
```
-
-
-##### 2. SetOnCancelClick
+#### 2. SetOnCancelClick
The `setOnCancelClick` action is typically triggered when the user clicks on the reject button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
@@ -66,118 +63,110 @@ The `setOnCancelClick` action is typically triggered when the user clicks on the
```swift
let cometChatIncomingCall = CometChatIncomingCall()
-.set(onCancelClick: { call, controller in
- //Perform Your Action
-
-})
+ .set(onCancelClick: { call, controller in
+ // Perform your custom action when call is rejected
+ })
```
-
-
-##### 3. OnError
+#### 3. OnError
You can customize this behavior by using the provided code snippet to override the `On Error` and improve error handling.
```swift
-
let incomingCallConfiguration = IncomingCallConfiguration()
-.set(onError:{ error in
-//Perform Your Action
-
-})
+ .set(onError: { error in
+ // Perform your custom error handling action
+ })
```
-
-
-***
+---
### 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.
+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 experience. Filters can be applied using RequestBuilders of Chat SDK.
The IncomingCall component does not have any exposed filters.
-***
+---
### 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.
+[Events](/ui-kit/ios/components-overview#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.
-Events emitted by the Incoming Call component is as follows.
+Events emitted by the Incoming Call component are as follows:
-| Event | Description |
-| -------------------------- | -------------------------------------------------------------------------- |
-| **onIncomingCallAccepted** | Triggers when the logged-in user accepts the incoming call. |
-| **onIncomingCallRejected** | This event is triggered when the logged-in user rejects the incoming call. |
-| **onCallEnded** | This event is triggered when the initiated call successfully ends. |
+| Event | Description |
+|-------|-------------|
+| `onIncomingCallAccepted` | Triggers when the logged-in user accepts the incoming call |
+| `onIncomingCallRejected` | Triggers when the logged-in user rejects the incoming call |
+| `onCallEnded` | Triggers when the initiated call successfully ends |
```swift
-// View controller from your project where you want to listen events.
+// View controller from your project where you want to listen to events
public class ViewController: UIViewController {
- public override func viewDidLoad() {
+ public override func viewDidLoad() {
super.viewDidLoad()
- // Subscribing for the listener to listen events from user module
+ // Subscribe to call events
CometChatCallEvents.addListener("UNIQUE_ID", self as CometChatCallEventListener)
}
-
}
- // Listener events from user module
-extension ViewController: CometChatCallEventListener {
+
+// Listener events from call module
+extension ViewController: CometChatCallEventListener {
func onIncomingCallAccepted(call: Call) {
- // Do Stuff
+ // Handle accepted call
}
- func onIncomingCallRejected(call: Call){
- // Do Stuff
+
+ func onIncomingCallRejected(call: Call) {
+ // Handle rejected call
}
func onCallEnded(call: Call) {
- // Do Stuff
+ // Handle ended call
}
}
```
-```swift Emitting Group Events
-//emit this when logged in user accepts the incoming call
+```swift
+// Emitting Call Events
+
+// Emit when logged in user accepts the incoming call
CometChatCallEvents.emitOnIncomingCallAccepted(call: Call)
-//emit this when logged in user rejects the incoming call
+// Emit when logged in user rejects the incoming call
CometChatCallEvents.emitOnIncomingCallRejected(call: Call)
-//emit this when logged in user cancels a call
+// Emit when logged in user ends a call
CometChatCallEvents.emitOnCallEnded(call: Call)
```
-
-
-***
+---
-```swift View Controller
+```swift
public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events from user module
- CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
+ // Unsubscribe from call events
+ CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
}
```
-
-
-***
+---
## Customization
@@ -185,9 +174,9 @@ To fit your app's design requirements, you can customize the appearance of the c
### Style
-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.
+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. IncomingCall Style
+#### 1. IncomingCall Style
You can customize the appearance of the `IncomingCall` Component by applying the `IncomingCallStyle` to it using the following code snippet.
@@ -196,19 +185,19 @@ You can customize the appearance of the `IncomingCall` Component by applying the
```swift
+// Create custom avatar style
let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-
+
+// Apply global incoming call styles
CometChatIncomingCall.style.nameLabelFont = UIFont(name: "Times-New-Roman", size: 20)
CometChatIncomingCall.style.callLabelFont = UIFont(name: "Times-New-Roman", size: 14)
CometChatIncomingCall.style.acceptButtonCornerRadius = .init(cornerRadius: 8)
CometChatIncomingCall.style.rejectButtonCornerRadius = .init(cornerRadius: 8)
CometChatIncomingCall.avatarStyle = customAvatarStyle
```
-
-
**Instance level styling**
@@ -216,65 +205,66 @@ CometChatIncomingCall.avatarStyle = customAvatarStyle
```swift
+// Create custom avatar style
var customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
-
+
+// Create custom incoming call style
var incomingCallStyle = IncomingCallStyle()
incomingCallStyle.nameLabelFont = UIFont(name: "Times-New-Roman", size: 20)
incomingCallStyle.callLabelFont = UIFont(name: "Times-New-Roman", size: 14)
incomingCallStyle.acceptButtonCornerRadius = .init(cornerRadius: 8)
incomingCallStyle.rejectButtonCornerRadius = .init(cornerRadius: 8)
-
+
+// Apply styles to instance
let incomingCall = CometChatIncomingCall()
incomingCall.style = incomingCallStyle
incomingCall.avatarStyle = customAvatarStyle
```
-
-
-List of properties exposed by IncomingCallStyle
-
-| Property | Description | Code |
-| ----------------------------- | --------------------------------------- | ------------------------------------------------- |
-| `overlayBackgroundColor` | Background color for the overlay. | `overlayBackgroundColor: UIColor` |
-| `acceptButtonBackgroundColor` | Background color for the accept button. | `acceptButtonBackgroundColor: UIColor` |
-| `rejectButtonBackgroundColor` | Background color for the reject button. | `rejectButtonBackgroundColor: UIColor` |
-| `acceptButtonTintColor` | Tint color for the accept button. | `acceptButtonTintColor: UIColor` |
-| `rejectButtonTintColor` | Tint color for the reject button. | `rejectButtonTintColor: UIColor` |
-| `acceptButtonImage` | Icon image for the accept button. | `acceptButtonImage: UIImage` |
-| `rejectButtonImage` | Icon image for the reject button. | `rejectButtonImage: UIImage` |
-| `acceptButtonCornerRadius` | Sets corner radius for accept button | `acceptButtonCornerRadius: CometChatCornerStyle?` |
-| `rejectButtonCornerRadius` | Sets corner radius for reject button | `rejectButtonCornerRadius: CometChatCornerStyle?` |
-| `acceptButtonBorderWidth` | Sets border width for accept button | `acceptButtonBorderWidth: CGFloat?` |
-| `rejectButtonBorderWidth` | Sets border width for reject button | `rejectButtonBorderWidth: CGFloat?` |
-| `acceptButtonBorderColor` | Sets border color for accept button | `acceptButtonBorderColor: UIColor?` |
-| `rejectButtonBorderColor` | Sets border color for reject button | `rejectButtonBorderColor: UIColor?` |
-| `backgroundColor` | Background color for the call view. | `backgroundColor: UIColor` |
-| `cornerRadius` | Corner radius for the view. | `cornerRadius: nil` |
-| `borderColor` | Border color for the view. | `borderColor: UIColor` |
-| `borderWidth` | Border width for the view. | `borderWidth: CGFloat` |
-| `callLabelColor` | Text color for the call label. | `callLabelColor: UIColor` |
-| `callLabelFont` | Font for the call label. | `callLabelFont: UIFont` |
-| `nameLabelColor` | Text color for the name label. | `nameLabelColor: UIColor` |
-| `nameLabelFont` | Font for the name label. | `nameLabelFont: UIFont` |
-
-***
+List of properties exposed by IncomingCallStyle:
+
+| Property | Description | Code |
+|----------|-------------|------|
+| `overlayBackgroundColor` | Background color for the overlay | `overlayBackgroundColor: UIColor` |
+| `acceptButtonBackgroundColor` | Background color for the accept button | `acceptButtonBackgroundColor: UIColor` |
+| `rejectButtonBackgroundColor` | Background color for the reject button | `rejectButtonBackgroundColor: UIColor` |
+| `acceptButtonTintColor` | Tint color for the accept button | `acceptButtonTintColor: UIColor` |
+| `rejectButtonTintColor` | Tint color for the reject button | `rejectButtonTintColor: UIColor` |
+| `acceptButtonImage` | Icon image for the accept button | `acceptButtonImage: UIImage` |
+| `rejectButtonImage` | Icon image for the reject button | `rejectButtonImage: UIImage` |
+| `acceptButtonCornerRadius` | Sets corner radius for accept button | `acceptButtonCornerRadius: CometChatCornerStyle?` |
+| `rejectButtonCornerRadius` | Sets corner radius for reject button | `rejectButtonCornerRadius: CometChatCornerStyle?` |
+| `acceptButtonBorderWidth` | Sets border width for accept button | `acceptButtonBorderWidth: CGFloat?` |
+| `rejectButtonBorderWidth` | Sets border width for reject button | `rejectButtonBorderWidth: CGFloat?` |
+| `acceptButtonBorderColor` | Sets border color for accept button | `acceptButtonBorderColor: UIColor?` |
+| `rejectButtonBorderColor` | Sets border color for reject button | `rejectButtonBorderColor: UIColor?` |
+| `backgroundColor` | Background color for the call view | `backgroundColor: UIColor` |
+| `cornerRadius` | Corner radius for the view | `cornerRadius: nil` |
+| `borderColor` | Border color for the view | `borderColor: UIColor` |
+| `borderWidth` | Border width for the view | `borderWidth: CGFloat` |
+| `callLabelColor` | Text color for the call label | `callLabelColor: UIColor` |
+| `callLabelFont` | Font for the call label | `callLabelFont: UIFont` |
+| `nameLabelColor` | Text color for the name label | `nameLabelColor: UIColor` |
+| `nameLabelFont` | Font for the name label | `nameLabelFont: UIFont` |
+
+---
### Functionality
These are a set of small functional customizations that allow you to fine-tune the overall experience of the component.
-| Property | Description | Code |
-| ---------------------- | --------------------------------------- | ------------------------------- |
-| disableSoundForCalls | Disables sound for incoming calls. | `disableSoundForCalls = true` |
-| setCustomSoundForCalls | Sets a custom sound for incoming calls. | `set(customSoundForCalls: URL)` |
+| Property | Description | Code |
+|----------|-------------|------|
+| `disableSoundForCalls` | Disables sound for incoming calls | `disableSoundForCalls = true` |
+| `setCustomSoundForCalls` | Sets a custom sound for incoming calls | `set(customSoundForCalls: URL)` |
### Advanced
@@ -292,20 +282,18 @@ cometChatIncomingCall.set(listItemView: { call in
return customView
})
```
-
-
-Demonstration
+Demonstration:
-You can create a CustomListItemView as a custom `UIView`.
+You can create a CustomListItemView as a custom `UIView`:
-```swift swift
+```swift
import UIKit
class CustomListItemView: UIView {
@@ -405,11 +393,11 @@ class CustomListItemView: UIView {
}
```
-***
+---
#### SetLeadingView
-You can modify the leading view of a Incoming call component using the property below.
+You can modify the leading view of an Incoming call component using the property below.
@@ -419,18 +407,16 @@ cometChatIncomingCall.set(leadingView: { call in
return view
})
```
-
-
-Demonstration
+Demonstration:
-You can create a CustomLeadingView as a custom `UIView`.
+You can create a CustomLeadingView as a custom `UIView`:
@@ -453,7 +439,7 @@ class CustomLeadingView: UIView {
label.text = "PRO USER"
label.font = UIFont.boldSystemFont(ofSize: 14)
label.textColor = .white
- text.textAlignment = .center
+ label.textAlignment = .center
return label
}()
@@ -489,16 +475,14 @@ class CustomLeadingView: UIView {
}
}
```
-
-
-***
+---
#### SetTitleView
-You can customize the title view of a incoming call component using the property below.
+You can customize the title view of an incoming call component using the property below.
@@ -508,25 +492,23 @@ cometChatIncomingCall.set(titleView: { call in
return view
})
```
-
-
-Demonstration
+Demonstration:
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView` which we will inflate in `setTitleView()`:
```swift
import UIKit
-class `CustomTitleView`: UIView {
+class CustomTitleView: UIView {
private let titleLabel: UILabel = {
let label = UILabel()
@@ -597,9 +579,13 @@ class `CustomTitleView`: UIView {
}
}
```
-
-
-***
+---
+
+## Related Components
+
+- [Outgoing Call](/ui-kit/ios/outgoing-call) - Display outgoing call interface
+- [Ongoing Call](/ui-kit/ios/ongoing-call) - Display active call interface
+- [Call Logs](/ui-kit/ios/call-logs) - Display call history
diff --git a/ui-kit/ios/localize.mdx b/ui-kit/ios/localize.mdx
index af5cc261..af0ef6c2 100644
--- a/ui-kit/ios/localize.mdx
+++ b/ui-kit/ios/localize.mdx
@@ -1,73 +1,66 @@
---
title: "Localize"
+sidebarTitle: "Localization"
+description: "Adapt CometChat UI Kit to different languages and customize date/time formatting for your iOS application"
---
## Overview
-CometChat UI Kit provides language localization to adapt to the language of a specific country or region. The CometChatLocalize class allows you to detect the language of your users based on their browser or device settings, and set the language accordingly.
-
-CometChatLocalize is a class that includes methods related to locale. Developers can use these methods to change the language of the UI Kit library.
-
-Presently, the UI Kit supports 17 languages for localization, which are:
-
-- English (en, en-US)
-- English-UK (en-GB)
-- Chinese (zh, zh-TW)
-- Spanish (es)
-- Hindi (hi)
-- Russian (ru)
-- Portuguese (pt)
-- Malay (ms)
-- French (fr)
-- German (de)
-- Swedish (sv)
-- Lithuanian (lt)
-- Hungarian (hu)
-- Dutch (nl)
-- Japanese (ja)
-- Korean (ko)
-- Turkish (tr)
+CometChat UI Kit provides language localization to adapt to the language of a specific country or region. The `CometChatLocalize` class allows you to detect the language of your users based on their browser or device settings, and set the language accordingly.
+
+`CometChatLocalize` is a class that includes methods related to locale. Developers can use these methods to change the language of the UI Kit library.
+
+### Supported Languages
+
+The UI Kit supports 17 languages for localization:
+
+| Language | Code | Language | Code |
+|----------|------|----------|------|
+| English | `en`, `en-US` | Japanese | `ja` |
+| English-UK | `en-GB` | Korean | `ko` |
+| Chinese | `zh`, `zh-TW` | Turkish | `tr` |
+| Spanish | `es` | Malay | `ms` |
+| Hindi | `hi` | Swedish | `sv` |
+| Russian | `ru` | Lithuanian | `lt` |
+| Portuguese | `pt` | Hungarian | `hu` |
+| French | `fr` | Dutch | `nl` |
+| German | `de` | | |
---
-### How Localization Works
+## How Localization Works
Localization in the SDK is powered by:
-1. The **CometChatLocalize** class — for setting and fetching the active locale.
-2. A **String** extension method called `.localize` — to fetch localized text dynamically.
-
-#### Example:
+1. The `CometChatLocalize` class — for setting and fetching the active locale
+2. A `String` extension method called `.localize` — to fetch localized text dynamically
```swift
+// Example: Localizing a string key
"CHATS".localize
```
The SDK checks the following bundles in order:
-1. The app's Localizable.strings (for developer-defined overrides)
+1. The app's `Localizable.strings` (for developer-defined overrides)
2. The SDK's built-in localization files
3. Fallback to English or the original key if no match is found
---
-### Methods
+## Methods
-Here are the methods included in the CometChatLocalize class:
-
-| **Method** | **Description** |
-|---------------------------------|------------------------------------------------------|
-| **set(locale:)** | Sets the language using Language enum (.english, .french, etc.) |
-| **getLocale()** | Returns the currently active locale. By default, it will return the current language from the device/browser. |
+The `CometChatLocalize` class provides the following methods:
+| Method | Description |
+|--------|-------------|
+| `set(locale:)` | Sets the language using Language enum (`.english`, `.french`, etc.) |
+| `getLocale()` | Returns the currently active locale. By default, returns the current language from the device/browser |
### Usage
-Here is how you can put these methods into use:
-
-
-
+
```swift
// Set Language to French
CometChatLocalize.set(locale: .french)
@@ -80,14 +73,12 @@ let lang = CometChatLocalize.getLocale()
---
-### App-Level Overrides
+## App-Level Overrides
-To customize any text used by the SDK, simply define the same key in your app’s Localizable.strings files.
+To customize any text used by the SDK, simply define the same key in your app's `Localizable.strings` files.
-Example – Localizable.strings (en.lproj):
-
-
+
```swift
"CHATS" = "Conversations";
"USERS" = "People";
@@ -95,36 +86,44 @@ Example – Localizable.strings (en.lproj):
-When your app runs, this will override the SDK’s built-in translation for "CHATS" and "USERS" wherever they are used via .localize.
+When your app runs, this will override the SDK's built-in translation for "CHATS" and "USERS" wherever they are used via `.localize`.
No additional configuration is needed.
---
-### How to discover available keys
+## How to Discover Available Keys
All localization keys used by the SDK are available in our [GitHub repository](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/CometChatUIKitSwift/Components/Shared/Resources). This allows you to:
-* Know exactly which keys are used
-* Provide custom translations for them in your app
-* Keep your localization files in sync with SDK updates
+- Know exactly which keys are used
+- Provide custom translations for them in your app
+- Keep your localization files in sync with SDK updates
-By using the CometChatLocalize class, you can provide a user-friendly, localized experience to your users, enhancing the overall user experience within your application.
+By using the `CometChatLocalize` class, you can provide a user-friendly, localized experience to your users, enhancing the overall user experience within your application.
+
+---
## Customization
-CometChatUIKit for iOS allows developers to customize localization values easily. For example, if an English-language app requires the label "Chat" to be shown as "Chats," the developer can simply define the same localization key used in the UIKit inside the app's English localization file and assign it a different value. CometChatUIKit will automatically detect and use the overridden value from the app-level localization.
+CometChatUIKit for iOS allows developers to customize localization values easily. For example, if an English-language app requires the label "Chat" to be shown as "Chats," the developer can simply define the same localization key used in the UIKit inside the app's English localization file and assign it a different value. CometChatUIKit will automatically detect and use the overridden value from the app-level localization.
### Steps to Customize Strings
-1. Identify the String Key
- - Check the UIKit source code for the exact key of the string you want to modify. [Localization file](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Resources/en.lproj/Localizable.strings).
-2. Navigate to the app level localization file for that same langauge
- - Added the same key with the changed vale you whant value.
-3. Build and Run Your App
- - The changes will automatically reflect wherever the key is used.
+
+1. **Identify the String Key**
+ - Check the UIKit source code for the exact key of the string you want to modify: [Localization file](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Resources/en.lproj/Localizable.strings)
+
+2. **Navigate to the App Level Localization File**
+ - Add the same key with the changed value you want
+
+3. **Build and Run Your App**
+ - The changes will automatically reflect wherever the key is used
+
+---
## DateTimeFormatter
-This feature allows developers to customize how date and time values are displayed across the CometChat UI Kit components. It introduces the CometChatDateTimeFormatter class, enabling tailored formatting for strings such as "Today", "Yesterday", or time formats like "12:00 PM".
+
+This feature allows developers to customize how date and time values are displayed across the CometChat UI Kit components. It introduces the `CometChatDateTimeFormatter` class, enabling tailored formatting for strings such as "Today", "Yesterday", or time formats like "12:00 PM".
Custom formats can be set based on locale, branding, or user preferences, enhancing localization and UX consistency.
@@ -144,33 +143,35 @@ This system uses closures that you can override to provide your own custom strin
`CometChatDateTimeFormatter` is a configuration class that exposes customizable closures for various time-related strings. Developers can assign custom behavior to each closure based on their desired formatting logic.
-#### Available closures
+#### Available Closures
-| Property | Description | Code |
-|---------------------------------------|--------------------------------------------------------------------------|---------------------------------------------------------|
-| time | Called to format a timestamp as a standard time (e.g., "12:30 PM"). | `CometChatUIKit.dateTimeFormatter.time = { ... }` |
-| today | Called when rendering messages sent today. | `CometChatUIKit.dateTimeFormatter.today = { ... }` |
-| yesterday | Called for yesterday's messages. | `CometChatUIKit.dateTimeFormatter.yesterday = { ... }` |
-| lastweek | Called for messages within the last week. | `CometChatUIKit.dateTimeFormatter.lastweek = { ... }` |
-| otherDay | Called for dates older than last week. | `CometChatUIKit.dateTimeFormatter.otherDay = { ... }` |
-| minute | Called when referring to "a minute ago". | `CometChatUIKit.dateTimeFormatter.minute = { ... }` |
-| minutes | Called for "x minutes ago". | `CometChatUIKit.dateTimeFormatter.minutes = { ... }` |
-| hour | Called for "an hour ago". | `CometChatUIKit.dateTimeFormatter.hour = { ... }` |
-| hours | Called for "x hours ago". | `CometChatUIKit.dateTimeFormatter.hours = { ... }` |
+| Property | Description | Code |
+|----------|-------------|------|
+| `time` | Called to format a timestamp as a standard time (e.g., "12:30 PM") | `CometChatUIKit.dateTimeFormatter.time = { ... }` |
+| `today` | Called when rendering messages sent today | `CometChatUIKit.dateTimeFormatter.today = { ... }` |
+| `yesterday` | Called for yesterday's messages | `CometChatUIKit.dateTimeFormatter.yesterday = { ... }` |
+| `lastweek` | Called for messages within the last week | `CometChatUIKit.dateTimeFormatter.lastweek = { ... }` |
+| `otherDay` | Called for dates older than last week | `CometChatUIKit.dateTimeFormatter.otherDay = { ... }` |
+| `minute` | Called when referring to "a minute ago" | `CometChatUIKit.dateTimeFormatter.minute = { ... }` |
+| `minutes` | Called for "x minutes ago" | `CometChatUIKit.dateTimeFormatter.minutes = { ... }` |
+| `hour` | Called for "an hour ago" | `CometChatUIKit.dateTimeFormatter.hour = { ... }` |
+| `hours` | Called for "x hours ago" | `CometChatUIKit.dateTimeFormatter.hours = { ... }` |
-Each closure receives a timestamp (Int, representing UNIX time) and must return a String representing the formatted time.
+Each closure receives a timestamp (`Int`, representing UNIX time) and must return a `String` representing the formatted time.
---
-#### Integration Options
+### Integration Options
The formatter can be applied at three levels:
-1. **Global Level**: A global formatter is available via `CometChatUIKit.dateTimeFormatter`. Use this to apply formatting across all components in the `CometChatUIKit`.
+#### 1. Global Level
+
+A global formatter is available via `CometChatUIKit.dateTimeFormatter`. Use this to apply formatting across all components in the `CometChatUIKit`.
-```swift
+```swift
CometChatUIKit.dateTimeFormatter.hour = { timestamp in
return "Today"
}
@@ -179,16 +180,16 @@ CometChatUIKit.dateTimeFormatter.time = { timestamp in
return "12:00 PM"
}
```
-
-
-2. **Component Global Level**: Each component has a static formatter that overrides the global formatter only for that component across all instances.
+#### 2. Component Global Level
+
+Each component has a static formatter that overrides the global formatter only for that component across all instances.
-```swift
+```swift
CometChatMessageList.dateTimeFormatter.hour = { timestamp in
return "Today"
}
@@ -197,15 +198,16 @@ CometChatMessageList.dateTimeFormatter.time = { timestamp in
return "12:00 PM"
}
```
-
-3. **Local Component Level**: Components also expose an instance-level formatter for per-instance customization. This provides the highest precedence.
+#### 3. Local Component Level
+
+Components also expose an instance-level formatter for per-instance customization. This provides the highest precedence.
-```swift
+```swift
let messageList = CometChatMessageList()
messageList.set(user: user)
@@ -217,19 +219,30 @@ messageList.dateTimeFormatter.time = { timestamp in
return "12:00 PM"
}
```
-
+---
+
### Component-Level Date-Time Formatting Options
-The following components support dateTimeFormatter:
+The following components support `dateTimeFormatter`:
-* [CometChatConversations](/ui-kit/ios/conversations#date-time-formatter)
-* [CometChatMessageList](/ui-kit/ios/message-list#date-time-formatter)
-* [CometChatCallLogs](/ui-kit/ios/call-logs#date-time-formatter)
-* [CometChatMessageHeader](/ui-kit/ios/message-header#date-time-formatter)
+- [CometChatConversations](/ui-kit/ios/conversations#date-time-formatter)
+- [CometChatMessageList](/ui-kit/ios/message-list#date-time-formatter)
+- [CometChatCallLogs](/ui-kit/ios/call-logs#date-time-formatter)
+- [CometChatMessageHeader](/ui-kit/ios/message-header#date-time-formatter)
-Each of these components checks the most relevant closure in CometChatDateTimeFormatter based on the timestamp and context.
+Each of these components checks the most relevant closure in `CometChatDateTimeFormatter` based on the timestamp and context.
-The `CometChatDateTimeFormatter` gives developers fine-grained control over how date and time appear throughout their app. Whether you’re customizing for locale, branding, or clarity, this system ensures your app’s time formatting is as user-friendly and context-aware as possible.
+The `CometChatDateTimeFormatter` gives developers fine-grained control over how date and time appear throughout their app. Whether you're customizing for locale, branding, or clarity, this system ensures your app's time formatting is as user-friendly and context-aware as possible.
+
+---
+
+## Next Steps
+
+- [Theme Introduction](/ui-kit/ios/theme-introduction) — Customize the visual appearance of UI components
+- [Color Resources](/ui-kit/ios/color-resources) — Configure color schemes for your app
+- [Component Styling](/ui-kit/ios/component-styling) — Apply custom styles to individual components
+
+---
diff --git a/ui-kit/ios/mentions-formatter-guide.mdx b/ui-kit/ios/mentions-formatter-guide.mdx
index 8f623bdc..6c500d5c 100644
--- a/ui-kit/ios/mentions-formatter-guide.mdx
+++ b/ui-kit/ios/mentions-formatter-guide.mdx
@@ -1,18 +1,24 @@
---
title: "Mentions Formatter"
+sidebarTitle: "Mentions Formatter"
+description: "Format and customize @mentions within text messages using CometChat UI Kit for iOS"
---
## Overview
-The `CometChatMentionsFormatter` class is a 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.
+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.
+- **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
@@ -20,39 +26,39 @@ 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`).
+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 directly be initialised, tweak using its properties and passed into different configurations.
+`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](/ui-kit/ios/conversations), [CometChatMessageList](/ui-kit/ios/message-list), [CometChatMessageComposer](/ui-kit/ios/message-composer).
+Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in components such as [CometChatConversations](/ui-kit/ios/conversations), [CometChatMessageList](/ui-kit/ios/message-list), and [CometChatMessageComposer](/ui-kit/ios/message-composer).
```swift
+// 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](/ui-kit/ios/components-overview#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
+### 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.
-**Example**
-
@@ -60,22 +66,32 @@ Setting a listener for mention-click events in Message Bubbles enhances interact
```swift
+// 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`.
+The following code snippet represents a UIView extension used to display `showToastMessage`:
-```swift Swift
+
+
+```swift
extension UIView {
- func showToastMessage(message : String) {
- let toastLabel = UILabel(frame: CGRect(x: self.frame.size.width/2 - 100, y: self.frame.size.height-120, width: 200, height: 35))
+ 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
@@ -83,35 +99,42 @@ extension UIView {
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
+ }, completion: { isCompleted in
toastLabel.removeFromSuperview()
})
}
}
```
+
+
+
+---
## Customization
-| Methods | Description | Code |
-| ----------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
-| **Set Conversation List TextStyle** | Use to set stying for conversation list's formatted text. | `MentionTextStyle` |
-| **Set GroupMembersRequestBuilder** | Sets the builder for fetching group members. | `GroupMembersRequest.GroupMembersRequestBuilder?` |
-| **Set UsersRequestBuilder** | Sets the builder for fetching users. | `UsersRequest.UsersRequestBuilder?` |
-| **Set OnMentionCLick** | Sets a listener for mention click in Message Bubbles events. | `((_ baseMessage: BaseMessage, _ tappedText: String, _ controller: UIViewController?)->())` |
-| **Set composerTextStyle** | Use to set stying for composer's formatted text. | `MentionTextStyle` |
+| Method | Description | Type |
+|--------|-------------|------|
+| **Set Conversation List TextStyle** | Sets styling for conversation list's formatted text | `MentionTextStyle` |
+| **Set GroupMembersRequestBuilder** | Sets the builder for fetching group members | `GroupMembersRequest.GroupMembersRequestBuilder?` |
+| **Set UsersRequestBuilder** | Sets the builder for fetching users | `UsersRequest.UsersRequestBuilder?` |
+| **Set OnMentionClick** | Sets a listener for mention click events in Message Bubbles | `((_ baseMessage: BaseMessage, _ tappedText: String, _ controller: UIViewController?)->())` |
+| **Set composerTextStyle** | Sets styling for composer's formatted text | `MentionTextStyle` |
-## Advance
+---
-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 formatters style.
+## Advanced
-### Composer Mention Text Style
+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.
-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](/ui-kit/ios/message-composer) refer to the below code snippet
+### Composer Mention Text Style
-**Example**
+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](/ui-kit/ios/message-composer), refer to the code snippet below.
@@ -120,21 +143,19 @@ Assigns the list of text formatters. If the provided list is not null, it sets t
```swift
+// 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](/ui-kit/ios/message-list)
-
-**Example**
+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](/ui-kit/ios/message-list), refer to the code snippet below.
@@ -143,26 +164,22 @@ Assigns the list of text formatters. If the provided list is not null, it sets t
```swift
+// 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](/ui-kit/ios/conversations)
-
-**Example**
+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](/ui-kit/ios/conversations), refer to the code snippet below.
@@ -171,12 +188,22 @@ Assigns the list of text formatters. If the provided list is not null, it sets t
```swift
+// Create and configure conversation list mention style
let mentionsStyle = MentionTextStyle()
mentionsStyle.textColor = UIColor(hex: "#30A46C")
-
+
+// Apply the style globally
CometChatMentionsFormatter.conversationListTextStyle = mentionsStyle
```
-
-
+
+---
+
+## Next Steps
+
+- [Message Composer](/ui-kit/ios/message-composer) — Learn about the message input component
+- [Message List](/ui-kit/ios/message-list) — Display and customize chat messages
+- [Conversations](/ui-kit/ios/conversations) — Manage conversation lists
+
+---
diff --git a/ui-kit/ios/message-bubble-styling.mdx b/ui-kit/ios/message-bubble-styling.mdx
index b4be2c46..f4ba87a3 100644
--- a/ui-kit/ios/message-bubble-styling.mdx
+++ b/ui-kit/ios/message-bubble-styling.mdx
@@ -1,5 +1,7 @@
---
title: "Message Bubble Styling"
+sidebarTitle: "Message Bubble Styling"
+description: "Customize the appearance of incoming and outgoing message bubbles in CometChat UI Kit for iOS"
---
## Overview
@@ -8,80 +10,88 @@ The MessageBubble styling API allows developers to customize the appearance of i
There are two primary classes for styling message bubbles:
-* **CometChat Incoming Message Bubble Style**
-* **CometChat Outgoing Message Bubble Style**
+- **CometChat Incoming Message Bubble Style**
+- **CometChat Outgoing Message Bubble Style**
Both classes provide properties for customizing background color, border, corner radius, and specific styles for individual message types.
-### Properties
+---
+
+## Properties
-**Global Styling (Static Variables)**
+### Global Styling (Static Variables)
-* **backgroundColor:** The background color for message bubbles.
-* **backgroundDrawable:** A background image for message bubbles.
-* **borderWidth:** The width of the border for message bubbles.
-* **borderColor:** The color of the border for message bubbles.
-* **cornerRadius:** The corner radius for message bubbles.
+| Property | Description |
+|----------|-------------|
+| **backgroundColor** | The background color for message bubbles |
+| **backgroundDrawable** | A background image for message bubbles |
+| **borderWidth** | The width of the border for message bubbles |
+| **borderColor** | The color of the border for message bubbles |
+| **cornerRadius** | The corner radius for message bubbles |
-**Specific Message Type Styles:**
+### Specific Message Type Styles
-* **textBubbleStyle:** Style for text message bubbles.
-* **imageBubbleStyle:** Style for image message bubbles.
-* **videoBubbleStyle:** Style for video message bubbles.
-* **audioBubbleStyle:** Style for audio message bubbles.
-* **fileBubbleStyle:** Style for file message bubbles.
-* **documentBubbleStyle:** Style for document message bubbles.
+| Property | Description |
+|----------|-------------|
+| **textBubbleStyle** | Style for text message bubbles |
+| **imageBubbleStyle** | Style for image message bubbles |
+| **videoBubbleStyle** | Style for video message bubbles |
+| **audioBubbleStyle** | Style for audio message bubbles |
+| **fileBubbleStyle** | Style for file message bubbles |
+| **documentBubbleStyle** | Style for document message bubbles |
+
+---
## Customization Examples
### Customizing Incoming Message Bubble
-The following code snippet shows how customize the incoming message bubble style:
+The following code snippet shows how to customize the incoming message bubble style:
```swift
+// Customize incoming message bubble appearance
CometChatMessageBubble.style.incoming.backgroundColor = UIColor(hexString: "#F76808")
CometChatMessageBubble.style.incoming.borderWidth = 2
CometChatMessageBubble.style.incoming.borderColor = UIColor.black
```
-
-
### Customizing Outgoing Message Bubble
-The following code snippet shows how customize the outgoing message bubble style:
+The following code snippet shows how to customize the outgoing message bubble style:
```swift
+// Customize outgoing message bubble appearance
CometChatMessageBubble.style.outgoing.backgroundColor = UIColor(hexString: "#F76808")
CometChatMessageBubble.style.outgoing.borderWidth = 2
CometChatMessageBubble.style.outgoing.borderColor = UIColor.black
```
-
-
+---
+
## Text Bubble
Text bubbles display plain text messages, which are the most common message type.
-The following code snippet shows how customize the text message bubble:
+The following code snippet shows how to customize the text message bubble:
```swift
+// Customize text bubble for incoming messages
CometChatMessageBubble.style.incoming.textBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
+// Customize text bubble for outgoing messages
CometChatMessageBubble.style.outgoing.textBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
```
-
-
**Default**
@@ -96,22 +106,24 @@ CometChatMessageBubble.style.outgoing.textBubbleStyle.backgroundColor = UIColor(
+---
+
## Image Bubble
Image bubbles display messages with images.
-The following code snippet shows how customize the Image message bubble:
+The following code snippet shows how to customize the image message bubble:
```swift
+// Customize image bubble for incoming messages
CometChatMessageBubble.style.incoming.imageBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
+// Customize image bubble for outgoing messages
CometChatMessageBubble.style.outgoing.imageBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
```
-
-
**Default**
@@ -126,24 +138,26 @@ CometChatMessageBubble.style.outgoing.imageBubbleStyle.backgroundColor = UIColor
+---
+
## Video Bubble
Video bubbles display messages with video clips.
-The following code snippet shows how customize the Video message bubble:
+The following code snippet shows how to customize the video message bubble:
```swift
+// Customize video bubble for incoming messages
CometChatMessageBubble.style.incoming.videoBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
CometChatMessageBubble.style.incoming.videoBubbleStyle.playButtonTint = UIColor(hexString: "#F76808")
-
+
+// Customize video bubble for outgoing messages
CometChatMessageBubble.style.outgoing.deleteBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
CometChatMessageBubble.style.outgoing.videoBubbleStyle.playButtonTint = UIColor(hexString: "#F76808")
```
-
-
**Default**
@@ -158,25 +172,27 @@ CometChatMessageBubble.style.outgoing.videoBubbleStyle.playButtonTint = UIColor(
+---
+
## Audio Bubble
-Audio bubbles display Audio messages.
+Audio bubbles display audio messages.
-The following code snippet shows how customize the Audio message bubble:
+The following code snippet shows how to customize the audio message bubble:
```swift
+// Customize audio bubble for incoming messages
CometChatMessageBubble.style.incoming.audioBubbleStyle.audioWaveFormTintColor = UIColor(hexString: "#F76808")
CometChatMessageBubble.style.incoming.audioBubbleStyle.playImageTintColor = UIColor(hexString: "#F76808")
CometChatMessageBubble.style.incoming.audioBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
+// Customize audio bubble for outgoing messages
CometChatMessageBubble.style.outgoing.audioBubbleStyle.playImageTintColor = UIColor(hexString: "#F76808")
CometChatMessageBubble.style.outgoing.audioBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
```
-
-
**Default**
@@ -191,24 +207,26 @@ CometChatMessageBubble.style.outgoing.audioBubbleStyle.backgroundColor = UIColor
+---
+
## Poll Bubble
-Poll bubbles display messages with polling.
+Poll bubbles display messages with polling options.
-The following code snippet shows how customize the Poll message bubble:
+The following code snippet shows how to customize the poll message bubble:
```swift
+// Customize poll bubble for incoming messages
CometChatMessageBubble.style.incoming.pollBubbleStyle.optionProgressTintColor = UIColor(hexString: "#F76808")
CometChatMessageBubble.style.incoming.pollBubbleStyle.selectedPollImageTint = UIColor(hexString: "#F76808")
CometChatMessageBubble.style.incoming.pollBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
-
+
+// Customize poll bubble for outgoing messages
CometChatMessageBubble.style.outgoing.pollBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
```
-
-
**Default**
@@ -223,22 +241,24 @@ CometChatMessageBubble.style.outgoing.pollBubbleStyle.backgroundColor = UIColor(
+---
+
## Link Preview Bubble
-The Link Preview Bubble is designed to display a preview of links shared in messages. It enriches the messaging experience by showing details such as the page title, description, and an image from the linked content, making links more engaging and informative.
+The Link Preview Bubble displays a preview of links shared in messages. It enriches the messaging experience by showing details such as the page title, description, and an image from the linked content, making links more engaging and informative.
-The following code snippet shows how customize the Link preview message bubble:
+The following code snippet shows how to customize the link preview message bubble:
```swift
+// Customize link preview bubble for incoming messages
CometChatMessageBubble.style.incoming.linkPreviewBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
-
+
+// Customize link preview bubble for outgoing messages
CometChatMessageBubble.style.outgoing.linkPreviewBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
```
-
-
**Default**
@@ -253,22 +273,23 @@ CometChatMessageBubble.style.outgoing.linkPreviewBubbleStyle.backgroundColor = U
+---
+
## Action Bubble
Action bubbles provide a customizable interface for displaying a variety of actions, such as group actions, within a chat.
-The following code snippet shows how customize the action message bubble:
+The following code snippet shows how to customize the action message bubble:
```swift
+// Customize action bubble appearance
CometChatMessageBubble.actionBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
CometChatMessageBubble.actionBubbleStyle.bubbleTextColor = UIColor(hexString: "#F76808")
CometChatMessageBubble.actionBubbleStyle.borderColor = UIColor(hexString: "#F76808")
```
-
-
**Default**
@@ -283,22 +304,24 @@ CometChatMessageBubble.actionBubbleStyle.borderColor = UIColor(hexString: "#F768
+---
+
## Delete Bubble
-Delete bubbles displays messages that have been deleted by the sender. These indicate the message removal within the chat interface.
+Delete bubbles display messages that have been deleted by the sender. These indicate the message removal within the chat interface.
-The following code snippet shows how customize the delete message bubble:
+The following code snippet shows how to customize the delete message bubble:
```swift
+// Customize delete bubble for incoming messages
CometChatMessageBubble.style.incoming.deleteBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
+// Customize delete bubble for outgoing messages
CometChatMessageBubble.style.outgoing.deleteBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
```
-
-
**Default**
@@ -313,25 +336,26 @@ CometChatMessageBubble.style.outgoing.deleteBubbleStyle.backgroundColor = UIColo
+---
-## AIAssistantBubble
+## AI Assistant Bubble
The AI Assistant Bubble displays responses or messages sent by the AI assistant within the chat interface. These bubbles are designed to visually distinguish AI-generated messages from user messages, maintaining a clear and intuitive conversation flow.
-You can customize the appearance of the AI Assistant message bubble to match your app’s theme — including background color, text color, font, and border styling.
+You can customize the appearance of the AI Assistant message bubble to match your app's theme — including background color, text color, font, and border styling.
The following code snippet shows how to customize the AI Assistant message bubble:
```swift
+// Customize AI assistant bubble for incoming messages
CometChatMessageBubble.style.incoming.aiAssistantBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1")
+// Customize AI assistant bubble for outgoing messages
CometChatMessageBubble.style.outgoing.aiAssistantBubbleStyle.backgroundColor = UIColor(hexString: "#F76808")
```
-
-
**Default**
@@ -345,3 +369,13 @@ CometChatMessageBubble.style.outgoing.aiAssistantBubbleStyle.backgroundColor = U
+
+---
+
+## Next Steps
+
+- [Message List](/ui-kit/ios/message-list) — Display and customize the message list component
+- [Message Composer](/ui-kit/ios/message-composer) — Customize the message input component
+- [Component Styling](/ui-kit/ios/component-styling) — Learn about global styling options
+
+---
diff --git a/ui-kit/ios/message-composer.mdx b/ui-kit/ios/message-composer.mdx
index c49a7937..3a07fdfc 100644
--- a/ui-kit/ios/message-composer.mdx
+++ b/ui-kit/ios/message-composer.mdx
@@ -1,5 +1,7 @@
---
title: "Message Composer"
+sidebarTitle: "Message Composer"
+description: "Enable users to write and send text, media, and custom messages using CometChat UI Kit for iOS"
---
## Overview
@@ -12,65 +14,62 @@ MessageComposer is a [Component](/ui-kit/ios/components-overview#components) tha
MessageComposer is comprised of the following [Base Components](/ui-kit/ios/components-overview#base-components):
-| Base Components | Description |
-| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| [MessageInput](/ui-kit/ios/message-input) | This provides a basic layout for the contents of this component, such as the TextField and buttons |
-| [ActionSheet](/ui-kit/ios/action-sheet) | The ActionSheet component presents a list of options in either a list or grid mode, depending on the user's preference |
+| Base Components | Description |
+|-----------------|-------------|
+| [MessageInput](/ui-kit/ios/message-input) | Provides a basic layout for the contents of this component, such as the TextField and buttons |
+| [ActionSheet](/ui-kit/ios/action-sheet) | Presents a list of options in either a list or grid mode, depending on the user's preference |
+
+---
## Usage
### Integration
-The following code snippet illustrates how you can directly incorporate the MessageComposer component into your file.
+The following code snippet illustrates how you can directly incorporate the MessageComposer component into your application:
-```csharp
-// syntax for set(user: User)
+```swift
+// Create and configure the message composer
let messageComposer = CometChatMessageComposer()
messageComposer.set(user: user)
messageComposer.set(parentMessageId: 20)
```
+---
+
### Actions
[Actions](/ui-kit/ios/components-overview#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.
-##### 1. onSendButtonClick
+#### 1. onSendButtonClick
-The `set(onSendButtonClick:)` event gets activated when the send message button is clicked. The following code snippet Overrides the action of the send button in CometChatMessageComposer.
+The `set(onSendButtonClick:)` event gets activated when the send message button is clicked. The following code snippet overrides the action of the send button in CometChatMessageComposer.
```swift
messageComposer.set(onSendButtonClick: { message in
-// return custom action here
+ // Handle custom send action here
})
```
-
-
-***
+#### 2. OnTextChanged
-##### 2. OnTextChanged:
-
-The `set(onTextChanged:)` event gets activated when the user starts typing in message composer. This will return the text entered by the user.
+The `set(onTextChanged:)` event gets activated when the user starts typing in the message composer. This returns the text entered by the user.
```swift
-messageComposer.set(onTextChanged: { error in
- // Handle action
+messageComposer.set(onTextChanged: { text in
+ // Handle text change action
})
```
-
-
-***
-##### 3. SetOnError
+#### 3. SetOnError
This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatMessageComposer.
@@ -78,29 +77,27 @@ This method proves helpful when a user needs to customize the action taken upon
```swift
messageComposer.set(onError { error in
- // Override on error
+ // Handle error
})
```
-
-
-***
+---
### Filters
MessageComposer component does not have any available filters.
-***
+---
### 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.
+[Events](/ui-kit/ios/components-overview#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 MessageComposer Component does not emit any events of its own.
-***
+---
## Customization
@@ -108,9 +105,9 @@ To fit your app's design requirements, you can customize the appearance of the M
### Style
-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.
+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. MessageComposer Style
+#### 1. MessageComposer Style
To customize the styling, you can apply the `MessageComposerStyle` to the `MessageComposer` component.
@@ -125,9 +122,7 @@ CometChatMessageComposer.style.voiceRecordingImageTint = UIColor(hex: "#F76808")
CometChatMessageComposer.style.stickerTint = UIColor(hex: "#F76808")
CometChatMessageComposer.style.aiImageTint = UIColor(hex: "#F76808")
```
-
-
**Instance level styling**
@@ -135,75 +130,77 @@ CometChatMessageComposer.style.aiImageTint = UIColor(hex: "#F76808")
```swift
+// Create custom composer style
let customComposerStyle = MessageComposerStyle()
customComposerStyle.activeSendButtonImageBackgroundColor = UIColor(hex: "#F76808")
customComposerStyle.attachmentImageTint = UIColor(hex: "#F76808")
customComposerStyle.voiceRecordingImageTint = UIColor(hex: "#F76808")
customComposerStyle.stickerTint = UIColor(hex: "#F76808")
customComposerStyle.aiImageTint = UIColor(hex: "#F76808")
-
+
+// Apply to message composer instance
let messageComposer = CometChatMessageComposer()
messageComposer.style = customComposerStyle
```
-
-
+
The following properties are exposed by MessageComposerStyle:
-| **Property** | **Description** | **Code** |
-| ----------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| **Placeholder Text Font** | Font for the placeholder text in the input field. | `CometChatMessageComposer.style.placeHolderTextFont = CometChatTypography.Body.regular` |
-| **Placeholder Text Color** | Color for the placeholder text in the input field. | `CometChatMessageComposer.style.placeHolderTextColor = CometChatTheme.textColorTertiary` |
-| **Text Field Color** | Text color for the input field. | `CometChatMessageComposer.style.textFiledColor = CometChatTheme.textColorPrimary` |
-| **Text Field Font** | Font for the input field text. | `CometChatMessageComposer.style.textFiledFont = CometChatTypography.Body.regular` |
-| **Background Color** | Background color with dynamic support for light and dark mode. | `CometChatMessageComposer.style.backgroundColor = UIColor.dynamicColor(lightModeColor: ..., darkModeColor: ...)` |
-| **Corner Radius** | Corner radius for the composer. | `CometChatMessageComposer.style.cornerRadius = CometChatCornerStyle?` |
-| **Border Width** | Border width for the composer. | `CometChatMessageComposer.style.borderWidth = 0` |
-| **Border Color** | Border color for the composer. | `CometChatMessageComposer.style.borderColor = .clear` |
-| **Send Button Image** | Icon for the send button. | `CometChatMessageComposer.style.sendButtonImage = UIImage(named: "custom-send")` |
-| **Send Button Tint Color** | Tint color for the send button image. | `CometChatMessageComposer.style.sendButtonImageTint = CometChatTheme.white` |
-| **Active Send Button Background Color** | Background color for the send button when active. | `CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = CometChatTheme.primaryColor` |
-| **Inactive Send Button Background Color** | Background color for the send button when inactive. | `CometChatMessageComposer.style.inactiveSendButtonImageBackgroundColor = CometChatTheme.neutralColor300` |
-| **Compose Box Background Color** | Background color for the compose box. | `CometChatMessageComposer.style.composeBoxBackgroundColor = CometChatTheme.backgroundColor01` |
-| **Compose Box Border Color** | Border color for the compose box. | `CometChatMessageComposer.style.composeBoxBorderColor = CometChatTheme.borderColorDefault` |
-| **Compose Box Border Width** | Border width for the compose box. | `CometChatMessageComposer.style.composeBoxBorderWidth = 1` |
-| **Compose Box Corner Radius** | Corner radius for the compose box. | `CometChatMessageComposer.style.composerBoxCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r2)` |
-| **Compose Box Separator Color** | Color for the separator in the compose box. | `CometChatMessageComposer.style.composerSeparatorColor = CometChatTheme.borderColorLight` |
-| **Attachment Image** | Icon for the attachment button. | `CometChatMessageComposer.style.attachmentImage = UIImage(systemName: "plus.circle")` |
-| **Attachment Image Tint** | Tint color for the attachment image. | `CometChatMessageComposer.style.attachmentImageTint = CometChatTheme.iconColorSecondary` |
-| **Voice Recording Image** | Icon for the voice recording button. | `CometChatMessageComposer.style.voiceRecordingImage = UIImage(systemName: "mic")?.withRenderingMode(.alwaysTemplate)` |
-| **Voice Recording Image Tint** | Tint color for the voice recording image. | `CometChatMessageComposer.style.voiceRecordingImageTint = CometChatTheme.iconColorSecondary` |
-| **AI Image** | Icon for the AI button. | `CometChatMessageComposer.style.aiImage = UIImage(named: "ai-image")` |
-| **AI Image Tint** | Tint color for the AI image. | `CometChatMessageComposer.style.aiImageTint = CometChatTheme.iconColorSecondary` |
-| **Sticker Image** | Icon for the sticker button. | `CometChatMessageComposer.style.stickerImage = UIImage(named: "sticker-image")` |
-| **Sticker Image Tint** | Tint color for the sticker image. | `CometChatMessageComposer.style.stickerTint = CometChatTheme.iconColorSecondary` |
-| **Edit Preview Title Font** | Font for the title in the edit preview. | `CometChatMessageComposer.style.editPreviewTitleTextFont = CometChatTypography.Body.regular` |
-| **Edit Preview Message Font** | Font for the message text in the edit preview. | `CometChatMessageComposer.style.editPreviewMessageTextFont = CometChatTypography.Caption1.regular` |
-| **Edit Preview Title Color** | Text color for the title in the edit preview. | `CometChatMessageComposer.style.editPreviewTitleTextColor = CometChatTheme.textColorPrimary` |
-| **Edit Preview Message Color** | Text color for the message in the edit preview. | `CometChatMessageComposer.style.editPreviewMessageTextColor = CometChatTheme.textColorSecondary` |
-| **Edit Preview Background Color** | Background color for the edit preview. | `CometChatMessageComposer.style.editPreviewBackgroundColor = CometChatTheme.backgroundColor03` |
-| **Edit Preview Corner Radius** | Corner radius for the edit preview. | `CometChatMessageComposer.style.editPreviewCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r1)` |
-| **Edit Preview Border Color** | Border color for the edit preview. | `CometChatMessageComposer.style.editPreviewBorderColor = .clear` |
-| **Edit Preview Border Width** | Border width for the edit preview. | `CometChatMessageComposer.style.editPreviewBorderWidth = 0` |
-| **Edit Preview Close Icon** | Icon for closing the edit preview. | `CometChatMessageComposer.style.editPreviewCloseIcon = UIImage(systemName: "xmark")?.withRenderingMode(.alwaysTemplate)` |
-| **Edit Preview Close Icon Tint** | Tint color for the close icon in the edit preview. | `CometChatMessageComposer.style.editPreviewCloseIconTint = CometChatTheme.iconColorPrimary` |
-| **Info Icon** | Icon for the info button. | `CometChatMessageComposer.style.infoIcon = UIImage(systemName: "info.circle")` |
-| **Info Icon Tint** | Tint color for the info icon. | `CometChatMessageComposer.style.infoIconTint = CometChatTheme.errorColor` |
-| **Info Text Color** | Text color for the info text. | `CometChatMessageComposer.style.infoTextColor = CometChatTheme.errorColor` |
-| **Info Text Font** | Font for the info text. | `CometChatMessageComposer.style.infoTextFont = CometChatTypography.Caption1.regular` |
-| **Info Separator Color** | Color for the separator in the info section. | `CometChatMessageComposer.style.infoSeparatorColor = CometChatTheme.borderColorLight` |
-| **Info Background Color** | Background color for the info section. | `CometChatMessageComposer.style.infoBackgroundColor = CometChatTheme.backgroundColor02` |
-| **Info Corner Radius** | Corner radius for the info section. | `CometChatMessageComposer.style.infoCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r1)` |
-| **Info Border Color** | Border color for the info section. | `CometChatMessageComposer.style.infoBorderColor = .clear` |
-| **Info Border Width** | Border width for the info section. | `CometChatMessageComposer.style.infoBorderWidth = 0` |
-
-##### 2. MediaRecorder Style
+| Property | Description | Code |
+|----------|-------------|------|
+| **Placeholder Text Font** | Font for the placeholder text in the input field | `CometChatMessageComposer.style.placeHolderTextFont = CometChatTypography.Body.regular` |
+| **Placeholder Text Color** | Color for the placeholder text in the input field | `CometChatMessageComposer.style.placeHolderTextColor = CometChatTheme.textColorTertiary` |
+| **Text Field Color** | Text color for the input field | `CometChatMessageComposer.style.textFiledColor = CometChatTheme.textColorPrimary` |
+| **Text Field Font** | Font for the input field text | `CometChatMessageComposer.style.textFiledFont = CometChatTypography.Body.regular` |
+| **Background Color** | Background color with dynamic support for light and dark mode | `CometChatMessageComposer.style.backgroundColor = UIColor.dynamicColor(lightModeColor: ..., darkModeColor: ...)` |
+| **Corner Radius** | Corner radius for the composer | `CometChatMessageComposer.style.cornerRadius = CometChatCornerStyle?` |
+| **Border Width** | Border width for the composer | `CometChatMessageComposer.style.borderWidth = 0` |
+| **Border Color** | Border color for the composer | `CometChatMessageComposer.style.borderColor = .clear` |
+| **Send Button Image** | Icon for the send button | `CometChatMessageComposer.style.sendButtonImage = UIImage(named: "custom-send")` |
+| **Send Button Tint Color** | Tint color for the send button image | `CometChatMessageComposer.style.sendButtonImageTint = CometChatTheme.white` |
+| **Active Send Button Background Color** | Background color for the send button when active | `CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = CometChatTheme.primaryColor` |
+| **Inactive Send Button Background Color** | Background color for the send button when inactive | `CometChatMessageComposer.style.inactiveSendButtonImageBackgroundColor = CometChatTheme.neutralColor300` |
+| **Compose Box Background Color** | Background color for the compose box | `CometChatMessageComposer.style.composeBoxBackgroundColor = CometChatTheme.backgroundColor01` |
+| **Compose Box Border Color** | Border color for the compose box | `CometChatMessageComposer.style.composeBoxBorderColor = CometChatTheme.borderColorDefault` |
+| **Compose Box Border Width** | Border width for the compose box | `CometChatMessageComposer.style.composeBoxBorderWidth = 1` |
+| **Compose Box Corner Radius** | Corner radius for the compose box | `CometChatMessageComposer.style.composerBoxCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r2)` |
+| **Compose Box Separator Color** | Color for the separator in the compose box | `CometChatMessageComposer.style.composerSeparatorColor = CometChatTheme.borderColorLight` |
+| **Attachment Image** | Icon for the attachment button | `CometChatMessageComposer.style.attachmentImage = UIImage(systemName: "plus.circle")` |
+| **Attachment Image Tint** | Tint color for the attachment image | `CometChatMessageComposer.style.attachmentImageTint = CometChatTheme.iconColorSecondary` |
+| **Voice Recording Image** | Icon for the voice recording button | `CometChatMessageComposer.style.voiceRecordingImage = UIImage(systemName: "mic")?.withRenderingMode(.alwaysTemplate)` |
+| **Voice Recording Image Tint** | Tint color for the voice recording image | `CometChatMessageComposer.style.voiceRecordingImageTint = CometChatTheme.iconColorSecondary` |
+| **AI Image** | Icon for the AI button | `CometChatMessageComposer.style.aiImage = UIImage(named: "ai-image")` |
+| **AI Image Tint** | Tint color for the AI image | `CometChatMessageComposer.style.aiImageTint = CometChatTheme.iconColorSecondary` |
+| **Sticker Image** | Icon for the sticker button | `CometChatMessageComposer.style.stickerImage = UIImage(named: "sticker-image")` |
+| **Sticker Image Tint** | Tint color for the sticker image | `CometChatMessageComposer.style.stickerTint = CometChatTheme.iconColorSecondary` |
+| **Edit Preview Title Font** | Font for the title in the edit preview | `CometChatMessageComposer.style.editPreviewTitleTextFont = CometChatTypography.Body.regular` |
+| **Edit Preview Message Font** | Font for the message text in the edit preview | `CometChatMessageComposer.style.editPreviewMessageTextFont = CometChatTypography.Caption1.regular` |
+| **Edit Preview Title Color** | Text color for the title in the edit preview | `CometChatMessageComposer.style.editPreviewTitleTextColor = CometChatTheme.textColorPrimary` |
+| **Edit Preview Message Color** | Text color for the message in the edit preview | `CometChatMessageComposer.style.editPreviewMessageTextColor = CometChatTheme.textColorSecondary` |
+| **Edit Preview Background Color** | Background color for the edit preview | `CometChatMessageComposer.style.editPreviewBackgroundColor = CometChatTheme.backgroundColor03` |
+| **Edit Preview Corner Radius** | Corner radius for the edit preview | `CometChatMessageComposer.style.editPreviewCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r1)` |
+| **Edit Preview Border Color** | Border color for the edit preview | `CometChatMessageComposer.style.editPreviewBorderColor = .clear` |
+| **Edit Preview Border Width** | Border width for the edit preview | `CometChatMessageComposer.style.editPreviewBorderWidth = 0` |
+| **Edit Preview Close Icon** | Icon for closing the edit preview | `CometChatMessageComposer.style.editPreviewCloseIcon = UIImage(systemName: "xmark")?.withRenderingMode(.alwaysTemplate)` |
+| **Edit Preview Close Icon Tint** | Tint color for the close icon in the edit preview | `CometChatMessageComposer.style.editPreviewCloseIconTint = CometChatTheme.iconColorPrimary` |
+| **Info Icon** | Icon for the info button | `CometChatMessageComposer.style.infoIcon = UIImage(systemName: "info.circle")` |
+| **Info Icon Tint** | Tint color for the info icon | `CometChatMessageComposer.style.infoIconTint = CometChatTheme.errorColor` |
+| **Info Text Color** | Text color for the info text | `CometChatMessageComposer.style.infoTextColor = CometChatTheme.errorColor` |
+| **Info Text Font** | Font for the info text | `CometChatMessageComposer.style.infoTextFont = CometChatTypography.Caption1.regular` |
+| **Info Separator Color** | Color for the separator in the info section | `CometChatMessageComposer.style.infoSeparatorColor = CometChatTheme.borderColorLight` |
+| **Info Background Color** | Background color for the info section | `CometChatMessageComposer.style.infoBackgroundColor = CometChatTheme.backgroundColor02` |
+| **Info Corner Radius** | Corner radius for the info section | `CometChatMessageComposer.style.infoCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r1)` |
+| **Info Border Color** | Border color for the info section | `CometChatMessageComposer.style.infoBorderColor = .clear` |
+| **Info Border Width** | Border width for the info section | `CometChatMessageComposer.style.infoBorderWidth = 0` |
+
+
+#### 2. MediaRecorder Style
To customize the media recording styling, you can apply the `MediaRecorderStyle` to the `MessageComposer` component. For more details, please refer to [MediaRecorder](/ui-kit/ios/component-styling#media-recorder) styles.
@@ -218,9 +215,7 @@ CometChatMessageComposer.mediaRecorderStyle.stopButtonCornerRadius = .init(corne
CometChatMessageComposer.mediaRecorderStyle.recordingButtonCornerRadius = .init(cornerRadius: 8)
CometChatMessageComposer.mediaRecorderStyle.recordingButtonBackgroundColor = UIColor(hex: "#F44649")
```
-
-
**Instance level styling**
@@ -228,6 +223,7 @@ CometChatMessageComposer.mediaRecorderStyle.recordingButtonBackgroundColor = UIC
```swift
+// Create custom media recorder style
var mediaRecorderStyle = MediaRecorderStyle()
mediaRecorderStyle.deleteButtonCornerRadius = .init(cornerRadius: 8)
mediaRecorderStyle.pauseButtonCornerRadius = .init(cornerRadius: 8)
@@ -235,12 +231,11 @@ mediaRecorderStyle.stopButtonCornerRadius = .init(cornerRadius: 8)
mediaRecorderStyle.recordingButtonCornerRadius = .init(cornerRadius: 8)
mediaRecorderStyle.recordingButtonBackgroundColor = UIColor(hex: "#F44649")
+// Apply to message composer instance
let messageComposer = CometChatMessageComposer()
messageComposer.mediaRecorderStyle = mediaRecorderStyle
```
-
-
@@ -249,28 +244,29 @@ messageComposer.mediaRecorderStyle = mediaRecorderStyle
The following properties are exposed by Media Recorder Style:
-| **Property** | **Description** | **Code** |
-| ---------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| **backgroundColor** | Sets the background color of the media recorder. | `mediaRecorderStyle.backgroundColor: UIColor = CometChatTheme.backgroundColor01` |
-| **borderWidth** | Defines the width of the border for the media recorder. | `mediaRecorderStyle.borderWidth: CGFloat = 1` |
-| **borderColor** | Specifies the border color of the media recorder. | `mediaRecorderStyle.borderColor: UIColor = CometChatTheme.borderColorLight` |
-| **cornerRadius** | Configures the corner radius of the media recorder. | `mediaRecorderStyle.cornerRadius: CometChatCornerStyle? = nil` |
-| **recordingButtonBackgroundColor** | Sets the background color of the recording button. | `mediaRecorderStyle.recordingButtonBackgroundColor: UIColor = CometChatTheme.iconColorHighlight` |
-| **recordingButtonCornerRadius** | Configures the corner radius of the recording button. | `mediaRecorderStyle.recordingButtonCornerRadius: CometChatCornerStyle? = nil` |
-| **recordingButtonBorderWidth** | Sets the border width of the recording button. | `mediaRecorderStyle.recordingButtonBorderWidth: CGFloat = 0` |
-| **recordingButtonBorderColor** | Sets the border color of the recording button. | `mediaRecorderStyle.recordingButtonBorderColor: UIColor = .clear` |
-| **recordingButtonImageTintColor** | Specifies the tint color of the recording button image. | `mediaRecorderStyle.recordingButtonImageTintColor: UIColor = CometChatTheme.white` |
-| **recordingButtonImage** | The image displayed on the recording button. | `mediaRecorderStyle.recordingButtonImage: UIImage = UIImage(systemName: "mic.fill") ?? UIImage()` |
-| **deleteButtonBackgroundColor** | Sets the background color of the delete button. | `mediaRecorderStyle.deleteButtonBackgroundColor: UIColor = CometChatTheme.backgroundColor01` |
-| **deleteButtonImageTintColor** | Specifies the tint color of the delete button image. | `mediaRecorderStyle.deleteButtonImageTintColor: UIColor = CometChatTheme.iconColorSecondary` |
-| **deleteButtonImage** | The image displayed on the delete button. | `mediaRecorderStyle.deleteButtonImage: UIImage = UIImage(systemName: "trash.fill") ?? UIImage()` |
-| **deleteButtonCornerRadius** | Configures the corner radius of the delete button. | `mediaRecorderStyle.deleteButtonCornerRadius: CometChatCornerStyle? = nil` |
-| **deleteButtonBorderWidth** | Sets the border width of the delete button. | `mediaRecorderStyle.deleteButtonBorderWidth: CGFloat = 1` |
-| **deleteButtonBorderColor** | Specifies the border color of the delete button. | `mediaRecorderStyle.deleteButtonBorderColor: UIColor = CometChatTheme.borderColorLight` |
-
-##### 3. AI Options Style
-
-To customize the media recording styling, you can apply the `AIOptionsStyle` to the `MessageComposer` component. For more details, please refer to [MediaRecorder](/ui-kit/ios/component-styling#media-recorder) styles.
+| Property | Description | Code |
+|----------|-------------|------|
+| **backgroundColor** | Sets the background color of the media recorder | `mediaRecorderStyle.backgroundColor: UIColor = CometChatTheme.backgroundColor01` |
+| **borderWidth** | Defines the width of the border for the media recorder | `mediaRecorderStyle.borderWidth: CGFloat = 1` |
+| **borderColor** | Specifies the border color of the media recorder | `mediaRecorderStyle.borderColor: UIColor = CometChatTheme.borderColorLight` |
+| **cornerRadius** | Configures the corner radius of the media recorder | `mediaRecorderStyle.cornerRadius: CometChatCornerStyle? = nil` |
+| **recordingButtonBackgroundColor** | Sets the background color of the recording button | `mediaRecorderStyle.recordingButtonBackgroundColor: UIColor = CometChatTheme.iconColorHighlight` |
+| **recordingButtonCornerRadius** | Configures the corner radius of the recording button | `mediaRecorderStyle.recordingButtonCornerRadius: CometChatCornerStyle? = nil` |
+| **recordingButtonBorderWidth** | Sets the border width of the recording button | `mediaRecorderStyle.recordingButtonBorderWidth: CGFloat = 0` |
+| **recordingButtonBorderColor** | Sets the border color of the recording button | `mediaRecorderStyle.recordingButtonBorderColor: UIColor = .clear` |
+| **recordingButtonImageTintColor** | Specifies the tint color of the recording button image | `mediaRecorderStyle.recordingButtonImageTintColor: UIColor = CometChatTheme.white` |
+| **recordingButtonImage** | The image displayed on the recording button | `mediaRecorderStyle.recordingButtonImage: UIImage = UIImage(systemName: "mic.fill") ?? UIImage()` |
+| **deleteButtonBackgroundColor** | Sets the background color of the delete button | `mediaRecorderStyle.deleteButtonBackgroundColor: UIColor = CometChatTheme.backgroundColor01` |
+| **deleteButtonImageTintColor** | Specifies the tint color of the delete button image | `mediaRecorderStyle.deleteButtonImageTintColor: UIColor = CometChatTheme.iconColorSecondary` |
+| **deleteButtonImage** | The image displayed on the delete button | `mediaRecorderStyle.deleteButtonImage: UIImage = UIImage(systemName: "trash.fill") ?? UIImage()` |
+| **deleteButtonCornerRadius** | Configures the corner radius of the delete button | `mediaRecorderStyle.deleteButtonCornerRadius: CometChatCornerStyle? = nil` |
+| **deleteButtonBorderWidth** | Sets the border width of the delete button | `mediaRecorderStyle.deleteButtonBorderWidth: CGFloat = 1` |
+| **deleteButtonBorderColor** | Specifies the border color of the delete button | `mediaRecorderStyle.deleteButtonBorderColor: UIColor = CometChatTheme.borderColorLight` |
+
+
+#### 3. AI Options Style
+
+To customize the AI options styling, you can apply the `AIOptionsStyle` to the `MessageComposer` component. For more details, please refer to [AIOptions](/ui-kit/ios/component-styling#media-recorder) styles.
**Global level styling**
@@ -281,9 +277,7 @@ CometChatMessageComposer.aiOptionsStyle.backgroundColor = UIColor(hex: "#FFF9F5"
CometChatMessageComposer.aiOptionsStyle.textColor = .black
CometChatMessageComposer.aiOptionsStyle.aiImageTintColor = UIColor(hex: "#F76808")
```
-
-
**Instance level styling**
@@ -291,17 +285,17 @@ CometChatMessageComposer.aiOptionsStyle.aiImageTintColor = UIColor(hex: "#F76808
```swift
+// Create custom AI options style
var aIOptionsStyle = AIOptionsStyle()
aIOptionsStyle.backgroundColor = UIColor(hex: "#FFF9F5")
aIOptionsStyle.textColor = .black
aIOptionsStyle.aiImageTintColor = UIColor(hex: "#F76808")
+// Apply to message composer instance
let messageComposer = CometChatMessageComposer()
messageComposer.aiOptionsStyle = aIOptionsStyle
```
-
-
@@ -310,56 +304,57 @@ messageComposer.aiOptionsStyle = aIOptionsStyle
The following properties are exposed by AI Options Style:
-| **Property** | **Description** | **Code** |
-| ---------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| **errorViewTextFont** | Specifies the font used for the text in the error view. | `aIOptionsStyle.errorViewTextFont: UIFont?` |
-| **errorViewTextColor** | Sets the color of the text in the error view. | `aIOptionsStyle.errorViewTextColor: UIColor?` |
-| **emptyViewTextFont** | Specifies the font used for the text in the empty view. | `aIOptionsStyle.emptyViewTextFont: UIFont?` |
-| **emptyViewTextColor** | Sets the color of the text in the empty view. | `aIOptionsStyle.emptyViewTextColor: UIColor?` |
-| **aiImageTintColor** | Configures the tint color for AI-related images. | `aIOptionsStyle.aiImageTintColor: UIColor = CometChatTheme.iconColorHighlight` |
-| **textColor** | Sets the color of the text. | `aIOptionsStyle.textColor: UIColor = CometChatTheme.textColorPrimary` |
-| **textFont** | Specifies the font for the text. | `aIOptionsStyle.textFont: UIFont = CometChatTypography.Heading4.regular` |
-| **backgroundColor** | Sets the background color. | `aIOptionsStyle.backgroundColor: UIColor = CometChatTheme.backgroundColor01` |
-| **borderWidth** | Sets the width of the border. | `aIOptionsStyle.borderWidth: CGFloat = 0` |
-| **borderColor** | Sets the color of the border. | `aIOptionsStyle.borderColor: UIColor = .clear` |
-| **cornerRadius** | Configures the corner radius of the view. | `aIOptionsStyle.cornerRadius: CometChatCornerStyle? = nil` |
-
-***
+| Property | Description | Code |
+|----------|-------------|------|
+| **errorViewTextFont** | Specifies the font used for the text in the error view | `aIOptionsStyle.errorViewTextFont: UIFont?` |
+| **errorViewTextColor** | Sets the color of the text in the error view | `aIOptionsStyle.errorViewTextColor: UIColor?` |
+| **emptyViewTextFont** | Specifies the font used for the text in the empty view | `aIOptionsStyle.emptyViewTextFont: UIFont?` |
+| **emptyViewTextColor** | Sets the color of the text in the empty view | `aIOptionsStyle.emptyViewTextColor: UIColor?` |
+| **aiImageTintColor** | Configures the tint color for AI-related images | `aIOptionsStyle.aiImageTintColor: UIColor = CometChatTheme.iconColorHighlight` |
+| **textColor** | Sets the color of the text | `aIOptionsStyle.textColor: UIColor = CometChatTheme.textColorPrimary` |
+| **textFont** | Specifies the font for the text | `aIOptionsStyle.textFont: UIFont = CometChatTypography.Heading4.regular` |
+| **backgroundColor** | Sets the background color | `aIOptionsStyle.backgroundColor: UIColor = CometChatTheme.backgroundColor01` |
+| **borderWidth** | Sets the width of the border | `aIOptionsStyle.borderWidth: CGFloat = 0` |
+| **borderColor** | Sets the color of the border | `aIOptionsStyle.borderColor: UIColor = .clear` |
+| **cornerRadius** | Configures the corner radius of the view | `aIOptionsStyle.cornerRadius: CometChatCornerStyle? = nil` |
+
+---
### 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 |
-| --------------------------------- | -------------------------------------------------------- | ------------------------------------------ |
-| setInitialComposerText | Sets the initial text in the composer when it loads. | `setInitialComposerText("Hello")` |
-| disableTypingEvents | Disables sending typing indicators when the user types. | `disableTypingEvents = true` |
-| disableMentions | Disables the mention feature in the composer. | `disableMentions = true` |
-| hideImageAttachmentOption | Hides the option to attach images. | `hideImageAttachmentOption = true` |
-| hideVideoAttachmentOption | Hides the option to attach videos. | `hideVideoAttachmentOption = true` |
-| hideAudioAttachmentOption | Hides the option to attach audio files. | `hideAudioAttachmentOption = true` |
-| hideFileAttachmentOption | Hides the option to attach files. | `hideFileAttachmentOption = true` |
-| hidePollsOption | Hides the option to create polls. | `hidePollsOption = true` |
-| hideCollaborativeDocumentOption | Hides the option for collaborative documents. | `hideCollaborativeDocumentOption = true` |
-| hideCollaborativeWhiteboardOption | Hides the option for collaborative whiteboards. | `hideCollaborativeWhiteboardOption = true` |
-| hideAttachmentButton | Hides the attachment button in the composer. | `hideAttachmentButton = true` |
-| hideVoiceRecordingButton | Hides the voice recording button. | `hideVoiceRecordingButton = true` |
-| hideStickersButton | Hides the stickers button. | `hideStickersButton = true` |
-| hideSendButton | Hides the send button. | `hideSendButton = true` |
-| setUser | Sets the user for direct messaging. | `set(user: User)` |
-| setGroup | Sets the group for group messaging. | `set(group: Group)` |
-| setParentMessageId | Sets the parent message ID for replying in a thread. | `set(parentMessageId: 12345)` |
-| setMaxLine | Sets the maximum number of lines for the composer input. | `set(maxLine: 3)` |
-| setCustomSoundForMessages | Sets a custom sound for sending messages. | `set(customSoundForMessages: URL?)` |
-| disableSoundForMessages | Disables sound while sending messages. | `disableSoundForMessages = true` |
-
-***
+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 that the message composer offers:
+
+| Property | Description | Code |
+|----------|-------------|------|
+| setInitialComposerText | Sets the initial text in the composer when it loads | `setInitialComposerText("Hello")` |
+| disableTypingEvents | Disables sending typing indicators when the user types | `disableTypingEvents = true` |
+| disableMentions | Disables the mention feature in the composer | `disableMentions = true` |
+| hideImageAttachmentOption | Hides the option to attach images | `hideImageAttachmentOption = true` |
+| hideVideoAttachmentOption | Hides the option to attach videos | `hideVideoAttachmentOption = true` |
+| hideAudioAttachmentOption | Hides the option to attach audio files | `hideAudioAttachmentOption = true` |
+| hideFileAttachmentOption | Hides the option to attach files | `hideFileAttachmentOption = true` |
+| hidePollsOption | Hides the option to create polls | `hidePollsOption = true` |
+| hideCollaborativeDocumentOption | Hides the option for collaborative documents | `hideCollaborativeDocumentOption = true` |
+| hideCollaborativeWhiteboardOption | Hides the option for collaborative whiteboards | `hideCollaborativeWhiteboardOption = true` |
+| hideAttachmentButton | Hides the attachment button in the composer | `hideAttachmentButton = true` |
+| hideVoiceRecordingButton | Hides the voice recording button | `hideVoiceRecordingButton = true` |
+| hideStickersButton | Hides the stickers button | `hideStickersButton = true` |
+| hideSendButton | Hides the send button | `hideSendButton = true` |
+| setUser | Sets the user for direct messaging | `set(user: User)` |
+| setGroup | Sets the group for group messaging | `set(group: Group)` |
+| setParentMessageId | Sets the parent message ID for replying in a thread | `set(parentMessageId: 12345)` |
+| setMaxLine | Sets the maximum number of lines for the composer input | `set(maxLine: 3)` |
+| setCustomSoundForMessages | Sets a custom sound for sending messages | `set(customSoundForMessages: URL?)` |
+| disableSoundForMessages | Disables sound while sending messages | `disableSoundForMessages = true` |
+
+
+---
### 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.
+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 own views, layouts, and UI elements and then incorporate those into the component.
#### AttachmentOptions
@@ -373,9 +368,7 @@ messageComposer.set(attachmentOptions: { user, group, controller in
return [CometChatMessageComposerAction]
})
```
-
-
**Demonstration**
@@ -384,63 +377,69 @@ messageComposer.set(attachmentOptions: { user, group, controller in
-In this example, we are overriding the existing MessageComposerActions List with Capture Photo actions.
+In this example, we are overriding the existing MessageComposerActions List with custom actions:
```swift
-let messageComposer = CometChatMessageComposer()
+let messageComposer = CometChatMessageComposer()
messageComposer.setAttachmentOptions { user, group, controller in
+ // Create custom action 1
let customComposerAction1 = CometChatMessageComposerAction(
- id: "customAction1",
- text: "Custom Option 1",
- startIcon: UIImage(systemName: "play_circle"),
- startIconTint: .black,
- textColor: .black,
- onActionClick: {
- print("Custom Action 1 clicked!")
- }
- )
+ id: "customAction1",
+ text: "Custom Option 1",
+ startIcon: UIImage(systemName: "play_circle"),
+ startIconTint: .black,
+ textColor: .black,
+ onActionClick: {
+ print("Custom Action 1 clicked!")
+ }
+ )
+
+ // Create custom action 2
let customComposerAction2 = CometChatMessageComposerAction(
- id: "customAction2",
- text: "Custom Option 2",
- startIcon: UIImage(systemName: "add_box"),
- startIconTint: .black,
- textColor: .black,
- onActionClick: {
- print("Custom Action 2 clicked!")
- }
- )
+ id: "customAction2",
+ text: "Custom Option 2",
+ startIcon: UIImage(systemName: "add_box"),
+ startIconTint: .black,
+ textColor: .black,
+ onActionClick: {
+ print("Custom Action 2 clicked!")
+ }
+ )
+
+ // Create custom action 3
let customComposerAction3 = CometChatMessageComposerAction(
- id: "customAction3",
- text: "Custom Option 3",
- startIcon: UIImage(systemName: "change_circle"),
- startIconTint: .black,
- textColor: .black,
- onActionClick: {
- print("Custom Action 3 clicked!")
- }
- )
+ id: "customAction3",
+ text: "Custom Option 3",
+ startIcon: UIImage(systemName: "change_circle"),
+ startIconTint: .black,
+ textColor: .black,
+ onActionClick: {
+ print("Custom Action 3 clicked!")
+ }
+ )
+
+ // Create custom action 4
let customComposerAction4 = CometChatMessageComposerAction(
- id: "customAction4",
- text: "Custom Option 4",
- startIcon: UIImage(systemName: "sunny"),
- startIconTint: .black,
- textColor: .black,
- onActionClick: {
- print("Custom Action 4 clicked!")
- }
- )
-
- return [customComposerAction1 , customComposerAction2, customComposerAction3, customComposerAction4]
-}
+ id: "customAction4",
+ text: "Custom Option 4",
+ startIcon: UIImage(systemName: "sunny"),
+ startIconTint: .black,
+ textColor: .black,
+ onActionClick: {
+ print("Custom Action 4 clicked!")
+ }
+ )
+
+ return [customComposerAction1, customComposerAction2, customComposerAction3, customComposerAction4]
+}
```
-
-
-***
+
+---
#### SendButtonView
@@ -449,15 +448,13 @@ By using `set(sendButtonView:)`, you can set a custom send button for the Messag
```swift
-let messageComposer = CustomSendButton()
+let messageComposer = CometChatMessageComposer()
messageComposer.set(sendButtonView: { user, group in
let view = CustomSendButton()
return view
})
```
-
-
**Demonstration**
@@ -483,7 +480,8 @@ class CustomSendButton: UIView {
return button
}()
- var onPlayTapped: (() -> Void)? // Closure to handle button tap
+ // Closure to handle button tap
+ var onPlayTapped: (() -> Void)?
override init(frame: CGRect) {
super.init(frame: frame)
@@ -509,16 +507,14 @@ class CustomSendButton: UIView {
}
@objc private func playButtonTapped() {
- onPlayTapped?() // Executes the closure when tapped
+ onPlayTapped?()
}
}
```
-
-
-***
+---
#### HeaderView
@@ -533,9 +529,7 @@ messageComposer.set(headerView: { user, group in
return view
})
```
-
-
**Demonstration**
@@ -553,7 +547,7 @@ class CustomHeaderView: UIView {
private let iconImageView: UIImageView = {
let imageView = UIImageView()
- imageView.image = UIImage(systemName: "bell.slash.fill") // Replace with the actual image if needed
+ imageView.image = UIImage(systemName: "bell.slash.fill")
imageView.tintColor = .purple
imageView.contentMode = .scaleAspectFit
return imageView
@@ -599,63 +593,66 @@ class CustomHeaderView: UIView {
}
}
```
-
-
-***
-#### SetTextFormatters
+---
-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 check out [CometChatMentionsFormatter](/ui-kit/ios/mentions-formatter-guide)
+#### SetTextFormatters
-**Example**
+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, check out [CometChatMentionsFormatter](/ui-kit/ios/mentions-formatter-guide).
```swift
+// Create custom composer text style for mentions
let composerTextStyle = MentionTextStyle()
-.set(textBackgroundColor: .white)
-.set(textColor: UIColor.black)
-.set(textFont: UIFont.systemFont(ofSize: 18, weight: .heavy))
-.set(loggedInUserTextColor: UIColor.systemTeal)
-.set(loggedInUserTextFont: UIFont.systemFont(ofSize: 18, weight: .bold))
+ .set(textBackgroundColor: .white)
+ .set(textColor: UIColor.black)
+ .set(textFont: UIFont.systemFont(ofSize: 18, weight: .heavy))
+ .set(loggedInUserTextColor: UIColor.systemTeal)
+ .set(loggedInUserTextFont: UIFont.systemFont(ofSize: 18, weight: .bold))
+// Create custom mention formatter with the style
let customMentionFormatter = CometChatMentionsFormatter()
-.set(composerTextStyle: composerTextStyle)
+ .set(composerTextStyle: composerTextStyle)
+// Configure message composer with the formatter
let messageComposerConfiguration = MessageComposerConfiguration()
-.set(textFormatter: [customMentionFormatter])
+ .set(textFormatter: [customMentionFormatter])
+// Apply to CometChatMessages
let cometChatMessages = CometChatMessages()
-.set(user: user)
-.set(messageComposerConfiguration: messageComposerConfiguration)
+ .set(user: user)
+ .set(messageComposerConfiguration: messageComposerConfiguration)
```
-
-
-***
+---
-
To ensure that the `MessageComposer` is properly configured, passing the controller is mandatory.
-* Swift
-
```swift
let composerView = CometChatMessageComposer()
composerView.set(controller: UIViewController) // Passing the controller is required
```
-
-***
+---
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
+
+---
+
+## Next Steps
+
+- [Message List](/ui-kit/ios/message-list) — Display and customize the message list
+- [Message Header](/ui-kit/ios/message-header) — Customize the conversation header
+- [Mentions Formatter](/ui-kit/ios/mentions-formatter-guide) — Configure @mention formatting
+
+---
diff --git a/ui-kit/ios/message-header.mdx b/ui-kit/ios/message-header.mdx
index 81973492..fab93ed1 100644
--- a/ui-kit/ios/message-header.mdx
+++ b/ui-kit/ios/message-header.mdx
@@ -1,10 +1,12 @@
---
title: "Message Header"
+sidebarTitle: "Message Header"
+description: "Display user or group details with typing indicators and navigation controls in CometChat UI Kit for iOS"
---
## Overview
-`MessageHeader` is a [Component](/ui-kit/ios/components-overview#components) that showcases the [User](/sdk/ios/users-overview) or [Group](/sdk/ios/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use.
+`MessageHeader` is a [Component](/ui-kit/ios/components-overview#components) that showcases the [User](/sdk/ios/users-overview) or [Group](/sdk/ios/groups-overview) details in the toolbar. It also presents a typing indicator and a back navigation button for ease of use.
@@ -12,85 +14,89 @@ title: "Message Header"
The `MessageHeader` is comprised of the following components:
-| Components | Description |
-| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| [ListItem Component](/ui-kit/ios/list-item) | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one |
+| Components | Description |
+|------------|-------------|
+| ListItem | This component's view consists of avatar, status indicator, title, and subtitle. The fields are mapped with the SDK's [User](/sdk/ios/users-overview) and [Group](/sdk/ios/groups-overview) class. |
+| Back Button | Allows users to navigate back from the current activity or screen to the previous one |
+
+---
## Usage
### Integration
-You can add `MessageHeader` component directly by setting the user.
+You can add the `MessageHeader` component directly by setting the user:
-```ruby Swift
-// syntax for set(user: User)
-messageHeader.set(user: user) // The object which is going to be rendered in the data item
+```swift
+// Set the user for the message header
+messageHeader.set(user: user)
```
+---
+
### Actions
[Actions](/ui-kit/ios/components-overview#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.
The `MessageHeader` component does not have any exposed actions.
-##### 1. set(onBack:)
+#### 1. set(onBack:)
-This `set(onBack:)` method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatMessageHeader.
+The `set(onBack:)` method becomes valuable when you need to override the action triggered upon pressing the back button in CometChatMessageHeader.
```swift
cometChatMessageHeader.set(onBack: {
- // Override on back
+ // Handle back button action
})
```
-
-
-***
+---
-##### 2. set(onError:)
+#### 2. set(onError:)
-This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatMessageHeader.
+This method proves helpful when you need to customize the action taken upon encountering an error in CometChatMessageHeader.
```swift
cometChatMessageHeader.set(onError: { error in
- // Override on error
+ // Handle error
})
```
-
-
-***
+---
### 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.
+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 more customization. Filters can be applied using `RequestBuilders` of the Chat SDK.
The `MessageHeader` component does not have any exposed filters.
+---
+
### 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.
+[Events](/ui-kit/ios/components-overview#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 `MessageHeader` component does not produce any events.
+---
+
## 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
-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.
+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. MessageHeader Style
+#### 1. MessageHeader Style
To customize the appearance, you can assign a `MessageHeaderStyle` object to the `MessageHeader` component.
@@ -99,18 +105,18 @@ To customize the appearance, you can assign a `MessageHeaderStyle` object to the
```swift
+// Create custom avatar style
let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.textFont = UIFont(name: "Times-New-Roman", size: 18)
-
+
+// Apply global message header styling
CometChatMessageHeader.style.titleTextColor = UIColor(hex: "#F76808")
CometChatMessageHeader.style.titleTextFont = UIFont(name: "Times-New-Roman", size: 16)
CometChatMessageHeader.style.subtitleTextFont = UIFont(name: "Times-New-Roman", size: 12)
CometChatMessageHeader.style.avatarStyle = customAvatarStyle
```
-
-
**Instance level styling**
@@ -118,71 +124,73 @@ CometChatMessageHeader.style.avatarStyle = customAvatarStyle
```swift
+// Create custom avatar style
let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.textFont = UIFont(name: "Times-New-Roman", size: 18)
-
+
+// Create custom message header style
let messageHeaderStyle = MessageHeaderStyle()
messageHeaderStyle.titleTextColor = UIColor(hex: "#F76808")
messageHeaderStyle.titleTextFont = UIFont(name: "Times-New-Roman", size: 16)
messageHeaderStyle.subtitleTextFont = UIFont(name: "Times-New-Roman", size: 12)
-
+
+// Apply styles to instance
let messageHeader = CometChatMessageHeader()
messageHeader.style = messageHeaderStyle
messageHeader.avatarStyle = customAvatarStyle
```
-
-
+
The properties exposed by `MessageHeaderStyle` are as follows:
-| **Property** | **Description** | **Code** |
-| --------------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| **Title Text Color** | Used to set the text color of the header title. | `CometChatMessageHeader.style.titleTextColor = UIColor.black` |
-| **Title Text Font** | Used to set the font style of the header title. | `CometChatMessageHeader.style.titleTextFont = UIFont.boldSystemFont(ofSize: 18)` |
-| **Subtitle Text Color** | Used to set the text color of the subtitle in the header. | `CometChatMessageHeader.style.subtitleTextColor = UIColor.gray` |
-| **Subtitle Text Font** | Used to set the font style of the subtitle in the header. | `CometChatMessageHeader.style.subtitleTextFont = UIFont.systemFont(ofSize: 14)` |
-| **Back Button Image Tint Color** | Used to set the tint color of the back button image in the header. | `CometChatMessageHeader.style.backButtonImageTintColor = UIColor.blue` |
-| **Private Group Badge Tint Color** | Used to set the tint color of the private group badge in the header. | `CometChatMessageHeader.style.privateGroupBadgeImageTintColor = UIColor.green` |
-| **Password-Protected Badge Tint Color** | Used to set the tint color of the password-protected group badge in the header. | `CometChatMessageHeader.style.passwordProtectedGroupBadgeImageTintColor = UIColor.orange` |
-| **Private Group Background Color** | Used to set the background color of the private group badge. | `CometChatMessageHeader.style.privateGroupImageBackgroundColor = UIColor.lightGray` |
-| **Password-Protected Background Color** | Used to set the background color of the password-protected group badge. | `CometChatMessageHeader.style.passwordGroupImageBackgroundColor = UIColor.red` |
-| **Group Image Background Color** | Used to set the background color for group icons in the header. | `CometChatMessageHeader.style.groupImageBackgroundColor = UIColor.clear` |
-| **Avatar Style** | Used to customize the appearance of the avatar in the header. | `CometChatMessageHeader.style.avatarStyle = customAvatarStyle` |
-| **Background Color** | Used to set the background color of the header. | `CometChatMessageHeader.style.backgroundColor = UIColor.white` |
-| **Corner Radius** | Used to set the corner radius of the header. | `CometChatMessageHeader.style.cornerRadius = CometChatCornerStyle(cornerRadius: 8)` |
-| **Border Width** | Used to set the border width of the header. | `CometChatMessageHeader.style.borderWidth = 2` |
-| **Border Color** | Used to set the border color of the header. | `CometChatMessageHeader.style.borderColor = UIColor.gray` |
-| **Back Button Icon** | Used to set a custom icon for the back button. | `CometChatMessageHeader.style.backButtonIcon = UIImage(named: "customBackIcon")` |
-| **Private Group Icon** | Used to set a custom icon for private groups. | `CometChatMessageHeader.style.privateGroupIcon = UIImage(named: "privateIcon")` |
-| **Protected Group Icon** | Used to set a custom icon for password-protected groups. | `CometChatMessageHeader.style.protectedGroupIcon = UIImage(named: "protectedIcon")` |
-| **Background Image** | Used to set a background image for the header. | `CometChatMessageHeader.style.backgroundImage = UIImage(named: "headerBackground")` |
-| **New Chat Icon** | Sets a custom icon for the new chat button for AI agent. | `CometChatAIAssistantChatHistory.newChatIcon = UIImage(named: "iconName")` |
-| **Chat History Icon** | Sets a custom icon for the chat history button for AI agent. | `CometChatAIAssistantChatHistory.chatHistoryIcon = UIImage(named: "iconName")` |
-
-##### 2. Avatar Style
-
-If you want to apply customized styles to the `Avatar` component within the `MessageHeader` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/ios/component-styling#avatar#methods).
+| Property | Description | Code |
+|----------|-------------|------|
+| **Title Text Color** | Sets the text color of the header title | `CometChatMessageHeader.style.titleTextColor = UIColor.black` |
+| **Title Text Font** | Sets the font style of the header title | `CometChatMessageHeader.style.titleTextFont = UIFont.boldSystemFont(ofSize: 18)` |
+| **Subtitle Text Color** | Sets the text color of the subtitle in the header | `CometChatMessageHeader.style.subtitleTextColor = UIColor.gray` |
+| **Subtitle Text Font** | Sets the font style of the subtitle in the header | `CometChatMessageHeader.style.subtitleTextFont = UIFont.systemFont(ofSize: 14)` |
+| **Back Button Image Tint Color** | Sets the tint color of the back button image | `CometChatMessageHeader.style.backButtonImageTintColor = UIColor.blue` |
+| **Private Group Badge Tint Color** | Sets the tint color of the private group badge | `CometChatMessageHeader.style.privateGroupBadgeImageTintColor = UIColor.green` |
+| **Password-Protected Badge Tint Color** | Sets the tint color of the password-protected group badge | `CometChatMessageHeader.style.passwordProtectedGroupBadgeImageTintColor = UIColor.orange` |
+| **Private Group Background Color** | Sets the background color of the private group badge | `CometChatMessageHeader.style.privateGroupImageBackgroundColor = UIColor.lightGray` |
+| **Password-Protected Background Color** | Sets the background color of the password-protected group badge | `CometChatMessageHeader.style.passwordGroupImageBackgroundColor = UIColor.red` |
+| **Group Image Background Color** | Sets the background color for group icons in the header | `CometChatMessageHeader.style.groupImageBackgroundColor = UIColor.clear` |
+| **Avatar Style** | Customizes the appearance of the avatar in the header | `CometChatMessageHeader.style.avatarStyle = customAvatarStyle` |
+| **Background Color** | Sets the background color of the header | `CometChatMessageHeader.style.backgroundColor = UIColor.white` |
+| **Corner Radius** | Sets the corner radius of the header | `CometChatMessageHeader.style.cornerRadius = CometChatCornerStyle(cornerRadius: 8)` |
+| **Border Width** | Sets the border width of the header | `CometChatMessageHeader.style.borderWidth = 2` |
+| **Border Color** | Sets the border color of the header | `CometChatMessageHeader.style.borderColor = UIColor.gray` |
+| **Back Button Icon** | Sets a custom icon for the back button | `CometChatMessageHeader.style.backButtonIcon = UIImage(named: "customBackIcon")` |
+| **Private Group Icon** | Sets a custom icon for private groups | `CometChatMessageHeader.style.privateGroupIcon = UIImage(named: "privateIcon")` |
+| **Protected Group Icon** | Sets a custom icon for password-protected groups | `CometChatMessageHeader.style.protectedGroupIcon = UIImage(named: "protectedIcon")` |
+| **Background Image** | Sets a background image for the header | `CometChatMessageHeader.style.backgroundImage = UIImage(named: "headerBackground")` |
+| **New Chat Icon** | Sets a custom icon for the new chat button (AI agent) | `CometChatAIAssistantChatHistory.newChatIcon = UIImage(named: "iconName")` |
+| **Chat History Icon** | Sets a custom icon for the chat history button (AI agent) | `CometChatAIAssistantChatHistory.chatHistoryIcon = UIImage(named: "iconName")` |
+
+#### 2. Avatar Style
+
+If you want to apply customized styles to the `Avatar` component within the `MessageHeader` Component, you can use the following code snippet. For more information, refer to [Avatar Styles](/ui-kit/ios/component-styling#avatar#methods).
**Global level styling**
```swift
+// Create custom avatar style with rounded corners
let customAvatarStyle = AvatarStyle()
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-
+
+// Apply globally
CometChatMessageHeader.style.avatarStyle = customAvatarStyle
```
-
-
**Instance level styling**
@@ -190,79 +198,80 @@ CometChatMessageHeader.style.avatarStyle = customAvatarStyle
```swift
+// Create custom avatar style
let customAvatarStyle = AvatarStyle()
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
-
+
+// Apply to instance
let messageHeader = CometChatMessageHeader()
messageHeader.avatarStyle = customAvatarStyle
```
-
-
-***
+---
### 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 change text, set custom icons, and toggle the visibility of UI elements.
-Below is a list of customizations along with corresponding code snippets
-
-| Method | Description | Code |
-| ------------------- | ---------------------------------------------------------------------- | ---------------------------- |
-| set(user:User) | Sets message header for CometChat user. | `.set(user:User)` |
-| set(group:Group) | Sets message header for CometChat group. | `.set(group:Group)` |
-| hideBackButton | Hides the back button of message header. | `hideBackButton = true` |
-| hideUserStatus | Hides or shows the user status of user(online/offline/last active at). | `hideUserStatus = true` |
-| hideVideoCallButton | Hides the video call button. | `hideVideoCallButton = true` |
-| hideVoiceCallButton | Hides the voice call button. | `hideVoiceCallButton = true` |
-| hideChatHistoryButton | Hides the chat history button in the component. | `CometChatAIAssistantChatHistory.hideChatHistoryButton = true` |
-| hideNewChatButton | Hides the new chat button in the component for AI agent. | `CometChatAIAssistantChatHistory.hideNewChatButton = true` |
-| onNewChatButtonClicked | Used to handle actions when the “New Chat” button is clicked. | `CometChatAIAssistantChatHistory.set(onNewChatButtonClicked: { user in })` |
-| onMessageClicked | Used to handle actions when a message is clicked. | `CometChatAIAssistantChatHistory.set(onMessageClicked: { message in })` |
+Below is a list of customizations along with corresponding code snippets:
+
+| Method | Description | Code |
+|--------|-------------|------|
+| set(user:User) | Sets message header for CometChat user | `.set(user:User)` |
+| set(group:Group) | Sets message header for CometChat group | `.set(group:Group)` |
+| hideBackButton | Hides the back button of message header | `hideBackButton = true` |
+| hideUserStatus | Hides or shows the user status (online/offline/last active at) | `hideUserStatus = true` |
+| hideVideoCallButton | Hides the video call button | `hideVideoCallButton = true` |
+| hideVoiceCallButton | Hides the voice call button | `hideVoiceCallButton = true` |
+| hideChatHistoryButton | Hides the chat history button in the component | `CometChatAIAssistantChatHistory.hideChatHistoryButton = true` |
+| hideNewChatButton | Hides the new chat button in the component (AI agent) | `CometChatAIAssistantChatHistory.hideNewChatButton = true` |
+| onNewChatButtonClicked | Handles actions when the "New Chat" button is clicked | `CometChatAIAssistantChatHistory.set(onNewChatButtonClicked: { user in })` |
+| onMessageClicked | Handles actions when a message is clicked | `CometChatAIAssistantChatHistory.set(onMessageClicked: { message in })` |
-***
+---
### 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.
+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 own views, layouts, and UI elements and then incorporate those into the component.
#### Date Time Formatter
-The **CometChatMessageHeader** component supports full customization of how date and time are displayed using the [CometChatDateTimeFormatter](/ui-kit/ios/localize#datetimeformatter).
+The `CometChatMessageHeader` component supports full customization of how date and time are displayed using the [CometChatDateTimeFormatter](/ui-kit/ios/localize#datetimeformatter).
-This enables developers to localize, format, or personalize the date and time strings shown next to the message header such as “Today”, “Yesterday”, “12:45 PM”, etc.
+This enables developers to localize, format, or personalize the date and time strings shown next to the message header such as "Today", "Yesterday", "12:45 PM", etc.
-1. Component-Level (Global)
+**1. Component-Level (Global)**
```swift
+// Customize time format
CometChatMessageHeader.dateTimeFormatter.time = { timestamp in
return "Last seen at " + DateFormatter.localizedString(from: Date(timeIntervalSince1970: TimeInterval(timestamp)), dateStyle: .none, timeStyle: .short)
}
+// Customize today format
CometChatMessageHeader.dateTimeFormatter.today = { timestamp in
return "Last seen: Today • \(formattedTime(from: timestamp))"
}
-CometChatMessageHeader.dateTimeFormatter.otherDay = { timestamp in // This will display older dates as "24 Apr 2025" instead of the default relative format.
+// Customize older dates format
+CometChatMessageHeader.dateTimeFormatter.otherDay = { timestamp in
let formatter = DateFormatter()
formatter.dateFormat = "dd MMM yyyy"
return formatter.string(from: Date(timeIntervalSince1970: TimeInterval(timestamp)))
}
```
-
-
-2. Instance-Level (Local)
+**2. Instance-Level (Local)**
@@ -272,28 +281,26 @@ messageHeader.dateTimeFormatter.yesterday = { timestamp in
return "Yesterday at " + formattedTime(from: timestamp)
}
```
-
-
-##### Available closures
+##### Available Closures
-| Property | Description | Code |
-| --------- | ------------------------------------------------------------------- | -------------------------------------------------------------- |
-| time | Called to format a timestamp as a standard time (e.g., "12:30 PM"). | `CometChatMessageHeader.dateTimeFormatter.time = { ... }` |
-| today | Called when rendering messages sent today. | `CometChatMessageHeader.dateTimeFormatter.today = { ... }` |
-| yesterday | Called for yesterday's messages. | `CometChatMessageHeader.dateTimeFormatter.yesterday = { ... }` |
-| lastweek | Called for messages within the last week. | `CometChatMessageHeader.dateTimeFormatter.lastweek = { ... }` |
-| otherDay | Called for dates older than last week. | `CometChatMessageHeader.dateTimeFormatter.otherDay = { ... }` |
-| minute | Called when referring to "a minute ago". | `CometChatMessageHeader.dateTimeFormatter.minute = { ... }` |
-| minutes | Called for "x minutes ago". | `CometChatMessageHeader.dateTimeFormatter.minutes = { ... }` |
-| hour | Called for "an hour ago". | `CometChatMessageHeader.dateTimeFormatter.hour = { ... }` |
-| hours | Called for "x hours ago". | `CometChatMessageHeader.dateTimeFormatter.hours = { ... }` |
+| Property | Description | Code |
+|----------|-------------|------|
+| time | Called to format a timestamp as a standard time (e.g., "12:30 PM") | `CometChatMessageHeader.dateTimeFormatter.time = { ... }` |
+| today | Called when rendering messages sent today | `CometChatMessageHeader.dateTimeFormatter.today = { ... }` |
+| yesterday | Called for yesterday's messages | `CometChatMessageHeader.dateTimeFormatter.yesterday = { ... }` |
+| lastweek | Called for messages within the last week | `CometChatMessageHeader.dateTimeFormatter.lastweek = { ... }` |
+| otherDay | Called for dates older than last week | `CometChatMessageHeader.dateTimeFormatter.otherDay = { ... }` |
+| minute | Called when referring to "a minute ago" | `CometChatMessageHeader.dateTimeFormatter.minute = { ... }` |
+| minutes | Called for "x minutes ago" | `CometChatMessageHeader.dateTimeFormatter.minutes = { ... }` |
+| hour | Called for "an hour ago" | `CometChatMessageHeader.dateTimeFormatter.hour = { ... }` |
+| hours | Called for "x hours ago" | `CometChatMessageHeader.dateTimeFormatter.hours = { ... }` |
Each closure receives a timestamp (Int, representing UNIX time) and must return a String representing the formatted time.
-***
+---
#### SetListItemView
@@ -308,20 +315,20 @@ cometChatMessageHeader.set(listItemView: { user, group in
return view
})
```
-
-
-Demonstration
+**Demonstration**
-You can create a `CustomListItemView` as a custom `UIView`. Which we will inflate in `setListItemView()`
+You can create a `CustomListItemView` as a custom `UIView` which will be inflated in `setListItemView()`:
-```swift swift
+
+
+```swift
import UIKit
class CustomListItemView: UIView {
@@ -440,12 +447,15 @@ class CustomListItemView: UIView {
}
}
```
+
+
-***
+
+---
#### SetLeadingView
-You can modify the leading view of a group cell using .set(leadingView:).
+You can modify the leading view of a group cell using `.set(leadingView:)`.
@@ -453,20 +463,18 @@ You can modify the leading view of a group cell using .set(leadingView:).
cometChatMessageHeader.set(leadingView: { user, group in
let view = CustomLeadingView()
return view
-})
+})
```
-
-
-Demonstration
+**Demonstration**
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
+You can create a `CustomLeadingView` as a custom `UIView` which will be inflated in `setLeadingView()`:
@@ -480,7 +488,7 @@ class CustomLeadingView: UIView {
imageView.contentMode = .scaleAspectFill
imageView.layer.cornerRadius = 20
imageView.clipsToBounds = true
- imageView.backgroundColor = .lightGray // Placeholder color
+ imageView.backgroundColor = .lightGray
imageView.image = UIImage(systemName: "person.fill")
return imageView
}()
@@ -530,16 +538,14 @@ class CustomLeadingView: UIView {
}
}
```
-
-
-***
+---
#### SetTitleView
-You can customize the title view of a group cell using .set(titleView:).
+You can customize the title view of a group cell using `.set(titleView:)`.
@@ -547,25 +553,23 @@ You can customize the title view of a group cell using .set(titleView:).
cometChatMessageHeader.set(titleView: { user, group in
let view = CustomTitleView()
return view
-})
+})
```
-
-
-Demonstration
+**Demonstration**
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView` which will be inflated in `setTitleView()`:
```swift
- class CustomTitleView: UIView {
+class CustomTitleView: UIView {
private let titleLabel: UILabel = {
let label = UILabel()
@@ -632,16 +636,14 @@ You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate i
}
}
```
-
-
-***
+---
#### SetTrailView
-You can modify the trailing view of a message header using .set(trailView:).
+You can modify the trailing view of a message header using `.set(trailView:)`.
@@ -649,20 +651,18 @@ You can modify the trailing view of a message header using .set(trailView:).
cometChatMessageHeader.set(trailView: { user, group in
let view = CustomTrailView()
return view
-})
+})
```
-
-
-Demonstration
+**Demonstration**
-You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`
+You can create a `CustomTrailView` as a custom `UIView` which will be inflated in `setTrailView()`:
@@ -705,7 +705,6 @@ class CustomTrailView: UIView {
}
private func setupView() {
-
let buttonsStack = UIStackView(arrangedSubviews: [videoCallButton, callButton])
buttonsStack.axis = .horizontal
buttonsStack.spacing = 16
@@ -725,18 +724,15 @@ class CustomTrailView: UIView {
])
}
}
-
```
-
-
-***
+---
#### SetSubTitleView
-You can customize the subtitle view for each group item to meet your requirements
+You can customize the subtitle view for each group item to meet your requirements.
@@ -746,20 +742,16 @@ cometChatMessageHeader.set(subtitleView: { user, group in
return view
})
```
-
-
-**Example**
-
-Demonstration
+**Demonstration**
-You can seamlessly integrate this `CustomSubtitleView` UIView file into the `.set(subtitleView:)` method within CometChatMessageHeader.
+You can seamlessly integrate this `CustomSubtitleView` UIView file into the `.set(subtitleView:)` method within CometChatMessageHeader:
@@ -781,22 +773,26 @@ class CustomSubtitleView: UILabel {
}
}
```
-
-
-***
+---
-
To ensure that the `MessageHeader` is properly configured, passing the controller is mandatory.
-* Swift
-
```swift
let headerView = CometChatMessageHeader()
headerView.set(controller: UIViewController) // Passing the controller is required
```
-
+
+---
+
+## Next Steps
+
+- [Message List](/ui-kit/ios/message-list) — Display and customize the message list
+- [Message Composer](/ui-kit/ios/message-composer) — Customize the message input component
+- [Conversations](/ui-kit/ios/conversations) — Manage conversation lists
+
+---
diff --git a/ui-kit/ios/message-list.mdx b/ui-kit/ios/message-list.mdx
index 0deb40de..d39830ce 100644
--- a/ui-kit/ios/message-list.mdx
+++ b/ui-kit/ios/message-list.mdx
@@ -1,5 +1,7 @@
---
title: "Message List"
+sidebarTitle: "Message List"
+description: "Display and manage real-time chat messages with various message types using CometChat UI Kit for iOS"
---
## Overview
@@ -12,118 +14,106 @@ title: "Message List"
-***
+---
## Usage
### Integration
-The following code snippet illustrates how you can directly incorporate the MessageList component.
+The following code snippet illustrates how you can directly incorporate the MessageList component:
```swift
-// syntax for set(user: User)
+// Set user for the message list
messageList.set(user: user)
-// syntax for set(user: User, parentMessage: BaseMessage? = nil)
+// Set user with parent message for threaded conversations
messageList.set(user: user, parentMessage: textMessage)
```
-
-
-
To retrieve messages for a specific entity, you must associate it with either a `User` or `Group` object.
-
-***
+---
### Actions
[Actions](/ui-kit/ios/components-overview#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.
-##### 1. onThreadRepliesClick
+#### 1. onThreadRepliesClick
-`onThreadRepliesClick` is triggered when you click on the thread indicator of message bubble. The `onThreadRepliesClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+`onThreadRepliesClick` is triggered when you click on the thread indicator of a message bubble. The `onThreadRepliesClick` action doesn't have a predefined behavior. You can override this action using the following code snippet:
```swift
- let messageListView = CometChatMessageList()
- messageListView.set(onThreadRepliesClick: { message, template in
- // Your action onclick
+let messageListView = CometChatMessageList()
+messageListView.set(onThreadRepliesClick: { message, template in
+ // Handle thread replies click
})
```
-
-
-***
+---
-##### 2. onReactionClick
+#### 2. onReactionClick
`onReactionClick` is triggered when you click on a reaction on a message bubble.
```swift
- let messageListView = CometChatMessageList()
- messageListView.set(onReactionClick: { reactionCount, baseMessage in
- // Your action onclick
+let messageListView = CometChatMessageList()
+messageListView.set(onReactionClick: { reactionCount, baseMessage in
+ // Handle reaction click
})
```
-
-
-***
+---
-##### 3. onReactionListItemClick
+#### 3. onReactionListItemClick
`onReactionListItemClick` is triggered when you click on the list item of CometChatReactionList on a message bubble.
```swift
- let messageListView = CometChatMessageList()
- messageListView.set(onReactionListItemClick: { messageReaction, baseMessage in
- // Your action onclick
+let messageListView = CometChatMessageList()
+messageListView.set(onReactionListItemClick: { messageReaction, baseMessage in
+ // Handle reaction list item click
})
```
-
-
-***
+---
-##### 4. set(onError:)
+#### 4. set(onError:)
-This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatMessageList.
+This method proves helpful when you need to customize the action taken upon encountering an error in CometChatMessageList.
```swift
cometChatGroupMembers.set(onError: { error in
- // Override on error
+ // Handle error
})
```
-
-
-***
+---
-##### 5. set(onEmpty:)
+#### 5. set(onEmpty:)
-This `set(onEmpty:)` method is triggered when the message list is empty in CometChatMessageList.
+The `set(onEmpty:)` method is triggered when the message list is empty in CometChatMessageList.
@@ -132,16 +122,14 @@ cometChatMessageList.set(onEmpty: {
// Handle empty state
})
```
-
-
-***
+---
-##### 6. setOnLoad
+#### 6. setOnLoad
-This set(onLoad:) method is triggered when messages are successfully loaded in CometChatMessageList.
+The `set(onLoad:)` method is triggered when messages are successfully loaded in CometChatMessageList.
@@ -150,62 +138,55 @@ cometChatMessageList.set(onLoad: { messages in
// Handle loaded messages
})
```
-
-
-***
+---
### Filters
You can adjust the `MessagesRequestBuilder` in the MessageList Component to customize your message list. Numerous options are available to alter the builder to meet your specific needs. For additional details on `MessagesRequestBuilder`, please visit [MessagesRequestBuilder](/sdk/ios/additional-message-filtering).
-In the example below, we are applying a filter to the messages based on a search substring and for a specific user. This means that only messages that contain the search term and are associated with the specified user will be displayed
+In the example below, we are applying a filter to the messages based on a search substring and for a specific user. This means that only messages that contain the search term and are associated with the specified user will be displayed:
```swift
-let messageRequestBuilder = MessagesRequest.MessageRequestBuilder()
+// Create message request builder with filters
+let messageRequestBuilder = MessagesRequest.MessageRequestBuilder()
.set(uid: "YOUR_UID")
.set(types: ["Text"])
.set(searchKeyword: "sure")
+// Apply to CometChatMessages
let cometChatMessages = CometChatMessages()
cometChatMessages.set(user: user)
-cometChatMessages.set(messagesRequestBuilder:messageRequestBuilder)
+cometChatMessages.set(messagesRequestBuilder: messageRequestBuilder)
```
-
-
-
-The following parameters in messageRequestBuilder will always be altered inside the message list
-
+The following parameters in messageRequestBuilder will always be altered inside the message list:
1. UID
2. GUID
3. types
4. categories
-
-
Ensure to include the `uid` and `name` of the User in the implementation.
-
-***
+---
### 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.
+[Events](/ui-kit/ios/components-overview#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
@@ -213,11 +194,11 @@ To fit your app's design requirements, you can customize the appearance of the c
### Style
-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.
+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. MessageList Style
+#### 1. MessageList Style
-To customize the appearance, you can assign a `MessageListStyle` object to the `MessageList` component
+To customize the appearance, you can assign a `MessageListStyle` object to the `MessageList` component.
**Global level styling**
@@ -227,9 +208,7 @@ To customize the appearance, you can assign a `MessageListStyle` object to the `
CometChatMessageList.style.backgroundColor = UIColor(hex: "#FBAA75")
CometChatMessageList.messageBubbleStyle.outgoing.backgroundColor = UIColor(hex: "#F76808")
```
-
-
**Instance level styling**
@@ -237,137 +216,136 @@ CometChatMessageList.messageBubbleStyle.outgoing.backgroundColor = UIColor(hex:
```swift
+// Create custom message list style
let messageListStyle = MessageListStyle()
messageListStyle.backgroundColor = UIColor(hex: "#FBAA75")
-
+
+// Apply to instance
let messageList = CometChatMessageList()
messageList.messageBubbleStyle.outgoing.backgroundColor = UIColor(hex: "#F76808")
messageList.style = messageListStyle
```
-
-
-List of properties exposed by MessageListStyle
-
-| **Property** | **Description** | **Code** |
-| ------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| **Background Color** | Background color with dynamic support for light and dark mode. | `CometChatMessageList.style.backgroundColor = UIColor.dynamicColor(lightModeColor: ..., darkModeColor: ...)` |
-| **Border Width** | Border width for the component. | `CometChatMessageList.style.borderWidth = 0` |
-| **Border Color** | Border color for the component. | `CometChatMessageList.style.borderColor = .clear` |
-| **Corner Radius** | Corner radius for the component. | `CometChatMessageList.style.cornerRadius = CometChatCornerStyle?` |
-| **Shimmer Gradient Color 1** | First color of the shimmer gradient. | `CometChatMessageList.style.shimmerGradientColor1 = CometChatTheme.backgroundColor04` |
-| **Shimmer Gradient Color 2** | Second color of the shimmer gradient. | `CometChatMessageList.style.shimmerGradientColor2 = CometChatTheme.backgroundColor03` |
-| **Empty State Title Color** | Text color for the title in the empty state. | `CometChatMessageList.style.emptyStateTitleColor = CometChatTheme.textColorPrimary` |
-| **Empty State Title Font** | Font for the title in the empty state. | `CometChatMessageList.style.emptyStateTitleFont = CometChatTypography.Heading3.bold` |
-| **Empty State Subtitle Color** | Text color for the subtitle in the empty state. | `CometChatMessageList.style.emptyStateSubtitleColor = CometChatTheme.textColorSecondary` |
-| **Empty State Subtitle Font** | Font for the subtitle in the empty state. | `CometChatMessageList.style.emptyStateSubtitleFont = CometChatTypography.Body.regular` |
-| **Error State Title Color** | Text color for the title in the error state. | `CometChatMessageList.style.errorStateTitleColor = CometChatTheme.textColorPrimary` |
-| **Error State Title Font** | Font for the title in the error state. | `CometChatMessageList.style.errorStateTitleFont = CometChatTypography.Heading3.bold` |
-| **Error State Subtitle Color** | Text color for the subtitle in the error state. | `CometChatMessageList.style.errorStateSubtitleColor = CometChatTheme.textColorSecondary` |
-| **Error State Subtitle Font** | Font for the subtitle in the error state. | `CometChatMessageList.style.errorStateSubtitleFont = CometChatTypography.Body.regular` |
-| **Threaded Message Image** | Icon image for threaded messages. | `CometChatMessageList.style.threadedMessageImage = UIImage(systemName: "arrow.turn.down.right")` |
-| **Error Image** | Icon image for error state. | `CometChatMessageList.style.errorImage = UIImage(named: "error-icon")` |
-| **Empty Image** | Icon image for empty state. | `CometChatMessageList.style.emptyImage = UIImage(named: "empty-icon")` |
-| **New Message Indicator Image** | Icon image for new message indicator. | `CometChatMessageList.style.newMessageIndicatorImage = UIImage?` |
-| **New Message Indicator Text Color** | Text color for unread messages indicator. | `CometChatMessageList.style.newMessageIndicatorTextColor = UIColor?` |
-| **New Message Indicator Text Font** | Text font for unread messages indicator. | `CometChatMessageList.style.newMessageIndicatorTextFont = UIFont?` |
-| **New Message Indicator Background Color** | Background color for unread messages indicator. | `CometChatMessageList.style.newMessageIndicatorBackgroundColor = UIColor?` |
-
-
-
-***
+
+List of properties exposed by MessageListStyle:
+
+| Property | Description | Code |
+|----------|-------------|------|
+| **Background Color** | Background color with dynamic support for light and dark mode | `CometChatMessageList.style.backgroundColor = UIColor.dynamicColor(lightModeColor: ..., darkModeColor: ...)` |
+| **Border Width** | Border width for the component | `CometChatMessageList.style.borderWidth = 0` |
+| **Border Color** | Border color for the component | `CometChatMessageList.style.borderColor = .clear` |
+| **Corner Radius** | Corner radius for the component | `CometChatMessageList.style.cornerRadius = CometChatCornerStyle?` |
+| **Shimmer Gradient Color 1** | First color of the shimmer gradient | `CometChatMessageList.style.shimmerGradientColor1 = CometChatTheme.backgroundColor04` |
+| **Shimmer Gradient Color 2** | Second color of the shimmer gradient | `CometChatMessageList.style.shimmerGradientColor2 = CometChatTheme.backgroundColor03` |
+| **Empty State Title Color** | Text color for the title in the empty state | `CometChatMessageList.style.emptyStateTitleColor = CometChatTheme.textColorPrimary` |
+| **Empty State Title Font** | Font for the title in the empty state | `CometChatMessageList.style.emptyStateTitleFont = CometChatTypography.Heading3.bold` |
+| **Empty State Subtitle Color** | Text color for the subtitle in the empty state | `CometChatMessageList.style.emptyStateSubtitleColor = CometChatTheme.textColorSecondary` |
+| **Empty State Subtitle Font** | Font for the subtitle in the empty state | `CometChatMessageList.style.emptyStateSubtitleFont = CometChatTypography.Body.regular` |
+| **Error State Title Color** | Text color for the title in the error state | `CometChatMessageList.style.errorStateTitleColor = CometChatTheme.textColorPrimary` |
+| **Error State Title Font** | Font for the title in the error state | `CometChatMessageList.style.errorStateTitleFont = CometChatTypography.Heading3.bold` |
+| **Error State Subtitle Color** | Text color for the subtitle in the error state | `CometChatMessageList.style.errorStateSubtitleColor = CometChatTheme.textColorSecondary` |
+| **Error State Subtitle Font** | Font for the subtitle in the error state | `CometChatMessageList.style.errorStateSubtitleFont = CometChatTypography.Body.regular` |
+| **Threaded Message Image** | Icon image for threaded messages | `CometChatMessageList.style.threadedMessageImage = UIImage(systemName: "arrow.turn.down.right")` |
+| **Error Image** | Icon image for error state | `CometChatMessageList.style.errorImage = UIImage(named: "error-icon")` |
+| **Empty Image** | Icon image for empty state | `CometChatMessageList.style.emptyImage = UIImage(named: "empty-icon")` |
+| **New Message Indicator Image** | Icon image for new message indicator | `CometChatMessageList.style.newMessageIndicatorImage = UIImage?` |
+| **New Message Indicator Text Color** | Text color for unread messages indicator | `CometChatMessageList.style.newMessageIndicatorTextColor = UIColor?` |
+| **New Message Indicator Text Font** | Text font for unread messages indicator | `CometChatMessageList.style.newMessageIndicatorTextFont = UIFont?` |
+| **New Message Indicator Background Color** | Background color for unread messages indicator | `CometChatMessageList.style.newMessageIndicatorBackgroundColor = UIColor?` |
+
+---
### 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 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 |
-| ------------------------------- | ------------------------------------------------------------ | ------------------------------------------- |
-| hideAvatar | Hides the avatar of the sender. | `hideAvatar = true` |
-| hideGroupActionMessages | Hides group action messages (like join/leave notifications). | `hideGroupActionMessages = true` |
-| hideReplyInThreadOption | Hides the reply in thread option. | `hideReplyInThreadOption = true` |
-| hideTranslateMessageOption | Hides the message translation option. | `hideTranslateMessageOption = true` |
-| hideEditMessageOption | Hides the edit message option. | `hideEditMessageOption = true` |
-| hideDeleteMessageOption | Hides the delete message option. | `hideDeleteMessageOption = true` |
-| hideReactionOption | Hides the reaction option on messages. | `hideReactionOption = true` |
-| hideMessagePrivatelyOption | Hides the option to message privately. | `hideMessagePrivatelyOption = true` |
-| hideCopyMessageOption | Hides the option to copy a message. | `hideCopyMessageOption = true` |
-| hideMessageInfoOption | Hides the message info option. | `hideMessageInfoOption = true` |
-| hideHeaderView | Hides the header view of the message list. | `hideHeaderView = true` |
-| hideFooterView | Hides the footer view of the message list. | `hideFooterView = true` |
-| hideDateSeparator | Hides the date separator between messages. | `hideDateSeparator = true` |
-| scrollToBottomOnNewMessages | Scrolls to the bottom when new messages arrive. | `scrollToBottomOnNewMessages = true` |
-| hideReceipts | Hides the message read receipts (ticks). | `hideReceipts = true` |
-| disableSoundForMessages | Disables the sound when a new message arrives. | `disableSoundForMessages = true` |
-| hideEmptyView | Hides the empty state view when no messages are available. | `hideEmptyView = true` |
-| hideErrorView | Hides the error view when an error occurs. | `hideErrorView = true` |
-| hideLoadingView | Hides the loading view when fetching messages. | `hideLoadingView = true` |
-| hideNewMessageIndicator | Hides the "new message" indicator. | `hideNewMessageIndicator = true` |
-| scrollToBottom(isAnimated:) | Scrolls to the bottom of the message list. | `scrollToBottom(isAnimated: true)` |
-| set(messageAlignment:) | Sets the alignment of messages in the list. | `set(messageAlignment: .left)` |
-| set(smartRepliesKeywords:) | Sets keywords for smart replies. | `set(smartRepliesKeywords: ["Hi", "Bye"])` |
-| set(smartRepliesDelayDuration:) | Sets the delay duration for smart replies. | `set(smartRepliesDelayDuration: 2)` |
-| set(user:parentMessage:) | Sets the user and an optional parent message. | `set(user: user, parentMessage: message)` |
-| set(group:parentMessage:) | Sets the group and an optional parent message. | `set(group: group, parentMessage: message)` |
-| set(messagesRequestBuilder:) | Sets the message request builder. | `set(messagesRequestBuilder: builder)` |
-| set(reactionsRequestBuilder:) | Sets the reactions request builder. | `set(reactionsRequestBuilder: builder)` |
-| set(parentMessageId:) | Sets the parent message ID. | `set(parentMessageId: 12345)` |
-| hideModerationView | Hides the moderation view in the AI assistant chat. | `hideModerationView = true` |
-|hideThreadView | Hides the thread view in the AI assistant chat. | `hideThreadView = true` |
-| set(suggestedMessages:) | List of predefined replies shown in the AI assistant. | `suggestedMessages = ["Hello", "Hi"]` |
-| hideSuggestedMessages | Hides the suggested message replies. | `hideSuggestedMessages = true` |
-| set(emptyChatGreetingView:) | Custom view displayed when the AI assistant chat is empty. | `emptyChatGreetingView = { /* custom view */ }` |
-| set(streamingSpeed:) | Sets the speed of streaming for AI assistant messages. | `streamingSpeed = 50` |
-| goToMessage(withId:) | Scrolls the message list to a specific message, making it visible to the user based on the provided message ID | `goToMessage(messageId: Int)` |
-| startFromUnreadMessages | Starts the message list from the first unread message.. | `startFromUnreadMessages = true` |
-| showMarkAsUnreadOption | Sets the visibility of the “Mark as unread” option in the message actions menu. | `showMarkAsUnreadOption = true` |
-
-
-***
-
-### Advance
-
-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.
+Below is a list of customizations along with corresponding code snippets:
+
+| Property | Description | Code |
+|----------|-------------|------|
+| hideAvatar | Hides the avatar of the sender | `hideAvatar = true` |
+| hideGroupActionMessages | Hides group action messages (like join/leave notifications) | `hideGroupActionMessages = true` |
+| hideReplyInThreadOption | Hides the reply in thread option | `hideReplyInThreadOption = true` |
+| hideTranslateMessageOption | Hides the message translation option | `hideTranslateMessageOption = true` |
+| hideEditMessageOption | Hides the edit message option | `hideEditMessageOption = true` |
+| hideDeleteMessageOption | Hides the delete message option | `hideDeleteMessageOption = true` |
+| hideReactionOption | Hides the reaction option on messages | `hideReactionOption = true` |
+| hideMessagePrivatelyOption | Hides the option to message privately | `hideMessagePrivatelyOption = true` |
+| hideCopyMessageOption | Hides the option to copy a message | `hideCopyMessageOption = true` |
+| hideMessageInfoOption | Hides the message info option | `hideMessageInfoOption = true` |
+| hideHeaderView | Hides the header view of the message list | `hideHeaderView = true` |
+| hideFooterView | Hides the footer view of the message list | `hideFooterView = true` |
+| hideDateSeparator | Hides the date separator between messages | `hideDateSeparator = true` |
+| scrollToBottomOnNewMessages | Scrolls to the bottom when new messages arrive | `scrollToBottomOnNewMessages = true` |
+| hideReceipts | Hides the message read receipts (ticks) | `hideReceipts = true` |
+| disableSoundForMessages | Disables the sound when a new message arrives | `disableSoundForMessages = true` |
+| hideEmptyView | Hides the empty state view when no messages are available | `hideEmptyView = true` |
+| hideErrorView | Hides the error view when an error occurs | `hideErrorView = true` |
+| hideLoadingView | Hides the loading view when fetching messages | `hideLoadingView = true` |
+| hideNewMessageIndicator | Hides the "new message" indicator | `hideNewMessageIndicator = true` |
+| scrollToBottom(isAnimated:) | Scrolls to the bottom of the message list | `scrollToBottom(isAnimated: true)` |
+| set(messageAlignment:) | Sets the alignment of messages in the list | `set(messageAlignment: .left)` |
+| set(smartRepliesKeywords:) | Sets keywords for smart replies | `set(smartRepliesKeywords: ["Hi", "Bye"])` |
+| set(smartRepliesDelayDuration:) | Sets the delay duration for smart replies | `set(smartRepliesDelayDuration: 2)` |
+| set(user:parentMessage:) | Sets the user and an optional parent message | `set(user: user, parentMessage: message)` |
+| set(group:parentMessage:) | Sets the group and an optional parent message | `set(group: group, parentMessage: message)` |
+| set(messagesRequestBuilder:) | Sets the message request builder | `set(messagesRequestBuilder: builder)` |
+| set(reactionsRequestBuilder:) | Sets the reactions request builder | `set(reactionsRequestBuilder: builder)` |
+| set(parentMessageId:) | Sets the parent message ID | `set(parentMessageId: 12345)` |
+| hideModerationView | Hides the moderation view in the AI assistant chat | `hideModerationView = true` |
+| hideThreadView | Hides the thread view in the AI assistant chat | `hideThreadView = true` |
+| set(suggestedMessages:) | List of predefined replies shown in the AI assistant | `suggestedMessages = ["Hello", "Hi"]` |
+| hideSuggestedMessages | Hides the suggested message replies | `hideSuggestedMessages = true` |
+| set(emptyChatGreetingView:) | Custom view displayed when the AI assistant chat is empty | `emptyChatGreetingView = { /* custom view */ }` |
+| set(streamingSpeed:) | Sets the speed of streaming for AI assistant messages | `streamingSpeed = 50` |
+| goToMessage(withId:) | Scrolls the message list to a specific message based on the provided message ID | `goToMessage(messageId: Int)` |
+| startFromUnreadMessages | Starts the message list from the first unread message | `startFromUnreadMessages = true` |
+| showMarkAsUnreadOption | Sets the visibility of the "Mark as unread" option in the message actions menu | `showMarkAsUnreadOption = true` |
+
+---
+
+### 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 own views, layouts, and UI elements and then incorporate those into the component.
#### Date Time Formatter
-The **CometChatMessageList** component supports full customization of how date and time are displayed using the [CometChatDateTimeFormatter](/ui-kit/ios/localize#datetimeformatter).
+The `CometChatMessageList` component supports full customization of how date and time are displayed using the [CometChatDateTimeFormatter](/ui-kit/ios/localize#datetimeformatter).
-This enables developers to localize, format, or personalize the date and time strings shown next to each message such as “Today”, “Yesterday”, “12:45 PM”, etc.
+This enables developers to localize, format, or personalize the date and time strings shown next to each message such as "Today", "Yesterday", "12:45 PM", etc.
-1. Component-Level (Global)
+**1. Component-Level (Global)**
```swift
+// Customize time format
CometChatMessageList.dateTimeFormatter.time = { timestamp in
return "at " + DateFormatter.localizedString(from: Date(timeIntervalSince1970: TimeInterval(timestamp)), dateStyle: .none, timeStyle: .short)
}
+// Customize today format
CometChatMessageList.dateTimeFormatter.today = { timestamp in
return "Today • \(formattedTime(from: timestamp))"
}
-CometChatMessageList.dateTimeFormatter.otherDay = { timestamp in // This will display older dates as "24 Apr 2025" instead of the default relative format.
+// Customize older dates format
+CometChatMessageList.dateTimeFormatter.otherDay = { timestamp in
let formatter = DateFormatter()
formatter.dateFormat = "dd MMM yyyy"
return formatter.string(from: Date(timeIntervalSince1970: TimeInterval(timestamp)))
}
```
-
-
-2. Instance-Level (Local)
+**2. Instance-Level (Local)**
@@ -377,32 +355,30 @@ messageList.dateTimeFormatter.yesterday = { timestamp in
return "Yesterday at " + formattedTime(from: timestamp)
}
```
-
-
-##### Available closures
+##### Available Closures
-| Property | Description | Code |
-| --------- | ------------------------------------------------------------------- | ------------------------------------------------------------ |
-| time | Called to format a timestamp as a standard time (e.g., "12:30 PM"). | `CometChatMessageList.dateTimeFormatter.time = { ... }` |
-| today | Called when rendering messages sent today. | `CometChatMessageList.dateTimeFormatter.today = { ... }` |
-| yesterday | Called for yesterday's messages. | `CometChatMessageList.dateTimeFormatter.yesterday = { ... }` |
-| lastweek | Called for messages within the last week. | `CometChatMessageList.dateTimeFormatter.lastweek = { ... }` |
-| otherDay | Called for dates older than last week. | `CometChatMessageList.dateTimeFormatter.otherDay = { ... }` |
-| minute | Called when referring to "a minute ago". | `CometChatMessageList.dateTimeFormatter.minute = { ... }` |
-| minutes | Called for "x minutes ago". | `CometChatMessageList.dateTimeFormatter.minutes = { ... }` |
-| hour | Called for "an hour ago". | `CometChatMessageList.dateTimeFormatter.hour = { ... }` |
-| hours | Called for "x hours ago". | `CometChatMessageList.dateTimeFormatter.hours = { ... }` |
+| Property | Description | Code |
+|----------|-------------|------|
+| time | Called to format a timestamp as a standard time (e.g., "12:30 PM") | `CometChatMessageList.dateTimeFormatter.time = { ... }` |
+| today | Called when rendering messages sent today | `CometChatMessageList.dateTimeFormatter.today = { ... }` |
+| yesterday | Called for yesterday's messages | `CometChatMessageList.dateTimeFormatter.yesterday = { ... }` |
+| lastweek | Called for messages within the last week | `CometChatMessageList.dateTimeFormatter.lastweek = { ... }` |
+| otherDay | Called for dates older than last week | `CometChatMessageList.dateTimeFormatter.otherDay = { ... }` |
+| minute | Called when referring to "a minute ago" | `CometChatMessageList.dateTimeFormatter.minute = { ... }` |
+| minutes | Called for "x minutes ago" | `CometChatMessageList.dateTimeFormatter.minutes = { ... }` |
+| hour | Called for "an hour ago" | `CometChatMessageList.dateTimeFormatter.hour = { ... }` |
+| hours | Called for "x hours ago" | `CometChatMessageList.dateTimeFormatter.hours = { ... }` |
Each closure receives a timestamp (Int, representing UNIX time) and must return a String representing the formatted time.
-***
+---
#### SetHeaderView
-You can set custom headerView to the Message List component using the following method.
+You can set a custom headerView to the Message List component using the following method:
@@ -410,17 +386,17 @@ You can set custom headerView to the Message List component using the following
let messageListView = CometChatMessageList()
messageListView.set(headerView: CustomHeaderView)
```
-
-
-Following is the code of CustomHeaderView - UIView Class
+Following is the code of CustomHeaderView - UIView Class:
+
+
```swift
import UIKit
@@ -448,7 +424,6 @@ class CustomHeaderView: UIViewController, UICollectionViewDelegate, UICollection
return collectionView
}()
-
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor(white: 0.95, alpha: 1)
@@ -522,7 +497,7 @@ class CustomHeaderViewCell: UICollectionViewCell {
}
private func setupUI() {
- backgroundColor = UIColor(white: 0.95, alpha: 1) // Light purple background
+ backgroundColor = UIColor(white: 0.95, alpha: 1)
layer.cornerRadius = 18
clipsToBounds = true
@@ -547,14 +522,15 @@ class CustomHeaderViewCell: UICollectionViewCell {
}
}
```
+
+
-***
-#### SetFooterView
+---
-You can set custom footerView to the Message List component using the following method.
+#### SetFooterView
-Example
+You can set a custom footerView to the Message List component using the following method:
@@ -562,17 +538,17 @@ Example
let messageListView = CometChatMessageList(frame: .null)
messageListView.set(footerView: CustomFooterView)
```
-
-
-Following is the code of CustomFooterView UIView Class
+Following is the code of CustomFooterView UIView Class:
+
+
```swift
import UIKit
@@ -600,7 +576,6 @@ class CustomFooterView: UIViewController, UICollectionViewDelegate, UICollection
return collectionView
}()
-
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor(white: 0.95, alpha: 1)
@@ -674,7 +649,7 @@ class CustomFooterViewCell: UICollectionViewCell {
}
private func setupUI() {
- backgroundColor = UIColor(white: 0.95, alpha: 1) // Light purple background
+ backgroundColor = UIColor(white: 0.95, alpha: 1)
layer.cornerRadius = 18
clipsToBounds = true
@@ -699,20 +674,21 @@ class CustomFooterViewCell: UICollectionViewCell {
}
}
```
+
+
-***
+---
#### SetDateSeparatorPattern
You can modify the date pattern of the message list date separator to your requirement using `setDateSeparatorPattern()`. 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
let messageListView = CometChatMessageList()
-.set(user: user)
+ .set(user: user)
+
messageListView.set(dateSeparatorPattern: { timestamp in
guard let timestamp = timestamp else {
return ""
@@ -723,24 +699,18 @@ messageListView.set(dateSeparatorPattern: { timestamp in
return formatter.string(from: date)
})
```
-
-
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-***
+---
#### 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**
+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.
@@ -748,7 +718,7 @@ You can modify the date pattern to your requirement using .set(datePattern:). Th
let messageListView = CometChatMessageList()
messageListView.set(datePattern: { timestamp in
guard let timestamp = timestamp else {
- return ""
+ return ""
}
let date = Date(timeIntervalSince1970: TimeInterval(timestamp/1000))
let formatter = DateFormatter()
@@ -756,19 +726,15 @@ messageListView.set(datePattern: { timestamp in
return formatter.string(from: date)
})
```
-
-
-***
+---
#### SetTimePattern
You can modify the date pattern to your requirement using `.set(timePattern:)`. 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
@@ -780,43 +746,42 @@ messageListView.set(timePattern: { timestamp in
return formatter.string(from: time)
})
```
-
-
-***
+---
#### 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.
+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
+
+
+```swift
let myCustomTextFormatter = MyCustomTextFormatter(trackingCharacter: "#")
-let cometChatMessages = CometChatMessages()
+let cometChatMessages = CometChatMessages()
.set(user: user)
.set(textFormatter: [myCustomTextFormatter])
```
+
+
-Demonstration:
+**Demonstration:**
```swift
-
import Foundation
import CometChatSDK
import CometChatUIKitSwift
class MyCustomTextFormatter: CometChatTextFormatter {
-override func getRegex() -> String {
-return "(\\bsure\\b)"
-
+
+ override func getRegex() -> String {
+ return "(\\bsure\\b)"
}
override func getTrackingCharacter() -> Character {
@@ -825,33 +790,32 @@ return "(\\bsure\\b)"
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
+ // Handle clicked item
}
override func handlePreMessageSend(baseMessage: BaseMessage, suggestionItemList: [SuggestionItem]) {
- // This function would modify the message before it's sent
- // For now, it does nothing
+ // Modify the message before it's sent
}
override func prepareMessageString(
- baseMessage: BaseMessage,
- regexString: String,
- alignment: MessageBubbleAlignment = .left,
- formattingType: FormattingType
+ baseMessage: BaseMessage,
+ regexString: String,
+ alignment: MessageBubbleAlignment = .left,
+ formattingType: FormattingType
) -> NSAttributedString {
let attrString = NSMutableAttributedString(string: "SURE")
- if alignment == .left { // Received message
+ if alignment == .left {
+ // Received message styling
attrString.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 0, length: attrString.length))
- } else { // Sent message
+ } 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))
@@ -859,80 +823,71 @@ return "(\\bsure\\b)"
}
override func onTextTapped(baseMessage: BaseMessage, tappedText: String, controller: UIViewController?) {
- // Your Action
+ // Handle text tap 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).
-***
+---
#### SetLoadingView
-You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.
+You can set a custom loading view using `.set(loadingView:)`. This method accepts a UIView to display while data is being fetched.
```swift
-let loadingIndicator = UIActivityIndicatorView(style: .medium)
-loadingIndicator.startAnimating()
-cometChatMessageList.set(loadingView: loadingIndicator)
+let loadingIndicator = UIActivityIndicatorView(style: .medium)
+loadingIndicator.startAnimating()
+cometChatMessageList.set(loadingView: loadingIndicator)
```
-
-
-***
+---
#### SetErrorView
-You can customize the error view using .set(errorView:). This method accepts a UIView that appears when an error occurs.
+You can customize the error view using `.set(errorView:)`. This method accepts a UIView that appears when an error occurs.
```swift
-let errorLabel = UILabel()
-errorLabel.text = "Something went wrong!"
-errorLabel.textColor = .red
-cometChatMessageList.set(errorView: errorLabel)
+let errorLabel = UILabel()
+errorLabel.text = "Something went wrong!"
+errorLabel.textColor = .red
+cometChatMessageList.set(errorView: errorLabel)
```
-
-
-***
+---
#### SetEmptyView
-You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no conversations are available.
+You can customize the empty state view using `.set(emptyView:)`. This method accepts a UIView that appears when no conversations are available.
```swift
-let emptyLabel = UILabel()
-emptyLabel.text = "No conversations found"
-emptyLabel.textColor = .gray
-emptyLabel.textAlignment = .center
-cometChatMessageList.set(emptyView: emptyLabel)
+let emptyLabel = UILabel()
+emptyLabel.text = "No conversations found"
+emptyLabel.textColor = .gray
+emptyLabel.textAlignment = .center
+cometChatMessageList.set(emptyView: emptyLabel)
```
-
-
-***
+---
#### SetNewMessageIndicatorView
@@ -941,37 +896,39 @@ Set a custom view for the unread message indicator.
```swift
-let newMessageIndicatorView = NewUnreadMessageIndicator()
-cometChatMessageList.set(newMessageIndicatorView:: newMessageIndicatorView)
+let newMessageIndicatorView = NewUnreadMessageIndicator()
+cometChatMessageList.set(newMessageIndicatorView: newMessageIndicatorView)
class NewUnreadMessageIndicator: UIView {
- // Your custom view
+ // Your custom view implementation
}
```
-
-
-***
+---
-
To ensure that the `MessageList` is properly configured, passing the controller is mandatory.
-* Swift
-
```swift
let messageListView = CometChatMessageList()
messageListView.set(controller: UIViewController) // Passing the controller is required
```
-
-***
+---
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
+
+---
+
+## Next Steps
+
+- [Message Composer](/ui-kit/ios/message-composer) — Customize the message input component
+- [Message Header](/ui-kit/ios/message-header) — Display user/group details in the header
+- [Message Template](/ui-kit/ios/message-template) — Create custom message bubble templates
+
+---
diff --git a/ui-kit/ios/message-template.mdx b/ui-kit/ios/message-template.mdx
index 6a7b1ea4..79a18cfd 100644
--- a/ui-kit/ios/message-template.mdx
+++ b/ui-kit/ios/message-template.mdx
@@ -1,12 +1,16 @@
---
title: "Message Template"
+sidebarTitle: "Message Template"
+description: "Define and customize the structure and behavior of message bubbles using CometChat UI Kit for iOS"
---
## Overview
-A MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the [MessageBubble](/ui-kit/ios/message-bubble-styling). It acts as a schema or design blueprint for the creation of a variety of [MessageBubble](/ui-kit/ios/message-bubble-styling) components, allowing you to manage the appearance and interactions of [MessageBubble](/ui-kit/ios/message-bubble-styling) within your application effectively and consistently.
+A MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the [MessageBubble](/ui-kit/ios/message-bubble-styling). It acts as a schema or design blueprint for creating a variety of message bubble components, allowing you to manage their appearance and interactions within your application effectively and consistently.
-### Structure
+---
+
+## Structure
@@ -24,216 +28,232 @@ The MessageBubble structure can typically be broken down into the following view
5. **Bottom view**: This view can be used to extend the MessageBubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content view.
-6. **Thread view**:This is where the thread reply icon and reply counts are displayed. It's located below the footer view.
+6. **Thread view**: This is where the thread reply icon and reply counts are displayed. It's located below the footer view.
7. **Footer view**: This is where the timestamp of the message and its delivery or read status are displayed. It's located at the bottom of the MessageBubble.
8. **Status Info view**: This is where the timestamp of the message and its delivery or read status are displayed. It's located inside the MessageBubble just below the content view.
-### Properties
-
-MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
-
-1. **Type**
+---
- Using `setType()` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplates Type using the following code snippet.
+## Properties
- ```csharp
+MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble.
- let type = "custom_template"//replace this with your own custom type
+### 1. Type
- //Creating a custom message template
- let customMessageTemplate =
- CometChatMessageTemplate(category: category, type: type, contentView: { message, alignment, controller in
- return UIView() //replace this with your own UI for message list
+Using `setType()` you can set the type of CometChatMessage. This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplate's Type using the following code snippet:
- }, bubbleView: nil, headerView: nil, footerView: nil) { message, alignment, controller in
- return UIView() //replace this with your own UI for message composer
- } options: { message, group, controller in
- return [CometChatMessageOption]() //replace this with your own options
- }
- ```
+```swift
+let type = "custom_template" // Replace with your own custom type
+
+// Creating a custom message template
+let customMessageTemplate = CometChatMessageTemplate(
+ category: category,
+ type: type,
+ contentView: { message, alignment, controller in
+ return UIView() // Replace with your own UI for message list
+ },
+ bubbleView: nil,
+ headerView: nil,
+ footerView: nil
+) { message, alignment, controller in
+ return UIView() // Replace with your own UI for message composer
+} options: { message, group, controller in
+ return [CometChatMessageOption]() // Replace with your own options
+}
+```
-2. **Category**
+### 2. Category
Using `.setCategory()` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
Please refer to our guide on [Message Categories](/sdk/ios/message-structure-and-hierarchy) for a deeper understanding of message categories.
-```csharp
-let category = "custom_category"//replace this with your own category
-
-//Creating a custom message template
-//You can also set UI for bubbleView, headerView and footerView instead of nil
-let customMessageTemplate =
- CometChatMessageTemplate(category: category, type: type, contentView: { message, alignment, controller in
- return UIView() //replace this with your own UI for message list
-
- }, bubbleView: nil, headerView: nil, footerView: nil) { message, alignment, controller in
- return UIView() //replace this with your own UI for message composer
- } options: { message, group, controller in
- return [CometChatMessageOption]() //replace this with your own options
- }
+```swift
+let category = "custom_category" // Replace with your own category
+
+// Creating a custom message template
+// You can also set UI for bubbleView, headerView and footerView instead of nil
+let customMessageTemplate = CometChatMessageTemplate(
+ category: category,
+ type: type,
+ contentView: { message, alignment, controller in
+ return UIView() // Replace with your own UI for message list
+ },
+ bubbleView: nil,
+ headerView: nil,
+ footerView: nil
+) { message, alignment, controller in
+ return UIView() // Replace with your own UI for message composer
+} options: { message, group, controller in
+ return [CometChatMessageOption]() // Replace with your own options
+}
```
-3. **Header View**
-
- The .`template.headerView` method allows you to assign a custom header view to the MessageBubble. By default, it is configured to display the sender's name.
+### 3. Header View
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+The `template.headerView` method allows you to assign a custom header view to the MessageBubble. By default, it is configured to display the sender's name.
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.headerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- }
- }
- ```
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.headerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
+ }
+}
+```
-4. **Content View**
+### 4. Content View
- The `template.contentView` method allows you to assign a custom content view to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/ios/message-bubble-styling#text-bubble), [Image Bubble](/ui-kit/ios/message-bubble-styling-styling#image-bubble), [File Bubble](/ui-kit/ios/message-bubble-styling-styling), [Audio Bubble](/ui-kit/ios/message-bubble-styling-styling#audio-bubble), or [Video Bubble](/ui-kit/ios/message-bubble-styling#video-bubble), depending on the message type.
+The `template.contentView` method allows you to assign a custom content view to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/ios/message-bubble-styling#text-bubble), [Image Bubble](/ui-kit/ios/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/ios/message-bubble-styling), [Audio Bubble](/ui-kit/ios/message-bubble-styling#audio-bubble), or [Video Bubble](/ui-kit/ios/message-bubble-styling#video-bubble), depending on the message type.
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.contentView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.contentView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
}
- }
- ```
+}
+```
-5. **Footer View**
+### 5. Footer View
- The `template.footerView` method allows you to assign a custom Footer view to the MessageBubble. By default, it displays the receipt and timestamp.
+The `template.footerView` method allows you to assign a custom Footer view to the MessageBubble. By default, it displays the receipt and timestamp.
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.footerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.footerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
}
- }
- ```
+}
+```
-6. **Bottom View**
+### 6. Bottom View
- The `template.bottomView` method allows you to assign a custom Bottom view to the MessageBubble.By defuault is has buttons such as link previews or a 'load more' button for long messages.
+The `template.bottomView` method allows you to assign a custom Bottom view to the MessageBubble. By default, it has buttons such as link previews or a 'load more' button for long messages.
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.bottomView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.bottomView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
}
- }
- ```
+}
+```
-7. **Bubble View**
+### 7. Bubble View
- The `template.bubbleView` method allows you to assign a custom Bubble view to the MessageBubble. By default, headerView, contentView, and footerView together form a message bubble.
+The `template.bubbleView` method allows you to assign a custom Bubble view to the MessageBubble. By default, headerView, contentView, and footerView together form a message bubble.
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.bubbleView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.bubbleView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
}
- }
- ```
+}
+```
-8. **Options**
+### 8. Options
- The `template.options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
+The `template.options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
- ```csharp
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.options = { message, group, controller in
- let loggedInUser = CometChat.getLoggedInUser()
- let options = CometChatUIKit.getDataSource().getMessageOptions(loggedInUser: loggedInUser!, messageObject: message!, controller: controller, group: group)
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- return options
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.options = { message, group, controller in
+ let loggedInUser = CometChat.getLoggedInUser()
+ let options = CometChatUIKit.getDataSource().getMessageOptions(
+ loggedInUser: loggedInUser!,
+ messageObject: message!,
+ controller: controller,
+ group: group
+ )
+ return options
}
- allTemplates[index] = template
- }
- ```
+ allTemplates[index] = template
+}
+```
-***
+---
## Customization
Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/ios/message-list) component.
-The First step is to fetch the list of existing templates when you want to modify or add to them. This can be done using the getAllMessageTemplates() method from the DataSource of the CometChatUIKit class.
+The first step is to fetch the list of existing templates when you want to modify or add to them. This can be done using the `getAllMessageTemplates()` method from the DataSource of the CometChatUIKit class:
-```javascript
-var messageTemplates : [CometChatMessageTemplate] = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var messageTemplates: [CometChatMessageTemplate] = CometChatUIKit.getDataSource().getAllMessageTemplates()
```
+---
+
### Existing Templates
-You will need to first get the MessageTemplates object for the type of message you want to customize. You will be customizing the TextMessage Bubble here. The code snippet to get the Text MessageTemplate is as follows.
+You will need to first get the MessageTemplates object for the type of message you want to customize. In this example, we'll customize the TextMessage Bubble. The code snippet to get the Text MessageTemplate is as follows:
```swift
-var messageTemplates : [CometChatMessageTemplate] = CometChatUIKit.getDataSource().getAllMessageTemplates()
+var messageTemplates: [CometChatMessageTemplate] = CometChatUIKit.getDataSource().getAllMessageTemplates()
for i in 0..
-
-You will be using `CometChatMessageBubble` Component for example here so to apply Template to Messages you will have to use [MessageList](/ui-kit/ios/message-list) component.
+You will be using the `CometChatMessageBubble` Component for this example. To apply Template to Messages, you will have to use the [MessageList](/ui-kit/ios/message-list) component.
-By utilizing this code snippet, you will retrieve `text templates`.
+By utilizing this code snippet, you will retrieve text templates:
```swift
-let messageTemplates : CometChatMessageTemplate = CometChatUIKit.getDataSource().getTextMessageTemplate()
+// Get text message template
+let messageTemplates: CometChatMessageTemplate = CometChatUIKit.getDataSource().getTextMessageTemplate()
+// Configure message list with template
let messageListConfiguration = MessageListConfiguration()
.set(templates: [messageTemplates])
-
+// Apply to CometChatMessages
let cometChatMessages = CometChatMessages()
.set(user: user)
.set(messageListConfiguration: messageListConfiguration)
```
-
-
@@ -241,14 +261,12 @@ let cometChatMessages = CometChatMessages()
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-***
+---
-#### Header view
+#### Header View
The `template.headerView` method of MessageTemplate allows you to add custom views to the header of your message bubbles. In the example below, we will add a custom UIView `custom_header_view` to the header view of every text message in the MessageList.
@@ -256,10 +274,12 @@ The `template.headerView` method of MessageTemplate allows you to add custom vie
-```swift custom_header_view
+
+
+
+```swift
import UIKit
import CometChatUIKitSwift
-import UIKit
class HeaderViewStyled: UIView {
@@ -322,37 +342,36 @@ class HeaderViewStyled: UIView {
}
}
```
+
+
-```swift Swift
+```swift
var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
+
+for (index, template) in allTemplates.enumerated() {
var template = template
template.headerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
let customHeaderView = HeaderViewStyled()
return customHeaderView
- }
- allTemplates[index] = template
-}
+ }
+ allTemplates[index] = template
+}
let cometChatMessages = CometChatMessageList()
cometChatMessages.set(templates: allTemplates)
```
-
-
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-***
+---
-#### Content view
+#### Content View
The `template.contentView` method of MessageTemplate allows you to add a custom view to the content of your message bubbles. In the example below, we will add a custom `custom_message_view_file` to the content view of every text message in the MessageList.
@@ -361,9 +380,8 @@ The `template.contentView` method of MessageTemplate allows you to add a custom
-
-
-```swift custom_message_view_file
+
+```swift
import UIKit
import CometChatSDK
import CometChatUIKitSwift
@@ -375,7 +393,7 @@ class ContentViewStyled: UIView {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
imageView.clipsToBounds = true
- imageView.layer.cornerRadius = 8 // For rounded corners
+ imageView.layer.cornerRadius = 8
imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
}()
@@ -411,7 +429,7 @@ class ContentViewStyled: UIView {
// MARK: - Setup View
private func setupView() {
- backgroundColor = UIColor.systemGray6 // Light gray background
+ backgroundColor = UIColor.systemGray6
layer.cornerRadius = 12
layer.masksToBounds = true
@@ -425,11 +443,10 @@ class ContentViewStyled: UIView {
// MARK: - Constraints
private func setupConstraints() {
NSLayoutConstraint.activate([
- // Product Image View Constraints
productImageView.topAnchor.constraint(equalTo: topAnchor, constant: 16),
productImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
productImageView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
- productImageView.heightAnchor.constraint(equalTo: productImageView.widthAnchor), // Keep it square
+ productImageView.heightAnchor.constraint(equalTo: productImageView.widthAnchor),
buyNowButton.topAnchor.constraint(equalTo: productImageView.bottomAnchor, constant: 16),
buyNowButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
@@ -450,49 +467,46 @@ class ContentViewStyled: UIView {
}
}
```
-
-
-```swift Swift
+```swift
var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.contentView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- let customView = ContentViewStyled()
- return customView
- }
- allTemplates[index] = template
-}
+
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.contentView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ let customView = ContentViewStyled()
+ return customView
+ }
+ allTemplates[index] = template
+}
let cometChatMessages = CometChatMessageList()
cometChatMessages.set(templates: allTemplates)
```
-
-
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-***
+---
#### Bottom View
-The `template.bottomView `method of MessageTemplate allows you to add a custom button view to your message bubbles. In the example below, we will add a custom UIView `custom_bottom_view_file` to the bottom view of every text message in the MessageList.
+The `template.bottomView` method of MessageTemplate allows you to add a custom button view to your message bubbles. In the example below, we will add a custom UIView `custom_bottom_view_file` to the bottom view of every text message in the MessageList.
-```swift custom_bottom_view_file
+
+
+```swift
import UIKit
class BottomViewStyled: UIView {
@@ -549,35 +563,34 @@ class BottomViewStyled: UIView {
}
}
```
+
+
-```swift Swift
+```swift
var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.bottomView = { (baseMessage: BaseMessage?, bubbleAlignment:MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- let customView = BottomViewStyled()
- return customView
- }
- allTemplates[index] = template
-}
+
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.bottomView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ let customView = BottomViewStyled()
+ return customView
+ }
+ allTemplates[index] = template
+}
let cometChatMessages = CometChatMessageList()
cometChatMessages.set(templates: allTemplates)
```
-
-
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-***
+---
#### Footer View
@@ -587,7 +600,9 @@ The `template.footerView` method of MessageTemplate allows you to add a footer v
-```swift custom_footer_view
+
+
+```swift
import UIKit
class FooterViewStyled: UIView {
@@ -613,7 +628,6 @@ class FooterViewStyled: UIView {
addSubview(reactionsStackView)
NSLayoutConstraint.activate([
-
reactionsStackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
reactionsStackView.topAnchor.constraint(equalTo: topAnchor, constant: 8),
reactionsStackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
@@ -633,39 +647,47 @@ class FooterViewStyled: UIView {
}
}
```
+
+
-```swift Swiftjavascript
+
+
+```swift
var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.footerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- let customView = FooterViewStyled()
- return customView
- }
- allTemplates[index] = template
-}
+
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.footerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ let customView = FooterViewStyled()
+ return customView
+ }
+ allTemplates[index] = template
+}
let cometChatMessages = CometChatMessageList()
cometChatMessages.set(templates: allTemplates)
```
+
+
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-***
+
+---
#### Bubble View
-The` template.bubbleView` method of MessageTemplate allows you to add a bubble view to your message bubbles. In the example below, we will add a custom UIView `custom_bubble_view` to the bubble view of every text message in the MessageList.
+The `template.bubbleView` method of MessageTemplate allows you to add a bubble view to your message bubbles. In the example below, we will add a custom UIView `custom_bubble_view` to the bubble view of every text message in the MessageList.
-```swift custom_bubble_view
+
+
+```swift
import UIKit
class CustomMessageView: UIView {
@@ -691,7 +713,7 @@ class CustomMessageView: UIView {
private let doubleTickImageView: UIImageView = {
let imageView = UIImageView()
- imageView.image = UIImage(named: "double_tick") // Add your double tick image here
+ imageView.image = UIImage(named: "double_tick")
imageView.contentMode = .scaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
@@ -717,6 +739,7 @@ class CustomMessageView: UIView {
// MARK: - Initialization
init(message: BaseMessage) {
super.init(frame: .zero)
+
// Add subviews
addSubview(bubbleView)
addSubview(timeStackView)
@@ -748,10 +771,13 @@ class CustomMessageView: UIView {
doubleTickImageView.widthAnchor.constraint(equalToConstant: 16),
doubleTickImageView.heightAnchor.constraint(equalToConstant: 16)
])
+
+ // Configure with message data
if let textMessage = message as? TextMessage {
messageLabel.text = textMessage.text
var status = "Sent"
doubleTickImageView.image = UIImage(named: "single-tick")
+
if textMessage.readAt > 0 {
status = "Read"
doubleTickImageView.image = UIImage(named: "message-read")
@@ -766,7 +792,6 @@ class CustomMessageView: UIView {
timeLabel.text = "\(time)"
}
-
}
required init?(coder: NSCoder) {
@@ -774,29 +799,34 @@ class CustomMessageView: UIView {
}
}
```
+
+
-```swift Swiftjavascript
+
+
+```swift
var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.bubbleView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- let customBubbleView = CustomBubbleView()
- return customBubbleView
- }
- allTemplates[index] = template
+
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.bubbleView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ let customBubbleView = CustomBubbleView()
+ return customBubbleView
+ }
+ allTemplates[index] = template
}
let cometChatMessages = CometChatMessages()
cometChatMessages.set(templates: allTemplates)
```
+
+
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-***
+---
#### Options List
@@ -808,16 +838,25 @@ However, if you wish to override or modify these options, you can use the `templ
-```swift Swiftphp
+
+
+```swift
var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+
for (index, template) in allTemplates.enumerated() {
var template = template
template.options = { message, group, controller in
let loggedInUser = CometChat.getLoggedInUser()
- var options = CometChatUIKit.getDataSource().getMessageOptions(loggedInUser: loggedInUser!, messageObject: message!, controller: controller, group: group)
+ var options = CometChatUIKit.getDataSource().getMessageOptions(
+ loggedInUser: loggedInUser!,
+ messageObject: message!,
+ controller: controller,
+ group: group
+ )
+
for (index, option) in (options ?? []).enumerated() {
if option.id == "replyInThread" {
-
+ // Create custom options
let forwardOption = CometChatMessageOption(id: "customOptionId", title: "Forward", icon: UIImage(systemName: "chevron.right"))
let favoriteOption = CometChatMessageOption(id: "favoriteOptionId", title: "Mark as Favorite", icon: UIImage(systemName: "star"))
let deleteOption = CometChatMessageOption(id: "deleteOptionId", title: "Delete", icon: UIImage(systemName: "trash"))
@@ -826,22 +865,21 @@ for (index, template) in allTemplates.enumerated() {
}
}
return options ?? []
-
}
allTemplates[index] = template
-}
+}
let cometChatMessages = CometChatMessageList()
cometChatMessages.set(templates: allTemplates)
```
+
+
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-***
+---
#### Status Info View
@@ -853,7 +891,9 @@ In the example below, we will integrate a custom UIView file named `custom_statu
-```swift custom_status_view
+
+
+```swift
import UIKit
import CometChatSDK
import CometChatUIKitSwift
@@ -871,7 +911,7 @@ class StatusInfoView: UIView {
private let doubleTickImageView: UIImageView = {
let imageView = UIImageView()
- imageView.image = UIImage(named: "double_tick") // Add your double tick image here
+ imageView.image = UIImage(named: "double_tick")
imageView.contentMode = .scaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
@@ -889,6 +929,7 @@ class StatusInfoView: UIView {
// MARK: - Initialization
init(baseMessage: BaseMessage) {
super.init(frame: .zero)
+
// Add subviews
addSubview(timeStackView)
timeStackView.addArrangedSubview(timeLabel)
@@ -906,9 +947,11 @@ class StatusInfoView: UIView {
doubleTickImageView.heightAnchor.constraint(equalToConstant: 16)
])
+ // Configure with message data
if let textMessage = baseMessage as? TextMessage {
var status = "Sent"
doubleTickImageView.image = UIImage(named: "single-tick")
+
if textMessage.readAt > 0 {
status = "Read"
doubleTickImageView.image = UIImage(named: "message-read")
@@ -930,103 +973,114 @@ class StatusInfoView: UIView {
}
}
```
+
+
-```swift Swift
+
+
+```swift
var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.statusInfoView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> UIView? in
- if let baseMessage = baseMessage {
- return CustomStatusView(baseMessage: baseMessage)
- }
- return nil
+
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.statusInfoView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> UIView? in
+ if let baseMessage = baseMessage {
+ return CustomStatusView(baseMessage: baseMessage)
}
+ return nil
+ }
allTemplates[index] = template
}
let cometChatMessages = CometChatMessages()
cometChatMessages.set(templates: allTemplates)
```
+
+
-
Ensure to pass and present `cometChatMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-***
+---
### New Template
-You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate. To add a new template, you can create a new one and then add it to the list of existing templates.
+Creating an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate. To add a new template, you can create a new one and then add it to the list of existing templates.
First, let's see how to send a custom message:
-```swift Swift
-//Creating a text template
-let textTemplate = CometChatUIKit.getDataSource()
- .getTextMessageTemplate()
+
+
+```swift
+// Creating a text template
+let textTemplate = CometChatUIKit.getDataSource().getTextMessageTemplate()
-// set content view for TextMessage template
+// Set content view for TextMessage template
textTemplate.contentView = { message, alignment, controller in
- // Create your own content view and return
- return UIView()
+ // Create your own content view and return
+ return UIView()
}
-// set bubble view for TextMessage template
+// Set bubble view for TextMessage template
textTemplate.bubbleView = { message, alignment, controller in
- // Create your own bubble view and return
- return UIView()
+ // Create your own bubble view and return
+ return UIView()
}
-//Creating an audio template
-let audioTemplate = CometChatUIKit.getDataSource()
- .getAudioMessageTemplate()
+// Creating an audio template
+let audioTemplate = CometChatUIKit.getDataSource().getAudioMessageTemplate()
-// set content view for AudioMessage template
+// Set content view for AudioMessage template
audioTemplate.contentView = { message, alignment, controller in
- // Create your own content view and return
- return UIView()
+ // Create your own content view and return
+ return UIView()
}
-// set bubble view for AudioMessage template
+// Set bubble view for AudioMessage template
audioTemplate.bubbleView = { message, alignment, controller in
- // Create your own bubble view and return
- return UIView()
+ // Create your own bubble view and return
+ return UIView()
}
+let type = "custom_template" // Replace with your own custom type
+let category = "custom_category" // Replace with your own category
+
+// Creating a custom message template
+// You can also set UI for bubbleView, headerView and footerView instead of nil
+let customMessageTemplate = CometChatMessageTemplate(
+ category: category,
+ type: type,
+ contentView: { message, alignment, controller in
+ return UIView() // Replace with your own UI for message list
+ },
+ bubbleView: nil,
+ headerView: nil,
+ footerView: nil
+) { message, alignment, controller in
+ return UIView() // Replace with your own UI for message composer
+} options: { message, group, controller in
+ return [CometChatMessageOption]() // Replace with your own options
+}
-let type = "custom_template"//replace this with your own custom type
-let category = "custom_category"//replace this with your own category
-
-//Creating a custom message template
-//You can also set UI for bubbleView, headerView and footerView instead of nil
-let customMessageTemplate =
- CometChatMessageTemplate(category: category, type: type, contentView: { message, alignment, controller in
- return UIView() //replace this with your own UI for message list
-
- }, bubbleView: nil, headerView: nil, footerView: nil) { message, alignment, controller in
- return UIView() //replace this with your own UI for message composer
- } options: { message, group, controller in
- return [CometChatMessageOption]() //replace this with your own options
- }
-
-//custom list of templates
+// Custom list of templates
let messageTypes = [
- textTemplate,
- audioTemplate,
- customMessageTemplate
- ]
+ textTemplate,
+ audioTemplate,
+ customMessageTemplate
+]
var templates = [(type: String, template: CometChatMessageTemplate)]()
for template in messageTypes {
- templates.append((type: template.type, template: template))
+ templates.append((type: template.type, template: template))
}
-//passing template list to cometchatMessages
- let messageList = CometChatMessageList()
- messageList.set(templates: templates)
+// Passing template list to message list
+let messageList = CometChatMessageList()
+messageList.set(templates: templates)
```
+
+
Find the example below:
@@ -1034,7 +1088,9 @@ Find the example below:
-```swift Swift
+
+
+```swift
import UIKit
class CustomBubbleView: UIView {
@@ -1044,9 +1100,9 @@ class CustomBubbleView: UIView {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
- imageView.layer.cornerRadius = 25 // Half of width/height to make it circular
+ imageView.layer.cornerRadius = 25
imageView.translatesAutoresizingMaskIntoConstraints = false
- imageView.image = UIImage(named: "profile_placeholder") // Replace with your image
+ imageView.image = UIImage(named: "profile_placeholder")
return imageView
}()
@@ -1072,7 +1128,7 @@ class CustomBubbleView: UIView {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
- imageView.image = UIImage(named: "double_tick") // Replace with your double-tick image
+ imageView.image = UIImage(named: "double_tick")
return imageView
}()
@@ -1200,9 +1256,19 @@ class CustomBubbleView: UIView {
}
}
```
+
+
+Make sure to set new type and category in the message Request builder in order to fetch those respective messages as shown in the example above.
+
-Make sure to set new type and category in to the message Request builder in order to fetch those respective messages as shown in the example below.
+---
-
+## Next Steps
+
+- [Message List](/ui-kit/ios/message-list) — Display and customize the message list
+- [Message Bubble Styling](/ui-kit/ios/message-bubble-styling) — Customize message bubble appearance
+- [Message Composer](/ui-kit/ios/message-composer) — Customize the message input component
+
+---
diff --git a/ui-kit/ios/methods.mdx b/ui-kit/ios/methods.mdx
index 9e57c6f5..6004762f 100644
--- a/ui-kit/ios/methods.mdx
+++ b/ui-kit/ios/methods.mdx
@@ -4,29 +4,25 @@ title: "Methods"
## Overview
-The UI Kit's core function is to extend the [CometChat SDK](/sdk/ios/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+The UI Kit's core function is to extend the [CometChat SDK](/sdk/ios/overview), translating raw data and functionality into visually appealing, easy-to-use UI components.
-To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real-time and ensure that the UI reflects the most current state of data.
+To effectively manage and synchronize UI elements and data across all components, the UI Kit uses internal events. These events enable real-time change tracking and ensure the UI reflects the most current state of data.
-The CometChat UI Kit has thoughtfully encapsulated the critical [CometChat SDK](/sdk/ios/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
+The CometChat UI Kit encapsulates critical [CometChat SDK](/sdk/ios/overview) methods within its wrapper to efficiently manage internal eventing. This abstraction layer simplifies interaction with the underlying SDK, making it more developer-friendly.
## Methods
-You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
+Access all public methods exposed by the CometChat UI Kit through the `CometChatUIKit` class.
### Init
-As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit.
-
-This initialization is a critical step that ensures the UI Kit and Chat SDK function correctly and as intended in your application. Typical practice is to make this one of the first lines of code executed in your application's lifecycle when it comes to implementing CometChat.
+You must invoke this method before using any other UI Kit methods. This initialization ensures the UI Kit and Chat SDK function correctly in your application. Best practice is to make this one of the first lines of code executed in your application's lifecycle.
-
-Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) to log in securely.
-
+Replace **APP_ID**, **REGION**, and **AUTH_KEY** with your CometChat App ID, Region, and Auth Key. The `Auth Key` is an optional property of the `UIKitSettings` class, intended primarily for proof-of-concept (POC) development or early stages of application development. For production, use [Auth Token](#login-using-auth-token) instead.
-Here's the table format for the properties available in `UIKitSettings`:
+#### UIKitSettings Properties
| Method | Type | Description |
| ------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
@@ -40,9 +36,7 @@ Here's the table format for the properties available in `UIKitSettings`:
| **setAIFeatures** | `List` | Sets the AI Features that need to be added in UI Kit |
| **setExtensions** | `List` | Sets the list of extension that need to be added in UI Kit |
-***
-
-The concluding code block:
+#### Example
@@ -63,18 +57,14 @@ CometChatUIKit.init(uiKitSettings: uikitSettings) { result in
}
}
```
-
-
-***
+---
### Login using Auth Key
-Only the `UID` of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
-
-The concluding code block:
+Only the `UID` of a user is needed to log in. This simple authentication procedure is useful for POC or development phases. For production apps, use [AuthToken](#login-using-auth-token) instead.
@@ -88,23 +78,19 @@ CometChatUIKit.login(uid: "uid") { (result) in
}
}
```
-
-
-***
+---
### Login using Auth Token
-This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
+This advanced authentication procedure does not use the Auth Key directly in your client code, ensuring better security.
1. [Create a User](https://api-explorer.cometchat.com/reference/creates-user) via the CometChat API when the user signs up in your app.
2. [Create an Auth Token](https://api-explorer.cometchat.com/reference/create-authtoken) via the CometChat API for the new user and save the token in your database.
3. Load the Auth Token in your client and pass it to the `login(authToken:)` method.
-The concluding code block:
-
```swift
@@ -117,18 +103,14 @@ CometChatUIKit.login(authToken: "your_authToken") { (result) in
}
}
```
-
-
-***
+---
### Logout
-The CometChat UI Kit and Chat SDK effectively handle the session of the logged-in user within the framework. Before a new user logs in, it is crucial to clean this data to avoid potential conflicts or unexpected behavior. This can be achieved by invoking the `.logout(user:)` function.
-
-The concluding code block:
+The CometChat UI Kit and Chat SDK handle the session of the logged-in user within the framework. Before a new user logs in, clean this data to avoid potential conflicts or unexpected behavior by invoking the `.logout(user:)` function.
@@ -144,18 +126,14 @@ CometChatUIKit.logout(user: user) { (result) in
}
}
```
-
-
-***
+---
### Create User
-As a developer, you can dynamically create users on CometChat using the `.create(user:)` function. This can be extremely useful for situations where users are registered or authenticated by your system and then need to be created on CometChat.
-
-The concluding code block:
+Dynamically create users on CometChat using the `.create(user:)` function. This is useful when users are registered or authenticated by your system and need to be created on CometChat.
@@ -171,20 +149,16 @@ CometChatUIKit.create(user: user) { result in
}
}
```
-
-
-***
+---
### Base Message
#### Text Message
-As a developer, if you need to send a text message to a single user or a group, you'll need to utilize the `sendTextMessage()` function. This function requires a `TextMessage` object as its argument, which contains the necessary information for delivering the message.
-
-The concluding code block:
+To send a text message to a single user or a group, use the `sendTextMessage()` function. This function requires a `TextMessage` object containing the necessary information for delivering the message.
@@ -198,20 +172,18 @@ textMessage.parentMessageId = parentMessageId
CometChatUIKit.sendTextMessage(message: textMessage)
```
-
-
-> It's essential to understand the difference between `CometChatUIKit.sendTextMessage()` and `CometChat.sendTextMessage()`. When you use `CometChatUIKit.sendTextMessage()`, it automatically adds the message to the [MessagesComponent](/ui-kit/android/message-header) and [ConversationsComponent](/ui-kit/android/conversations), taking care of all related cases for you. On the other hand, `CometChat.sendTextMessage()` only sends the message and doesn't automatically update these components in the UI Kit.
+
+`CometChatUIKit.sendTextMessage()` automatically adds the message to the [MessagesComponent](/ui-kit/ios/message-list) and [ConversationsComponent](/ui-kit/ios/conversations), handling all related cases for you. In contrast, `CometChat.sendTextMessage()` only sends the message without updating these UI Kit components.
+
-***
+---
#### Media Message
-As a developer, if you need to send a media message to a single user or a group, you'll need to utilize the `sendMediaMessage()` function. This function requires a `MediaMessage` object as its argument, which contains the necessary information for delivering the message.
-
-The concluding code block:
+To send a media message to a single user or a group, use the `sendMediaMessage()` function. This function requires a `MediaMessage` object containing the necessary information for delivering the message.
@@ -226,20 +198,18 @@ mediaMessage.parentMessageId = parentMessageId
CometChatUIKit.sendMediaMessage(message: MediaMessage)
```
-
-
-> It's essential to understand the difference between `CometChatUIKit.sendMediaMessage()` and `CometChat.sendMediaMessage()`. When you use `CometChatUIKit.sendMediaMessage()`, it automatically adds the message to the [MessagesComponent](/ui-kit/ios/message-header) and [ConversationsComponent](/ui-kit/ios/conversations), taking care of all related cases for you. On the other hand, `CometChat.sendMediaMessage()` only sends the message and doesn't automatically update these components in the UI Kit.
+
+`CometChatUIKit.sendMediaMessage()` automatically adds the message to the [MessagesComponent](/ui-kit/ios/message-list) and [ConversationsComponent](/ui-kit/ios/conversations), handling all related cases for you. In contrast, `CometChat.sendMediaMessage()` only sends the message without updating these UI Kit components.
+
-***
+---
#### Custom Message
-As a developer, if you need to send a custom message to a single user or a group, you'll need to utilize the `sendCustomMessage()` function. This function requires a `CustomMessage` object as its argument, which contains the necessary information for delivering the message.
-
-The concluding code block:
+To send a custom message to a single user or a group, use the `sendCustomMessage()` function. This function requires a `CustomMessage` object containing the necessary information for delivering the message.
@@ -254,22 +224,20 @@ customMessage.sender = CometChat.getLoggedInUser()
CometChatUIKit.sendCustomMessage(message: CustomMessage)
```
-
-
-> It's essential to understand the difference between `CometChatUIKit.sendCustomMessage()` and `CometChat.sendCustomMessage()`. When you use `CometChatUIKit.sendCustomMessage()`, it automatically adds the message to the [MessagesComponent](/ui-kit/ios/message-header) and [ConversationsComponent](/ui-kit/ios/conversations), taking care of all related cases for you. On the other hand, `CometChat.sendCustomMessage()` only sends the message and doesn't automatically update these components in the UI Kit.
+
+`CometChatUIKit.sendCustomMessage()` automatically adds the message to the [MessagesComponent](/ui-kit/ios/message-list) and [ConversationsComponent](/ui-kit/ios/conversations), handling all related cases for you. In contrast, `CometChat.sendCustomMessage()` only sends the message without updating these UI Kit components.
+
-***
+---
### Interactive Message
#### Form Message
-As a developer, if you need to send a Form message to a single user or a group, you'll need to utilize the `sendFormMessage()` function. This function requires a `FormMessage` object as its argument, which contains the necessary information to create a form bubble for that messages
-
-The concluding code block:
+To send a Form message to a single user or a group, use the `sendFormMessage()` function. This function requires a `FormMessage` object containing the necessary information to create a form bubble for that message.
@@ -295,18 +263,14 @@ CometChatUIKit.sendFormMessage(formMessage) { form in
print("CometChat exception: \(error)")
}
```
-
-
-***
+---
#### Card Message
-As a developer, if you need to send a Card message to a single user or a group, you'll need to utilize the `sendCardMessage()` function. This function requires a `CardMessage` object as its argument, which contains the necessary information to create a card bubble for the messages.
-
-The concluding code block:
+To send a Card message to a single user or a group, use the `sendCardMessage()` function. This function requires a `CardMessage` object containing the necessary information to create a card bubble for the message.
@@ -328,18 +292,14 @@ CometChatUIKit.sendCardMessage(cardMessage) { success in
print("CometChat exception: \(error)")
}
```
-
-
-***
+---
#### Scheduler Message
-As a developer, if you need to send a Scheduler message to a single user or a group, you'll need to utilize the `sendSchedulerMessage()` function. This function requires a `SchedulerMessage` object as its argument, which contains the necessary information to create a SchedulerMessage bubble for the messages.
-
-The concluding code block:
+To send a Scheduler message to a single user or a group, use the `sendSchedulerMessage()` function. This function requires a `SchedulerMessage` object containing the necessary information to create a scheduler bubble for the message.
@@ -355,9 +315,7 @@ CometChatUIKit.sendSchedulerMessage(schedulerMessage: schedulerMessage) { schedu
print("CometChat exception: \(error)")
}
```
-
-
-***
+---
diff --git a/ui-kit/ios/ongoing-call.mdx b/ui-kit/ios/ongoing-call.mdx
index f7715039..1870f8ba 100644
--- a/ui-kit/ios/ongoing-call.mdx
+++ b/ui-kit/ios/ongoing-call.mdx
@@ -10,13 +10,13 @@ The `Ongoing Call` is a [Component](/ui-kit/ios/components-overview#components)
-***
+---
## Usage
### Integration
-`CometChatOngoingCall` being a custom **view controller**, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+`CometChatOngoingCall` is a custom view controller that offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
@@ -29,50 +29,43 @@ cometChatOngoingCall.set(sessionID: sessionID)
cometChatOngoingCall.modalPresentationStyle = .fullScreen
self.present(cometChatOngoingCall, animated: true)
```
-
-
-
If you are already using a navigation controller, you can use the `pushViewController` function instead of presenting the view controller.
-
### Actions
[Actions](/ui-kit/ios/components-overview#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.
-##### 1. SetOnCallEnded
+#### 1. SetOnCallEnded
-The `setOnCallEnded` action is typically triggered when the call is ended, carrying out default actions. However, with the following code snippet, you can effortlessly customize or override this default behavior to meet your specific needs.
+The `setOnCallEnded` action is typically triggered when the call ends, carrying out default actions. You can customize or override this default behavior using the following code snippet:
```swift
let cometChatOngoingCall = CometChatOngoingCall()
.setOnCallEnded { call in
- //Perform Your Action
-
+ // Perform your action
}
```
-
-
-***
+---
### 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.
+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 the Chat SDK.
-You can adjust the `callSettingsBuilder` in the `OnGoing Call` Component to customize the OnGoing Call. Numerous options are available to alter the builder to meet your specific needs. For additional details on `CallSettingsBuilder`, please visit [CallSettingsBuilder](/sdk/ios/direct-calling).
+You can adjust the `callSettingsBuilder` in the OnGoing Call Component to customize the call. Numerous options are available to alter the builder to meet your specific needs. For additional details on `CallSettingsBuilder`, visit [CallSettingsBuilder](/sdk/ios/direct-calling).
-##### 1. CallSettingsBuilder
+#### 1. CallSettingsBuilder
-The [CallSettingsBuilder](/sdk/ios/direct-calling) enables you to filter and customize the call list based on available parameters in CallSettingsBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in [CallSettingsBuilder](/sdk/ios/direct-calling)
+The [CallSettingsBuilder](/sdk/ios/direct-calling) enables you to filter and customize the call list based on available parameters. This feature allows you to create more specific and targeted queries during the call.
| Methods | Description | Code |
| -------------------------------- | -------------------------------------------- | ----------------------------------------- |
@@ -98,9 +91,9 @@ The [CallSettingsBuilder](/sdk/ios/direct-calling) enables you to filter and cus
| **setVideoContainer** | Set the video container | `.setVideoContainer(NSMutableDictionary)` |
| **setVideoSettings** | Set the video settings | `.setVideoSettings(NSMutableDictionary)` |
-**Example**
+#### Example
-In the example below, we are applying a filter to the calls.
+In the example below, we are applying a filter to the calls:
@@ -116,24 +109,18 @@ let cometChatOngoingCall = CometChatOngoingCall()
cometChatOngoingCall.modalPresentationStyle = .fullScreen
self.present(cometChatOngoingCall, animated: true)
```
-
-
-
-Ensure to include an `NSMicrophoneUsageDescription` key with a descriptive string value in the app's Info.plist
-
+Ensure to include an `NSMicrophoneUsageDescription` key with a descriptive string value in the app's Info.plist.
-***
+---
### 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.
-
-Events emitted by the Ongoing Call component is as follows.
+[Events](/ui-kit/ios/components-overview#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 can be added or removed as needed.
| Event | Description |
| --------------- | ------------------------------------------------ |
@@ -142,67 +129,61 @@ Events emitted by the Ongoing Call component is as follows.
```swift
-// View controller from your project where you want to listen events.
+// View controller from your project where you want to listen to events
public class ViewController: UIViewController {
public override func viewDidLoad() {
super.viewDidLoad()
- // Subscribing for the listener to listen events from user module
+ // Subscribe to the listener for call events
CometChatCallEvents.addListener("UNIQUE_ID", self as CometChatCallEventListener)
}
-
}
- // Listener events from user module
-extension ViewController: CometChatCallEventListener {
+
+// Listener for call events
+extension ViewController: CometChatCallEventListener {
func onCallEnded(call: Call) {
- // Do Stuff
+ // Handle call ended
}
}
```
-```swift Emitting Group Events
-//emit this when logged in user cancels a call
+```swift Emitting Call Events
+// Emit this when logged in user ends a call
CometChatCallEvents.emitOnCallEnded(call: Call)
```
-
-
-***
-
-```swift View Controller
+```swift
public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events from user module
+ // Unsubscribe from the listener
CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
}
```
-
-
-***
+---
## 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.
+To fit your app's design requirements, you can customize the appearance of the component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
### Style
-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.
+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.
The OngoingCall component does not have any exposed Styles.
-***
+---
### 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 change text, set custom icons, and toggle the visibility of UI elements.
+These are 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.
@@ -214,28 +195,22 @@ let cometChatOngoingCall = CometChatOngoingCall()
cometChatOngoingCall.modalPresentationStyle = .fullScreen
self.present(cometChatOngoingCall, animated: true)
```
-
-
-
-If you are already using a navigation controller, you can use the pushViewController function instead of presenting the view controller.
-
+If you are already using a navigation controller, you can use the `pushViewController` function instead of presenting the view controller.
-Below is a list of customizations along with corresponding code snippets
-
| Property | Description | Code |
| ---------------- | ---------------------------------------------- | ------------------------- |
-| **CallWorkFlow** | Sets the call type to default and direct. | `CallWorkFlow` |
-| **Session Id** | Sets the user object for CometChatOngoingCall. | `.set(sessionId: String)` |
+| **CallWorkFlow** | Sets the call type to default or direct. | `CallWorkFlow` |
+| **Session Id** | Sets the session ID for CometChatOngoingCall. | `.set(sessionId: String)` |
### 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.
+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 own views, layouts, and UI elements and then incorporate those into the component.
The `OngoingCall` component does not provide additional functionalities beyond this level of customization.
-***
+---
diff --git a/ui-kit/ios/outgoing-call.mdx b/ui-kit/ios/outgoing-call.mdx
index 11519e75..822de157 100644
--- a/ui-kit/ios/outgoing-call.mdx
+++ b/ui-kit/ios/outgoing-call.mdx
@@ -4,19 +4,19 @@ title: "Outgoing Call"
## Overview
-The `Outgoing Call` [Component](/ui-kit/ios/components-overview#components) is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This component typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress.
+The `Outgoing Call` [Component](/ui-kit/ios/components-overview#components) is a visual representation of a user-initiated call, whether voice or video. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This component typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress.
-***
+---
## Usage
### Integration
-`CometChatOutgoingCall` being a custom **view controller**, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+`CometChatOutgoingCall` is a custom view controller that offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
@@ -27,74 +27,62 @@ cometChatOutgoingCall.set(call: call)
cometChatOutgoingCall.modalPresentationStyle = .fullScreen
self.present(cometChatOutgoingCall, animated: true)
```
-
-
-
If you are already using a navigation controller, you can use the `pushViewController` function instead of presenting the view controller.
-
### Actions
[Actions](/ui-kit/ios/components-overview#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.
-##### 1. SetOnCancelClick
+#### 1. SetOnCancelClick
-The `setOnCancelClick` action is typically triggered when the call is ended, carrying out default actions. However, with the following code snippet, you can effortlessly customize or override this default behavior to meet your specific needs.
+The `setOnCancelClick` action is typically triggered when the call is canceled, carrying out default actions. You can customize or override this default behavior using the following code snippet:
```swift
let cometChatOutgoingCall = CometChatOutgoingCall()
cometChatOutgoingCall.set(onCancelClick: { call, controller in
-//Perform Your Action
+ // Perform your action
})
```
-
-
-***
+---
-##### 2. OnError
+#### 2. OnError
-You can customize this behavior by using the provided code snippet to override the `On Error` and improve error handling.
+You can customize error handling behavior by using the provided code snippet to override the `onError` callback:
```swift
-
let incomingCallConfiguration = CometChatOutgoingCall()
-.set(onError:{ error in
-//Perform Your Action
-
+.set(onError: { error in
+ // Perform your action
})
```
-
-
-***
+---
### 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.
+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 the Chat SDK.
The OutgoingCall component does not have any exposed filters.
-***
+---
### 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.
-
-Events emitted by the Outgoing call component is as follows.
+[Events](/ui-kit/ios/components-overview#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 can be added or removed as needed.
| Event | Description |
| -------------------------- | -------------------------------------------- |
@@ -104,70 +92,64 @@ Events emitted by the Outgoing call component is as follows.
```swift
-// View controller from your project where you want to listen events.
+// View controller from your project where you want to listen to events
public class ViewController: UIViewController {
public override func viewDidLoad() {
super.viewDidLoad()
- // Subscribing for the listener to listen events from user module
+ // Subscribe to the listener for call events
CometChatCallEvents.addListener("UNIQUE_ID", self as CometChatCallEventListener)
}
-
}
- // Listener events from user module
-extension ViewController: CometChatCallEventListener {
+
+// Listener for call events
+extension ViewController: CometChatCallEventListener {
func onOutgoingCallAccepted(call: Call) {
- // Do Stuff
+ // Handle call accepted
}
- func onOutgoingCallRejected(call: Call){
- // Do Stuff
+ func onOutgoingCallRejected(call: Call) {
+ // Handle call rejected
}
}
```
-```swift Emitting Group Events
-//emit this when the other user accepts the call
+```swift Emitting Call Events
+// Emit this when the other user accepts the call
CometChatCallEvents.emitOnOutgoingCallAccepted(call: Call)
-//emit this when the other user rejects a call
+// Emit this when the other user rejects a call
CometChatCallEvents.emitOnOutgoingCallRejected(call: Call)
```
-
-
-***
-
-```swift View Controller
+```swift
public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events from user module
+ // Unsubscribe from the listener
CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
}
```
-
-
-***
+---
## 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.
+To fit your app's design requirements, you can customize the appearance of the component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
### Style
-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.
+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. OutgoingCall Style
+#### 1. OutgoingCall Style
-You can customize the appearance of the `OutgoingCall` Component by applying the `OutgoingCallStyle` to it using the following code snippet.
+You can customize the appearance of the `OutgoingCall` Component by applying the `OutgoingCallStyle` to it.
**Global level styling**
@@ -183,9 +165,7 @@ CometChatOutgoingCall.style.callLabelFont = UIFont(name: "Times-New-Roman", size
CometChatOutgoingCall.style.declineButtonCornerRadius = .init(cornerRadius: 8)
CometChatOutgoingCall.avatarStyle = customAvatarStyle
```
-
-
**Instance level styling**
@@ -206,16 +186,14 @@ let outgoingCall = CometChatOutgoingCall()
outgoingCall.style = outgoingCallStyle
outgoingCall.avatarStyle = customAvatarStyle
```
-
-
-List of properties exposed by OutgoingCallStyle
+#### OutgoingCallStyle Properties
| Property | Description | Code |
| ------------------------------ | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
@@ -230,15 +208,15 @@ List of properties exposed by OutgoingCallStyle
| `declineButtonBackgroundColor` | Sets the background color for the decline button in the outgoing call view. | `CometChatOutgoingCall.style.declineButtonBackgroundColor = UIColor()` |
| `declineButtonIconTint` | Sets the tint color for the decline button icon. | `CometChatOutgoingCall.style.declineButtonIconTint = UIColor()` |
| `declineButtonIcon` | Sets the icon for the decline button. | `CometChatOutgoingCall.style.declineButtonIcon = UIImage(systemName: "phone.down.fill")` |
-| `declineButtonCornerRadius` | Sets the corner radius for decline button. | `CometChatOutgoingCall.style.declineButtonCornerRadius: CometChatCornerStyle?` |
-| `declineButtonBorderColor` | Sets the border color for decline button. | `CometChatOutgoingCall.style.declineButtonBorderColor: UIColor?` |
-| `declineButtonBorderWidth` | Sets the border width for decline button. | `CometChatOutgoingCall.style.declineButtonBorderWidth: CGFloat?` |
+| `declineButtonCornerRadius` | Sets the corner radius for the decline button. | `CometChatOutgoingCall.style.declineButtonCornerRadius: CometChatCornerStyle?` |
+| `declineButtonBorderColor` | Sets the border color for the decline button. | `CometChatOutgoingCall.style.declineButtonBorderColor: UIColor?` |
+| `declineButtonBorderWidth` | Sets the border width for the decline button. | `CometChatOutgoingCall.style.declineButtonBorderWidth: CGFloat?` |
-***
+---
### Functionality
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component.
+These are small functional customizations that allow you to fine-tune the overall experience of the component.
| Property | Description | Code |
| ---------------------- | --------------------------------------- | ------------------------------- |
@@ -247,11 +225,11 @@ These are a set of small functional customizations that allow you to fine-tune t
### 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.
+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 own views, layouts, and UI elements and then incorporate those into the component.
-#### SetAvatarVieww
+#### SetAvatarView
-With this function, you can assign a custom view to the avatar of OutgoingCall Component.
+With this function, you can assign a custom view to the avatar of the OutgoingCall Component.
@@ -261,20 +239,20 @@ cometChatOutgoingCall.set(avatarView: { call in
return customView
})
```
-
-
-Demonstration
+**Demonstration**
-You can create a CustomAvatarView as a custom `UIView`.
+You can create a `CustomAvatarView` as a custom `UIView`:
-```swift swift
+
+
+```swift
import UIKit
class CustomAvatarView: UIView {
@@ -339,12 +317,14 @@ class CustomAvatarView: UIView {
}
}
```
+
+
-***
+---
#### SetCancelView
-You can modify the cancel call view of a Outgoing call component using the property below.
+You can modify the cancel call view of the Outgoing call component using the property below:
@@ -354,18 +334,16 @@ cometChatOutgoingCall.set(cancelView: { call in
return view
})
```
-
-
-Demonstration
+**Demonstration**
-You can create a CustomCancelView as a custom `UIView`.
+You can create a `CustomCancelView` as a custom `UIView`:
@@ -420,38 +398,34 @@ class EndCallButton: UIButton {
}
}
```
-
-
-***
+---
#### SetTitleView
-You can customize the title view of a outgoing call component using the property below.
+You can customize the title view of the outgoing call component using the property below:
```swift
cometChatOutgoingCall.set(titleView: { call in
let view = CustomTitleView()
- view.configure(call:call)
+ view.configure(call: call)
return view
})
```
-
-
-Demonstration
+**Demonstration**
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView`:
@@ -471,27 +445,24 @@ class CustomTitleView: UILabel {
}
private func setupView() {
-
font = UIFont.boldSystemFont(ofSize: 22)
textAlignment = .center
translatesAutoresizingMaskIntoConstraints = false
}
- func configure(call:Call){
- text = "\(call.callInitiator <> \(call.receiver))"
+ func configure(call: Call) {
+ text = "\(call.callInitiator) <> \(call.receiver)"
}
}
```
-
-
-***
+---
#### SetSubtitleView
-You can modify the subtitle view of a outgoing call component using the property below.
+You can modify the subtitle view of the outgoing call component using the property below:
@@ -501,18 +472,16 @@ cometChatOutgoingCall.set(subtitleView: { call in
return view
})
```
-
-
-Demonstration
+**Demonstration**
-You can create a CustomSubtitleView as a custom `UIView`.
+You can create a `CustomSubtitleView` as a custom `UIView`:
@@ -558,9 +527,7 @@ class CustomSubtitleView: UIStackView {
}
}
```
-
-
-***
+---
diff --git a/ui-kit/ios/overview.mdx b/ui-kit/ios/overview.mdx
index aa00a339..3d54a09b 100644
--- a/ui-kit/ios/overview.mdx
+++ b/ui-kit/ios/overview.mdx
@@ -1,32 +1,33 @@
---
title: "CometChat UI Kit For iOS"
sidebarTitle: "Overview"
+description: "Integrate chat functionality into iOS applications with prebuilt, modular, and customizable UI components"
---
-The **CometChat UI Kit** for iOS provides a seamless solution to integrate chat functionality into your iOS applications. With prebuilt, modular, and customizable UI components, it accelerates development and ensures your chat application is robust, scalable, and tailored to your needs.
+The CometChat UI Kit for iOS provides a seamless solution to integrate chat functionality into your iOS applications. With prebuilt, modular, and customizable UI components, it accelerates development and ensures your chat application is robust, scalable, and tailored to your needs.
-***
+---
-## **Why Choose CometChat UI Kit?**
+## Why Choose CometChat UI Kit?
-* **Effortless Integration** – Ready-to-use SwiftUI components for rapid implementation.
-* **Highly Customizable** – Adapt UI components easily to match your brand and user experience requirements.
-* **Built on Core SDK** – Leverages the powerful [CometChat iOS SDK](/sdk/ios/overview) for reliable performance.
-* **Scalable & Reliable** – Optimized for enterprise-grade applications.
+- Effortless Integration: Ready-to-use SwiftUI components for rapid implementation
+- Highly Customizable: Adapt UI components to match your brand and user experience requirements
+- Built on Core SDK: Leverages the powerful [CometChat iOS SDK](/sdk/ios/overview) for reliable performance
+- Scalable & Reliable: Optimized for enterprise-grade applications
-***
+---
-## **User Interface Preview**
+## User Interface Preview
-***
+---
-## **Download the CometChat Demo App**
+## Download the CometChat Demo App
-Get started with the **CometChat UI Kit** on your mobile device:
+Get started with the CometChat UI Kit on your mobile device:
**Download from the App Store**
@@ -39,36 +40,35 @@ Get started with the **CometChat UI Kit** on your mobile device:
-**Tip:** On iOS, simply open the camera app and scan the QR code to install directly.
-
+On iOS, open the camera app and scan the QR code to install directly.
-***
+---
-## **Getting Started**
+## Getting Started
-Before integrating the CometChat UI Kit, familiarize yourself with the key concepts and features offered by CometChat’s platform.
+Before integrating the CometChat UI Kit, familiarize yourself with the key concepts and features offered by CometChat's platform:
-* Review the [Key Concepts](/fundamentals/key-concepts) to understand essential terminology and features.
-* Follow the [Getting Started Guide](/ui-kit/ios/getting-started) for detailed steps on initial setup and integration.
+- Review the [Key Concepts](/fundamentals/key-concepts) to understand essential terminology and features
+- Follow the [Getting Started Guide](/ui-kit/ios/getting-started) for detailed steps on initial setup and integration
-***
+---
-## **Integration and Customization**
+## Integration and Customization
The CometChat UI Kit consists of modular SwiftUI components that can be integrated effortlessly into your app, offering flexible customization:
-* **Prebuilt UI Components:** Ready-to-use chat UI elements.
-* **Modular Structure:** Easy to integrate and modify.
-* **Customization Options:** Highly configurable to fit your brand and UI requirements.
+- Prebuilt UI Components: Ready-to-use chat UI elements
+- Modular Structure: Easy to integrate and modify
+- Customization Options: Highly configurable to fit your brand and UI requirements
Explore more about UI customization in the [Customization Guide](/ui-kit/ios/theme-introduction).
-***
+---
-## **Helpful Resources**
+## Helpful Resources
-Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process.
+Explore these essential resources to gain a deeper understanding of CometChat UI Kits and streamline your integration process.
#### 🚀 iOS Sample App
@@ -88,13 +88,13 @@ UI design resources for customization and prototyping.
[View on Figma](https://www.figma.com/community/file/1444325479486807899/cometchat-ui-kit-for-ios)
-***
+---
-## **💡 Need Help?**
+## Need Help?
If you need assistance, check out:
-* 💬 [Developer Community](http://community.cometchat.com/)
-* ❓ [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
+- 💬 [Developer Community](http://community.cometchat.com/)
+- ❓ [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
-***
+---
diff --git a/ui-kit/ios/property-changes.mdx b/ui-kit/ios/property-changes.mdx
index 42d56899..695f1d34 100644
--- a/ui-kit/ios/property-changes.mdx
+++ b/ui-kit/ios/property-changes.mdx
@@ -1,8 +1,12 @@
---
title: "Property Changes"
+sidebarTitle: "Property Changes"
+description: "Migration guide for property changes between UI Kit versions for iOS"
---
+This document outlines the property changes between v4 and v5 of the CometChat UI Kit for iOS. Use this guide to update your implementation when migrating to the latest version.
+---
## Conversations
@@ -15,23 +19,23 @@ title: "Property Changes"
| hideLoadingState | Bool | Hides the loading state indicator. |
| hideDeleteConversationOption | Bool | Hides the option to delete a conversation. |
| hideGroupType | Bool | Hides the group type indicator (private/public). |
-| backgroundDrawable | UIImage | Used to set a background image for the conversation screen. |
-| separatorColor | UIColor | Used to set the color of separators in the conversation list. |
-| separatorWidth | CGFloat | Used to set the width of separators in the conversation list. |
-| errorTextColor | UIColor | Used to set the color of error messages in the conversation UI. |
-| lastMessageTextColor | UIColor | Used to set the color of the last message text in the conversation list. |
-| typingIndicatorColor | UIColor | Used to set the color of the typing indicator in the conversation UI. |
-| lastMessageAppearance | UIFont | Used to customize the appearance of the last message text in the list. |
-| threadIndicatorAppearance | UIFont | Used to customize the appearance of thread indicators in the list. |
-| dateTimeFormatter.time | Closure | Called to format a timestamp as a standard time (e.g., "12:30 PM"). |
-| dateTimeFormatter.today | Closure | Called when rendering messages sent today. |
-| dateTimeFormatter.yesterday | Closure | Called for yesterday's messages. |
-| dateTimeFormatter.lastweek | Closure | Called for messages within the last week. |
-| dateTimeFormatter.otherDay | Closure | Called for dates older than last week. |
-| dateTimeFormatter.minute | Closure | Called when referring to "a minute ago". |
-| dateTimeFormatter.minutes | Closure | Called for "x minutes ago". |
-| dateTimeFormatter.hour | Closure | Called for "an hour ago". |
-| dateTimeFormatter.hours | Closure | Called for "x hours ago". |
+| backgroundDrawable | UIImage | Sets a background image for the conversation screen. |
+| separatorColor | UIColor | Sets the color of separators in the conversation list. |
+| separatorWidth | CGFloat | Sets the width of separators in the conversation list. |
+| errorTextColor | UIColor | Sets the color of error messages in the conversation UI. |
+| lastMessageTextColor | UIColor | Sets the color of the last message text in the conversation list. |
+| typingIndicatorColor | UIColor | Sets the color of the typing indicator in the conversation UI. |
+| lastMessageAppearance | UIFont | Customizes the appearance of the last message text in the list. |
+| threadIndicatorAppearance | UIFont | Customizes the appearance of thread indicators in the list. |
+| dateTimeFormatter.time | Closure | Formats a timestamp as a standard time (e.g., "12:30 PM"). |
+| dateTimeFormatter.today | Closure | Formats messages sent today. |
+| dateTimeFormatter.yesterday | Closure | Formats yesterday's messages. |
+| dateTimeFormatter.lastweek | Closure | Formats messages within the last week. |
+| dateTimeFormatter.otherDay | Closure | Formats dates older than last week. |
+| dateTimeFormatter.minute | Closure | Formats "a minute ago". |
+| dateTimeFormatter.minutes | Closure | Formats "x minutes ago". |
+| dateTimeFormatter.hour | Closure | Formats "an hour ago". |
+| dateTimeFormatter.hours | Closure | Formats "x hours ago". |
| set(OnItemLongClick:) | Method | Triggered when you long press on a ListItem of the Conversations component. |
| set(onEmpty:) | Method | Triggered when the conversations list is empty. |
@@ -48,44 +52,47 @@ title: "Property Changes"
| setOnSelection | set(onSelection:) | Method | Triggered upon completion of selection. |
| setOnError | set(onError:) | Method | Override action when an error occurs. |
+
### Removed Properties
| Name | Type | Description |
| -------------------- | ------------ | ----------------------------------------------------------------------------------- |
-| hide(separator: Bool) | Bool | Used to control visibility of separators in the list view (replaced by style properties). |
-| disable(typing: Bool) | Bool | Used to toggle visibility of typing indicator. |
-| setDatePattern | Method | Method to set custom date pattern (replaced by dateTimeFormatter object). |
+| hide(separator: Bool) | Bool | Controlled visibility of separators (replaced by style properties). |
+| disable(typing: Bool) | Bool | Toggled visibility of typing indicator. |
+| setDatePattern | Method | Set custom date pattern (replaced by dateTimeFormatter object). |
| protectedGroupIcon | UIImage | Icon shown for password protected groups. |
| sentIcon | UIImage | Receipt icon shown when message status is sent. |
| deliveredIcon | UIImage | Receipt icon shown when message status is delivered. |
| readIcon | UIImage | Receipt icon shown when message status is read. |
+---
+
## Users
### New Properties
| Name | Type | Description |
| -------------------------------- | --------------------------------- | -------------------------------------------------------------------------------------------------- |
-| set(options:) | (User) -> [CometChatUserOption] | Used to define custom options for each user. |
-| add(options:) | [CometChatUserOption] | Used to dynamically add options to users. |
-| set(leadingView:) | (User) -> UIView | Custom leading view to be rendered for each user in the fetched list. |
-| set(titleView:) | (User) -> UIView | Custom title view to be rendered for each user in the fetched list. |
-| set(trailView:) | (User) -> UIView | Custom trailing view to be rendered for each user in the fetched list. |
+| set(options:) | (User) -> [CometChatUserOption] | Defines custom options for each user. |
+| add(options:) | [CometChatUserOption] | Dynamically adds options to users. |
+| set(leadingView:) | (User) -> UIView | Custom leading view for each user in the fetched list. |
+| set(titleView:) | (User) -> UIView | Custom title view for each user in the fetched list. |
+| set(trailView:) | (User) -> UIView | Custom trailing view for each user in the fetched list. |
| set(onEmpty:) | () -> Void | Triggered when the users list is empty. |
| hideErrorView | Bool | Hides the error state view. |
| hideNavigationBar | Bool | Hides or shows the navigation bar. |
| hideBackButton | Bool | Hides the back button. |
| hideLoadingState | Bool | Hides the loading state indicator. |
| hideUserStatus | Bool | Hides the online/offline status of users. |
-| hideSectionHeader | Bool | Hides the section header for table view indicating initials of users. |
+| hideSectionHeader | Bool | Hides the section header indicating initials of users. |
| hideSearch | Bool | Hides the search bar. |
| set(searchKeyword:) | String | Sets a search keyword for filtering users. |
| set(userRequestBuilder:) | UsersRequest.UsersRequestBuilder | Sets a custom request builder for fetching users. |
| set(searchRequestBuilder:) | UsersRequest.UsersRequestBuilder | Sets a custom request builder for searching users. |
| listItemSelectedImage | UIImage | Image shown when a list item is selected. |
| listItemDeSelectedImage | UIImage | Image shown when a list item is deselected. |
-| searchIconTintColor | UIColor | Tint color for the search icon in the search bar. |
-| searchBarStyle | UISearchBar.Style | Style of the search bar (e.g., default, prominent). |
+| searchIconTintColor | UIColor | Tint color for the search icon. |
+| searchBarStyle | UISearchBar.Style | Style of the search bar. |
| searchTintColor | UIColor? | Tint color for the search bar elements. |
| searchBarTintColor | UIColor? | Background color for the search bar (excluding text input). |
| searchBarPlaceholderTextColor | UIColor? | Color of the placeholder text in the search bar. |
@@ -99,23 +106,23 @@ title: "Property Changes"
| borderWidth | CGFloat | Border width for the search bar or container. |
| borderColor | UIColor | Color of the border. |
| cornerRadius | CometChatCornerStyle | Corner radius for search bar or other elements. |
-| titleColor | UIColor | Text color for title elements within the list or navigation bar. |
+| titleColor | UIColor | Text color for title elements. |
| titleFont | UIFont | Font for title text. |
| largeTitleColor | UIColor | Text color for large titles. |
| largeTitleFont | UIFont? | Font for large titles. |
| navigationBarTintColor | UIColor | Tint color for the navigation bar background. |
-| navigationBarItemsTintColor | UIColor | Tint color for navigation bar items (buttons, icons). |
-| errorTitleTextFont | UIFont | Font for the error title displayed in UI. |
+| navigationBarItemsTintColor | UIColor | Tint color for navigation bar items. |
+| errorTitleTextFont | UIFont | Font for the error title. |
| errorTitleTextColor | UIColor | Text color for the error title. |
| errorSubTitleFont | UIFont | Font for the subtitle of error messages. |
| errorSubTitleTextColor | UIColor | Text color for the subtitle of error messages. |
-| retryButtonTextColor | UIColor | Text color for the retry button in error states. |
+| retryButtonTextColor | UIColor | Text color for the retry button. |
| retryButtonTextFont | UIFont | Font for the retry button text. |
| retryButtonBackgroundColor | UIColor | Background color for the retry button. |
| retryButtonBorderColor | UIColor | Border color for the retry button. |
| retryButtonBorderWidth | CGFloat | Border width for the retry button. |
| retryButtonCornerRadius | CometChatCornerStyle? | Corner radius for the retry button. |
-| emptyTitleTextFont | UIFont | Font for the empty state title (when no users/items are present). |
+| emptyTitleTextFont | UIFont | Font for the empty state title. |
| emptyTitleTextColor | UIColor | Text color for the empty state title. |
| emptySubTitleFont | UIFont | Font for the subtitle in the empty state. |
| emptySubTitleTextColor | UIColor | Text color for the subtitle in the empty state. |
@@ -131,39 +138,42 @@ title: "Property Changes"
| listItemSelectionImageTint | UIColor | Tint color for selection indicator in list items. |
| listItemSelectedBackground | UIColor | Background color for selected list items. |
| listItemDeSelectedImageTint | UIColor | Tint color for the deselected state image. |
-| headerTitleColor | UIColor | Text color for section header titles in the list. |
+| headerTitleColor | UIColor | Text color for section header titles. |
| headerTitleFont | UIFont | Font for section header titles. |
### Renamed Properties
| Name | Type | Description | Old Name |
| ---------------------- | ------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------- |
-| set(listItemView:) | (User) -> UIView | Custom list item view to be rendered for each user in the list. | setListItemView |
-| set(subtitleView:) | (User) -> UIView | Custom subtitle view to be rendered for each user in the fetched list. | setSubtitleView |
-| set(emptyView:) | UIView | Custom empty state view to be displayed when the user list is empty. | setEmptyStateView |
-| set(errorView:) | UIView | Custom error state view to be displayed when an error occurs while fetching users. | setErrorStateView |
-| set(onItemClick:) | (User) -> Void | Triggered when you click on a ListItem of the users component. | setOnItemClick |
-| set(onItemLongClick:) | (User) -> Void | Triggered when you long press on a ListItem of the users component. | setOnItemLongClick |
-| set(onBack:) | () -> Void | Triggered when the back button is pressed in the users component. | setOnBack |
-| set(onSelection:) | ([User]) -> Void | Triggered on every selection when selection mode is set to multiple or single. | setOnSelection |
-| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs in the users component. | setOnError |
+| set(listItemView:) | (User) -> UIView | Custom list item view for each user in the list. | setListItemView |
+| set(subtitleView:) | (User) -> UIView | Custom subtitle view for each user in the fetched list. | setSubtitleView |
+| set(emptyView:) | UIView | Custom empty state view when the user list is empty. | setEmptyStateView |
+| set(errorView:) | UIView | Custom error state view when an error occurs while fetching users. | setErrorStateView |
+| set(onItemClick:) | (User) -> Void | Triggered when you click on a ListItem. | setOnItemClick |
+| set(onItemLongClick:) | (User) -> Void | Triggered when you long press on a ListItem. | setOnItemLongClick |
+| set(onBack:) | () -> Void | Triggered when the back button is pressed. | setOnBack |
+| set(onSelection:) | ([User]) -> Void | Triggered on every selection when selection mode is set. | setOnSelection |
+| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. | setOnError |
### Removed Properties
| Name | Type | Description |
| ------------------------ | ---------------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| set(loadingStateView:) | UIActivityIndicatorView.Style | Used to set size of loading view icon while fetching the list of users. |
-| hide(errorText:) | Bool | Used to hide error text on fetching users. |
-| show(backButton:) | Bool | Used to toggle visibility for back button. |
-| set(searchIcon:) | UIImage? | Used to set search Icon in the search field. |
-| hide(search:) | Bool | Used to toggle visibility for search box. |
-| hide(separator:) | Bool | Used to hide the divider separating the user items. |
-| disable(userPresence:) | Bool | Used to control visibility of user indicator shown if user is online. |
-| set(emptyStateText:) | String | Used to set a custom text response when fetching the users has returned an empty list. |
-| set(errorStateText:) | String | Used to set a custom text response when some error occurs on fetching the list of users. |
-| set(searchPlaceholder:) | String | Used to set search placeholder text. |
-| set(title:mode:) | String, UINavigationItem.LargeTitleDisplayMode | Used to set title in the app with display mode. |
-| setOnLoad | ([User]) -> Void | Gets triggered when a user list is fully fetched and displayed on the screen. |
+| set(loadingStateView:) | UIActivityIndicatorView.Style | Set size of loading view icon while fetching users. |
+| hide(errorText:) | Bool | Hide error text on fetching users. |
+| show(backButton:) | Bool | Toggle visibility for back button. |
+| set(searchIcon:) | UIImage? | Set search icon in the search field. |
+| hide(search:) | Bool | Toggle visibility for search box. |
+| hide(separator:) | Bool | Hide the divider separating user items. |
+| disable(userPresence:) | Bool | Control visibility of user online indicator. |
+| set(emptyStateText:) | String | Set custom text when fetching users returns an empty list. |
+| set(errorStateText:) | String | Set custom text when an error occurs fetching users. |
+| set(searchPlaceholder:) | String | Set search placeholder text. |
+| set(title:mode:) | String, UINavigationItem.LargeTitleDisplayMode | Set title with display mode. |
+| setOnLoad | ([User]) -> Void | Triggered when a user list is fully fetched and displayed. |
+
+
+---
## Groups
@@ -171,62 +181,62 @@ title: "Property Changes"
| Name | Type | Description |
| --------------------------------- | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| set(onSelection:) | Closure | Gets triggered when selection mode is set to multiple or single. Triggers on every selection and returns the list of selected groups. |
-| set(onEmpty:) | Closure | Gets triggered when the groups list is empty in CometChatGroups. |
-| setOnLoad | Closure | Gets triggered when a group list is fully fetched and going to be displayed on the screen. Returns the list of groups to be displayed. |
+| set(onSelection:) | Closure | Triggered when selection mode is set. Returns the list of selected groups. |
+| set(onEmpty:) | Closure | Triggered when the groups list is empty. |
+| setOnLoad | Closure | Triggered when a group list is fully fetched and displayed. |
| listItemSelectedImage | UIImage | Check box image when a list item is selected. |
| listItemDeSelectedImage | UIImage | Check box image when a list item is deselected. |
-| searchIconTintColor | UIColor | Tint color for the search icon, defaults to the secondary icon color from CometChatTheme. |
-| searchBarStyle | UISearchBarStyle | Style of the search bar, defaulting to the standard style. |
-| searchTintColor | UIColor | Tint color for the search bar, defaults to the primary color from CometChatTheme. |
-| searchBarTintColor | UIColor | Background color of the search bar, defaulting to clear. |
-| searchBarPlaceholderTextColor | UIColor | Placeholder text color for the search bar, defaults to the tertiary text color from CometChatTheme. |
-| searchBarPlaceholderTextFont | UIFont | Font used for the placeholder text in the search bar, defaults to regular body font. |
-| searchBarTextColor | UIColor | Color of the text entered in the search bar, defaults to the primary text color from CometChatTheme. |
-| searchBarTextFont | UIFont | Font used for the text in the search bar, defaults to regular body font. |
-| searchBarBackgroundColor | UIColor | Background color of the search bar, defaults to a specific background color from CometChatTheme. |
-| searchBarCancelIconTintColor | UIColor | Tint color for the cancel icon in the search bar, defaults to the primary color from CometChatTheme. |
-| searchBarCrossIconTintColor | UIColor | Tint color for the cross icon in the search bar, defaults to the secondary icon color from CometChatTheme. |
-| backgroundColor | UIColor | Background color of the overall view, defaults to a specific background color from CometChatTheme. |
-| borderWidth | CGFloat | Width of the border around the view, defaults to 0 (no border). |
-| borderColor | UIColor | Color of the border around the view, defaults to clear. |
-| cornerRadius | CometChatCornerStyle | Corner radius settings for the view, defaults to no corner radius. |
-| titleColor | UIColor | Color for the title text, defaults to the primary text color from CometChatTheme. |
-| titleFont | UIFont | Font used for the title text, defaults to nil (not set). |
-| largeTitleColor | UIColor | Color for the large title text, defaults to the primary text color from CometChatTheme. |
-| largeTitleFont | UIFont | Font used for the large title text, defaults to nil (not set). |
-| navigationBarTintColor | UIColor | Background color of the navigation bar, defaults to a specific background color from CometChatTheme. |
-| navigationBarItemsTintColor | UIColor | Tint color for items in the navigation bar, defaults to the highlight color from CometChatTheme. |
-| errorTitleTextFont | UIFont | Font used for the error title text, defaults to a bold heading 3 font from CometChatTypography. |
-| errorTitleTextColor | UIColor | Color of the error title text, defaults to the primary text color from CometChatTheme. |
-| errorSubTitleFont | UIFont | Font used for the error subtitle text, defaults to regular body font. |
-| errorSubTitleTextColor | UIColor | Color of the error subtitle text, defaults to the secondary text color from CometChatTheme. |
-| retryButtonTextColor | UIColor | Color for the retry button text, defaults to button text color from CometChatTheme. |
-| retryButtonTextFont | UIFont | Font used for the retry button text, defaults to medium button font from CometChatTypography. |
-| retryButtonBackgroundColor | UIColor | Background color for the retry button, defaults to the primary color from CometChatTheme. |
-| retryButtonBorderColor | UIColor | Border color for the retry button, defaults to clear. |
-| retryButtonBorderWidth | CGFloat | Width of the border around the retry button, defaults to 0 (no border). |
-| retryButtonCornerRadius | CometChatCornerStyle | Corner radius settings for the retry button, defaults to a specific corner radius from CometChatSpacing. |
-| emptyTitleTextFont | UIFont | Font used for the empty state title text, defaults to a bold heading 3 font from CometChatTypography. |
-| emptyTitleTextColor | UIColor | Color of the empty state title text, defaults to the primary text color from CometChatTheme. |
-| emptySubTitleFont | UIFont | Font used for the empty state subtitle text, defaults to regular body font. |
-| emptySubTitleTextColor | UIColor | Color of the empty state subtitle text, defaults to the secondary text color from CometChatTheme. |
-| tableViewSeparator | UIColor | Color of the table view separator, defaults to clear. |
-| listItemTitleTextColor | UIColor | Color of the title text in list items, defaults to the primary text color from CometChatTheme. |
-| listItemTitleFont | UIFont | Font used for the title text in list items, defaults to medium heading 4 font from CometChatTypography. |
-| listItemSubTitleTextColor | UIColor | Color of the subtitle text in list items, defaults to the secondary text color from CometChatTheme. |
-| listItemSubTitleFont | UIFont | Font used for the subtitle text in list items, defaults to regular body font. |
-| listItemBackground | UIColor | Background color for list items, defaults to clear. |
-| listItemSelectedBackground | UIColor | Background color for list items if selected, defaults to clear. |
-| listItemBorderWidth | CGFloat | Width of the border around list items, defaults to 0 (no border). |
-| listItemBorderColor | UIColor | Color of the border around list items, defaults to the light border color from CometChatTheme. |
-| listItemCornerRadius | CometChatCornerStyle | Corner radius settings for list items, defaults to no corner radius. |
-| listItemSelectionImageTint | UIColor | Tint color for the selection image in list items, defaults to the highlight color from CometChatTheme. |
+| searchIconTintColor | UIColor | Tint color for the search icon. |
+| searchBarStyle | UISearchBarStyle | Style of the search bar. |
+| searchTintColor | UIColor | Tint color for the search bar. |
+| searchBarTintColor | UIColor | Background color of the search bar. |
+| searchBarPlaceholderTextColor | UIColor | Placeholder text color for the search bar. |
+| searchBarPlaceholderTextFont | UIFont | Font for the placeholder text in the search bar. |
+| searchBarTextColor | UIColor | Color of the text entered in the search bar. |
+| searchBarTextFont | UIFont | Font for the text in the search bar. |
+| searchBarBackgroundColor | UIColor | Background color of the search bar. |
+| searchBarCancelIconTintColor | UIColor | Tint color for the cancel icon in the search bar. |
+| searchBarCrossIconTintColor | UIColor | Tint color for the cross icon in the search bar. |
+| backgroundColor | UIColor | Background color of the overall view. |
+| borderWidth | CGFloat | Width of the border around the view. |
+| borderColor | UIColor | Color of the border around the view. |
+| cornerRadius | CometChatCornerStyle | Corner radius settings for the view. |
+| titleColor | UIColor | Color for the title text. |
+| titleFont | UIFont | Font for the title text. |
+| largeTitleColor | UIColor | Color for the large title text. |
+| largeTitleFont | UIFont | Font for the large title text. |
+| navigationBarTintColor | UIColor | Background color of the navigation bar. |
+| navigationBarItemsTintColor | UIColor | Tint color for items in the navigation bar. |
+| errorTitleTextFont | UIFont | Font for the error title text. |
+| errorTitleTextColor | UIColor | Color of the error title text. |
+| errorSubTitleFont | UIFont | Font for the error subtitle text. |
+| errorSubTitleTextColor | UIColor | Color of the error subtitle text. |
+| retryButtonTextColor | UIColor | Color for the retry button text. |
+| retryButtonTextFont | UIFont | Font for the retry button text. |
+| retryButtonBackgroundColor | UIColor | Background color for the retry button. |
+| retryButtonBorderColor | UIColor | Border color for the retry button. |
+| retryButtonBorderWidth | CGFloat | Width of the border around the retry button. |
+| retryButtonCornerRadius | CometChatCornerStyle | Corner radius settings for the retry button. |
+| emptyTitleTextFont | UIFont | Font for the empty state title text. |
+| emptyTitleTextColor | UIColor | Color of the empty state title text. |
+| emptySubTitleFont | UIFont | Font for the empty state subtitle text. |
+| emptySubTitleTextColor | UIColor | Color of the empty state subtitle text. |
+| tableViewSeparator | UIColor | Color of the table view separator. |
+| listItemTitleTextColor | UIColor | Color of the title text in list items. |
+| listItemTitleFont | UIFont | Font for the title text in list items. |
+| listItemSubTitleTextColor | UIColor | Color of the subtitle text in list items. |
+| listItemSubTitleFont | UIFont | Font for the subtitle text in list items. |
+| listItemBackground | UIColor | Background color for list items. |
+| listItemSelectedBackground | UIColor | Background color for selected list items. |
+| listItemBorderWidth | CGFloat | Width of the border around list items. |
+| listItemBorderColor | UIColor | Color of the border around list items. |
+| listItemCornerRadius | CometChatCornerStyle | Corner radius settings for list items. |
+| listItemSelectionImageTint | UIColor | Tint color for the selection image in list items. |
| listItemDeSelectedImageTint | UIColor | Tint color for the deselected image in list items. |
-| passwordGroupImageTintColor | UIColor | Tint color for the password group image, defaults to the background color from CometChatTheme. |
-| passwordGroupImageBackgroundColor | UIColor | Background color for the password group image, defaults to the warning color from CometChatTheme. |
-| privateGroupImageTintColor | UIColor | Tint color for the private group image, defaults to the background color from CometChatTheme. |
-| privateGroupImageBackgroundColor | UIColor | Background color for the private group image, defaults to the success color from CometChatTheme. |
+| passwordGroupImageTintColor | UIColor | Tint color for the password group image. |
+| passwordGroupImageBackgroundColor | UIColor | Background color for the password group image. |
+| privateGroupImageTintColor | UIColor | Tint color for the private group image. |
+| privateGroupImageBackgroundColor | UIColor | Background color for the private group image. |
| privateGroupIcon | UIImage | Image for a private group icon. |
| protectedGroupIcon | UIImage | Image for a protected group icon. |
| set(groupsRequestBuilder:) | GroupsRequest.GroupsRequestBuilder | Sets the request builder for fetching groups. |
@@ -241,27 +251,30 @@ title: "Property Changes"
| hideDeleteConversationOption | Bool | Hides the option to delete a conversation. |
| hideUserStatus | Bool | Hides the online/offline status of users. |
| hideGroupType | Bool | Hides the group type (private/public). |
-| set(options:) | (Group?) -> [CometChatGroupOption] | Allows you to define custom options for each group. Returns an array of CometChatGroupOption based on the group object. |
-| add(options:) | (Group?) -> [CometChatGroupOption] | Dynamically adds options to groups. Returns additional CometChatGroupOption elements. |
-| set(leadingView:) | (Group?) -> UIView | Allows you to modify the leading view of a group cell. |
-| set(titleView:) | (Group?) -> UIView | Allows you to customize the title view of a group cell. |
-| set(trailView:) | (Group?) -> UIView | Allows you to modify the trailing view of a group cell. |
+| set(options:) | (Group?) -> [CometChatGroupOption] | Defines custom options for each group. |
+| add(options:) | (Group?) -> [CometChatGroupOption] | Dynamically adds options to groups. |
+| set(leadingView:) | (Group?) -> UIView | Modifies the leading view of a group cell. |
+| set(titleView:) | (Group?) -> UIView | Customizes the title view of a group cell. |
+| set(trailView:) | (Group?) -> UIView | Modifies the trailing view of a group cell. |
### Renamed Properties
| Name | Type | Description | Old Name |
| --------------------- | --------------------- | ------------------------------------------------------------------- | --------------------- |
-| set(onItemClick:) | Closure | Triggered when you click on a ListItem of the groups component. | SetOnItemClick |
-| set(OnItemLongClick:) | Closure | Triggered when you long press on a ListItem of the groups component. | SetOnItemLongClick |
-| set(onError:) | Closure | Triggered when an error occurs in CometChatGroups. | SetOnError |
-| set(onBack:) | Closure | Triggered when the back button is pressed in CometChatGroups. | SetOnBack |
+| set(onItemClick:) | Closure | Triggered when you click on a ListItem. | SetOnItemClick |
+| set(OnItemLongClick:) | Closure | Triggered when you long press on a ListItem. | SetOnItemLongClick |
+| set(onError:) | Closure | Triggered when an error occurs. | SetOnError |
+| set(onBack:) | Closure | Triggered when the back button is pressed. | SetOnBack |
| SetListItemView | (Group?) -> UIView | Assigns a custom ListItem to the Groups Component. | setListItemView |
-| SetSubTitleView | (Group?) -> UIView | Allows you to customize the subtitle view for each group item. | setSubtitleView |
+| SetSubTitleView | (Group?) -> UIView | Customizes the subtitle view for each group item. | setSubtitleView |
### Removed Properties
No properties were removed in v5. All v4 properties have been retained (with some renamed) and additional functionality has been added.
+
+---
+
## Group Members
### New Properties
@@ -342,7 +355,6 @@ No properties were removed in v5. All v4 properties have been retained (with som
| backgroundColor | UIColor | Sets the background color for the component. | background |
| hideUserStatus | Bool | Hides/disables the online/offline status of users. | disable(userPresence:) |
| hideSearch | Bool | Hides the search bar. | hide(search:) |
-| hideUserStatus | Bool | Hide user presence. If set to true, the status indicator is not displayed. | disableUsersPresence |
| set(onItemClick:) | (GroupMember, IndexPath) -> Void | Triggered when you click on a ListItem. | setOnItemClick |
| set(onItemLongClick:) | (GroupMember, IndexPath) -> Void | Triggered when you long press on a ListItem. | setOnItemLongClick |
| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. | setOnError |
@@ -352,20 +364,20 @@ No properties were removed in v5. All v4 properties have been retained (with som
| Name | Type | Description |
| ----------------------------- | ----------------------------------- | -------------------------------------------------- |
-| backIconTint | UIColor | Sets the back button tint color. |
-| searchIconTint | UIColor | Sets the search icon tint color. |
-| searchTextFont | UIFont | Sets the search text font. |
-| searchTextColor | UIColor | Sets the search text color. |
-| searchCancelButtonTint | UIColor | Sets the search cancel icon tint. |
-| searchPlaceholderFont | UIFont | Sets the search placeholder font. |
-| searchPlaceholderColor | UIColor | Sets the search placeholder color. |
-| addButtonTint | UIColor | Sets add button color. |
-| addButtonFont | UIFont | Sets add button font. |
-| avatarStyle | AvatarStyle | Styles to apply to the avatar component of the default list item view. |
-| statusIndicatorStyle | CSSProperties | Styles to apply to the status indicator component of the default list item view. |
-| listItemStyle | ListItemStyle | Styles to apply to the default list item view. |
-| groupScopeStyle | ChangeScopeStyle | Styles to apply to the change scope component. |
-| groupMembersStyle | GroupMembersStyle | Styles to apply to this component. |
+| backIconTint | UIColor | Back button tint color. |
+| searchIconTint | UIColor | Search icon tint color. |
+| searchTextFont | UIFont | Search text font. |
+| searchTextColor | UIColor | Search text color. |
+| searchCancelButtonTint | UIColor | Search cancel icon tint. |
+| searchPlaceholderFont | UIFont | Search placeholder font. |
+| searchPlaceholderColor | UIColor | Search placeholder color. |
+| addButtonTint | UIColor | Add button color. |
+| addButtonFont | UIFont | Add button font. |
+| avatarStyle | AvatarStyle | Styles for the avatar component. |
+| statusIndicatorStyle | CSSProperties | Styles for the status indicator component. |
+| listItemStyle | ListItemStyle | Styles for the default list item view. |
+| groupScopeStyle | ChangeScopeStyle | Styles for the change scope component. |
+| groupMembersStyle | GroupMembersStyle | Styles for this component. |
| set(title:mode:) | String, UINavigationItem.LargeTitleDisplayMode | Custom title for the component. |
| set(backButtonTitle:) | String? | Custom text for the back button. |
| set(searchPlaceholder:) | String | Custom placeholder text for search field. |
@@ -374,9 +386,9 @@ No properties were removed in v5. All v4 properties have been retained (with som
| set(backButtonIcon:) | UIImage | Custom back button icon. |
| set(passwordPlaceholderText:) | String | Custom placeholder text for password. |
| hide(continueButton:) | Bool | Whether to hide the continue button. |
-| set(searchIcon:) | UIImage | Sets the icon for the search bar. |
-| set(searchClearIcon:) | UIImage | Sets the clear icon for the search bar. |
-| set(searchBarHeight:) | CGFloat | Set the height for the search bar. |
+| set(searchIcon:) | UIImage | Icon for the search bar. |
+| set(searchClearIcon:) | UIImage | Clear icon for the search bar. |
+| set(searchBarHeight:) | CGFloat | Height for the search bar. |
| selectionMode(mode:) | SelectionMode | Enables selection mode (.single, .multiple). |
| hide(separator:) | Bool | Hide/unhide the separator. |
| clearList() | - | Clears the users locally. |
@@ -384,9 +396,9 @@ No properties were removed in v5. All v4 properties have been retained (with som
| remove(groupMember:) | GroupMember | Removes member object locally. |
| size() | - | Returns the count of members displayed. |
| title | String | Title of the component. |
-| searchPlaceholder | String | Text to be displayed when the search input has no value. |
+| searchPlaceholder | String | Text displayed when search input has no value. |
| fetchTimeOut | any | Timeout reference for fetching users. |
-| userPresencePlacement | UserPresencePlacement | Placement of user presence information within the user interface. |
+| userPresencePlacement | UserPresencePlacement | Placement of user presence information. |
| backButtonIconURL | String | Image URL for the back button. |
| showBackButton | Bool | Show back button. |
| closeButtonIconURL | String | Image URL for the close button. |
@@ -396,39 +408,41 @@ No properties were removed in v5. All v4 properties have been retained (with som
| loadingIconURL | String | Image URL for the default loading view. |
| hideSeparator | Bool | Hide the separator at the bottom of the default list item view. |
| titleAlignment | TitleAlignment | Alignment of the title text. |
-| searchIconURL | String | Image URL for the search icon to use in the search bar. |
+| searchIconURL | String | Image URL for the search icon. |
| fetchingUsers | Bool | Flag to indicate whether users are currently being fetched. |
| onClose | () -> Void | Function to call when the close button is clicked. |
-| headerView | UIView | Custom header view which will replace the title as well. |
+| headerView | UIView | Custom header view which will replace the title. |
+---
+
## Message Header
### New Properties
| Name | Type | Description |
| ---------------------------------------- | --------- | -------------------------------------------------------------------- |
-| titleTextColor | UIColor | Used to set the text color of the header title. |
-| titleTextFont | UIFont | Used to set the font style of the header title. |
-| subtitleTextColor | UIColor | Used to set the text color of the subtitle in the header. |
-| subtitleTextFont | UIFont | Used to set the font style of the subtitle in the header. |
-| backButtonImageTintColor | UIColor | Used to set the tint color of the back button image in the header. |
-| privateGroupBadgeImageTintColor | UIColor | Used to set the tint color of the private group badge in the header. |
-| passwordProtectedGroupBadgeImageTintColor | UIColor | Used to set the tint color of the password-protected group badge in the header. |
-| privateGroupImageBackgroundColor | UIColor | Used to set the background color of the private group badge. |
-| passwordGroupImageBackgroundColor | UIColor | Used to set the background color of the password-protected group badge. |
-| groupImageBackgroundColor | UIColor | Used to set the background color for group icons in the header. |
-| avatarStyle | AvatarStyle | Used to customize the appearance of the avatar in the header. |
-| backgroundColor | UIColor | Used to set the background color of the header. |
-| cornerRadius | CometChatCornerStyle | Used to set the corner radius of the header. |
-| borderWidth | CGFloat | Used to set the border width of the header. |
-| borderColor | UIColor | Used to set the border color of the header. |
-| backButtonIcon | UIImage | Used to set a custom icon for the back button. |
-| privateGroupIcon | UIImage | Used to set a custom icon for private groups. |
-| protectedGroupIcon | UIImage | Used to set a custom icon for password-protected groups. |
-| backgroundImage | UIImage | Used to set a background image for the header. |
+| titleTextColor | UIColor | Text color of the header title. |
+| titleTextFont | UIFont | Font style of the header title. |
+| subtitleTextColor | UIColor | Text color of the subtitle in the header. |
+| subtitleTextFont | UIFont | Font style of the subtitle in the header. |
+| backButtonImageTintColor | UIColor | Tint color of the back button image in the header. |
+| privateGroupBadgeImageTintColor | UIColor | Tint color of the private group badge in the header. |
+| passwordProtectedGroupBadgeImageTintColor | UIColor | Tint color of the password-protected group badge in the header. |
+| privateGroupImageBackgroundColor | UIColor | Background color of the private group badge. |
+| passwordGroupImageBackgroundColor | UIColor | Background color of the password-protected group badge. |
+| groupImageBackgroundColor | UIColor | Background color for group icons in the header. |
+| avatarStyle | AvatarStyle | Customizes the appearance of the avatar in the header. |
+| backgroundColor | UIColor | Background color of the header. |
+| cornerRadius | CometChatCornerStyle | Corner radius of the header. |
+| borderWidth | CGFloat | Border width of the header. |
+| borderColor | UIColor | Border color of the header. |
+| backButtonIcon | UIImage | Custom icon for the back button. |
+| privateGroupIcon | UIImage | Custom icon for private groups. |
+| protectedGroupIcon | UIImage | Custom icon for password-protected groups. |
+| backgroundImage | UIImage | Background image for the header. |
| hideBackButton | Bool | Hides the back button of message header. |
-| hideUserStatus | Bool | Hides or shows the user status of user (online/offline/last active at). |
+| hideUserStatus | Bool | Hides or shows the user status (online/offline/last active at). |
| hideVideoCallButton | Bool | Hides the video call button. |
| hideVoiceCallButton | Bool | Hides the voice call button. |
| set(onBack:) | () -> Void | Triggered when back button is pressed. |
@@ -444,10 +458,10 @@ No properties were removed in v5. All v4 properties have been retained (with som
| Name | Type | Description | Old Name |
| -------------------- | -------------- | ----------------------------------------------- | ----------- |
-| backgroundColor | UIColor | Sets the background color for the component. | background |
-| backButtonImageTintColor | UIColor | Sets the tint color of the back button image in the header. | backIconTint |
+| backgroundColor | UIColor | Background color for the component. | background |
+| backButtonImageTintColor | UIColor | Tint color of the back button image in the header. | backIconTint |
| hideBackButton | Bool | Hides the back button of message header. | hide(backButton:) |
-| hideUserStatus | Bool | Hides or shows the user status of user. | set(disableUsersPresence:) |
+| hideUserStatus | Bool | Hides or shows the user status. | set(disableUsersPresence:) |
| set(menus:) | (User?, Group?) -> UIView | Sets custom menus to add more options. | setMenus |
| set(subtitleView:) | (User?, Group?) -> UIView | Sets a custom subtitle view for message header. | setSubtitleView |
@@ -455,15 +469,18 @@ No properties were removed in v5. All v4 properties have been retained (with som
| Name | Type | Description |
| ----------------------------- | ----------------------------------- | -------------------------------------------------- |
-| typingIndicatorTextFont | UIFont | Sets the typing indicator text font. |
-| typingIndicatorTextColor | UIColor | Sets the typing indicator text color. |
-| detailIconTint | UIColor | Sets the tint color for detail icon for message header. |
-| onlineStatusColor | UIColor | Sets the online status color for message header. |
-| privateGroupIconBackgroundColor | UIColor | Sets the private group background color for message header (replaced by privateGroupImageBackgroundColor). |
-| protectedGroupIconBackgroundColor | UIColor | Sets the protected group background color for message header (replaced by passwordGroupImageBackgroundColor). |
-| set(protectedGroupIcon:) | UIImage | Used to set custom protected group icon. |
-| set(privateGroupIcon:) | UIImage | Used to set custom private group icon. |
-| disable(typing:) | Bool | Used to enable/disable typing indicators. |
+| typingIndicatorTextFont | UIFont | Typing indicator text font. |
+| typingIndicatorTextColor | UIColor | Typing indicator text color. |
+| detailIconTint | UIColor | Tint color for detail icon. |
+| onlineStatusColor | UIColor | Online status color. |
+| privateGroupIconBackgroundColor | UIColor | Private group background color (replaced by privateGroupImageBackgroundColor). |
+| protectedGroupIconBackgroundColor | UIColor | Protected group background color (replaced by passwordGroupImageBackgroundColor). |
+| set(protectedGroupIcon:) | UIImage | Custom protected group icon. |
+| set(privateGroupIcon:) | UIImage | Custom private group icon. |
+| disable(typing:) | Bool | Enable/disable typing indicators. |
+
+
+---
## Message List
@@ -519,8 +536,8 @@ No properties were removed in v5. All v4 properties have been retained (with som
| set(messagesRequestBuilder:) | MessagesRequest.MessageRequestBuilder | Sets the message request builder. |
| set(reactionsRequestBuilder:) | ReactionsRequest.ReactionsRequestBuilder | Sets the reactions request builder. |
| set(parentMessageId:) | Int | Sets the parent message ID. |
-| set(onThreadRepliesClick:) | (BaseMessage, CometChatMessageTemplate) -> Void | Triggered when you click on the thread indicator of message bubble. |
-| set(onReactionClick:) | (CometChat.ReactionCount, BaseMessage) -> Void | Triggered when you click on a reaction on a message bubble. |
+| set(onThreadRepliesClick:) | (BaseMessage, CometChatMessageTemplate) -> Void | Triggered when you click on the thread indicator. |
+| set(onReactionClick:) | (CometChat.ReactionCount, BaseMessage) -> Void | Triggered when you click on a reaction. |
| set(onReactionListItemClick:) | (CometChat.Reaction, BaseMessage) -> Void | Triggered when you click on the list item of CometChatReactionList. |
| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. |
| set(onEmpty:) | () -> Void | Triggers when the message list is empty. |
@@ -531,9 +548,9 @@ No properties were removed in v5. All v4 properties have been retained (with som
| set(datePattern:) | (Int?) -> String | Sets the date pattern using a closure. |
| set(timePattern:) | (Int?) -> String | Sets the time pattern using a closure. |
| set(textFormatter:) | [CometChatTextFormatter] | Sets the list of text formatters. |
-| set(loadingView:) | UIView | Sets a custom loading view displayed while data is being fetched. |
-| set(errorView:) | UIView | Sets a custom error view that appears when an error occurs. |
-| set(emptyView:) | UIView | Sets a custom empty state view when no messages are available. |
+| set(loadingView:) | UIView | Sets a custom loading view. |
+| set(errorView:) | UIView | Sets a custom error view. |
+| set(emptyView:) | UIView | Sets a custom empty state view. |
| set(templates:) | [CometChatMessageTemplate] | Sets message templates to MessageList. |
| dateTimeFormatter | CometChatDateTimeFormatter | Supports full customization of how date and time are displayed. |
| set(controller:) | UIViewController | Sets the controller (mandatory for proper configuration). |
@@ -544,37 +561,40 @@ No properties were removed in v5. All v4 properties have been retained (with som
| -------------------- | -------------- | ----------------------------------------------- | ----------- |
| hideReceipts | Bool | Hides the message read receipts. | hide(receipt:) |
| hideAvatar | Bool | Shows/hides the avatar of the sender. | show(avatar:) |
-| backgroundColor | UIColor | Sets the background color for the component. | background |
+| backgroundColor | UIColor | Background color for the component. | background |
| set(messageAlignment:) | MessageListAlignment | Sets the alignment of messages in the list. | alignment |
### Removed Properties
| Name | Type | Description |
| ----------------------------- | ----------------------------------- | -------------------------------------------------- |
-| loadingIconTint | UIColor | Used to set loading icon tint. |
-| emptyTextFont | UIFont | Used to set empty state text font. |
-| errorTextFont | UIFont | Used to set error text font. |
-| emptyTextColor | UIColor | Used to set empty state text color. |
-| errorTextColor | UIColor | Used to set error state text color. |
-| nameTextColor | UIColor | Used to set sender/receiver name text color on a message bubble. |
-| nameTextFont | UIFont | Used to set sender/receiver name text appearance on a message bubble. |
-| timestampTextColor | UIColor | Used to set time stamp text color. |
-| threadReplySeperatorColor | UIColor | Used to set thread reply separator color. |
-| threadReplyTextColor | UIColor | Used to set thread reply text color. |
-| threadReplyTextFont | UIFont | Used to set thread reply text appearance. |
-| hide(error:) | Bool | Used to hide the error view. |
+| loadingIconTint | UIColor | Loading icon tint. |
+| emptyTextFont | UIFont | Empty state text font. |
+| errorTextFont | UIFont | Error text font. |
+| emptyTextColor | UIColor | Empty state text color. |
+| errorTextColor | UIColor | Error state text color. |
+| nameTextColor | UIColor | Sender/receiver name text color on a message bubble. |
+| nameTextFont | UIFont | Sender/receiver name text appearance on a message bubble. |
+| timestampTextColor | UIColor | Time stamp text color. |
+| threadReplySeperatorColor | UIColor | Thread reply separator color. |
+| threadReplyTextColor | UIColor | Thread reply text color. |
+| threadReplyTextFont | UIFont | Thread reply text appearance. |
+| hide(error:) | Bool | Hide the error view. |
| messageInformationConfiguration | MessageInformationConfiguration | Configuration for message information component. |
| reactionsConfiguration | ReactionsConfiguration | Configuration for reactions component. |
-| setDateSeparatorPattern | (Int?) -> String | Used to modify the date pattern of the message list date separator. |
-| setDatePattern | (Int?) -> String | Used to modify the date pattern. |
-| setHeaderView | UIView | Used to set custom header view (now set(headerView:)). |
-| setFooterView | UIView | Used to set custom footer view (now set(footerView:)). |
-| setTextFormatters | [CometChatTextFormatter] | Used to set text formatters (now set(textFormatter:)). |
-| setMentionsFormatters | [CometChatTextFormatter] | Used to set mentions formatters (merged into set(textFormatter:)). |
-| setErrorStateView | UIView | Used to set custom error view (now set(errorView:)). |
-| setEmptyStateView | UIView | Used to set custom empty state view (now set(emptyView:)). |
+| setDateSeparatorPattern | (Int?) -> String | Modify the date pattern of the message list date separator. |
+| setDatePattern | (Int?) -> String | Modify the date pattern. |
+| setHeaderView | UIView | Set custom header view (now set(headerView:)). |
+| setFooterView | UIView | Set custom footer view (now set(footerView:)). |
+| setTextFormatters | [CometChatTextFormatter] | Set text formatters (now set(textFormatter:)). |
+| setMentionsFormatters | [CometChatTextFormatter] | Set mentions formatters (merged into set(textFormatter:)). |
+| setErrorStateView | UIView | Set custom error view (now set(errorView:)). |
+| setEmptyStateView | UIView | Set custom empty state view (now set(emptyView:)). |
| setOnThreadRepliesClick | Closure | Callback for thread replies click (now set(onThreadRepliesClick:)). |
+
+---
+
## Message Composer
### New Properties
@@ -646,7 +666,7 @@ No properties were removed in v5. All v4 properties have been retained (with som
| set(customSoundForMessages:) | URL? | Sets a custom sound for sending messages. |
| disableSoundForMessages | Bool | Disables sound while sending messages. |
| set(onSendButtonClick:) | (BaseMessage) -> Void | Override the action triggered upon pressing the send button. |
-| set(onTextChanged:) | (String) -> Void | Gets activated when the user starts typing in message composer. |
+| set(onTextChanged:) | (String) -> Void | Activated when the user starts typing in message composer. |
| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. |
| set(attachmentOptions:) | (User?, Group?, UIViewController?) -> [CometChatMessageComposerAction] | Sets a list of custom MessageComposerActions. |
| set(sendButtonView:) | (User?, Group?) -> UIView | Sets a custom send button for the MessageComposer Component. |
@@ -661,9 +681,9 @@ No properties were removed in v5. All v4 properties have been retained (with som
| Name | Type | Description | Old Name |
| -------------------- | -------------- | ----------------------------------------------- | ----------- |
-| backgroundColor | UIColor | Sets the background color for the component. | background |
+| backgroundColor | UIColor | Background color for the component. | background |
| hideVoiceRecordingButton | Bool | Hides the voice recording button. | hide(voiceRecording:) |
-| disableTypingEvents | Bool | Disables sending typing indicators when the user types. | disable(disableTypingEvents:) |
+| disableTypingEvents | Bool | Disables sending typing indicators. | disable(disableTypingEvents:) |
| disableSoundForMessages | Bool | Disables sound while sending messages. | disable(disableSoundForMessages:) |
| set(textFormatter:) | [CometChatTextFormatter] | Assigns the list of text formatters. | setMentionsFormatters |
@@ -671,371 +691,39 @@ No properties were removed in v5. All v4 properties have been retained (with som
| Name | Type | Description |
| ----------------------------- | ----------------------------------- | -------------------------------------------------- |
-| inputBackground | UIColor | Sets the input background color of message composer. |
-| textFont | UIFont | Sets the input text font of message composer. |
-| inputBoxPlaceholderFont | UIFont | Sets the placeholder text font for message composer input field. |
-| placeHolderTextColor | UIColor | Sets the placeholder text color for message composer input field (renamed with different casing). |
-| attachmentIconTint | UIColor | Sets the attachment icon tint color. |
-| sendIconTint | UIColor | Sets send button icon tint color. |
-| separatorTint | UIColor | Sets the separator color for message composer. |
-| inputBorderWidth | CGFloat | Sets the border width for message composer input view. |
-| inputBorderColor | UIColor | Sets the border color for message composer input view. |
-| actionSheetTitleColor | UIColor | Sets the title color for action sheet of message composer. |
-| actionSheetTitleFont | UIFont | Sets the title font for action sheet of message composer. |
-| actionSheetLayoutModelIconTint | UIColor | Sets action sheet layout mode icon tint color for message composer. |
-| actionSheetCancelButtonIconTint | UIColor | Sets action sheet cancel button icon tint color for message composer. |
-| actionSheetCancelButtonIconFont | UIFont | Sets the action sheet cancel button icon font color for message composer. |
-| actionSheetSeparatorTint | UIColor | Sets the separator color for action sheet items. |
-| actionSheetBackground | UIColor | Sets the background color of action sheet. |
-| voiceRecordingIconTint | UIColor | Sets the voice recorder icon tint color. |
-| aiIconTint | UIColor | Sets the ai icon tint color. |
-| infoTextColor | UIColor | Sets the text color for info message displayed (now part of style). |
-| infoIconTintColor | UIColor | Sets the tint color for info icon. |
-| infoBackgroundColor | UIColor | Sets the background color for info message view (now part of style). |
-| infoSeparatorColor | UIColor | Sets the separator color for info view (now part of style). |
-| set(background:) | UIColor | Sets background color for message composer. |
-| set(placeholderText:) | String | Sets message composer's placeholder text. |
-| set(maxLines:) | Int | Sets limit for lines of text to be displayed in input field. |
-| set(auxiliaryButtonAlignment:) | AuxiliaryButtonAlignment | Sets position for auxiliary buttons view. |
-| set(customSoundForMessage:) | URL | Sets custom sounds for outgoing messages. |
-| set(liveReactionIconURL:) | UIImage | Sets custom live reaction icon. |
+| inputBackground | UIColor | Input background color of message composer. |
+| textFont | UIFont | Input text font of message composer. |
+| inputBoxPlaceholderFont | UIFont | Placeholder text font for message composer input field. |
+| attachmentIconTint | UIColor | Attachment icon tint color. |
+| sendIconTint | UIColor | Send button icon tint color. |
+| separatorTint | UIColor | Separator color for message composer. |
+| inputBorderWidth | CGFloat | Border width for message composer input view. |
+| inputBorderColor | UIColor | Border color for message composer input view. |
+| actionSheetTitleColor | UIColor | Title color for action sheet of message composer. |
+| actionSheetTitleFont | UIFont | Title font for action sheet of message composer. |
+| actionSheetLayoutModelIconTint | UIColor | Action sheet layout mode icon tint color. |
+| actionSheetCancelButtonIconTint | UIColor | Action sheet cancel button icon tint color. |
+| actionSheetCancelButtonIconFont | UIFont | Action sheet cancel button icon font color. |
+| actionSheetSeparatorTint | UIColor | Separator color for action sheet items. |
+| actionSheetBackground | UIColor | Background color of action sheet. |
+| voiceRecordingIconTint | UIColor | Voice recorder icon tint color. |
+| aiIconTint | UIColor | AI icon tint color. |
+| set(background:) | UIColor | Background color for message composer. |
+| set(placeholderText:) | String | Message composer's placeholder text. |
+| set(maxLines:) | Int | Limit for lines of text in input field. |
+| set(auxiliaryButtonAlignment:) | AuxiliaryButtonAlignment | Position for auxiliary buttons view. |
+| set(customSoundForMessage:) | URL | Custom sounds for outgoing messages. |
+| set(liveReactionIconURL:) | UIImage | Custom live reaction icon. |
| set(disableMentions:) | Bool | Enables/Disables user mentions in message composer input field. |
-| set(infoIcon:) | UIImage | Sets image for info icon (now part of style). |
-| set(attachmentIcon:) | UIImage | Sets image for attachment button on message composer. |
-| set(aiAuxiliaryIcon:) | UIImage | Sets image for ai auxillary button. |
-| setOnSendButtonClick | Closure | Sets custom actions for send button click. |
+| set(infoIcon:) | UIImage | Image for info icon (now part of style). |
+| set(attachmentIcon:) | UIImage | Image for attachment button on message composer. |
+| set(aiAuxiliaryIcon:) | UIImage | Image for AI auxiliary button. |
+| setOnSendButtonClick | Closure | Custom actions for send button click. |
| hide(liveReaction:) | Bool | Toggles visibility for live reaction component. |
| hide(footerView:) | Bool | Toggles visibility for footer view of message composer. |
| hide(headerView:) | Bool | Toggles visibility for header view of message composer. |
| hide(sendButton:) | Bool | Toggles visibility for send button. |
-| setAttachmentOptions | Closure | Sets a list of custom MessageComposerActions. |
-| setAuxilaryButtonView | Closure | Sets custom auxiliary button view. |
-| setSecondaryButtonView | Closure | Sets custom secondary button view. |
-| setSendButtonView | Closure | Sets custom send button view. |
-
-## Call Logs
-
-### New Properties
-
-| Name | Type | Description |
-| ---------------------------------------- | --------- | -------------------------------------------------------------------- |
-| listItemTitleTextColor | UIColor | Text color for the list item title. |
-| listItemTitleFont | UIFont | Font for the list item title. |
-| listItemSubTitleTextColor | UIColor | Text color for the list item subtitle. |
-| listItemSubTitleFont | UIFont | Font for the list item subtitle. |
-| listItemBackground | UIColor | Background color for the list item. |
-| listItemSelectedBackground | UIColor | Background color for the selected list item. |
-| listItemBorderWidth | CGFloat | Border width for the list item. |
-| listItemBorderColor | UIColor | Border color for the list item. |
-| listItemCornerRadius | CometChatCornerStyle | Corner radius for the list item. |
-| listItemSelectionImageTint | UIColor | Tint color for the selection image. |
-| listItemDeSelectedImageTint | UIColor | Tint color for the deselected image. |
-| listItemSelectedImage | UIImage | Image for the selected list item. |
-| listItemDeSelectedImage | UIImage | Image for the deselected list item. |
-| backgroundColor | UIColor | Background color. |
-| borderWidth | CGFloat | Border width. |
-| borderColor | UIColor | Border color. |
-| cornerRadius | CometChatCornerStyle | Corner radius. |
-| titleColor | UIColor | Text color for the title. |
-| titleFont | UIFont | Font for the title. |
-| largeTitleColor | UIColor | Text color for large titles. |
-| largeTitleFont | UIFont | Font for large titles. |
-| navigationBarTintColor | UIColor | Background color for the navigation bar. |
-| navigationBarItemsTintColor | UIColor | Tint color for navigation bar items. |
-| errorTitleTextFont | UIFont | Font for the error title. |
-| errorTitleTextColor | UIColor | Text color for the error title. |
-| errorSubTitleFont | UIFont | Font for the error subtitle. |
-| errorSubTitleTextColor | UIColor | Text color for the error subtitle. |
-| retryButtonTextColor | UIColor | Text color for the retry button. |
-| retryButtonTextFont | UIFont | Font for the retry button text. |
-| retryButtonBackgroundColor | UIColor | Background color for the retry button. |
-| retryButtonBorderColor | UIColor | Border color for the retry button. |
-| retryButtonBorderWidth | CGFloat | Border width for the retry button. |
-| retryButtonCornerRadius | CometChatCornerStyle | Corner radius for the retry button. |
-| emptyTitleTextFont | UIFont | Font for the empty state title. |
-| emptyTitleTextColor | UIColor | Text color for the empty state title. |
-| emptySubTitleFont | UIFont | Font for the empty state subtitle. |
-| emptySubTitleTextColor | UIColor | Text color for the empty state subtitle. |
-| tableViewSeparator | UIColor | Color for the table view separator. |
-| backIcon | UIImage | Icon for the back button. |
-| backIconTint | UIColor | Tint color for the back icon. |
-| incomingCallIcon | UIImage | Icon for incoming calls. |
-| incomingCallIconTint | UIColor | Tint color for the incoming call icon. |
-| outgoingCallIcon | UIImage | Icon for outgoing calls. |
-| outgoingCallIconTint | UIColor | Tint color for the outgoing call icon. |
-| missedCallTitleColor | UIColor | Text color for missed call titles. |
-| missedCallIcon | UIImage | Icon for missed calls. |
-| missedCallIconTint | UIColor | Tint color for the missed call icon. |
-| audioCallIcon | UIImage | Icon for audio calls. |
-| audioCallIconTint | UIColor | Tint color for the audio call icon. |
-| videoCallIcon | UIImage | Icon for video calls. |
-| videoCallIconTint | UIColor | Tint color for the video call icon. |
-| separatorColor | UIColor | Color for separators. |
-| set(callRequestBuilder:) | CallLogsRequest.CallLogsBuilder | Sets the CallLogsBuilder instance for call logs. |
-| hideError | Bool | Hides the error state view. |
-| hideNavigationBar | Bool | Hides the navigation bar. |
-| hideLoadingState | Bool | Hides the loading state view. |
-| hideBackIcon | Bool | Hides the back icon in the navigation bar. |
-| set(onItemClick:) | (CallLog, IndexPath) -> Void | Triggered when you click on a ListItem. |
-| set(onItemLongClick:) | (CallLog, IndexPath) -> Void | Triggered when you long press on a ListItem. |
-| set(onBack:) | () -> Void | Triggered when back button is pressed. |
-| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. |
-| set(onEmpty:) | () -> Void | Triggers when the call logs list is empty. |
-| set(onLoad:) | ([CallLog]) -> Void | Triggers when call logs are successfully loaded. |
-| set(listItemView:) | (CallLog) -> UIView | Assigns a custom ListItem to the CallLogs component. |
-| set(titleView:) | (CallLog) -> UIView | Sets a custom title view for call log cells. |
-| set(leadingView:) | (CallLog) -> UIView | Sets a custom leading view for call log cells. |
-| set(subtitleView:) | (CallLog) -> UIView | Sets a custom subtitle view for call log cells. |
-| set(trailView:) | (CallLog) -> UIView | Sets a custom trailing view for call log cells. |
-| set(emptyView:) | UIView | Sets a custom empty state view. |
-| set(errorView:) | UIView | Sets a custom error view. |
-| set(menus:) | [UIBarButtonItem] | Sets custom menus to add more options. |
-| avatarStyle | AvatarStyle | Customizes the appearance of avatars. |
-
-### Renamed Properties
-
-| Name | Type | Description | Old Name |
-| -------------------- | -------------- | ----------------------------------------------- | ----------- |
-| set(onItemClick:) | (CallLog, IndexPath) -> Void | Triggered when you click on a ListItem. | setOnItemClick |
-| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. | set(onError:) |
-
-### Removed Properties
-
-| Name | Type | Description |
-| ----------------------------- | ----------------------------------- | -------------------------------------------------- |
-| backButtonFont | UIFont | Sets the font for the back button. |
-| backButtonIcon | UIImage | Sets the icon for the back button. |
-| backButtonTint | UIColor | Sets the tint for the back button. |
-| backButtonTitle | String? | Sets the title for the back button. |
-| backButtonTitleColor | UIColor | Sets the title color for the back button. |
-| background | [CGColor]? | Sets the background. |
-| corner | CometChatCornerStyle | Sets the corner style. |
-| emptyStateText | String | Sets the text for empty state. |
-| emptyStateTextFont | UIFont | Sets the font for empty state text. |
-| errorStateText | String | Sets the text for error state. |
-| errorStateTextColor | UIColor | Sets the text color for error state. |
-| errorStateTextFont | UIFont | Sets the font for error state text. |
-| searchBackground | UIColor | Sets the background for the search bar. |
-| searchBarHeight | CGFloat | Sets the height for the search bar. |
-| searchBorderColor | UIColor | Sets the border color for the search bar. |
-| searchCancelButtonFont | UIFont | Sets the font for the search cancel button. |
-| searchCancelButtonTint | UIColor | Sets the tint for the search cancel button. |
-| searchClearIcon | UIImage | Sets the icon for the search clear button. |
-| searchCornerRadius | CometChatCornerStyle | Sets the corner radius for the search bar. |
-| searchIcon | UIImage? | Sets the icon for the search bar. |
-| searchPlaceholder | String | Sets the placeholder for the search bar. |
-| searchTextColor | UIColor | Sets the color for the search text. |
-| searchTextFont | UIFont | Sets the font for the search text. |
-| set(title:mode:) | String, UINavigationItem.LargeTitleDisplayMode | Sets the title for the title bar. |
-| titleColor | UIColor | Sets the color for the title (now part of style). |
-| titleFont | UIFont | Sets the font for the title (now part of style). |
-| hide(errorText:) | Bool | Hides the error text. |
-| hide(search:) | Bool | Hides the search bar. |
-| hide(separator:) | Bool | Hides the separator. |
-| callStatusTextFont | UIFont | Sets the call status font. |
-| missedCallTitleTint | UIColor | Sets the missed call color. |
-| callTimeTextFont | UIFont | Sets the call time font. |
-| dateSeparatorTextFont | UIFont | Sets the date separator font. |
-| emptyStateTextFont | UIFont | Sets the empty state font (now emptyTitleTextFont). |
-| errorStateTextFont | UIFont | Sets the error state font (now errorTitleTextFont). |
-| callStatusTextColor | UIColor | Sets the call status color. |
-| callStatusIconTint | UIColor | Sets the call status icon tint. |
-| callTimeTextColor | UIColor | Sets the call time color. |
-| dateSeparatorTextColor | UIColor | Sets the date separator color. |
-| infoIconTint | UIColor | Sets the info icon tint. |
-| listItemStyle | ListItemStyle | Styles to apply to each call log item. |
-
-## Call Buttons
-
-### New Properties
-
-| Name | Type | Description |
-| ---------------------------------------- | --------- | -------------------------------------------------------------------- |
-| videoCallIconTint | UIColor | Tint color for the video call icon. |
-| videoCallTextFont | UIFont | Font for the video call button text. |
-| videoCallTextColor | UIColor | Color for the video call button text. |
-| videoCallButtonBackground | UIColor | Background color for the video call button. |
-| videoCallButtonCornerRadius | CometChatCornerStyle | Corner radius for the video call button. |
-| videoCallButtonBorder | CGFloat | Border width for the video call button. |
-| videoCallButtonBorderColor | UIColor | Border color for the video call button. |
-| videoCallIcon | UIImage | Icon for the video call button. |
-| audioCallIconTint | UIColor | Tint color for the audio call icon. |
-| audioCallTextFont | UIFont | Font for the audio call button text. |
-| audioCallTextColor | UIColor | Color for the audio call button text. |
-| audioCallButtonBackground | UIColor | Background color for the audio call button. |
-| audioCallButtonCornerRadius | CometChatCornerStyle | Corner radius for the audio call button. |
-| audioCallButtonBorder | CGFloat | Border width for the audio call button. |
-| audioCallButtonBorderColor | UIColor | Border color for the audio call button. |
-| audioCallIcon | UIImage | Icon for the audio call button. |
-| hideVideoCallButton | Bool | Hides the video call button. |
-| hideVoiceCallButton | Bool | Hides the voice call button. |
-| set(user:) | User | Sets the User object for CometChatCallButtons. |
-| set(group:) | Group | Sets the Group object for CometChatCallButtons. |
-| set(outgoingCallConfiguration:) | OutgoingCallConfiguration | Sets the configuration for outgoing calls. |
-| set(customSoundForCalls:) | URL | Sets a custom sound for incoming and outgoing calls. |
-| set(callSettingBuilder:) | (CallType, [CallUser]) -> CallSettings | Function to build call settings based on call type and participants. |
-| set(onVoiceCallClick:) | (User?, Group?) -> Void | Override the action triggered upon pressing the voice call button. |
-| set(onVideoCallClick:) | (User?, Group?) -> Void | Override the action triggered upon pressing the video call button. |
-| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. |
-| set(controller:) | UIViewController | Sets the controller (mandatory for proper configuration). |
-| style | CallButtonStyle | Customizes the appearance of the CallButtons component. |
-
-### Renamed Properties
-
-| Name | Type | Description | Old Name |
-| -------------------- | -------------- | ----------------------------------------------- | ----------- |
-| hideVideoCallButton | Bool | Hides the video call button. | hide(videoCall:) |
-| hideVoiceCallButton | Bool | Hides the voice call button. | hide(voiceCall:) |
-| set(onVoiceCallClick:) | (User?, Group?) -> Void | Override the action triggered upon pressing the voice call button. | setOnVoiceCallClick |
-| set(onVideoCallClick:) | (User?, Group?) -> Void | Override the action triggered upon pressing the video call button. | setOnVideoCallClick |
-| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. | setOnError |
-
-### Removed Properties
-
-| Name | Type | Description |
-| ----------------------------- | ----------------------------------- | -------------------------------------------------- |
-| set(background:) | UIColor | Sets the background color. |
-| set(textFont:) | UIFont | Sets the font of the text. |
-| set(textColor:) | UIColor | Sets the color of the text. |
-| set(cornerRadius:) | CometChatCornerStyle | Sets the corner radius. |
-| set(borderColor:) | UIColor | Sets the color of the border. |
-| set(borderWidth:) | CGFloat | Sets the width of the border. |
-| set(iconBackground:) | UIColor | Sets the background of the icon. |
-| set(iconBorder:) | CGFloat | Sets the border of the icon. |
-| set(iconCornerRadius:) | CGFloat | Sets the corner radius of the icon. |
-| set(iconTint:) | UIColor | Sets the tint of the icon. |
-| set(callButtonsStyle:) | ButtonStyle | Sets the button style for call buttons. |
-| set(isCenterAligned:) | Bool | Sets the alignment of the buttons. |
-| set(videoCallIcon:) | UIImage | Sets the icon for the video call button (now part of style). |
-| set(videoCallIconText:) | String | Sets the text for the video call button. |
-| set(voiceCallIcon:) | UIImage | Sets the icon for the voice call button (now part of style). |
-| set(voiceCallIconText:) | String | Sets the text for the voice call button. |
-
-## Incoming Call
-
-### New Properties
-
-| Name | Type | Description |
-| ---------------------------------------- | --------- | -------------------------------------------------------------------- |
-| overlayBackgroundColor | UIColor | Background color for the overlay. |
-| acceptButtonBackgroundColor | UIColor | Background color for the accept button. |
-| rejectButtonBackgroundColor | UIColor | Background color for the reject button. |
-| acceptButtonTintColor | UIColor | Tint color for the accept button. |
-| rejectButtonTintColor | UIColor | Tint color for the reject button. |
-| acceptButtonImage | UIImage | Icon image for the accept button. |
-| rejectButtonImage | UIImage | Icon image for the reject button. |
-| acceptButtonCornerRadius | CometChatCornerStyle | Sets corner radius for accept button. |
-| rejectButtonCornerRadius | CometChatCornerStyle | Sets corner radius for reject button. |
-| acceptButtonBorderWidth | CGFloat | Sets border width for accept button. |
-| rejectButtonBorderWidth | CGFloat | Sets border width for reject button. |
-| acceptButtonBorderColor | UIColor | Sets border color for accept button. |
-| rejectButtonBorderColor | UIColor | Sets border color for reject button. |
-| backgroundColor | UIColor | Background color for the call view. |
-| cornerRadius | CometChatCornerStyle | Corner radius for the view. |
-| borderColor | UIColor | Border color for the view. |
-| borderWidth | CGFloat | Border width for the view. |
-| callLabelColor | UIColor | Text color for the call label. |
-| callLabelFont | UIFont | Font for the call label. |
-| nameLabelColor | UIColor | Text color for the name label. |
-| nameLabelFont | UIFont | Font for the name label. |
-| disableSoundForCalls | Bool | Disables sound for incoming calls. |
-| set(customSoundForCalls:) | URL | Sets a custom sound for incoming calls. |
-| set(call:) | Call | Sets the call object for the incoming call. |
-| set(onAcceptClick:) | (Call, UIViewController?) -> Void | Override the action triggered upon pressing the accept button. |
-| set(onCancelClick:) | (Call, UIViewController?) -> Void | Override the action triggered upon pressing the reject button. |
-| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. |
-| set(listItemView:) | (Call) -> UIView | Assigns a custom view to the incoming call item view. |
-| set(leadingView:) | (Call) -> UIView | Sets a custom leading view for incoming call. |
-| set(titleView:) | (Call) -> UIView | Sets a custom title view for incoming call. |
-| style | IncomingCallStyle | Customizes the appearance of the IncomingCall component. |
-| avatarStyle | AvatarStyle | Customizes the appearance of avatars. |
-
-### Renamed Properties
-
-| Name | Type | Description | Old Name |
-| -------------------- | -------------- | ----------------------------------------------- | ----------- |
-| set(onAcceptClick:) | (Call, UIViewController?) -> Void | Override the action triggered upon pressing the accept button. | setOnAcceptClick |
-| set(onCancelClick:) | (Call, UIViewController?) -> Void | Override the action triggered upon pressing the reject button. | setOnCancelClick |
-| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. | setOnError |
-
-### Removed Properties
-
-| Name | Type | Description |
-| ----------------------------- | ----------------------------------- | -------------------------------------------------- |
-| set(background:) | UIColor | Sets the background color for IncomingCall. |
-| set(cornerRadius:) | CometChatCornerStyle | Sets the corner radius for IncomingCall. |
-| set(borderWidth:) | CGFloat | Sets the border width for IncomingCall. |
-| set(borderColor:) | UIColor | Sets the border color for IncomingCall. |
-| set(titleColor:) | UIColor | Sets the title color for IncomingCall. |
-| set(titleFont:) | UIFont | Sets the title font for IncomingCall. |
-| set(subtitleColor:) | UIColor | Sets the subtitle color for IncomingCall. |
-| set(subtitleFont:) | UIFont | Sets the subtitle font for IncomingCall. |
-| set(incomingCallStyle:) | IncomingCallStyle | Sets the incoming call style. |
-| set(avatarStyle:) | AvatarStyle | Sets the avatar style. |
-| set(user:) | User | Sets the user object for the incoming call. |
-| set(acceptButtonIcon:) | UIImage | Sets the icon for the accept button (now part of style). |
-| set(declineButtonIcon:) | UIImage | Sets the icon for the decline button (now part of style). |
-
-## Outgoing Call
-
-### New Properties
-
-| Name | Type | Description |
-| ---------------------------------------- | --------- | -------------------------------------------------------------------- |
-| backgroundColor | UIColor | Sets the background color for the outgoing call view. |
-| borderColor | UIColor | Sets the border color for the outgoing call view. |
-| borderWidth | CGFloat | Sets the border width for the outgoing call view. |
-| cornerRadius | CometChatCornerStyle | Sets the corner radius for the outgoing call view. |
-| nameTextColor | UIColor | Sets the text color for the name label in the outgoing call view. |
-| nameTextFont | UIFont | Sets the font for the name label in the outgoing call view. |
-| callTextColor | UIColor | Sets the text color for the call label in the outgoing call view. |
-| callTextFont | UIFont | Sets the font for the call label in the outgoing call view. |
-| declineButtonBackgroundColor | UIColor | Sets the background color for the decline button in the outgoing call view. |
-| declineButtonIconTint | UIColor | Sets the tint color for the decline button icon. |
-| declineButtonIcon | UIImage | Sets the icon for the decline button. |
-| declineButtonCornerRadius | CometChatCornerStyle | Sets the corner radius for decline button. |
-| declineButtonBorderColor | UIColor | Sets the border color for decline button. |
-| declineButtonBorderWidth | CGFloat | Sets the border width for decline button. |
-| nameLabel | UIFont | Sets the font for the name label. |
-| callingLabel | UIFont | Sets the font for the call label. |
-| disableSoundForCalls | Bool | Disables sound for outgoing calls. |
-| set(customSoundForCalls:) | URL | Sets a custom sound for outgoing calls. |
-| set(call:) | Call | Sets the Call object for CometChatOutgoingCall. |
-| set(onCancelClick:) | (Call, UIViewController?) -> Void | Override the action triggered upon pressing the cancel button. |
-| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. |
-| set(avatarView:) | (Call) -> UIView | Sets a custom avatar view for outgoing call. |
-| set(cancelView:) | (Call) -> UIView | Sets a custom cancel button view for outgoing call. |
-| set(titleView:) | (Call) -> UIView | Sets a custom title view for outgoing call. |
-| set(subtitleView:) | (Call) -> UIView | Sets a custom subtitle view for outgoing call. |
-| style | OutgoingCallStyle | Customizes the appearance of the OutgoingCall component. |
-| avatarStyle | AvatarStyle | Customizes the appearance of avatars. |
-
-### Renamed Properties
-
-| Name | Type | Description | Old Name |
-| -------------------- | -------------- | ----------------------------------------------- | ----------- |
-| set(onCancelClick:) | (Call, UIViewController?) -> Void | Override the action triggered upon pressing the cancel button. | setOnCancelClick |
-| set(onError:) | (CometChatException) -> Void | Triggered when an error occurs. | setOnError |
-
-### Removed Properties
-
-| Name | Type | Description |
-| ----------------------------- | ----------------------------------- | -------------------------------------------------- |
-| set(background:) | UIColor | Sets the background color. |
-| set(cornerRadius:) | CometChatCornerStyle | Sets the corner radius. |
-| set(borderWidth:) | CGFloat | Sets the border width. |
-| set(borderColor:) | UIColor | Sets the border color. |
-| set(titleColor:) | UIColor | Sets the title color. |
-| set(titleFont:) | UIFont | Sets the title font. |
-| set(subtitleColor:) | UIColor | Sets the subtitle color. |
-| set(subtitleFont:) | UIFont | Sets the subtitle font. |
-| set(outgoingCallStyle:) | OutgoingCallStyle | Sets the outgoing call style. |
-| set(avatarStyle:) | AvatarStyle | Sets the avatar style. |
-| set(buttonStyle:) | ButtonStyle | Sets the button style for outgoing call. |
-| disable(soundForCalls:) | Bool | Disables the default sound for calls. |
-| set(declineButtonIcon:) | UIImage | Sets the icon for the decline button (now part of style). |
-| set(user:) | User | Sets the User object for CometChatOutgoingCall. |
----
-
-
-
+| setAttachmentOptions | Closure | List of custom MessageComposerActions. |
+| setAuxilaryButtonView | Closure | Custom auxiliary button view. |
+| setSecondaryButtonView | Closure | Custom secondary button view. |
+| setSendButtonView | Closure | Custom send button view. |
\ No newline at end of file
diff --git a/ui-kit/ios/search.mdx b/ui-kit/ios/search.mdx
index 4b6c5828..a23b4a85 100644
--- a/ui-kit/ios/search.mdx
+++ b/ui-kit/ios/search.mdx
@@ -1,24 +1,26 @@
---
title: "Search"
+sidebarTitle: "Search"
+description: "Search across conversations and messages with customizable filters in CometChat UI Kit for iOS"
---
## Overview
-The `CometChatSearch` component is a powerful and customizable search interface that allows users to search across conversations and messages in real time. It supports a wide variety of filters, scopes, and customization options. `CometChatSearch` helps users find messages, conversations, media, and more through an intuitive and filterable search experience. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a full-screen search experience.
+The `CometChatSearch` component is a powerful and customizable search interface that allows users to search across conversations and messages in real time. It supports a wide variety of filters, scopes, and customization options.
+
+`CometChatSearch` helps users find messages, conversations, media, and more through an intuitive and filterable search experience. It can be embedded in multiple contexts—as part of the conversation list, message header, or as a full-screen search experience.
-***
+---
## Usage
### Integration
-`CometChatSearch`, as a composite Component, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action.
-
-The following code snippet exemplifies how you can seamlessly integrate the CometChatSearch component into your application.
+`CometChatSearch` is a composite component that offers flexible integration options. It can be launched directly via button clicks or any user-triggered action.
@@ -26,18 +28,18 @@ The following code snippet exemplifies how you can seamlessly integrate the Come
let search = CometChatSearch()
self.navigationController?.pushViewController(search, animated: true)
```
-
-
-***
+---
### Actions
+[Actions](/ui-kit/ios/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type to tailor the behavior to fit your specific needs.
+
#### 1. onConversationClicked
-`onConversationClicked` is triggered when you click on a Conversation from the search result. The `onConversationClicked` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+Triggered when you click on a Conversation from the search result. This action doesn't have a predefined behavior—you can override it using the following code snippet:
@@ -46,15 +48,14 @@ search.onConversationClicked = { conversation in
print("Conversation clicked:", conversation.conversationId)
}
```
-
-***
+---
#### 2. onMessageClicked
-`onMessageClicked` is triggered when you click on a Message from the search result. The `onMessageClicked` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+Triggered when you click on a Message from the search result. This action doesn't have a predefined behavior—you can override it using the following code snippet:
@@ -63,16 +64,14 @@ search.onMessageClicked = { message in
print("Message clicked:", message.id)
}
```
-
-
-***
+---
#### 3. onBack
-'onBack' is triggered when you click on the back button of the search component.
+Triggered when you click on the back button of the search component.
@@ -81,16 +80,14 @@ search.onBack = {
self.navigationController?.popViewController(animated: true)
}
```
-
-
-***
+---
#### 4. onError
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Search component.
+Listens for any errors that occur in the Search component. This action doesn't change the component's behavior.
@@ -99,16 +96,14 @@ search.set(onError: { error in
print("Search error:", error.localizedDescription)
})
```
-
-
-***
+---
#### 5. onEmpty
-This action doesn't change the behavior of the component but rather listens for the empty state of the Search component.
+Listens for the empty state of the Search component. This action doesn't change the component's behavior.
@@ -117,36 +112,35 @@ search.set(onEmpty: {
print("No results found")
})
```
-
-
+---
+
### 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 using RequestBuilders of the Chat SDK.
+
#### 1. ConversationsRequestBuilder
-You can set the `ConversationsRequestBuilder` in the Search Component to filter the search result. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/ios/retrieve-conversations).
+Set the `ConversationsRequestBuilder` in the Search Component to filter the search results. For more options, refer to [ConversationRequestBuilder](/sdk/ios/retrieve-conversations).
-```swift
+```swift
let convBuilder = ConversationsRequest.ConversationsRequestBuilder()
- .set(limit:20)
+ .set(limit: 20)
search.set(conversationsRequestBuilder: convBuilder)
-
```
-
-
-***
+---
#### 2. MessagesRequestBuilder
-You can set the `MessagesRequestBuilder` in the Search Component to filter the search result. You can modify the builder as per your specific requirements with multiple options available to know more refer to [MessagesRequestBuilder](/sdk/ios/additional-message-filtering).
+Set the `MessagesRequestBuilder` in the Search Component to filter the search results. For more options, refer to [MessagesRequestBuilder](/sdk/ios/additional-message-filtering).
@@ -156,21 +150,19 @@ let msgBuilder = MessagesRequest.MessageRequestBuilder()
.hide(deletedMessages: true)
search.set(messagesRequestBuilder: msgBuilder)
-
```
-
-***
+---
### Events
-[Events](/ui-kit/ios/components-overview) 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.
+[Events](/ui-kit/ios/components-overview#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 can be added or removed as needed.
The `CometChatSearch` component does not produce any events.
-***
+---
## Customization
@@ -178,7 +170,7 @@ To fit your app's design requirements, you can customize the appearance of the `
### Style
-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.
+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.
@@ -187,21 +179,19 @@ Using Style you can customize the look and feel of the component in your app, Th
```swift
-
-// component level styling
+// Instance-level styling
let style = SearchStyle()
style.backgroundColor = UIColor(hex: "#EDEAFA")
style.listItemBackground = UIColor(hex: "#EDEAFA")
style.listItemTitleFont = UIFont(name: "TimesNewRomanPS-Regular", size: 16)
style.titleFont = UIFont(name: "TimesNewRomanPS-Bold", size: 12)
style.searchBarPlaceholderTextFont = UIFont(name: "TimesNewRomanPS-Regular", size: 12)
-
+
let searchVC = CometChatSearch()
searchVC.style = style
self?.navigationController?.pushViewController(searchVC, animated: true)
-
-
-// global level styling
+
+// Global-level styling
CometChatSearch.style.backgroundColor = UIColor(hex: "#EDEAFA")
CometChatSearch.style.listItemBackground = UIColor(hex: "#EDEAFA")
CometChatSearch.style.listItemTitleFont = UIFont(name: "TimesNewRomanPS-Regular", size: 16)
@@ -211,54 +201,42 @@ CometChatSearch.style.searchBarPlaceholderTextFont = UIFont(name: "TimesNewRoman
-***
+---
### 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 toggle the visibility of UI elements.
+These are small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can toggle the visibility of UI elements.
+
+| Property | Description | Example |
+|---------------------------|-------------------------------------------------------|----------------------------------------------------------------------|
+| user | Restrict search to a specific user chat | `search.user = user` |
+| group | Restrict search to a group | `search.group = group` |
+| hideUserStatus | Hide online/offline indicator | `search.hideUserStatus = true` |
+| hideGroupType | Hide group type icon | `search.hideGroupType = true` |
+| searchFilters | Filters like "Messages", "Media" | `search.set(searchFilters: [.unread, .groups, .photos])` |
+| initialSearchFilter | Default tab/filter | `search.initialSearchFilter = .messages` |
+| searchIn | Restrict search: messages / conversations / both | `search.set(searchIn: [.messages])` |
+| loadingStateView | Custom loader | `search.set(loadingStateView: spinner)` |
+| emptyStateView | Custom empty result view | `search.set(emptyStateView: emptyView)` |
+| errorStateView | Custom error UI | `search.set(errorStateView: errorView)` |
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Example |
-|---------------------------|-------------------------------------------------------|----------------------------------------------|
-| **user** | Restrict search to a specific user chat | `search.user = user` |
-| **group** | Restrict search to a group | `search.group = group` |
-| **hideUserStatus** | Hide online/offline indicator | `search.hideUserStatus = true` |
-| **hideGroupType** | Hide group type icon | `search.hideGroupType = true` |
-| **searchFilters** | Filters like "Messages", "Media" | `search.set(searchFilters: [SearchFilter] = [.unread, .groups, .photos])` |
-| **initialSearchFilter** | Default tab/filter | `search.initialSearchFilter = .messages` |
-| **searchIn** | Restrict search: messages / conversations / both | `search.set(searchIn: [SearchScope] = [.messages]) |
-| **loadingStateView** | Custom loader | `search.set(loadingStateView: spinner)` |
-| **emptyStateView** | Custom empty result view | `search.set(emptyStateView: emptyView)` |
-| **errorStateView** | Custom error UI | `search.set(errorStateView: errorView)` |
+---
### 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.
-
-***
-
-#### conversationListItemView
+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 own views, layouts, and UI elements and then incorporate those into the component.
-With this function, you can assign a custom list item view to an conversation in the search result. For more information, refer to the [itemView](/ui-kit/ios/conversations) prop of the `CometChatConversations` component.
+#### Conversation View Customization
-#### conversationLeadingView
+| Function | Description |
+|-------------------------------|-------------------------------------------------------------|
+| conversationListItemView | Assign a custom list item view to a conversation. |
+| conversationLeadingView | Assign a custom leading view to a conversation. |
+| conversationTitleView | Assign a custom title view to a conversation. |
+| conversationSubtitleView | Assign a custom subtitle view to a conversation. |
+| conversationTrailingView | Assign a custom trailing view to a conversation. |
-With this function, you can assign a custom leading view of an conversation in the search result. For more information, refer to the [leadingView](/ui-kit/ios/conversations) prop of the `CometChatConversations` component.
-
-#### conversationTitleView
-
-With this function, you can assign a custom title view to an conversation in the search result. For more information, refer to the [titleView](/ui-kit/ios/conversations) prop of the `CometChatConversations` component.
-
-#### conversationSubtitleView
-
-With this function, you can assign a custom subtitle view to an conversation in the search result. For more information, refer to the [subtitleView](/ui-kit/ios/conversations#subtitleview) prop of the `CometChatConversations` component.
-
-#### conversationTrailingView
-
-With this function, you can assign a custom trailing view to an conversation in the search result. For more information, refer to the [trailingView](/ui-kit/ios/conversations#trailingview) prop of the `CometChatConversations` component.
-
-#### messageListItemView
+#### Message View Customization
With message item view functions, you can assign custom views to different types of messages in the search result. For more information, refer to the [itemView](/ui-kit/ios/messages#itemview) prop of the `CometChatMessages` component.
@@ -272,32 +250,32 @@ searchVC.set(listItemViewForMessage: { message in
return SearchMessageItemView()
})
```
-
-It should look like this in the app:
-
-- code for custom view:
+Custom view implementation:
+
```swift
class SearchMessageItemView: UIView {
+ // MARK: - UI Components
+
private let containerView: UIView = {
let view = UIView()
- view.backgroundColor = UIColor(red: 0.95, green: 0.93, blue: 0.98, alpha: 1.0) // light purple
+ view.backgroundColor = UIColor(red: 0.95, green: 0.93, blue: 0.98, alpha: 1.0)
return view
}()
private let senderLabel: UILabel = {
let label = UILabel()
label.font = UIFont.boldSystemFont(ofSize: 16)
- label.textColor = UIColor(red: 0.37, green: 0.22, blue: 0.73, alpha: 1.0) // purple
+ label.textColor = UIColor(red: 0.37, green: 0.22, blue: 0.73, alpha: 1.0)
return label
}()
@@ -312,7 +290,7 @@ class SearchMessageItemView: UIView {
private let bottomLine: UIView = {
let view = UIView()
- view.backgroundColor = UIColor(red: 0.37, green: 0.22, blue: 0.73, alpha: 1.0) // purple border
+ view.backgroundColor = UIColor(red: 0.37, green: 0.22, blue: 0.73, alpha: 1.0)
return view
}()
@@ -324,6 +302,7 @@ class SearchMessageItemView: UIView {
return stack
}()
+ // MARK: - Initialization
override init(frame: CGRect) {
super.init(frame: frame)
@@ -335,6 +314,8 @@ class SearchMessageItemView: UIView {
setupUI()
}
+ // MARK: - Setup
+
private func setupUI() {
addSubview(containerView)
containerView.translatesAutoresizingMaskIntoConstraints = false
@@ -365,50 +346,51 @@ class SearchMessageItemView: UIView {
])
}
- /// Configure view with sender + message (with bold keyword)
+ // MARK: - Configuration
+
+ /// Configure view with sender name and message text
+ /// - Parameters:
+ /// - sender: The sender's name
+ /// - message: The message content
+ /// - boldKeyword: Optional keyword to highlight in bold
func configure(sender: String, message: String, boldKeyword: String?) {
-
senderLabel.text = sender + ":"
if let keyword = boldKeyword, message.contains(keyword) {
let attributed = NSMutableAttributedString(string: message)
let range = (message as NSString).range(of: keyword)
- attributed.addAttribute(.font,
- value: UIFont.boldSystemFont(ofSize: 16),
- range: range)
+ attributed.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: 16), range: range)
messageLabel.attributedText = attributed
} else {
messageLabel.text = message
}
}
}
-
```
-
+Available message item view functions for customization:
-Bellow is the list of message item view functions available for customization:
+| Function | Message Type |
+|-----------------------------|----------------------|
+| listItemViewForImage | Image Message |
+| listItemViewForVideo | Video Message |
+| listItemViewForAudio | Audio Message |
+| listItemViewForDocument | Document Message |
+| listItemViewForLink | Link Message |
-| Function | Message Type |
-| -------------------------------- | ---------------------|
-| **listItemViewForImage** | Image Message |
-| **listItemViewForVideo** | Video Message |
-| **listItemViewForAudio** | Audio Message |
-| **listItemViewForDocument** | Document Message |
-| **listItemViewForLink** | Link Message |
+---
#### DateTime Formatters
-#### 1. setDateTimeFormatter
-
By providing a custom implementation of the DateTimeFormatterCallback, you can configure how time and date values are displayed. This ensures consistent formatting for labels such as "Today", "Yesterday", "X minutes ago", and more.
```swift
-let searchVC = CometChatSearch()
+let searchVC = CometChatSearch()
+
searchVC.dateTimeFormatter.today = { timestamp in
return "Today • \(formattedTime(timestamp))"
}
@@ -418,24 +400,21 @@ searchVC.dateTimeFormatter.otherDay = { timestamp in
df.dateFormat = "dd MMM yyyy"
return df.string(from: Date(timeIntervalSince1970: timestamp))
}
-
```
-
-
-***
+---
#### Text Formatters
-#### setTextFormatters
+The `setTextFormatters` method enables developers to define and apply text formatters that dynamically modify or transform message content before rendering it in the UI. Text formatters can be used for:
-This method enables developers to define and apply text formatters that dynamically modify or transform message content before rendering it in the UI. Text formatters can be used for purposes such as:
+- Automatically converting URLs into clickable links
+- Applying Markdown or rich text styling
+- Replacing certain words or patterns with emojis or predefined text
+- Censoring specific words for moderation
-* Automatically converting URLs into clickable links
-* Applying Markdown or rich text styling
-* Replacing certain words or patterns with emojis or predefined text
-* Censoring specific words for moderation
+By utilizing this method, developers can enhance readability, usability, and compliance with content guidelines. See the [MentionsFormatter Guide](/ui-kit/ios/mentions-formatter-guide) for more details.
-By utilizing this method, developers can enhance readability, usability, and compliance with content guidelines. [MentionsFormatter Guide](/ui-kit/ios/mentions-formatter-guide)
\ No newline at end of file
+---
diff --git a/ui-kit/ios/shortcut-formatter-guide.mdx b/ui-kit/ios/shortcut-formatter-guide.mdx
index e10d35e5..9c6fb844 100644
--- a/ui-kit/ios/shortcut-formatter-guide.mdx
+++ b/ui-kit/ios/shortcut-formatter-guide.mdx
@@ -1,250 +1,284 @@
---
title: "ShortCut Formatter"
+sidebarTitle: "ShortCut Formatter"
+description: "Implement message shortcuts using the ShortCutFormatter class in CometChat UI Kit for iOS"
---
## Introduction
-The ShortCutFormatter class extends the CometChatTextFormatter class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using ShortCutFormatter to implement shortcut extensions in your CometChat application.
+The `ShortCutFormatter` class extends the `CometChatTextFormatter` class to provide a mechanism for handling shortcuts within messages. This guide walks you through the process of using `ShortCutFormatter` to implement shortcut extensions in your CometChat application.
+
+---
## Setup
-1. **Create the ShortCutFormatter Class**: Define the `ShortCutFormatter` class by extending the `CometChatTextFormatter` class.
+### 1. Create the ShortCutFormatter Class
+
+Define the `ShortCutFormatter` class by extending the `CometChatTextFormatter` class:
```swift
class ShortcutFormatter: CometChatTextFormatter {
-
- private var messageShortcuts: [String: String] = [String: String]( )
+
+ // Store fetched shortcuts from the extension
+ private var messageShortcuts: [String: String] = [:]
+
+ // Store suggestion items for display
private var shortcuts: [CometChatUIKitSwift.SuggestionItem] = []
-
}
```
-
-
-2. **initializer**: Sets the `trackingCharacter` to **'!'** in the initializer of the `ShortcutFormatter` class
+### 2. Initialize with Tracking Character
+
+Set the `trackingCharacter` to `'!'` in the initializer:
```swift
- override init(trackingCharacter: Character) {
- super.init(trackingCharacter: "!")
- }
+override init(trackingCharacter: Character) {
+ super.init(trackingCharacter: "!")
+}
```
-
-
-3. **Prepare Regex**: Set the regular expression for shortcut detection in the `getRegex()` method of `ShortcutFormatter` class.
+### 3. Define the Regex Pattern
+
+Set the regular expression for shortcut detection in the `getRegex()` method:
```swift
override func getRegex() -> String {
- return "(^|\\s)!\\w+"
+ return "(^|\\s)!\\w+"
}
```
-
-
-4. **Prepare TrackingCharacter**: Define the `getTrackingCharacter()` method to return **'!'** as the shortcut tracking character in `ShortcutFormatter` class.
+### 4. Return the Tracking Character
+
+Define the `getTrackingCharacter()` method to return `'!'` as the shortcut tracking character:
```swift
override func getTrackingCharacter() -> Character {
- return "!"
+ return "!"
}
```
-
-
-5. **Override Search Method**: Override the `search()` method to search for shortcuts based on the entered query.
+### 5. Implement the Search Method
+
+Override the `search()` method to search for shortcuts based on the entered query:
```swift
override func search(string: String, suggestedItems: (([CometChatUIKitSwift.SuggestionItem]) -> ())? = nil) {
-
- if messageShortcuts.isEmpty == true {
- CometChat.callExtension(slug: "message-shortcuts", type: .get, endPoint: "v1/fetch", body: nil) { [weak self] extensionResponseData in
- guard let this = self else { return }
- if let shotCutData = extensionResponseData?["shortcuts"] as? [String: String] {
- this.messageShortcuts = shotCutData
- var suggestedItemsList = [CometChatUIKitSwift.SuggestionItem]()
- this.messageShortcuts.forEach({ (key, value) in
- if key.hasPrefix(string) {
- suggestedItemsList.append(CometChatUIKitSwift.SuggestionItem(id: key, name: value, visibleText: value))
- }
- })
- suggestedItems?(suggestedItemsList)
- }
- } onError: { error in
- print("Error occured while fetcing shot cuts: \(error?.errorDescription)")
+
+ // Fetch shortcuts from extension if not already cached
+ if messageShortcuts.isEmpty {
+ CometChat.callExtension(
+ slug: "message-shortcuts",
+ type: .get,
+ endPoint: "v1/fetch",
+ body: nil
+ ) { [weak self] extensionResponseData in
+ guard let self = self else { return }
+
+ if let shortcutData = extensionResponseData?["shortcuts"] as? [String: String] {
+ self.messageShortcuts = shortcutData
+
+ // Filter shortcuts matching the search string
+ let suggestedItemsList = self.messageShortcuts
+ .filter { $0.key.hasPrefix(string) }
+ .map { CometChatUIKitSwift.SuggestionItem(id: $0.key, name: $0.value, visibleText: $0.value) }
+
+ suggestedItems?(suggestedItemsList)
}
-
- } else {
- var suggestedItemsList = [CometChatUIKitSwift.SuggestionItem]()
- messageShortcuts.forEach({ (key, value) in
- if key.hasPrefix(string) {
- suggestedItemsList.append(CometChatUIKitSwift.SuggestionItem(id: key, name: value, visibleText: value))
- }
- })
- suggestedItems?(suggestedItemsList)
+ } onError: { error in
+ print("Error occurred while fetching shortcuts: \(error?.errorDescription ?? "Unknown error")")
+ }
+ } else {
+ // Use cached shortcuts
+ let suggestedItemsList = messageShortcuts
+ .filter { $0.key.hasPrefix(string) }
+ .map { CometChatUIKitSwift.SuggestionItem(id: $0.key, name: $0.value, visibleText: $0.value) }
+
+ suggestedItems?(suggestedItemsList)
}
-
}
```
-
-
-6. **Handle prepareMessageString**: Implement the `prepareMessageString()` method to convert the base chat message into an attributed string for display in the `ShortcutFormatter` class.
+### 6. Handle Message String Preparation
+
+Implement the `prepareMessageString()` method to convert the base chat message into an attributed string for display:
```swift
-override func prepareMessageString(baseMessage: BaseMessage, regexString: String, alignment: MessageBubbleAlignment = .left, formattingType: FormattingType) -> NSAttributedString {
-let message = (baseMessage as? TextMessage)?.text ?? ""
-return NSAttributedString(string: message)
+override func prepareMessageString(
+ baseMessage: BaseMessage,
+ regexString: String,
+ alignment: MessageBubbleAlignment = .left,
+ formattingType: FormattingType
+) -> NSAttributedString {
+ let message = (baseMessage as? TextMessage)?.text ?? ""
+ return NSAttributedString(string: message)
}
```
-
-
-7. **Handle onTextTapped**: Override the `onTextTapped()` method if needed.
+### 7. Handle Text Tap Events
+
+Override the `onTextTapped()` method if you need to handle tap events on formatted text:
```swift
override func onTextTapped(baseMessage: BaseMessage, tappedText: String, controller: UIViewController?) {
- // Your code here
+ // Handle tap event on shortcut text
}
```
-
-
-* Below is an example of how a `ShortcutFormatter` Swift file might look:
+---
+
+## Complete Implementation
+
+Here's the complete `ShortcutFormatter` class:
-```swift ShortcutFormatter.swift
+
+
+```swift
import Foundation
import CometChatSDK
import CometChatUIKitSwift
class ShortcutFormatter: CometChatTextFormatter {
-
- private var messageShortcuts: [String: String] = [String: String]()
+
+ // MARK: - Properties
+
+ private var messageShortcuts: [String: String] = [:]
private var shortcuts: [CometChatUIKitSwift.SuggestionItem] = []
-
+
+ // MARK: - Initialization
+
override init(trackingCharacter: Character) {
super.init(trackingCharacter: "!")
}
-
+
+ // MARK: - Override Methods
+
override func getRegex() -> String {
return "(^|\\s)!\\w+"
}
-
+
override func getTrackingCharacter() -> Character {
return "!"
}
-
+
override func search(string: String, suggestedItems: (([CometChatUIKitSwift.SuggestionItem]) -> ())? = nil) {
-
- if messageShortcuts.isEmpty == true {
- CometChat.callExtension(slug: "message-shortcuts", type: .get, endPoint: "v1/fetch", body: nil) { [weak self] extensionResponseData in
- guard let this = self else { return }
- if let shotCutData = extensionResponseData?["shortcuts"] as? [String: String] {
- this.messageShortcuts = shotCutData
- var suggestedItemsList = [CometChatUIKitSwift.SuggestionItem]()
- this.messageShortcuts.forEach({ (key, value) in
- if key.hasPrefix(string) {
- suggestedItemsList.append(CometChatUIKitSwift.SuggestionItem(id: key, name: value, visibleText: value))
- }
- })
+
+ if messageShortcuts.isEmpty {
+ CometChat.callExtension(
+ slug: "message-shortcuts",
+ type: .get,
+ endPoint: "v1/fetch",
+ body: nil
+ ) { [weak self] extensionResponseData in
+ guard let self = self else { return }
+
+ if let shortcutData = extensionResponseData?["shortcuts"] as? [String: String] {
+ self.messageShortcuts = shortcutData
+
+ let suggestedItemsList = self.messageShortcuts
+ .filter { $0.key.hasPrefix(string) }
+ .map { CometChatUIKitSwift.SuggestionItem(id: $0.key, name: $0.value, visibleText: $0.value) }
+
suggestedItems?(suggestedItemsList)
}
-
} onError: { error in
- print("Error occured while fetcing shot cuts: \(error?.errorDescription)")
+ print("Error occurred while fetching shortcuts: \(error?.errorDescription ?? "Unknown error")")
}
-
} else {
-
- var suggestedItemsList = [CometChatUIKitSwift.SuggestionItem]()
- messageShortcuts.forEach({ (key, value) in
- if key.hasPrefix(string) {
- suggestedItemsList.append(CometChatUIKitSwift.SuggestionItem(id: key, name: value, visibleText: value))
- }
- })
+ let suggestedItemsList = messageShortcuts
+ .filter { $0.key.hasPrefix(string) }
+ .map { CometChatUIKitSwift.SuggestionItem(id: $0.key, name: $0.value, visibleText: $0.value) }
+
suggestedItems?(suggestedItemsList)
-
}
-
}
-
- override func prepareMessageString(baseMessage: BaseMessage, regexString: String, alignment: MessageBubbleAlignment = .left, formattingType: FormattingType) -> NSAttributedString {
+
+ override func prepareMessageString(
+ baseMessage: BaseMessage,
+ regexString: String,
+ alignment: MessageBubbleAlignment = .left,
+ formattingType: FormattingType
+ ) -> NSAttributedString {
let message = (baseMessage as? TextMessage)?.text ?? ""
return NSAttributedString(string: message)
}
-
+
override func onTextTapped(baseMessage: BaseMessage, tappedText: String, controller: UIViewController?) {
- // Your code here
+ // Handle tap event on shortcut text
}
}
```
+
+
+
+---
## Usage
-1. **Initialization**: Initialize an instance of `ShortCutFormatter` in your application.
+### 1. Initialize the Formatter
+
+Create an instance of `ShortCutFormatter`:
```swift
let shortcutFormatter = ShortcutFormatter(trackingCharacter: "!")
```
-
-
-2. **Integration**: Integrating the `ShortCutFormatter` into your CometChat application involves incorporating it within your project to handle message shortcuts. If you're utilizing the [CometChatMessageComposer](/ui-kit/ios/message-composer) component, you can seamlessly integrate the ShortCutFormatter to manage shortcut functionalities within your application.
+### 2. Integrate with Message Composer
-* Your final integration code should look like this:
+If you're using the [CometChatMessageComposer](/ui-kit/ios/message-composer) component, integrate the `ShortCutFormatter` to manage shortcut functionalities:
```swift
let shortcutFormatter = ShortcutFormatter(trackingCharacter: "!")
-
+
let cometChatMessageComposer = CometChatMessageComposer()
cometChatMessageComposer.set(textFormatter: [shortcutFormatter])
```
-
-
-
+
+Ensure to pass and present `cometChatConversationsWithMessages`. If a navigation controller is already in use, utilize the `pushViewController` function instead of directly presenting the view controller.
+
-Ensure to pass and present `cometChatConversationsWithMessages`. If a navigation controller is already in use, utilize the pushViewController function instead of directly presenting the view controller.
-
-
+---
## Example
+
+---
diff --git a/ui-kit/ios/sound-manager.mdx b/ui-kit/ios/sound-manager.mdx
index a9fdcd3c..ea6bc926 100644
--- a/ui-kit/ios/sound-manager.mdx
+++ b/ui-kit/ios/sound-manager.mdx
@@ -1,42 +1,96 @@
---
title: "Sound Manager"
+sidebarTitle: "Sound Manager"
+description: "Manage and play audio for messages and calls in CometChat UI Kit for iOS"
---
## Overview
-The SoundManager is a helper class responsible for managing and playing various types of audio in the CometChat UI Kit. This includes sound events for incoming and outgoing messages and calls.
+`CometChatSoundManager` is a helper class that manages audio playback in the CometChat UI Kit. It handles sound events for incoming and outgoing messages and calls, supporting both default sounds and custom audio files.
+
+---
## Methods
### Play Sound
-The SoundManager plays pre-defined or custom sounds based on user interactions with the chat interface. If no custom sound file is provided, the default sound is played.
+The `play(sound:customSound:)` method triggers audio playback based on user interactions with the chat interface. If no custom sound file is provided, the default sound for that event type is played.
-Here are the available methods for triggering sound playback:
+```swift
+play(sound: Sound, customSound: URL?)
+```
-* `play(sound: Sound, customSound: URL?)`: This method plays different types of sounds for incoming and outgoing calls and messages.Moreover, it can play a customized sound for a specific URL when triggered.
+| Parameter | Type | Description |
+| ----------- | ------ | ------------------------------------------------------------------------------------------------ |
+| sound | Sound | The type of sound event (e.g., `.incomingMessage`, `.outgoingMessage`, `.incomingCall`, `.outgoingCall`) |
+| customSound | URL? | Optional URL to a custom sound file. If `nil`, the default sound is used. |
### Pause Sound
-The SoundManager can pause different types of sounds for incoming and outgoing calls and messages using the following method:
+The `pause()` method stops any sound currently being played by the SoundManager.
+
+```swift
+pause()
+```
-* `pause()`: This method pauses any sound currently being played.
+---
## Usage
-Here is how to use CometChatSoundManager:
+### Playing Default Sounds
+
+Play the default sound for an incoming message:
-```php
-// Play sound:
+
+
+```swift
+// Play the default incoming message sound
CometChatSoundManager().play(sound: .incomingMessage)
+```
+
+
+
+### Playing Custom Sounds
+
+Provide a custom audio file URL to override the default sound:
-// Play sound with custom sound:
+
+
+```swift
+// Play a custom sound for incoming messages
if let customSoundURL = Bundle.main.url(forResource: "customSound", withExtension: "wav") {
- CometChatSoundManager().play(sound: .incomingMessage, customSound: customSoundURL)
+ CometChatSoundManager().play(sound: .incomingMessage, customSound: customSoundURL)
}
+```
+
+
+
+### Pausing Sounds
+
+Stop any currently playing sound:
-// Pause Sound:
+
+
+```swift
+// Pause the currently playing sound
CometChatSoundManager().pause()
```
+
+
+
+---
+
+## Sound Types
+
+The `Sound` enum provides the following options:
+
+| Sound Type | Description |
+| ------------------ | ----------------------------------------- |
+| `.incomingMessage` | Played when a new message is received |
+| `.outgoingMessage` | Played when a message is sent |
+| `.incomingCall` | Played when an incoming call is received |
+| `.outgoingCall` | Played when initiating an outgoing call |
+
+---
-By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions.
+By using `CometChatSoundManager`, you can enhance the user experience in your chat application by integrating audible cues for chat interactions.
diff --git a/ui-kit/ios/theme-introduction.mdx b/ui-kit/ios/theme-introduction.mdx
index 7a8559d1..acdfe7ae 100644
--- a/ui-kit/ios/theme-introduction.mdx
+++ b/ui-kit/ios/theme-introduction.mdx
@@ -1,20 +1,22 @@
---
title: "Introduction"
+sidebarTitle: "Introduction"
+description: "Create visually consistent and customizable user interfaces with CometChat theming for iOS"
---
## Overview
-Theming in CometChat for iOS allows you to create visually consistent and customizable user interfaces that align with your application's branding. The CometChatTheme system enables global theming, customization of colors, typography, spacing, and component-specific styles to enhance the user experience across all CometChat components.
+Theming in CometChat for iOS allows you to create visually consistent and customizable user interfaces that align with your application's branding. The `CometChatTheme` system enables global theming, customization of colors, typography, spacing, and component-specific styles to enhance the user experience across all CometChat components.
With global styles and an easy-to-override architecture, you can seamlessly apply themes at both a global and component level.
-## Using Theming in Your Project
+---
-Global Theming
+## Using Theming in Your Project
-Set up the global theme for your application during the app launch. This ensures all CometChat components use the specified theme.
+### Global Theming
-Example in AppDelegate.swift
+Set up the global theme for your application during app launch. This ensures all CometChat components use the specified theme.
@@ -26,7 +28,10 @@ import CometChatSDK
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
- func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ func application(
+ _ application: UIApplication,
+ didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
+ ) -> Bool {
// Apply the global theme
CometChatTheme.primaryColor = UIColor.systemBackground
@@ -38,33 +43,32 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
}
}
```
-
-
-## Customization
+---
-Customizing Colors
+## Customization
-Override specific color attributes globally in CometChatTheme. This is equivalent to overriding attributes in Android's themes.xml.
+### Customizing Colors
-Example: Setting Primary Color
+Override specific color attributes globally in `CometChatTheme`. This is equivalent to overriding attributes in Android's `themes.xml`.
```swift
-CometChatTheme.primaryColor = UIColor(hex: "#F76808") // Custom primary color
+// Set a custom primary color
+CometChatTheme.primaryColor = UIColor(hex: "#F76808")
```
-
-
+
+---
diff --git a/ui-kit/ios/threaded-messages-header.mdx b/ui-kit/ios/threaded-messages-header.mdx
index ac5a95af..c0490438 100644
--- a/ui-kit/ios/threaded-messages-header.mdx
+++ b/ui-kit/ios/threaded-messages-header.mdx
@@ -1,10 +1,12 @@
---
title: "Threaded Messages Header"
+sidebarTitle: "Threaded Messages Header"
+description: "Display and customize the header for threaded message conversations in CometChat UI Kit for iOS"
---
## 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 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 appears at the top, the message composer is at the bottom, and a message list containing all replies is displayed between them.
@@ -12,16 +14,18 @@ ThreadedMessages is a [Composite Component](/ui-kit/ios/components-overview#comp
ThreadedMessages is composed of the following components:
-| Component | Description |
-| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| 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.
+Since `CometChatThreadedMessageHeader` is a view, you can add it to your view controller using the following code snippet:
@@ -29,84 +33,79 @@ As `CometChatThreadedMessageHeader` is a **view**, you can add it to your view c
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.
+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](#configuration).
**Example**
-In this example, we are filtering messages and searching for messages that contain the keyword "payment".
+In this example, we are filtering messages and searching for messages that contain the keyword "payment":
```swift
-let messageRequestBuilder = MessagesRequest.MessageRequestBuilder()
-.set(uid: "your UID")
-.set(searchKeyword: "sure")
+// 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](/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.
+[Events](/ui-kit/ios/components-overview#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
`ThreadedMessagesStyle` contains various properties which can be used to customize the UI of `CometChatThreadedMessages`.
-**Global level styling**
+**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**
+**Instance Level Styling**
```swift
+// MARK: - Apply instance-level styling
let customThreadedHeaderStyle = ThreadedMessageHeaderStyle()
customThreadedHeaderStyle.backgroundColor = UIColor(hex: "#F76808")
customThreadedHeaderStyle.dividerTintColor = UIColor(hex: "#F76808")
@@ -115,9 +114,7 @@ customThreadedHeaderStyle.bubbleContainerBackgroundColor = UIColor(hex: "#F76808
let threadedMessage = CometChatThreadedMessageHeader()
threadedMessage.style = customThreadedHeaderStyle
```
-
-
@@ -126,25 +123,27 @@ threadedMessage.style = customThreadedHeaderStyle
List of properties available for configuring in ThreadedMessagesStyle:
-| **Property** | **Description** | **Code** |
+| 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` |
+| 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.
+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 message composer offers
+Below is a list of customizations along with corresponding code snippets:
| Property | Description | Code |
| ------------------- | ------------------------------------------------------ | --------------------------------- |
@@ -156,36 +155,37 @@ Below is a list of customizations along with corresponding code snippets message
| 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.
+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 ""
+ return ""
}
- let date = Date(timeIntervalSince1970: TimeInterval(timestamp/1000))
+ let date = Date(timeIntervalSince1970: TimeInterval(timestamp / 1000))
let formatter = DateFormatter()
formatter.dateFormat = "dd-MM-yyyy"
return formatter.string(from: date)
})
```
-
-
-***
+---
#### SetTextFormatters
@@ -195,15 +195,20 @@ This functionality dynamically assigns a list of text formatters. If a custom li
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
+
+
+```swift
+// MARK: - Apply custom text formatter
let myCustomTextFormatter = MyCustomTextFormatter(trackingCharacter: "#")
-let threadedMessageHeader = CometChatThreadedMessageHeader()
+let threadedMessageHeader = CometChatThreadedMessageHeader()
.set(user: user)
.set(textFormatter: [myCustomTextFormatter])
```
+
+
-Demonstration:
+**Demonstration:**
@@ -213,80 +218,81 @@ import CometChatSDK
import CometChatUIKitSwift
class MyCustomTextFormatter: CometChatTextFormatter {
-override func getRegex() -> String {
-return "(\\bsure\\b)"
-
+
+ // 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
+ baseMessage: BaseMessage,
+ regexString: String,
+ alignment: MessageBubbleAlignment = .left,
+ formattingType: FormattingType
) -> NSAttributedString {
let attrString = NSMutableAttributedString(string: "SURE")
- if alignment == .left { // Received message
+ if alignment == .left {
+ // Received message styling
attrString.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 0, length: attrString.length))
- } else { // Sent message
+ } 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](/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
let threadedMessageView = CometChatThreadedMessages()
threadedMessageView.set(controller: UIViewController) // Passing the controller is required
```
-
-
-***
diff --git a/ui-kit/ios/users.mdx b/ui-kit/ios/users.mdx
index 17f68210..fa6b661c 100644
--- a/ui-kit/ios/users.mdx
+++ b/ui-kit/ios/users.mdx
@@ -1,29 +1,31 @@
---
title: "Users"
+sidebarTitle: "Users"
+description: "Display and manage a list of users with search functionality in CometChat UI Kit for iOS"
---
## Overview
-The Users is a [Component](/ui-kit/ios/components-overview#components), showcasing an accessible list of all available users. It provides an integral search functionality, allowing you to locate any specific user swiftly and easily. For each user listed, the widget displays the user's name by default, in conjunction with their avatar when available. Furthermore, it includes a status indicator, visually informing you whether a user is currently online or offline.
+The Users component is a [Component](/ui-kit/ios/components-overview#components) that displays an accessible list of all available users. It provides built-in search functionality, allowing you to locate any specific user quickly. For each user listed, the component displays the user's name by default, along with their avatar when available. It also includes a status indicator that visually shows whether a user is currently online or offline.
-The Users component is composed of the following BaseComponents:
+The Users component is composed of the following base components:
-| Components | Description |
-| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| [ListBase](/ui-kit/ios/list-base) | a reusable container component having title, search box, customisable background and a List View |
-| [ListItem](/ui-kit/ios/list-item) | a component that renders data obtained from a User object on a Tile having a title, subtitle, leading and trailing view |
+| Components | Description |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------- |
+| ListBase | A reusable container component with a title, search box, customizable background, and a list view. |
+| ListItem | A component that renders data from a User object on a tile with a title, subtitle, leading view, and trailing view. |
-***
+---
## Usage
### Integration
-As `CometChatUsers` is a custom **view controller**, it can be launched directly by user actions such as button clicks or other interactions. It's also possible to integrate it into a **tab view controller**. `CometChatUsers` offers several parameters and methods for UI customization.
+Since `CometChatUsers` is a custom view controller, you can launch it directly through user actions such as button clicks or other interactions. You can also integrate it into a tab view controller. `CometChatUsers` offers several parameters and methods for UI customization.
@@ -32,18 +34,18 @@ let cometChatUsers = CometChatUsers()
let naviVC = UINavigationController(rootViewController: cometChatUsers)
self.present(naviVC, animated: true)
```
-
-
+---
+
### Actions
-[Actions](/ui-kit/ios/components-overview#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.
+[Actions](/ui-kit/ios/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type to tailor the behavior of the component to fit your specific needs.
-1. ##### set(onItemClick:)
+#### 1. set(onItemClick:)
-`set(OnItemClick:)` is triggered when you click on a ListItem of the users component. This `set(OnItemClick:)` method proves beneficial when a user intends to customize the on-click behavior in CometChatUsers.
+The `set(onItemClick:)` method is triggered when you click on a ListItem in the Users component. This method is useful when you want to customize the click behavior.
@@ -52,34 +54,30 @@ cometChatUsers.set(onItemClick: { user, indexPath in
// Override on item click
})
```
-
-
-***
+---
-2. ##### set(OnItemLongClick:)
+#### 2. set(onItemLongClick:)
-`set(OnItemLongClick:)` is triggered when you long press on a ListItem of the users component. This `set(OnItemLongClick:)` method proves beneficial when a user intends to additional functionality on long press on list item in CometChatUsers.
+The `set(onItemLongClick:)` method is triggered when you long press on a ListItem in the Users component. This method is useful when you want to add additional functionality on long press.
```swift
cometChatUsers.set(onItemLongClick: { user, indexPath in
- // Override on item click
+ // Override on item long click
})
```
-
-
-***
+---
-##### 3. set(onBack:)
+#### 3. set(onBack:)
-This `set(onBack:)` method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatUsers.
+The `set(onBack:)` method is useful when you need to override the action triggered upon pressing the back button.
@@ -88,35 +86,30 @@ cometChatUsers.set(onBack: {
// Override on back
})
```
-
-
-***
+---
-##### 4. set(onSelection:)
+#### 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 users.
+The `set(onSelection:)` method is triggered only when the selection mode is set to multiple or single. It fires on every selection and returns the list of selected users.
```swift
-
cometChatUsers.set(onSelection: { users in
- //Handle action
+ // Handle action
})
```
-
-
-***
+---
-##### 5. set(onError:)
+#### 5. set(onError:)
-This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatUsers.
+The `set(onError:)` method is useful when you need to customize the action taken upon encountering an error.
@@ -125,16 +118,14 @@ cometChatUsers.set(onError: { error in
// Override on error
})
```
-
-
-***
+---
-##### 6. set(onEmpty:)
+#### 6. set(onEmpty:)
-This `set(onEmpty:)` method is triggered when the users list is empty in CometChatUsers.
+The `set(onEmpty:)` method is triggered when the users list is empty.
@@ -143,16 +134,14 @@ cometChatUsers.set(onEmpty: {
// Handle empty state
})
```
-
-
-***
+---
-##### 7. setOnLoad
+#### 7. set(onLoad:)
-This set(onLoad:) gets triggered when a user list is fully fetched and going to displayed on the screen, this return the list of users to get displayed on the screen.
+The `set(onLoad:)` method is triggered when the user list is fully fetched and about to be displayed on the screen. It returns the list of users to be displayed.
@@ -161,36 +150,34 @@ cometChatUsers.set(onLoad: { users in
// Handle loaded users
})
```
-
-
-***
+---
### 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.
+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 view. Filters can be applied using RequestBuilders from the Chat SDK.
-##### 1. UserRequestBuilder
+#### 1. UserRequestBuilder
-The [UserRequestBuilder](/sdk/ios/retrieve-users) enables you to filter and customize the user list based on available parameters in UserRequestBuilder. This feature allows you to create more specific and targeted queries when fetching users. The following are the parameters available in [UserRequestBuilder](/sdk/ios/retrieve-users)
+The [UserRequestBuilder](/sdk/ios/retrieve-users) enables you to filter and customize the user list based on available parameters. This feature allows you to create more specific and targeted queries when fetching users.
| Methods | Type | Description |
| -------------------- | -------------------- | -------------------------------------------------------------------------------------- |
-| **setLimit** | int | sets the number users that can be fetched in a single request, suitable for pagination |
-| **setSearchKeyword** | String | used for fetching users matching the passed string |
-| **hideBlockedUsers** | bool | used for fetching all those users who are not blocked by the logged in user |
-| **friendsOnly** | bool | used for fetching only those users in which logged in user is a member |
-| **setRoles** | \[String] | used for fetching users containing the passed tags |
-| **setTags** | \[String] | used for fetching users containing the passed tags |
-| **withTags** | bool | used to fetch tags data along with the list of users. |
-| **setStatus** | CometChat.UserStatus | used for fetching users by their status online or offline |
-| **setUIDs** | \[String] | used for fetching users containing the passed users |
+| **setLimit** | int | Sets the number of users that can be fetched in a single request, suitable for pagination. |
+| **setSearchKeyword** | String | Fetches users matching the passed string. |
+| **hideBlockedUsers** | bool | Fetches all users who are not blocked by the logged-in user. |
+| **friendsOnly** | bool | Fetches only users who are friends with the logged-in user. |
+| **setRoles** | \[String] | Fetches users with the specified roles. |
+| **setTags** | \[String] | Fetches users containing the specified tags. |
+| **withTags** | bool | Fetches tag data along with the list of users. |
+| **setStatus** | CometChat.UserStatus | Fetches users by their status (online or offline). |
+| **setUIDs** | \[String] | Fetches users with the specified UIDs. |
**Example**
-In the example below, we are applying a filter to the UserList based on Friends.
+In the example below, we apply a filter to the UserList to show only friends:
@@ -201,152 +188,147 @@ let usersWithMessages = CometChatUsersWithMessages(usersRequestBuilder: usersReq
let naviVC = UINavigationController(rootViewController: usersWithMessages)
self.present(naviVC, animated: true)
```
-
-
-
-
-##### 2. SearchRequestBuilder
+#### 2. SearchRequestBuilder
-The SearchRequestBuilder uses [UserRequestBuilder](/sdk/ios/retrieve-users) enables you to filter and customize the search list based on available parameters in UserRequestBuilder. This feature allows you to keep uniformity between the displayed UserList and searched UserList.
+The SearchRequestBuilder uses [UserRequestBuilder](/sdk/ios/retrieve-users) to filter and customize the search list based on available parameters. This feature allows you to maintain uniformity between the displayed UserList and the searched UserList.
-**Example** In the example below, we are applying a filter to the UserList based on Search.
+**Example**
+
+In the example below, we apply a filter to the UserList based on a search keyword:
```swift
let usersRequestBuilder = UsersRequest.UsersRequestBuilder(limit: 20)
-.set(searchKeyword: "**")
+ .set(searchKeyword: "**")
let usersWithMessages = CometChatUsers(usersRequestBuilder: usersRequestBuilder)
let naviVC = UINavigationController(rootViewController: usersWithMessages)
self.present(naviVC, animated: true)
```
-
-
-
-
+---
+
### 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.
+[Events](/ui-kit/ios/components-overview#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 can be added or removed as needed.
-To handle events supported by Users you have to add corresponding listeners by using `CometChatUserEvents`
+To handle events supported by Users, add the corresponding listeners using `CometChatUserEvents`:
| Events | Description |
| ----------------- | --------------------------------------------------------------------- |
-| emitOnUserBlock | This will get triggered when the logged in user blocks another user |
-| emitOnUserUnblock | This will get triggered when the logged in user unblocks another user |
+| emitOnUserBlock | Triggered when the logged-in user blocks another user. |
+| emitOnUserUnblock | Triggered when the logged-in user unblocks another user. |
```swift
-///pass the [User] object of the user which has been blocked by the logged in user
- CometChatUserEvents.emitOnUserBlock(user: User)
+// Pass the User object of the user who has been blocked by the logged-in user
+CometChatUserEvents.emitOnUserBlock(user: User)
-///pass the [User] object of the user which has been unblocked by the logged in user
- CometChatUserEvents.emitOnUserUnblock(user: User)
+// Pass the User object of the user who has been unblocked by the logged-in user
+CometChatUserEvents.emitOnUserUnblock(user: User)
```
-
-
-
-
**Usage**
-```swift Swift
-// View controller from your project where you want to listen events.
+```swift
+// View controller from your project where you want to listen to events
public class ViewController: UIViewController {
- public override func viewDidLoad() {
+ public override func viewDidLoad() {
super.viewDidLoad()
-
- // Subscribing for the listener to listen events from user module
- CometChatUserEvents.addListener("UNIQUE_ID", self as CometChatUserEventListener)
+ // Subscribe to the listener for user module events
+ CometChatUserEvents.addListener("UNIQUE_ID", self as CometChatUserEventListener)
}
public override func viewWillDisappear(_ animated: Bool) {
- // Uncubscribing for the listener to listen events from user module
+ // Unsubscribe from the listener
CometChatUserEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
}
}
- // Listener events from user module
-extension ViewController: CometChatUserEventListener {
+// Listener events from user module
+extension ViewController: CometChatUserEventListener {
func onUserBlock(user: User) {
- // Do Stuff
+ // Handle user block event
}
func onUserUnblock(user: User) {
- // Do Stuff
+ // Handle user unblock event
}
}
```
+---
+
## Customization
-To fit your app's design requirements, you can customize the appearance of the users component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+To fit your app's design requirements, you can customize the appearance of the Users component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
### Style
-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.
+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. Users Style
+#### 1. Users Style
-You can set the `UsersStyle` to the Users Component to customize the styling.
+You can set the `UsersStyle` to the Users component to customize the styling.
-**Global level styling**
+**Global Level Styling**
```swift
+// Create custom avatar style
let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
-
+
+// Apply global styling
CometChatUsers.style.titleColor = UIColor(hex: "#F76808")
CometChatUsers.style.titleFont = UIFont(name: "Times-New-Roman", size: 34)
CometChatUsers.avatarStyle = customAvatarStyle
```
-
-
-**Instance level styling**
+**Instance Level Styling**
```swift
+// Create custom avatar style
let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
-
+
+// Create custom user style
let userStyle = UsersStyle()
userStyle.titleColor = UIColor(hex: "#F76808")
userStyle.titleFont = UIFont(name: "Times-New-Roman", size: 34)
-
+
+// Apply instance-level styling
let customUser = CometChatUsers()
customUser.style = userStyle
customUser.avatarStyle = customAvatarStyle
```
-
-
-List of properties exposed by MessageListStyle
+
+List of properties exposed by UsersStyle:
| **Property** | **Description** | **Code** |
| ----------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
@@ -360,7 +342,7 @@ List of properties exposed by MessageListStyle
| **Placeholder Text Font** | Font of the placeholder text in the search bar. | `CometChatUsers.style.searchBarPlaceholderTextFont = UIFont?` |
| **Search Bar Text Color** | Color of the entered text in the search bar. | `CometChatUsers.style.searchBarTextColor = UIColor?` |
| **Search Bar Text Font** | Font of the entered text in the search bar. | `CometChatUsers.style.searchBarTextFont = UIFont?` |
-| **Search Bar Background Color** | Background color of the search bar’s text input area. | `CometChatUsers.style.searchBarBackgroundColor = UIColor?` |
+| **Search Bar Background Color** | Background color of the search bar's text input area. | `CometChatUsers.style.searchBarBackgroundColor = UIColor?` |
| **Cancel Icon Tint Color** | Tint color for the cancel button in the search bar. | `CometChatUsers.style.searchBarCancelIconTintColor = UIColor?` |
| **Cross Icon Tint Color** | Tint color for the clear (cross) button in the search bar. | `CometChatUsers.style.searchBarCrossIconTintColor = UIColor?` |
| **Background Color** | Background color for the entire screen or view. | `.backgroundColor = CometChatTheme.backgroundColor01` |
@@ -383,7 +365,7 @@ List of properties exposed by MessageListStyle
| **Retry Button Border Color** | Border color for the retry button. | `CometChatUsers.style.retryButtonBorderColor = .clear` |
| **Retry Button Border Width** | Border width for the retry button. | `CometChatUsers.style.retryButtonBorderWidth = 0` |
| **Retry Button Corner Radius** | Corner radius for the retry button. | `CometChatUsers.style.retryButtonCornerRadius = CometChatCornerStyle?` |
-| **Empty State Title Font** | Font for the empty state title (when no users/items are present). | `CometChatUsers.style.emptyTitleTextFont = CometChatTypography.Heading3.bold` |
+| **Empty State Title Font** | Font for the empty state title (when no users are present). | `CometChatUsers.style.emptyTitleTextFont = CometChatTypography.Heading3.bold` |
| **Empty State Title Color** | Text color for the empty state title. | `CometChatUsers.style.emptyTitleTextColor = CometChatTheme.textColorPrimary` |
| **Empty Subtitle Font** | Font for the subtitle in the empty state. | `CometChatUsers.style.emptySubTitleFont = CometChatTypography.Body.regular` |
| **Empty Subtitle Text Color** | Text color for the subtitle in the empty state. | `CometChatUsers.style.emptySubTitleTextColor = CometChatTheme.textColorSecondary` |
@@ -402,14 +384,12 @@ List of properties exposed by MessageListStyle
| **Header Title Color** | Text color for section header titles in the list. | `CometChatUsers.style.headerTitleColor = CometChatTheme.textColorHighlight` |
| **Header Title Font** | Font for section header titles. | `CometChatUsers.style.headerTitleFont = CometChatTypography.Heading4.medium` |
-***
+---
### 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 change text, set custom icons, and toggle the visibility of UI elements.
-Below is a list of customizations along with corresponding code snippets
-
| Method | Description | Code |
| -------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------- |
| set(userRequestBuilder:) | Sets a custom request builder for fetching users. | `.set(userRequestBuilder: UsersRequest.UsersRequestBuilder())` |
@@ -423,96 +403,87 @@ Below is a list of customizations along with corresponding code snippets
| hideUserStatus | Hides the online/offline status of users. | `hideUserStatus = true` |
| hideSectionHeader | Hides the section header for table view indicating initials of users. | `hideSectionHeader = true` |
-***
+---
-### Advance
+### 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.
+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 own views, layouts, and UI elements and then incorporate those into the component.
-***
+---
-#### SetOptions
+#### set(options:)
-You can define custom options for each user using .set(options:). This method allows you to return an array of CometChatUserOption based on the user object.
+You can define custom options for each user using `set(options:)`. This method allows you to return an array of `CometChatUserOption` based on the user object.
```swift
-cometChatUsers.set(options: { user in
- return [CometChatUserOptions]
-})
+cometChatUsers.set(options: { user in
+ return [CometChatUserOption]()
+})
```
-
-
-***
+---
-#### AddOptions
+#### add(options:)
-You can dynamically add options to users using .add(options:). This method lets you return additional CometChatUserOption elements.
+You can dynamically add options to users using `add(options:)`. This method lets you return additional `CometChatUserOption` elements.
```swift
-cometChatUsers.add(options: { user in
- return [ArchiveOption()]
-})
+cometChatUsers.add(options: { user in
+ return [ArchiveOption()]
+})
```
-
-
-***
+---
-#### SetListItemView
+#### set(listItemView:)
-With this function, you can assign a custom ListItem to the users Component.
+With this method, you can assign a custom ListItem view to the Users component.
```swift
let cometChatUser = CometChatUsers()
cometChatUser.set(listItemView: { user in
- //Perform Your Actions
+ // Return your custom view
})
```
-
-
-You can indeed create a custom listitem UIView file named `Custom_User_ListItem_View` for more complex or unique list items.
-
-Afterwards, seamlessly integrate this `Custom_User_ListItem_View` UIView file into the `.setListItemView` method within **CometChatUsers()**.
-
-You can create a `CustomListItemView` as a custom `UIView`. Which we will inflate in `setListItemView()`
-
-```swift swift
+You can create a custom `UIView` file named `CustomListItemView` for more complex or unique list items. Then integrate this custom view into the `set(listItemView:)` method within `CometChatUsers()`.
+```swift
import UIKit
import CometChatUIKitSwift
class CustomListItem: UIView {
- // Initialize UI components
+
+ // MARK: - UI Components
private var profileImageView: CometChatAvatar = {
let imageView = CometChatAvatar(image: UIImage())
- imageView.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
+ imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
}()
private var nameLabel: UILabel = {
let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
+ label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
+ // MARK: - Initialization
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
@@ -522,6 +493,7 @@ class CustomListItem: UIView {
fatalError("init(coder:) has not been implemented")
}
+ // MARK: - Setup
private func setupUI() {
addSubview(profileImageView)
addSubview(nameLabel)
@@ -533,12 +505,14 @@ class CustomListItem: UIView {
profileImageView.widthAnchor.constraint(equalToConstant: 40),
profileImageView.heightAnchor.constraint(equalToConstant: 40),
+ // Name label constraints
nameLabel.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: 8),
nameLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
nameLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
])
}
+ // MARK: - Configuration
func set(user: User) {
var avatarURL: String?
if let group = conversation.conversationWith as? Group {
@@ -551,40 +525,33 @@ class CustomListItem: UIView {
avatarURL = user.avatar
}
-
-
-
- self.profileImageView.setAvatar(avatarUrl: avatarURL, with: nameLabel.text)
+ self.profileImageView.setAvatar(avatarUrl: avatarURL, with: nameLabel.text)
}
}
```
-***
+---
-#### SetLeadingView
+#### set(leadingView:)
-You can modify the leading view of a user cell using .set(leadingView:).
+You can modify the leading view of a user cell using `set(leadingView:)`.
```swift
-cometChatUsers.set(leadingView: { user in
+cometChatUsers.set(leadingView: { user in
let view = CustomLeadingView()
- return view
-})
+ return view
+})
```
-
-
-Demonstration
-
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
+You can create a `CustomLeadingView` as a custom `UIView` to use in `set(leadingView:)`:
@@ -593,6 +560,7 @@ import UIKit
class CustomLeadingView: UIView {
+ // MARK: - UI Components
private let imageView: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
@@ -623,6 +591,7 @@ class CustomLeadingView: UIView {
return view
}()
+ // MARK: - Initialization
init(image: UIImage?) {
super.init(frame: .zero)
imageView.image = image
@@ -651,37 +620,31 @@ class CustomLeadingView: UIView {
}
}
```
-
-
-***
+---
-#### SetTitleView
+#### set(titleView:)
-You can customize the title view of a user cell using .set(titleView:).
+You can customize the title view of a user cell using `set(titleView:)`.
```swift
-cometChatUsers.set(titleView: { user in
+cometChatUsers.set(titleView: { user in
let view = CustomTitleView()
return view
-})
+})
```
-
-
-Demonstration
-
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView` to use in `set(titleView:)`:
@@ -690,6 +653,7 @@ import UIKit
class CustomTitleView: UIView {
+ // MARK: - UI Components
private let nameLabel: UILabel = {
let label = UILabel()
label.font = UIFont.boldSystemFont(ofSize: 18)
@@ -709,6 +673,7 @@ class CustomTitleView: UIView {
return label
}()
+ // MARK: - Initialization
init(name: String, role: String) {
super.init(frame: .zero)
nameLabel.text = name
@@ -734,40 +699,32 @@ class CustomTitleView: UIView {
fatalError("init(coder:) has not been implemented")
}
}
-
-
```
-
-
-***
+---
-#### SetTrailView
+#### set(trailView:)
-You can modify the trailing view of a user cell using .set(trailView:).
+You can modify the trailing view of a user cell using `set(trailView:)`.
```swift
-cometChatUsers.set(trailView: { user in
- let view = CustomTrailView()
- return view
-})
+cometChatUsers.set(trailView: { user in
+ let view = CustomTrailView()
+ return view
+})
```
-
-
-Demonstration
-
-You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`
+You can create a `CustomTrailView` as a custom `UIView` to use in `set(trailView:)`:
@@ -776,6 +733,7 @@ import UIKit
class CustomTrailView: UIView {
+ // MARK: - UI Components
private let badgeView: UIView = {
let view = UIView()
view.backgroundColor = .purple
@@ -800,6 +758,7 @@ class CustomTrailView: UIView {
return label
}()
+ // MARK: - Initialization
init() {
super.init(frame: .zero)
@@ -828,43 +787,33 @@ class CustomTrailView: UIView {
fatalError("init(coder:) has not been implemented")
}
}
-
-
```
-
-
-***
+---
-#### SetSubTitleView
+#### set(subtitleView:)
-You can customize the subtitle view for each users item to meet your requirements
+You can customize the subtitle view for each user item to meet your requirements.
```swift
let cometChatUser = CometChatUsers()
cometChatUser.set(subtitleView: { user in
- let view = CustomSubtitleView()
- return view
+ let view = CustomSubtitleView()
+ return view
})
```
-
-
-**Example**
-
-Demonstration
-
-You can seamlessly integrate this `CustomSubtitleView` UIView file into the `.set(subtitleView:)` method within CometChatUsers.
+You can create a `CustomSubtitleView` as a custom `UIView` to use in `set(subtitleView:)`:
@@ -886,66 +835,56 @@ class CustomSubtitleView: UILabel {
}
}
```
-
-
-***
+---
-#### SetLoadingView
+#### set(loadingView:)
-You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.
+You can set a custom loading view using `set(loadingView:)`. This method accepts a `UIView` to display while data is being fetched.
```swift
-let loadingIndicator = UIActivityIndicatorView(style: .medium)
-loadingIndicator.startAnimating()
-cometChatUsers.set(loadingView: loadingIndicator)
+let loadingIndicator = UIActivityIndicatorView(style: .medium)
+loadingIndicator.startAnimating()
+cometChatUsers.set(loadingView: loadingIndicator)
```
-
-
-***
+---
-#### SetErrorView
+#### set(errorView:)
-You can customize the error view using .set(errorView:). This method accepts a UIView that appears when an error occurs.
+You can customize the error view using `set(errorView:)`. This method accepts a `UIView` that appears when an error occurs.
```swift
-let errorLabel = UILabel()
-errorLabel.text = "Something went wrong!"
-errorLabel.textColor = .red
-cometChatUsers.set(errorView: errorLabel)
+let errorLabel = UILabel()
+errorLabel.text = "Something went wrong!"
+errorLabel.textColor = .red
+cometChatUsers.set(errorView: errorLabel)
```
-
-
-***
+---
-#### SetEmptyView
+#### set(emptyView:)
-You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no user are available.
+You can customize the empty state view using `set(emptyView:)`. This method accepts a `UIView` that appears when no users are available.
```swift
-let emptyLabel = UILabel()
-emptyLabel.text = "No users found"
-emptyLabel.textColor = .gray
-emptyLabel.textAlignment = .center
-cometChatUsers.set(emptyView: emptyLabel)
+let emptyLabel = UILabel()
+emptyLabel.text = "No users found"
+emptyLabel.textColor = .gray
+emptyLabel.textAlignment = .center
+cometChatUsers.set(emptyView: emptyLabel)
```
-
-
-
-***