mirror of
https://github.com/temetro/temetro.git
synced 2026-08-28 19:37:33 +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>
53 lines
2.1 KiB
Markdown
53 lines
2.1 KiB
Markdown
# Edge
|
|
|
|
Customizable edge components for React Flow canvases with animated and temporary states.
|
|
|
|
The `Edge` component provides two pre-styled edge types for React Flow canvases: `Temporary` for dashed temporary connections and `Animated` for connections with animated indicators.
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npx ai-elements@latest add edge
|
|
```
|
|
|
|
## Features
|
|
|
|
- Two distinct edge types: Temporary and Animated
|
|
- Temporary edges use dashed lines with ring color
|
|
- Animated edges include a moving circle indicator
|
|
- Automatic handle position calculation
|
|
- Smart offset calculation based on handle type and position
|
|
- Uses Bezier curves for smooth, natural-looking connections
|
|
- Fully compatible with React Flow's edge system
|
|
- Type-safe implementation with TypeScript
|
|
|
|
## Edge Types
|
|
|
|
### `Edge.Temporary`
|
|
|
|
A dashed edge style for temporary or preview connections. Uses a simple Bezier path with a dashed stroke pattern.
|
|
|
|
### `Edge.Animated`
|
|
|
|
A solid edge with an animated circle that moves along the path. The animation repeats indefinitely with a 2-second duration, providing visual feedback for active connections.
|
|
|
|
## Props
|
|
|
|
Both edge types accept standard React Flow `EdgeProps`:
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `id` | `string` | - | Unique identifier for the edge. |
|
|
| `source` | `string` | - | ID of the source node. |
|
|
| `target` | `string` | - | ID of the target node. |
|
|
| `sourceX` | `number` | - | X coordinate of the source handle (Temporary only). |
|
|
| `sourceY` | `number` | - | Y coordinate of the source handle (Temporary only). |
|
|
| `targetX` | `number` | - | X coordinate of the target handle (Temporary only). |
|
|
| `targetY` | `number` | - | Y coordinate of the target handle (Temporary only). |
|
|
| `sourcePosition` | `Position` | - | Position of the source handle (Left, Right, Top, Bottom). |
|
|
| `targetPosition` | `Position` | - | Position of the target handle (Left, Right, Top, Bottom). |
|
|
| `markerEnd` | `string` | - | SVG marker ID for the edge end (Animated only). |
|
|
| `style` | `React.CSSProperties` | - | Custom styles for the edge (Animated only). |
|