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

# Conversations

> Conversations — CometChat documentation.

## Overview

The `CometChatConversations` is a [Widget](/ui-kit/flutter/v4/components-overview#components), That shows all conversations related to the currently logged-in user,

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/dvwKpKGankGygs5o/images/68a1ac2e-conversation_overview_cometchat_screens-3910d2f900166231ffe1f19bab884e97.png?fit=max&auto=format&n=dvwKpKGankGygs5o&q=85&s=040a73fdd12d41d60fff38b55dc258c0" alt="Image" width="4498" height="3120" data-path="images/68a1ac2e-conversation_overview_cometchat_screens-3910d2f900166231ffe1f19bab884e97.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/gyYKxTizhi5zqoIK/images/543418a6-conversation_overview_cometchat_screens-67c7251b29d4f61d0cbf361c041350f6.png?fit=max&auto=format&n=gyYKxTizhi5zqoIK&q=85&s=d5c66c71b16c3a47185fc4ff022fab41" alt="Image" width="4498" height="3120" data-path="images/543418a6-conversation_overview_cometchat_screens-67c7251b29d4f61d0cbf361c041350f6.png" />
  </Tab>
</Tabs>

## Usage

### Integration

As `CometChatConversations` is a widget, 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.

You can launch `CometChatConversations` 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 `CometChatConversations`

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

##### 2. Embedding `CometChatConversations` 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 Conversations extends StatefulWidget {
      const Conversations({super.key});

      @override
      State<Conversations> createState() => _ConversationsState();
    }

    class _ConversationsState extends State<Conversations> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: CometChatConversations(),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

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

1. ##### onItemTap

`onItemTap` is triggered when you click on a ListItem of the `CometChatConversations` widget. This `onItemTap` method proves beneficial when a user intends to customize the click behavior in CometChatConversations.

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

***

##### 2. onBack

This `onBack` method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatConversations.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        onBack: () => {
            // TODO("Not yet implemented")
        },
    ),
    ```
  </Tab>
</Tabs>

***

##### 3. setOnSelection

The `onSelection` feature enables selection with modes: `SelectionMode.single` and `SelectionMode.multiple`.

The `onSelection` event is triggered upon the completion of a selection in `onSelection`. This returns the selected conversations list when the callback is triggered. It can be executed with any button or action.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        selectionMode: SelectionMode.multiple,
        onSelection: (list) => {
            // TODO("Not yet implemented")
        },
    ),
    ```
  </Tab>
</Tabs>

***

##### 4. onError

This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatConversations.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        onError: (e) {
            // TODO("Not yet implemented")
        },
    )
    ```
  </Tab>
</Tabs>

***

### Filters

You can set `ConversationsRequestBuilder` in the `CometChatConversations` widget to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationsRequestBuilder](/sdk/flutter/retrieve-conversations).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        conversationsRequestBuilder: ConversationsRequestBuilder()
            ..conversationType = "user"
            ..limit = 10
            ..withTags = false,
    )
    ```
  </Tab>
</Tabs>

You can set filters using the following parameters:

| Property                     | Description                                          | Code                            |
| ---------------------------- | ---------------------------------------------------- | ------------------------------- |
| **Build**                    | Builds and returns an `ConversationsRequest` object. | `build(): ConversationsRequest` |
| **Conversation Type**        | Type of the conversation.                            | `conversationType: String?`     |
| **Limit**                    | Number of results to limit the query.                | `limit: int?`                   |
| **Tags**                     | Tags for filtering.                                  | `tags: List<String>?`           |
| **With Tags**                | Flag to include tags.                                | `withTags: bool?`               |
| **With User And Group Tags** | Flag to include user and group tags.                 | `withUserAndGroupTags: bool?`   |

***

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

##### 1. Conversation Deleted

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 align with your app's design specifications, you have the flexibility to customize the appearance of the conversation widget. 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 widget in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the widget.

##### 1. Conversation Style

