CometChatDetails is a component that provides additional information and settings related to a specific group. The details screen includes the following elements and functionalities:
  1. Group Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
  2. Group Chat Features: It provides additional functionalities for managing the group. This includes options to add or remove participants, assign roles or permissions, and view group-related information.
  3. Group Actions: This offers actions related to the group, such as leaving the group, or deleting the group.

​
Properties

​
Group

You can view details of this particular group
NameTypeDescription
groupCometChat.GroupView details of this particular CometChat group

​
Title

Title for the component
NameTypeDescription
titlestringHeading text for the component

​
Asset URLs

Custom asset URL used for graphical representation
NameTypeDescription
privateGroupIconstringAsset URL for the icon representing private groups
protectedGroupIconstringAsset URL for the icon representing password protected groups
closeButtonIconURLstringAsset URL for the close icon

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

​
Configurations

NameTypeDescription
groupMembersConfigurationGroupMembersConfigurationConfigurable properties of the CometChatGroupMembers component
addMembersConfigurationAddMembersConfigurationConfigurable properties of the CometChatAddMembers component
bannedMembersConfigurationBannedMembersConfigurationConfigurable properties of the CometChatBannedMembers component
transferOwnershipConfigurationTransferOwnershipConfigurationConfigurable properties of the CometChatTransferOwnership 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
leaveDialogStyleConfirmDialogStyleStyling properties and values of the ConfirmDialog component
detailsStyleDetailsStyleStyling properties and values of the Details component

​
Usage

//Group with guid=hello_group
const GUID = "hello_group";
const groupName = "Hello Group!";
const groupType = CometChat.GROUP_TYPE.PUBLIC;
const password = "";

var group = new CometChat.Group(GUID, groupName, groupType, password);

//Pass the user object to the details component
<CometChatDetails [group]="group"></CometChatDetails>