Component Chat Layout

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.

antdigital-ai fa245da 1021 B Updated

File contents

ChatLayout 组件开发

聊天界面布局:头部、内容区、底部固定区域(如输入框)。

源码位置

  • 主组件:src/ChatLayout/index.tsx
  • 类型:src/ChatLayout/types.ts(ChatLayoutProps、ChatLayoutRef)
  • 子组件:FooterBackground 等见 src/ChatLayout/components/

主要能力

  • 头部(标题、折叠、分享等)、内容区(BubbleList 等)、底部固定
  • useAutoScrolluseElementSize 等 Hooks 配合
  • ref 暴露方法见 ChatLayoutRef

开发规范

  • 样式使用 createStyles 与 token;支持 classNames/styles
  • 与 Bubble、MarkdownInputField、History 等组合时保持结构一致。

修改聊天布局时,参考 src/ChatLayout/AGENTS.md

antdigital-ai/agentic-ui/tree/main/.cursor/skills/component-chat-layout commit fa245da093

Frequently asked questions

npx skillmds@latest add antdigital-ai/component-chat-layout