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
NameTypeDescription
userCometChat.UserView details of this particular CometChat user

​
Title

Title for the component
NameTypeDescription
titlestringHeading text for the component

​
Icon URLs

Custom asset URL used for graphical representation
NameTypeDescription
closeButtonIconURLstringAsset URL for the close icon

​
Disable user presence

Turn off the visibility of a user’s online status in the chat
NameTypeDescription
disableUsersPresencebooleanWhen 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.
NameTypeDescription
dataCometChatDetailsTemplateData 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.
NameTypeDescription
subtitleViewFunction as PropType<(user?: CometChat.User) => ViewType>User-defined Vue component to customise the secondary text shown in the default user profile.
customProfileViewFunction 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.
NameTypeDescription
hideProfilebooleanWhen 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.
NameTypeDescription
onCloseFunction as PropType<() => void>Override the method that is invoked when user clicks on the close icon.
onErrorFunction 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
NameTypeDescription
avatarStyleAvatarStyleStyling properties and values of the Avatar component
statusIndicatorStyleStatusIndicatorStyling properties and values of the StatusIndicator component
listItemStyleListItemStyleStyling properties and values of the ListItem component
detailsStyleDetailsStyleStyling properties and values of the Details component

​
Usage

//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>