You can set the `ConversationsStyle` to the `CometChatConversations` Widget to customize the styling.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        conversationsStyle: ConversationsStyle(
            background: Colors.white300,
            backIconTint: Colors.red,
        )
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/8U2-5SWHI94obVDJ/images/9b965216-conversation_style_cometchat_screens-7ed7102905b535f4d54767125581e3cd.png?fit=max&auto=format&n=8U2-5SWHI94obVDJ&q=85&s=c54603fa8ed6ab0a923bec2348a9147f" alt="Image" width="4498" height="3120" data-path="images/9b965216-conversation_style_cometchat_screens-7ed7102905b535f4d54767125581e3cd.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/BRVNF1Z1yHcA0g5c/images/424bc004-conversation_style_cometchat_screens-d79c2f9a08cb8aaedc1c0e948c1981e4.png?fit=max&auto=format&n=BRVNF1Z1yHcA0g5c&q=85&s=1fdaa97ebd02342561c5fa2125f09593" alt="Image" width="4498" height="3120" data-path="images/424bc004-conversation_style_cometchat_screens-d79c2f9a08cb8aaedc1c0e948c1981e4.png" />
  </Tab>
</Tabs>

List of properties exposed by ConversationsStyle

| Property                           | Description                                                                                           | Code                                 |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------ |
| **Back Icon Tint**                 | Used to set the color of the back icon in the app bar.                                                | `backIconTint: Color`                |
| **Background**                     | Used to set background color.                                                                         | `background: Color`                  |
| **Border**                         | Used to set border.                                                                                   | `border: BoxBorder`                  |
| **Border Radius**                  | Used to set border radius.                                                                            | `borderRadius: double`               |
| **Empty Text Style**               | Used to set the style of the response text shown when fetching the list of conversations is empty.    | `emptyTextStyle: TextStyle`          |
| **Error Text Style**               | Used to set the style of the response text shown when an error occurs while fetching conversations.   | `errorTextStyle: TextStyle`          |
| **Gradient**                       | Used to set a gradient background.                                                                    | `gradient: Gradient`                 |
| **Height**                         | Used to set height.                                                                                   | `height: double`                     |
| **Last Message Style**             | Used to customize the appearance of the last message in the conversation item's subtitle.             | `lastMessageStyle: TextStyle`        |
| **Loading Icon Tint**              | Used to set the color of the loading icon shown during conversations fetching.                        | `loadingIconTint: Color`             |
| **Online Status Color**            | Used to set the color of the status indicator if a user is online.                                    | `onlineStatusColor: Color`           |
| **Password Group Icon Background** | Used to set the color of the icon shown as a status indicator if the group is password protected.     | `passwordGroupIconBackground: Color` |
| **Private Group Icon Background**  | Used to set the color of the icon shown as a status indicator if the group is private.                | `privateGroupIconBackground: Color`  |
| **Separator Color**                | Used to set the color of the divider separating conversation items.                                   | `separatorColor: Color`              |
| **Thread Indicator Style**         | Used to customize the appearance of the subtitle if the last message was made inside a thread.        | `threadIndicatorStyle: TextStyle`    |
| **Title Style**                    | Used to set the style of the title in the app bar.                                                    | `titleStyle: TextStyle`              |
| **Typing Indicator Style**         | Used to customize the appearance of the response text when participants are typing in a conversation. | `typingIndicatorStyle: TextStyle`    |
| **Width**                          | Used to set width.                                                                                    | `width: double`                      |

##### 2. Avatar Style

To apply customized styles to the `Avatar` widget in the `CometChatConversations` Widget, you can use the following code snippet. For more information, visit [Avatar Styles](/ui-kit/flutter/v4/avatar).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        avatarStyle: AvatarStyle(
            border: Border.all(width: 2),
            borderRadius: 20,
            background: Colors.red
        ),
    )
    ```
  </Tab>
</Tabs>

***

##### 3. StatusIndicator Style

To apply customized styles to the `StatusIndicator` widget in the `CometChatConversations` Widget, you can use the following code snippet. For more information, visit [Indicator Styles](/ui-kit/flutter/v4/status-indicator).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        statusIndicatorStyle: const StatusIndicatorStyle(
            borderRadius: 10,
            gradient: LinearGradient(colors: [Colors.red, Colors.orange], begin: Alignment.topLeft, end: Alignment.bottomRight)
        ),
    )
    ```
  </Tab>
