Skip to content
kerfjsGitHub

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/veneer

Usage

tsx
import { Prose } from '@kerf-js/veneer'

When to use

Use it for

  • Showing model output safely

Reach for something else

Accessibility

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

API Reference

PropTypeDefaultDescription
textstring—The text. It can still be arriving: an open code fence draws as code.
sourcesAgentSource[][]What [1] points at.
basestring'src'Joins citations to their Sources.

RelatedAssistantCiteMarkdown