Chat header

The bar above a thread: a title you rename in place, the model, a Temporary badge, Share and a More menu, plus the sidebar toggle on mobile.

Markdown

On this page

Editable title, model, Temporary badge, Share, More and the sidebar toggle.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/chat-header.json

Usage

tsx

import { ChatHeader } from "@/components/ui/chatcn/chat-header"
import { MenuItem } from "@/components/ui/chatcn/menu"
import { ModelPicker } from "@/components/ui/chatcn/model-picker"

<ChatHeader
  title={thread.title}
  onTitleChange={(title) => rename(thread.id, title)}
  model={<ModelPicker models={models} value={model} onValueChange={setModel} size="sm" />}
  onShare={share}
  menu={<MenuItem onClick={archive}>Archive</MenuItem>}
/>

Pass it to Chatbot as header, or put it at the top of the thread in a ChatLayout. On mobile it shows the sidebar toggle and, with onNewChat, a New chat button. Set bordered once the thread scrolls under it.

Props

Prop	Type	Notes
`title`, `placeholder`	`string`	Placeholder defaults to New chat
`onTitleChange`	`(title) => void`	Makes the title editable
`editable`	`boolean`	Force editing on or off
`model`	`ReactNode`	Usually a small `ModelPicker`. Hidden below 640 px
`temporary`, `temporaryDescription`		The Temporary badge and its tooltip
`onShare`	`() => void`	Labelled on desktop, icon-only on phones
`menu`	`ReactNode`	`MenuItem`s for More
`actions`	`ReactNode`	Extra controls before Share
`sidebarToggle`	`"auto" \| boolean`	`auto` shows it on mobile in a `ChatLayout`
`onSidebarToggle`	`() => void`	For use outside a `ChatLayout`
`onNewChat`	`() => void`	New chat next to the toggle
`bordered`	`boolean`	Bottom hairline

Keyboard

Key	Action
`Enter` on the title	Rename
`Enter` in the field	Save
`Esc` in the field	Cancel

Accessibility

The title is the page h1. As a button it is named Rename chat with the title.
The Temporary badge is focusable so keyboard users can read its tooltip.
The sidebar toggle carries aria-controls, aria-expanded and aria-keyshortcuts.

Motion

A new title fades in once over 200 ms. The bottom hairline fades in over 150 ms.