> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Header

> Message Header — CometChat documentation.

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](/sdk/javascript/user-management#user-class) | View details of this particular CometChat user  |
| group | [Group Class](/sdk/javascript/create-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](/web-elements/avatar#avatar-style)       | Styling properties and values of the [Avatar](/web-elements/avatar) component                    |
| statusIndicatorStyle | [StatusIndicator](/web-elements/status-indicator)      | Styling properties and values of the [StatusIndicator](/web-elements/status-indicator) component |
| listItemStyle        | [ListItemStyle](/web-elements/list-item#listitemstyle) | Styling properties and values of the [ListItem](/web-elements/list-item) component               |
| messageHeaderStyle   | [MessageHeaderStyle](/web-shared/messageheaderstyle)   | Styling properties and values of the [MessageHeader](/ui-kit/vue/message-header) component       |

## Usage

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    //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>
    ```
  </Tab>
</Tabs>