@aimform/document

Structured document block renderer for the Aimform platform. Renders document blocks (headings, paragraphs, code, tables, charts, callouts, images, etc.) as a unified document, used by both the document editor and AI chat responses.

Installation

pnpm add @aimform/document

Quick Start

import { DocumentRenderer } from "@aimform/document";
import type { DocumentBlock } from "@aimform/document";

const blocks: DocumentBlock[] = [
  { id: "1", blockType: "heading", content: "My Document", position: 0, metadata: { level: 2 } },
  { id: "2", blockType: "paragraph", content: "Hello **world**!", position: 1 },
  { id: "3", blockType: "code", content: "console.log('hi')", position: 2, metadata: { language: "typescript" } },
  { id: "4", blockType: "divider", content: "", position: 3 },
  { id: "5", blockType: "callout", content: "**Note:** this is important.", position: 4 },
];

<DocumentRenderer blocks={blocks} />

Block Types

| Block Type | Description | Metadata | |---|---|---| | paragraph | Text content with markdown formatting | — | | heading | Section title | level: 1 \| 2 \| 3 | | code | Code block with syntax highlighting | language: string | | table | Markdown-formatted table (\| col \| val \|) | — | | chart | Chart data (ChartConfig JSON) | chartType: "bar"\|"line"\|"area"\|"pie"\|"scatter"\|"radar", title: string | | list | Ordered or unordered list | ordered: boolean | | quote | Blockquote text | — | | callout | Highlighted info/warning box | — | | divider | Horizontal rule | — | | image | Image embed | alt: string, width: number, height: number | | embedded_view | Embedded view reference | title: string |

Custom Renderers

Pass renderers to override the default rendering for any block type:

import { DocumentRenderer } from "@aimform/document";
import { MyChart } from "./MyChart";

<DocumentRenderer
  blocks={blocks}
  renderers={{
    chart: (block) => <MyChart config={JSON.parse(block.content)} />,
    code: (block) => <MyCodeBlock language={block.metadata?.language} code={block.content} />,
    table: (block) => <MyTable markdown={block.content} />,
    image: (block) => <img src={block.content} alt={block.metadata?.alt as string} />,
  }}
/>

Default Renderers

When no custom renderer is provided:

| Block Type | Default Rendering | |---|---| | heading | Rendered as markdown heading (#, ##, ###) | | paragraph | Rendered as markdown (GFM) via react-markdown | | code | Falls back to paragraph (no syntax highlighting) | | table | Rendered as markdown table via react-markdown | | chart | Falls back to paragraph | | divider | <hr> element | | quote | <blockquote> with markdown content | | callout | Bordered box with "!" icon and markdown content | | list | Falls back to paragraph | | image | Falls back to paragraph | | embedded_view | Falls back to paragraph |

Types

DocumentBlock

interface DocumentBlock {
  id: string;
  blockType: DocumentBlockType | string;
  content: string;
  position?: number;
  metadata?: Record<string, unknown>;
}

DocumentBlockType

type DocumentBlockType =
  | "paragraph" | "heading" | "code" | "table" | "chart"
  | "list" | "quote" | "callout" | "divider" | "image" | "embedded_view";

DocumentBlockRenderers

interface DocumentBlockRenderers {
  heading?: (block: DocumentBlock & { metadata?: { level?: number } }) => ReactNode;
  code?: (block: DocumentBlock & { metadata?: { language?: string } }) => ReactNode;
  table?: (block: DocumentBlock) => ReactNode;
  chart?: (block: DocumentBlock & { metadata?: { chartType?: string; title?: string } }) => ReactNode;
  image?: (block: DocumentBlock & { metadata?: { alt?: string } }) => ReactNode;
  divider?: (block: DocumentBlock) => ReactNode;
  quote?: (block: DocumentBlock) => ReactNode;
  callout?: (block: DocumentBlock) => ReactNode;
  list?: (block: DocumentBlock & { metadata?: { ordered?: boolean } }) => ReactNode;
  embeddedView?: (block: DocumentBlock & { metadata?: { title?: string } }) => ReactNode;
}

Markdown Support

The DocumentMarkdown component renders content as GitHub-Flavored Markdown (tables, strikethrough, task lists, URLs) via react-markdown + remark-gfm.

import { DocumentMarkdown } from "@aimform/document";

<DocumentMarkdown content="**bold** and _italic_ with | tables |" />