Prompt Crafter Node

1"use client";
2 
3import { StreamLanguage } from "@codemirror/language";
4import type { EditorView } from "@codemirror/view";
5import { tags as t } from "@lezer/highlight";
6import { createTheme } from "@uiw/codemirror-themes";
7import CodeMirror from "@uiw/react-codemirror";
8import type { Node } from "@xyflow/react";
9import {
10	type NodeProps,
11	Position,
12	useUpdateNodeInternals,
13} from "@xyflow/react";
14import { BetweenVerticalEnd, PencilRuler, Plus, Trash } from "lucide-react";
15import { useCallback, useMemo, useRef, useState } from "react";
16import { Button } from "@/components/ui/button";
17import {
18	Command,
19	CommandEmpty,
20	CommandGroup,
21	CommandInput,
22	CommandItem,
23	CommandList,
24} from "@/components/ui/command";
25import {
26	Popover,
27	PopoverContent,
28	PopoverTrigger,
29} from "@/components/ui/popover";
30import { Separator } from "@/components/ui/separator";
31import { cn } from "@/lib/utils";
32import { BaseNode } from "@/registry/ui/flow/base-node";
33import {
34	EditableHandle,
35	EditableHandleDialog,
36} from "@/registry/ui/flow/editable-handle";
37import { LabeledHandle } from "@/registry/ui/flow/labeled-handle";
38import {
39	NodeHeader,
40	NodeHeaderAction,
41	NodeHeaderActions,
42	NodeHeaderIcon,
43	NodeHeaderTitle,
44} from "@/registry/ui/flow/node-header";
45import { NodeHeaderStatus } from "@/registry/ui/flow/node-header-status";
46 
47type PromptCrafterData = {
48	status: "processing" | "error" | "success" | "idle" | undefined;
49	config: {
50		template: string;
51	};
52	dynamicHandles: {
53		"template-tags": {
54			id: string;
55			name: string;
56		}[];
57	};
58};
59 
60export type PromptCrafterNode = Node<PromptCrafterData, "prompt-crafter">;
61 
62interface PromptCrafterProps extends NodeProps<PromptCrafterNode> {
63	onPromptTextChange: (value: string) => void;
64	onCreateInput: (name: string) => boolean;
65	onRemoveInput: (handleId: string) => void;
66	onUpdateInputName: (handleId: string, newLabel: string) => boolean;
67	onDeleteNode: () => void;
68}
69 
70// Custom theme that matches your app's design
71const promptTheme = createTheme({
72	theme: "dark",
73	settings: {
74		background: "transparent",
75		foreground: "hsl(var(--foreground))",
76		caret: "black",
77		selection: "#3B82F6",
78		lineHighlight: "transparent",
79	},
80	styles: [
81		{ tag: t.variableName, color: "#10c43d" },
82		{ tag: t.string, color: "hsl(var(--foreground))" },
83		{ tag: t.invalid, color: "#DC2626" },
84	],
85});
86 
87// Create a function to generate the language with the current inputs
88const createPromptLanguage = (validInputs: string[] = []) =>
89	StreamLanguage.define({
90// … truncated