| name | component-chat-layout |
| description | Develop ChatLayout (header, content, footer) for chat UI in @ant-design/agentic-ui. Use when building chat page layout, message area, or input footer. Triggers on ChatLayout, chat layout, header content footer, chat page. |
ChatLayout 组件开发
聊天界面布局:头部、内容区、底部固定区域(如输入框)。
源码位置
- 主组件:
src/ChatLayout/index.tsx
- 类型:
src/ChatLayout/types.ts(ChatLayoutProps、ChatLayoutRef)
- 子组件:
FooterBackground 等见 src/ChatLayout/components/
主要能力
- 头部(标题、折叠、分享等)、内容区(BubbleList 等)、底部固定
useAutoScroll、useElementSize 等 Hooks 配合
- ref 暴露方法见
ChatLayoutRef
开发规范
- 样式使用
createStyles 与 token;支持 classNames/styles。
- 与 Bubble、MarkdownInputField、History 等组合时保持结构一致。
修改聊天布局时,参考 src/ChatLayout/ 与 AGENTS.md。