prompt-crafter-node-demo

1"use client";
2 
3import "@xyflow/react/dist/style.css";
4 
5import {
6	addEdge,
7	applyEdgeChanges,
8	applyNodeChanges,
9	Background,
10	type Connection,
11	type EdgeChange,
12	type Node,
13	type NodeChange,
14	type NodeProps,
15	type NodeTypes,
16	ReactFlow,
17	ReactFlowProvider,
18} from "@xyflow/react";
19import { nanoid } from "nanoid";
20import { useCallback, useState } from "react";
21import { PromptCrafterNode } from "@/registry/ui/flow/prompt-crafter-node";
22 
23const PromptCrafterNodeController = ({
24	id,
25	data,
26	...props
27}: NodeProps<Node>) => {
28	const [template, setTemplate] = useState("Hello {{name}}");
29	const [dynamicHandles, setDynamicHandles] = useState({
30		"template-tags": [
31			{
32				id: "name",
33				name: "name",
34			},
35		],
36	});
37 
38	const handleCreateInput = useCallback(
39		(name: string) => {
40			setDynamicHandles({
41				...dynamicHandles,
42				"template-tags": [
43					...dynamicHandles["template-tags"],
44					{ id: nanoid(), name },
45				],
46			});
47			return true;
48		},
49		[dynamicHandles],
50	);
51 
52	const handleRemoveInput = useCallback(() => {
53		setDynamicHandles({
54			...dynamicHandles,
55			"template-tags": dynamicHandles["template-tags"].filter(
56				(input) => input.id !== "name",
57			),
58		});
59		return true;
60	}, [dynamicHandles]);
61 
62	const handleUpdateInputName = useCallback(
63		(handleId: string, newLabel: string) => {
64			setDynamicHandles({
65				...dynamicHandles,
66				"template-tags": dynamicHandles["template-tags"].map((input) =>
67					input.id === handleId
68						? { ...input, name: newLabel }
69						: input,
70				),
71			});
72			return true;
73		},
74		[dynamicHandles],
75	);
76 
77	return (
78		<PromptCrafterNode
79			id={id}
80			data={{
81				status: "success",
82				config: {
83					template,
84				},
85				dynamicHandles,
86			}}
87			{...props}
88			type="prompt-crafter"
89			onPromptTextChange={setTemplate}
90			onCreateInput={handleCreateInput}
91			onRemoveInput={handleRemoveInput}
92			onUpdateInputName={handleUpdateInputName}
93			onDeleteNode={() => {}}
94		/>
95	);
96};
97 
98const nodeTypes: NodeTypes = {
99	"prompt-crafter-node": PromptCrafterNodeController,
100};
101 
102const initialNodes = [
103	{
104		id: "node-1",
105		type: "prompt-crafter-node",
106		position: { x: 0, y: -50 },
107		data: {},
108	},
109];
110 
111export default function ResizableNodeDemo() {
112	const [nodes, setNodes] = useState<Node[]>(initialNodes);
113	const [edges, setEdges] = useState([]);
114 
115	// Add default viewport configuration
116	const defaultViewport = { x: 100, y: 100, zoom: 0.9 };
117 
118	const onNodesChange = useCallback(
119		(changes: NodeChange<Node>[]) =>
120// … truncated