Introduction

Ten component families for the future agentic-chat product: the conversation shell, message rows, streaming markdown, the composer, and the affordances around them (thinking states, reasoning traces, code, suggestions, actions, citations).

Two properties hold across the whole family:

• Pure presentation, transport-agnostic. No component fetches, streams, or talks to an SDK. They take strings and state — feed them from the AI SDK, SSE, websockets, or a scripted simulation, and they render the same either way.
• Vendored and reskinned, not depended on. The component shapes follow Vercel AI Elements patterns, vendored into the design system and rebuilt on Reva primitives — house tokens, Phosphor icons, the shared motion springs, Text and Heading, the Empty and Alert families. There is no upstream package to track.

How the pieces compose

Message doesn't render replies — it renders children. MessageContent is a composition seam: Response, CodeBlock, Sources, Reasoning, and Loader are independent parts you compose inside it, in whatever order the reply's parts arrive.

<Message from="assistant">
  <MessageContent>
    <Reasoning>…</Reasoning> {/* the thinking trace, if the reply has one */}
    <Response>{text}</Response> {/* the streamed markdown body */}
    <CodeBlock code={snippet} language="ts" /> {/* a standalone code part */}
    <Sources>…</Sources> {/* retrieval citations */}
  </MessageContent>
</Message>

That free composition is deliberate: when the product adds structured snippets (client cards, holdings tables, charts inside replies), they become new parts dropped into the same seam — no change to the message API.

What each page covers

• Conversation — the bounded chat scroll shell: stick-to-bottom while streaming, the floating jump-to-latest button, the empty state.
• Message — one chat row per role: alignment and surfaces, CSS-only consecutive grouping, avatars.
• Response — streaming-safe markdown for assistant replies, themed to Reva.
• Prompt Input — the composer: form semantics, send/stop, type-ahead while streaming, attachment chips.
• Suggestion — the prompt-starter chips row.
• Reasoning — the collapsible thinking trace, auto-open while it streams.
• Loader — thinking affordances: the staggered three-dot loader and the shimmer status line.
• Code Block — standalone highlighted code with line numbers and a copy control.
• Actions — the quiet icon-action row under assistant replies (copy, regenerate, vote).
• Sources — the retrieval-citations disclosure and inline citation markers.