# Chat Header Bar

A navigation header designed for conversation screens. It automatically shows the other participant's name and avatar based on who's logged in — so you don't need to add any conditional logic to figure out "who am I talking to?"

***

## Before You Begin

* Your conversation screen should have access to the conversation record — including User 1 ID, User 1 Name, User 1 Image, User 2 Name, and User 2 Image.
* If your conversations include group chats, have a Group Name and Group Image URL field available on the conversation record.

***

## Getting Started

1. Add the **Chat Header Bar** to your conversation screen and resize it to span the full width.
2. Set **Logged In User ID** to **Logged In User > ID** using Magic Text.
3. Set **User 1 ID** to the conversation's User 1 ID field using Magic Text.
4. Fill in **User 1 Name**, **User 1 Image URL**, **User 2 Name**, and **User 2 Image URL** from the conversation record.
5. For group conversations, set **Group Name** and **Group Image URL** — when Group Name is filled in, it overrides the user name logic and shows the group info instead.
6. Set up the **Left Button Action** — typically a "Go Back" action to return to the conversation list.
7. Optionally set up the **Right Button Action** — typically navigates to a "Chat Group Info" screen or another details page.

***

## Settings

### Left Button

* **Icon** — The icon shown on the left side. Defaults to a back arrow (`arrow-back`).
* **Icon Color** — The color of the left button icon.
* **Icon Size** — Icon size in pixels (14–36, default: 24).

### Right Button

* **Show Right Button** — Toggle off to hide the right button entirely (useful for 1-on-1 chats where you don't need an info screen).
* **Icon** — The icon shown on the right side. Defaults to `info`.
* **Icon Color** — The color of the right button icon.
* **Icon Size** — Icon size in pixels (14–36, default: 24).

### Name & Avatar

* **Name & Avatar Position** — Align the participant name and avatar to the **Left**, **Center**, or **Right** of the header.
* **Font Size** — The participant name font size (12–24, default: 17).
* **Font Weight** — Light, Regular, Medium, Semi Bold, or Bold.
* **Name Color** — The color of the participant's name.
* **Avatar Size** — The diameter of the avatar image (24–56, default: 36).

### Bar Style

* **Background Color** — The header background. Defaults to white.
* **Height** — The overall height of the header bar.
* **Show Bottom Border** — Toggle on to show a hairline separator at the bottom of the bar.
* **Border Color** — The color of the bottom border.

***

## Actions

* **Left Button Action** — Fires when the left button (back arrow) is tapped. Typically a **Go Back** action.
* **Right Button Action** — Fires when the right button is tapped. Typically navigates to a group info or profile screen.

***

## How Participant Detection Works

The component compares **User 1 ID** to **Logged In User ID**. If they match, it displays User 2's name and avatar. If they don't match, it displays User 1's name and avatar. If **Group Name** is set, it always uses that instead — regardless of the user ID logic.

***

## Tips

* If you're using the **Conversation List** component, it exposes **Display Name** and **Display Image URL** as Magic Text outputs — you can pass these between screens to avoid extra database lookups on the conversation screen.
* Toggle **Show Right Button** off for simple 1-on-1 chats where there's no group info screen.
* Use **Name & Avatar Position > Center** for an iOS Messages-style look, or **Left** for a more compact layout with longer names.
* Place this component at the very top of your conversation screen with a fixed height so it doesn't overlap the message list below it.

***

## Need Help?

Visit [forum.adalo.com](https://forum.adalo.com/) to ask questions or share what you've built.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/component-basics/marketplace-components/chat-suite/chat-header-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.