---
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` 接入历史消息分页。