# MarkdownContent

## 2026-06-21 — @mention tags (mentions prop)

**Prompted by:** Hellen (design team)

### What changed
- New `mentions` prop (`string[]` of known labels). Any `@<label>` run in the
  rendered text is wrapped in a primary-coloured tag (`font-medium text-primary`).
  Matched against the list so labels with spaces (e.g. "@Iris Chen") resolve
  correctly.

### Why
- Render tagged people in comments / messages with the primary brand colour.

### Affected tokens / files
- `packages/shadcn/src/components/ui/markdown-content.tsx`


## 2026-06-17 — New atom: sanitized markdown renderer for AI responses

**Prompted by:** Copilot extension design work (Hellen)

### What changed
- New atom `MarkdownContent` renders a markdown string into design-system-styled HTML.
- Supports headings, emphasis, lists, links, blockquotes, inline + fenced code, and GFM tables.
- Per-element styling via the `components` map (repo ships no `@tailwindcss/typography`); tokens only, sharp corners.
- `size` prop (`small` | `medium`) controls text density.

### Why
- The 4th chat surface (broker Copilot extension) needs AI answers rendered as rich text, not plain strings — the existing chat bubbles only rendered raw text.

### Affected tokens / files
- `packages/shadcn/src/components/ui/markdown-content.tsx`
- New deps: `react-markdown`, `remark-gfm`, `rehype-sanitize` (XSS-safe model output).