@datatechsolutions/ui 2.11.6 → 2.11.7

package/dist/{chunk-E7GVGD4Z.js → chunk-TKLALDY4.js}

@@ -2890,203 +2890,214 @@ var GroupFlowNode = react.memo(function GroupFlowNode2({ id, data, selected }) {
     /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "source", position: react$1.Position.Right, id: "right-out", colorClass: "!bg-slate-500" })
   ] });
 });
-function StartNodeConfigForm({ config, onSave, onCancel }) {
-  const t = chunkYXN2K77G_js.useTranslations("agents.workflow.startNodeConfig");
-  const [inputVariables, setInputVariables] = react.useState([...config.inputVariables]);
+function ConfigFormActions({
+  cancelLabel,
+  saveLabel,
+  onCancel,
+  onSave,
+  saveDisabled = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunk4XID6LOC_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk4XID6LOC_js.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] = react.useState("");
-  const handleAddVariable = () => {
+  const inputRef = react.useRef(null);
+  const colors = COLOR_CLASSES[color];
+  const canAdd = max === 0 || variables.length < max;
+  const handleAdd = react.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 = react.useCallback((index) => {
+    onChange(variables.filter((_, i) => i !== index));
+  }, [variables, onChange]);
+  const handleEdit = react.useCallback((index, value) => {
+    const updated = [...variables];
+    updated[index] = value;
+    onChange(updated);
+  }, [variables, onChange]);
+  const handleKeyDown = react.useCallback((event) => {
     if (event.key === "Enter") {
       event.preventDefault();
-      handleAddVariable();
+      handleAdd();
     }
-  };
+  }, [handleAdd]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+    variables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 space-y-1", children: variables.map((variable, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${colors.dot}` }),
+          editable ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm font-medium text-gray-900 dark:text-white", children: variable }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      },
+      `${index}-${variable}`
+    )) }),
+    canAdd && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.PlusIcon, { className: "h-3.5 w-3.5" }),
+            addLabel
+          ]
+        }
+      )
+    ] }),
+    variables.length === 0 && !canAdd && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: "No variables defined" })
+  ] });
+}
+function StartNodeConfigForm({ config, onSave, onCancel }) {
+  const t = chunkYXN2K77G_js.useTranslations("agents.workflow.startNodeConfig");
+  const [inputVariables, setInputVariables] = react.useState([...config.inputVariables]);
   const handleSave = () => {
     onSave({ ...config, inputVariables });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("inputVariablesLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("inputVariablesHelp") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunk4XID6LOC_js.Input,
-          {
-            value: newVariable,
-            onChange: (event) => setNewVariable(event.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunk4XID6LOC_js.Button,
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            outline: true,
-            size: "sm",
-            children: t("addVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: inputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              chunk4XID6LOC_js.IconButton,
-              {
-                icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" }),
-                label: `Remove ${variable}`,
-                onClick: () => handleRemoveVariable(variable),
-                variant: "ghost",
-                size: "sm",
-                className: "!p-0"
-              }
-            )
-          ]
-        },
-        variable
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk4XID6LOC_js.Button,
+        VariableListEditor,
         {
-          type: "button",
-          onClick: onCancel,
-          outline: true,
-          size: "sm",
-          children: t("cancel")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        chunk4XID6LOC_js.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__ */ jsxRuntime.jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 function EndNodeConfigForm({ config, onSave, onCancel }) {
   const t = chunkYXN2K77G_js.useTranslations("agents.workflow.endNodeConfig");
   const [outputVariables, setOutputVariables] = react.useState([...config.outputVariables]);
-  const [newVariable, setNewVariable] = react.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__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariablesLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariablesHelp") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
-            children: t("addVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: outputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => handleRemoveVariable(variable),
-                className: "text-sm text-red-500 hover:text-red-600",
-                "aria-label": `Remove ${variable}`,
-                children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" })
-              }
-            )
-          ]
-        },
-        variable
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunk4XID6LOC_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunk4XID6LOC_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 var OPERATOR_OPTIONS = [
@@ -3568,23 +3579,6 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
   const t = chunkYXN2K77G_js.useTranslations("agents.workflow.answerNodeConfig");
   const [outputTemplate, setOutputTemplate] = react.useState(config.outputTemplate);
   const [outputVariables, setOutputVariables] = react.useState([...config.outputVariables]);
-  const [newVariable, setNewVariable] = react.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 });
   };
@@ -3601,50 +3595,17 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
         className: "font-mono text-xs"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariablesLabel") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunk4XID6LOC_js.FormInput,
-          {
-            type: "text",
-            value: newVariable,
-            onValueChange: setNewVariable,
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunk4XID6LOC_js.Button,
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            children: t("addVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: outputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              chunk4XID6LOC_js.IconButton,
-              {
-                onClick: () => handleRemoveVariable(variable),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" }),
-                label: `Remove ${variable}`,
-                size: "sm",
-                color: "ios-red"
-              }
-            )
-          ]
-        },
-        variable
-      )) })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VariableListEditor,
+      {
+        variables: outputVariables,
+        onChange: setOutputVariables,
+        label: t("outputVariablesLabel"),
+        placeholder: t("variablePlaceholder"),
+        addLabel: t("addVariable"),
+        color: "blue"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       ConfigFormActions,
       {
@@ -4039,77 +4000,23 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
   const [inputVariables, setInputVariables] = react.useState([...config.inputVariables]);
   const [outputVariable, setOutputVariable] = react.useState(config.outputVariable);
   const [aggregationMode, setAggregationMode] = react.useState(config.aggregationMode);
-  const [newVariable, setNewVariable] = react.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__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("inputVariablesLabel") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunk4XID6LOC_js.FormInput,
-          {
-            type: "text",
-            value: newVariable,
-            onValueChange: setNewVariable,
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunk4XID6LOC_js.Button,
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            children: t("addInputVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 space-y-2", children: inputVariables.map((variable, index) => /* @__PURE__ */ jsxRuntime.jsx(chunk4XID6LOC_js.Card, { className: "border-purple-200/70 dark:border-purple-500/30", children: /* @__PURE__ */ jsxRuntime.jsx(chunk4XID6LOC_js.CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          chunk4XID6LOC_js.FormInput,
-          {
-            type: "text",
-            value: variable,
-            onValueChange: (value) => handleVariableChange(index, value),
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunk4XID6LOC_js.IconButton,
-          {
-            icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" }),
-            label: `Remove ${variable || index + 1}`,
-            onClick: () => handleRemoveVariable(index),
-            size: "sm",
-            color: "ios-red"
-          }
-        )
-      ] }) }) }, `${index}-${variable}`)) })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VariableListEditor,
+      {
+        variables: inputVariables,
+        onChange: setInputVariables,
+        label: t("inputVariablesLabel"),
+        placeholder: t("variablePlaceholder"),
+        addLabel: t("addInputVariable"),
+        color: "purple",
+        numbered: true,
+        editable: true
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       chunk4XID6LOC_js.FormInput,
       {
@@ -7199,5 +7106,5 @@ exports.useModalStore = useModalStore;
 exports.useWorkflowBuilderClient = useWorkflowBuilderClient;
 exports.useWorkflowBuilderClientOptional = useWorkflowBuilderClientOptional;
 exports.useWorkflowStore = useWorkflowStore;
-//# sourceMappingURL=chunk-E7GVGD4Z.js.map
-//# sourceMappingURL=chunk-E7GVGD4Z.js.map
+//# sourceMappingURL=chunk-TKLALDY4.js.map
+//# sourceMappingURL=chunk-TKLALDY4.js.map