generate-text-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 type { Model } from "@/registry/ui/model-selector";
22import { GenerateTextNode } from "../ui/flow/generate-text-node";
23 
24const GenerateTextNodeController = ({
25	id,
26	data,
27	...props
28}: NodeProps<Node>) => {
29	const [model, setModel] = useState<Model>("deepseek-chat");
30	const [toolHandles, setToolHandles] = useState({
31		tools: [
32			{
33				id: "name",
34				name: "name",
35			},
36		],
37	});
38 
39	const handleCreateTool = useCallback(() => {
40		setToolHandles({
41			...toolHandles,
42			tools: [...toolHandles.tools, { id: nanoid(), name: "name" }],
43		});
44		return true;
45	}, [toolHandles]);
46 
47	const handleRemoveTool = useCallback(() => {
48		setToolHandles({
49			...toolHandles,
50			tools: toolHandles.tools.filter((tool) => tool.id !== "name"),
51		});
52		return true;
53	}, [toolHandles]);
54 
55	const handleUpdateTool = useCallback(
56		(toolId: string, newName: string, newDescription?: string) => {
57			setToolHandles({
58				...toolHandles,
59				tools: toolHandles.tools.map((tool) =>
60					tool.id === toolId
61						? {
62								...tool,
63								name: newName,
64								description: newDescription,
65							}
66						: tool,
67				),
68			});
69			return true;
70		},
71		[toolHandles],
72	);
73 
74	return (
75		<GenerateTextNode
76			id={id}
77			data={{
78				status: "idle",
79				config: { model },
80				dynamicHandles: toolHandles,
81			}}
82			{...props}
83			type="generate-text"
84			onModelChange={(model) => setModel(model)}
85			onCreateTool={handleCreateTool}
86			onRemoveTool={handleRemoveTool}
87			onUpdateTool={handleUpdateTool}
88			onDeleteNode={() => {}}
89		/>
90	);
91};
92 
93const nodeTypes: NodeTypes = {
94	"generate-text": GenerateTextNodeController,
95};
96 
97const initialNodes = [
98	{
99		id: "node-1",
100		type: "generate-text",
101		position: { x: 0, y: -130 },
102		data: {},
103	},
104];
105 
106export default function ResizableNodeDemo() {
107	const [nodes, setNodes] = useState<Node[]>(initialNodes);
108	const [edges, setEdges] = useState([]);
109 
110	// Add default viewport configuration
111	const defaultViewport = { x: 100, y: 200, zoom: 1 };
112 
113	const onNodesChange = useCallback(
114		(changes: NodeChange<Node>[]) =>
115			setNodes((nds) => applyNodeChanges(changes, nds)),
116		[],
117	);
118	const onEdgesChange = useCallback(
119// … truncated