@datatechsolutions/ui 2.11.6 → 2.11.8

package/dist/{chunk-TM2UUOQO.mjs → chunk-VWKBMTTC.mjs}

@@ -1,5 +1,5 @@
 "use client";
-import { GlassModalShell, ContextMenu, FormInput, FormTextarea, FormSelect, Button, Card, CardContent, IconButton, Input } from './chunk-46ZM5VJJ.mjs';
+import { GlassModalShell, ContextMenu, FormInput, FormTextarea, FormSelect, Button, IconButton } from './chunk-46ZM5VJJ.mjs';
 import { GraphNodeHeader, GraphNodeMeta, GraphNodeBadge, GraphNodeIconBubble } from './chunk-OZNTQROP.mjs';
 import { getAgentTier, createDefaultLogicNodeConfig, applyDagreLayout } from './chunk-TLPPVL3W.mjs';
 import { useTranslations, I18nProvider, createI18nFromMessages } from './chunk-7VJ7CMMT.mjs';
@@ -208,47 +208,84 @@ var useWorkflowStore = create((set, get) => ({
     });
   }
 }));
-var useModalStore = create((set) => ({
+var EMPTY_STATE = {
   activeModal: null,
   agentData: null,
-  subworkflowData: null,
   logicNodeData: null,
-  pipelineSettingsData: null,
-  openAgentModal: (agent, models, isCreateMode = false) => set({
-    activeModal: "agent",
-    agentData: { agent, models, isCreateMode },
-    subworkflowData: null,
-    logicNodeData: null,
-    pipelineSettingsData: null
-  }),
-  openSubworkflowModal: (tool) => set({
-    activeModal: "subworkflow",
-    subworkflowData: { tool },
-    agentData: null,
-    logicNodeData: null,
-    pipelineSettingsData: null
-  }),
-  openLogicNodeModal: (nodeId, nodeLabel, config) => set({
-    activeModal: "logic-node",
-    logicNodeData: { nodeId, nodeLabel, config },
-    agentData: null,
-    subworkflowData: null,
-    pipelineSettingsData: null
-  }),
-  openPipelineSettingsModal: (name, description) => set({
-    activeModal: "pipeline-settings",
-    pipelineSettingsData: { name, description },
-    agentData: null,
-    subworkflowData: null,
-    logicNodeData: null
-  }),
-  closeModal: () => set({
-    activeModal: null,
-    agentData: null,
-    subworkflowData: null,
-    logicNodeData: null,
-    pipelineSettingsData: null
-  })
+  pipelineSettingsData: null
+};
+var useModalStore = create((set, get) => ({
+  ...EMPTY_STATE,
+  stack: [],
+  openAgentModal: (agent, models, isCreateMode = false) => {
+    const current = get();
+    const entry = {
+      type: current.activeModal,
+      agentData: current.agentData,
+      logicNodeData: current.logicNodeData,
+      pipelineSettingsData: current.pipelineSettingsData
+    };
+    const newStack = current.activeModal ? [...current.stack, entry] : current.stack;
+    set({
+      activeModal: "agent",
+      agentData: { agent, models, isCreateMode },
+      logicNodeData: null,
+      pipelineSettingsData: null,
+      stack: newStack
+    });
+  },
+  openLogicNodeModal: (nodeId, nodeLabel, config) => {
+    const current = get();
+    const entry = {
+      type: current.activeModal,
+      agentData: current.agentData,
+      logicNodeData: current.logicNodeData,
+      pipelineSettingsData: current.pipelineSettingsData
+    };
+    const newStack = current.activeModal ? [...current.stack, entry] : current.stack;
+    set({
+      activeModal: "logic-node",
+      logicNodeData: { nodeId, nodeLabel, config },
+      agentData: null,
+      pipelineSettingsData: null,
+      stack: newStack
+    });
+  },
+  openPipelineSettingsModal: (name, description) => {
+    const current = get();
+    const entry = {
+      type: current.activeModal,
+      agentData: current.agentData,
+      logicNodeData: current.logicNodeData,
+      pipelineSettingsData: current.pipelineSettingsData
+    };
+    const newStack = current.activeModal ? [...current.stack, entry] : current.stack;
+    set({
+      activeModal: "pipeline-settings",
+      pipelineSettingsData: { name, description },
+      agentData: null,
+      logicNodeData: null,
+      stack: newStack
+    });
+  },
+  closeModal: () => {
+    const { stack } = get();
+    if (stack.length > 0) {
+      const previous = stack[stack.length - 1];
+      set({
+        activeModal: previous.type,
+        agentData: previous.agentData,
+        logicNodeData: previous.logicNodeData,
+        pipelineSettingsData: previous.pipelineSettingsData,
+        stack: stack.slice(0, -1)
+      });
+    } else {
+      set({ ...EMPTY_STATE, stack: [] });
+    }
+  },
+  closeAllModals: () => {
+    set({ ...EMPTY_STATE, stack: [] });
+  }
 }));
 var GRAPH_ACTIVE_EDGE_COLOR = "#14b8a6";
 var GRAPH_TRUE_EDGE_COLOR = "#22c55e";
@@ -2888,203 +2925,214 @@ var GroupFlowNode = memo(function GroupFlowNode2({ id, data, selected }) {
     /* @__PURE__ */ jsx(WorkflowHandle, { type: "source", position: Position.Right, id: "right-out", colorClass: "!bg-slate-500" })
   ] });
 });
