mirror of
https://github.com/temetro/temetro.git
synced 2026-08-11 11:09:04 +00:00
Khalid Abdi
929bec8f31
Stop blocking AI imports/proposals on missing non-critical fields. Records the chat agent drafts now save with safe placeholders, auto-generated file numbers, and a source="ai" marker that surfaces an "Added by AI" badge so a clinician can review/edit them later. Backend: - add `source` (manual|ai) column to patients/appointments/prescriptions (migration 0014) + canonical types, services, validation schemas - relax patient/appointment validation: empty file number allowed, demographic + type/provider/initials fall back to placeholders (initials derived from name) - patients.generateFileNumber() auto-assigns an MRN when one is missing - proposeAppointment accepts a name when no file number resolves; AI commits + /api/ai/import stamp source="ai" Frontend: - `source` on Appointment/Patient/Prescription types; AI commits send source="ai" - reusable <AiBadge> shown on the Patients table/detail and prescriptions list Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
171 lines
5.4 KiB
Markdown
171 lines
5.4 KiB
Markdown
# Code Block
|
|
|
|
Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
|
|
|
|
The `CodeBlock` component provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks. It's fully composable, allowing you to customize the header, actions, and content.
|
|
|
|
See `scripts/code-block.tsx` for this example.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npx ai-elements@latest add code-block
|
|
```
|
|
|
|
## Usage
|
|
|
|
The CodeBlock is fully composable. Here's a basic example:
|
|
|
|
```tsx
|
|
import {
|
|
CodeBlock,
|
|
CodeBlockActions,
|
|
CodeBlockCopyButton,
|
|
CodeBlockFilename,
|
|
CodeBlockHeader,
|
|
CodeBlockTitle,
|
|
} from "@/components/ai-elements/code-block";
|
|
import { FileIcon } from "lucide-react";
|
|
|
|
export const Example = () => (
|
|
<CodeBlock code={code} language="typescript">
|
|
<CodeBlockHeader>
|
|
<CodeBlockTitle>
|
|
<FileIcon size={14} />
|
|
<CodeBlockFilename>example.ts</CodeBlockFilename>
|
|
</CodeBlockTitle>
|
|
<CodeBlockActions>
|
|
<CodeBlockCopyButton />
|
|
</CodeBlockActions>
|
|
</CodeBlockHeader>
|
|
</CodeBlock>
|
|
);
|
|
```
|
|
|
|
## Features
|
|
|
|
- Syntax highlighting with Shiki
|
|
- Line numbers (optional)
|
|
- Copy to clipboard functionality
|
|
- Automatic light/dark theme switching via CSS variables
|
|
- Language selector for multi-language examples
|
|
- Fully composable architecture
|
|
- Accessible design
|
|
|
|
## Examples
|
|
|
|
### Dark Mode
|
|
|
|
To use the `CodeBlock` component in dark mode, wrap it in a `div` with the `dark` class.
|
|
|
|
See `scripts/code-block-dark.tsx` for this example.
|
|
|
|
### Language Selector
|
|
|
|
Add a language selector to switch between different code implementations:
|
|
|
|
See `scripts/code-block.tsx` for this example.
|
|
|
|
## Props
|
|
|
|
### `<CodeBlock />`
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `code` | `string` | - | The code content to display. |
|
|
| `language` | `BundledLanguage` | - | The programming language for syntax highlighting. |
|
|
| `showLineNumbers` | `boolean` | `false` | Whether to show line numbers. |
|
|
| `children` | `React.ReactNode` | - | Child elements like CodeBlockHeader. |
|
|
| `className` | `string` | - | Additional CSS classes. |
|
|
|
|
### `<CodeBlockHeader />`
|
|
|
|
Container for the header row. Uses flexbox with `justify-between`.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `children` | `React.ReactNode` | - | Header content (CodeBlockTitle, CodeBlockActions, etc.). |
|
|
| `className` | `string` | - | Additional CSS classes. |
|
|
|
|
### `<CodeBlockTitle />`
|
|
|
|
Left-aligned container for icon and filename. Uses flexbox with `gap-2`.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `children` | `React.ReactNode` | - | Title content (icon, CodeBlockFilename, etc.). |
|
|
| `className` | `string` | - | Additional CSS classes. |
|
|
|
|
### `<CodeBlockFilename />`
|
|
|
|
Displays the filename in monospace font.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `children` | `React.ReactNode` | - | The filename to display. |
|
|
| `className` | `string` | - | Additional CSS classes. |
|
|
|
|
### `<CodeBlockActions />`
|
|
|
|
Right-aligned container for action buttons. Uses flexbox with `gap-2`.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `children` | `React.ReactNode` | - | Action buttons (CodeBlockCopyButton, CodeBlockLanguageSelector, etc.). |
|
|
| `className` | `string` | - | Additional CSS classes. |
|
|
|
|
### `<CodeBlockCopyButton />`
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `onCopy` | `() => void` | - | Callback fired after a successful copy. |
|
|
| `onError` | `(error: Error) => void` | - | Callback fired if copying fails. |
|
|
| `timeout` | `number` | `2000` | How long to show the copied state (ms). |
|
|
| `children` | `React.ReactNode` | - | Custom content for the button. Defaults to copy/check icons. |
|
|
| `className` | `string` | - | Additional CSS classes. |
|
|
|
|
### `<CodeBlockLanguageSelector />`
|
|
|
|
Wrapper for the language selector. Extends shadcn/ui Select.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `value` | `string` | - | The currently selected language. |
|
|
| `onValueChange` | `(value: string) => void` | - | Callback when the language changes. |
|
|
| `children` | `React.ReactNode` | - | Selector components (Trigger, Content, Items). |
|
|
|
|
### `<CodeBlockLanguageSelectorTrigger />`
|
|
|
|
Trigger button for the language selector dropdown. Pre-styled for code block header.
|
|
|
|
### `<CodeBlockLanguageSelectorValue />`
|
|
|
|
Displays the selected language value.
|
|
|
|
### `<CodeBlockLanguageSelectorContent />`
|
|
|
|
Dropdown content container. Defaults to `align="end"`.
|
|
|
|
### `<CodeBlockLanguageSelectorItem />`
|
|
|
|
Individual language option in the dropdown.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `value` | `string` | - | The language value. |
|
|
| `children` | `React.ReactNode` | - | The display label. |
|
|
|
|
### `<CodeBlockContainer />`
|
|
|
|
Low-level container component with performance optimizations (`contentVisibility`). Used internally by CodeBlock.
|
|
|
|
### `<CodeBlockContent />`
|
|
|
|
Low-level component that handles syntax highlighting. Used internally by CodeBlock, but can be used directly for custom layouts.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `code` | `string` | - | The code content to display. |
|
|
| `language` | `BundledLanguage` | - | The programming language for syntax highlighting. |
|
|
| `showLineNumbers` | `boolean` | `false` | Whether to show line numbers. |
|