Text Input Node

1import { type Node, type NodeProps, Position } from "@xyflow/react";
2import { PenLine, Trash } from "lucide-react";
3import { Separator } from "@/components/ui/separator";
4import { Textarea } from "@/components/ui/textarea";
5import { cn } from "@/lib/utils";
6import { LabeledHandle } from "@/registry/ui/flow/labeled-handle";
7import {
8	NodeHeader,
9	NodeHeaderAction,
10	NodeHeaderActions,
11	NodeHeaderIcon,
12	NodeHeaderTitle,
13} from "@/registry/ui/flow/node-header";
14import { ResizableNode } from "@/registry/ui/flow/resizable-node";
15 
16export type TextInputData = {
17	status: "processing" | "error" | "success" | "idle" | undefined;
18	config: {
19		value: string;
20	};
21};
22 
23export type TextInputNode = Node<TextInputData, "text-input">;
24 
25export interface TextInputProps extends NodeProps<TextInputNode> {
26	onTextChange?: (value: string) => void;
27	onDeleteNode?: () => void;
28}
29 
30export function TextInputNode({
31	id,
32	selected,
33	data,
34	deletable,
35	onTextChange,
36	onDeleteNode,
37}: TextInputProps) {
38	return (
39		<ResizableNode
40			id={id}
41			selected={selected}
42			className={cn("flex flex-col h-full", {
43				"border-orange-500": data.status === "processing",
44				"border-red-500": data.status === "error",
45			})}
46		>
47			<NodeHeader className="m-0">
48				<NodeHeaderIcon>
49					<PenLine />
50				</NodeHeaderIcon>
51				<NodeHeaderTitle>Text Input</NodeHeaderTitle>
52				<NodeHeaderActions>
53					{deletable && (
54						<NodeHeaderAction
55							onClick={onDeleteNode}
56							variant="ghost"
57							label="Delete node"
58						>
59							<Trash />
60						</NodeHeaderAction>
61					)}
62				</NodeHeaderActions>
63			</NodeHeader>
64			<Separator />
65			<div className="p-2 flex-1 overflow-auto flex flex-col gap-4">
66				<Textarea
67					value={data.config.value || ""}
68					onChange={(e) => onTextChange?.(e.target.value)}
69					className="w-full flex-1 resize-none nodrag nopan nowheel"
70					placeholder="Enter your text here..."
71				/>
72			</div>
73			<div className="flex justify-end pt-2 pb-4 text-sm">
74				<LabeledHandle
75					id="result"
76					title="Result"
77					type="source"
78					position={Position.Right}
79					className="justify-self-end"
80				/>
81			</div>
82		</ResizableNode>
83	);
84}