← 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/custom.md27 lines · View on GitHub

Custom and net-new: Chat Panel

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.

Net-new components

  • .pds-chat-panel — layout shell for an AI chat drawer or docked panel: title row with close button, pinned header, scrolling content, pinned footer. Every region is a slot.
    • Parts and modifiers: .pds-chat-panel--m, .pds-chat-panel--l, .pds-chat-panel__body, .pds-chat-panel__drop, .pds-chat-panel__drop-icon, .pds-chat-panel__content--fade, .pds-chat-panel__drop-label, .pds-chat-panel__end, .pds-chat-panel__scroll, .pds-chat-panel__scroll-button, .pds-chat-panel__title-row, .pds-chat-panel__title, .pds-chat-panel__close, .pds-chat-panel__header, .pds-chat-panel__content, .pds-chat-panel__footer, .pds-chat-panel__header--divider, .pds-chat-panel__footer--divider, .pds-chat-panel__header--inset-default, .pds-chat-panel__content--inset-default, .pds-chat-panel__footer--inset-default
    • Also emitted, with no CSS rule (none is the absence of padding): .pds-chat-panel__header--inset-none, .pds-chat-panel__content--inset-none, .pds-chat-panel__footer--inset-none

Additions to existing PDS components

None. The close button is the package CloseButton, unchanged.

Net-new props

All props of ChatPanelProps are new (net-new component): size, dropLabel, onFilesDrop, hasContentFade, hasScrollToLatest, scrollToLatestLabel, contentInset, footerInset, headerInset, hasHeaderDivider, hasFooterDivider, header, footer, title, closeButtonLabel, hasCloseButton, onClose.

Custom CSS variables

  • --chat-panel-fade-height — set on .pds-chat-panel__content--fade; how far the bottom fade reaches (--pds-spacing-2xl), and the bottom padding that keeps the last line clear.
  • --chat-panel-inset — set on .pds-chat-panel; the inline padding of the title row and of regions with default inset (--pds-spacing-l, --pds-spacing-xl from the m breakpoint, as the PDS Panel).

Raw values kept on purpose

None.