PDS proposals
← All proposals

Chat Panel

A layout shell for the content of an AI chat drawer or docked side panel.

Net-new componentOpen in Storybook

proposals/ChatPanel/context.md36 lines · View on GitHub

Chat Panel

Status: ready for dev (2026-10-20). See HANDOFF.md. Not checked by eye in light and dark; the a11y panel has not been run.

Problem

The AI chat surface (the "chat drawer" in the reference screenshot) has no shared shell. Each screen would lay out the header, context rows, view switch, conversation and composer by hand, and the pieces already proposed here (Chat Input, Chat Message, Chat Attachment, Suggestion Card, Agent Avatar, Identity Block) have nowhere to sit together. The teams also keep changing what goes in each part, so the frame has to stay fixed while the contents change.

Proposal

A layout shell for the content of an AI chat drawer or docked side panel. It owns the frame only: a column of a preset width (size: m 25rem default, l 37.5rem, the Drawer widths) that fills its container's height, a title row with a close button, a pinned header, a scrolling content area and a pinned footer. Everything inside a region is a slot the team fills. Net-new (PDS has no such component). It is the content, not the overlay: place it inside a drawer or dock it beside the page.

Region Prop In the reference screenshot
Title row title (+ built-in close button) Agent identity (Agent Avatar, name, "Pantheon AI")
Header header Summary strip, context rows, view switch
Content children Empty state, or the conversation
Footer footer Drop zone and Chat Input (the composer)

Each region is optional. Inline padding of the header, content and footer is switched to bleed (none) per region, so a tab bar or a divider can run edge to edge. Dividers under the header and above the footer are booleans.

Source

Screenshot of the existing AI chat drawer and a slot wireframe (title, header, content area, footer), shared by the designer (2026-10-19).

Constraints

  • Reuse PDS v2 first: the package CloseButton, plus the local Identity Block, Chat Input, Chat Message and the rest in stories.
  • Tokens only, light and dark, keyboard operable, visible focus.
  • The content scrolls; title row, header and footer stay pinned.
  • Fills its container's height (height: 100%); the width comes from size.

Open questions

See decisions.md.