> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.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>