From 0def135f636587bc53f3c933ab26f9b7a58b19cd Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Thu, 15 Oct 2026 09:34:53 +0200
Subject: [PATCH 1/9] docs(examples): rebuild the React chat example as a
 ChatGPT-style layout

Replace the debug toolbar with a sidebar (new chat, chat history) and a
message pane with a composer. Data comes from an in-memory mock API through
TanStack Query: chats via useQuery, messages via useInfiniteQuery with older
pages prepended, and sends via useMutation. Assistant replies are generated
and streamed word by word into the query cache, so the example needs no
server or API key.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/react/chat/README.md      |   5 +
 examples/react/chat/package.json   |   1 +
 examples/react/chat/src/api.ts     | 298 +++++++++++++++++
 examples/react/chat/src/index.css  | 374 ++++++++++++++++++---
 examples/react/chat/src/main.tsx   | 511 +++++++++++++++++++----------
 examples/react/chat/src/queries.ts | 115 +++++++
 pnpm-lock.yaml                     |   3 +
 7 files changed, 1079 insertions(+), 228 deletions(-)
 create mode 100644 examples/react/chat/src/api.ts
 create mode 100644 examples/react/chat/src/queries.ts

diff --git a/examples/react/chat/README.md b/examples/react/chat/README.md
index fc23edc9a..94cc86a96 100644
--- a/examples/react/chat/README.md
+++ b/examples/react/chat/README.md
@@ -7,6 +7,11 @@ Demonstrates end-anchored virtualization for chat-style UIs:
 - follows appended output only when the viewport is already at the latest message
 - keeps streaming bottom output pinned as the last row grows
 
