> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-013b37f0.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Conversations With Messages

## Overview

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

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/VPrNRnkEXz1B-4gC/images/033055e6-conversationwithmessages_overview_cometchat_screens-ea9262d1c02e297567cb49ee8da83812.png?fit=max&auto=format&n=VPrNRnkEXz1B-4gC&q=85&s=6c2073b98fef30694cef109ae496543b" alt="Image" width="4498" height="3120" data-path="images/033055e6-conversationwithmessages_overview_cometchat_screens-ea9262d1c02e297567cb49ee8da83812.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/T0-8tgSHzSMz3KlE/images/cbdf1d43-conversationwithmessages_overview_cometchat_screens-c3a738b8dab616b19d029047ed196288.png?fit=max&auto=format&n=T0-8tgSHzSMz3KlE&q=85&s=afbdab89a747ae6b66a2161c72edad56" alt="Image" width="4498" height="3120" data-path="images/cbdf1d43-conversationwithmessages_overview_cometchat_screens-c3a738b8dab616b19d029047ed196288.png" />
  </Tab>
</Tabs>

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

## Usage

### Integration

Since `CometChatConversationsWithMessages` is a widget, 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.`

You can launch `CometChatConversationsWithMessages` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.

##### 1. Using Navigator to Launch `CometChatConversationsWithMessages`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatConversationsWithMessages()));
    ```
  </Tab>
</Tabs>

##### 2. Embedding `CometChatConversationsWithMessages` as a Widget in the build Method

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:flutter/material.dart';


    class ConversationsWithMessages extends StatefulWidget {
      const ConversationsWithMessages({super.key});

      @override
      State<ConversationsWithMessages> createState() => _ConversationsWithMessagesState();
    }

    class _ConversationsWithMessagesState extends State<ConversationsWithMessages> {

      @override
      Widget build(BuildContext context) {
        return const Scaffold(
            body: SafeArea(
                child: CometChatConversationsWithMessages()
            )
        );
      }
    }
    ```
  </Tab>
</Tabs>

List of properties exposed by `CometChatConversationsWithMessages`

| Property                         | Data Type                         | Description                                                    |
| -------------------------------- | --------------------------------- | -------------------------------------------------------------- |
| `user`                           | `User?`                           | The user object representing the current user.                 |
| `group`                          | `Group?`                          | The group object representing the current group.               |
| `theme`                          | `Theme?`                          | The theme object for customizing the appearance of the widget. |
| `conversationsConfiguration`     | `ConversationsConfiguration?`     | Configuration settings for the conversations list.             |
| `messageConfiguration`           | `MessageConfiguration?`           | Configuration settings for individual messages.                |
| `startConversationConfiguration` | `StartConversationConfiguration?` | Configuration settings for starting new conversations.         |

***

### Actions

[Actions](/ui-kit/flutter/v4/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

While the `CometChatConversationsWithMessages` widget does not have its actions, its sub-widgets - [Conversation](/ui-kit/flutter/v4/conversations#actions), [Messages](/ui-kit/flutter/v4/messages), and [Contacts](/ui-kit/flutter/v4/contacts) - each have their own set of actions.

The actions of these widgets can be overridden through the use of the [Configurations](#configurations) object of each widget. Here is an example code snippet.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversationsWithMessages(
      conversationsConfiguration: ConversationsConfiguration(
          onItemTap: (conversation) {
            // TODO("Not yet implemented")
          }
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/VPrNRnkEXz1B-4gC/images/033055e6-conversationwithmessages_overview_cometchat_screens-ea9262d1c02e297567cb49ee8da83812.png?fit=max&auto=format&n=VPrNRnkEXz1B-4gC&q=85&s=6c2073b98fef30694cef109ae496543b" alt="Image" width="4498" height="3120" data-path="images/033055e6-conversationwithmessages_overview_cometchat_screens-ea9262d1c02e297567cb49ee8da83812.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/T0-8tgSHzSMz3KlE/images/cbdf1d43-conversationwithmessages_overview_cometchat_screens-c3a738b8dab616b19d029047ed196288.png?fit=max&auto=format&n=T0-8tgSHzSMz3KlE&q=85&s=afbdab89a747ae6b66a2161c72edad56" alt="Image" width="4498" height="3120" data-path="images/cbdf1d43-conversationwithmessages_overview_cometchat_screens-c3a738b8dab616b19d029047ed196288.png" />
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a Widget. 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 `CometChatConversationsWithMessages` widget does not have filters, its widgets do, For more detail on individual filters of its widget refer to [Conversations](/ui-kit/flutter/v4/conversations#filters)[Filters](/ui-kit/flutter/v4/conversations#filters) and [Messages Filters](/ui-kit/flutter/v4/messages).

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

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversationsWithMessages(
      conversationsConfiguration: ConversationsConfiguration(
        conversationsRequestBuilder: ConversationsRequestBuilder()
            ..limit = 5
            ..conversationType = "user"
      ),
    )
    ```
  </Tab>