</Tabs>

***

##### 4. Date Style

To apply customized styles to the `Date` widget in the `Conversations` Widget, you can use the following code snippet. For more information, visit [Date Styles](/ui-kit/flutter/v4/date).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        dateStyle: DateStyle(
            background: Colors.white300,
            borderRadius: 20,
            border: Border.all(color: Colors.red, width: 1),
        ),
    )
    ```
  </Tab>
</Tabs>

***

##### 5. Badge Style

To apply customized styles to the `Badge` widget in the `Conversations` Widget, you can use the following code snippet. For more information, visit [Badge Styles](/ui-kit/flutter/v4/badge)

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        badgeStyle: BadgeStyle(
            border: Border.all(width: 2, color: Colors.red),
            background: Colors.orange
        ),
    )
    ```
  </Tab>
</Tabs>

##### 6. LisItem Style

To apply customized styles to the `List Item` widget in the `Conversations` Widget, you can use the following code snippet. For more information, visit [List Item Styles](/ui-kit/flutter/v4/list-item).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        conversationsStyle: const ConversationsStyle(
            background: Color(0xFFB39DDB)
        ),
        listItemStyle: const ListItemStyle(
            background: Color(0xFFB39DDB),
        ),
    )
    ```
  </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.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/k82rLv-mRy38q-bk/images/e6692917-conversation_functionality_before_cometchat_screens-ddbcaacac050c062c2b9793afebe2778.png?fit=max&auto=format&n=k82rLv-mRy38q-bk&q=85&s=d112f65b7cbe29f33803b0a96fcb91fd" alt="Image" width="4498" height="3120" data-path="images/e6692917-conversation_functionality_before_cometchat_screens-ddbcaacac050c062c2b9793afebe2778.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/8U2-5SWHI94obVDJ/images/9f196ea4-conversation_functionality_before_cometchat_screens-e06cb971a1280374d0dd2258441a5cde.png?fit=max&auto=format&n=8U2-5SWHI94obVDJ&q=85&s=98e9443cbd1bf24ace896df73fb10f0a" alt="Image" width="4498" height="3120" data-path="images/9f196ea4-conversation_functionality_before_cometchat_screens-e06cb971a1280374d0dd2258441a5cde.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
     CometChatConversations(
        showBackButton: false,
        title: "Your Title",
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/JoK2O2F7IYCQF1_g/images/1d9f015b-conversation_functionality_after_cometchat_screens-3f4f6dd6d668a49733011327da573b8f.png?fit=max&auto=format&n=JoK2O2F7IYCQF1_g&q=85&s=7dea84eacb39786afe361b91e8a9a578" alt="Image" width="4498" height="3120" data-path="images/1d9f015b-conversation_functionality_after_cometchat_screens-3f4f6dd6d668a49733011327da573b8f.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/hvldi1e9uY_02hWX/images/8eaaddc7-conversation_functionality_after_cometchat_screens-7d3818cf718b6620784e1feef7310f51.png?fit=max&auto=format&n=hvldi1e9uY_02hWX&q=85&s=3078e51a067ce9f1ddffd4299b82bcb2" alt="Image" width="4498" height="3120" data-path="images/8eaaddc7-conversation_functionality_after_cometchat_screens-7d3818cf718b6620784e1feef7310f51.png" />
  </Tab>
</Tabs>

List of Poperties exposed by `CometChatConversations`

| Property                   | Description                                                                                                                                                                 | Code                                                      |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| **Activate Selection**     | Used to specify if the listed conversations can be selected, selection can be activated on tap or on long press                                                             | `activateSelection: ActivateSelection`                    |
| **AppBar Options**         | Used to set the options available in the app bar                                                                                                                            | `appBarOptions: List<Widget>`                             |
| **Back Button**            | Used to set back button located in the app bar                                                                                                                              | `backButton: Widget`                                      |
| **Controller**             | Used to programmatically update the scroll physics of list containing the conversations                                                                                     | `controller: ScrollController`                            |
| **Date Pattern**           | Used to display a custom string instead of the timestamp show at the tail of the conversation item                                                                          | `datePattern: String Function(Conversation conversation)` |
| **Disable Mentions**       | Disables mentions formatter if true                                                                                                                                         | `disableMentions: bool`                                   |
| **Disable Typing**         | If true stops indicating if a participant in a conversation is typing                                                                                                       | `disableTyping: bool`                                     |
| **Empty State Text**       | Used to set a custom text response when fetching the conversations has returned an empty list                                                                               | `emptyStateText: String`                                  |
| **Error State Text**       | Used to set a custom text response when some error occurs on fetching the list of conversations                                                                             | `errorStateText: String`                                  |
| **Hide Appbar**            | Toggle visibility for app bar                                                                                                                                               | `hideAppbar: bool`                                        |
| **Hide Error**             | Used to hide error on fetching conversations                                                                                                                                | `hideError: bool`                                         |
| **Hide Receipt**           | Used to toggle visibility of message receipts shown in the subtitle of the conversation                                                                                     | `hideReceipt: bool`                                       |
| **Hide Search**            | Used to toggle visibility for search box                                                                                                                                    | `hideSearch: bool`                                        |
| **Hide Separator**         | Used to hide the divider separating the conversation items                                                                                                                  | `hideSeparator: bool`                                     |
| **Hide Section Separator** | Used to hide the text separating grouped conversation items                                                                                                                 | `hideSectionSeparator: bool`                              |
| **Private Group Icon**     | Used to set icon shown in place of status indicator if the conversation is taking place in a private group                                                                  | `privateGroupIcon: Widget`                                |
| **Protected Group Icon**   | Used to set icon shown in place of status indicator if the conversation is taking place in a password protected group                                                       | `protectedGroupIcon: Widget`                              |
| **Search Box Icon**        | Used to set search Icon in the search field                                                                                                                                 | `searchBoxIcon: Widget`                                   |
| **Search Placeholder**     | Used to set placeholder text for the search field                                                                                                                           | `searchPlaceholder: String`                               |
| **Selection Icon**         | Change selection icon                                                                                                                                                       | `selectionIcon: Widget`                                   |
| **Sent Icon**              | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is sent | `sentIcon: Widget`                                        |
| **Show Back Button**       | Used to toggle visibility for back button                                                                                                                                   | `showBackButton: bool`                                    |
| **Theme**                  | Used to set custom theme                                                                                                                                                    | `theme: CometChatTheme`                                   |
| **Title**                  | Used to set the title in the app bar                                                                                                                                        | `title: String`                                           |
| **Typing Indicator Text**  | Used to customize the text response shown in the subtitle of the conversation item if a participant of a conversation is typing                                             | `typingIndicatorText: String`                             |

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

#### ListItemView

With this function, you can assign a custom ListItem view to the `CometChatConversations` Widget.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
        listItemView: (conversation) {
          return Placeholder();
        },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/_EL7Vq6dx_iRWqWt/images/100e939b-conversation_list_item_view_cometchat_screens-f065d0e148ac9e8aaf39d43080790df5.png?fit=max&auto=format&n=_EL7Vq6dx_iRWqWt&q=85&s=4cd12b8ca738fb2ecb634cd671814c7c" alt="Image" width="4498" height="3120" data-path="images/100e939b-conversation_list_item_view_cometchat_screens-f065d0e148ac9e8aaf39d43080790df5.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-4h3cKAJUX2gQz_u/images/b1173658-conversation_list_item_view_cometchat_screens-3ebe6434cde7acab5399d05e14e57326.png?fit=max&auto=format&n=-4h3cKAJUX2gQz_u&q=85&s=b67f4d69ebcae83ccda596599c1bc8b8" alt="Image" width="4498" height="3120" data-path="images/b1173658-conversation_list_item_view_cometchat_screens-3ebe6434cde7acab5399d05e14e57326.png" />
  </Tab>
</Tabs>

**Example**

Here is the complete example for reference:

<Tabs>
  <Tab title="Dart">
    ```dart custom_list_item.dart theme={null}
    import 'package:flutter/material.dart';
    import 'package:flutter_uikit_docs_sample_app/utils/custom_colors.dart';
    import 'package:intl/intl.dart';

    class CustomListItems extends StatelessWidget {
      final String name;
      final DateTime? lastMessageTime;
      final String? avatarUrl;

      const CustomListItems({
        super.key,
        required this.name,
        this.lastMessageTime,
        this.avatarUrl,
      });

      String formatDateTime(DateTime dateTime) {
        final now = DateTime.now();
        final difference = now.difference(dateTime);

        if (difference.inDays == 0) {
          return DateFormat('HH:mm').format(dateTime);
        } else if (difference.inDays == 1) {
          return 'Yesterday';
        } else {
          return DateFormat('yyyy-MM-dd').format(dateTime);
        }
      }

      @override
      Widget build(BuildContext context) {
        return Container(
          margin: const EdgeInsets.only(top: 5, bottom: 5),
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            border: Border.all(color: Color(0xFF6851D6), width: 1), // Example border color
            borderRadius: BorderRadius.circular(8.0),
            color: Color(0xFFEEEEEE)
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      name,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    lastMessageTime == null ? Container() : Text(formatDateTime(lastMessageTime!)),
                  ],
                ),
              ),
              const SizedBox(width: 8.0),
              if (avatarUrl != null)
                ClipOval(
                  child: Image.network(
                    avatarUrl!,
                    width: 40.0,
                    height: 40.0,
                    fit: BoxFit.cover,
                    errorBuilder: (context, error, stackTrace) {
                      return const Icon(
                        Icons.person,
                        size: 40.0,
                      );
                    },
                  ),
                )
              else
                const Icon(
                  Icons.person,
                  size: 40.0,
                ),
            ],
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Dart">
    ```dart main.dart theme={null}
    CometChatConversations(
      listItemView: (conversation) {
        return CustomListItems(
          name: (conversation.conversationWith) is User ? ((conversation.conversationWith) as User).name : ((conversation.conversationWith) as Group).name,
          lastMessageTime: conversation.updatedAt!,
          avatarUrl: (conversation.conversationWith) is User ? ((conversation.conversationWith) as User).avatar : ((conversation.conversationWith) as Group).icon,
        );
      },
    )
    ```
  </Tab>
