flow-orchestrator

1"use client";
2 
3import {
4	Background,
5	Controls,
6	type EdgeTypes,
7	MiniMap,
8	type NodeTypes,
9	Panel,
10	ReactFlow,
11	ReactFlowProvider,
12	useReactFlow,
13} from "@xyflow/react";
14import { type DragEvent, useEffect } from "react";
15import { shallow } from "zustand/shallow";
16import "@xyflow/react/dist/style.css";
17import { Button } from "@/components/ui/button";
18import { ErrorIndicator } from "@/registry/blocks/flow-orchestrator/components/error-indicator";
19import { NodesPanel } from "@/registry/blocks/flow-orchestrator/components/nodes-panel";
20import { DEVELOPER_TASKS_ORCHESTRATOR_WORKFLOW } from "@/registry/blocks/flow-orchestrator/lib/developer-tasks-orchestrator";
21import { useWorkflow } from "@/registry/hooks/flow/use-workflow";
22import type { FlowNode } from "@/registry/lib/flow/workflow";
23import { GenerateTextNodeController } from "@/registry/ui/flow/generate-text-node-controller";
24import { PromptCrafterNodeController } from "@/registry/ui/flow/prompt-crafter-node-controller";
25import { StatusEdgeController } from "@/registry/ui/flow/status-edge-controller";
26import { TextInputNodeController } from "@/registry/ui/flow/text-input-node-controller";
27import { VisualizeTextNodeController } from "@/registry/ui/flow/visualize-text-node-controller";
28 
29const nodeTypes: NodeTypes = {
30	"generate-text": GenerateTextNodeController,
31	"visualize-text": VisualizeTextNodeController,
32	"text-input": TextInputNodeController,
33	"prompt-crafter": PromptCrafterNodeController,
34};
35 
36const edgeTypes: EdgeTypes = {
37	status: StatusEdgeController,
38};
39 
40export function Flow() {
41	const store = useWorkflow(
42		(store) => ({
43			nodes: store.nodes,
44			edges: store.edges,
45			onNodesChange: store.onNodesChange,
46			onEdgesChange: store.onEdgesChange,
47			onConnect: store.onConnect,
48			startExecution: store.startExecution,
49			createNode: store.createNode,
50			workflowExecutionState: store.workflowExecutionState,
51			initializeWorkflow: store.initializeWorkflow,
52		}),
53		shallow,
54	);
55 
56	// biome-ignore lint/correctness/useExhaustiveDependencies: We want to initialize the workflow only once
57	useEffect(() => {
58		store.initializeWorkflow(
59			DEVELOPER_TASKS_ORCHESTRATOR_WORKFLOW.nodes,
60			DEVELOPER_TASKS_ORCHESTRATOR_WORKFLOW.edges,
61		);
62	}, []);
63 
64	const { screenToFlowPosition } = useReactFlow();
65 
66	const onDragOver = (event: DragEvent) => {
67		event.preventDefault();
68		event.dataTransfer.dropEffect = "move";
69	};
70 
71	const onDrop = (event: DragEvent) => {
72		event.preventDefault();
73 
74// … truncated