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 (
noneis the absence of padding):.pds-chat-panel__header--inset-none,.pds-chat-panel__content--inset-none,.pds-chat-panel__footer--inset-none
- Parts and modifiers:
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 withdefaultinset (--pds-spacing-l,--pds-spacing-xlfrom thembreakpoint, as the PDS Panel).
Raw values kept on purpose
None.