"use client";
import { motion, AnimatePresence } from "framer-motion";
import { useState, useEffect } from "react";
import type { Node } from "@xyflow/react";
import { toast } from "sonner";
import VariableReferencePicker from "./VariableReferencePicker";
interface DataNodePanelProps {
node: Node | null;
nodes: Node[];
onClose: () => void;
onDelete: (nodeId: string) => void;
onUpdate: (nodeId: string, data: any) => void;
}
export default function DataNodePanel({
node,
nodes,
onClose,
onDelete,
onUpdate,
}: DataNodePanelProps) {
const nodeData = node?.data as any;
const nodeType = nodeData?.nodeType?.toLowerCase() || "";
// Transform state
const [transformScript, setTransformScript] = useState(
nodeData?.transformScript ||
`// Transform the input data using TypeScript
// Available variables: input, lastOutput, state
// Example: Extract and transform data
const result = {
processed: true,
timestamp: input.timestamp || "",
data: input
};
return result;`,
);
// Set State variables
const [stateKey, setStateKey] = useState(nodeData?.stateKey || "myVariable");
const [stateValue, setStateValue] = useState(nodeData?.stateValue || "value");
const [valueType, setValueType] = useState<
"string" | "number" | "boolean" | "json" | "expression"
>(nodeData?.valueType || "string");
// Auto-save changes
useEffect(() => {
if (!node?.id) return;
const timeoutId = setTimeout(() => {
onUpdate(node.id, {
transformScript,
stateKey,
stateValue,
valueType,
});
}, 500);
return () => clearTimeout(timeoutId);
}, [
transformScript,
stateKey,
stateValue,
valueType,
]);
const renderValueInput = () => {
switch (valueType) {
case "boolean":
return (
);
case "number":
return (
setStateValue(e.target.value)}
placeholder="42 or {{lastOutput.count}}"
className="w-full px-12 py-8 bg-accent-white border border-border-faint rounded-8 text-sm text-accent-black font-mono focus:outline-none focus:border-heat-100 transition-colors"
/>
);
case "json":
return (