# FormattedDocument

A lightweight Markdown-to-HTML renderer with a collapsible preview. Designed for displaying AI-generated documents, reports, and structured text inside the assistant panel.

---

## Import

```tsx
import { FormattedDocument } from 'xertica-ui/assistant';
```

---

## Basic Usage

```tsx
<FormattedDocument content="# Report\n\nThis is a **bold** statement.\n\n- Item one\n- Item two" />
```

---

## Props

| Prop               | Type     | Default      | Description                                                |
| ------------------ | -------- | ------------ | ---------------------------------------------------------- |
| `content`          | `string` | _(required)_ | Raw Markdown string to render                              |
| `maxPreviewLength` | `number` | `500`        | Character count shown before the "See more" toggle appears |
| `className`        | `string` | `''`         | Additional CSS classes for the outer container             |

---

## Supported Markdown Syntax

| Syntax              | Output                                     |
| ------------------- | ------------------------------------------ |
| `# Heading 1`       | `<h1>` — `text-xl font-medium`             |
| `## Heading 2`      | `<h2>` — `text-lg font-medium`             |
| `### Heading 3`     | `<h3>` — `text-base font-medium`           |
| `**bold**`          | `<strong>` — `font-medium text-foreground` |
| `*italic*`          | `<em>` — `italic`                          |
| `- item` / `* item` | Unordered list (`<ul>`)                    |
| `1. item`           | Ordered list (`<ol>`)                      |
| `- [ ] task`        | Unchecked checkbox (disabled)              |
| `- [x] task`        | Checked checkbox (disabled)                |
| `---`               | Horizontal rule (`<hr>`)                   |
| `\n\n`              | Paragraph break                            |

> **Note**: This is a simplified renderer. It does not support tables, links, images, inline code, or fenced code blocks. For full Markdown rendering with code highlighting, use `MarkdownMessage` instead.

---

## Collapsible Preview

When the `content` string exceeds `maxPreviewLength` characters, the component renders a truncated preview with a "Ver mais" (See more) button. Clicking it expands the full content. A "Ver menos" (See less) button collapses it again.

```tsx
// Long document — will show preview with toggle
<FormattedDocument content={longAiGeneratedText} maxPreviewLength={300} />
```

---

## Comparison: `FormattedDocument` vs `MarkdownMessage`

| Feature             | `FormattedDocument`   | `MarkdownMessage`    |
| ------------------- | --------------------- | -------------------- |
| Headers             | ✅                    | ✅                   |
| Bold / Italic       | ✅                    | ✅                   |
| Lists               | ✅                    | ✅                   |
| Checkboxes          | ✅                    | ❌                   |
| Code blocks         | ❌                    | ✅ (via `CodeBlock`) |
| Tables              | ❌                    | ✅                   |
| Links               | ❌                    | ✅                   |
| Collapsible preview | ✅                    | ❌                   |
| Best for            | AI documents, reports | AI chat messages     |

---

## Usage in AI Context

`FormattedDocument` is used by `XerticaAssistant` when the AI returns a document-type response (triggered by the "Create document" action in `ModernChatInput`). The document is also editable via the `RichTextEditor` panel.

```tsx
import { FormattedDocument } from 'xertica-ui/assistant';

function DocumentViewer({ aiOutput }: { aiOutput: string }) {
  return (
    <div className="p-4 bg-card rounded-lg border border-border">
      <FormattedDocument content={aiOutput} maxPreviewLength={800} className="text-sm" />
    </div>
  );
}
```

---

## AI Rules

> [!IMPORTANT]
>
> - **Use for AI-generated documents, not chat messages**: For chat message rendering, use `MarkdownMessage`. `FormattedDocument` is optimized for longer structured content (reports, summaries, plans).
> - **No code block support**: If the AI response contains fenced code blocks (` ``` `), use `MarkdownMessage` or `CodeBlock` instead — `FormattedDocument` will render them as plain text.
> - **Checkboxes are read-only**: The rendered checkboxes have `disabled` attribute. They are for display only. For interactive task lists, build a custom component.
> - **`maxPreviewLength` is character-based**: It counts raw Markdown characters, not rendered text length. Set it higher than you think you need to avoid cutting off mid-sentence.