User Details

User Details — CometChat documentation.

CometChatDetails is a component that provides additional information and settings related to a specific user.

The details screen includes the following elements and functionalities:

1. User Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
2. User Actions: The details screen provides actions to block/unblock the user.

Properties

User

You can view details of this particular user

Name	Type	Description
user	CometChat.User	View details of this particular CometChat user

Title

Title for the component

Name	Type	Description
title	string	Heading text for the component

Icon URLs

Custom asset URL used for graphical representation

Name	Type	Description
closeButtonIconURL	string	Asset URL for the close icon

Disable user presence

Turn off the visibility of a user’s online status in the chat

Name	Type	Description
disableUsersPresence	boolean	When set to true, Users will not be able to see whether a particular user is currently online or offline.

Data / Templates

Pre-defined structure to serve as a starting point to create the details component.

Name	Type	Description
data	CometChatDetailsTemplate	Data model that serve as a starting point of the details component for a particular user

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) => ViewType>	User-defined Vue component to customise the secondary text shown in the default user profile.
customProfileView	Function as PropType<(user?: CometChat.User) => ViewType>	User-defined Vue component to customise user profile view.

Toggle profile view

Switch to hide or show the default user profile.

Name	Type	Description
hideProfile	boolean	When set to true, the user profile view will be hidden

Function callbacks

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

Name	Type	Description
onClose	Function as PropType<() => void>	Override the method that is invoked when user clicks on the close icon.
onError	Function as PropType<(error: CometChat.CometChatException) => void>	Override the method that is invoked when an error is encountered within the details component

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
listItemStyle	ListItemStyle	Styling properties and values of the ListItem component
detailsStyle	DetailsStyle	Styling properties and values of the Details component

Usage

Vue

//User with uid=kevin
const user = new CometChat.User("kevin");
user.setName("Kevin");

//Pass the user object to the details component
<CometChatDetails :user="user"></CometChatDetails>