@datatechsolutions/ui 2.11.6 → 2.11.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { GlassModalShell, ContextMenu, FormInput, FormTextarea, FormSelect, Button, Card, CardContent, IconButton, Input } from './chunk-46ZM5VJJ.mjs';
2
+ import { GlassModalShell, ContextMenu, FormInput, FormTextarea, FormSelect, Button, IconButton } from './chunk-46ZM5VJJ.mjs';
3
3
  import { GraphNodeHeader, GraphNodeMeta, GraphNodeBadge, GraphNodeIconBubble } from './chunk-OZNTQROP.mjs';
4
4
  import { getAgentTier, createDefaultLogicNodeConfig, applyDagreLayout } from './chunk-TLPPVL3W.mjs';
5
5
  import { useTranslations, I18nProvider, createI18nFromMessages } from './chunk-7VJ7CMMT.mjs';
@@ -2888,203 +2888,214 @@ var GroupFlowNode = memo(function GroupFlowNode2({ id, data, selected }) {
2888
2888
  /* @__PURE__ */ jsx(WorkflowHandle, { type: "source", position: Position.Right, id: "right-out", colorClass: "!bg-slate-500" })
2889
2889
  ] });
2890
2890
  });
2891
- function StartNodeConfigForm({ config, onSave, onCancel }) {
2892
- const t = useTranslations("agents.workflow.startNodeConfig");
2893
- const [inputVariables, setInputVariables] = useState([...config.inputVariables]);
2891
+ function ConfigFormActions({
2892
+ cancelLabel,
2893
+ saveLabel,
2894
+ onCancel,
2895
+ onSave,
2896
+ saveDisabled = false
2897
+ }) {
2898
+ return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
2899
+ /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
2900
+ /* @__PURE__ */ jsx(Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
2901
+ ] });
2902
+ }
2903
+ var COLOR_CLASSES = {
2904
+ green: {
2905
+ badge: "bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300",
2906
+ input: "focus:border-green-400 focus:ring-green-400/20",
2907
+ row: "border-green-200/30 dark:border-green-500/15",
2908
+ add: "text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300",
2909
+ dot: "bg-green-500"
2910
+ },
2911
+ blue: {
2912
+ badge: "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300",
2913
+ input: "focus:border-blue-400 focus:ring-blue-400/20",
2914
+ row: "border-blue-200/30 dark:border-blue-500/15",
2915
+ add: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
2916
+ dot: "bg-blue-500"
2917
+ },
2918
+ purple: {
2919
+ badge: "bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300",
2920
+ input: "focus:border-purple-400 focus:ring-purple-400/20",
2921
+ row: "border-purple-200/30 dark:border-purple-500/15",
2922
+ add: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300",
2923
+ dot: "bg-purple-500"
2924
+ },
2925
+ red: {
2926
+ badge: "bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300",
2927
+ input: "focus:border-red-400 focus:ring-red-400/20",
2928
+ row: "border-red-200/30 dark:border-red-500/15",
2929
+ add: "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
2930
+ dot: "bg-red-500"
2931
+ },
2932
+ teal: {
2933
+ badge: "bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-300",
2934
+ input: "focus:border-teal-400 focus:ring-teal-400/20",
2935
+ row: "border-teal-200/30 dark:border-teal-500/15",
2936
+ add: "text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300",
2937
+ dot: "bg-teal-500"
2938
+ }
2939
+ };
2940
+ function VariableListEditor({
2941
+ variables,
2942
+ onChange,
2943
+ placeholder = "Variable name",
2944
+ label,
2945
+ addLabel = "Add",
2946
+ color = "green",
2947
+ numbered = false,
2948
+ editable = false,
2949
+ max = 0
2950
+ }) {
2894
2951
  const [newVariable, setNewVariable] = useState("");
2895
- const handleAddVariable = () => {
2952
+ const inputRef = useRef(null);
2953
+ const colors = COLOR_CLASSES[color];
2954
+ const canAdd = max === 0 || variables.length < max;
2955
+ const handleAdd = useCallback(() => {
2896
2956
  const trimmed = newVariable.trim();
2897
- if (trimmed && !inputVariables.includes(trimmed)) {
2898
- setInputVariables([...inputVariables, trimmed]);
2899
- setNewVariable("");
2900
- }
2901
- };
2902
- const handleRemoveVariable = (variable) => {
2903
- setInputVariables(inputVariables.filter((existingVariable) => existingVariable !== variable));
2904
- };
2905
- const handleKeyDown = (event) => {
2957
+ if (!trimmed || variables.includes(trimmed)) return;
2958
+ onChange([...variables, trimmed]);
2959
+ setNewVariable("");
2960
+ inputRef.current?.focus();
2961
+ }, [newVariable, variables, onChange]);
2962
+ const handleRemove = useCallback((index) => {
2963
+ onChange(variables.filter((_, i) => i !== index));
2964
+ }, [variables, onChange]);
2965
+ const handleEdit = useCallback((index, value) => {
2966
+ const updated = [...variables];
2967
+ updated[index] = value;
2968
+ onChange(updated);
2969
+ }, [variables, onChange]);
2970
+ const handleKeyDown = useCallback((event) => {
2906
2971
  if (event.key === "Enter") {
2907
2972
  event.preventDefault();
2908
- handleAddVariable();
2973
+ handleAdd();
2909
2974
  }
2910
- };
2975
+ }, [handleAdd]);
2976
+ return /* @__PURE__ */ jsxs("div", { children: [
2977
+ label && /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
2978
+ variables.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 space-y-1", children: variables.map((variable, index) => /* @__PURE__ */ jsxs(
2979
+ "div",
2980
+ {
2981
+ className: `group flex items-center gap-2 rounded-lg border px-2.5 py-1.5 transition-colors ${colors.row} hover:bg-white/5`,
2982
+ children: [
2983
+ 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}` }),
2984
+ editable ? /* @__PURE__ */ jsx(
2985
+ "input",
2986
+ {
2987
+ type: "text",
2988
+ value: variable,
2989
+ onChange: (event) => handleEdit(index, event.target.value),
2990
+ 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`
2991
+ }
2992
+ ) : /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-gray-900 dark:text-white", children: variable }),
2993
+ /* @__PURE__ */ jsx(
2994
+ "button",
2995
+ {
2996
+ type: "button",
2997
+ onClick: () => handleRemove(index),
2998
+ 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",
2999
+ "aria-label": `Remove ${variable}`,
3000
+ children: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3.5 w-3.5" })
3001
+ }
3002
+ )
3003
+ ]
3004
+ },
3005
+ `${index}-${variable}`
3006
+ )) }),
3007
+ canAdd && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
3008
+ /* @__PURE__ */ jsx(
3009
+ "input",
3010
+ {
3011
+ ref: inputRef,
3012
+ type: "text",
3013
+ value: newVariable,
3014
+ onChange: (event) => setNewVariable(event.target.value),
3015
+ onKeyDown: handleKeyDown,
3016
+ placeholder,
3017
+ 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"
3018
+ }
3019
+ ),
3020
+ /* @__PURE__ */ jsxs(
3021
+ "button",
3022
+ {
3023
+ type: "button",
3024
+ onClick: handleAdd,
3025
+ disabled: !newVariable.trim(),
3026
+ 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`,
3027
+ children: [
3028
+ /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3.5 w-3.5" }),
3029
+ addLabel
3030
+ ]
3031
+ }
3032
+ )
3033
+ ] }),
3034
+ variables.length === 0 && !canAdd && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: "No variables defined" })
3035
+ ] });
3036
+ }
3037
+ function StartNodeConfigForm({ config, onSave, onCancel }) {
3038
+ const t = useTranslations("agents.workflow.startNodeConfig");
3039
+ const [inputVariables, setInputVariables] = useState([...config.inputVariables]);
2911
3040
  const handleSave = () => {
2912
3041
  onSave({ ...config, inputVariables });
2913
3042
  };
2914
3043
  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
2915
3044
  /* @__PURE__ */ jsxs("div", { children: [
2916
- /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("inputVariablesLabel") }),
2917
3045
  /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("inputVariablesHelp") }),
2918
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
2919
- /* @__PURE__ */ jsx(
2920
- Input,
2921
- {
2922
- value: newVariable,
2923
- onChange: (event) => setNewVariable(event.target.value),
2924
- onKeyDown: handleKeyDown,
2925
- placeholder: t("variablePlaceholder"),
2926
- className: "flex-1"
2927
- }
2928
- ),
2929
- /* @__PURE__ */ jsx(
2930
- Button,
2931
- {
2932
- type: "button",
2933
- onClick: handleAddVariable,
2934
- outline: true,
2935
- size: "sm",
2936
- children: t("addVariable")
2937
- }
2938
- )
2939
- ] }),
2940
- /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: inputVariables.map((variable) => /* @__PURE__ */ jsxs(
2941
- "span",
2942
- {
2943
- 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",
2944
- children: [
2945
- variable,
2946
- /* @__PURE__ */ jsx(
2947
- IconButton,
2948
- {
2949
- icon: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" }),
2950
- label: `Remove ${variable}`,
2951
- onClick: () => handleRemoveVariable(variable),
2952
- variant: "ghost",
2953
- size: "sm",
2954
- className: "!p-0"
2955
- }
2956
- )
2957
- ]
2958
- },
2959
- variable
2960
- )) })
2961
- ] }),
2962
- /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
2963
3046
  /* @__PURE__ */ jsx(
2964
- Button,
3047
+ VariableListEditor,
2965
3048
  {
2966
- type: "button",
2967
- onClick: onCancel,
2968
- outline: true,
2969
- size: "sm",
2970
- children: t("cancel")
2971
- }
2972
- ),
2973
- /* @__PURE__ */ jsx(
2974
- Button,
2975
- {
2976
- type: "button",
2977
- onClick: handleSave,
2978
- color: "ios-glass-blue",
2979
- size: "sm",
2980
- children: t("save")
3049
+ variables: inputVariables,
3050
+ onChange: setInputVariables,
3051
+ label: t("inputVariablesLabel"),
3052
+ placeholder: t("variablePlaceholder"),
3053
+ addLabel: t("addVariable"),
3054
+ color: "green"
2981
3055
  }
2982
3056
  )
2983
- ] })
3057
+ ] }),
3058
+ /* @__PURE__ */ jsx(
3059
+ ConfigFormActions,
3060
+ {
3061
+ cancelLabel: t("cancel"),
3062
+ saveLabel: t("save"),
3063
+ onCancel,
3064
+ onSave: handleSave
3065
+ }
3066
+ )
2984
3067
  ] });
2985
3068
  }
2986
3069
  function EndNodeConfigForm({ config, onSave, onCancel }) {
2987
3070
  const t = useTranslations("agents.workflow.endNodeConfig");
2988
3071
  const [outputVariables, setOutputVariables] = useState([...config.outputVariables]);
2989
- const [newVariable, setNewVariable] = useState("");
2990
- const handleAddVariable = () => {
2991
- const trimmed = newVariable.trim();
2992
- if (trimmed && !outputVariables.includes(trimmed)) {
2993
- setOutputVariables([...outputVariables, trimmed]);
2994
- setNewVariable("");
2995
- }
2996
- };
2997
- const handleRemoveVariable = (variable) => {
2998
- setOutputVariables(outputVariables.filter((existingVariable) => existingVariable !== variable));
2999
- };
3000
- const handleKeyDown = (event) => {
3001
- if (event.key === "Enter") {
3002
- event.preventDefault();
3003
- handleAddVariable();
3004
- }
3005
- };
3006
3072
  const handleSave = () => {
3007
3073
  onSave({ ...config, outputVariables });
3008
3074
  };
3009
3075
  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
3010
3076
  /* @__PURE__ */ jsxs("div", { children: [
3011
- /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariablesLabel") }),
3012
3077
  /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariablesHelp") }),
3013
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
3014
- /* @__PURE__ */ jsx(
3015
- "input",
3016
- {
3017
- type: "text",
3018
- value: newVariable,
3019
- onChange: (event) => setNewVariable(event.target.value),
3020
- onKeyDown: handleKeyDown,
3021
- placeholder: t("variablePlaceholder"),
3022
- 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"
3023
- }
3024
- ),
3025
- /* @__PURE__ */ jsx(
3026
- "button",
3027
- {
3028
- type: "button",
3029
- onClick: handleAddVariable,
3030
- className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
3031
- children: t("addVariable")
3032
- }
3033
- )
3034
- ] }),
3035
- /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: outputVariables.map((variable) => /* @__PURE__ */ jsxs(
3036
- "span",
3037
- {
3038
- 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",
3039
- children: [
3040
- variable,
3041
- /* @__PURE__ */ jsx(
3042
- "button",
3043
- {
3044
- type: "button",
3045
- onClick: () => handleRemoveVariable(variable),
3046
- className: "text-sm text-red-500 hover:text-red-600",
3047
- "aria-label": `Remove ${variable}`,
3048
- children: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" })
3049
- }
3050
- )
3051
- ]
3052
- },
3053
- variable
3054
- )) })
3055
- ] }),
3056
- /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
3057
- /* @__PURE__ */ jsx(
3058
- "button",
3059
- {
3060
- type: "button",
3061
- onClick: onCancel,
3062
- 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",
3063
- children: t("cancel")
3064
- }
3065
- ),
3066
3078
  /* @__PURE__ */ jsx(
3067
- "button",
3079
+ VariableListEditor,
3068
3080
  {
3069
- type: "button",
3070
- onClick: handleSave,
3071
- 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",
3072
- children: t("save")
3081
+ variables: outputVariables,
3082
+ onChange: setOutputVariables,
3083
+ label: t("outputVariablesLabel"),
3084
+ placeholder: t("variablePlaceholder"),
3085
+ addLabel: t("addVariable"),
3086
+ color: "red"
3073
3087
  }
3074
3088
  )
3075
- ] })
3076
- ] });
3077
- }
3078
- function ConfigFormActions({
3079
- cancelLabel,
3080
- saveLabel,
3081
- onCancel,
3082
- onSave,
3083
- saveDisabled = false
3084
- }) {
3085
- return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
3086
- /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
3087
- /* @__PURE__ */ jsx(Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
3089
+ ] }),
3090
+ /* @__PURE__ */ jsx(
3091
+ ConfigFormActions,
3092
+ {
3093
+ cancelLabel: t("cancel"),
3094
+ saveLabel: t("save"),
3095
+ onCancel,
3096
+ onSave: handleSave
3097
+ }
3098
+ )
3088
3099
  ] });
3089
3100
  }
3090
3101
  var OPERATOR_OPTIONS = [
@@ -3566,23 +3577,6 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
3566
3577
  const t = useTranslations("agents.workflow.answerNodeConfig");
3567
3578
  const [outputTemplate, setOutputTemplate] = useState(config.outputTemplate);
3568
3579
  const [outputVariables, setOutputVariables] = useState([...config.outputVariables]);
3569
- const [newVariable, setNewVariable] = useState("");
3570
- const handleAddVariable = () => {
3571
- const trimmed = newVariable.trim();
3572
- if (trimmed && !outputVariables.includes(trimmed)) {
3573
- setOutputVariables([...outputVariables, trimmed]);
3574
- setNewVariable("");
3575
- }
3576
- };
3577
- const handleRemoveVariable = (variable) => {
3578
- setOutputVariables(outputVariables.filter((existingVariable) => existingVariable !== variable));
3579
- };
3580
- const handleKeyDown = (event) => {
3581
- if (event.key === "Enter") {
3582
- event.preventDefault();
3583
- handleAddVariable();
3584
- }
3585
- };
3586
3580
  const handleSave = () => {
3587
3581
  onSave({ ...config, outputTemplate, outputVariables });
3588
3582
  };
@@ -3599,50 +3593,17 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
3599
3593
  className: "font-mono text-xs"
3600
3594
  }
3601
3595
  ),
3602
- /* @__PURE__ */ jsxs("div", { children: [
3603
- /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariablesLabel") }),
3604
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
3605
- /* @__PURE__ */ jsx(
3606
- FormInput,
3607
- {
3608
- type: "text",
3609
- value: newVariable,
3610
- onValueChange: setNewVariable,
3611
- onKeyDown: handleKeyDown,
3612
- placeholder: t("variablePlaceholder"),
3613
- className: "flex-1"
3614
- }
3615
- ),
3616
- /* @__PURE__ */ jsx(
3617
- Button,
3618
- {
3619
- type: "button",
3620
- onClick: handleAddVariable,
3621
- children: t("addVariable")
3622
- }
3623
- )
3624
- ] }),
3625
- /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: outputVariables.map((variable) => /* @__PURE__ */ jsxs(
3626
- "span",
3627
- {
3628
- 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",
3629
- children: [
3630
- variable,
3631
- /* @__PURE__ */ jsx(
3632
- IconButton,
3633
- {
3634
- onClick: () => handleRemoveVariable(variable),
3635
- icon: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" }),
3636
- label: `Remove ${variable}`,
3637
- size: "sm",
3638
- color: "ios-red"
3639
- }
3640
- )
3641
- ]
3642
- },
3643
- variable
3644
- )) })
3645
- ] }),
3596
+ /* @__PURE__ */ jsx(
3597
+ VariableListEditor,
3598
+ {
3599
+ variables: outputVariables,
3600
+ onChange: setOutputVariables,
3601
+ label: t("outputVariablesLabel"),
3602
+ placeholder: t("variablePlaceholder"),
3603
+ addLabel: t("addVariable"),
3604
+ color: "blue"
3605
+ }
3606
+ ),
3646
3607
  /* @__PURE__ */ jsx(
3647
3608
  ConfigFormActions,
3648
3609
  {
@@ -4037,77 +3998,23 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
4037
3998
  const [inputVariables, setInputVariables] = useState([...config.inputVariables]);
4038
3999
  const [outputVariable, setOutputVariable] = useState(config.outputVariable);
4039
4000
  const [aggregationMode, setAggregationMode] = useState(config.aggregationMode);
4040
- const [newVariable, setNewVariable] = useState("");
4041
- const handleAddVariable = () => {
4042
- const trimmed = newVariable.trim();
4043
- if (trimmed && !inputVariables.includes(trimmed)) {
4044
- setInputVariables([...inputVariables, trimmed]);
4045
- setNewVariable("");
4046
- }
4047
- };
4048
- const handleRemoveVariable = (index) => {
4049
- setInputVariables(inputVariables.filter((_, variableIndex) => variableIndex !== index));
4050
- };
4051
- const handleVariableChange = (index, value) => {
4052
- setInputVariables(inputVariables.map((variable, variableIndex) => variableIndex === index ? value : variable));
4053
- };
4054
- const handleKeyDown = (event) => {
4055
- if (event.key === "Enter") {
4056
- event.preventDefault();
4057
- handleAddVariable();
4058
- }
4059
- };
4060
4001
  const handleSave = () => {
4061
4002
  onSave({ ...config, inputVariables, outputVariable, aggregationMode });
4062
4003
  };
4063
4004
  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
4064
- /* @__PURE__ */ jsxs("div", { children: [
4065
- /* @__PURE__ */ jsx("p", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("inputVariablesLabel") }),
4066
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
4067
- /* @__PURE__ */ jsx(
4068
- FormInput,
4069
- {
4070
- type: "text",
4071
- value: newVariable,
4072
- onValueChange: setNewVariable,
4073
- onKeyDown: handleKeyDown,
4074
- placeholder: t("variablePlaceholder"),
4075
- className: "flex-1"
4076
- }
4077
- ),
4078
- /* @__PURE__ */ jsx(
4079
- Button,
4080
- {
4081
- type: "button",
4082
- onClick: handleAddVariable,
4083
- children: t("addInputVariable")
4084
- }
4085
- )
4086
- ] }),
4087
- /* @__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: [
4088
- /* @__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 }),
4089
- /* @__PURE__ */ jsx(
4090
- FormInput,
4091
- {
4092
- type: "text",
4093
- value: variable,
4094
- onValueChange: (value) => handleVariableChange(index, value),
4095
- placeholder: t("variablePlaceholder"),
4096
- className: "flex-1"
4097
- }
4098
- ),
4099
- /* @__PURE__ */ jsx(
4100
- IconButton,
4101
- {
4102
- icon: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" }),
4103
- label: `Remove ${variable || index + 1}`,
4104
- onClick: () => handleRemoveVariable(index),
4105
- size: "sm",
4106
- color: "ios-red"
4107
- }
4108
- )
4109
- ] }) }) }, `${index}-${variable}`)) })
4110
- ] }),
4005
+ /* @__PURE__ */ jsx(
4006
+ VariableListEditor,
4007
+ {
4008
+ variables: inputVariables,
4009
+ onChange: setInputVariables,
4010
+ label: t("inputVariablesLabel"),
4011
+ placeholder: t("variablePlaceholder"),
4012
+ addLabel: t("addInputVariable"),
4013
+ color: "purple",
4014
+ numbered: true,
4015
+ editable: true
4016
+ }
4017
+ ),
4111
4018
  /* @__PURE__ */ jsx(
4112
4019
  FormInput,
4113
4020
  {
@@ -7139,5 +7046,5 @@ function Workspace({
7139
7046
  }
7140
7047
 
7141
7048
  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 };
7142
- //# sourceMappingURL=chunk-TM2UUOQO.mjs.map
7143
- //# sourceMappingURL=chunk-TM2UUOQO.mjs.map
7049
+ //# sourceMappingURL=chunk-76MHUX4T.mjs.map
7050
+ //# sourceMappingURL=chunk-76MHUX4T.mjs.map