-function StartNodeConfigForm({ config, onSave, onCancel }) {
-  const t = useTranslations("agents.workflow.startNodeConfig");
-  const [inputVariables, setInputVariables] = useState([...config.inputVariables]);
+function ConfigFormActions({
+  cancelLabel,
+  saveLabel,
+  onCancel,
+  onSave,
+  saveDisabled = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsx(Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
+  ] });
+}
+var COLOR_CLASSES = {
+  green: {
+    badge: "bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300",
+    input: "focus:border-green-400 focus:ring-green-400/20",
+    row: "border-green-200/30 dark:border-green-500/15",
+    add: "text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300",
+    dot: "bg-green-500"
+  },
+  blue: {
+    badge: "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300",
+    input: "focus:border-blue-400 focus:ring-blue-400/20",
+    row: "border-blue-200/30 dark:border-blue-500/15",
+    add: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+    dot: "bg-blue-500"
+  },
+  purple: {
+    badge: "bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300",
+    input: "focus:border-purple-400 focus:ring-purple-400/20",
+    row: "border-purple-200/30 dark:border-purple-500/15",
+    add: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300",
+    dot: "bg-purple-500"
+  },
+  red: {
+    badge: "bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300",
+    input: "focus:border-red-400 focus:ring-red-400/20",
+    row: "border-red-200/30 dark:border-red-500/15",
+    add: "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
+    dot: "bg-red-500"
+  },
+  teal: {
+    badge: "bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-300",
+    input: "focus:border-teal-400 focus:ring-teal-400/20",
+    row: "border-teal-200/30 dark:border-teal-500/15",
+    add: "text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300",
+    dot: "bg-teal-500"
+  }
+};
+function VariableListEditor({
+  variables,
+  onChange,
+  placeholder = "Variable name",
+  label,
+  addLabel = "Add",
+  color = "green",
+  numbered = false,
+  editable = false,
+  max = 0
+}) {
   const [newVariable, setNewVariable] = useState("");
-  const handleAddVariable = () => {
+  const inputRef = useRef(null);
+  const colors = COLOR_CLASSES[color];
+  const canAdd = max === 0 || variables.length < max;
+  const handleAdd = useCallback(() => {
     const trimmed = newVariable.trim();
-    if (trimmed && !inputVariables.includes(trimmed)) {
-      setInputVariables([...inputVariables, trimmed]);
-      setNewVariable("");
-    }
-  };
-  const handleRemoveVariable = (variable) => {
-    setInputVariables(inputVariables.filter((existingVariable) => existingVariable !== variable));
-  };
-  const handleKeyDown = (event) => {
+    if (!trimmed || variables.includes(trimmed)) return;
+    onChange([...variables, trimmed]);
+    setNewVariable("");
+    inputRef.current?.focus();
+  }, [newVariable, variables, onChange]);
+  const handleRemove = useCallback((index) => {
+    onChange(variables.filter((_, i) => i !== index));
+  }, [variables, onChange]);
+  const handleEdit = useCallback((index, value) => {
+    const updated = [...variables];
+    updated[index] = value;
+    onChange(updated);
+  }, [variables, onChange]);
+  const handleKeyDown = useCallback((event) => {
     if (event.key === "Enter") {
       event.preventDefault();
-      handleAddVariable();
+      handleAdd();
     }
-  };
+  }, [handleAdd]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    label && /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+    variables.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 space-y-1", children: variables.map((variable, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `group flex items-center gap-2 rounded-lg border px-2.5 py-1.5 transition-colors ${colors.row} hover:bg-white/5`,
+        children: [
+          numbered ? /* @__PURE__ */ jsx("span", { className: `inline-flex h-5 min-w-5 items-center justify-center rounded-full text-[10px] font-bold ${colors.badge}`, children: index + 1 }) : /* @__PURE__ */ jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${colors.dot}` }),
+          editable ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: variable,
+              onChange: (event) => handleEdit(index, event.target.value),
+              className: `flex-1 rounded-md border-0 bg-transparent px-1 py-0.5 text-sm font-medium text-gray-900 outline-none ${colors.input} focus:ring-1 dark:text-white`
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-gray-900 dark:text-white", children: variable }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleRemove(index),
+              className: "shrink-0 rounded p-0.5 text-gray-400 opacity-0 transition-all hover:bg-red-100 hover:text-red-500 group-hover:opacity-100 dark:hover:bg-red-500/10 dark:hover:text-red-400",
+              "aria-label": `Remove ${variable}`,
+              children: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      },
+      `${index}-${variable}`
+    )) }),
+    canAdd && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: newVariable,
+          onChange: (event) => setNewVariable(event.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder,
+          className: "flex-1 rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-1.5 text-sm text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-gray-300 focus:ring-1 focus:ring-gray-300/30 dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-600"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleAdd,
+          disabled: !newVariable.trim(),
+          className: `flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all disabled:cursor-not-allowed disabled:opacity-40 ${colors.add} hover:bg-white/10`,
+          children: [
+            /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3.5 w-3.5" }),
+            addLabel
+          ]
+        }
+      )
+    ] }),
+    variables.length === 0 && !canAdd && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: "No variables defined" })
+  ] });
+}
+function StartNodeConfigForm({ config, onSave, onCancel }) {
+  const t = useTranslations("agents.workflow.startNodeConfig");
+  const [inputVariables, setInputVariables] = useState([...config.inputVariables]);
   const handleSave = () => {
     onSave({ ...config, inputVariables });
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("inputVariablesLabel") }),
       /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("inputVariablesHelp") }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            value: newVariable,
-            onChange: (event) => setNewVariable(event.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            outline: true,
-            size: "sm",
-            children: t("addVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: inputVariables.map((variable) => /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2.5 py-1 text-xs font-medium text-green-700 dark:bg-green-500/20 dark:text-green-300",
-          children: [
-            variable,
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                icon: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" }),
-                label: `Remove ${variable}`,
-                onClick: () => handleRemoveVariable(variable),
-                variant: "ghost",
-                size: "sm",
-                className: "!p-0"
-              }
-            )
-          ]
-        },
-        variable
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
       /* @__PURE__ */ jsx(
-        Button,
+        VariableListEditor,
         {
-          type: "button",
-          onClick: onCancel,
-          outline: true,
-          size: "sm",
-          children: t("cancel")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          onClick: handleSave,
-          color: "ios-glass-blue",
-          size: "sm",
-          children: t("save")
+          variables: inputVariables,
+          onChange: setInputVariables,
+          label: t("inputVariablesLabel"),
+          placeholder: t("variablePlaceholder"),
+          addLabel: t("addVariable"),
+          color: "green"
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 function EndNodeConfigForm({ config, onSave, onCancel }) {
   const t = useTranslations("agents.workflow.endNodeConfig");
   const [outputVariables, setOutputVariables] = useState([...config.outputVariables]);
-  const [newVariable, setNewVariable] = useState("");
-  const handleAddVariable = () => {
-    const trimmed = newVariable.trim();
-    if (trimmed && !outputVariables.includes(trimmed)) {
-      setOutputVariables([...outputVariables, trimmed]);
-      setNewVariable("");
-    }
-  };
-  const handleRemoveVariable = (variable) => {
-    setOutputVariables(outputVariables.filter((existingVariable) => existingVariable !== variable));
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      handleAddVariable();
-    }
-  };
   const handleSave = () => {
     onSave({ ...config, outputVariables });
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariablesLabel") }),
       /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariablesHelp") }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: newVariable,
-            onChange: (event) => setNewVariable(event.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "w-full flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
-            children: t("addVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: outputVariables.map((variable) => /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-1 rounded-full bg-red-100 px-2.5 py-1 text-xs font-medium text-red-700 dark:bg-red-500/20 dark:text-red-300",
-          children: [
-            variable,
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => handleRemoveVariable(variable),
-                className: "text-sm text-red-500 hover:text-red-600",
-                "aria-label": `Remove ${variable}`,
-                children: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" })
-              }
-            )
-          ]
-        },
-        variable
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onCancel,
-          className: "rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
-          children: t("cancel")
-        }
-      ),
       /* @__PURE__ */ jsx(
-        "button",
+        VariableListEditor,
         {
-          type: "button",
-          onClick: handleSave,
-          className: "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600",
-          children: t("save")
+          variables: outputVariables,
+          onChange: setOutputVariables,
+          label: t("outputVariablesLabel"),
+          placeholder: t("variablePlaceholder"),
+          addLabel: t("addVariable"),
+          color: "red"
         }
       )
-    ] })
-  ] });
-}
-function ConfigFormActions({
-  cancelLabel,
-  saveLabel,
-  onCancel,
-  onSave,
-  saveDisabled = false
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
-    /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
-    /* @__PURE__ */ jsx(Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 var OPERATOR_OPTIONS = [
@@ -3566,23 +3614,6 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
   const t = useTranslations("agents.workflow.answerNodeConfig");
   const [outputTemplate, setOutputTemplate] = useState(config.outputTemplate);
   const [outputVariables, setOutputVariables] = useState([...config.outputVariables]);
-  const [newVariable, setNewVariable] = useState("");
-  const handleAddVariable = () => {
-    const trimmed = newVariable.trim();
-    if (trimmed && !outputVariables.includes(trimmed)) {
-      setOutputVariables([...outputVariables, trimmed]);
-      setNewVariable("");
-    }
-  };
-  const handleRemoveVariable = (variable) => {
-    setOutputVariables(outputVariables.filter((existingVariable) => existingVariable !== variable));
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      handleAddVariable();
-    }
-  };
   const handleSave = () => {
     onSave({ ...config, outputTemplate, outputVariables });
   };
@@ -3599,50 +3630,17 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
         className: "font-mono text-xs"
       }
     ),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariablesLabel") }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            type: "text",
-            value: newVariable,
-            onValueChange: setNewVariable,
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            children: t("addVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: outputVariables.map((variable) => /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 dark:bg-blue-500/20 dark:text-blue-300",
-          children: [
-            variable,
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                onClick: () => handleRemoveVariable(variable),
-                icon: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" }),
-                label: `Remove ${variable}`,
-                size: "sm",
-                color: "ios-red"
-              }
-            )
-          ]
-        },
-        variable
-      )) })
-    ] }),
+    /* @__PURE__ */ jsx(
+      VariableListEditor,
+      {
+        variables: outputVariables,
+        onChange: setOutputVariables,
+        label: t("outputVariablesLabel"),
+        placeholder: t("variablePlaceholder"),
+        addLabel: t("addVariable"),
+        color: "blue"
+      }
+    ),
     /* @__PURE__ */ jsx(
       ConfigFormActions,
       {
@@ -4037,77 +4035,23 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
   const [inputVariables, setInputVariables] = useState([...config.inputVariables]);
   const [outputVariable, setOutputVariable] = useState(config.outputVariable);
   const [aggregationMode, setAggregationMode] = useState(config.aggregationMode);
-  const [newVariable, setNewVariable] = useState("");
-  const handleAddVariable = () => {
-    const trimmed = newVariable.trim();
-    if (trimmed && !inputVariables.includes(trimmed)) {
-      setInputVariables([...inputVariables, trimmed]);
-      setNewVariable("");
-    }
-  };
-  const handleRemoveVariable = (index) => {
-    setInputVariables(inputVariables.filter((_, variableIndex) => variableIndex !== index));
-  };
-  const handleVariableChange = (index, value) => {
-    setInputVariables(inputVariables.map((variable, variableIndex) => variableIndex === index ? value : variable));
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      handleAddVariable();
-    }
-  };
   const handleSave = () => {
     onSave({ ...config, inputVariables, outputVariable, aggregationMode });
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("inputVariablesLabel") }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            type: "text",
-            value: newVariable,
-            onValueChange: setNewVariable,
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            children: t("addInputVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: inputVariables.map((variable, index) => /* @__PURE__ */ jsx(Card, { className: "border-purple-200/70 dark:border-purple-500/30", children: /* @__PURE__ */ jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-6 items-center justify-center rounded-full bg-purple-100 px-1.5 py-0.5 text-[10px] font-semibold text-purple-700 dark:bg-purple-500/20 dark:text-purple-300", children: index + 1 }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            type: "text",
-            value: variable,
-            onValueChange: (value) => handleVariableChange(index, value),
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            icon: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" }),
-            label: `Remove ${variable || index + 1}`,
-            onClick: () => handleRemoveVariable(index),
-            size: "sm",
-            color: "ios-red"
-          }
-        )
-      ] }) }) }, `${index}-${variable}`)) })
-    ] }),
+    /* @__PURE__ */ jsx(
+      VariableListEditor,
+      {
+        variables: inputVariables,
+        onChange: setInputVariables,
+        label: t("inputVariablesLabel"),
+        placeholder: t("variablePlaceholder"),
+        addLabel: t("addInputVariable"),
+        color: "purple",
+        numbered: true,
+        editable: true
+      }
+    ),
     /* @__PURE__ */ jsx(
       FormInput,
       {
@@ -7139,5 +7083,5 @@ function Workspace({
 }
 
 export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CATEGORY_COLORS, CATEGORY_PILL_COLORS, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, ICON_MAP, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeModal, MINIMAP_NODE_COLORS, NodeCard, NodeContextMenu, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, WorkflowCanvas, Workspace, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, isModelCompatibleWithFramework, useModalStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore };
-//# sourceMappingURL=chunk-TM2UUOQO.mjs.map
-//# sourceMappingURL=chunk-TM2UUOQO.mjs.map
+//# sourceMappingURL=chunk-VWKBMTTC.mjs.map
+//# sourceMappingURL=chunk-VWKBMTTC.mjs.map