</Tabs>

***

### Events

[Events](/ui-kit/flutter/v4/components-overview#events) are emitted by a `Widget`. 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 `CometChatConversationsWithMessages` does not produce any events but its subwidget does. For a full list of these events, you can refer to [Conversations events](/ui-kit/flutter/v4/conversations#events) and [Messages events](/ui-kit/flutter/v4/messages#events).

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

This `ccConversationDeleted` will be emitted when the user deletes a conversation

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

    class _YourScreenState extends State<YourScreen> with CometChatConversationEventListener {

      @override
      void initState() {
        super.initState();
        CometChatConversationEvents.addConversationListListener("listenerId", this); // Add the listener
      }

      @override
      void dispose(){
        super.dispose();
        CometChatConversationEvents.removeConversationListListener("listenerId"); // Remove the listener
      }

      @override
      void ccConversationDeleted(Conversation conversation) {
        // TODO("Not yet implemented")
      }
    }
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app's design requirements, you have the ability to customize the appearance of the `CometChatConversationsWithMessages` widget. 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 widget in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the widget. CometChatConversationsWithMessages widget doesn't have its own style parameters. But you can customize its widget styles. For more details on individual widget styles, you can refer [Conversation Styles](/ui-kit/flutter/v4/conversations#style), [Messages Styles](/ui-kit/flutter/v4/messages#style), and [Contacts Styles](/ui-kit/flutter/v4/contacts#contactsstyle)

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversationsWithMessages(
      conversationsConfiguration: ConversationsConfiguration(
          avatarStyle: AvatarStyle(
              border: Border.all(width: 2),
              borderRadius: 20,
              background: Colors.red
          ),
          statusIndicatorStyle: const StatusIndicatorStyle(
              borderRadius: 10,
              width: 2
          ),
          dateStyle: const DateStyle (
              contentPadding: EdgeInsets.all(2),
              background: Colors.grey
          )
      ),
    )
    ```
  </Tab>
</Tabs>

### Functionality

These are a set of **small functional customizations** that allow you to **fine-tune** the overall experience of the widget. With these, you can **change text**, set **custom icons**, and toggle the **visibility** of UI elements.

##### Set User

You can utilize the `user` function with a [User](/sdk/flutter/user-management) object as input to `CometChatConversationsWithMessages`. This will automatically guide you to the [Messages](/ui-kit/flutter/v4/messages) widget for the designated `User`.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversationsWithMessages(
      user: User(
        name: "",
        uid: "",
        avatar: ""
      ),
    )
    ```
  </Tab>
</Tabs>

***

##### Set Group

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversationsWithMessages(
      group: Group(
        guid: "",
        name: "",
        type: ""
      ),
    )
    ```
  </Tab>
</Tabs>

***

##### Widgets

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

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversationsWithMessages(
      conversationsConfiguration: ConversationsConfiguration(
        hideReceipt: true,
        title: "Your Title",
        hideSeparator: true,
        hideStartConversation: true,
        backButton: Icon(Icons.add_alert_outlined, color: Color(0xFF6851D6),)
      ),
    )
    ```
  </Tab>
</Tabs>

***

### Advanced

For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your own widget and then incorporate those into the widget.

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversationsWithMessages(
      conversationsConfiguration: ConversationsConfiguration(),
    )
    ```
  </Tab>
</Tabs>

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

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

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

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/eXBBMbCp8GceLKEu/images/38111c87-conversationwithmessages_to_contacts_cometchat_screens-f011841214e6e0a097ad623ed7e6b1ec.png?fit=max&auto=format&n=eXBBMbCp8GceLKEu&q=85&s=2e8e246da773dc8e64ad3766a61b2015" alt="Image" width="4498" height="3120" data-path="images/38111c87-conversationwithmessages_to_contacts_cometchat_screens-f011841214e6e0a097ad623ed7e6b1ec.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/en-qdWUpyc0gQJjA/images/61c0e29e-conversationwithmessages_to_contacts_cometchat_screens-a52e08ee322e3b8f6da4120583fc0faf.png?fit=max&auto=format&n=en-qdWUpyc0gQJjA&q=85&s=f6b96b1a633e08c6370ca4e887f4dc18" alt="Image" width="4498" height="3120" data-path="images/61c0e29e-conversationwithmessages_to_contacts_cometchat_screens-a52e08ee322e3b8f6da4120583fc0faf.png" />
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/9Bqq9LdtQuQJXKNL/images/0bea74fd-conversationwithmessages_to_details_cometchat_screens-6ddb07eec6002b5b4e043b9cf94ba292.png?fit=max&auto=format&n=9Bqq9LdtQuQJXKNL&q=85&s=ae34c009cce7d46d93aeded2fe67aab2" alt="Image" width="4498" height="3120" data-path="images/0bea74fd-conversationwithmessages_to_details_cometchat_screens-6ddb07eec6002b5b4e043b9cf94ba292.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/hs7RfCG8l8g2sjQh/images/32395723-conversationwithmessages_to_details_cometchat_screens-813384699b126612ca8f50fcc352d5cb.png?fit=max&auto=format&n=hs7RfCG8l8g2sjQh&q=85&s=00f9b30fd87730381ace90dbf96b0308" alt="Image" width="4498" height="3120" data-path="images/32395723-conversationwithmessages_to_details_cometchat_screens-813384699b126612ca8f50fcc352d5cb.png" />
  </Tab>
</Tabs>

***

## Configurations

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

CometChatConversationsWithMessages has `Conversations`, `Messages`, and `Contacts` widget. Hence, each of these widgets will have its individual \`Configuration\`\`.

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

#### Conversations

You can customize the properties of the Conversations widget by making use of the ConversationsConfiguration. You can accomplish this by employing the `.conversationsConfiguration` method as demonstrated below:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversationsWithMessages(
      conversationsConfiguration: ConversationsConfiguration(),
    )
    ```
  </Tab>
</Tabs>

Example

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversationsWithMessages(
      conversationsConfiguration: ConversationsConfiguration(
          avatarStyle: AvatarStyle(
              border: Border.all(width: 2),
              borderRadius: 20,
              background: Colors.red
          ),
          statusIndicatorStyle: const StatusIndicatorStyle(
              borderRadius: 10,
              width: 2
          ),
          dateStyle: const DateStyle (
              contentPadding: EdgeInsets.all(2),
              background: Colors.grey
          )
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/cjVyusI_GGBVqQQt/images/1c06befc-conversationwithmessages_conversation_configuration_cometchat_screens-361ae3b030be2b11c88f589c14312f82.png?fit=max&auto=format&n=cjVyusI_GGBVqQQt&q=85&s=4260296964543aa983835c4a4c34d282" alt="Image" width="4498" height="3120" data-path="images/1c06befc-conversationwithmessages_conversation_configuration_cometchat_screens-361ae3b030be2b11c88f589c14312f82.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/7vXVr8t0HG_MwmVJ/images/8f0432f5-conversationwithmessages_conversation_configuration_cometchat_screens-54d07686accfc8b0ab5b5a788971e09e.png?fit=max&auto=format&n=7vXVr8t0HG_MwmVJ&q=85&s=9fbb6b07e3475465e9186a3f39150384" alt="Image" width="4498" height="3120" data-path="images/8f0432f5-conversationwithmessages_conversation_configuration_cometchat_screens-54d07686accfc8b0ab5b5a788971e09e.png" />
  </Tab>
</Tabs>

***