> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.