component-agentic-layout

AgenticLayout Component Development

Agent application main layout: left-center-right three columns + header, used for the application shell and sidebar layout. When modifying the layout or header, implement directly according to the API and specifications in this skill, without needing to check the source code again.

Component API (self-contained)

AgenticLayoutProps

Property	Description	Type	Default
`left`	Left content	ReactNode	-
`center`	Center content (required)	ReactNode	-
`right`	Right content	ReactNode	-
`header`	Header configuration, see below	LayoutHeaderConfig	-
`style`	Custom styles, passed through to the root node (may include `minHeight` , etc.)	React.CSSProperties	-
`className`	Custom class name, concatenated with the root node `prefixCls`、`hashId` together	string	-
`leftWidth`	Left width (px)	number	256
`rightWidth`	Right width (px), can be changed by user dragging, subject to min/max limits	number	540
`minHeight`	Minimum height (type already declared, implementation can use `style.minHeight` to override the style default value)	string \| number	-
`children`	Child elements (for compatibility, content should preferably use `center`）	ReactNode	-

Note: the root node minimum height is fixed at 600px by the style; to customize, pass style={{ minHeight: '...' }}. Currently not read from props minHeight to the root node, just keep consistent with the type.

LayoutHeaderConfig (header configuration)

Property	Description	Type	Default
`title`	Title, supports text or React node	ReactNode	`'AI 助手'`
`showShare`	Whether to show the share button	boolean	false
`leftCollapsible`	Whether the left side can be collapsed (when not passed, inferred by AgenticLayout based on whether there is `left` )	boolean	-
`rightCollapsible`	Whether the right side can be collapsed (when not passed, inferred by AgenticLayout based on whether there is `right` )	boolean	-
`leftCollapsed`	Left collapsed state (controlled)	boolean	-
`rightCollapsed`	Right collapsed state (controlled)	boolean	-
`leftDefaultCollapsed`	Left default collapsed (uncontrolled)	boolean	false
`rightDefaultCollapsed`	Right default collapsed (uncontrolled)	boolean	false
`onLeftCollapse`	Left collapse callback	(collapsed: boolean) => void	-
`onRightCollapse`	Right collapse callback	(collapsed: boolean) => void	-
`onShare`	Share click	() => void	-
`leftExtra`	Additional content on the left side of the header, rendered on the same side as the title	ReactNode	-
`rightExtra`	Additional content on the right side of the header, rendered on the same side as the share/collapse buttons	ReactNode	-
`className`	Custom class name for the header root node	string	-

Collapse state: when there is leftCollapsed/rightCollapsed it is controlled; otherwise use leftDefaultCollapsed/rightDefaultCollapsed as the initial value, updated internally by useMergedState + onLeftCollapse/onRightCollapse . LayoutHeader internally uses I18n's locale['chatFlow.collapseLeft']、locale['chatFlow.collapseRight']、locale['chatFlow.share'] , etc. for text and aria-label.

Exports (library entry)

AgenticLayout：export { AgenticLayout }, type export interface AgenticLayoutProps
LayoutHeader：export { LayoutHeader }, type export type { LayoutHeaderConfig, LayoutHeaderProps }(LayoutHeaderProps is the same as LayoutHeaderConfig)

From @ant-design/agentic-ui can be destructured:AgenticLayout、AgenticLayoutProps、LayoutHeader、LayoutHeaderConfig、LayoutHeaderProps。

DOM and class name structure (BEM)

AgenticLayout

Root:prefixCls(default ant-agentic-layout）
Body:${prefixCls}-body(flex container)
Left sidebar:${prefixCls}-sidebar、${prefixCls}-sidebar-left, add when collapsed ${prefixCls}-sidebar-left-collapsed
Center area:${prefixCls}-main, content wrapped in ${prefixCls}-main-content; the header is rendered inside main, before content; main-content height is calc(100% - 48px) to reserve space for the header
Right sidebar container:${prefixCls}-sidebar-wrapper-right, inside is the drag handle + right sidebar
Drag handle:${prefixCls}-resize-handle、${prefixCls}-resize-handle-right(width 6px, highlighted on hover)
Right sidebar:${prefixCls}-sidebar、${prefixCls}-sidebar-right, add when collapsed ${prefixCls}-sidebar-right-collapsed
Sidebar content area:${prefixCls}-sidebar-content

Styles are registered via useAgenticLayoutStyle(prefixCls) , using the project's genStyleHooks and tokens (such as componentCls). The root node sets minHeight: 600px。

in the styles.

Root:prefixCls(default ant-layout-header）
Left area:${prefixCls}-left(includes collapse button, divider, title, leftExtra)
Title:${prefixCls}-left-title
Left divider:${prefixCls}-left-separator(between the collapse button and the title)
Right area:${prefixCls}-right(includes share button, collapse button, rightExtra)
Share button:${prefixCls}-right-share-btn

Styles are registered via useLayoutHeaderStyle(prefixCls) ; header height is 48px (minHeight), corresponding to the 48px of main-content.

Behavior and constants

Right sidebar: width can be adjusted by dragging. Minimum width MIN_RIGHT_WIDTH = 400(px), maximum width window.innerWidth * 0.7；rightWidth changes are synced to internal state; width is 0 when collapsed.
Left sidebar: width is controlled by leftWidth , default DEFAULT_LEFT_WIDTH = 256(px), no dragging; width is 0 when collapsed.
Default width of the right side：DEFAULT_RIGHT_WIDTH = 540（px）。
Header: uses LayoutHeader(from Components/LayoutHeader), passes in header and supplements leftCollapsible/rightCollapsible(when not passed, determined by whether there is left/right ). Header height 48px; drag handle width 6px.
Root node: in the styles minHeight: 600px, no prefixCls/classNames/styles and other Semantic pass-throughs, only style、className。

Development standards (consistent with AGENTS)

Use Ant Design Token and useAgenticLayoutStyle, support themes and responsiveness; use createStyles/token for styles, avoid hardcoded colors and sizes.
Concatenate class names with clsx ; when supporting classNames/styles , name according to the project's Semantic standards.
Props/event naming: use the Config suffix for configuration and the on prefix for events; use showXxx、xxxCollapsible、xxxCollapsed。
for booleans. The component is functional + Hooks; use React.memo to wrap and export the component; maintain backward compatibility and do not break existing props.
When composing with ChatLayout, Workspace, etc., keep the structure clear and avoid excessive nesting.

Simply modify the layout or header according to the above API, DOM structure, and standards; there is no need to rely on source code paths.