> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-docs-audit-content-webhooks.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Conversations > Conversations — CometChat documentation. This component lists the most recent or latest conversations or contacts with whom you have exchanged messages. It provides a convenient way to quickly access and resume conversations with the people you have been in contact with recently. ## Properties ### Title Heading text for the component | Name | Type | Description | | ----- | ------ | ------------------------------ | | title | string | Heading text for the component | ### Title Alignment Alignment of the heading text for the component | Name | Type | Description | | -------------- | ------ | ----------------------------------------------- | | titleAlignment | string | Alignment of the heading text for the component | ### Loading state This refers to the state of the conversations component when it is actively retrieving or fetching data. | Name | Type | Description | | ---------------- | ------ | --------------------------------------------------------- | | loadingIconURL | string | Asset URL for the loading indicator icon | | loadingStateView | view | User-defined component to customise the loading indicator | ### Empty state This refers to the state of the conversations component when it has no content or data to display | Name | Type | Description | | -------------- | ------ | --------------------------------------------------------------------- | | emptyStateText | string | The textual content displayed in the empty state of the component. | | emptyStateView | view | User-defined component to customise the empty state of the component. | ### Error state This refers to the state of the conversations component when an error occurs during the retrieval of the data. | Name | Type | Description | | -------------- | ------ | --------------------------------------------------------------------- | | errorStateText | string | The textual content displayed in the error state of the component. | | errorStateView | view | User-defined component to customise the error state of the component. | ### Asset URLs Custom asset URL used for graphical representation | Name | Type | Description | | ------------------ | ------ | ---------------------------------------------------------------------------------------------------- | | sentIcon | string | Asset URL for the sent state indicating that a message is sent successfully. | | deliveredIcon | string | Asset URL for the delivered state indicating that a sent message is delivered successfully. | | readIcon | string | Asset URL for the read state indicating that a sent message is read by the receiver. | | errorIcon | string | Asset URL for the error state indicating that an error has occurred when the message was in transit. | | privateGroupIcon | string | Asset URL for the group icon to represent the private or closed group. | | protectedGroupIcon | string | Asset URL for the group icon to represent the password protected group. | ### RequestBuilder This provides set of methods that allow developers to easily create and configure messages before fetching them for the intended recipients. | Name | Type | Description | | --------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | conversationsRequestBuilder | [CometChat.ConversationsRequestBuilder](/sdk/javascript/retrieve-conversations#retrieve-list-of-conversations) | Class that allows you to set various parameters to the `ConversationsRequest` class based on which the conversations are fetched | ## Formatters Array of formatters | Name | Description | | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | textFormatters | [TextFormatters](/web-shared/text-formatters) is an array of formatters that Applies and adjusts styling for last message according to specified regex patterns defined in various formatters. | ### Toggle Switch to hide or show the error state, users presence, read receipt and typing. | Name | Type | Description | | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ | | hideSeparator | boolean | When set to true, hides the separator between the individual elements in the list. | | hideError | boolean | When set to true, hides the error message when an error is encountered in the component | | disableUsersPresence | boolean | When set to true, Users will not be able to see whether a particular user is currently online or offline. | | hideReceipt | boolean | Used to control the visibility of read receipts without affecting the functionality of marking messages as read and delivered. | | disableTyping | boolean | When set to true, typing events are disabled and the typing indicators are not displayed. | | disableMentions | boolean | When set to true, the mentions feature will be disabled. Default value is set to false | ### Sound This refers to the action of activating or allowing the audio or sound capabilities of the conversations component. | Name | Type | Description | | ----------------------- | ------- | --------------------------------------------------------------------------------- | | disableSoundForMessages | boolean | When set to true, the component will not produce sound for all incoming messages. | | customSoundForMessages | string | mp3 file asset of your choice. | ### activeConversation This refers to a conversation that is currently ongoing or in progress. | Name | Type | Description | | ------------------ | ---------------------- | -------------------------------------------- | | activeConversation | CometChat.Conversation | Conversation that is currently taking place. | ### Selection Mode Allows user to choose individual or multiple items. | Name | Type | Description | | ------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | | selectionMode | [SelectionMode](/web-shared/selectionmode) | Allows user to select individual or multiple items for applying specific operations. | | onSelect | Function as PropType\<(conversations:CometChat.Conversation\[]) => void> | Method invoked which returns the selected conversations. | ### Custom view UI component created and customised by the developer to meet your design or functional requirements. | Name | Type | Description | | ------------ | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | subtitleView | Function as PropType\<(user?: CometChat.User, group?: CometChat.Group) => ViewType> | User-defined component to customise the secondary text shown in the default user profile. | ### Menu UI component created and customised by the developer to meet your design or functional requirements representing the button actions in the header section. | Name | Type | Description | | ---- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | menu | view | User-defined component to showcase options related to the conversations like buttons to fetch the selected conversation, mute conversation etc in the header section. | ### Actions This includes action buttons or icons that allow users to perform common actions or tasks, such as deleting a conversation etc. | Name | Type | Description | | ------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | options | Function as PropType\<(conversation:CometChat.Conversation) => CometChatOption\[]> | User-defined actions which appears for each conversation on mouseover. | ### Function Callback Functions that can be invoked by the user in response to a specific event or condition. | Name | Type | Description | | ----------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | onItemClick | Function as PropType\<(conversation:CometChat.Conversation) => CometChatOption\[]> | Override the method that is invoked when user clicks on a particular conversation | | onClose | Function as PropType\<() => void> | Override the method that is invoked when user clicks on the close icon | ### Style Styling properties and values of all the child components | Name | Type | Description | | ----------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | avatarStyle | [AvatarStyle](/web-elements/avatar#avatar-style) | Styling properties and values of the [Avatar](/web-elements/avatar) component | | statusIndicatorStyle | [StatusIndicator](/web-elements/status-indicator) | Styling properties and values of the [StatusIndicator](/web-elements/status-indicator) component | | badgeStyle | [BadgeStyle](/web-elements/badge#badge-style) | Styling properties and values of the [Badge](/web-elements/badge) component | | receiptStyle | [ReceiptStyle](/web-elements/receipt#receiptstyle) | Styling properties and values of the [Receipt](/web-elements/receipt) component | | listItemStyle | [ListItemStyle](/web-elements/list-item#listitemstyle) | Styling properties and values of the [ListItem](/web-elements/list-item) component | | deleteConversationDialogStyle | [ConfirmDialogStyle](/web-elements/confirm-dialog#confirmdialogstyle) | Styling properties and values of the [ConfirmDialog](/web-elements/confirm-dialog) component | | backdropStyle | [BackdropStyle](/web-elements/backdrop#backdropstyle) | Styling properties and values of the [Backdrop](/web-elements/backdrop) component | | conversationsStyle | [ConversationsStyle](/web-shared/conversationsstyle) | Styling properties and values of the [Conversations](/ui-kit/vue/conversations) component | ## Events To handle events supported by `CometChatConversations` component you have to add the listeners mentioned [here](/web-shared/conversations-events). ## Usage ```js theme={null} let conversationsStyle:ConversationsStyle = new ConversationsStyle({ width: "500px", height: "500px" }); ```