SutraUI.Response (Sutra UI v0.4.0)

View Source

Renders model responses as plain text or streamed Markdown.

Response is intentionally small: it handles the response surface and, when format="markdown", uses MDEx to render sanitized Markdown. It does not own chat state, provider callbacks, or streaming transport. The parent LiveView passes the current text as it changes.

Examples

<.response value={@answer} />

<.response id="answer" value={@answer} streaming reveal="word" />

<.response value={@streamed_markdown} format="markdown" streaming />

<.response>
  <p>Custom rendered content.</p>
</.response>

Attributes

  • value - Response text or Markdown. Defaults to nil.
  • format - One of text or markdown. Defaults to text.
  • streaming - Marks the response as incomplete. The parent LiveView owns this state.
  • reveal - One of chunk, word, character, or line. Defaults to chunk.
  • sanitize - Sanitizes Markdown HTML output. Defaults to true.
  • mdex_options - Extra MDEx options passed to the renderer.
  • class - Additional CSS classes.

Animated reveal modes (word, character, line) require an id because Phoenix LiveView hooks need a stable DOM id. They smooth already-received text in the browser; the parent LiveView still owns provider streaming. Markdown always renders by chunk so partial Markdown can stay valid and sanitized.

Accessibility

  • When streaming is true, the root sets aria-live="polite" unless you pass your own aria-live value, and aria-busy="true" unless you pass your own value.
  • Markdown output is sanitized by default before being marked as safe HTML.

Summary

Functions

response(assigns)

Attributes

  • id (:string) - Stable DOM id. Required for animated reveal modes. Defaults to nil.
  • value (:string) - Response text or Markdown. Defaults to nil.
  • format (:string) - Response format. Defaults to "text". Must be one of "text", or "markdown".
  • streaming (:boolean) - Marks the response as incomplete; enables MDEx streaming mode for Markdown. Defaults to false.
  • reveal (:string) - How newly received text appears. Defaults to "chunk". Must be one of "chunk", "word", "character", or "line".
  • sanitize (:boolean) - Sanitize Markdown HTML output. Defaults to true.
  • mdex_options (:any) - Additional MDEx options. Defaults to [].
  • class (:any) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["role", "aria-label", "aria-labelledby", "aria-live", "aria-busy"].

Slots

  • inner_block - Optional custom response content.