Maofeng
36 lines
1.1 KiB
Plaintext
36 lines
1.1 KiB
Plaintext
---
|
|
title: 聊天示例
|
|
description: 添加响应式会话工作区，并将事件连接到应用服务。
|
|
order: 30
|
|
toc:
|
|
- id: render-the-workspace
|
|
title: 渲染工作区
|
|
- id: controlled-state
|
|
title: 受控状态
|
|
- id: media-and-pagination
|
|
title: 媒体与分页
|
|
---
|
|
|
|
## 渲染工作区 {#render-the-workspace}
|
|
|
|
`ChatWorkspace` 渲染会话查找、当前线程和消息编辑器：
|
|
|
|
```tsx
|
|
import { ChatWorkspace } from "@workspace/blocks/chats"
|
|
|
|
;<ChatWorkspace
|
|
conversations={conversations}
|
|
onSend={({ conversation, message }) => sendMessage(conversation, message)}
|
|
/>
|
|
```
|
|
|
|
## 受控状态 {#controlled-state}
|
|
|
|
当前会话、草稿、搜索词和回车发送偏好都可以单独受控。当工作区应自行管理某项状态时，不传对应值即可。
|
|
|
|
UI 只发送事件，不选择传输方式或持久化格式。在应用边界将 API 响应转换为 `ChatConversation` 和导出的消息类型。
|
|
|
|
## 媒体与分页 {#media-and-pagination}
|
|
|
|
当已存储媒体需要签名或转换 URL 时，提供 `resolveMediaUrl`。使用 `onLoadEarlierMessages`、`hasMoreMessages` 和 `isLoadingMoreMessages` 接入历史消息分页。
|