ChatPanel

ChatPanel is the chat kit's shell: a header with title, icon, and actions, plus a column that hosts the transcript and composer. It must live inside a ChatProvider, which drives its visibility.

<ChatProvider onSend={handleSend}>
  <ChatLauncher />
  <ChatPanel $title="AI Assistant">
    <Transcript />
    <ChatInput />
  </ChatPanel>
</ChatProvider>

Variants

drawer (default) - a fixed side panel that slides in from $side. From the lg breakpoint up it is a 420px-wide complementary panel that leaves the page interactive; below lg it covers the viewport and behaves as a modal dialog.
inline - a normal flow-sized container, always visible, no dialog semantics. The app controls its size and presence; the provider's isOpen is ignored.
fullscreen - fills the viewport and is always modal while open.

Whenever the panel is modal, the kit takes care of the dialog contract: role="dialog" with aria-modal, Escape to close, a focus trap, siblings marked inert, and body scroll locking (via the exported useLockBodyScroll hook). Overlay panels are hidden with inert and aria-hidden while closed, and focus is handed to the composer on open and restored to the opener on close.

Properties

$variant"drawer" | "inline" | "fullscreen"

The shell form. Defaults to "drawer".

$side"left" | "right"

Which edge the drawer docks to. Defaults to "right".

$widthnumber

Drawer width in pixels from the lg breakpoint up. Defaults to 420.

$titleReact.ReactNode | null

Header title. Defaults to "AI Assistant". Pass null for no title; the header disappears entirely when there is no title, no actions, and no close button.

$titleIconIconProps | null

Lucide icon before the title. Defaults to "Sparkles"; pass null for none.

$actionsReact.ReactNode

Extra header controls - a reset button, say - placed before the close button.

$hideCloseButtonboolean

Hides the built-in close button on overlay variants.

aria-labelstring

Accessible name for the panel. Defaults to the $title string.

The component also accepts all native <div> attributes and forwards its ref to the root element. The library exports the ChatPanelVariant type.

A reset action pairs naturally with the header: $actions={<IconButton onClick={reset} aria-label="New chat"><Icon name="RotateCcw" /></IconButton>} with reset from useChat().

View Source