Jaspers Jaspers Research: Research rooms where configurable analysts research companies in parallel over SEC filings data, answering with checked citations.
| 1 | import { useMemo, type ReactElement, type ReactNode } from 'react' |
| 2 | import { citationLink, numberKey, type Citation } from './citations' |
| 3 | import { parseMarkdown, type Block, type Inline } from './markdown' |
| 4 | |
| 5 | // An analyst's Markdown as React elements. Nothing here becomes HTML from a string: the parser reads |
| 6 | // the text into a tree and each node is an element, so an answer cannot inject markup. Links go out |
| 7 | // through the bridge, since the frame cannot open them. A citation tag renders as its sentence and a |
| 8 | // numbered marker that opens the source on sec.gov, on the quoted words, once the room has checked it. |
| 9 | |
| 10 | /** The message's citations, as the markers need them: a number per passage, and what is known about each. */ |
| 11 | export interface CiteLookup { |
| 12 | numbers: Map<string, number> |
| 13 | resolved: Map<number, Citation> |
| 14 | } |
| 15 | |
| 16 | interface Render { |
| 17 | onLink: (href: string) => void |
| 18 | cite: CiteLookup | null |
| 19 | } |
| 20 | |
| 21 | export function Markdown({ source, onLink, cite = null }: { source: string; onLink: (href: string) => void; cite?: CiteLookup | null }): ReactElement { |
| 22 | const blocks = useMemo(() => parseMarkdown(source), [source]) |
| 23 | const render: Render = { onLink, cite } |
| 24 | return <div className="rs-md">{blocks.map((block, i) => renderBlock(block, i, render))}</div> |
| 25 | } |
| 26 | |
| 27 | function renderBlock(block: Block, key: number, render: Render): ReactNode { |
| 28 | const onLink = render.onLink |
| 29 | switch (block.kind) { |
| 30 | case 'heading': |
| 31 | return ( |
| 32 | <div key={key} className={`rs-h rs-h${Math.min(block.level, 4)}`}> |
| 33 | {inline(block.children, render)} |
| 34 | </div> |
| 35 | ) |
| 36 | case 'paragraph': |
| 37 | return <p key={key}>{inline(block.children, render)}</p> |
| 38 | case 'list': { |
| 39 | const items = block.items.map((item, i) => <li key={i}>{inline(item, render)}</li>) |
| 40 | return block.ordered ? <ol key={key}>{items}</ol> : <ul key={key}>{items}</ul> |
| 41 | } |
| 42 | case 'code': |
| 43 | return ( |
| 44 | <pre key={key}> |
| 45 | <code>{block.text}</code> |
| 46 | </pre> |
| 47 | ) |
| 48 | case 'table': |
| 49 | return ( |
| 50 | <div key={key} className="rs-table"> |
| 51 | <table> |
| 52 | <thead> |
| 53 | <tr> |
| 54 | {block.header.map((cell, i) => ( |
| 55 | <th key={i} style={{ textAlign: block.align[i] ?? undefined }}> |
| 56 | {inline(cell, render)} |
| 57 | </th> |
| 58 | ))} |
| 59 | </tr> |
| 60 | </thead> |
| 61 | <tbody> |
| 62 | {block.rows.map((row, r) => ( |
| 63 | <tr key={r}> |
| 64 | {row.map((cell, i) => ( |
| 65 | <td key={i} style={{ textAlign: block.align[i] ?? undefined }}> |
| 66 | {inline(cell, render)} |
| 67 | </td> |
| 68 | ))} |
| 69 | </tr> |
| 70 | ))} |
| 71 | </tbody> |
| 72 | </table> |
| 73 | </div> |
| 74 | ) |
| 75 | case 'quote': |
| 76 | return <blockquote key={key}>{inline(block.children, render)}</blockquote> |
| 77 | case 'rule': |
| 78 | return <hr key={key} /> |
| 79 | } |
| 80 | return null |
| 81 | } |
| 82 | |
| 83 | function inline(nodes: Inline[], render: Render): ReactNode[] { |
| 84 | const { onLink, cite } = render |
| 85 | return nodes.map((node, i) => { |
| 86 | switch (node.kind) { |
| 87 | case 'text': |
| 88 | return node.text |
| 89 | case 'code': |
| 90 | return <code key={i}>{node.text}</code> |
| 91 | case 'strong': |
| 92 | return <strong key={i}>{inline(node.children, render)}</strong> |
| 93 | case 'em': |
| 94 | return <em key={i}>{inline(node.children, render)}</em> |
| 95 | case 'link': |
| 96 | return ( |
| 97 | <a |
| 98 | key={i} |
| 99 | href={node.href} |
| 100 | title={node.href} |
| 101 | onClick={(event) => { |
| 102 | event.preventDefault() |
| 103 | onLink(node.href) |
| 104 | }} |
| 105 | > |
| 106 | {inline(node.children, render)} |
| 107 | </a> |
| 108 | ) |
| 109 | case 'cite': { |
| 110 | const slot = numberKey(node.attrs) |
| 111 | const n = slot === null ? undefined : cite?.numbers.get(slot) |
| 112 | const citation = n === undefined ? undefined : cite?.resolved.get(n) |
| 113 | return ( |
| 114 | <span key={i} className="rs-cited"> |
| 115 | {inline(node.children, render)} |
| 116 | {n !== undefined && <CiteMark n={n} citation={citation} onLink={onLink} />} |
| 117 | </span> |
| 118 | ) |
| 119 | } |
| 120 | } |
| 121 | return null |
| 122 | }) |
| 123 | } |
| 124 | |
| 125 | /** The [n] after a cited sentence: a link to the source once the room has one, a plain mark before. */ |
| 126 | export function CiteMark({ n, citation, onLink }: { n: number; citation: Citation | undefined; onLink: (href: string) => void }): ReactElement { |
| 127 | const state = citation?.verified === true ? 'rs-cite-ok' : citation?.verified === false ? 'rs-cite-bad' : 'rs-cite-pending' |
| 128 | const url = citation ? citationLink(citation) : null |
| 129 | if (!url) return <sup className={`rs-cite ${state}`}>[{n}]</sup> |
| 130 | return ( |
| 131 | <sup className={`rs-cite ${state}`}> |
| 132 | <a |
| 133 | href={url} |
| 134 | title={citation?.verified === false ? 'The quote was not found in the source; this opens the document.' : `Opens the filing on sec.gov with the quoted passage highlighted.`} |
| 135 | onClick={(event) => { |
| 136 | event.preventDefault() |
| 137 | onLink(url) |
| 138 | }} |
| 139 | > |
| 140 | [{n}] |
| 141 | </a> |
| 142 | </sup> |
| 143 | ) |
| 144 | } |