> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Conversations With Messages

> Conversations With Messages — CometChat documentation.

## Overview

The `ConversationsWithMessages` is a [Composite Component](/ui-kit/ios/v4/components-overview#components) encompassing components such as [Conversations](/ui-kit/ios/v4/conversations), [Messages](/ui-kit/ios/v4/messages), and [Contacts](/ui-kit/ios/v4/contacts) . Each of these component contributes to the functionality and structure of the overall ConversationsWithMessages component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/UlRk7SYYn7zdv3js/images/5675d3df-conversationswithmessages_overview_screens-b42df2999eeeafb70c72f79b4b3c94a7.png?fit=max&auto=format&n=UlRk7SYYn7zdv3js&q=85&s=284745b852bed52764cdd56718182f78" width="4948" height="3120" data-path="images/5675d3df-conversationswithmessages_overview_screens-b42df2999eeeafb70c72f79b4b3c94a7.png" />
</Frame>

| Components                                    | Description                                                                                                                                            |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Conversations](/ui-kit/ios/v4/conversations) | The `Conversations` component is designed to display a list of either `User` or `Group`. This essentially represents your recent conversation history. |
| [Messages](/ui-kit/ios/v4/messages)           | The `Messages` component is designed to manage the messaging interaction for either individual `User` or `Group` conversations.                        |
| [Contacts](/ui-kit/ios/v4/contacts)           | The `CometChatContacts` component is specifically designed to facilitate the display and management of both `User` and `Groups`.                       |

## Usage

### Integration

Since `CometChatConversationsWithMessages` is a **view controller**, it can be launched either by a button click or through any event's trigger. It inherits all the customizable properties and methods of `CometChatConversations.`

**View Controller**: To use ConversationsWithMessages in your `view controller`, use the following code snippet.

```swift view controller theme={null}
let cometChatConversationsWithMessages = CometChatConversationsWithMessages()
self.navigationController?.pushViewController(cometChatConversationsWithMessages, animated: true)
```

***

**Scene Delegate**: To use ConversationsWithMessages in your `Navigation controller,` use the following code snippet in your `willConnectTo` method in SceneDelegate.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let cometChatConversationsWithMessages = CometChatConversationsWithMessages()
    let naviVC = UINavigationController(rootViewController: cometChatConversationsWithMessages)

    window?.rootViewController = naviVC
    ```

    <Note>
      make sure to \`import CometChatUIKitSwift\`
    </Note>
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/ios/v4/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.

While the ConversationsWithMessages component does not have its actions, its components - [Conversation](/ui-kit/ios/v4/conversations#actions), [Messages](/ui-kit/ios/v4/messages), and [Contacts](/ui-kit/ios/v4/contacts) - each have their own set of actions.

The Action of the components can be overridden through the use of the [Configurations](#configurations) object of its components. Here is an example code snippet.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // Create an object of ConversationsConfiguration
    let conversationsConfiguration = ConversationsConfiguration()

    let avatarStyle = AvatarStyle( )
    avatarStyle.set(cornerRadius: .init(cornerRadius: 5))

    // Assign the properties as per your need
    conversationsConfiguration.hide(receipt: true)
    .disable(soundForMessages: true)
    .set(avatarStyle: avatarStyle)
    ```
  </Tab>
</Tabs>

**Usage**

ConversationsConfiguration can be used in a component where CometChatConversations is present as a child component. We just pass that `ConversationsConfiguration` object to the CometChatConversations component.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    conversationsWithMessages.set(conversationsConfiguration: conversationsConfiguration)
    ```
  </Tab>
</Tabs>

The ConversationsWithMessages component overrides several actions from its components to reach its default behavior. The list of actions overridden by ConversationsWithMessages includes:

* [setOnItemClick](/ui-kit/ios/v4/conversations#setonitemclick) : This `setOnItemClick` method proves beneficial when a user intends to customize the on-click behavior in CometChatConversations.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/2IblOTiSDtb-DzS7/images/fbd1d45c-Actions_screens-ea0e3fc7cb46c4a8e9721ccec0dd103a.png?fit=max&auto=format&n=2IblOTiSDtb-DzS7&q=85&s=9183c57bc6a23b7284396b5d51a2e14d" width="4948" height="3120" data-path="images/fbd1d45c-Actions_screens-ea0e3fc7cb46c4a8e9721ccec0dd103a.png" />
</Frame>

### 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.

While the ConversationsWithMessages component does not have filters, its components do, For more detail on individual filters of its component refer to [Conversations](/ui-kit/ios/v4/conversations#filters)[Filters](/ui-kit/ios/v4/conversations#filters) and [Messages Filters](/ui-kit/ios/v4/messages).

By utilizing the [Configurations](#configurations) object of its components, you can apply filters.

In the following **example**, we're filtering Conversation to only show `User`

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let conversationRequestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 10).setConversationType(conversationType: .user)
            
    let conversationsWithMessages = CometChatConversationsWithMessages(conversationRequestBuilder: conversationRequestBuilder)

    let naviVC = UINavigationController(rootViewController: conversationsWithMessages)
    self.present(naviVC, animated: true)
    ```
  </Tab>
