Chat bubble 聊天气泡
Chat 现在不再只是对 daisyUI 静态结构的薄封装。你可以使用Chat.Bubble这一套复合子组件，也可以直接通过message、author、timestamp、avatar与 items组织整条消息流。
Capability
单条消息语义化
根节点直接支持 message、author、timestamp、avatar 与 footer，不必先手写所有子结构。
Capability
items 数据驱动
items 支持 key、avatar 配置对象、typing、bubbleClassName 与别名字段，适合消息流。
Capability
复合组件保持
Chat.Bubble、Chat.Header、Chat.Footer、Chat.Image 仍然存在。
Capability
Typing 与快捷头像
Chat.Bubble 和 Chat 本体都能声明 typing；Chat.Image 也支持 src 快捷写法。
# 语义化单条消息
根节点直接描述一条消息：头像、作者、时间、正文与脚注都可以作为 props 传入。
AI
Rue Agent
构建完成，我已经把 lint 与 Chat 单测跑过一遍。
You
把基础示例 也整理进新的 API 页面里。
# Typing 与自定义头像
typing 可以直接挂在 Chat 或 Chat.Bubble 上；avatar 配置对象适合放团队缩写、状态徽记或品牌头像。
OPS
Deploy Agent
正在整理日志摘要
Release Bot
# Chat items 作为消息流
items 适合后台消息中心、智能助手对话和审批日志，支持 key、typing 与 avatar 配置对象。
推荐心智：
Chat 负责布局与数据驱动，Chat.Bubble 负责局部精修。Rue Agent
我把基础示例，只把结构收敛进更清晰的 API。
You
展示基础场景，把新 API 讲清楚。
QA
正在等待截图比对
# chat-start and chat-end
最基础的左右朝向布局。
It's over Anakin,
I have the high ground.
I have the high ground.
You underestimate my power!
# Chat 通过数据渲染（数组）
展示手动 map 的写法，适合需要在单条消息附近插入额外逻辑时使用。
It's over Anakin, I have the high ground.
You underestimate my power!
Obi-Wan Kenobi
You were the Chosen One!
Anakin
I hate you!
What kind of nonsense is this
You have been given a great honor.
# Chat 通过数据渲染（数组，组件内部）
展示组件内部 items 渲染方式，适合完整消息流由上层统一组织时使用。
It's over Anakin, I have the high ground.
You underestimate my power!
Obi-Wan Kenobi
You were the Chosen One!
Anakin
I hate you!
What kind of nonsense is this
# Chat with image
展示头像消息列表场景，但用 Chat.Image 的 src 快捷写法减少样板代码。
It was said that you would, destroy the Sith, not join them.
It was you who would bring balance to the Force
Not leave it in Darkness
# Chat with image, header and footer
头像、头部与脚注都齐全时，适合聊天记录、客服或系统通知列表。
Obi-Wan Kenobi
You were the Chosen One!
Anakin
I hate you!
# Chat with header and footer
没有头像时，作者名与时间仍然可以通过 Chat.Header 组织。
Obi-Wan Kenobi
You were my brother, Anakin.
Obi-Wan Kenobi
I loved you.
# Chat Bubble with colors
展示所有气泡颜色场景，用来说明 color 仍然是最直接的视觉控制层。
What kind of nonsense is this
Put me on the Council and not make me a Master!??
That's never been done in the history of the Jedi.
It's insulting!
Calm down, Anakin.
You have been given a great honor.
To be on the Council at your age.
It's never happened before.
API
Chat 现在分成三层心智：根节点的消息语义 props、items 的数据驱动消息流，以及复合子组件的局部结构控制。
Chat Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
author / headerName | 单条消息的作者名别名，若未传 header 则会和时间一起自动组装头部。 | any | - |
avatar | 头像节点或配置对象；可直接传入自定义内容、src、alt 与 bodyClassName。 | any | ChatAvatarConfig | - |
avatarSrc / imageSrc | 头像图片地址别名；不再需要手写 Chat.Image 的内部结构。 | string | - |
bubbleClassName | 仅追加到 chat-bubble 的类名。 | string | - |
children | 提供组合式用法，可继续手写 Chat.Bubble、Chat.Header 等子结构。 | any | - |
className | 追加到当前 chat 根节点；items 模式下会透传给每一项。 | string | - |
color | 消息气泡颜色，会映射到 chat-bubble-* 语义类。 | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | - |
footer / footerClassName | 消息脚注与脚注区域类名。 | any / string | - |
header / headerClassName | 整块头部内容与头部区域类名；设置后优先级高于 author 与 timestamp。 | any / string | - |
items | 数据驱动入口，适合渲染完整消息流。 | ReadonlyArray<ChatDataItem> | - |
message / text | 消息正文别名；message 更适合作为推荐写法。 | any | - |
placement | 消息朝向，控制 start 与 end 布局。 | 'start' | 'end' | 'start' |
timestamp / headerTime | 消息时间别名，自动包裹为 time 元素。 | any | - |
typing / typingIndicator | 开启 typing 态，或用自定义节点替换默认 loading dots。 | boolean / any | false / - |
ChatDataItem
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
key | 列表项稳定 key；不传时会回退到索引。 | string | number | index |
placement | 当前消息方向。 | 'start' | 'end' | 'start' |
avatar / avatarSrc / imageSrc | 支持配置对象、自定义节点和图片地址别名。 | any | - |
author / headerName | 作者名别名。 | any | - |
timestamp / headerTime | 时间别名。 | any | - |
message / text | 消息正文别名。 | any | - |
color / bubbleClassName | 控制单条消息的气泡颜色与气泡类名。 | BubbleColor / string | - / - |
footer / footerClassName | 控制单条消息的脚注及样式。 | any / string | - / - |
typing / typingIndicator | 控制单条消息的 typing 态与自定义指示器。 | boolean / any | false / - |
className | 追加到当前消息根节点。 | string | - |
Compound Parts
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
Chat.Bubble.color | 给气泡追加 chat-bubble-* 色彩类。 | BubbleColor | - |
Chat.Bubble.typing | 直接把单个气泡切到 typing 态。 | boolean | false |
Chat.Header.author / time | 头部子组件的快捷作者与时间写法。 | any / any | - / - |
Chat.Image.src / alt | 头像子组件的快捷图片写法。 | string / string | - / chat image |
Chat.Image.bodyClassName | 控制默认头像容器，如尺寸、圆角或边框。 | string | w-10 rounded-full |
Chat.Footer.className | 脚注区域的附加类名。 | string | - |