---
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.