# MarkdownMessage

The primary renderer for AI-generated text content within the Xertica Assistant. It converts raw Markdown into themed React components with support for syntax highlighting, lists, and tables.

---

## Import

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

---

## Usage

```tsx
<MarkdownMessage content="# Hello\nThis is **bold** text and [a link](https://xertica.com)." />
```

---

## Props

| Prop        | Type     | Default      | Description                             |
| ----------- | -------- | ------------ | --------------------------------------- |
| `content`   | `string` | _(required)_ | The raw markdown string to render.      |
| `className` | `string` | —            | Optional CSS classes for the container. |

---

## Features

- **Syntax Highlighting**: Automatically uses `CodeBlock` for triple-backtick code segments.
- **Themed Typography**: Maps Markdown headers (`h1`-`h4`), blockquotes, and lists to the Xertica UI design system tokens.
- **GFM Tables**: Renders GitHub Flavored Markdown tables (`| col | col |`) as styled `<table>` elements using design system tokens (`border-border`, `hover:bg-muted/50`, `rounded-[var(--radius)]`). Wraps in `overflow-x-auto` for responsive behavior. Cell content supports inline formatting (bold, italic, code).
- **Link Safety**: Automatically adds `target="_blank"` and `rel="noopener noreferrer"` to external links.
- **Scroll Optimized**: Designed to be used inside the messaging list of the `XerticaAssistant`.

---

## AI Rules

> [!IMPORTANT]
>
> - **Streaming Support**: This component can be updated incrementally as a stream of text arrives from an LLM.
> - **Escape HTML**: Ensure the content passed here is sanitized or comes from a trusted AI source, as it renders HTML-like structures via markdown.