</Tabs>

<Note>
  If you are already using a navigation controller, you can use the pushViewController function instead of presenting the view controller.
</Note>

<Tip>
  make sure to `import CometChatSDK`
</Tip>

***

### Events

[Events](/ui-kit/ios/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

The ConversationsWithMessages does not generate its events but its component does. For a full list of these events, you can refer to [Conversations events](/ui-kit/ios/v4/conversations#events) and [Messages events](/ui-kit/ios/v4/messages#events).

In the following example, we're incorporating observers for the `ConversationDeleted` event of `Conversations` component.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // View controller from your project where you want to listen events.
    public class ViewController: UIViewController {

    public override func viewDidLoad() {
        super.viewDidLoad()

       // Subscribing for the listener to listen events from conversation module
         CometChatConversationEvents.addListener("UNIQUE_ID", self as CometChatConversationEventListener)
    }

    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")
    }


    }

    // Listener events from conversation module
    extension  ViewController: CometChatConversationEventListener {

    func onConversationDelete(conversation: Conversation) {
        // Do Stuff
    }

    }
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app's design requirements, you have the ability to customize the appearance of the ConversationsWithMessages 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. ConversationsWithMessages component doesn't have its own style parameters. But you can customize its component styles. For more details on individual component styles, you can refer [Conversation Styles](/ui-kit/ios/v4/conversations#style), [Messages Styles](/ui-kit/ios/v4/messages#messages-style), and [Contacts Styles](/ui-kit/ios/v4/contacts#contactsstyle)

Styles can be applied to SubComponents using their respective [configurations](#configurations).

**Example**

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // Creating  ConversationsStyle object
    let conversationsStyle = ConversationsStyle()

    // Creating  Modifying the propeties of conversations
    conversationsStyle.set(background: .black)
        .set(cornerRadius: CometChatCornerStyle(cornerRadius: 0.0))
        .set(borderColor: .clear)
        .set(borderWidth: 0)
        .set(largeTitleFont: .boldSystemFont(ofSize: 34))
        .set(largeTitleColor: .white)
        .set(titleFont: .systemFont(ofSize: 18))
        .set(titleColor: .white)
        .set(backButtonTint: .white)
        .set(privateGroupIconBackgroundColor: .orange)
        .set(protectedGroupIconBackgroundColor: .green)


    // Setting the conversations style
    cometChatConversations.set(conversationsStyle: conversationsStyle)
    ```
  </Tab>
</Tabs>

### 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.

##### Set User

You can utilize the `set(user: User?)` function with a [User](/sdk/ios/user-management) object as input to ConversationsWithMessages. This will automatically guide you to the [Messages](/ui-kit/ios/v4/messages) component for the designated `User`.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    //syntax for set(user: User?)

    let user = User(uid: "kelvin", name: "Kelvin")
    cometChatConversationsWithMessages.set(user: user)
    ```
  </Tab>
</Tabs>

***

##### Set Group

You can utilize the `set(group: Group?)` function with a [Group](/sdk/ios/groups-overview) object as input to ConversationsWithMessages. This will automatically guide you to the [Messages](/ui-kit/ios/v4/messages) component for the designated `Group`.

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    //syntax for set(group: Group?)

    let group = Group(guid: "cometchat-guid-1", name: "Hiking Group")
    cometChatConversationsWithMessages.set(group: group)
    ```
  </Tab>
</Tabs>

***

##### Components

Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs.

You can find the list of all Functionality customization of individual components in [Conversations](/ui-kit/ios/v4/conversations#functionality) , [Messages](/ui-kit/ios/v4/messages#functionality), and [Contacts](/ui-kit/ios/v4/Contacts)

**Example**

```php theme={null}

// Create an object of  ConversationsConfiguration
let conversationsConfiguration = ConversationsConfiguration()

let avatarStyle = AvatarStyle()
  .set(cornerRadius: .init(cornerRadius: 5))

  // Assign the properties as per your need
conversationsConfiguration.hide(receipt: true)
    .disable(soundForMessages: true)
    .set(avatarStyle: avatarStyle)
    .set(title: "erroror", mode: .always)
    .disable(typing: true)
    .hide(hideSeparator: false)
    .show(showBackButton: false)
```

**Usage**

```python theme={null}
conversationsWithMessages.set(conversationsConfiguration: conversationsConfiguration)
```

***

### 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.

By utilizing the [Configuration](#configurations) object of each component, you can apply advanced-level customizations to the ConversationsWithMessages.

**Example**

```csharp theme={null}
// Create an object of  ConversationsConfiguration
let conversationsConfiguration = ConversationsConfiguration()

 conversationsConfiguration.set(errorView: UIView)
```

**Usage**

The ConversationsConfiguration can be employed within a component that contains CometChatConversations as a child component. Simply pass the `ConversationsConfiguration` object to the CometChatConversations component.

```python theme={null}
conversationsWithMessages.set(conversationsConfiguration: conversationsConfiguration)
```

To find all the details on individual Component advance customization you can refer, [Conversations Advance](/ui-kit/ios/v4/conversations#advanced),[Messages Advance](/ui-kit/ios/v4/messages#advanced) and [Contacts Advance](/ui-kit/ios/v4/contacts)

ConversationsWithMessages uses advanced-level customization of both Conversation & Messages components to achieve its default behavior.

1. ConversationsWithMessages utilizes the [SetMenu](/ui-kit/ios/v4/conversations#setmenu) function of the `Conversations` subcomponent to navigate the user from [Conversations](/ui-kit/ios/v4/conversations) to [Contacts](/ui-kit/ios/v4/contacts)

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/35nHswVgWvBftvIw/images/19bfa4a5-advanced_1_screens-0c1ebaf3ef9bb5681337a49b23b927f6.png?fit=max&auto=format&n=35nHswVgWvBftvIw&q=85&s=0b3d2cb025703663f822ce6551c8686b" width="4948" height="3120" data-path="images/19bfa4a5-advanced_1_screens-0c1ebaf3ef9bb5681337a49b23b927f6.png" />
</Frame>

2. ConversationsWithMessages utilizes the [SetMenu](/ui-kit/ios/v4/message-header#setmenu) function of the `Messages` subcomponent to navigate the user from [Messages](/ui-kit/ios/v4/messages) to [Details](/ui-kit/ios/v4/user-details).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/xB2gtIZtet1FaUV2/images/3c41b274-advanced_2_screens-bf8df62fddfb5d3582a0d96e2edea576.png?fit=max&auto=format&n=xB2gtIZtet1FaUV2&q=85&s=5fc2bf258eb0cd488788032112412f54" width="4948" height="3120" data-path="images/3c41b274-advanced_2_screens-bf8df62fddfb5d3582a0d96e2edea576.png" />
</Frame>

<Warning>
  When you override `.setMenu()`, the default behavior of ConversationsWithMessages will also be overridden.
</Warning>

## Configurations

[Configurations](/ui-kit/ios/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component.

ConversationsWithMessages has `Conversations`, `Messages`, and `Contacts` component. Hence, each of these components will have its individual \`Configuration\`\`.

* `Configurations` expose properties that are available in its individual components.

#### Conversations

You can customize the properties of the Conversations component by making use of the ConversationsConfiguration. You can accomplish this by employing the `.setConversationsConfiguration()` method as demonstrated below:

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    let conversationsConfiguration = ConversationsConfiguration()
    ```
  </Tab>
</Tabs>

**Usage**

The ConversationsConfiguration can be employed within a component that contains CometChatConversations as a child component. Simply pass the `ConversationsConfiguration` object to the CometChatConversations component.

```python theme={null}
conversationsWithMessages.set(conversationsConfiguration: conversationsConfiguration)
```

All exposed properties of `ConversationsConfiguration` can be found under [Conversations](/ui-kit/ios/v4/conversations). Properties marked with the <Tooltip tip="Not available">🛑</Tooltip> symbol are not accessible within the Configuration Object.

**Example**

Let's say you want to change the style of the Conversations subcomponent and, in addition, you only want to display users in the conversation list.

You can modify the style using the `ListItemStyle` method and filter the list with the `. ConversationsRequestBuilder()` method.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/35nHswVgWvBftvIw/images/1ec8c83c-Configurations_screens-092d83e6d8951cf3402b1cc6a687d8d6.png?fit=max&auto=format&n=35nHswVgWvBftvIw&q=85&s=db46c9f70558d86f4f62fc1311bb3114" width="4948" height="3120" data-path="images/1ec8c83c-Configurations_screens-092d83e6d8951cf3402b1cc6a687d8d6.png" />
</Frame>

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}

     // Creating  ConversationsStyle object
        let conversationsStyle = ConversationsStyle()

    // Creating  Modifying the propeties of conversations
        conversationsStyle.set(background: .lightGray.withAlphaComponent(0.5))

    // Setting the conversations style

    let listItemStyle = ListItemStyle()
    .set(background: .lightGray.withAlphaComponent(0.5))

    let cometChatConversationsWithMessages = CometChatConversationsWithMessages()
    .set(conversationsStyle: conversationsStyle)
    .set(listItemStyle: listItemStyle)

    let conversationRequestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 4).setConversationType(conversationType: .user)

    let conversationsWithMessages = CometChatConversationsWithMessages(conversationRequestBuilder: conversationRequestBuilder)

    let naviVC = UINavigationController(rootViewController: cometChatConversationsWithMessages)
    self.present(naviVC, animated: true)
    ```
  </Tab>
</Tabs>

<Note>
  If you are already using a navigation controller, you can use the pushViewController function instead of presenting the view controller.
</Note>

<Tip>
  make sure to `import CometChatSDK`
</Tip>

***