Conversations

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	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 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	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	Styling properties and values of the Avatar component
statusIndicatorStyle	StatusIndicator	Styling properties and values of the StatusIndicator component
badgeStyle	BadgeStyle	Styling properties and values of the Badge component
receiptStyle	ReceiptStyle	Styling properties and values of the Receipt component
listItemStyle	ListItemStyle	Styling properties and values of the ListItem component
deleteConversationDialogStyle	ConfirmDialogStyle	Styling properties and values of the ConfirmDialog component
backdropStyle	BackdropStyle	Styling properties and values of the Backdrop component
conversationsStyle	ConversationsStyle	Styling properties and values of the Conversations component

Events

To handle events supported by CometChatConversations component you have to add the listeners mentioned here.

Usage

Vue

let conversationsStyle:ConversationsStyle = new ConversationsStyle({
  width: "500px",
  height: "500px"
});
<CometChatConversations :conversationsStyle="conversationsStyle"></CometChatConversations>