visualize-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 NodeTypes,
15	ReactFlow,
16	ReactFlowProvider,
17} from "@xyflow/react";
18import { useCallback, useState } from "react";
19import { VisualizeTextNode } from "@/registry/ui/flow/visualize-text-node";
20 
21const nodeTypes: NodeTypes = {
22	"visualize-text": VisualizeTextNode,
23};
24 
25const initialNodes = [
26	{
27		id: "node-1",
28		type: "visualize-text",
29		position: { x: 0, y: -50 },
30		data: {
31			input: "### I support markdown\n\nVisualize text coming from other nodes\n\n- 1\n- 2\n- 3",
32			status: "success",
33		},
34	},
35];
36 
37export default function VisualizeTextNodeDemo() {
38	const [nodes, setNodes] = useState<Node[]>(initialNodes);
39	const [edges, setEdges] = useState([]);
40 
41	// Add default viewport configuration
42	const defaultViewport = { x: 100, y: 75, zoom: 1 };
43 
44	const onNodesChange = useCallback(
45		(changes: NodeChange<Node>[]) =>
46			setNodes((nds) => applyNodeChanges(changes, nds)),
47		[],
48	);
49	const onEdgesChange = useCallback(
50		(changes: EdgeChange<never>[]) =>
51			setEdges((eds) => applyEdgeChanges(changes, eds)),
52		[],
53	);
54	const onConnect = useCallback(
55		(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
56		[],
57	);
58	return (
59		<div className="w-full h-full">
60			<ReactFlowProvider>
61				<ReactFlow
62					nodes={nodes}
63					edges={edges}
64					onNodesChange={onNodesChange}
65					onEdgesChange={onEdgesChange}
66					onConnect={onConnect}
67					nodeTypes={nodeTypes}
68					defaultViewport={defaultViewport}
69					/* fitView */
70				>
71					<Background />
72				</ReactFlow>
73			</ReactFlowProvider>
74		</div>
75	);
76}