import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as MarkdownMessageStories from './markdown-message.stories';

<Meta of={MarkdownMessageStories} />

<Title />
<Subtitle>Renders AI assistant messages as formatted Markdown with syntax-highlighted code blocks.</Subtitle>

<Description />

<Primary />

---

## Usage

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

<MarkdownMessage content="**Hello!** Here is a `code` example." />
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `content` | `string` | _(required)_ | The Markdown string to render |
| `className` | `string` | `''` | Additional CSS classes on the root container |

## Supported Markdown

- **Bold**, _italic_, ~~strikethrough~~
- `inline code` and fenced code blocks with syntax highlighting
- Lists (ordered and unordered)
- Headers (`# H1`, `## H2`, etc.)
- Tables
- Blockquotes

## AI Rules

> [!IMPORTANT]
> - This component is used **exclusively inside** `XerticaAssistant` message bubbles.
> - Do not use it for general-purpose Markdown rendering outside the assistant context — use a standard Markdown library instead.
> - Always sanitize content before passing it if coming from untrusted sources.