wehub-resource-sync
e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
23 lines
1016 B
Markdown
23 lines
1016 B
Markdown
# Virtualized thread example
|
|
|
|
Renders a 500-message thread with `@tanstack/react-virtual` so only the turns near the viewport are mounted. The runtime is a self-contained external store with a fake streaming reply, so the example runs fully offline with no environment variables.
|
|
|
|
## Quick start
|
|
|
|
```sh
|
|
pnpm install
|
|
pnpm --filter with-virtualized-thread dev
|
|
```
|
|
|
|
## What the example demonstrates
|
|
|
|
| Concern | File |
|
|
| --- | --- |
|
|
| Virtualizer over user turns, padding spacers, `measureElement` | `app/VirtualizedThread.tsx` |
|
|
| Id-keyed per-message rendering through `ThreadPrimitive.Unstable_MessageById` | `app/VirtualizedThread.tsx` |
|
|
| Sticky-bottom auto-follow with a user-scroll disarm guard | `app/VirtualizedThread.tsx` |
|
|
| External store runtime with seeded messages and a streaming tail | `app/MyRuntimeProvider.tsx` |
|
|
| Deterministic synthetic thread content | `app/seed-messages.ts` |
|
|
|
|
See the [thread virtualization guide](https://assistant-ui.com/docs/guides/virtualization) for the full walkthrough.
|