Header

The header is the panel’s top row: who the assistant is, which page it is on, and the buttons that act on the panel. The footer is an optional row at the bottom.

Usage

Header with no children renders its default. With children, it renders those. This header names the assistant and keeps only the devtools and Close:

<AssistedPanel.Sheet>
  <AssistedPanel.Main>
    <AssistedPanel.Header>
      <AssistedPanel.Icon>
        <ShopLogo />
      </AssistedPanel.Icon>
      <AssistedPanel.Title>Shop assistant</AssistedPanel.Title>
      <AssistedPanel.Devtools>
        <AssistedDevtoolsPanel />
      </AssistedPanel.Devtools>
      <AssistedPanel.Close />
    </AssistedPanel.Header>
    <AssistedPanel.Conversation />
    <AssistedPanel.Composer />
  </AssistedPanel.Main>
</AssistedPanel.Sheet>

What the model sees

Nothing. PageLine reads the open page’s name, and no part lends anything.

Parts

Part	Kind	Renders
AssistedPanel.Header	Container	A 40 px row. In a floating panel it is the drag handle, and a double-click maximizes.
AssistedPanel.Footer	Container	A row with a top border. Nothing without children.
AssistedPanel.Icon	Container	Its children, else the root’s icon, else the assistant’s logo.
AssistedPanel.Title	Container	Its children, else the root’s title, else “Assistant”.
AssistedPanel.PageLine	Container	Its children, else “On” and the open page’s name, else the root’s description. Nothing when all are empty.
AssistedPanel.Close	Leaf	Closes the panel.
AssistedPanel.Devtools	Leaf	A Bug button that opens its children, else the root’s devtools, in a window of their own. Nothing without either.

Default composition

Header with no children renders, in order:

1. Icon, or ThreadDrawerToggle when threads="drawer".
2. Title and PageLine, or ThreadTitle and PageLine when threads="drawer".
3. ThreadMenu when threads is true or "menu".
4. NewThread when threads is true, "menu" or "drawer".
5. ConversationSearchToggle.
6. Devtools.
7. WindowControls in a floating panel with windowControls on.
8. Close, except in an embedded panel.

Footer has no default. The embedded root’s Main has no header, and threads="side" places no thread part in the header.

Props

Part	Props
Header, Footer, Icon, Title, PageLine	className, children
Devtools	className, children: the devtools to open
Close	A button’s props and asChild

With asChild, Close renders your element in place of its icon button and keeps its behavior. Devtools has no asChild: its children are the devtools.

The devtools window is 760 by 520 px in the top-left corner, dragged and resized like the panel. The Bug button or the window’s Close shuts it.

See also

• Threads for the thread parts the default header places.
• Mount the devtools.