</Tabs>

***

#### TextFormatters

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/flutter/v4/mentions-formatter-guide)

**Example**

Here is the complete example for reference:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      textFormatters: [
        CometChatMentionsFormatter(
          messageBubbleTextStyle: (theme, alignment,{forConversation = false}) =>
              TextStyle(
                  color: alignment==BubbleAlignment.left? Colors.orange : Colors.pink,
                  fontSize: 14,
                  fontWeight: FontWeight.bold
              ),
        )
      ],
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/wITpHRGFWGJvJnmU/images/f0d5bc7b-conversation_text_formatters_cometchat_screens-1c357a76fec0d31fecb2b687d51523d7.png?fit=max&auto=format&n=wITpHRGFWGJvJnmU&q=85&s=1134f23f5c0079fa5d2407d5a4ee292e" alt="Image" width="4498" height="3120" data-path="images/f0d5bc7b-conversation_text_formatters_cometchat_screens-1c357a76fec0d31fecb2b687d51523d7.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/1UV7B-A4sFhTEtPO/images/04783604-conversation_text_formatters_cometchat_screens-48ad9b33d9f80f9b263cd8916251fd9b.png?fit=max&auto=format&n=1UV7B-A4sFhTEtPO&q=85&s=06aaf749c12d47d737e7b956271ce881" alt="Image" width="4498" height="3120" data-path="images/04783604-conversation_text_formatters_cometchat_screens-48ad9b33d9f80f9b263cd8916251fd9b.png" />
  </Tab>