+The UI is a simple ChatGPT-style layout: a sidebar with chat history and a
+message pane with a composer. Data comes from an in-memory mock API
+(`src/api.ts`) through TanStack Query, and assistant replies are generated and
+streamed word by word, so the example needs no server or API key.
+
 ```bash
 npm install
 npm run dev
diff --git a/examples/react/chat/package.json b/examples/react/chat/package.json
index 10a281769..f1959bcc3 100644
--- a/examples/react/chat/package.json
+++ b/examples/react/chat/package.json
@@ -8,6 +8,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-virtual": "^3.14.19",
     "react": "^19.2.7",
     "react-dom": "^19.2.7"
diff --git a/examples/react/chat/src/api.ts b/examples/react/chat/src/api.ts
new file mode 100644
index 000000000..c28e28a10
--- /dev/null
+++ b/examples/react/chat/src/api.ts
@@ -0,0 +1,298 @@
+// An in-memory stand-in for a chat backend. Seeded chats are generated on
+// first read from a fixed seed, so the history is the same after a reload.
+
+export type Author = 'user' | 'assistant'
+
+export type Message = {
+  id: string
+  author: Author
+  text: string
+}
+
+export type Chat = {
+  id: string
+  title: string
+  updatedAt: number
+}
+
+export type MessagePage = {
+  messages: Message[]
+  // Index of the first message of this page in the full chat history.
+  start: number
+}
+
+const PAGE_SIZE = 30
+const READ_LATENCY = 300
+const WRITE_LATENCY = 50
+
+type Random = () => number
+
+function seededRandom(seed: number): Random {
+  return () => {
+    seed = (seed + 0x6d2b79f5) | 0
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+const pick = <T>(random: Random, items: ReadonlyArray<T>): T =>
+  items[Math.floor(random() * items.length)]!
+
+const between = (random: Random, min: number, max: number) =>
+  min + Math.floor(random() * (max - min + 1))
+
+const delay = (ms: number) =>
+  new Promise<void>((resolve) => setTimeout(resolve, ms))
+
+const titles = [
+  'Debounce a search input',
+  'Plan a weekend in Kraków',
+  'Explain React Suspense',
+  'Sourdough starter schedule',
+  'Postgres index for a slow query',
+  'Rewrite a cover letter',
+  'Compare Vite and webpack',
+  'Beginner running plan',
+  'Virtualize a 10k row table',
+  'Name ideas for a bakery',
+  'CSS grid vs flexbox',
+  'Summarize a research paper',
+  'Fix a flaky Playwright test',
+  'Budget for a home office',
+  'Explain TypeScript generics',
+  'Birthday party games for kids',
+  'Migrate from Redux to Zustand',
+  'Learn basic Spanish phrases',
+  'Design a REST pagination API',
+  'Houseplants for low light',
+  'Write a git commit message',
+  'Explain event loop microtasks',
+  'Meal prep for the week',
+  'Accessible modal dialog',
+  'Pick a mechanical keyboard',
+]
+
+const followUps = [
+  'Can you explain that in more detail?',
+  'Show me an example.',
+  'What are the trade-offs?',
+  'How would I test this?',
+  'Can you make it shorter?',
+  'Why does that work?',
+  'What if the list has 10,000 items?',
+  'Is there a simpler way?',
+  'What would you do differently in production?',
+  'Ok, and what is the next step?',
+  'Can you put that in a table or a list?',
+  'Thanks! One more question about the last point.',
+]
+
+const openers = [
+  'Good question.',
+  'Sure, here is how I would approach it.',
+  'Short answer: it depends on your constraints.',
+  'Let me break it down.',
+  'Here is a practical way to think about it.',
+  'There are a few options.',
+]
+
+const sentences = [
+  'Start with the smallest version that works and measure it before you optimize.',
+  'The main cost is usually not the code itself but the coordination around it.',
+  'If the input changes often, keep the derived values out of state and compute them on render.',
+  'A good default is to keep the data close to where it is used.',
+  'You can always add a cache later, but removing one is much harder.',
+  'Most of the time the simple solution is fast enough.',
+  'Try to make the common case fast and the rare case correct.',
+  'Write down the assumptions first, because they tend to change.',
+  'This also makes the behavior easier to test in isolation.',
+  'Watch out for edge cases at the boundaries, such as empty lists and very long values.',
+  'Keep each step small enough that you can undo it without losing much.',
+  'In practice, people tend to overestimate how much flexibility they need.',
+  'The trade-off is a bit more setup in exchange for fewer surprises later.',
+  'When in doubt, pick the option that is easier to change.',
+  'It helps to look at a real example before you generalize.',
+  'Consistency matters more than the exact choice.',
+]
+
+const bullets = [
+  'Keep the scope small',
+  'Measure before and after the change',
+  'Prefer boring, well-known tools',
+  'Write one test for the happy path and one for an edge case',
+  'Document the decision in one sentence',
+  'Remove what you do not use',
+  'Ask for feedback early',
+  'Automate the step you repeat most often',
+]
+
+const snippets = [
+  '```ts\nfunction debounce<T extends unknown[]>(fn: (...args: T) => void, ms: number) {\n  let id: ReturnType<typeof setTimeout>\n  return (...args: T) => {\n    clearTimeout(id)\n    id = setTimeout(() => fn(...args), ms)\n  }\n}\n```',
+  '```tsx\nconst virtualizer = useVirtualizer({\n  count: rows.length,\n  getScrollElement: () => parentRef.current,\n  estimateSize: () => 35,\n})\n```',
+  '```sql\nCREATE INDEX CONCURRENTLY orders_customer_created_idx\n  ON orders (customer_id, created_at DESC);\n```',
+  '```css\n.layout {\n  display: grid;\n  grid-template-columns: 260px 1fr;\n  height: 100vh;\n}\n```',
+  '```bash\npnpm add @tanstack/react-query\npnpm dev\n```',
+]
+
+const closers = [
+  'Let me know if you want me to go deeper on any of these.',
+  'Want me to turn this into a checklist?',
+  'I can also show a full example if that helps.',
+  'Does that match what you had in mind?',
+]
+
+function generateReply(random: Random, prompt: string): string {
+  const parts: string[] = []
+  const quote = prompt.length > 48 ? `${prompt.slice(0, 48).trim()}…` : prompt
+  parts.push(`${pick(random, openers)} You asked: “${quote}”`)
+
+  const paragraphs = between(random, 0, 3)
+  for (let i = 0; i < paragraphs; i++) {
+    const count = between(random, 2, 4)
+    parts.push(
+      Array.from({ length: count }, () => pick(random, sentences)).join(' '),
+    )
+  }
+  if (random() < 0.3) {
+    const count = between(random, 3, 5)
+    parts.push(
+      Array.from({ length: count }, () => `- ${pick(random, bullets)}`).join(
+        '\n',
+      ),
+    )
+  }
+  if (random() < 0.25) {
+    parts.push(pick(random, snippets))
+  }
+  if (random() < 0.5) {
+    parts.push(pick(random, closers))
+  }
+  return parts.join('\n\n')
+}
+
+const now = Date.now()
+const chats: Chat[] = titles.map((title, index) => ({
+  id: `chat-${index}`,
+  title,
+  updatedAt: now - index * 5 * 60 * 60 * 1000,
+}))
+const messagesByChat = new Map<string, Message[]>()
+let nextId = 0
+
+function seedMessages(chatId: string): Message[] {
+  const chatIndex = chats.findIndex((chat) => chat.id === chatId)
+  const random = seededRandom(chatIndex + 1)
+  const title = chats[chatIndex]!.title
+  const turns = between(random, 20, 150)
+  const messages: Message[] = []
+  for (let turn = 0; turn < turns; turn++) {
+    const prompt =
+      turn === 0 ? `${title}. Where should I start?` : pick(random, followUps)
+    messages.push({ id: `${chatId}-${turn}-q`, author: 'user', text: prompt })
+    messages.push({
+      id: `${chatId}-${turn}-a`,
+      author: 'assistant',
+      text: generateReply(random, prompt),
+    })
+  }
+  return messages
+}
+
+function getMessages(chatId: string): Message[] {
+  let messages = messagesByChat.get(chatId)
+  if (!messages) {
+    messages = seedMessages(chatId)
+    messagesByChat.set(chatId, messages)
+  }
+  return messages
+}
+
+function touchChat(chatId: string) {
+  const chat = chats.find((item) => item.id === chatId)!
+  chat.updatedAt = Date.now()
+}
+
+export async function fetchChats(): Promise<Chat[]> {
+  await delay(READ_LATENCY)
+  return [...chats].sort((a, b) => b.updatedAt - a.updatedAt)
+}
+
+// Returns the page of messages that ends right before `before`, or the
+// latest page when `before` is null.
+export async function fetchMessages(
+  chatId: string,
+  before: number | null,
+): Promise<MessagePage> {
+  await delay(READ_LATENCY)
+  const messages = getMessages(chatId)
+  const end = before ?? messages.length
+  const start = Math.max(0, end - PAGE_SIZE)
+  return { messages: messages.slice(start, end), start }
+}
+
+export async function createChat(firstMessage: string): Promise<Chat> {
+  await delay(WRITE_LATENCY)
+  const title =
+    firstMessage.length > 40
+      ? `${firstMessage.slice(0, 40).trim()}…`
+      : firstMessage
+  const chat: Chat = { id: `chat-new-${nextId++}`, title, updatedAt: 0 }
+  chats.push(chat)
+  messagesByChat.set(chat.id, [])
+  return chat
+}
+
+export async function postMessage(
+  chatId: string,
+  text: string,
+): Promise<Message> {
+  await delay(WRITE_LATENCY)
+  const message: Message = { id: `m-${nextId++}`, author: 'user', text }
+  getMessages(chatId).push(message)
+  touchChat(chatId)
+  return message
+}
+
+// Streams a generated reply word by word. `onUpdate` gets the whole message
+// so far on every chunk, starting with an empty one. Returns a stop function
+// that keeps the partial reply.
+export function streamReply(
+  chatId: string,
+  prompt: string,
+  onUpdate: (message: Message) => void,
+  onDone: () => void,
+): () => void {
+  const messages = getMessages(chatId)
+  const index = messages.length
+  let message: Message = { id: `m-${nextId++}`, author: 'assistant', text: '' }
+  messages.push(message)
+  onUpdate(message)
+
+  const words = generateReply(Math.random, prompt).match(/\s*\S+/g) ?? []
+  let position = 0
+  let intervalId: ReturnType<typeof setInterval> | undefined
+
+  const timeoutId = setTimeout(() => {
+    intervalId = setInterval(() => {
+      const count = 1 + Math.floor(Math.random() * 3)
+      message = {
+        ...message,
+        text: message.text + words.slice(position, position + count).join(''),
+      }
+      position += count
+      messages[index] = message
+      onUpdate(message)
+      if (position >= words.length) {
+        clearInterval(intervalId)
+        touchChat(chatId)
+        onDone()
+      }
+    }, 40)
+  }, 600)
+
+  return () => {
+    clearTimeout(timeoutId)
+    clearInterval(intervalId)
+  }
+}
diff --git a/examples/react/chat/src/index.css b/examples/react/chat/src/index.css
index e8e379d47..a9c4553f6 100644
--- a/examples/react/chat/src/index.css
+++ b/examples/react/chat/src/index.css
@@ -2,6 +2,35 @@
   box-sizing: border-box;
 }
 
+:root {
+  --bg: #ffffff;
+  --sidebar-bg: #f9f9f9;
+  --hover: #ececec;
+  --text: #0d0d0d;
+  --muted: #6b6b6b;
+  --border: #e5e5e5;
+  --bubble: #f1f1f1;
+  --code-bg: #f6f8fa;
+  --accent: #0d0d0d;
+  --accent-text: #ffffff;
+  --sidebar-width: 260px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #212121;
+    --sidebar-bg: #171717;
+    --hover: #2f2f2f;
+    --text: #ececec;
+    --muted: #9b9b9b;
+    --border: #3a3a3a;
+    --bubble: #303030;
+    --code-bg: #171717;
+    --accent: #ececec;
+    --accent-text: #0d0d0d;
+  }
+}
+
 html {
   font-family:
     Inter,
@@ -11,8 +40,8 @@ html {
     BlinkMacSystemFont,
     'Segoe UI',
     sans-serif;
-  color: #171717;
-  background: #f6f8fa;
+  color: var(--text);
+  background: var(--bg);
 }
 
 body {
@@ -20,85 +49,336 @@ body {
 }
 
 button {
-  border: 1px solid #c6d0da;
-  border-radius: 6px;
-  background: #ffffff;
-  color: #171717;
-  cursor: pointer;
   font: inherit;
-  font-size: 13px;
-  padding: 7px 10px;
-}
-
-button:hover {
-  background: #eef3f7;
+  color: inherit;
+  cursor: pointer;
 }
 
 .App {
-  height: 100vh;
+  height: 100dvh;
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+}
+
+.App[data-sidebar-open='false'] {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+/* Sidebar */
+
+.Sidebar {
+  background: var(--sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  padding: 8px;
 }
 
-.Toolbar {
+.App[data-sidebar-open='false'] .Sidebar {
+  visibility: hidden;
+}
+
+.SidebarHeader {
   align-items: center;
-  background: #ffffff;
-  border-bottom: 1px solid #d9e0e6;
   display: flex;
-  gap: 8px;
   justify-content: space-between;
-  padding: 10px 12px;
+  padding: 4px 4px 8px 8px;
 }
 
-.ToolbarGroup {
-  display: flex;
-  gap: 8px;
+.Brand {
+  font-weight: 600;
+}
+
+.IconButton {
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  font-size: 16px;
+  height: 36px;
+  width: 36px;
 }
 
-.Status {
-  color: #5c6670;
+.IconButton:hover {
+  background: var(--hover);
+}
+
+.NewChat,
+.ChatLink {
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  overflow: hidden;
+  padding: 8px 10px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.NewChat:hover,
+.ChatLink:hover,
+.NewChat[aria-current='page'],
+.ChatLink[aria-current='page'] {
+  background: var(--hover);
+}
+
+.SidebarLabel {
+  color: var(--muted);
   font-size: 13px;
+  padding: 20px 10px 6px;
 }
 
-.Shell {
-  display: grid;
+.ChatList {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
   min-height: 0;
+  overflow-y: auto;
+}
+
+.SidebarHint {
+  color: var(--muted);
+  font-size: 14px;
+  padding: 8px 10px;
+}
+
+.Backdrop {
+  display: none;
+}
+
+/* Main */
+
+.Main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.MainHeader {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  height: 52px;
+  padding: 0 12px;
+}
+
+.MainTitle {
+  font-weight: 500;
   overflow: hidden;
-  place-items: stretch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.Messages {
+.Pane {
+  flex: 1;
   min-height: 0;
+  position: relative;
+}
+
+.Messages {
+  height: 100%;
   overflow: auto;
   overflow-anchor: none;
-  width: 100%;
 }
 
+.PaneHint {
+  color: var(--muted);
+  flex: 1;
+  padding: 24px;
+  text-align: center;
+}
+
+.HistoryLoader {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 13px;
+  left: 50%;
+  padding: 4px 12px;
+  position: absolute;
+  top: 8px;
+  transform: translateX(-50%);
+}
+
+.JumpToLatest {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  bottom: 12px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+  height: 36px;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+  width: 36px;
+}
+
+/* Messages */
+
 .MessageRow {
-  padding: 6px 12px;
+  padding: 0 16px;
 }
 
-.Bubble {
-  border: 1px solid #d7dee5;
-  border-radius: 8px;
-  line-height: 1.45;
-  max-width: min(720px, 88vw);
-  padding: 10px 12px;
+.Message {
+  line-height: 1.6;
+  margin: 0 auto;
+  max-width: 768px;
+  padding: 12px 0;
+}
+
+.Message-user {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.UserBubble {
+  background: var(--bubble);
+  border-radius: 18px;
+  max-width: 70%;
+  padding: 8px 16px;
   white-space: pre-wrap;
 }
 
-.Bubble-user {
-  background: #e6f3ff;
-  margin-left: auto;
+.Prose {
+  margin: 0 0 12px;
+  white-space: pre-wrap;
+}
+
+.Prose:last-child {
+  margin-bottom: 0;
+}
+
+.Code {
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 13px;
+  margin: 0 0 12px;
+  overflow-x: auto;
+  padding: 12px;
+}
+
+.Typing {
+  display: inline-flex;
+  gap: 4px;
+  padding: 8px 0;
 }
 
-.Bubble-assistant {
-  background: #ffffff;
-  margin-right: auto;
+.Typing span {
+  animation: typing 1s infinite ease-in-out;
+  background: var(--muted);
+  border-radius: 50%;
+  height: 6px;
+  width: 6px;
 }
 
-.Meta {
-  color: #637081;
-  font-size: 12px;
-  margin-bottom: 4px;
+.Typing span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.Typing span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes typing {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+/* Composer */
+
+.ComposerDock {
+  padding: 0 16px 16px;
+}
+
+.Empty {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 16px 15vh;
+}
+
+.Empty h1 {
+  font-size: 28px;
+  font-weight: 500;
+  margin: 0 0 24px;
+}
+
+.Composer {
+  align-items: flex-end;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 28px;
+  box-shadow: 0 2px 12px rgb(0 0 0 / 0.06);
+  display: flex;
+  gap: 8px;
+  margin: 0 auto;
+  max-width: 768px;
+  padding: 10px 10px 10px 20px;
+  width: 100%;
+}
+
+.Composer textarea {
+  background: none;
+  border: 0;
+  color: inherit;
+  flex: 1;
+  font: inherit;
+  line-height: 1.5;
+  outline: none;
+  padding: 6px 0;
+  resize: none;
+}
+
+.SendButton {
+  background: var(--accent);
+  border: 0;
+  border-radius: 50%;
+  color: var(--accent-text);
+  flex: none;
+  font-size: 16px;
+  height: 36px;
+  width: 36px;
+}
+
+.SendButton:disabled {
+  cursor: default;
+  opacity: 0.3;
+}
+
+/* Narrow screens: the sidebar slides over the chat. */
+
+@media (max-width: 768px) {
+  .App,
+  .App[data-sidebar-open='false'] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .Sidebar {
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: var(--sidebar-width);
+    z-index: 2;
+  }
+
+  .App[data-sidebar-open='true'] .Backdrop {
+    background: rgb(0 0 0 / 0.4);
+    display: block;
+    inset: 0;
+    position: fixed;
+    z-index: 1;
+  }
 }
diff --git a/examples/react/chat/src/main.tsx b/examples/react/chat/src/main.tsx
index f37cc3d6f..7281234f1 100644
--- a/examples/react/chat/src/main.tsx
+++ b/examples/react/chat/src/main.tsx
@@ -1,49 +1,163 @@
-import React from 'react'
+import * as React from 'react'
 import { createRoot } from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { useVirtualizer } from '@tanstack/react-virtual'
+import { queryClient, useChats, useMessages, useSendMessage } from './queries'
+import type { Message } from './api'
 import './index.css'
 
-type Message = {
-  id: string
-  author: 'user' | 'assistant'
-  text: string
+const isNarrow = () => window.matchMedia('(max-width: 768px)').matches
+
+function App() {
+  const [activeChatId, setActiveChatId] = React.useState<string | null>(null)
+  const [sidebarOpen, setSidebarOpen] = React.useState(() => !isNarrow())
+  const chats = useChats()
+  const { send, sending, streaming, stop } = useSendMessage()
+  const activeChat = chats.data?.find((chat) => chat.id === activeChatId)
+
+  const openChat = (chatId: string | null) => {
+    setActiveChatId(chatId)
+    if (isNarrow()) setSidebarOpen(false)
+  }
+
+  const onSend = (text: string) => {
+    send(
+      { chatId: activeChatId, text },
+      { onSuccess: ({ chatId }) => setActiveChatId(chatId) },
+    )
+  }
+
+  const composer = (
+    <Composer
+      disabled={sending}
+      streaming={streaming}
+      onSend={onSend}
+      onStop={stop}
+    />
+  )
+
+  return (
+    <div className="App" data-sidebar-open={sidebarOpen}>
+      <aside className="Sidebar">
+        <div className="SidebarHeader">
+          <span className="Brand">TanStack Chat</span>
+          <button
+            type="button"
+            className="IconButton"
+            aria-label="Close sidebar"
+            onClick={() => setSidebarOpen(false)}
+          >
+            ⟨
+          </button>
+        </div>
+        <button
+          type="button"
+          className="NewChat"
+          aria-current={activeChatId === null ? 'page' : undefined}
+          onClick={() => openChat(null)}
+        >
+          ✎ New chat
+        </button>
+        <div className="SidebarLabel">Chats</div>
+        <nav className="ChatList" aria-label="Chat history">
+          {chats.isPending ? (
+            <div className="SidebarHint">Loading chats…</div>
+          ) : (
+            chats.data?.map((chat) => (
+              <button
+                key={chat.id}
+                type="button"
+                className="ChatLink"
+                aria-current={chat.id === activeChatId ? 'page' : undefined}
+                onClick={() => openChat(chat.id)}
+              >
+                {chat.title}
+              </button>
+            ))
+          )}
+        </nav>
+      </aside>
+      <div
+        className="Backdrop"
+        aria-hidden="true"
+        onClick={() => setSidebarOpen(false)}
+      />
+
+      <main className="Main">
+        <header className="MainHeader">
+          {!sidebarOpen && (
+            <button
+              type="button"
+              className="IconButton"
+              aria-label="Open sidebar"
+              onClick={() => setSidebarOpen(true)}
+            >
+              ☰
+            </button>
+          )}
+          <span className="MainTitle">
+            {activeChatId ? (activeChat?.title ?? '') : 'New chat'}
+          </span>
+        </header>
+
+        {activeChatId ? (
+          <>
+            <ChatPane key={activeChatId} chatId={activeChatId} />
+            <div className="ComposerDock">{composer}</div>
+          </>
+        ) : (
+          <div className="Empty">
+            <h1>What can I help with?</h1>
+            {composer}
+          </div>
+        )}
+      </main>
+    </div>
+  )
 }
 
-const replies = [
-  'I can break that into the smallest next step and keep the current viewport pinned while this answer grows.',
-  'Older messages are loaded above the viewport. The visible row keeps the same screen position after the prepend.',
-  'When the thread is not at the bottom, new output waits below without pulling the reader away from history.',
-]
-
-const makeMessage = (index: number): Message => ({
-  id: `message-${index}`,
-  author: index % 4 === 0 ? 'user' : 'assistant',
-  text:
-    index % 4 === 0
-      ? `Can you check item ${index}?`
-      : `Message ${index}: ${replies[Math.abs(index) % replies.length]}`,
-})
-
-const initialMessages = Array.from({ length: 45 }, (_, index) =>
-  makeMessage(index),
-)
+function ChatPane({ chatId }: { chatId: string }) {
+  const query = useMessages(chatId)
 
-function App() {
+  if (query.isPending) {
+    return <div className="PaneHint">Loading messages…</div>
+  }
+  if (query.isError) {
+    return <div className="PaneHint">Could not load messages.</div>
+  }
+
+  return (
+    <MessageList
+      messages={query.data.pages.flatMap((page) => page.messages)}
+      loadingOlder={query.isFetchingPreviousPage}
+      onLoadOlder={() => {
+        if (query.hasPreviousPage) {
+          query.fetchPreviousPage({ cancelRefetch: false })
+        }
+      }}
+    />
+  )
+}
+
+function MessageList({
+  messages,
+  loadingOlder,
+  onLoadOlder,
+}: {
+  messages: Message[]
+  loadingOlder: boolean
+  onLoadOlder: () => void
+}) {
   const parentRef = React.useRef<HTMLDivElement>(null)
-  const firstMessageIndexRef = React.useRef(0)
-  const nextMessageIndexRef = React.useRef(initialMessages.length)
-  const streamTimerRef = React.useRef<number | null>(null)
-  const loadingHistoryRef = React.useRef(false)
   const lastScrollTopRef = React.useRef(0)
-  const [messages, setMessages] = React.useState(initialMessages)
-  const [loadingHistory, setLoadingHistory] = React.useState(false)
   const [didInitialScroll, setDidInitialScroll] = React.useState(false)
   const [autoHistoryEnabled, setAutoHistoryEnabled] = React.useState(false)
+  const [atEnd, setAtEnd] = React.useState(true)
 
   const virtualizer = useVirtualizer({
     count: messages.length,
     getScrollElement: () => parentRef.current,
-    estimateSize: () => 74,
+    estimateSize: () => 120,
     getItemKey: React.useCallback(
       (index: number) => messages[index]!.id,
       [messages],
@@ -55,82 +169,21 @@ function App() {
     directDomUpdates: true,
   })
 
-  const virtualItems = virtualizer.getVirtualItems()
-
-  const prependHistory = React.useCallback(() => {
-    if (loadingHistoryRef.current || firstMessageIndexRef.current <= -90) {
-      return
-    }
-
-    loadingHistoryRef.current = true
-    setLoadingHistory(true)
-    window.setTimeout(() => {
-      const start = firstMessageIndexRef.current - 12
-      firstMessageIndexRef.current = start
-      setMessages((current) => [
-        ...Array.from({ length: 12 }, (_, offset) =>
-          makeMessage(start + offset),
-        ),
-        ...current,
-      ])
-      loadingHistoryRef.current = false
-      setLoadingHistory(false)
-    }, 180)
-  }, [])
-
-  const appendMessage = React.useCallback(() => {
-    const next = nextMessageIndexRef.current
-    nextMessageIndexRef.current += 1
-    setMessages((current) => [...current, makeMessage(next)])
-  }, [])
-
-  const streamReply = React.useCallback(() => {
-    if (streamTimerRef.current !== null) return
-
-    const id = `stream-${Date.now()}`
-    const chunks = [
-      'Thinking through the failure mode.',
-      ' The list should follow only when it was already pinned.',
-      ' Prepends should keep the reader anchored to the same message.',
-      ' Streaming output should grow without drifting off the bottom.',
-    ]
-    let chunkIndex = 0
-
-    setMessages((current) => [
-      ...current,
-      {
-        id,
-        author: 'assistant',
-        text: '',
-      },
-    ])
-
-    streamTimerRef.current = window.setInterval(() => {
-      setMessages((current) =>
-        current.map((message) =>
-          message.id === id
-            ? {
-                ...message,
-                text: chunks.slice(0, chunkIndex + 1).join(''),
-              }
-            : message,
-        ),
-      )
-
-      chunkIndex += 1
-      if (chunkIndex === chunks.length && streamTimerRef.current !== null) {
-        window.clearInterval(streamTimerRef.current)
-        streamTimerRef.current = null
-      }
-    }, 280)
-  }, [])
-
   React.useLayoutEffect(() => {
     if (didInitialScroll) return
     virtualizer.scrollToEnd()
     setDidInitialScroll(true)
   }, [didInitialScroll, virtualizer])
 
+  // Sending a message jumps to it, like in most chat apps. Assistant output
+  // follows only when the reader is already at the latest message.
+  const lastMessage = messages[messages.length - 1]
+  const lastUserMessageId =
+    lastMessage?.author === 'user' ? lastMessage.id : null
+  React.useEffect(() => {
+    if (lastUserMessageId) virtualizer.scrollToEnd()
+  }, [lastUserMessageId, virtualizer])
+
   React.useEffect(() => {
     const id = window.setTimeout(() => {
       setAutoHistoryEnabled(true)
@@ -139,93 +192,189 @@ function App() {
     return () => window.clearTimeout(id)
   }, [])
 
-  React.useEffect(() => {
-    return () => {
-      if (streamTimerRef.current !== null) {
-        window.clearInterval(streamTimerRef.current)
-      }
-    }
-  }, [])
-
   return (
-    <div className="App">
-      <div className="Toolbar">
-        <div className="ToolbarGroup">
-          <button type="button" onClick={prependHistory}>
-            Load older
-          </button>
-          <button type="button" onClick={appendMessage}>
-            Add message
-          </button>
-          <button type="button" onClick={streamReply}>
-            Stream reply
-          </button>
-          <button type="button" onClick={() => virtualizer.scrollToEnd()}>
-            Latest
-          </button>
-        </div>
-        <div className="Status">
-          {loadingHistory
-            ? 'Loading history'
-            : virtualizer.isAtEnd(80)
-              ? 'At latest'
-              : 'Reading history'}
-        </div>
-      </div>
-
-      <div className="Shell">
+    <div className="Pane">
+      <div
+        ref={parentRef}
+        className="Messages"
+        onScroll={(event) => {
+          const isAtEnd = virtualizer.isAtEnd(80)
+          setAtEnd(isAtEnd)
+          if (!autoHistoryEnabled || isAtEnd) return
+          const { scrollTop } = event.currentTarget
+          const movingUp = scrollTop < lastScrollTopRef.current
+          lastScrollTopRef.current = scrollTop
+          // Load only while the reader scrolls up into the top. Safari's
+          // rubber band reports negative positions past the top and then
+          // settles back down to 0; neither is the reader asking for more
+          // history, and loading on the settle would load twice per bounce.
+          if (movingUp && scrollTop >= 0 && scrollTop < 400) {
+            onLoadOlder()
+          }
+        }}
+      >
         <div
-          ref={parentRef}
-          className="Messages"
-          onScroll={(event) => {
-            if (!autoHistoryEnabled || virtualizer.isAtEnd(80)) return
-            const { scrollTop } = event.currentTarget
-            const movingUp = scrollTop < lastScrollTopRef.current
-            lastScrollTopRef.current = scrollTop
-            // Load only while the reader scrolls up into the top. Safari's
-            // rubber band reports negative positions past the top and then
-            // settles back down to 0; neither is the reader asking for more
-            // history, and loading on the settle would load twice per bounce.
-            if (movingUp && scrollTop >= 0 && scrollTop < 120) {
-              prependHistory()
-            }
+          ref={virtualizer.containerRef}
+          style={{
+            position: 'relative',
+            width: '100%',
           }}
         >
-          <div
-            ref={virtualizer.containerRef}
-            style={{
-              position: 'relative',
-              width: '100%',
-            }}
-          >
-            {virtualItems.map((virtualItem) => {
-              const message = messages[virtualItem.index]!
-
-              return (
-                <div
-                  key={virtualItem.key}
-                  ref={virtualizer.measureElement}
-                  data-index={virtualItem.index}
-                  className="MessageRow"
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                  }}
-                >
-                  <div className={`Bubble Bubble-${message.author}`}>
-                    <div className="Meta">{message.author}</div>
-                    {message.text || '...'}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
+          {virtualizer.getVirtualItems().map((virtualItem) => {
+            const message = messages[virtualItem.index]!
+
+            return (
+              <div
+                key={virtualItem.key}
+                ref={virtualizer.measureElement}
+                data-index={virtualItem.index}
+                className="MessageRow"
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                }}
+              >
+                <MessageView message={message} />
+              </div>
+            )
+          })}
         </div>
       </div>
+
+      {loadingOlder && <div className="HistoryLoader">Loading older…</div>}
+      {!atEnd && (
+        <button
+          type="button"
+          className="JumpToLatest"
+          aria-label="Jump to latest message"
+          onClick={() => virtualizer.scrollToEnd({ behavior: 'smooth' })}
+        >
+          ↓
+        </button>
+      )}
     </div>
   )
 }
 
-createRoot(document.getElementById('root')!).render(<App />)
+function MessageView({ message }: { message: Message }) {
+  if (message.author === 'user') {
+    return (
+      <div className="Message Message-user">
+        <div className="UserBubble">{message.text}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="Message Message-assistant">
+      {message.text ? (
+        message.text.split(/(```[\s\S]*?(?:```|$))/).map((part, index) =>
+          part.startsWith('```') ? (
+            <pre key={index} className="Code">
+              {part.replace(/^```\w*\n?/, '').replace(/```$/, '')}
+            </pre>
+          ) : (
+            part.trim() && (
+              <p key={index} className="Prose">
+                {part.trim()}
+              </p>
+            )
+          ),
+        )
+      ) : (
+        <span className="Typing" aria-label="Assistant is typing">
+          <span />
+          <span />
+          <span />
+        </span>
+      )}
+    </div>
+  )
+}
+
+function Composer({
+  disabled,
+  streaming,
+  onSend,
+  onStop,
+}: {
+  disabled: boolean
+  streaming: boolean
+  onSend: (text: string) => void
+  onStop: () => void
+}) {
+  const [text, setText] = React.useState('')
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  React.useLayoutEffect(() => {
+    const textarea = textareaRef.current!
+    textarea.style.height = 'auto'
+    if (text) {
+      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
+    }
+  }, [text])
+
+  const submit = () => {
+    const value = text.trim()
+    if (!value || disabled || streaming) return
+    onSend(value)
+    setText('')
+  }
+
+  return (
+    <form
+      className="Composer"
+      onSubmit={(event) => {
+        event.preventDefault()
+        submit()
+      }}
+    >
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        value={text}
+        placeholder="Ask anything"
+        aria-label="Message"
+        autoFocus
+        onChange={(event) => setText(event.target.value)}
+        onKeyDown={(event) => {
+          if (
+            event.key === 'Enter' &&
+            !event.shiftKey &&
+            !event.nativeEvent.isComposing
+          ) {
+            event.preventDefault()
+            submit()
+          }
+        }}
+      />
+      {streaming ? (
+        <button
+          type="button"
+          className="SendButton"
+          aria-label="Stop"
+          onClick={onStop}
+        >
+          ■
+        </button>
+      ) : (
+        <button
+          type="submit"
+          className="SendButton"
+          aria-label="Send"
+          disabled={disabled || !text.trim()}
+        >
+          ↑
+        </button>
+      )}
+    </form>
+  )
+}
+
+createRoot(document.getElementById('root')!).render(
+  <QueryClientProvider client={queryClient}>
+    <App />
+  </QueryClientProvider>,
+)
diff --git a/examples/react/chat/src/queries.ts b/examples/react/chat/src/queries.ts
new file mode 100644
index 000000000..cc1b52b24
--- /dev/null
+++ b/examples/react/chat/src/queries.ts
@@ -0,0 +1,115 @@
+import * as React from 'react'
+import {
+  QueryClient,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type { InfiniteData } from '@tanstack/react-query'
+import {
+  createChat,
+  fetchChats,
+  fetchMessages,
+  postMessage,
+  streamReply,
+} from './api'
+import type { Message, MessagePage } from './api'
+
+// The cache is the source of truth while the page is open: new messages are
+// written into it directly, so a background refetch would only fight them.
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { staleTime: Infinity, refetchOnWindowFocus: false },
+  },
+})
+
+const chatsKey = ['chats'] as const
+const messagesKey = (chatId: string) => ['messages', chatId] as const
+
+type MessagesData = InfiniteData<MessagePage, number | null>
+
+export function useChats() {
+  return useQuery({ queryKey: chatsKey, queryFn: fetchChats })
+}
+
+// Pages are kept oldest first: older history is loaded with
+// `fetchPreviousPage`, which prepends a page.
+export function useMessages(chatId: string) {
+  return useInfiniteQuery({
+    queryKey: messagesKey(chatId),
+    queryFn: ({ pageParam }) => fetchMessages(chatId, pageParam),
+    initialPageParam: null as number | null,
+    getPreviousPageParam: (firstPage) =>
+      firstPage.start > 0 ? firstPage.start : undefined,
+    getNextPageParam: () => undefined,
+  })
+}
+
+function upsertMessage(client: QueryClient, chatId: string, message: Message) {
+  client.setQueryData<MessagesData>(messagesKey(chatId), (data) => {
+    if (!data) {
+      return { pages: [{ messages: [message], start: 0 }], pageParams: [null] }
+    }
+    const pages = [...data.pages]
+    const last = pages[pages.length - 1]!
+    const exists = last.messages.some((item) => item.id === message.id)
+    pages[pages.length - 1] = {
+      ...last,
+      messages: exists
+        ? last.messages.map((item) => (item.id === message.id ? message : item))
+        : [...last.messages, message],
+    }
+    return { ...data, pages }
+  })
+}
+
+// Sends a user message (creating the chat when `chatId` is null) and then
+// streams the assistant reply into the messages cache.
+export function useSendMessage() {
+  const client = useQueryClient()
+  const stopRef = React.useRef<(() => void) | null>(null)
+  const [streaming, setStreaming] = React.useState(false)
+
+  const mutation = useMutation({
+    mutationFn: async ({
+      chatId,
+      text,
+    }: {
+      chatId: string | null
+      text: string
+    }) => {
+      const id = chatId ?? (await createChat(text)).id
+      const message = await postMessage(id, text)
+      return { chatId: id, message }
+    },
+    onSuccess: ({ chatId, message }) => {
+      upsertMessage(client, chatId, message)
+      client.invalidateQueries({ queryKey: chatsKey })
+      setStreaming(true)
+      stopRef.current = streamReply(
+        chatId,
+        message.text,
+        (reply) => upsertMessage(client, chatId, reply),
+        () => {
+          stopRef.current = null
+          setStreaming(false)
+          client.invalidateQueries({ queryKey: chatsKey })
+        },
+      )
+    },
+  })
+
+  const stop = () => {
+    stopRef.current?.()
+    stopRef.current = null
+    setStreaming(false)
+  }
+
+  return {
+    send: mutation.mutate,
+    sending: mutation.isPending,
+    streaming,
+    stop,
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31dd61160..a9fa8a648 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1186,6 +1186,9 @@ importers:
 
   examples/react/chat:
     dependencies:
+      '@tanstack/react-query':
+        specifier: ^5.80.7
+        version: 5.90.5(react@19.2.7)
       '@tanstack/react-virtual':
         specifier: ^3.14.19
         version: link:../../../packages/react-virtual

From 7b59d17be9fa50af008cb01e39002980dd6cc152 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Thu, 15 Oct 2026 09:42:53 +0200
Subject: [PATCH 2/9] docs(examples): fix clipped sidebar rows and small icons
 in the chat example

The chat list rows shrank below their text height once the list overflowed,
which cut off the text and the selected-row highlight on phones. Keep them
at their natural height, and replace the text-glyph icons with 20px SVG
icons in 40px buttons.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/react/chat/src/index.css | 27 ++++++++++++++------
 examples/react/chat/src/main.tsx  | 41 ++++++++++++++++++++++++++-----
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/examples/react/chat/src/index.css b/examples/react/chat/src/index.css
index a9c4553f6..e94e6b8ba 100644
--- a/examples/react/chat/src/index.css
+++ b/examples/react/chat/src/index.css
@@ -94,20 +94,28 @@ button {
   background: none;
   border: 0;
   border-radius: 8px;
-  font-size: 16px;
-  height: 36px;
-  width: 36px;
+  display: grid;
+  height: 40px;
+  place-items: center;
+  width: 40px;
 }
 
 .IconButton:hover {
   background: var(--hover);
 }
 
+.NewChat {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+}
+
 .NewChat,
 .ChatLink {
   background: none;
   border: 0;
   border-radius: 8px;
+  flex: none;
   overflow: hidden;
   padding: 8px 10px;
   text-align: left;
@@ -209,11 +217,13 @@ button {
   border-radius: 999px;
   bottom: 12px;
   box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
-  height: 36px;
+  display: grid;
+  height: 40px;
   left: 50%;
+  place-items: center;
   position: absolute;
   transform: translateX(-50%);
-  width: 36px;
+  width: 40px;
 }
 
 /* Messages */
@@ -346,10 +356,11 @@ button {
   border: 0;
   border-radius: 50%;
   color: var(--accent-text);
+  display: grid;
   flex: none;
-  font-size: 16px;
-  height: 36px;
-  width: 36px;
+  height: 40px;
+  place-items: center;
+  width: 40px;
 }
 
 .SendButton:disabled {
diff --git a/examples/react/chat/src/main.tsx b/examples/react/chat/src/main.tsx
index 7281234f1..06395f89d 100644
--- a/examples/react/chat/src/main.tsx
+++ b/examples/react/chat/src/main.tsx
@@ -6,6 +6,34 @@ import { queryClient, useChats, useMessages, useSendMessage } from './queries'
 import type { Message } from './api'
 import './index.css'
 
+// Feather-style 24×24 stroke paths.
+const icons = {
+  menu: 'M3 6h18M3 12h18M3 18h18',
+  close: 'M15 18l-6-6 6-6',
+  newChat: 'M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z',
+  up: 'M12 19V5M5 12l7-7 7 7',
+  down: 'M12 5v14M19 12l-7 7-7-7',
+  stop: 'M7 7h10v10H7Z',
+}
+
+function Icon({ path }: { path: string }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={path} />
+    </svg>
+  )
+}
+
 const isNarrow = () => window.matchMedia('(max-width: 768px)').matches
 
 function App() {
@@ -47,7 +75,7 @@ function App() {
             aria-label="Close sidebar"
             onClick={() => setSidebarOpen(false)}
           >
-            ⟨
+            <Icon path={icons.close} />
           </button>
         </div>
         <button
@@ -56,7 +84,8 @@ function App() {
           aria-current={activeChatId === null ? 'page' : undefined}
           onClick={() => openChat(null)}
         >
-          ✎ New chat
+          <Icon path={icons.newChat} />
+          New chat
         </button>
         <div className="SidebarLabel">Chats</div>
         <nav className="ChatList" aria-label="Chat history">
@@ -92,7 +121,7 @@ function App() {
               aria-label="Open sidebar"
               onClick={() => setSidebarOpen(true)}
             >
-              ☰
+              <Icon path={icons.menu} />
             </button>
           )}
           <span className="MainTitle">
@@ -251,7 +280,7 @@ function MessageList({
           aria-label="Jump to latest message"
           onClick={() => virtualizer.scrollToEnd({ behavior: 'smooth' })}
         >
-          ↓
+          <Icon path={icons.down} />
         </button>
       )}
     </div>
@@ -357,7 +386,7 @@ function Composer({
           aria-label="Stop"
           onClick={onStop}
         >
-          ■
+          <Icon path={icons.stop} />
         </button>
       ) : (
         <button
@@ -366,7 +395,7 @@ function Composer({
           aria-label="Send"
           disabled={disabled || !text.trim()}
         >
-          ↑
+          <Icon path={icons.up} />
         </button>
       )}
     </form>

From f840c669f43883def0e3de6ebf90600248f4cd69 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Thu, 15 Oct 2026 09:49:13 +0200
Subject: [PATCH 3/9] docs(examples): jump to the end after a send in the chat
 example

The empty assistant reply is added in the same render as the user message,
so the last message was never the user's and scrollToEnd() never ran. Watch
the latest user message instead, and skip the first render.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/react/chat/src/main.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/examples/react/chat/src/main.tsx b/examples/react/chat/src/main.tsx
index 06395f89d..b8fb2cc0e 100644
--- a/examples/react/chat/src/main.tsx
+++ b/examples/react/chat/src/main.tsx
@@ -205,12 +205,17 @@ function MessageList({
   }, [didInitialScroll, virtualizer])
 
   // Sending a message jumps to it, like in most chat apps. Assistant output
-  // follows only when the reader is already at the latest message.
-  const lastMessage = messages[messages.length - 1]
-  const lastUserMessageId =
-    lastMessage?.author === 'user' ? lastMessage.id : null
+  // follows only when the reader is already at the latest message. The empty
+  // reply is added in the same render as the user message, so look for the
+  // latest user message rather than the last message.
+  const lastUserMessageId = [...messages]
+    .reverse()
+    .find((message) => message.author === 'user')?.id
+  const seenUserMessageIdRef = React.useRef(lastUserMessageId)
   React.useEffect(() => {
-    if (lastUserMessageId) virtualizer.scrollToEnd()
+    if (lastUserMessageId === seenUserMessageIdRef.current) return
+    seenUserMessageIdRef.current = lastUserMessageId
+    virtualizer.scrollToEnd()
   }, [lastUserMessageId, virtualizer])
 
   React.useEffect(() => {

From fb2b5d32bded3bdc135645e9ec29f075dd817292 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Thu, 15 Oct 2026 09:57:41 +0200
Subject: [PATCH 4/9] docs(examples): hide the jump button when the chat opens
 at the end

React's onScroll runs before the virtualizer reads the scroll event, so
isAtEnd() there saw the previous position and the button stayed visible
after the list landed at the end. Update the at-end state in the
virtualizer's onChange instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/react/chat/src/main.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/react/chat/src/main.tsx b/examples/react/chat/src/main.tsx
index b8fb2cc0e..4705dea17 100644
--- a/examples/react/chat/src/main.tsx
+++ b/examples/react/chat/src/main.tsx
@@ -196,6 +196,9 @@ function MessageList({
     scrollEndThreshold: 80,
     overscan: 6,
     directDomUpdates: true,
+    // Runs after the virtualizer reads each scroll event. React's onScroll
+    // runs before it, so isAtEnd() there still sees the previous position.
+    onChange: (instance) => setAtEnd(instance.isAtEnd(80)),
   })
 
   React.useLayoutEffect(() => {
@@ -232,9 +235,7 @@ function MessageList({
         ref={parentRef}
         className="Messages"
         onScroll={(event) => {
-          const isAtEnd = virtualizer.isAtEnd(80)
-          setAtEnd(isAtEnd)
-          if (!autoHistoryEnabled || isAtEnd) return
+          if (!autoHistoryEnabled || virtualizer.isAtEnd(80)) return
           const { scrollTop } = event.currentTarget
           const movingUp = scrollTop < lastScrollTopRef.current
           lastScrollTopRef.current = scrollTop

From e504682774d1a5461c6475b1db5014fb021e7ea2 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Thu, 15 Oct 2026 12:52:50 +0200
Subject: [PATCH 5/9] docs(examples): simplify the chat example

- Seed 5 chats instead of 25, and generate replies from one sentence bank
  (no lists or code blocks), so the mock API and rendering are shorter.
- Add the streamed reply with its first words, which removes the typing
  indicator and fixes an empty reply left behind by an early Stop.
- Scroll to the end in one layout effect keyed on the latest user message,
  replacing the initial-scroll state, the seen-message ref and the
  history-load timer.
- Let the composer grow with field-sizing: content instead of JavaScript.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/react/chat/src/api.ts     | 140 ++++++-----------------------
 examples/react/chat/src/index.css  |  54 +----------
 examples/react/chat/src/main.tsx   |  74 ++-------------
 examples/react/chat/src/queries.ts |   4 +-
 4 files changed, 41 insertions(+), 231 deletions(-)

diff --git a/examples/react/chat/src/api.ts b/examples/react/chat/src/api.ts
index c28e28a10..ad72d6709 100644
--- a/examples/react/chat/src/api.ts
+++ b/examples/react/chat/src/api.ts
@@ -47,30 +47,10 @@ const delay = (ms: number) =>
 
 const titles = [
   'Debounce a search input',
-  'Plan a weekend in Kraków',
+  'Virtualize a 10k row table',
   'Explain React Suspense',
-  'Sourdough starter schedule',
-  'Postgres index for a slow query',
-  'Rewrite a cover letter',
-  'Compare Vite and webpack',
+  'Plan a weekend in Kraków',
   'Beginner running plan',
-  'Virtualize a 10k row table',
-  'Name ideas for a bakery',
-  'CSS grid vs flexbox',
-  'Summarize a research paper',
-  'Fix a flaky Playwright test',
-  'Budget for a home office',
-  'Explain TypeScript generics',
-  'Birthday party games for kids',
-  'Migrate from Redux to Zustand',
-  'Learn basic Spanish phrases',
-  'Design a REST pagination API',
-  'Houseplants for low light',
-  'Write a git commit message',
-  'Explain event loop microtasks',
-  'Meal prep for the week',
-  'Accessible modal dialog',
-  'Pick a mechanical keyboard',
 ]
 
 const followUps = [
@@ -88,15 +68,6 @@ const followUps = [
   'Thanks! One more question about the last point.',
 ]
 
-const openers = [
-  'Good question.',
-  'Sure, here is how I would approach it.',
-  'Short answer: it depends on your constraints.',
-  'Let me break it down.',
-  'Here is a practical way to think about it.',
-  'There are a few options.',
-]
-
 const sentences = [
   'Start with the smallest version that works and measure it before you optimize.',
   'The main cost is usually not the code itself but the coordination around it.',
@@ -116,59 +87,14 @@ const sentences = [
   'Consistency matters more than the exact choice.',
 ]
 
-const bullets = [
-  'Keep the scope small',
-  'Measure before and after the change',
-  'Prefer boring, well-known tools',
-  'Write one test for the happy path and one for an edge case',
-  'Document the decision in one sentence',
-  'Remove what you do not use',
-  'Ask for feedback early',
-  'Automate the step you repeat most often',
-]
-
-const snippets = [
-  '```ts\nfunction debounce<T extends unknown[]>(fn: (...args: T) => void, ms: number) {\n  let id: ReturnType<typeof setTimeout>\n  return (...args: T) => {\n    clearTimeout(id)\n    id = setTimeout(() => fn(...args), ms)\n  }\n}\n```',
-  '```tsx\nconst virtualizer = useVirtualizer({\n  count: rows.length,\n  getScrollElement: () => parentRef.current,\n  estimateSize: () => 35,\n})\n```',
-  '```sql\nCREATE INDEX CONCURRENTLY orders_customer_created_idx\n  ON orders (customer_id, created_at DESC);\n```',
-  '```css\n.layout {\n  display: grid;\n  grid-template-columns: 260px 1fr;\n  height: 100vh;\n}\n```',
-  '```bash\npnpm add @tanstack/react-query\npnpm dev\n```',
-]
-
-const closers = [
-  'Let me know if you want me to go deeper on any of these.',
-  'Want me to turn this into a checklist?',
-  'I can also show a full example if that helps.',
-  'Does that match what you had in mind?',
-]
-
+// One to three paragraphs of random sentences, so rows have different heights.
 function generateReply(random: Random, prompt: string): string {
-  const parts: string[] = []
-  const quote = prompt.length > 48 ? `${prompt.slice(0, 48).trim()}…` : prompt
-  parts.push(`${pick(random, openers)} You asked: “${quote}”`)
-
-  const paragraphs = between(random, 0, 3)
-  for (let i = 0; i < paragraphs; i++) {
-    const count = between(random, 2, 4)
-    parts.push(
-      Array.from({ length: count }, () => pick(random, sentences)).join(' '),
-    )
-  }
-  if (random() < 0.3) {
-    const count = between(random, 3, 5)
-    parts.push(
-      Array.from({ length: count }, () => `- ${pick(random, bullets)}`).join(
-        '\n',
-      ),
-    )
-  }
-  if (random() < 0.25) {
-    parts.push(pick(random, snippets))
-  }
-  if (random() < 0.5) {
-    parts.push(pick(random, closers))
-  }
-  return parts.join('\n\n')
+  const paragraphs = Array.from({ length: between(random, 1, 3) }, () =>
+    Array.from({ length: between(random, 1, 4) }, () =>
+      pick(random, sentences),
+    ).join(' '),
+  )
+  return [`You asked: “${prompt}”`, ...paragraphs].join('\n\n')
 }
 
 const now = Date.now()
@@ -255,8 +181,7 @@ export async function postMessage(
 }
 
 // Streams a generated reply word by word. `onUpdate` gets the whole message
-// so far on every chunk, starting with an empty one. Returns a stop function
-// that keeps the partial reply.
+// so far on every chunk. Returns a stop function that keeps the partial reply.
 export function streamReply(
   chatId: string,
   prompt: string,
@@ -265,34 +190,25 @@ export function streamReply(
 ): () => void {
   const messages = getMessages(chatId)
   const index = messages.length
-  let message: Message = { id: `m-${nextId++}`, author: 'assistant', text: '' }
-  messages.push(message)
-  onUpdate(message)
-
   const words = generateReply(Math.random, prompt).match(/\s*\S+/g) ?? []
+  let message: Message = { id: `m-${nextId++}`, author: 'assistant', text: '' }
   let position = 0
-  let intervalId: ReturnType<typeof setInterval> | undefined
-
-  const timeoutId = setTimeout(() => {
-    intervalId = setInterval(() => {
-      const count = 1 + Math.floor(Math.random() * 3)
-      message = {
-        ...message,
-        text: message.text + words.slice(position, position + count).join(''),
-      }
-      position += count
-      messages[index] = message
-      onUpdate(message)
-      if (position >= words.length) {
-        clearInterval(intervalId)
-        touchChat(chatId)
-        onDone()
-      }
-    }, 40)
-  }, 600)
 
-  return () => {
-    clearTimeout(timeoutId)
-    clearInterval(intervalId)
-  }
+  const intervalId = setInterval(() => {
+    const count = 1 + Math.floor(Math.random() * 3)
+    message = {
+      ...message,
+      text: message.text + words.slice(position, position + count).join(''),
+    }
+    position += count
+    messages[index] = message
+    onUpdate(message)
+    if (position >= words.length) {
+      clearInterval(intervalId)
+      touchChat(chatId)
+      onDone()
+    }
+  }, 40)
+
+  return () => clearInterval(intervalId)
 }
diff --git a/examples/react/chat/src/index.css b/examples/react/chat/src/index.css
index e94e6b8ba..97c422b20 100644
--- a/examples/react/chat/src/index.css
+++ b/examples/react/chat/src/index.css
@@ -10,7 +10,6 @@
   --muted: #6b6b6b;
   --border: #e5e5e5;
   --bubble: #f1f1f1;
-  --code-bg: #f6f8fa;
   --accent: #0d0d0d;
   --accent-text: #ffffff;
   --sidebar-width: 260px;
@@ -25,7 +24,6 @@
     --muted: #9b9b9b;
     --border: #3a3a3a;
     --bubble: #303030;
-    --code-bg: #171717;
     --accent: #ececec;
     --accent-text: #0d0d0d;
   }
@@ -252,58 +250,10 @@ button {
   white-space: pre-wrap;
 }
 
-.Prose {
-  margin: 0 0 12px;
+.Message-assistant {
   white-space: pre-wrap;
 }
 
-.Prose:last-child {
-  margin-bottom: 0;
-}
-
-.Code {
-  background: var(--code-bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 13px;
-  margin: 0 0 12px;
-  overflow-x: auto;
-  padding: 12px;
-}
-
-.Typing {
-  display: inline-flex;
-  gap: 4px;
-  padding: 8px 0;
-}
-
-.Typing span {
-  animation: typing 1s infinite ease-in-out;
-  background: var(--muted);
-  border-radius: 50%;
-  height: 6px;
-  width: 6px;
-}
-
-.Typing span:nth-child(2) {
-  animation-delay: 0.15s;
-}
-
-.Typing span:nth-child(3) {
-  animation-delay: 0.3s;
-}
-
-@keyframes typing {
-  0%,
-  80%,
-  100% {
-    opacity: 0.3;
-  }
-  40% {
-    opacity: 1;
-  }
-}
-
 /* Composer */
 
 .ComposerDock {
@@ -343,9 +293,11 @@ button {
   background: none;
   border: 0;
   color: inherit;
+  field-sizing: content;
   flex: 1;
   font: inherit;
   line-height: 1.5;
+  max-height: 200px;
   outline: none;
   padding: 6px 0;
   resize: none;
diff --git a/examples/react/chat/src/main.tsx b/examples/react/chat/src/main.tsx
index 4705dea17..a30f9a202 100644
--- a/examples/react/chat/src/main.tsx
+++ b/examples/react/chat/src/main.tsx
@@ -179,8 +179,6 @@ function MessageList({
 }) {
   const parentRef = React.useRef<HTMLDivElement>(null)
   const lastScrollTopRef = React.useRef(0)
-  const [didInitialScroll, setDidInitialScroll] = React.useState(false)
-  const [autoHistoryEnabled, setAutoHistoryEnabled] = React.useState(false)
   const [atEnd, setAtEnd] = React.useState(true)
 
   const virtualizer = useVirtualizer({
@@ -198,51 +196,31 @@ function MessageList({
     directDomUpdates: true,
     // Runs after the virtualizer reads each scroll event. React's onScroll
     // runs before it, so isAtEnd() there still sees the previous position.
-    onChange: (instance) => setAtEnd(instance.isAtEnd(80)),
+    onChange: (instance) => setAtEnd(instance.isAtEnd()),
   })
 
-  React.useLayoutEffect(() => {
-    if (didInitialScroll) return
-    virtualizer.scrollToEnd()
-    setDidInitialScroll(true)
-  }, [didInitialScroll, virtualizer])
-
-  // Sending a message jumps to it, like in most chat apps. Assistant output
-  // follows only when the reader is already at the latest message. The empty
-  // reply is added in the same render as the user message, so look for the
-  // latest user message rather than the last message.
+  // Start at the latest message, and jump to it again after each send, like
+  // most chat apps. Assistant output follows only when the reader is already
+  // at the latest message (followOnAppend).
   const lastUserMessageId = [...messages]
     .reverse()
     .find((message) => message.author === 'user')?.id
-  const seenUserMessageIdRef = React.useRef(lastUserMessageId)
-  React.useEffect(() => {
-    if (lastUserMessageId === seenUserMessageIdRef.current) return
-    seenUserMessageIdRef.current = lastUserMessageId
+  React.useLayoutEffect(() => {
     virtualizer.scrollToEnd()
   }, [lastUserMessageId, virtualizer])
 
-  React.useEffect(() => {
-    const id = window.setTimeout(() => {
-      setAutoHistoryEnabled(true)
-    }, 250)
-
-    return () => window.clearTimeout(id)
-  }, [])
-
   return (
     <div className="Pane">
       <div
         ref={parentRef}
         className="Messages"
         onScroll={(event) => {
-          if (!autoHistoryEnabled || virtualizer.isAtEnd(80)) return
+          if (virtualizer.isAtEnd()) return
           const { scrollTop } = event.currentTarget
           const movingUp = scrollTop < lastScrollTopRef.current
           lastScrollTopRef.current = scrollTop
-          // Load only while the reader scrolls up into the top. Safari's
-          // rubber band reports negative positions past the top and then
-          // settles back down to 0; neither is the reader asking for more
-          // history, and loading on the settle would load twice per bounce.
+          // Load only while scrolling up. Safari's rubber band reports
+          // negative positions past the top; ignore them.
           if (movingUp && scrollTop >= 0 && scrollTop < 400) {
             onLoadOlder()
           }
@@ -302,31 +280,7 @@ function MessageView({ message }: { message: Message }) {
     )
   }
 
-  return (
-    <div className="Message Message-assistant">
-      {message.text ? (
-        message.text.split(/(```[\s\S]*?(?:```|$))/).map((part, index) =>
-          part.startsWith('```') ? (
-            <pre key={index} className="Code">
-              {part.replace(/^```\w*\n?/, '').replace(/```$/, '')}
-            </pre>
-          ) : (
-            part.trim() && (
-              <p key={index} className="Prose">
-                {part.trim()}
-              </p>
-            )
-          ),
-        )
-      ) : (
-        <span className="Typing" aria-label="Assistant is typing">
-          <span />
-          <span />
-          <span />
-        </span>
-      )}
-    </div>
-  )
+  return <div className="Message Message-assistant">{message.text}</div>
 }
 
 function Composer({
@@ -341,15 +295,6 @@ function Composer({
   onStop: () => void
 }) {
   const [text, setText] = React.useState('')
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
-
-  React.useLayoutEffect(() => {
-    const textarea = textareaRef.current!
-    textarea.style.height = 'auto'
-    if (text) {
-      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
-    }
-  }, [text])
 
   const submit = () => {
     const value = text.trim()
@@ -367,7 +312,6 @@ function Composer({
       }}
     >
       <textarea
-        ref={textareaRef}
         rows={1}
         value={text}
         placeholder="Ask anything"
diff --git a/examples/react/chat/src/queries.ts b/examples/react/chat/src/queries.ts
index cc1b52b24..753988293 100644
--- a/examples/react/chat/src/queries.ts
+++ b/examples/react/chat/src/queries.ts
@@ -19,9 +19,7 @@ import type { Message, MessagePage } from './api'
 // The cache is the source of truth while the page is open: new messages are
 // written into it directly, so a background refetch would only fight them.
 export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: { staleTime: Infinity, refetchOnWindowFocus: false },
-  },
+  defaultOptions: { queries: { staleTime: Infinity } },
 })
 
 const chatsKey = ['chats'] as const

From 1d91fea8e5107aeec85d67b4db551383a05d2153 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Thu, 15 Oct 2026 13:17:05 +0200
Subject: [PATCH 6/9] docs(examples): add prompt hints to the empty chat

Show three prompts under the composer when no chat is open. A tap sends the
prompt as the first message, so a new chat and a streamed reply start in one
step.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/react/chat/src/index.css | 22 ++++++++++++++++++++++
 examples/react/chat/src/main.tsx  | 19 +++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/examples/react/chat/src/index.css b/examples/react/chat/src/index.css
index 97c422b20..505829a72 100644
--- a/examples/react/chat/src/index.css
+++ b/examples/react/chat/src/index.css
@@ -275,6 +275,28 @@ button {
   margin: 0 0 24px;
 }
 
+.Suggestions {
+  display: flex;
+  flex-direction: column;
+  margin-top: 16px;
+  max-width: 768px;
+  width: 100%;
+}
+
+.Suggestion {
+  background: none;
+  border: 0;
+  border-radius: 12px;
+  color: var(--muted);
+  padding: 10px 20px;
+  text-align: left;
+}
+
+.Suggestion:hover:not(:disabled) {
+  background: var(--hover);
+  color: var(--text);
+}
+
 .Composer {
   align-items: flex-end;
   background: var(--bg);
diff --git a/examples/react/chat/src/main.tsx b/examples/react/chat/src/main.tsx
index a30f9a202..8ff00ce2e 100644
--- a/examples/react/chat/src/main.tsx
+++ b/examples/react/chat/src/main.tsx
@@ -34,6 +34,12 @@ function Icon({ path }: { path: string }) {
   )
 }
 
+const suggestions = [
+  'How do I virtualize a chat list?',
+  'Explain scroll anchoring in one paragraph.',
+  'What should I test in an infinite list?',
+]
+
 const isNarrow = () => window.matchMedia('(max-width: 768px)').matches
 
 function App() {
@@ -138,6 +144,19 @@ function App() {
           <div className="Empty">
             <h1>What can I help with?</h1>
             {composer}
+            <div className="Suggestions">
+              {suggestions.map((text) => (
+                <button
+                  key={text}
+                  type="button"
+                  className="Suggestion"
+                  disabled={sending || streaming}
+                  onClick={() => onSend(text)}
+                >
+                  {text}
+                </button>
+              ))}
+            </div>
           </div>
         )}
       </main>

From 96bdfc481300facd66e804acca48cf9009343f82 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Thu, 15 Oct 2026 13:21:42 +0200
Subject: [PATCH 7/9] docs(examples): link the chat blog post and add icons to
 the prompt hints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Answer "How do I virtualize a chat list?" with a fixed reply that links
  Tanner Linsley's "Chat UIs Are Lists Until They Aren't", and render links
  in assistant messages.
- Add a colored Feather icon to each prompt hint.
- Rename the seeded "Plan a weekend in Kraków" chat to Rzeszów.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/react/chat/src/api.ts    | 14 +++++++++--
 examples/react/chat/src/index.css | 12 ++++++++++
 examples/react/chat/src/main.tsx  | 39 ++++++++++++++++++++++++++-----
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/examples/react/chat/src/api.ts b/examples/react/chat/src/api.ts
index ad72d6709..9d592d442 100644
--- a/examples/react/chat/src/api.ts
+++ b/examples/react/chat/src/api.ts
@@ -49,7 +49,7 @@ const titles = [
   'Debounce a search input',
   'Virtualize a 10k row table',
   'Explain React Suspense',
-  'Plan a weekend in Kraków',
+  'Plan a weekend in Rzeszów',
   'Beginner running plan',
 ]
 
@@ -97,6 +97,15 @@ function generateReply(random: Random, prompt: string): string {
   return [`You asked: “${prompt}”`, ...paragraphs].join('\n\n')
 }
 
+// Fixed replies for prompts that deserve a real answer.
+const cannedReplies: Record<string, string> = {
+  'How do I virtualize a chat list?': [
+    'You asked: “How do I virtualize a chat list?”',
+    'A chat is a virtual list anchored to the end: new messages arrive at the bottom, older history loads at the top, and replies grow while they stream. This example uses anchorTo: "end" with stable keys from getItemKey, followOnAppend with scrollEndThreshold, and scrollToEnd() with isAtEnd() for the jump button.',
+    "Tanner Linsley explains it in “Chat UIs Are Lists Until They Aren't”: https://tanstack.com/blog/tanstack-virtual-chat",
+  ].join('\n\n'),
+}
+
 const now = Date.now()
 const chats: Chat[] = titles.map((title, index) => ({
   id: `chat-${index}`,
@@ -190,7 +199,8 @@ export function streamReply(
 ): () => void {
   const messages = getMessages(chatId)
   const index = messages.length
-  const words = generateReply(Math.random, prompt).match(/\s*\S+/g) ?? []
+  const reply = cannedReplies[prompt] ?? generateReply(Math.random, prompt)
+  const words = reply.match(/\s*\S+/g) ?? []
   let message: Message = { id: `m-${nextId++}`, author: 'assistant', text: '' }
   let position = 0
 
diff --git a/examples/react/chat/src/index.css b/examples/react/chat/src/index.css
index 505829a72..6b4b61ca7 100644
--- a/examples/react/chat/src/index.css
+++ b/examples/react/chat/src/index.css
@@ -254,6 +254,11 @@ button {
   white-space: pre-wrap;
 }
 
+.Message-assistant a {
+  color: inherit;
+  overflow-wrap: anywhere;
+}
+
 /* Composer */
 
 .ComposerDock {
@@ -284,14 +289,21 @@ button {
 }
 
 .Suggestion {
+  align-items: center;
   background: none;
   border: 0;
   border-radius: 12px;
   color: var(--muted);
+  display: flex;
+  gap: 12px;
   padding: 10px 20px;
   text-align: left;
 }
 
+.Suggestion span {
+  display: flex;
+}
+
 .Suggestion:hover:not(:disabled) {
   background: var(--hover);
   color: var(--text);
diff --git a/examples/react/chat/src/main.tsx b/examples/react/chat/src/main.tsx
index 8ff00ce2e..6698e3361 100644
--- a/examples/react/chat/src/main.tsx
+++ b/examples/react/chat/src/main.tsx
@@ -6,7 +6,7 @@ import { queryClient, useChats, useMessages, useSendMessage } from './queries'
 import type { Message } from './api'
 import './index.css'
 
-// Feather-style 24×24 stroke paths.
+// Feather icon paths (MIT, feathericons.com), 24×24 strokes.
 const icons = {
   menu: 'M3 6h18M3 12h18M3 18h18',
   close: 'M15 18l-6-6 6-6',
@@ -35,9 +35,21 @@ function Icon({ path }: { path: string }) {
 }
 
 const suggestions = [
-  'How do I virtualize a chat list?',
-  'Explain scroll anchoring in one paragraph.',
-  'What should I test in an infinite list?',
+  {
+    text: 'How do I virtualize a chat list?',
+    icon: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z',
+    color: '#3b82f6',
+  },
+  {
+    text: 'Explain scroll anchoring in one paragraph.',
+    icon: 'M12 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12 22V8M5 12H2a10 10 0 0 0 20 0h-3',
+    color: '#f59e0b',
+  },
+  {
+    text: 'What should I test in an infinite list?',
+    icon: 'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3',
+    color: '#10b981',
+  },
 ]
 
 const isNarrow = () => window.matchMedia('(max-width: 768px)').matches
@@ -145,7 +157,7 @@ function App() {
             <h1>What can I help with?</h1>
             {composer}
             <div className="Suggestions">
-              {suggestions.map((text) => (
+              {suggestions.map(({ text, icon, color }) => (
                 <button
                   key={text}
                   type="button"
@@ -153,6 +165,9 @@ function App() {
                   disabled={sending || streaming}
                   onClick={() => onSend(text)}
                 >
+                  <span style={{ color }}>
+                    <Icon path={icon} />
+                  </span>
                   {text}
                 </button>
               ))}
@@ -299,7 +314,19 @@ function MessageView({ message }: { message: Message }) {
     )
   }
 
-  return <div className="Message Message-assistant">{message.text}</div>
+  return (
+    <div className="Message Message-assistant">
+      {message.text.split(/(https?:\/\/\S+)/).map((part, index) =>
+        index % 2 ? (
+          <a key={index} href={part} target="_blank" rel="noreferrer">
+            {part}
+          </a>
+        ) : (
+          part
+        ),
+      )}
+    </div>
+  )
 }
 
 function Composer({

From 9e01a9ad7a139b00348d89d42aae901396dcc383 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Thu, 15 Oct 2026 14:33:28 +0200
Subject: [PATCH 8/9] docs(examples): keep the chat opened while a send is in
 flight

The send selects its chat when it finishes, about 100 ms later. Opening
another chat in that time was undone. Select the sent-to chat only when the
selection has not changed since the send started.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/react/chat/src/main.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples/react/chat/src/main.tsx b/examples/react/chat/src/main.tsx
index 6698e3361..23b17a7fe 100644
--- a/examples/react/chat/src/main.tsx
+++ b/examples/react/chat/src/main.tsx
@@ -69,7 +69,13 @@ function App() {
   const onSend = (text: string) => {
     send(
       { chatId: activeChatId, text },
-      { onSuccess: ({ chatId }) => setActiveChatId(chatId) },
+      {
+        // Keep a chat the user opened while the send was in flight.
+        onSuccess: ({ chatId }) =>
+          setActiveChatId((current) =>
+            current === activeChatId ? chatId : current,
+          ),
+      },
     )
   }
 

From 92350d6677684d3d72185fe19c0d51803e8aa2a9 Mon Sep 17 00:00:00 2001
From: Damian Pieczynski <piecyk@gmail.com>
Date: Thu, 15 Oct 2026 15:06:08 +0200
Subject: [PATCH 9/9] docs(examples): load older messages after a direct jump
 to the top

The scroll handler returned early when isAtEnd() was true. React's onScroll
runs before the virtualizer reads the event, so after one jump from the end
to the top it still saw the old position, skipped the load and did not
record scrollTop. Drop the check: scrolling up near the top already gates
the load.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/react/chat/src/main.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/react/chat/src/main.tsx b/examples/react/chat/src/main.tsx
index 23b17a7fe..0881665bf 100644
--- a/examples/react/chat/src/main.tsx
+++ b/examples/react/chat/src/main.tsx
@@ -255,7 +255,6 @@ function MessageList({
         ref={parentRef}
         className="Messages"
         onScroll={(event) => {
-          if (virtualizer.isAtEnd()) return
           const { scrollTop } = event.currentTarget
           const movingUp = scrollTop < lastScrollTopRef.current
           lastScrollTopRef.current = scrollTop