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>