</Tabs>

***

#### AppBarOptions

You can set the Custom AppBarOptions to the `CometChatConversations` widget.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/NKRwOrdYfqQN0SpG/images/fc57c385-conversation_set_menu_cometchat_screens-37197b7fa9ccac4cd95f6def3ab66314.png?fit=max&auto=format&n=NKRwOrdYfqQN0SpG&q=85&s=0405f630552f6f153499bff4ff9758df" alt="Image" width="4498" height="3120" data-path="images/fc57c385-conversation_set_menu_cometchat_screens-37197b7fa9ccac4cd95f6def3ab66314.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/iIeExfBhmmmkVYg_/images/5d15a4fe-conversation_set_menu_cometchat_screens-9c1e6b4e8ff9e4ded18033b39cb31e40.png?fit=max&auto=format&n=iIeExfBhmmmkVYg_&q=85&s=10d32b4d5de09cd36a582e793d836112" alt="Image" width="4498" height="3120" data-path="images/5d15a4fe-conversation_set_menu_cometchat_screens-9c1e6b4e8ff9e4ded18033b39cb31e40.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      appBarOptions: [
        InkWell(
          onTap: () {
            // TODO("Not yet implemented")
          },
          child: const Icon(Icons.ac_unit, color: Color(0xFF6851D6)),
        ),
        const SizedBox(width: 10)
      ],
    )
    ```
  </Tab>
</Tabs>

***

#### DatePattern

You can modify the date pattern to your requirement using `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.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-MogY9MW_bOB3epD/images/4672e906-conversation_set_date_pattern_cometchat_screens-9a9a64ffa7c1acc64ecad04bcbef47e1.png?fit=max&auto=format&n=-MogY9MW_bOB3epD&q=85&s=93201ded33a55af95144b074518904b0" alt="Image" width="4498" height="3120" data-path="images/4672e906-conversation_set_date_pattern_cometchat_screens-9a9a64ffa7c1acc64ecad04bcbef47e1.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/see6b5g_JfKPgfLq/images/3aec39aa-conversation_set_date_pattern_cometchat_screens-1942cf4126bef91bea4309bd4b883628.png?fit=max&auto=format&n=see6b5g_JfKPgfLq&q=85&s=576260fe204ca92bd2e6a6ef0ed826b0" alt="Image" width="4498" height="3120" data-path="images/3aec39aa-conversation_set_date_pattern_cometchat_screens-1942cf4126bef91bea4309bd4b883628.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      datePattern: (conversation) {
        return DateFormat('HH:mm').format(conversation.updatedAt!);
      },
    )
    ```
  </Tab>
</Tabs>

***

#### SubtitleView

You can customize the subtitle view for each conversation item to meet your requirements

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/lFF45O1CcDkVMfu4/images/a5703cc6-conversation_set_subtitle_view_cometchat_screens-6448cb7451e6e28ba28122094c5c033a.png?fit=max&auto=format&n=lFF45O1CcDkVMfu4&q=85&s=c58aa16b72dae1b2fe21516ec7e2d9f2" alt="Image" width="4498" height="3120" data-path="images/a5703cc6-conversation_set_subtitle_view_cometchat_screens-6448cb7451e6e28ba28122094c5c033a.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/Kv5z_j0TcKGMfIHt/images/c33fcf15-conversation_set_subtitle_view_cometchat_screens-935babbe0e4a7f93086cd1c071b5aece.png?fit=max&auto=format&n=Kv5z_j0TcKGMfIHt&q=85&s=00b0473683a87f457d54339c8a65580e" alt="Image" width="4498" height="3120" data-path="images/c33fcf15-conversation_set_subtitle_view_cometchat_screens-935babbe0e4a7f93086cd1c071b5aece.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      subtitleView: (context, conversation) {
        return const Row(
          children: [
            Icon(Icons.call, color: Color(0xFF6851D6), size: 25,),
            SizedBox(width: 10),
            Icon(Icons.video_call, color: Color(0xFF6851D6), size: 25,),
          ],
        );
      },
    )
    ```
  </Tab>
