Visualize Text Node

1import { type Node, type NodeProps, Position } from "@xyflow/react";
2import { Eye, Trash } from "lucide-react";
3import { Separator } from "@/components/ui/separator";
4import { cn } from "@/lib/utils";
5import { LabeledHandle } from "@/registry/ui/flow/labeled-handle";
6import {
7	NodeHeader,
8	NodeHeaderAction,
9	NodeHeaderActions,
10	NodeHeaderIcon,
11	NodeHeaderTitle,
12} from "@/registry/ui/flow/node-header";
13import { ResizableNode } from "@/registry/ui/flow/resizable-node";
14import { MarkdownContent } from "@/registry/ui/markdown-content";
15 
16export type VisualizeTextNode = Node<
17	{
18		status: "processing" | "error" | "success" | "idle" | undefined;
19		input: string | undefined;
20	},
21	"visualize-text"
22>;
23 
24interface VisualizeTextProps extends NodeProps<VisualizeTextNode> {
25	onDeleteNode?: () => void;
26}
27 
28export function VisualizeTextNode({
29	selected,
30	data,
31	onDeleteNode,
32}: VisualizeTextProps) {
33	return (
34		<ResizableNode
35			selected={selected}
36			className={cn("flex flex-col", {
37				"border-orange-500": data.status === "processing",
38				"border-red-500": data.status === "error",
39			})}
40		>
41			<NodeHeader className="m-0">
42				<NodeHeaderIcon>
43					<Eye />
44				</NodeHeaderIcon>
45				<NodeHeaderTitle>Visualize Text</NodeHeaderTitle>
46				<NodeHeaderActions>
47					<NodeHeaderAction
48						onClick={onDeleteNode}
49						variant="ghost"
50						label="Delete node"
51					>
52						<Trash />
53					</NodeHeaderAction>
54				</NodeHeaderActions>
55			</NodeHeader>
56			<Separator />
57			<div className="p-2 flex-1 overflow-auto flex flex-col">
58				<div className="flex-1 overflow-auto nodrag nopan nowheel border border-border rounded-md p-2 select-text cursor-auto">
59					<MarkdownContent
60						content={data.input ? data.input : "No text to display"}
61					/>
62				</div>
63			</div>
64			<div className="flex justify-start pt-2 pb-4 text-sm">
65				<LabeledHandle
66					id="input"
67					title="Input"
68					type="target"
69					position={Position.Left}
70				/>
71			</div>
72		</ResizableNode>
73	);
74}