Prose

Answer text: paragraphs, lists, code and citations, and never any raw markup.

SourcePackage @weft-js/warp

Preview

tsx

import { Prose } from '@weft-js/warp'import { SparkleIcon } from '@weft-js/warp-icons'import type { AgentSource } from '@weft-js/warp'export function Answer() {  return (    <div data-scope="assistant">      <span data-part="mark"><SparkleIcon /></span>      <div data-part="content"><Prose text={REPORT} sources={CITED} base="report" /></div>    </div>  )}const DEPLOY_SOURCES: AgentSource[] = [  { title: 'd-4819 build log', path: 'mobile-bff · 15:27', snippet: 'health check failed: upstream timed out after 3000 ms in ap-south' },  { title: 'Health checks', path: 'weft docs · Deploys', snippet: 'A deploy that fails three checks in a row is held back from traffic.' },  { title: 'c44e190', path: 'mobile-bff · retry.ts · L18', snippet: 'const attempts = 5 // was 2' },]const CITED = DEPLOY_SOURCES.slice(1)const REPORT = 'Three failed checks held the deploy back [1].\n\n- `d-4801` is still live.\n- Lower `attempts` to 2 and redeploy.\n\n```Shell\nweft deploy mobile-bff --branch main\n```\n'

Installation

npm install @weft-js/warp

Usage

tsx

import { Prose } from '@weft-js/warp'<div data-scope="assistant">  <span data-part="mark"><SparkleIcon /></span>  <div data-part="content"><Prose text={REPORT} sources={CITED} base="report" /></div></div>

When to use

Use it for

Showing model output safely

Reach for something else

Markdown, when you want full Markdown

Accessibility

A code block can be reached with Tab, so it scrolls from the keyboard.

API Reference

Prop	Type	Default	Description
`text`	`string`	—	The text. It can still be arriving: an open code fence draws as code.
`sources`	`AgentSource[]`	`[]`	What `[1]` points at.
`base`	`string`	`'src'`	Joins citations to their Sources.

RelatedAssistant Cite Markdown