Utilities and Workflow Components

Utility Components

Image Component

Displays images with AI-related features.

<Image />

| Prop | Type | Description | |------|------|-------------| | src | string | Image source URL | | alt | string | Alt text | | ...props | React.ImgHTMLAttributes<HTMLImageElement> | Spread to img |

OpenInChat Component

Opens content in chat interface.

<OpenInChat />

| Prop | Type | Description | |------|------|-------------| | content | React.ReactNode | Content to open | | ...props | React.ButtonHTMLAttributes<HTMLButtonElement> | Spread to button |

Workflow Components

Canvas Component

Main canvas for workflow visualization.

<Canvas />

| Prop | Type | Description | |------|------|-------------| | children | React.ReactNode | Canvas content | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

Node Component

Individual node in workflow.

<Node />

| Prop | Type | Description | |------|------|-------------| | id | string | Node identifier | | data | object | Node data | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

Edge Component

Connection between nodes.

<Edge />

| Prop | Type | Description | |------|------|-------------| | id | string | Edge identifier | | source | string | Source node ID | | target | string | Target node ID | | ...props | React.SVGAttributes<SVGElement> | Spread to SVG |

Connection Component

Connection point on nodes.

<Connection />

| Prop | Type | Description | |------|------|-------------| | nodeId | string | Parent node ID | | type | "source" \| "target" | Connection type | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

Controls Component

Canvas control buttons (zoom, pan).

<Controls />

| Prop | Type | Description | |------|------|-------------| | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

Panel Component

Side panel for node details.

<Panel />

| Prop | Type | Description | |------|------|-------------| | open | boolean | Panel open state | | onClose | () => void | Close callback | | children | React.ReactNode | Panel content | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |

Toolbar Component

Toolbar for canvas actions.

<Toolbar />

| Prop | Type | Description | |------|------|-------------| | children | React.ReactNode | Toolbar items | | ...props | React.HTMLAttributes<HTMLDivElement> | Spread to div |