</Tabs>

***

#### EmptyStateView

You can set a custom `EmptyStateView` using `emptyStateView` to match the empty UI of your app.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      emptyStateView: (context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          child: Center(
              child: const Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Spacer(),
                  Icon(Icons.sms_failed_outlined, color: Colors.red, size: 100,),
                  SizedBox(height: 20,),
                  Text("Your Custom Message"),
                  Spacer(),
                ],
              )
          ),
        ); // Replaced the placeholder with a custom widget.
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/aivwqvtoO_fTqj20/images/f2652f99-conversation_empty_state_view_cometchat_screens-7b00961e00b377fd33328b0457bed5d8.png?fit=max&auto=format&n=aivwqvtoO_fTqj20&q=85&s=baaf9709892fc057738f4a47d10b32f7" alt="Image" width="4498" height="3120" data-path="images/f2652f99-conversation_empty_state_view_cometchat_screens-7b00961e00b377fd33328b0457bed5d8.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/aRTT1Z3XQ9tvRy7f/images/11fb656f-conversation_empty_state_view_cometchat_screens-477f3b5a32932991b63c482bd9b340a4.png?fit=max&auto=format&n=aRTT1Z3XQ9tvRy7f&q=85&s=cd8a88bf55905e4b525d1fab02faa0e5" alt="Image" width="4498" height="3120" data-path="images/11fb656f-conversation_empty_state_view_cometchat_screens-477f3b5a32932991b63c482bd9b340a4.png" />
  </Tab>
