# CodeBlock

A syntax-highlighted code display component with a one-click copy button. Designed for use inside AI chat messages and documentation panels.

---

## Import

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

---

## Basic Usage

```tsx
<CodeBlock
  language="typescript"
  code={`function greet(name: string): string {
  return \`Hello, \${name}!\`;
}`}
/>
```

---

## Props

| Prop        | Type     | Default      | Description                                                                             |
| ----------- | -------- | ------------ | --------------------------------------------------------------------------------------- |
| `code`      | `string` | _(required)_ | The source code string to display                                                       |
| `language`  | `string` | `'text'`     | Language identifier for syntax highlighting (e.g. `'typescript'`, `'python'`, `'bash'`) |
| `className` | `string` | —            | Additional CSS classes for the outer container                                          |

---

## Features

### Syntax Highlighting

Uses `react-syntax-highlighter` (Prism engine) with a custom theme built on Xertica UI design tokens:

- **Keywords / operators**: `var(--chart-1)` (primary accent)
- **Strings**: `var(--chart-2)` (green-toned)
- **Numbers / booleans**: `var(--chart-5)` (amber-toned)
- **Properties / attributes**: `var(--chart-4)` (blue-toned)
- **Comments**: `var(--muted-foreground)` (subdued)
- **Background**: transparent (inherits from parent card)

The theme automatically adapts to light and dark mode via CSS custom properties.

### Copy Button

A copy-to-clipboard button appears in the top-right corner of the code block. After clicking:

- The icon changes from `Copy` to `Check` for 2 seconds
- The code string is written to the clipboard via the Clipboard API

### Supported Languages

Any language supported by Prism.js is valid. Common examples:

```
typescript  javascript  tsx  jsx
python      bash        sql  json
css         html        yaml markdown
```

---

## Usage in AI Context

`CodeBlock` is used internally by `XerticaAssistant` to render code snippets returned by the AI. When the assistant response contains a fenced code block (` ```language `), it is automatically rendered as a `CodeBlock`.

To render code blocks in a standalone context:

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

function AiResponse({ content }: { content: string }) {
  // Parse code blocks from markdown and render them
  return <CodeBlock language="python" code="print('Hello from AI')" />;
}
```

---

## Design Notes

- The component uses `font-mono` (CSS variable `--font-mono`) for the code font
- Font size is fixed at `0.875rem` (14px) for readability in narrow panels
- Line height is `1.6` for comfortable reading
- Tab size is 2 spaces
- Horizontal overflow scrolls within the block (no line wrapping)

---

## AI Rules

> [!IMPORTANT]
>
> - **Always provide `language`**: Without it, syntax highlighting falls back to plain text. Use the correct language identifier (e.g. `'typescript'` not `'ts'`, `'javascript'` not `'js'`).
> - **Do not wrap in `<pre>` or `<code>`**: `CodeBlock` renders its own `<pre>` via `react-syntax-highlighter`. Wrapping it will break the layout.
> - **Optimized for narrow panels**: This component is designed for the AI Assistant sidebar (~400px). For full-page code display, consider adding `className="w-full"`.