#ChatLayout - 对话流容器组件

该组件提供了一个完整的对话流容器，包含头部区域、内容区域和底部区域。

#基础用法

含左侧 History、头部、消息区与底部任务条，贴近完整产品布局。

完整产品布局 - 侧栏 + 头部 + 消息流 + 任务条

查看代码

#无主栏 · 固定高度

无会话侧栏，父级给定高度即可；适合嵌入设置抽屉、弹层或分栏右侧等场景。

无主栏 · 固定高度嵌入

查看代码

#带 Markdown 输入框

底部使用 MarkdownInputField，scrollBehavior 为 auto。

带输入框

查看代码

#底部最小高度

通过 footerHeight 为多行输入等较高的 footer 预留最小高度，避免内容被遮挡。

footerHeight 与多行底部

查看代码

#滚动状态监听

使用 onScrollStateChange 的 isPinned 控制「回到底部」浮动按钮；与流式追加消息配合时常用。

滚动状态与回到底部

查看代码

#关闭底部背景动效

showFooterBackground={false}，仅保留底部操作区。

关闭底部背景动效

查看代码

#API 参考

#ChatLayoutProps

#ChatLayoutClassNames

用于自定义组件各部分的类名。

#ChatLayoutStyles

用于自定义组件各部分的内联样式。

#LayoutHeaderConfig

折叠按钮支持「受控（leftCollapsed / rightCollapsed）」与「非受控（leftDefaultCollapsed / rightDefaultCollapsed）」两种模式。

#ChatLayoutScrollState

onScrollStateChange 的回调参数，描述滚动容器当前的两种相关状态。isAtBottom 是几何距离的判定，isPinned 反映用户意图——区别在于：用户主动上滑离开底部时 isAtBottom 立即为 false，但 isPinned 在用户回到底部前都保持 false，可用来稳定地控制「回到底部」浮动按钮的显隐。

#ChatLayoutRef

通过 ref 可以访问以下方法和属性：

#设计理念

1. 组件需要父容器有明确的高度才能正常显示
2. 内容区域支持自动滚动，建议配合虚拟滚动使用大量数据
3. 所有按钮都支持键盘导航和屏幕阅读器
4. 头部折叠状态由 LayoutHeaderConfig 提供受控（leftCollapsed / rightCollapsed）与非受控（leftDefaultCollapsed / rightDefaultCollapsed）两套接口
5. 通过 ref 可以访问滚动容器和手动控制滚动行为
6. 底部背景动效默认开启，可通过 showFooterBackground 控制
7. 支持通过 classNames 和 styles 精细化定制各部分样式