Prose
Answer text: paragraphs, lists, code and citations, and never any raw markup.
SourcePackage @kerf-js/veneer
Preview
tsx
import { Prose } from '@kerf-js/veneer'import { SparkleIcon } from '@kerf-js/veneer-icons'import type { AgentSource } from '@kerf-js/veneer'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: 'kerf 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\nkerf ' + 'deploy mobile-bff --branch main\n' + '```\n'Installation
npm install @kerf-js/veneerUsage
tsx
import { Prose } from '@kerf-js/veneer'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. |