Message Header

This component contains relevant information relevant to the chat conversation.

It includes the following elements and functionalities:

1. User or Group Information: This displays name of the user or the group with whom the user is conversing. It indicates the online presence of the user showing a green dot. It also includes the avatar of the user or the group. It also displays the number of participants in case of a group.
2. Typing events: Typing events appear as a “typing” indicator next to the name or profile picture of the person who is typing. The indicator takes an ellipsis (”…”) form.
3. Menu: It includes various actions related to the chat like buttons viewing the additional information or starting a video call.

Properties

Chat Information

Details associated with a chat conversation or chat participants.

Name	Type	Description
user	User Class	View details of this particular CometChat user
group	Group Class	View details of this particular CometChat group

Asset URLs

Custom asset URL used for graphical representation

Name	Type	Description
backButtonIconURL	string	Asset URL for the back button
privateGroupIcon	string	Asset URL for the icon representing private groups
protectedGroupIcon	string	Asset URL for the icon representing password protected groups

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.
listItemView	Function as PropType<(user?: CometChat.User, group?: CometChat.Group) => ViewType>	User-defined component to customise user profile view.

Actions

UI component created and customised by the developer to meet your design or functional requirements representing the chat actions.

Name	Type	Description
menu	view	User-defined component to showcase options related to the chat like buttons viewing the additional information or starting a video call.

Toggle

Switch to hide or show the default user profile.

Name	Type	Description
hideBackButton	boolean	When set to true, will hide the back button
disableTyping	boolean	When set to true, Users will not be able to see if the chat participants are actively composing a response.
disableUsersPresence	boolean	When set to true, Users will not be able to see whether a particular user is currently online or offline.

Function callbacks

Name	Type	Description
onBack	Function as PropType<() => void>	Override the method that is invoked when when user clicks on the back button.
onError	Function as PropType<(error: CometChat.CometChatException) => void>	Override the method that is invoked when an error is encountered within the 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
messageHeaderStyle	MessageHeaderStyle	Styling properties and values of the MessageHeader component

Usage

Vue

//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
<CometChatMessageHeader :group="group"></CometChatMessageHeader>