聊天消息页
Chat / Messaging
别名:聊天页聊天消息页私信页对话页消息窗口聊天界面发消息的页面会话列表
这是什么
以对话为单位组织消息的页面：左侧会话列表按最新消息排序，右侧线程区按时间正序铺气泡， 底部输入框承担发送与附件，顶部显示对方状态与操作。 它把异步沟通的上下文留在同一条线程里，适合客服、社区与团队协作场景。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 需要一对一会话或小组实时沟通
- 消息要保留上下文并能回看历史
- 客服、社区或团队协作的持续对话
✕ 不适用场景
- 只是单向广播或公告（用通知中心或横幅）
- 内容需要结构化比对（用表格或看板）
- 少于三条消息的临时确认（用内联提示即可）
常见形式
分栏会话
Split View
会话列表 + 线程，桌面主形态
单线程
Focused Thread
只显示当前对话，移动端常用
气泡流
Bubble Stream
群聊式连续气泡，强调发言者
页面结构
- 01
会话列表
头像、名称、最后一条摘要与未读徽标，按最新消息排序。
- 02
会话头
对方名称、在线状态与更多操作，移动端可返回列表。
- 03
消息气泡
左右区分己方对方，尾部带时间与已读状态。
- 04
日期分隔
按天插入分隔，避免长线程失去时间感。
- 05
输入区
多行输入 + 附件 + 发送按钮，回车发送可配置。
实现要点
flexgridoverflow-y: autooverflow-anchor: auto左右两列用 grid-cols-[280px_1fr]，移动端折叠为单列并让线程占满。线程区正向排列、 发送后滚动到底（scrollIntoView），历史加载保持滚动位置锚定。气泡最大宽度约 72%， 输入框用 textarea 自动增高；乐观发送先插入本地气泡，失败再标记重发。
相关概念
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件包含组件以圆形或圆角方形小图代表用户或组织：照片、姓名首字母或图标占位。 常与姓名一起出现在导航、评论与成员列表，可附在线状态点或多人叠加。
组件包含组件附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件包含组件用"滚动到底自动追加下一页"取代传统分页：用户持续下滑，新内容不断出现， 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮，注意力始终停留在内容流上，长列表被拆成一次次无感的追加。
交互模式使用模式用户操作后立即按"预计成功"更新界面，真实请求在后台进行，成功则落定， 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感，特别适合点赞、收藏这类高频轻操作。
交互模式使用模式