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

# Conversations With Messages

> Conversations With Messages — CometChat documentation.

This component is responsible for displaying the recent conversation between participants in a 1:1 or group chat. It also allows users to send text, images, videos, or other media as messages to communicate with one another in real-time.

This component typically includes the following component:

[Conversations](/ui-kit/vue/conversations) : This component lists the most recent or latest conversations or contacts with whom you have exchanged messages.

[Messages](/ui-kit/vue/messages): This component displays the conversation between participants in a 1:1 or group chat.

## Properties

### Chat Information

Details associated with a chat conversation or chat participants.

| Name | Type | Description |
| - | - | - |
| user | [User Class](/sdk/javascript/user-management#user-class) | View details of this particular CometChat user |
| group | [Group Class](/sdk/javascript/create-group#group-class) | View details of this particular CometChat group |

### isMobileView

This refers to the display or presentation of the component specifically optimized for viewing on mobile devices such as smartphones or tablets.

| Name | Type | Description |
| - | - | - |
| isMobileView | boolean | When set to true, the component adapts the layout, design, and functionality to provide an optimal user experience on smaller screens and touch-based interfaces. |

### messageText

Temporary text displayed to provide a suggestion to the user to select a particular user / group to chat with.

| Name | Type | Description |
| - | - | - |
| messageText | string | It represents the textual content which will be replaced with the messages component when user clicks on a particular user / group chat. |

### Assets URL

Custom asset URL used for graphical representation

| Name | Type | Description |
| - | - | - |
| startNewConversationIconURL | string | Asset URL for the button which opens up a new conversation |

### Function Callback

Functions that can be invoked by the user in response to a specific event or condition.

| Name | Type | Description |
| - | - | - |
| onError | (error: CometChat.CometChatException) => void \| null | Override the method that is invoked when an error is encountered within the component |

### Style

Styling properties of all the component

| Name | Type | Description |
| - | - | - |
| conversationsWithMessagesStyle | [WithMessagesStyle](/web-shared/withmessagesstyle) | Styling properties and values of the [Conversations with Messages](/ui-kit/vue/conversations-with-messages) component |

### Configurations

Properties of the child components like conversations and messages that are available for customisation.

| Name | Type | Description |
| - | - | - |
| conversationsConfiguration | [Conversations configuration](/web-shared/conversations-configuration) | Properties of the conversations component that are available for customisation via this component. |
| messagesConfiguration | [MessagesConfiguration](/web-shared/messages-configuration) | Properties of the messages component that are available for customisation via this component. |

### Usage

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    //creating conversations configuration
    const conversationsConfiguration:ConversationsConfiguration = new ConversationsConfiguration({
    disablePresence:true
    });

    //passing conversations configuration
    <CometChatConversationsWithMessages :conversationsConfiguration="conversationsConfiguration"
    ></CometChatConversationsWithMessages>
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.