ChatHeader

Top bar of a chat surface, above AgentChat. title is the conversation name and truncates instead of wrapping; subtitle is the quiet second line, for example the model and the workspace. leftSection holds the leading controls (a sidebar toggle, a back button), secondarySection the badges and connection state, rightSection the panel buttons, menus and a ContextUsage. In a container narrower than 30rem the subtitle and the secondary section are hidden so the title and the right section keep their room; pass collapseSecondary={false} to keep them. The header takes its height from --ae-panel-header-height, so it lines up with the other panel headers of a layout, and withBorder={false} removes the line under it. titleOrder sets the heading level (2 by default).

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
Wide
Narrow
API reference
Prop
Type
Required
title
React.ReactNode
Yes
Name of the conversation, truncated instead of wrapping
subtitle
React.ReactNode
No
Second line under the title, for example the model or the workspace; dropped when narrow
leftSection
React.ReactNode
No
Before the title: a back button, a sidebar toggle, an avatar
secondarySection
React.ReactNode
No
Next to the title: badges, connection state, context usage; dropped when narrow
rightSection
React.ReactNode
No
At the end: panel buttons, menus, anything that must stay reachable at any width
titleOrder
1 | 2 | 3 | 4 | 5 | 6
No
Heading level of the title, `2` by default
withBorder
boolean
No
Draws the line under the header, `true` by default
collapseSecondary
boolean
No
Hides the subtitle and the secondary section in a narrow container, `true` by default
labels
Partial<ChatHeaderLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element