36 lines
1.3 KiB
Plaintext
36 lines
1.3 KiB
Plaintext
|
---
|
||
|
|
title: Chats
|
||
|
|
description: Add a responsive conversation workspace and connect its events to application services.
|
||
|
|
order: 30
|
||
|
|
toc:
|
||
|
|
- id: render-the-workspace
|
||
|
|
title: Render the workspace
|
||
|
|
- id: controlled-state
|
||
|
|
title: Controlled state
|
||
|
|
- id: media-and-pagination
|
||
|
|
title: Media and pagination
|
||
|
|
---
|
||
|
|
|
||
|
|
## Render the workspace {#render-the-workspace}
|
||
|
|
|
||
|
|
`ChatWorkspace` renders conversation discovery, the active thread, and the composer:
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { ChatWorkspace } from "@workspace/blocks/chats"
|
||
|
|
|
||
|
|
;<ChatWorkspace
|
||
|
|
conversations={conversations}
|
||
|
|
onSend={({ conversation, message }) => sendMessage(conversation, message)}
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Controlled state {#controlled-state}
|
||
|
|
|
||
|
|
The active conversation, draft, search query, and Enter-to-send preference can be controlled individually. Leave a value undefined when the workspace should own that state.
|
||
|
|
|
||
|
|
The UI emits events but does not select a transport or persistence format. Map API responses into `ChatConversation` and the exported message variants at the application boundary.
|
||
|
|
|
||
|
|
## Media and pagination {#media-and-pagination}
|
||
|
|
|
||
|
|
Provide `resolveMediaUrl` when stored media references need signed or transformed URLs. Use `onLoadEarlierMessages` with `hasMoreMessages` and `isLoadingMoreMessages` to connect historical pagination.
|