Chat 聊天气泡组件：左右对话与中间提示

为什么需要 Chat

有些内容天然更适合“对话”而不是“段落”来呈现。比如聊天记录、访谈摘录、角色扮演、产品对话稿，或者写一篇更轻松的技术笔记。

这个 Chat 组件做的事情很简单：把“我说的话”放在右侧，把“别人说的话”放在左侧，把时间和系统提示放在中间，用最少的结构换来比较完整的聊天质感。

效果预览

const items = [
  { role: "time", content: "2024-11-09 23:39:30" },
  { role: "self", content: "也许" },
  { role: "self", content: "我们可以聊聊天" },
  { role: "self", name: "纸鹿", content: "我还可以有名字" },
  { role: "system", content: "纸鹿撤回了一条消息" },
  { role: "other", name: "用户1", content: "有趣\n我学到了。" },
];

<Chat items={items} />

基础用法

组件只需要一个 items 数组。数组里的每一项都描述一条聊天内容或一条中间提示。

数据规则

items 里的每一项支持下面这些字段：

其中：

• self 会渲染到右侧，使用蓝色气泡
• other 会渲染到左侧，使用灰色气泡
• time 会渲染到中间，适合放时间戳
• system 也会渲染到中间，适合放撤回、改名、加入会话之类的提示

如果 content 是字符串数组，就会在同一组里连续渲染多个气泡；如果字符串里有换行，也会自动拆成多段文字。

Props 一览

核心实现

这个组件没有走复杂的插槽解析，而是直接把聊天内容收敛成结构化数据：

1. role 决定左右位置和中间提示样式
2. name 决定是否显示昵称
3. content 统一归一成数组，这样单条和多条消息共用一套渲染逻辑
4. 气泡内部再按换行拆成多个段落

这种写法对 MDX 更友好，因为在文章里维护一份聊天数据，通常比手写大量嵌套标签更轻松。

小结

Chat 组件适合放在“对话感”比较强的文章里。它不依赖额外库，也不要求客户端状态，只用 Astro 组件本身就能把聊天布局、昵称、时间和系统提示都整理好。后面如果你还想继续扩展头像、已读状态、引用消息，也可以在这个结构上接着加。