Message Header
This component contains relevant information relevant to the chat conversation.
It includes the following elements and functionalities:
- 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.
- 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.
- 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>