59 lines
2.0 KiB
Plaintext
59 lines
2.0 KiB
Plaintext
|
---
|
|||
|
|
title: 消息线程
|
|||
|
|
description: 组合滚动容器、消息布局与气泡，同时保护用户阅读历史消息的位置。
|
|||
|
|
order: 32
|
|||
|
|
toc:
|
|||
|
|
- id: structure
|
|||
|
|
title: 组件结构
|
|||
|
|
- id: messages
|
|||
|
|
title: 渲染消息
|
|||
|
|
- id: ownership
|
|||
|
|
title: 状态归属
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 组件结构 {#structure}
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import {
|
|||
|
|
MessageScroller,
|
|||
|
|
MessageScrollerButton,
|
|||
|
|
MessageScrollerContent,
|
|||
|
|
MessageScrollerItem,
|
|||
|
|
MessageScrollerProvider,
|
|||
|
|
MessageScrollerViewport,
|
|||
|
|
} from "@workspace/ui/components/message-scroller"
|
|||
|
|
|
|||
|
|
export function Thread({ messages }: { messages: ChatMessage[] }) {
|
|||
|
|
return (
|
|||
|
|
<MessageScrollerProvider>
|
|||
|
|
<MessageScroller className="h-[32rem]">
|
|||
|
|
<MessageScrollerViewport>
|
|||
|
|
<MessageScrollerContent className="gap-5 p-4">
|
|||
|
|
{messages.map((message, index) => (
|
|||
|
|
<MessageScrollerItem
|
|||
|
|
key={message.id}
|
|||
|
|
messageId={message.id}
|
|||
|
|
scrollAnchor={index === messages.length - 1}
|
|||
|
|
>
|
|||
|
|
<ChatMessageRow message={message} />
|
|||
|
|
</MessageScrollerItem>
|
|||
|
|
))}
|
|||
|
|
</MessageScrollerContent>
|
|||
|
|
</MessageScrollerViewport>
|
|||
|
|
<MessageScrollerButton />
|
|||
|
|
</MessageScroller>
|
|||
|
|
</MessageScrollerProvider>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 渲染消息 {#messages}
|
|||
|
|
|
|||
|
|
在 `ChatMessageRow` 中使用 `Message`、`MessageAvatar`、`MessageContent`、`MessageHeader` 和 `MessageFooter` 表达参与者结构，再在 Content 内组合一个或多个 `Bubble`。发送者消息可使用 `align="end"`，但不要根据文本语言交换消息归属。
|
|||
|
|
|
|||
|
|
附件放入相同的 `MessageContent`。如果一条消息没有气泡背景，使用 `Bubble variant="ghost"`，Header 与 Footer 会自动移除气泡对应的水平 padding。
|
|||
|
|
|
|||
|
|
## 状态归属 {#ownership}
|
|||
|
|
|
|||
|
|
`MessageScroller` 管理跟随底部、可见性与跳转按钮；应用管理消息数组、分页、加载、已读和重试。加载更早消息时应保持稳定 ID，并使用 scroller API 维持视觉锚点，而不是在组件内复制一套滚动监听。
|