</Tabs>

***

#### ErrorStateView

You can set a custom `ErrorStateView` using `errorStateView` to match the error view of your app.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/8U2-5SWHI94obVDJ/images/99fc66af-conversation_set_error_state_cometchat_screens-43b0e325084a6b4cf5722cd4cb266908.png?fit=max&auto=format&n=8U2-5SWHI94obVDJ&q=85&s=98f63b6f5e3996e0507f238965b6091e" alt="Image" width="4498" height="3120" data-path="images/99fc66af-conversation_set_error_state_cometchat_screens-43b0e325084a6b4cf5722cd4cb266908.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/hvldi1e9uY_02hWX/images/8f8a8b2a-conversation_set_error_state_cometchat_screens-10d7c424128ffda546e414d3256591ef.png?fit=max&auto=format&n=hvldi1e9uY_02hWX&q=85&s=e11428e08952a30c387d2e9b7380ab80" alt="Image" width="4498" height="3120" data-path="images/8f8a8b2a-conversation_set_error_state_cometchat_screens-10d7c424128ffda546e414d3256591ef.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      errorStateView: (context) {
        return SizedBox(
          width: MediaQuery.of(context).size.width,
          child: const Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Spacer(),
              Icon(Icons.error_outline, color: Colors.red, size: 100,),
              SizedBox(height: 20,),
              Text("Your Custom Error Message"),
              Spacer(),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

***

#### Options

You can set a List of 'CometChatOption' for a conversation item to add your custom actions to the conversation. These options will be visible when swiping any conversation item.

Here is the complete example for reference:

**Example**

<Tabs>
  <Tab title="Dart">
    ```dart main.dart theme={null}
    CometChatConversations(
      options: (p0, controller, context) {
        return [
          CometChatOption(id: "id", title: "Option1", icon: "assets/img/envelope.png", backgroundColor: Colors.yellow, onClick: () {
            // TODO something when this option is clicked
          },)
        ];
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/iIeExfBhmmmkVYg_/images/612e7ef4-conversation_set_options_cometchat_screens-95b1800b2cf300c43fe7fb0f16dff8ea.png?fit=max&auto=format&n=iIeExfBhmmmkVYg_&q=85&s=745aae2d555bb9b4285e1b3b612b5271" alt="Image" width="4498" height="3120" data-path="images/612e7ef4-conversation_set_options_cometchat_screens-95b1800b2cf300c43fe7fb0f16dff8ea.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-MogY9MW_bOB3epD/images/4d27a61c-conversation_set_options_cometchat_screens-063a35e2f66419172200d29ba1004d35.png?fit=max&auto=format&n=-MogY9MW_bOB3epD&q=85&s=77755d29b7cda9fbdd22bc1a11f6dab2" alt="Image" width="4498" height="3120" data-path="images/4d27a61c-conversation_set_options_cometchat_screens-063a35e2f66419172200d29ba1004d35.png" />
  </Tab>
</Tabs>