Usage

import { MessageResponse } from "@tulipfarm/sprout/message-response";

<MessageResponse streaming={message.status === "streaming"}>
  {message.text}
</MessageResponse>

children is the Markdown string. There are no variants or sizes: the reply uses the body text size and fills its column. Long words and URLs wrap, so it never pushes a chat column wider.

Markdown

Headings, emphasis, strikethrough, nested and numbered lists, task lists, quotes, rules, aligned tables, autolinks, and fenced code. A fence with a language gets syntax colors; a fence without one shows astext. Raw HTML is dropped and images are not shown.

1

export const launch = { date: "2026-03-20", channel: "email" } as const;

1

Plain fence: no language, shown as text.

Streaming

Set streaming while tokens arrive. A pulsing caret follows the text and the reply is marked busy. An empty reply that is streaming shows only the caret, which is the waiting state.

Table viewport

import { MessageTableViewport } from "@tulipfarm/sprout/message-response";

<MessageTableViewport bounded={rowViews.length > 0}>
  <MessageResponse>{text}</MessageResponse>
</MessageTableViewport>

Every table scrolls in its own focusable region. Inside abounded viewport a table stops at 12rem and scrolls both ways with a sticky header, so row cards below it stay in view. Without one, tables grow to their full height and scroll sideways only when their columns cannot fit.

Custom links

<MessageResponse
  renderLink={(href, label) => {
    const citation = citationId(href);
    if (citation) return <Citation id={citation}>{label}</Citation>;
    if (isWorkspaceDownload(href)) return <DownloadLink path={href}>{label}</DownloadLink>;
    return <a href={href} target="_blank" rel="noopener noreferrer">{label}</a>;
  }}
>
  {text}
</MessageResponse>

Without renderLink, links open in a new tab withnoopener. With it, every link goes through your function, so return a plain link for the ones you do not handle. The examples use sample adapters: citations check access, then show the passage, a hidden notice, or a retry; downloads report progress, success, or failure.

Markdown files

<FileRenderersProvider
  renderers={{ markdown: ({ text }) => <MessageResponse>{text}</MessageResponse> }}
>
  <FileViewer file={file} open={open} onOpenChange={setOpen} />
</FileRenderersProvider>

In a panel

Put a reply in a bordered panel when it sits among other details, such as a chat handoff.

Accessibility

Headings, lists, quotes, and tables keep their native roles. Each table scroll region is named “Response table” and takes focus, so keyboard users can scroll it with the arrow keys. The reply setsaria-busy while it streams and the caret is hidden from screen readers. Links and table regions show a focus ring. The caret stops pulsing with reduced motion and uses the system text color in forced colors mode.