@flowgram.ai/form-materials 0.2.27 → 0.2.29

package/dist/index.js

@@ -37,6 +37,7 @@ __export(src_exports, {
   ConditionRow: () => ConditionRow,
   ConstantInput: () => ConstantInput,
   DynamicValueInput: () => DynamicValueInput,
+  InputsValues: () => InputsValues,
   JsonEditorWithVariables: () => JsonEditorWithVariables,
   JsonSchemaEditor: () => JsonSchemaEditor,
   JsonSchemaUtils: () => JsonSchemaUtils,
@@ -48,6 +49,7 @@ __export(src_exports, {
   VariableTypeIcons: () => VariableTypeIcons,
   autoRenameRefEffect: () => autoRenameRefEffect,
   createBatchOutputsFormPlugin: () => createBatchOutputsFormPlugin,
+  createInferInputsPlugin: () => createInferInputsPlugin,
   formatLegacyRefOnInit: () => formatLegacyRefOnInit,
   formatLegacyRefOnSubmit: () => formatLegacyRefOnSubmit,
   formatLegacyRefToNewRef: () => formatLegacyRefToNewRef,
@@ -67,6 +69,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/components/variable-selector/index.tsx
 var import_react3 = __toESM(require("react"));
+var import_semi_ui3 = require("@douyinfe/semi-ui");
 var import_semi_icons2 = require("@douyinfe/semi-icons");
 
 // src/components/variable-selector/use-variable-tree.tsx
@@ -660,7 +663,10 @@ var UIVarName = import_styled_components.default.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 50%;
+
+  ${({ $inSelector }) => $inSelector && import_styled_components.css`
+      min-width: 50%;
+    `}
 `;
 var UITag = (0, import_styled_components.default)(import_semi_ui2.Tag)`
   width: 100%;
@@ -674,17 +680,14 @@ var UITag = (0, import_styled_components.default)(import_semi_ui2.Tag)`
 
   &.semi-tag {
     margin: 0;
+    height: 22px;
   }
 `;
 var UITreeSelect = (0, import_styled_components.default)(import_semi_ui2.TreeSelect)`
   outline: ${({ $error }) => $error ? "1px solid red" : "none"};
 
-  height: 22px;
-  min-height: 22px;
-  line-height: 22px;
-
   & .semi-tree-select-selection {
-    padding: 0 2px;
+    padding: 0px;
     height: 22px;
   }
 
@@ -696,6 +699,13 @@ var UITreeSelect = (0, import_styled_components.default)(import_semi_ui2.TreeSel
     padding-left: 10px;
   }
 `;
+var UIPopoverContent = import_styled_components.default.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+`;
 
 // src/components/variable-selector/index.tsx
 var VariableSelector = ({
@@ -754,16 +764,24 @@ var VariableSelector = ({
             config?.notFoundContent ?? "Undefined"
           );
         }
-        return /* @__PURE__ */ import_react3.default.createElement(
-          UITag,
+        const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
+        const rootTitle = /* @__PURE__ */ import_react3.default.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null);
+        return /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement(
+          import_semi_ui3.Popover,
           {
-            prefixIcon: renderIcon(_option.rootMeta?.icon || _option?.icon),
-            closable: !readonly,
-            onClose: () => onChange(void 0)
+            content: /* @__PURE__ */ import_react3.default.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ import_react3.default.createElement(UIVarName, null, _option.keyPath.slice(1).join(".")))
           },
-          /* @__PURE__ */ import_react3.default.createElement(UIRootTitle, null, _option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null),
-          /* @__PURE__ */ import_react3.default.createElement(UIVarName, null, _option.label)
-        );
+          /* @__PURE__ */ import_react3.default.createElement(
+            UITag,
+            {
+              prefixIcon: rootIcon,
+              closable: !readonly,
+              onClose: () => onChange(void 0)
+            },
+            rootTitle,
+            /* @__PURE__ */ import_react3.default.createElement(UIVarName, { $inSelector: true }, _option.label)
+          )
+        ));
       },
       showClear: false,
       arrowIcon: /* @__PURE__ */ import_react3.default.createElement(import_semi_icons2.IconChevronDownStroked, { size: "small" }),
@@ -775,7 +793,7 @@ var VariableSelector = ({
 
 // src/components/type-selector/index.tsx
 var import_react4 = __toESM(require("react"));
-var import_semi_ui3 = require("@douyinfe/semi-ui");
+var import_semi_ui4 = require("@douyinfe/semi-ui");
 var getTypeSelectValue = (value) => {
   if (value?.type === "array" && value?.items) {
     return [value.type, ...getTypeSelectValue(value.items) || []];
@@ -790,19 +808,27 @@ var parseTypeSelectValue = (value) => {
   return { type };
 };
 function TypeSelector(props) {
-  const { value, onChange, disabled, style } = props;
+  const { value, onChange, readonly, disabled, style } = props;
   const selectValue = (0, import_react4.useMemo)(() => getTypeSelectValue(value), [value]);
   return /* @__PURE__ */ import_react4.default.createElement(
-    import_semi_ui3.Cascader,
+    import_semi_ui4.Cascader,
     {
-      disabled,
+      disabled: readonly || disabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ import_react4.default.createElement(import_semi_ui3.Button, { size: "small", style }, getSchemaIcon(value)),
+      triggerRender: () => /* @__PURE__ */ import_react4.default.createElement(
+        import_semi_ui4.IconButton,
+        {
+          size: "small",
+          style,
+          disabled: readonly || disabled,
+          icon: getSchemaIcon(value)
+        }
+      ),
       treeData: options,
       value: selectValue,
       leafOnly: true,
       onChange: (value2) => {
-        onChange(parseTypeSelectValue(value2));
+        onChange?.(parseTypeSelectValue(value2));
       }
     }
   );
@@ -810,7 +836,7 @@ function TypeSelector(props) {
 
 // src/components/json-schema-editor/index.tsx
 var import_react10 = __toESM(require("react"));
-var import_semi_ui6 = require("@douyinfe/semi-ui");
+var import_semi_ui7 = require("@douyinfe/semi-ui");
 var import_semi_icons5 = require("@douyinfe/semi-icons");
 
 // src/components/json-schema-editor/styles.tsx
@@ -1121,7 +1147,7 @@ function usePropertiesEdit(value, onChange) {
 
 // src/components/json-schema-editor/default-value.tsx
 var import_react8 = __toESM(require("react"));
-var import_semi_ui5 = require("@douyinfe/semi-ui");
+var import_semi_ui6 = require("@douyinfe/semi-ui");
 var import_semi_icons4 = require("@douyinfe/semi-icons");
 
 // src/components/json-schema-editor/utils.ts
@@ -1145,16 +1171,16 @@ function getValueType(value) {
 
 // src/components/constant-input/index.tsx
 var import_react7 = __toESM(require("react"));
-var import_semi_ui4 = require("@douyinfe/semi-ui");
+var import_semi_ui5 = require("@douyinfe/semi-ui");
 var defaultStrategies = [
   {
     hit: (schema) => schema?.type === "string",
-    Renderer: (props) => /* @__PURE__ */ import_react7.default.createElement(import_semi_ui4.Input, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
+    Renderer: (props) => /* @__PURE__ */ import_react7.default.createElement(import_semi_ui5.Input, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
   },
   {
     hit: (schema) => schema?.type === "number",
     Renderer: (props) => /* @__PURE__ */ import_react7.default.createElement(
-      import_semi_ui4.InputNumber,
+      import_semi_ui5.InputNumber,
       {
         placeholder: "Please Input Number",
         size: "small",
@@ -1167,7 +1193,7 @@ var defaultStrategies = [
   {
     hit: (schema) => schema?.type === "integer",
     Renderer: (props) => /* @__PURE__ */ import_react7.default.createElement(
-      import_semi_ui4.InputNumber,
+      import_semi_ui5.InputNumber,
       {
         placeholder: "Please Input Integer",
         size: "small",
@@ -1183,7 +1209,7 @@ var defaultStrategies = [
     Renderer: (props) => {
       const { value, onChange, ...rest } = props;
       return /* @__PURE__ */ import_react7.default.createElement(
-        import_semi_ui4.Select,
+        import_semi_ui5.Select,
         {
           placeholder: "Please Select Boolean",
           size: "small",
@@ -1201,9 +1227,18 @@ var defaultStrategies = [
   }
 ];
 function ConstantInput(props) {
-  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
+  const {
+    value,
+    onChange,
+    schema,
+    strategies: extraStrategies,
+    fallbackRenderer,
+    readonly,
+    ...rest
+  } = props;
   const strategies = (0, import_react7.useMemo)(
-    () => [...defaultStrategies, ...extraStrategies || []],
+    // user's extraStrategies first
+    () => [...extraStrategies || [], ...defaultStrategies],
     [extraStrategies]
   );
   const Renderer2 = (0, import_react7.useMemo)(() => {
@@ -1211,7 +1246,15 @@ function ConstantInput(props) {
     return strategy?.Renderer;
   }, [strategies, schema]);
   if (!Renderer2) {
-    return /* @__PURE__ */ import_react7.default.createElement(import_semi_ui4.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
+    if (fallbackRenderer) {
+      return import_react7.default.createElement(fallbackRenderer, {
+        value,
+        onChange,
+        readonly,
+        ...rest
+      });
+    }
+    return /* @__PURE__ */ import_react7.default.createElement(import_semi_ui5.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
   }
   return /* @__PURE__ */ import_react7.default.createElement(Renderer2, { value, onChange, readonly, ...rest });
 }
@@ -1247,8 +1290,8 @@ function DefaultValue(props) {
       console.error("Invalid JSON:", error);
     }
   }, [internalJsonValue, onChange]);
-  return type === "object" ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(JSONHeader, null, /* @__PURE__ */ import_react8.default.createElement(JSONHeaderLeft, null, "json"), /* @__PURE__ */ import_react8.default.createElement(JSONHeaderRight, null, /* @__PURE__ */ import_react8.default.createElement(import_semi_ui5.Tooltip, { content: jsonFormatText ?? "Format" }, /* @__PURE__ */ import_react8.default.createElement(
-    import_semi_ui5.IconButton,
+  return type === "object" ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(JSONHeader, null, /* @__PURE__ */ import_react8.default.createElement(JSONHeaderLeft, null, "json"), /* @__PURE__ */ import_react8.default.createElement(JSONHeaderRight, null, /* @__PURE__ */ import_react8.default.createElement(import_semi_ui6.Tooltip, { content: jsonFormatText ?? "Format" }, /* @__PURE__ */ import_react8.default.createElement(
+    import_semi_ui6.IconButton,
     {
       icon: /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconBrackets, { style: { color: "var(--semi-color-primary)" } }),
       size: "small",
@@ -1271,7 +1314,7 @@ function DefaultValue(props) {
       }
     },
     /* @__PURE__ */ import_react8.default.createElement(
-      import_semi_ui5.JsonViewer,
+      import_semi_ui6.JsonViewer,
       {
         ref: JsonViewerRef,
         value: getValueType(value) === "string" ? value : "",
@@ -1322,7 +1365,7 @@ function BlurInput(props) {
 
 // src/components/json-schema-editor/index.tsx
 function JsonSchemaEditor(props) {
-  const { value = { type: "object" }, config = {}, onChange: onChangeProps } = props;
+  const { value = { type: "object" }, config = {}, onChange: onChangeProps, readonly } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
@@ -1330,6 +1373,7 @@ function JsonSchemaEditor(props) {
   return /* @__PURE__ */ import_react10.default.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ import_react10.default.createElement(UIProperties, null, propertyList.map((_property, index) => /* @__PURE__ */ import_react10.default.createElement(
     PropertyEdit,
     {
+      readonly,
       key: _property.key,
       value: _property,
       config,
@@ -1342,8 +1386,9 @@ function JsonSchemaEditor(props) {
       }
     }
   ))), /* @__PURE__ */ import_react10.default.createElement(
-    import_semi_ui6.Button,
+    import_semi_ui7.Button,
     {
+      disabled: readonly,
       size: "small",
       style: { marginTop: 10, marginLeft: 16 },
       icon: /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconPlus, null),
@@ -1356,6 +1401,7 @@ function PropertyEdit(props) {
   const {
     value,
     config,
+    readonly,
     $level = 0,
     onChange: onChangeProps,
     onRemove,
@@ -1402,6 +1448,7 @@ function PropertyEdit(props) {
     /* @__PURE__ */ import_react10.default.createElement(UIRow, null, /* @__PURE__ */ import_react10.default.createElement(UIName, null, /* @__PURE__ */ import_react10.default.createElement(
       BlurInput,
       {
+        disabled: readonly,
         placeholder: config?.placeholder ?? "Input Variable Name",
         size: "small",
         value: name,
@@ -1411,6 +1458,7 @@ function PropertyEdit(props) {
       TypeSelector,
       {
         value: typeSelectorValue,
+        readonly,
         onChange: (_value) => {
           onChangeProps?.({
             ...value || {},
@@ -1419,14 +1467,16 @@ function PropertyEdit(props) {
         }
       }
     )), /* @__PURE__ */ import_react10.default.createElement(UIRequired, null, /* @__PURE__ */ import_react10.default.createElement(
-      import_semi_ui6.Checkbox,
+      import_semi_ui7.Checkbox,
       {
+        disabled: readonly,
         checked: isPropertyRequired,
         onChange: (e) => onChange("isPropertyRequired", e.target.checked)
       }
     )), /* @__PURE__ */ import_react10.default.createElement(UIActions, null, /* @__PURE__ */ import_react10.default.createElement(
-      import_semi_ui6.IconButton,
+      import_semi_ui7.IconButton,
       {
+        disabled: readonly,
         size: "small",
         theme: "borderless",
         icon: expand ? /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconExpand, { size: "small" }),
@@ -1435,8 +1485,9 @@ function PropertyEdit(props) {
         }
       }
     ), isDrilldownObject && /* @__PURE__ */ import_react10.default.createElement(
-      import_semi_ui6.IconButton,
+      import_semi_ui7.IconButton,
       {
+        disabled: readonly,
         size: "small",
         theme: "borderless",
         icon: /* @__PURE__ */ import_react10.default.createElement(IconAddChildren, null),
@@ -1446,8 +1497,9 @@ function PropertyEdit(props) {
         }
       }
     ), /* @__PURE__ */ import_react10.default.createElement(
-      import_semi_ui6.IconButton,
+      import_semi_ui7.IconButton,
       {
+        disabled: readonly,
         size: "small",
         theme: "borderless",
         icon: /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconMinus, { size: "small" }),
@@ -1457,6 +1509,7 @@ function PropertyEdit(props) {
     expand && /* @__PURE__ */ import_react10.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react10.default.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ import_react10.default.createElement(
       BlurInput,
       {
+        disabled: readonly,
         size: "small",
         value: description,
         onChange: (value2) => onChange("description", value2),
@@ -1476,6 +1529,7 @@ function PropertyEdit(props) {
   ), showCollapse && /* @__PURE__ */ import_react10.default.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ import_react10.default.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ import_react10.default.createElement(
     PropertyEdit,
     {
+      readonly,
       key: _property.key,
       value: _property,
       config,
@@ -1509,15 +1563,83 @@ function BatchVariableSelector(props) {
 
 // src/components/dynamic-value-input/index.tsx
 var import_react12 = __toESM(require("react"));
-var import_semi_ui7 = require("@douyinfe/semi-ui");
+var import_editor4 = require("@flowgram.ai/editor");
+var import_semi_ui8 = require("@douyinfe/semi-ui");
 var import_semi_icons6 = require("@douyinfe/semi-icons");
 
+// src/utils/format-legacy-refs/index.ts
+var import_lodash3 = require("lodash");
+function formatLegacyRefOnSubmit(value) {
+  if ((0, import_lodash3.isObject)(value)) {
+    if (isLegacyFlowRefValueSchema(value)) {
+      return formatLegacyRefToNewRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnSubmit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnSubmit);
+  }
+  return value;
+}
+function formatLegacyRefOnInit(value) {
+  if ((0, import_lodash3.isObject)(value)) {
+    if (isNewFlowRefValueSchema(value)) {
+      return formatNewRefToLegacyRef(value);
+    }
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [
+        key,
+        formatLegacyRefOnInit(value2)
+      ])
+    );
+  }
+  if (Array.isArray(value)) {
+    return value.map(formatLegacyRefOnInit);
+  }
+  return value;
+}
+function isLegacyFlowRefValueSchema(value) {
+  return (0, import_lodash3.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+}
+function isNewFlowRefValueSchema(value) {
+  return (0, import_lodash3.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
+}
+function formatLegacyRefToNewRef(value) {
+  const keyPath = value.content.split(".");
+  if (keyPath[1] === "outputs") {
+    return {
+      type: "ref",
+      content: [`${keyPath[0]}.${keyPath[1]}`, ...keyPath.length > 2 ? keyPath.slice(2) : []]
+    };
+  }
+  return {
+    type: "ref",
+    content: keyPath
+  };
+}
+function formatNewRefToLegacyRef(value) {
+  return {
+    type: "ref",
+    content: value.content.join(".")
+  };
+}
+
 // src/components/dynamic-value-input/styles.tsx
 var import_styled_components3 = __toESM(require("styled-components"));
 var UIContainer2 = import_styled_components3.default.div`
   display: flex;
   align-items: center;
-  gap: 5px;
+  border-radius: 4px;
+  border: 1px solid var(--semi-color-border);
+
+  overflow: hidden;
+
+  background-color: var(--semi-color-fill-0);
 `;
 var UIMain = import_styled_components3.default.div`
   flex-grow: 1;
@@ -1528,9 +1650,29 @@ var UIMain = import_styled_components3.default.div`
   & .semi-input-number,
   & .semi-select {
     width: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-wrapper {
+    border: none;
+    border-radius: 0;
+  }
+`;
+var UIType2 = import_styled_components3.default.div`
+  border-right: 1px solid #e5e5e5;
+
+  & .semi-button {
+    border-radius: 0;
+  }
+`;
+var UITrigger = import_styled_components3.default.div`
+  border-left: 1px solid #e5e5e5;
+
+  & .semi-button {
+    border-radius: 0;
   }
 `;
-var UITrigger = import_styled_components3.default.div``;
 
 // src/components/dynamic-value-input/index.tsx
 function DynamicValueInput({
@@ -1538,15 +1680,44 @@ function DynamicValueInput({
   onChange,
   readonly,
   style,
-  schema,
+  schema: schemaFromProps,
   constantProps
 }) {
+  const available = (0, import_editor4.useScopeAvailable)();
+  const refVariable = (0, import_react12.useMemo)(() => {
+    if (value?.type === "ref") {
+      return available.getByKeyPath(value.content);
+    }
+  }, [value, available]);
+  const [selectSchema, setSelectSchema] = (0, import_react12.useState)(
+    schemaFromProps || constantProps?.schema || { type: "string" }
+  );
+  const renderTypeSelector = () => {
+    if (schemaFromProps) {
+      return /* @__PURE__ */ import_react12.default.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
+    }
+    if (value?.type === "ref") {
+      const schema = refVariable?.type ? JsonSchemaUtils.astToSchema(refVariable?.type) : void 0;
+      return /* @__PURE__ */ import_react12.default.createElement(TypeSelector, { value: schema, readonly: true });
+    }
+    return /* @__PURE__ */ import_react12.default.createElement(
+      TypeSelector,
+      {
+        value: selectSchema,
+        onChange: (_v) => setSelectSchema(_v || { type: "string" }),
+        readonly
+      }
+    );
+  };
   const includeSchema = (0, import_react12.useMemo)(() => {
-    if (schema?.type === "number") {
-      return [schema, { type: "integer" }];
+    if (!schemaFromProps) {
+      return;
     }
-    return schema;
-  }, [schema]);
+    if (schemaFromProps?.type === "number") {
+      return [schemaFromProps, { type: "integer" }];
+    }
+    return { ...schemaFromProps, extra: { ...schemaFromProps?.extra, weak: true } };
+  }, [schemaFromProps]);
   const renderMain = () => {
     if (value?.type === "ref") {
       return /* @__PURE__ */ import_react12.default.createElement(
@@ -1560,13 +1731,24 @@ function DynamicValueInput({
         }
       );
     }
+    const constantSchema = schemaFromProps || selectSchema || { type: "string" };
     return /* @__PURE__ */ import_react12.default.createElement(
       ConstantInput,
       {
         value: value?.content,
-        onChange: (_v) => onChange({ type: "constant", content: _v }),
-        schema: schema || { type: "string" },
+        onChange: (_v) => onChange({ type: "constant", content: _v, schema: constantSchema }),
+        schema: constantSchema || { type: "string" },
         readonly,
+        strategies: [...constantProps?.strategies || []],
+        fallbackRenderer: () => /* @__PURE__ */ import_react12.default.createElement(
+          VariableSelector,
+          {
+            style: { width: "100%" },
+            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+            includeSchema,
+            readonly
+          }
+        ),
         ...constantProps
       }
     );
@@ -1579,15 +1761,15 @@ function DynamicValueInput({
       onChange: (_v) => onChange({ type: "ref", content: _v }),
       includeSchema,
       readonly,
-      triggerRender: () => /* @__PURE__ */ import_react12.default.createElement(import_semi_ui7.IconButton, { disabled: readonly, size: "small", icon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons6.IconSetting, { size: "small" }) })
+      triggerRender: () => /* @__PURE__ */ import_react12.default.createElement(import_semi_ui8.IconButton, { disabled: readonly, size: "small", icon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons6.IconSetting, { size: "small" }) })
     }
   );
-  return /* @__PURE__ */ import_react12.default.createElement(UIContainer2, { style }, /* @__PURE__ */ import_react12.default.createElement(UIMain, null, renderMain()), /* @__PURE__ */ import_react12.default.createElement(UITrigger, null, renderTrigger()));
+  return /* @__PURE__ */ import_react12.default.createElement(UIContainer2, { style }, /* @__PURE__ */ import_react12.default.createElement(UIType2, null, renderTypeSelector()), /* @__PURE__ */ import_react12.default.createElement(UIMain, null, renderMain()), /* @__PURE__ */ import_react12.default.createElement(UITrigger, null, renderTrigger()));
 }
 
 // src/components/condition-row/index.tsx
 var import_react15 = __toESM(require("react"));
-var import_semi_ui9 = require("@douyinfe/semi-ui");
+var import_semi_ui10 = require("@douyinfe/semi-ui");
 
 // src/components/condition-row/styles.tsx
 var import_styled_components4 = __toESM(require("styled-components"));
@@ -1613,7 +1795,7 @@ var UIValues = import_styled_components4.default.div`
 
 // src/components/condition-row/hooks/useRule.ts
 var import_react13 = require("react");
-var import_editor4 = require("@flowgram.ai/editor");
+var import_editor5 = require("@flowgram.ai/editor");
 
 // src/components/condition-row/constants.ts
 var rules = {
@@ -1737,71 +1919,9 @@ var opConfigs = {
   }
 };
 
-// src/utils/format-legacy-refs/index.ts
-var import_lodash3 = require("lodash");
-function formatLegacyRefOnSubmit(value) {
-  if ((0, import_lodash3.isObject)(value)) {
-    if (isLegacyFlowRefValueSchema(value)) {
-      return formatLegacyRefToNewRef(value);
-    }
-    return Object.fromEntries(
-      Object.entries(value).map(([key, value2]) => [
-        key,
-        formatLegacyRefOnSubmit(value2)
-      ])
-    );
-  }
-  if (Array.isArray(value)) {
-    return value.map(formatLegacyRefOnSubmit);
-  }
-  return value;
-}
-function formatLegacyRefOnInit(value) {
-  if ((0, import_lodash3.isObject)(value)) {
-    if (isNewFlowRefValueSchema(value)) {
-      return formatNewRefToLegacyRef(value);
-    }
-    return Object.fromEntries(
-      Object.entries(value).map(([key, value2]) => [
-        key,
-        formatLegacyRefOnInit(value2)
-      ])
-    );
-  }
-  if (Array.isArray(value)) {
-    return value.map(formatLegacyRefOnInit);
-  }
-  return value;
-}
-function isLegacyFlowRefValueSchema(value) {
-  return (0, import_lodash3.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
-}
-function isNewFlowRefValueSchema(value) {
-  return (0, import_lodash3.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
-}
-function formatLegacyRefToNewRef(value) {
-  const keyPath = value.content.split(".");
-  if (keyPath[1] === "outputs") {
-    return {
-      type: "ref",
-      content: [`${keyPath[0]}.${keyPath[1]}`, ...keyPath.length > 2 ? keyPath.slice(2) : []]
-    };
-  }
-  return {
-    type: "ref",
-    content: keyPath
-  };
-}
-function formatNewRefToLegacyRef(value) {
-  return {
-    type: "ref",
-    content: value.content.join(".")
-  };
-}
-
 // src/components/condition-row/hooks/useRule.ts
 function useRule(left) {
-  const available = (0, import_editor4.useScopeAvailable)();
+  const available = (0, import_editor5.useScopeAvailable)();
   const variable = (0, import_react13.useMemo)(() => {
     if (!left) return void 0;
     return available.getByKeyPath(left.content);
@@ -1816,7 +1936,7 @@ function useRule(left) {
 
 // src/components/condition-row/hooks/useOp.tsx
 var import_react14 = __toESM(require("react"));
-var import_semi_ui8 = require("@douyinfe/semi-ui");
+var import_semi_ui9 = require("@douyinfe/semi-ui");
 var import_semi_icons7 = require("@douyinfe/semi-icons");
 function useOp({ rule, op, onChange }) {
   const options2 = (0, import_react14.useMemo)(
@@ -1828,7 +1948,7 @@ function useOp({ rule, op, onChange }) {
   );
   const opConfig = (0, import_react14.useMemo)(() => opConfigs[op], [op]);
   const renderOpSelect = () => /* @__PURE__ */ import_react14.default.createElement(
-    import_semi_ui8.Select,
+    import_semi_ui9.Select,
     {
       style: { height: 22 },
       size: "small",
@@ -1837,7 +1957,7 @@ function useOp({ rule, op, onChange }) {
       onChange: (v) => {
         onChange(v);
       },
-      triggerRender: ({ value }) => /* @__PURE__ */ import_react14.default.createElement(import_semi_ui8.Button, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ import_react14.default.createElement(import_semi_icons7.IconChevronDownStroked, { size: "small" }))
+      triggerRender: ({ value }) => /* @__PURE__ */ import_react14.default.createElement(import_semi_ui9.Button, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ import_react14.default.createElement(import_semi_icons7.IconChevronDownStroked, { size: "small" }))
     }
   );
   return { renderOpSelect, opConfig };
@@ -1879,7 +1999,7 @@ function ConditionRow({ style, value, onChange, readonly }) {
       onChange: (v) => onChange({ ...value, right: v })
     }
   ) : /* @__PURE__ */ import_react15.default.createElement(
-    import_semi_ui9.Input,
+    import_semi_ui10.Input,
     {
       size: "small",
       disabled: true,
@@ -1891,17 +2011,20 @@ function ConditionRow({ style, value, onChange, readonly }) {
 
 // src/components/batch-outputs/index.tsx
 var import_react17 = __toESM(require("react"));
-var import_semi_ui10 = require("@douyinfe/semi-ui");
+var import_semi_ui11 = require("@douyinfe/semi-ui");
 var import_semi_icons8 = require("@douyinfe/semi-icons");
 
-// src/components/batch-outputs/use-list.ts
+// src/hooks/use-object-list/index.tsx
 var import_react16 = require("react");
+var import_nanoid = require("nanoid");
 var import_lodash4 = require("lodash");
-var _id2 = 0;
 function genId2() {
-  return _id2++;
+  return (0, import_nanoid.nanoid)();
 }
-function useList({ value, onChange }) {
+function useObjectList({
+  value,
+  onChange
+}) {
   const [list, setList] = (0, import_react16.useState)([]);
   (0, import_react16.useEffect)(() => {
     setList((_prevList) => {
@@ -1911,7 +2034,7 @@ function useList({ value, onChange }) {
       return _prevList.filter((item) => !item.key || newKeys.includes(item.key)).map((item) => ({
         id: item.id,
         key: item.key,
-        value: item.key ? value?.[item.key] : void 0
+        value: item.key ? value?.[item.key] : item.value
       })).concat(
         addKeys.map((_key) => ({
           id: genId2(),
@@ -1929,17 +2052,39 @@ function useList({ value, onChange }) {
       }
     ]);
   };
-  const update = (item) => {
+  const updateValue = (itemId, value2) => {
+    setList((prevList) => {
+      const nextList = prevList.map((_item) => {
+        if (_item.id === itemId) {
+          return {
+            ..._item,
+            value: value2
+          };
+        }
+        return _item;
+      });
+      onChange(
+        Object.fromEntries(
+          nextList.filter((item) => item.key).map((item) => [item.key, item.value])
+        )
+      );
+      return nextList;
+    });
+  };
+  const updateKey = (itemId, key) => {
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
-        if (_item.id === item.id) {
-          return item;
+        if (_item.id === itemId) {
+          return {
+            ..._item,
+            key
+          };
         }
         return _item;
       });
       onChange(
         Object.fromEntries(
-          nextList.filter((item2) => item2.key).map((item2) => [item2.key, item2.value])
+          nextList.filter((item) => item.key).map((item) => [item.key, item.value])
         )
       );
       return nextList;
@@ -1956,7 +2101,7 @@ function useList({ value, onChange }) {
       return nextList;
     });
   };
-  return { list, add, update, remove };
+  return { list, add, updateKey, updateValue, remove };
 }
 
 // src/components/batch-outputs/styles.tsx
@@ -1976,15 +2121,15 @@ var UIRow2 = import_styled_components5.default.div`
 // src/components/batch-outputs/index.tsx
 function BatchOutputs(props) {
   const { readonly, style } = props;
-  const { list, add, update, remove } = useList(props);
+  const { list, add, updateKey, updateValue, remove } = useObjectList(props);
   return /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement(UIRows, { style }, list.map((item) => /* @__PURE__ */ import_react17.default.createElement(UIRow2, { key: item.id }, /* @__PURE__ */ import_react17.default.createElement(
-    import_semi_ui10.Input,
+    import_semi_ui11.Input,
     {
       style: { width: 100 },
       disabled: readonly,
       size: "small",
       value: item.key,
-      onChange: (v) => update({ ...item, key: v })
+      onChange: (v) => updateKey(item.id, v)
     }
   ), /* @__PURE__ */ import_react17.default.createElement(
     VariableSelector,
@@ -1992,23 +2137,17 @@ function BatchOutputs(props) {
       style: { flexGrow: 1 },
       readonly,
       value: item.value?.content,
-      onChange: (v) => update({
-        ...item,
-        value: {
-          type: "ref",
-          content: v
-        }
-      })
+      onChange: (v) => updateValue(item.id, { type: "ref", content: v })
     }
   ), /* @__PURE__ */ import_react17.default.createElement(
-    import_semi_ui10.Button,
+    import_semi_ui11.Button,
     {
       disabled: readonly,
       icon: /* @__PURE__ */ import_react17.default.createElement(import_semi_icons8.IconDelete, null),
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ import_react17.default.createElement(import_semi_ui10.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react17.default.createElement(import_semi_icons8.IconPlus, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ import_react17.default.createElement(import_semi_ui11.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react17.default.createElement(import_semi_icons8.IconPlus, null), size: "small", onClick: add }, "Add"));
 }
 
 // src/components/prompt-editor/index.tsx
@@ -2031,13 +2170,13 @@ var UIContainer4 = import_styled_components6.default.div`
 // src/components/prompt-editor/extensions/markdown.tsx
 var import_react18 = require("react");
 var import_react19 = require("@coze-editor/editor/react");
-var import_editor5 = require("@coze-editor/editor");
+var import_editor6 = require("@coze-editor/editor");
 var import_view = require("@codemirror/view");
 function MarkdownHighlight() {
   const injector = (0, import_react19.useInjector)();
   (0, import_react18.useLayoutEffect)(
     () => injector.inject([
-      import_editor5.astDecorator.whole.of((cursor) => {
+      import_editor6.astDecorator.whole.of((cursor) => {
         if (cursor.name.startsWith("ATXHeading")) {
           return {
             type: "className",
@@ -2099,13 +2238,13 @@ var language_support_default = LanguageSupport;
 // src/components/prompt-editor/extensions/jinja.tsx
 var import_react22 = require("react");
 var import_react23 = require("@coze-editor/editor/react");
-var import_editor6 = require("@coze-editor/editor");
+var import_editor7 = require("@coze-editor/editor");
 var import_view2 = require("@codemirror/view");
 function JinjaHighlight() {
   const injector = (0, import_react23.useInjector)();
   (0, import_react22.useLayoutEffect)(
     () => injector.inject([
-      import_editor6.astDecorator.whole.of((cursor) => {
+      import_editor7.astDecorator.whole.of((cursor) => {
         if (cursor.name === "JinjaStatementStart" || cursor.name === "JinjaStatementEnd") {
           return {
             type: "className",
@@ -2187,7 +2326,7 @@ var import_react30 = __toESM(require("react"));
 
 // src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
 var import_react26 = __toESM(require("react"));
-var import_semi_ui11 = require("@douyinfe/semi-ui");
+var import_semi_ui12 = require("@douyinfe/semi-ui");
 var import_react27 = require("@coze-editor/editor/react");
 function VariableTree() {
   const [posKey, setPosKey] = (0, import_react26.useState)("");
@@ -2216,14 +2355,14 @@ function VariableTree() {
   }, [editor, visible]);
   const treeData = useVariableTree({});
   return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(import_react27.Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react26.default.createElement(
-    import_semi_ui11.Popover,
+    import_semi_ui12.Popover,
     {
       visible,
       trigger: "custom",
       position: "topLeft",
       rePosKey: posKey,
       content: /* @__PURE__ */ import_react26.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react26.default.createElement(
-        import_semi_ui11.Tree,
+        import_semi_ui12.Tree,
         {
           treeData,
           onSelect: (v) => {
@@ -2246,15 +2385,15 @@ function VariableTree() {
 var import_react_dom = __toESM(require("react-dom"));
 var import_react28 = __toESM(require("react"));
 var import_lodash5 = require("lodash");
-var import_editor7 = require("@flowgram.ai/editor");
-var import_semi_ui13 = require("@douyinfe/semi-ui");
+var import_editor8 = require("@flowgram.ai/editor");
+var import_semi_ui14 = require("@douyinfe/semi-ui");
 var import_semi_icons9 = require("@douyinfe/semi-icons");
 var import_react29 = require("@coze-editor/editor/react");
 var import_view3 = require("@codemirror/view");
 
 // src/components/prompt-editor-with-variables/styles.tsx
 var import_styled_components7 = __toESM(require("styled-components"));
-var import_semi_ui12 = require("@douyinfe/semi-ui");
+var import_semi_ui13 = require("@douyinfe/semi-ui");
 var UIRootTitle2 = import_styled_components7.default.div`
   margin-right: 4px;
   min-width: 20px;
@@ -2268,7 +2407,7 @@ var UIVarName2 = import_styled_components7.default.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var UITag2 = (0, import_styled_components7.default)(import_semi_ui12.Tag)`
+var UITag2 = (0, import_styled_components7.default)(import_semi_ui13.Tag)`
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
@@ -2282,7 +2421,7 @@ var UITag2 = (0, import_styled_components7.default)(import_semi_ui12.Tag)`
     margin: 0 5px;
   }
 `;
-var UIPopoverContent = import_styled_components7.default.div`
+var UIPopoverContent2 = import_styled_components7.default.div`
   padding: 10px;
   display: inline-flex;
   align-items: center;
@@ -2293,7 +2432,7 @@ var UIPopoverContent = import_styled_components7.default.div`
 var VariableTagWidget = class extends import_view3.WidgetType {
   constructor({ keyPath, scope }) {
     super();
-    this.toDispose = new import_editor7.DisposableCollection();
+    this.toDispose = new import_editor8.DisposableCollection();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
         return /* @__PURE__ */ import_react28.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
@@ -2318,9 +2457,9 @@ var VariableTagWidget = class extends import_view3.WidgetType {
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.renderReact(
       /* @__PURE__ */ import_react28.default.createElement(
-        import_semi_ui13.Popover,
+        import_semi_ui14.Popover,
         {
-          content: /* @__PURE__ */ import_react28.default.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ import_react28.default.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
+          content: /* @__PURE__ */ import_react28.default.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ import_react28.default.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
         },
         /* @__PURE__ */ import_react28.default.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ import_react28.default.createElement(UIVarName2, null, v?.key))
       )
@@ -2330,7 +2469,7 @@ var VariableTagWidget = class extends import_view3.WidgetType {
     const dom = document.createElement("span");
     this.rootDOM = dom;
     this.toDispose.push(
-      import_editor7.Disposable.create(() => {
+      import_editor8.Disposable.create(() => {
         import_react_dom.default.unmountComponentAtNode(this.rootDOM);
       })
     );
@@ -2358,7 +2497,7 @@ var VariableTagWidget = class extends import_view3.WidgetType {
 };
 function VariableTagInject() {
   const injector = (0, import_react29.useInjector)();
-  const scope = (0, import_editor7.useCurrentScope)();
+  const scope = (0, import_editor8.useCurrentScope)();
   (0, import_react28.useLayoutEffect)(() => {
     const atMatcher = new import_view3.MatchDecorator({
       regexp: /\{\{([^\}]+)\}\}/g,
@@ -2404,21 +2543,21 @@ var import_react34 = __toESM(require("react"));
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
 var import_react32 = __toESM(require("react"));
-var import_semi_ui15 = require("@douyinfe/semi-ui");
+var import_semi_ui16 = require("@douyinfe/semi-ui");
 var import_react33 = require("@coze-editor/editor/react");
 
 // src/components/prompt-editor-with-inputs/inputs-picker.tsx
 var import_react31 = __toESM(require("react"));
 var import_lodash6 = require("lodash");
-var import_editor8 = require("@flowgram.ai/editor");
-var import_semi_ui14 = require("@douyinfe/semi-ui");
+var import_editor9 = require("@flowgram.ai/editor");
+var import_semi_ui15 = require("@douyinfe/semi-ui");
 function InputsPicker({
   inputsValues,
   onSelect
 }) {
-  const available = (0, import_editor8.useScopeAvailable)();
+  const available = (0, import_editor9.useScopeAvailable)();
   const getArrayDrilldown = (type, depth = 1) => {
-    if (import_editor8.ASTMatch.isArray(type.items)) {
+    if (import_editor9.ASTMatch.isArray(type.items)) {
       return getArrayDrilldown(type.items, depth + 1);
     }
     return { type: type.items, depth };
@@ -2426,12 +2565,12 @@ function InputsPicker({
   const renderVariable = (variable, keyPath) => {
     let type = variable?.type;
     let children;
-    if (import_editor8.ASTMatch.isObject(type)) {
+    if (import_editor9.ASTMatch.isObject(type)) {
       children = (type.properties || []).map((_property) => renderVariable(_property, [...keyPath, _property.key])).filter(Boolean);
     }
-    if (import_editor8.ASTMatch.isArray(type)) {
+    if (import_editor9.ASTMatch.isArray(type)) {
       const drilldown = getArrayDrilldown(type);
-      if (import_editor8.ASTMatch.isObject(drilldown.type)) {
+      if (import_editor9.ASTMatch.isObject(drilldown.type)) {
         children = (drilldown.type.properties || []).map(
           (_property) => renderVariable(_property, [
             ...keyPath,
@@ -2451,7 +2590,7 @@ function InputsPicker({
   };
   const treeData = (0, import_react31.useMemo)(
     () => Object.entries(inputsValues).map(([key, value]) => {
-      if (value.type === "ref") {
+      if (value?.type === "ref") {
         const variable = available.getByKeyPath(value.content || []);
         if (variable) {
           return renderVariable(variable, [key]);
@@ -2465,7 +2604,7 @@ function InputsPicker({
     }),
     []
   );
-  return /* @__PURE__ */ import_react31.default.createElement(import_semi_ui14.Tree, { treeData, onSelect: (v) => onSelect(v) });
+  return /* @__PURE__ */ import_react31.default.createElement(import_semi_ui15.Tree, { treeData, onSelect: (v) => onSelect(v) });
 }
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
@@ -2495,7 +2634,7 @@ function InputsTree({ inputsValues }) {
     }
   }, [editor, visible]);
   return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, /* @__PURE__ */ import_react32.default.createElement(import_react33.Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react32.default.createElement(
-    import_semi_ui15.Popover,
+    import_semi_ui16.Popover,
     {
       visible,
       trigger: "custom",
@@ -2780,19 +2919,21 @@ import_preset_code3.themes.register("light", lightTheme);
 
 // src/components/code-editor/language-features.ts
 var import_preset_code4 = require("@coze-editor/editor/preset-code");
+var import_language_typescript = require("@coze-editor/editor/language-typescript");
 var import_language_shell = require("@coze-editor/editor/language-shell");
 var import_language_python = require("@coze-editor/editor/language-python");
 var import_language_json = require("@coze-editor/editor/language-json");
-var import_editor9 = require("@coze-editor/editor");
+var import_editor10 = require("@coze-editor/editor");
 import_preset_code4.languages.register("python", import_language_python.python);
+import_preset_code4.languages.register("typescript", import_language_typescript.typescript);
+import_preset_code4.languages.register("shell", import_language_shell.shell);
 import_preset_code4.languages.register("json", {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
-  language: (0, import_editor9.mixLanguages)({
+  language: (0, import_editor10.mixLanguages)({
     outerLanguage: import_language_json.json.language
   }),
   languageService: import_language_json.json.languageService
 });
-import_preset_code4.languages.register("shell", import_language_shell.shell);
 
 // src/components/code-editor/index.tsx
 var OriginCodeEditor = (0, import_react36.createRenderer)(import_preset_code5.default, [
@@ -2848,7 +2989,7 @@ var import_preset_code6 = require("@coze-editor/editor/preset-code");
 
 // src/components/json-editor-with-variables/extensions/variable-tree.tsx
 var import_react37 = __toESM(require("react"));
-var import_semi_ui16 = require("@douyinfe/semi-ui");
+var import_semi_ui17 = require("@douyinfe/semi-ui");
 var import_react38 = require("@coze-editor/editor/react");
 function VariableTree2() {
   const [posKey, setPosKey] = (0, import_react37.useState)("");
@@ -2877,14 +3018,14 @@ function VariableTree2() {
   }, [editor, visible]);
   const treeData = useVariableTree({});
   return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(import_react38.Mention, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react37.default.createElement(
-    import_semi_ui16.Popover,
+    import_semi_ui17.Popover,
     {
       visible,
       trigger: "custom",
       position: "topLeft",
       rePosKey: posKey,
       content: /* @__PURE__ */ import_react37.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react37.default.createElement(
-        import_semi_ui16.Tree,
+        import_semi_ui17.Tree,
         {
           treeData,
           onSelect: (v) => {
@@ -2907,15 +3048,15 @@ function VariableTree2() {
 var import_react39 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 var import_lodash7 = require("lodash");
-var import_editor10 = require("@flowgram.ai/editor");
-var import_semi_ui18 = require("@douyinfe/semi-ui");
+var import_editor11 = require("@flowgram.ai/editor");
+var import_semi_ui19 = require("@douyinfe/semi-ui");
 var import_semi_icons10 = require("@douyinfe/semi-icons");
 var import_react40 = require("@coze-editor/editor/react");
 var import_view5 = require("@codemirror/view");
 
 // src/components/json-editor-with-variables/styles.tsx
 var import_styled_components8 = __toESM(require("styled-components"));
-var import_semi_ui17 = require("@douyinfe/semi-ui");
+var import_semi_ui18 = require("@douyinfe/semi-ui");
 var UIRootTitle3 = import_styled_components8.default.div`
   margin-right: 4px;
   min-width: 20px;
@@ -2929,7 +3070,7 @@ var UIVarName3 = import_styled_components8.default.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var UITag3 = (0, import_styled_components8.default)(import_semi_ui17.Tag)`
+var UITag3 = (0, import_styled_components8.default)(import_semi_ui18.Tag)`
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
@@ -2943,7 +3084,7 @@ var UITag3 = (0, import_styled_components8.default)(import_semi_ui17.Tag)`
     margin: 0 5px;
   }
 `;
-var UIPopoverContent2 = import_styled_components8.default.div`
+var UIPopoverContent3 = import_styled_components8.default.div`
   padding: 10px;
   display: inline-flex;
   align-items: center;
@@ -2954,7 +3095,7 @@ var UIPopoverContent2 = import_styled_components8.default.div`
 var VariableTagWidget2 = class extends import_view5.WidgetType {
   constructor({ keyPath, scope }) {
     super();
-    this.toDispose = new import_editor10.DisposableCollection();
+    this.toDispose = new import_editor11.DisposableCollection();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
         return /* @__PURE__ */ import_react39.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
@@ -2976,9 +3117,9 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.root.render(
       /* @__PURE__ */ import_react39.default.createElement(
-        import_semi_ui18.Popover,
+        import_semi_ui19.Popover,
         {
-          content: /* @__PURE__ */ import_react39.default.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ import_react39.default.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
+          content: /* @__PURE__ */ import_react39.default.createElement(UIPopoverContent3, null, rootIcon, rootTitle, /* @__PURE__ */ import_react39.default.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
         },
         /* @__PURE__ */ import_react39.default.createElement(UITag3, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ import_react39.default.createElement(UIVarName3, null, v?.key))
       )
@@ -2988,7 +3129,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
     const dom = document.createElement("span");
     this.root = (0, import_client.createRoot)(dom);
     this.toDispose.push(
-      import_editor10.Disposable.create(() => {
+      import_editor11.Disposable.create(() => {
         this.root.unmount();
       })
     );
@@ -3016,7 +3157,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
 };
 function VariableTagInject2() {
   const injector = (0, import_react40.useInjector)();
-  const scope = (0, import_editor10.useCurrentScope)();
+  const scope = (0, import_editor11.useCurrentScope)();
   (0, import_react39.useLayoutEffect)(() => {
     const atMatcher = new import_view5.MatchDecorator({
       regexp: /\{\{([^\}]+)\}\}/g,
@@ -3098,30 +3239,88 @@ function JsonEditorWithVariables(props) {
   );
 }
 
+// src/components/inputs-values/index.tsx
+var import_react42 = __toESM(require("react"));
+var import_semi_ui20 = require("@douyinfe/semi-ui");
+var import_semi_icons11 = require("@douyinfe/semi-icons");
+
+// src/components/inputs-values/styles.tsx
+var import_styled_components9 = __toESM(require("styled-components"));
+var UIRows2 = import_styled_components9.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+var UIRow3 = import_styled_components9.default.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+// src/components/inputs-values/index.tsx
+function InputsValues({ value, onChange, style, readonly, constantProps }) {
+  const { list, updateKey, updateValue, remove, add } = useObjectList({
+    value,
+    onChange
+  });
+  return /* @__PURE__ */ import_react42.default.createElement("div", null, /* @__PURE__ */ import_react42.default.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ import_react42.default.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ import_react42.default.createElement(
+    import_semi_ui20.Input,
+    {
+      style: { width: 100, minWidth: 100, maxWidth: 100 },
+      disabled: readonly,
+      size: "small",
+      value: item.key,
+      onChange: (v) => updateKey(item.id, v)
+    }
+  ), /* @__PURE__ */ import_react42.default.createElement(
+    DynamicValueInput,
+    {
+      style: { flexGrow: 1 },
+      readonly,
+      value: item.value,
+      onChange: (v) => updateValue(item.id, v),
+      constantProps: {
+        ...constantProps,
+        strategies: [...constantProps?.strategies || []]
+      }
+    }
+  ), /* @__PURE__ */ import_react42.default.createElement(
+    import_semi_ui20.IconButton,
+    {
+      disabled: readonly,
+      theme: "borderless",
+      icon: /* @__PURE__ */ import_react42.default.createElement(import_semi_icons11.IconDelete, { size: "small" }),
+      size: "small",
+      onClick: () => remove(item.id)
+    }
+  )))), /* @__PURE__ */ import_react42.default.createElement(import_semi_ui20.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react42.default.createElement(import_semi_icons11.IconPlus, null), size: "small", onClick: add }, "Add"));
+}
+
 // src/effects/provide-batch-input/index.ts
-var import_editor11 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor11.createEffectFromVariableProvider)({
+var import_editor12 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor12.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor11.ASTFactory.createVariableDeclaration({
+    import_editor12.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor11.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor12.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor11.ASTFactory.createObject({
+      type: import_editor12.ASTFactory.createObject({
         properties: [
-          import_editor11.ASTFactory.createProperty({
+          import_editor12.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor11.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor11.ASTFactory.createKeyPathExpression({
+            initializer: import_editor12.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor12.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor11.ASTFactory.createProperty({
+          import_editor12.ASTFactory.createProperty({
             key: "index",
-            type: import_editor11.ASTFactory.createNumber()
+            type: import_editor12.ASTFactory.createNumber()
           })
         ]
       })
@@ -3129,32 +3328,6 @@ var provideBatchInputEffect = (0, import_editor11.createEffectFromVariableProvid
   ]
 });
 
-// src/effects/provide-batch-outputs/index.ts
-var import_editor12 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor12.createEffectFromVariableProvider)({
-  parse: (value, ctx) => [
-    import_editor12.ASTFactory.createVariableDeclaration({
-      key: `${ctx.node.id}`,
-      meta: {
-        title: (0, import_editor12.getNodeForm)(ctx.node)?.getValueIn("title"),
-        icon: ctx.node.getNodeRegistry().info?.icon
-      },
-      type: import_editor12.ASTFactory.createObject({
-        properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor12.ASTFactory.createProperty({
-            key: _key,
-            initializer: import_editor12.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor12.ASTFactory.createKeyPathExpression({
-                keyPath: value2.content || []
-              })
-            })
-          })
-        )
-      })
-    })
-  ]
-});
-
 // src/effects/auto-rename-ref/index.ts
 var import_lodash8 = require("lodash");
 var import_editor13 = require("@flowgram.ai/editor");
@@ -3281,7 +3454,7 @@ var syncVariableTitle = [
 
 // src/form-plugins/batch-outputs-plugin/index.ts
 var import_editor16 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect2 = (0, import_editor16.createEffectFromVariableProvider)({
+var provideBatchOutputsEffect = (0, import_editor16.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
     import_editor16.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
@@ -3308,7 +3481,7 @@ var createBatchOutputsFormPlugin = (0, import_editor16.defineFormPluginCreator)(
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
-      [outputKey]: provideBatchOutputsEffect2
+      [outputKey]: provideBatchOutputsEffect
     });
   },
   onInit(ctx, { outputKey }) {
@@ -3344,6 +3517,81 @@ var createBatchOutputsFormPlugin = (0, import_editor16.defineFormPluginCreator)(
     });
   }
 });
+
+// src/form-plugins/infer-inputs-plugin/index.ts
+var import_lodash9 = require("lodash");
+var import_editor17 = require("@flowgram.ai/editor");
+var createInferInputsPlugin = (0, import_editor17.defineFormPluginCreator)({
+  onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
+    if (!sourceKey || !targetKey) {
+      return;
+    }
+    addFormatOnSubmit((formData, ctx) => {
+      (0, import_lodash9.set)(
+        formData,
+        targetKey,
+        infer(
+          (0, import_lodash9.get)(formData, sourceKey),
+          scope === "private" ? (0, import_editor17.getNodePrivateScope)(ctx.node) : (0, import_editor17.getNodeScope)(ctx.node)
+        )
+      );
+      return formData;
+    });
+  }
+});
+function isRef2(value) {
+  return value?.type === "ref" && Array.isArray(value?.content) && typeof value?.content[0] === "string";
+}
+function isTemplate2(value) {
+  return value?.type === "template" && typeof value?.content === "string";
+}
+function isConstant(value) {
+  return value?.type === "constant" && typeof value?.content !== "undefined";
+}
+var infer = (values, scope) => {
+  if (typeof values === "object") {
+    if (isConstant(values)) {
+      if (values?.schema) {
+        return values.schema;
+      }
+      if (typeof values.content === "string") {
+        return {
+          type: "string"
+        };
+      }
+      if (typeof values.content === "number") {
+        return {
+          type: "number"
+        };
+      }
+      if (typeof values.content === "boolean") {
+        return {
+          type: "boolean"
+        };
+      }
+    }
+    if (isRef2(values)) {
+      const variable = scope.available.getByKeyPath(values?.content);
+      const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : void 0;
+      return schema;
+    }
+    if (isTemplate2(values)) {
+      return {
+        type: "string"
+      };
+    }
+    return {
+      type: "object",
+      properties: Object.keys(values).reduce((acc, key) => {
+        const schema = infer(values[key], scope);
+        if (schema) {
+          acc[key] = schema;
+        }
+        return acc;
+      }, {})
+    };
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrayIcons,
@@ -3353,6 +3601,7 @@ var createBatchOutputsFormPlugin = (0, import_editor16.defineFormPluginCreator)(
   ConditionRow,
   ConstantInput,
   DynamicValueInput,
+  InputsValues,
   JsonEditorWithVariables,
   JsonSchemaEditor,
   JsonSchemaUtils,
@@ -3364,6 +3613,7 @@ var createBatchOutputsFormPlugin = (0, import_editor16.defineFormPluginCreator)(
   VariableTypeIcons,
   autoRenameRefEffect,
   createBatchOutputsFormPlugin,
+  createInferInputsPlugin,
   formatLegacyRefOnInit,
   formatLegacyRefOnSubmit,
   formatLegacyRefToNewRef,