@flowgram.ai/form-materials 0.4.0 → 0.4.2

package/dist/esm/index.js

@@ -92,16 +92,169 @@ function createInjectMaterial(Component, params) {
   return InjectComponent;
 }
 
+// src/shared/flow-value/utils.ts
+import { isArray, isObject as isObject2, isPlainObject, uniq } from "lodash";
+import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
+
+// src/shared/flow-value/schema.ts
+import z from "zod";
+var extraSchema = z.object({
+  index: z.number().optional()
+}).optional();
+var constantSchema = z.object({
+  type: z.literal("constant"),
+  content: z.any().optional(),
+  schema: z.any().optional(),
+  extra: extraSchema
+});
+var refSchema = z.object({
+  type: z.literal("ref"),
+  content: z.array(z.string()).optional(),
+  extra: extraSchema
+});
+var expressionSchema = z.object({
+  type: z.literal("expression"),
+  content: z.string().optional(),
+  extra: extraSchema
+});
+var templateSchema = z.object({
+  type: z.literal("template"),
+  content: z.string().optional(),
+  extra: extraSchema
+});
+
+// src/shared/flow-value/utils.ts
+var FlowValueUtils;
+((FlowValueUtils2) => {
+  function isConstant(value) {
+    return constantSchema.safeParse(value).success;
+  }
+  FlowValueUtils2.isConstant = isConstant;
+  function isRef(value) {
+    return refSchema.safeParse(value).success;
+  }
+  FlowValueUtils2.isRef = isRef;
+  function isExpression(value) {
+    return expressionSchema.safeParse(value).success;
+  }
+  FlowValueUtils2.isExpression = isExpression;
+  function isTemplate(value) {
+    return templateSchema.safeParse(value).success;
+  }
+  FlowValueUtils2.isTemplate = isTemplate;
+  function isConstantOrRef(value) {
+    return isConstant(value) || isRef(value);
+  }
+  FlowValueUtils2.isConstantOrRef = isConstantOrRef;
+  function isFlowValue(value) {
+    return isConstant(value) || isRef(value) || isExpression(value) || isTemplate(value);
+  }
+  FlowValueUtils2.isFlowValue = isFlowValue;
+  function* traverse(value, options) {
+    const { includeTypes = ["ref", "template"], path = "" } = options;
+    if (isPlainObject(value)) {
+      if (isRef(value) && includeTypes.includes("ref")) {
+        yield { value, path };
+        return;
+      }
+      if (isTemplate(value) && includeTypes.includes("template")) {
+        yield { value, path };
+        return;
+      }
+      if (isExpression(value) && includeTypes.includes("expression")) {
+        yield { value, path };
+        return;
+      }
+      if (isConstant(value) && includeTypes.includes("constant")) {
+        yield { value, path };
+        return;
+      }
+      for (const [_key, _value] of Object.entries(value)) {
+        yield* traverse(_value, { ...options, path: `${path}.${_key}` });
+      }
+      return;
+    }
+    if (isArray(value)) {
+      for (const [_idx, _value] of value.entries()) {
+        yield* traverse(_value, { ...options, path: `${path}[${_idx}]` });
+      }
+      return;
+    }
+    return;
+  }
+  FlowValueUtils2.traverse = traverse;
+  function getTemplateKeyPaths2(value) {
+    const keyPathReg = /{{(.*?)}}/g;
+    return uniq(value.content?.match(keyPathReg) || []).map(
+      (_keyPath) => _keyPath.slice(2, -2).split(".")
+    );
+  }
+  FlowValueUtils2.getTemplateKeyPaths = getTemplateKeyPaths2;
+  function inferConstantJsonSchema(value) {
+    if (value?.schema) {
+      return value.schema;
+    }
+    if (typeof value.content === "string") {
+      return {
+        type: "string"
+      };
+    }
+    if (typeof value.content === "number") {
+      return {
+        type: "number"
+      };
+    }
+    if (typeof value.content === "boolean") {
+      return {
+        type: "boolean"
+      };
+    }
+    if (isObject2(value.content)) {
+      return {
+        type: "object"
+      };
+    }
+    return void 0;
+  }
+  FlowValueUtils2.inferConstantJsonSchema = inferConstantJsonSchema;
+  function inferJsonSchema(values, scope) {
+    if (isPlainObject(values)) {
+      if (isConstant(values)) {
+        return inferConstantJsonSchema(values);
+      }
+      if (isRef(values)) {
+        const variable = scope.available.getByKeyPath(values?.content);
+        const schema = variable?.type ? JsonSchemaUtils.astToSchema(variable?.type) : void 0;
+        return schema;
+      }
+      if (isTemplate(values)) {
+        return { type: "string" };
+      }
+      return {
+        type: "object",
+        properties: Object.keys(values).reduce((acc, key) => {
+          const schema = inferJsonSchema(values[key], scope);
+          if (schema) {
+            acc[key] = schema;
+          }
+          return acc;
+        }, {})
+      };
+    }
+  }
+  FlowValueUtils2.inferJsonSchema = inferJsonSchema;
+})(FlowValueUtils || (FlowValueUtils = {}));
+
 // src/components/variable-selector/use-variable-tree.tsx
 import React11, { useCallback } from "react";
-import { JsonSchemaUtils as JsonSchemaUtils2 } from "@flowgram.ai/json-schema";
+import { JsonSchemaUtils as JsonSchemaUtils3 } from "@flowgram.ai/json-schema";
 import { ASTMatch as ASTMatch2, useAvailableVariables } from "@flowgram.ai/editor";
 import { Icon } from "@douyinfe/semi-ui";
 
 // src/plugins/json-schema-preset/index.tsx
 import React10 from "react";
 import {
-  JsonSchemaUtils,
+  JsonSchemaUtils as JsonSchemaUtils2,
   useTypeManager as useOriginTypeManager,
   TypePresetProvider as OriginTypePresetProvider
 } from "@flowgram.ai/json-schema";
@@ -112,14 +265,23 @@ import { jsonSchemaTypeManager } from "@flowgram.ai/json-schema";
 // src/plugins/json-schema-preset/type-definition/string.tsx
 import React2 from "react";
 import { I18n } from "@flowgram.ai/editor";
-import { Input } from "@douyinfe/semi-ui";
+import { Input, TextArea } from "@douyinfe/semi-ui";
 var stringRegistry = {
   type: "string",
-  ConstantRenderer: (props) => /* @__PURE__ */ React2.createElement(
-    Input,
+  ConstantRenderer: (props) => props?.enableMultiLineStr ? /* @__PURE__ */ React2.createElement(
+    TextArea,
     {
+      autosize: true,
+      rows: 1,
       placeholder: I18n.t("Please Input String"),
+      disabled: props.readonly,
+      ...props
+    }
+  ) : /* @__PURE__ */ React2.createElement(
+    Input,
+    {
       size: "small",
+      placeholder: I18n.t("Please Input String"),
       disabled: props.readonly,
       ...props
     }
@@ -663,7 +825,7 @@ function useVariableTree(params) {
       }
       return variable.meta.icon;
     }
-    const schema = JsonSchemaUtils2.astToSchema(variable.type, { drilldownObject: false });
+    const schema = JsonSchemaUtils3.astToSchema(variable.type, { drilldownObject: false });
     return /* @__PURE__ */ React11.createElement(Icon, { size: "small", svg: typeManager.getDisplayIcon(schema || {}) });
   }, []);
   const renderVariable = (variable, parentFields = []) => {
@@ -677,8 +839,8 @@ function useVariableTree(params) {
     }
     const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
     const key = keyPath.join(".");
-    const isSchemaInclude = includeSchema ? JsonSchemaUtils2.isASTMatchSchema(type, includeSchema) : true;
-    const isSchemaExclude = excludeSchema ? JsonSchemaUtils2.isASTMatchSchema(type, excludeSchema) : false;
+    const isSchemaInclude = includeSchema ? JsonSchemaUtils3.isASTMatchSchema(type, includeSchema) : true;
+    const isSchemaExclude = excludeSchema ? JsonSchemaUtils3.isASTMatchSchema(type, excludeSchema) : false;
     const isCustomSkip = customSkip ? customSkip(variable) : false;
     const isMetaDisabled = variable.meta?.disabled;
     const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip && !isMetaDisabled;
@@ -921,8 +1083,29 @@ import {
   IconMinus
 } from "@douyinfe/semi-icons";
 
+// src/components/blur-input/index.tsx
+import React14, { useEffect as useEffect2, useState } from "react";
+import Input2 from "@douyinfe/semi-ui/lib/es/input";
+function BlurInput(props) {
+  const [value, setValue] = useState("");
+  useEffect2(() => {
+    setValue(props.value);
+  }, [props.value]);
+  return /* @__PURE__ */ React14.createElement(
+    Input2,
+    {
+      ...props,
+      value,
+      onChange: (value2) => {
+        setValue(value2);
+      },
+      onBlur: (e) => props.onChange?.(value, e)
+    }
+  );
+}
+
 // src/components/json-schema-editor/styles.tsx
-import React14 from "react";
+import React15 from "react";
 import styled3, { css as css2 } from "styled-components";
 import Icon3 from "@douyinfe/semi-icons";
 var UIContainer = styled3.div`
@@ -951,32 +1134,30 @@ var UILabel = styled3.div`
   font-weight: 400;
   margin-bottom: 2px;
 `;
-var UIProperties = styled3.div`
+var UITreeItems = styled3.div`
   display: grid;
   grid-template-columns: auto 1fr;
 
   ${({ $shrink }) => $shrink && css2`
-      padding-left: 10px;
+      padding-left: 3px;
       margin-top: 10px;
     `}
 `;
-var UIPropertyLeft = styled3.div`
+var UITreeItemLeft = styled3.div`
   grid-column: 1;
   position: relative;
   width: 16px;
 
-  ${({ $showLine, $isLast, $parentType }) => {
-  let height = "100%";
-  if ($parentType && $isLast) {
-    height = "24px";
-  }
+  ${({ $showLine, $isLast, $showCollapse }) => {
+  let height = $isLast ? "24px" : "100%";
+  let width = $showCollapse ? "12px" : "30px";
   return $showLine && css2`
         &::before {
           /* 竖线 */
           content: '';
           height: ${height};
           position: absolute;
-          left: -22px;
+          left: -14px;
           top: -16px;
           width: 1px;
           background: #d9d9d9;
@@ -987,9 +1168,9 @@ var UIPropertyLeft = styled3.div`
           /* 横线 */
           content: '';
           position: absolute;
-          left: -22px; // 横线起点和竖线对齐
+          left: -14px; // 横线起点和竖线对齐
           top: 8px; // 跟随你的行高调整
-          width: 18px; // 横线长度
+          width: ${width}; // 横线长度
           height: 1px;
           background: #d9d9d9;
           display: block;
@@ -997,7 +1178,7 @@ var UIPropertyLeft = styled3.div`
       `;
 }}
 `;
-var UIPropertyRight = styled3.div`
+var UITreeItemRight = styled3.div`
   grid-column: 2;
   margin-bottom: 10px;
 
@@ -1005,35 +1186,11 @@ var UIPropertyRight = styled3.div`
     margin-bottom: 0px;
   }
 `;
-var UIPropertyMain = styled3.div`
+var UITreeItemMain = styled3.div`
   display: flex;
   flex-direction: column;
   gap: 10px;
   position: relative;
-
-  ${({ $expand, type, $collapse, $showCollapse }) => {
-  const beforeElement = `
-      &::before {
-        /* \u7AD6\u7EBF */
-        content: '';
-        height: 100%;
-        position: absolute;
-        left: -12px;
-        top: 18px;
-        width: 1px;
-        background: #d9d9d9;
-        display: block;
-      }`;
-  return $expand && css2`
-        background-color: #f5f5f5;
-        padding: 10px;
-        border-radius: 4px;
-
-        ${$showCollapse && $collapse && (type === "array" || type === "object") && css2`
-          ${beforeElement}
-        `}
-      `;
-}}
 `;
 var UICollapsible = styled3.div`
   display: none;
@@ -1050,7 +1207,7 @@ var UIRequired = styled3.div``;
 var UIActions = styled3.div`
   white-space: nowrap;
 `;
-var iconAddChildrenSvg = /* @__PURE__ */ React14.createElement(
+var iconAddChildrenSvg = /* @__PURE__ */ React15.createElement(
   "svg",
   {
     className: "icon-icon icon-icon-coz_add_node ",
@@ -1060,7 +1217,7 @@ var iconAddChildrenSvg = /* @__PURE__ */ React14.createElement(
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React15.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1068,9 +1225,9 @@ var iconAddChildrenSvg = /* @__PURE__ */ React14.createElement(
       d: "M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
     }
   ),
-  /* @__PURE__ */ React14.createElement("path", { d: "M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z" })
+  /* @__PURE__ */ React15.createElement("path", { d: "M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z" })
 );
-var IconAddChildren = () => /* @__PURE__ */ React14.createElement(Icon3, { size: "small", svg: iconAddChildrenSvg });
+var IconAddChildren = () => /* @__PURE__ */ React15.createElement(Icon3, { size: "small", svg: iconAddChildrenSvg });
 var DefaultValueWrapper = styled3.div`
   margin: 0;
 `;
@@ -1085,7 +1242,7 @@ var ConstantInputWrapper = styled3.div`
 `;
 
 // src/components/json-schema-editor/hooks.tsx
-import { useEffect as useEffect2, useState } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 import { difference, omit } from "lodash";
 import { produce } from "immer";
 import { useTypeManager as useTypeManager2 } from "@flowgram.ai/json-schema";
@@ -1097,8 +1254,15 @@ function usePropertiesEdit(value, onChange) {
   const typeManager = useTypeManager2();
   const drilldownSchema = typeManager.getPropertiesParent(value || {});
   const canAddField = typeManager.canAddField(value || {});
-  const [propertyList, setPropertyList] = useState([]);
-  useEffect2(() => {
+  const [propertyList, setPropertyList] = useState2([]);
+  const effectVersion = useRef2(0);
+  const changeVersion = useRef2(0);
+  useEffect3(() => {
+    effectVersion.current = effectVersion.current + 1;
+    if (effectVersion.current === changeVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
     setPropertyList((_list) => {
       const newNames = Object.entries(drilldownSchema?.properties || {}).sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0)).map(([key]) => key);
       const oldNames = _list.map((item) => item.name).filter(Boolean);
@@ -1107,7 +1271,7 @@ function usePropertiesEdit(value, onChange) {
         key: item.key,
         name: item.name,
         isPropertyRequired: drilldownSchema?.required?.includes(item.name || "") || false,
-        ...item
+        ...drilldownSchema?.properties?.[item.name || ""] || item || {}
       })).concat(
         addNames.map((_name) => ({
           key: genId(),
@@ -1119,6 +1283,7 @@ function usePropertiesEdit(value, onChange) {
     });
   }, [drilldownSchema]);
   const updatePropertyList = (updater) => {
+    changeVersion.current = changeVersion.current + 1;
     setPropertyList((_list) => {
       const next = updater(_list);
       const nextProperties = {};
@@ -1159,7 +1324,7 @@ function usePropertiesEdit(value, onChange) {
       (_list) => _list.map((_property) => _property.key === key ? nextValue : _property)
     );
   };
-  useEffect2(() => {
+  useEffect3(() => {
     if (!canAddField) {
       setPropertyList([]);
     }
@@ -1174,12 +1339,12 @@ function usePropertiesEdit(value, onChange) {
 }
 
 // src/components/json-schema-editor/default-value.tsx
-import React16 from "react";
+import React17 from "react";
 import { I18n as I18n8 } from "@flowgram.ai/editor";
 
 // src/components/constant-input/index.tsx
-import React15, { useMemo as useMemo3 } from "react";
-import { Input as Input2 } from "@douyinfe/semi-ui";
+import React16, { useMemo as useMemo3 } from "react";
+import { Input as Input3 } from "@douyinfe/semi-ui";
 function ConstantInput(props) {
   const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;
   const typeManager = useTypeManager();
@@ -1192,53 +1357,33 @@ function ConstantInput(props) {
   }, [strategies, schema]);
   if (!Renderer2) {
     if (fallbackRenderer) {
-      return React15.createElement(fallbackRenderer, {
+      return React16.createElement(fallbackRenderer, {
         value,
         onChange,
         readonly,
         ...rest
       });
     }
-    return /* @__PURE__ */ React15.createElement(Input2, { size: "small", disabled: true, placeholder: "Unsupported type" });
+    return /* @__PURE__ */ React16.createElement(Input3, { size: "small", disabled: true, placeholder: "Unsupported type" });
   }
-  return /* @__PURE__ */ React15.createElement(Renderer2, { value, onChange, readonly, ...rest });
+  return /* @__PURE__ */ React16.createElement(Renderer2, { value, onChange, readonly, ...rest });
 }
 
 // src/components/json-schema-editor/default-value.tsx
 function DefaultValue(props) {
   const { value, schema, onChange, placeholder } = props;
-  return /* @__PURE__ */ React16.createElement(ConstantInputWrapper, null, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(ConstantInputWrapper, null, /* @__PURE__ */ React17.createElement(
     ConstantInput,
     {
       value,
       onChange: (_v) => onChange(_v),
       schema: schema || { type: "string" },
-      placeholder: placeholder ?? I18n8.t("Default value if parameter is not provided")
+      placeholder: placeholder ?? I18n8.t("Default value if parameter is not provided"),
+      enableMultiLineStr: true
     }
   ));
 }
 
-// src/components/json-schema-editor/components/blur-input.tsx
-import React17, { useEffect as useEffect3, useState as useState2 } from "react";
-import Input3 from "@douyinfe/semi-ui/lib/es/input";
-function BlurInput(props) {
-  const [value, setValue] = useState2("");
-  useEffect3(() => {
-    setValue(props.value);
-  }, [props.value]);
-  return /* @__PURE__ */ React17.createElement(
-    Input3,
-    {
-      ...props,
-      value,
-      onChange: (value2) => {
-        setValue(value2);
-      },
-      onBlur: (e) => props.onChange?.(value, e)
-    }
-  );
-}
-
 // src/components/json-schema-editor/index.tsx
 var DEFAULT = { type: "object" };
 function JsonSchemaEditor(props) {
@@ -1247,14 +1392,13 @@ function JsonSchemaEditor(props) {
     value,
     onChangeProps
   );
-  return /* @__PURE__ */ React18.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ React18.createElement(UIProperties, null, propertyList.map((_property, index) => /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React18.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ React18.createElement(UITreeItems, null, propertyList.map((_property) => /* @__PURE__ */ React18.createElement(
     PropertyEdit,
     {
       readonly,
       key: _property.key,
       value: _property,
       config,
-      $index: index,
       onChange: (_v) => {
         onEditProperty(_property.key, _v);
       },
@@ -1275,20 +1419,7 @@ function JsonSchemaEditor(props) {
   ));
 }
 function PropertyEdit(props) {
-  const {
-    value,
-    config,
-    readonly,
-    $level = 0,
-    onChange: onChangeProps,
-    onRemove,
-    $index,
-    $isFirst,
-    $isLast,
-    $parentExpand = false,
-    $parentType = "",
-    $showLine
-  } = props;
+  const { value, config, readonly, $level = 0, onChange: onChangeProps, onRemove, $isLast } = props;
   const [expand, setExpand] = useState3(false);
   const [collapse, setCollapse] = useState3(false);
   const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
@@ -1301,109 +1432,84 @@ function PropertyEdit(props) {
     });
   };
   const showCollapse = canAddField && propertyList.length > 0;
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
-    UIPropertyLeft,
-    {
-      type,
-      $index,
-      $isFirst,
-      $isLast,
-      $showLine,
-      $isExpand: expand,
-      $parentExpand,
-      $parentType
-    },
-    showCollapse && /* @__PURE__ */ React18.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ React18.createElement(IconChevronDown, { size: "small" }) : /* @__PURE__ */ React18.createElement(IconChevronRight, { size: "small" }))
-  ), /* @__PURE__ */ React18.createElement(UIPropertyRight, null, /* @__PURE__ */ React18.createElement(
-    UIPropertyMain,
-    {
-      $showCollapse: showCollapse,
-      $collapse: collapse,
-      $expand: expand,
-      type
-    },
-    /* @__PURE__ */ React18.createElement(UIRow, null, /* @__PURE__ */ React18.createElement(UIName, null, /* @__PURE__ */ React18.createElement(
-      BlurInput,
-      {
-        disabled: readonly,
-        placeholder: config?.placeholder ?? "Input Variable Name",
-        size: "small",
-        value: name,
-        onChange: (value2) => onChange("name", value2)
-      }
-    )), /* @__PURE__ */ React18.createElement(UIType, null, /* @__PURE__ */ React18.createElement(
-      InjectTypeSelector,
-      {
-        value: typeSelectorValue,
-        readonly,
-        onChange: (_value) => {
-          onChangeProps?.({
-            ...value || {},
-            ..._value
-          });
-        }
-      }
-    )), /* @__PURE__ */ React18.createElement(UIRequired, null, /* @__PURE__ */ React18.createElement(
-      Checkbox,
-      {
-        disabled: readonly,
-        checked: isPropertyRequired,
-        onChange: (e) => onChange("isPropertyRequired", e.target.checked)
-      }
-    )), /* @__PURE__ */ React18.createElement(UIActions, null, /* @__PURE__ */ React18.createElement(
-      IconButton2,
-      {
-        disabled: readonly,
-        size: "small",
-        theme: "borderless",
-        icon: expand ? /* @__PURE__ */ React18.createElement(IconShrink, { size: "small" }) : /* @__PURE__ */ React18.createElement(IconExpand, { size: "small" }),
-        onClick: () => {
-          setExpand((_expand) => !_expand);
-        }
-      }
-    ), canAddField && /* @__PURE__ */ React18.createElement(
-      IconButton2,
-      {
-        disabled: readonly,
-        size: "small",
-        theme: "borderless",
-        icon: /* @__PURE__ */ React18.createElement(IconAddChildren, null),
-        onClick: () => {
-          onAddProperty();
-          setCollapse(true);
-        }
-      }
-    ), /* @__PURE__ */ React18.createElement(
-      IconButton2,
-      {
-        disabled: readonly,
-        size: "small",
-        theme: "borderless",
-        icon: /* @__PURE__ */ React18.createElement(IconMinus, { size: "small" }),
-        onClick: onRemove
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(UITreeItemLeft, { $isLast, $showLine: $level > 0, $showCollapse: showCollapse }, showCollapse && /* @__PURE__ */ React18.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ React18.createElement(IconChevronDown, { size: "small" }) : /* @__PURE__ */ React18.createElement(IconChevronRight, { size: "small" }))), /* @__PURE__ */ React18.createElement(UITreeItemRight, null, /* @__PURE__ */ React18.createElement(UITreeItemMain, null, /* @__PURE__ */ React18.createElement(UIRow, null, /* @__PURE__ */ React18.createElement(UIName, null, /* @__PURE__ */ React18.createElement(
+    BlurInput,
+    {
+      disabled: readonly,
+      placeholder: config?.placeholder ?? "Input Variable Name",
+      size: "small",
+      value: name,
+      onChange: (value2) => onChange("name", value2)
+    }
+  )), /* @__PURE__ */ React18.createElement(UIType, null, /* @__PURE__ */ React18.createElement(
+    InjectTypeSelector,
+    {
+      value: typeSelectorValue,
+      readonly,
+      onChange: (_value) => {
+        onChangeProps?.({
+          ...value || {},
+          ..._value
+        });
       }
-    ))),
-    expand && /* @__PURE__ */ React18.createElement(UIExpandDetail, null, /* @__PURE__ */ React18.createElement(UILabel, null, config?.descTitle ?? I18n9.t("Description")), /* @__PURE__ */ React18.createElement(
-      BlurInput,
-      {
-        disabled: readonly,
-        size: "small",
-        value: description,
-        onChange: (value2) => onChange("description", value2),
-        placeholder: config?.descPlaceholder ?? I18n9.t("Help LLM to understand the property")
+    }
+  )), /* @__PURE__ */ React18.createElement(UIRequired, null, /* @__PURE__ */ React18.createElement(
+    Checkbox,
+    {
+      disabled: readonly,
+      checked: isPropertyRequired,
+      onChange: (e) => onChange("isPropertyRequired", e.target.checked)
+    }
+  )), /* @__PURE__ */ React18.createElement(UIActions, null, /* @__PURE__ */ React18.createElement(
+    IconButton2,
+    {
+      disabled: readonly,
+      size: "small",
+      theme: "borderless",
+      icon: expand ? /* @__PURE__ */ React18.createElement(IconShrink, { size: "small" }) : /* @__PURE__ */ React18.createElement(IconExpand, { size: "small" }),
+      onClick: () => {
+        setExpand((_expand) => !_expand);
       }
-    ), $level === 0 && /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? I18n9.t("Default Value")), /* @__PURE__ */ React18.createElement(DefaultValueWrapper, null, /* @__PURE__ */ React18.createElement(
-      DefaultValue,
-      {
-        value: defaultValue,
-        schema: value,
-        type,
-        placeholder: config?.defaultValuePlaceholder ?? I18n9.t("Default Value"),
-        jsonFormatText: config?.jsonFormatText,
-        onChange: (value2) => onChange("default", value2)
+    }
+  ), canAddField && /* @__PURE__ */ React18.createElement(
+    IconButton2,
+    {
+      disabled: readonly,
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ React18.createElement(IconAddChildren, null),
+      onClick: () => {
+        onAddProperty();
+        setCollapse(true);
       }
-    ))))
-  ), showCollapse && /* @__PURE__ */ React18.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ React18.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ React18.createElement(
+    }
+  ), /* @__PURE__ */ React18.createElement(
+    IconButton2,
+    {
+      disabled: readonly,
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ React18.createElement(IconMinus, { size: "small" }),
+      onClick: onRemove
+    }
+  ))), expand && /* @__PURE__ */ React18.createElement(UIExpandDetail, null, /* @__PURE__ */ React18.createElement(UILabel, null, config?.descTitle ?? I18n9.t("Description")), /* @__PURE__ */ React18.createElement(
+    BlurInput,
+    {
+      disabled: readonly,
+      size: "small",
+      value: description,
+      onChange: (value2) => onChange("description", value2),
+      placeholder: config?.descPlaceholder ?? I18n9.t("Help LLM to understand the property")
+    }
+  ), $level === 0 && /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? I18n9.t("Default Value")), /* @__PURE__ */ React18.createElement(DefaultValueWrapper, null, /* @__PURE__ */ React18.createElement(
+    DefaultValue,
+    {
+      value: defaultValue,
+      schema: value,
+      placeholder: config?.defaultValuePlaceholder ?? I18n9.t("Default Value"),
+      onChange: (value2) => onChange("default", value2)
+    }
+  ))))), showCollapse && /* @__PURE__ */ React18.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ React18.createElement(UITreeItems, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ React18.createElement(
     PropertyEdit,
     {
       readonly,
@@ -1411,18 +1517,13 @@ function PropertyEdit(props) {
       value: _property,
       config,
       $level: $level + 1,
-      $parentExpand: expand,
-      $parentType: type,
       onChange: (_v) => {
         onEditProperty(_property.key, _v);
       },
       onRemove: () => {
         onRemoveProperty(_property.key);
       },
-      $isLast: index === propertyList.length - 1,
-      $isFirst: index === 0,
-      $index: index,
-      $showLine: true
+      $isLast: index === propertyList.length - 1
     }
   ))))));
 }
@@ -1440,7 +1541,7 @@ function BatchVariableSelector(props) {
 
 // src/components/dynamic-value-input/index.tsx
 import React20 from "react";
-import { JsonSchemaUtils as JsonSchemaUtils3 } from "@flowgram.ai/json-schema";
+import { JsonSchemaUtils as JsonSchemaUtils4 } from "@flowgram.ai/json-schema";
 import { IconButton as IconButton3 } from "@douyinfe/semi-ui";
 import { IconSetting } from "@douyinfe/semi-icons";
 
@@ -1460,6 +1561,8 @@ var UIMain = styled4.div`
   flex-grow: 1;
   overflow: hidden;
   min-width: 0;
+  border-left: 1px solid var(--semi-color-border);
+  border-right: 1px solid var(--semi-color-border);
 
   & .semi-tree-select,
   & .semi-input-number,
@@ -1473,24 +1576,32 @@ var UIMain = styled4.div`
     border: none;
     border-radius: 0;
   }
+
+  & .semi-input-textarea-wrapper {
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-textarea {
+    padding: 2px 6px;
+    border: none;
+    border-radius: 0;
+    word-break: break-all;
+  }
 `;
 var UIType2 = styled4.div`
-  border-right: 1px solid #e5e5e5;
-
   & .semi-button {
     border-radius: 0;
   }
 `;
 var UITrigger = styled4.div`
-  border-left: 1px solid #e5e5e5;
-
   & .semi-button {
     border-radius: 0;
   }
 `;
 
 // src/components/dynamic-value-input/hooks.ts
-import { useMemo as useMemo5, useState as useState4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState4 } from "react";
 import { useScopeAvailable } from "@flowgram.ai/editor";
 function useRefVariable(value) {
   const available = useScopeAvailable();
@@ -1506,8 +1617,25 @@ function useSelectSchema(schemaFromProps, constantProps, value) {
   if (value?.type === "constant") {
     defaultSelectSchema = value?.schema || defaultSelectSchema;
   }
+  const changeVersion = useRef3(0);
+  const effectVersion = useRef3(0);
   const [selectSchema, setSelectSchema] = useState4(defaultSelectSchema);
-  return [selectSchema, setSelectSchema];
+  useEffect4(() => {
+    effectVersion.current += 1;
+    if (changeVersion.current === effectVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
+    if (value?.type === "constant" && value?.schema) {
+      setSelectSchema(value?.schema);
+      return;
+    }
+  }, [value]);
+  const setSelectSchemaWithVersionUpdate = (schema) => {
+    setSelectSchema(schema);
+    changeVersion.current += 1;
+  };
+  return [selectSchema, setSelectSchemaWithVersionUpdate];
 }
 function useIncludeSchema(schemaFromProps) {
   const includeSchema = useMemo5(() => {
@@ -1539,7 +1667,7 @@ function DynamicValueInput({
       return /* @__PURE__ */ React20.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
     }
     if (value?.type === "ref") {
-      const schema = refVariable?.type ? JsonSchemaUtils3.astToSchema(refVariable?.type) : void 0;
+      const schema = refVariable?.type ? JsonSchemaUtils4.astToSchema(refVariable?.type) : void 0;
       return /* @__PURE__ */ React20.createElement(TypeSelector, { value: schema, readonly: true });
     }
     return /* @__PURE__ */ React20.createElement(
@@ -1581,15 +1709,14 @@ function DynamicValueInput({
         }
       );
     }
-    const constantSchema = schemaFromProps || selectSchema || { type: "string" };
+    const constantSchema2 = schemaFromProps || selectSchema || { type: "string" };
     return /* @__PURE__ */ React20.createElement(
       ConstantInput,
       {
         value: value?.content,
-        onChange: (_v) => onChange({ type: "constant", content: _v, schema: constantSchema }),
-        schema: constantSchema || { type: "string" },
+        onChange: (_v) => onChange({ type: "constant", content: _v, schema: constantSchema2 }),
+        schema: constantSchema2 || { type: "string" },
         readonly,
-        strategies: [...constantProps?.strategies || []],
         fallbackRenderer: () => /* @__PURE__ */ React20.createElement(
           InjectVariableSelector,
           {
@@ -1599,7 +1726,8 @@ function DynamicValueInput({
             readonly
           }
         ),
-        ...constantProps
+        ...constantProps,
+        strategies: [...constantProps?.strategies || []]
       }
     );
   };
@@ -1648,7 +1776,7 @@ var UIValues = styled5.div`
 
 // src/components/condition-row/hooks/useRule.ts
 import { useMemo as useMemo6 } from "react";
-import { JsonSchemaUtils as JsonSchemaUtils4 } from "@flowgram.ai/json-schema";
+import { JsonSchemaUtils as JsonSchemaUtils5 } from "@flowgram.ai/json-schema";
 import { useScopeAvailable as useScopeAvailable2 } from "@flowgram.ai/editor";
 
 // src/components/condition-row/constants.ts
@@ -1781,7 +1909,7 @@ function useRule(left, userRules) {
   }, [available, left]);
   const rule = useMemo6(() => {
     if (!variable) return void 0;
-    const schema = JsonSchemaUtils4.astToSchema(variable.type, { drilldown: false });
+    const schema = JsonSchemaUtils5.astToSchema(variable.type, { drilldown: false });
     return rules[schema?.type];
   }, [variable?.type, rules]);
   return { rule };
@@ -1880,13 +2008,14 @@ function ConditionRow({
 
 // src/components/batch-outputs/index.tsx
 import React23 from "react";
+import { I18n as I18n12 } from "@flowgram.ai/editor";
 import { Button as Button3, Input as Input5 } from "@douyinfe/semi-ui";
 import { IconDelete, IconPlus as IconPlus2 } from "@douyinfe/semi-icons";
 
 // src/hooks/use-object-list/index.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 import { nanoid } from "nanoid";
-import { difference as difference2, get, isObject as isObject2, set } from "lodash";
+import { difference as difference2, get, isObject as isObject3, set } from "lodash";
 function genId2() {
   return nanoid();
 }
@@ -1896,9 +2025,22 @@ function useObjectList({
   sortIndexKey
 }) {
   const [list, setList] = useState5([]);
-  useEffect4(() => {
+  const effectVersion = useRef4(0);
+  const changeVersion = useRef4(0);
+  const getSortIndex = (value2) => {
+    if (typeof sortIndexKey === "function") {
+      return get(value2, sortIndexKey(value2)) || 0;
+    }
+    return get(value2, sortIndexKey || "") || 0;
+  };
+  useEffect5(() => {
+    effectVersion.current = effectVersion.current + 1;
+    if (effectVersion.current === changeVersion.current) {
+      return;
+    }
+    effectVersion.current = changeVersion.current;
     setList((_prevList) => {
-      const newKeys = Object.entries(value || {}).sort((a, b) => get(a[1], sortIndexKey || 0) - get(b[1], sortIndexKey || 0)).map(([key]) => key);
+      const newKeys = Object.entries(value || {}).sort((a, b) => getSortIndex(a[1]) - getSortIndex(b[1])).map(([key]) => key);
       const oldKeys = _prevList.map((item) => item.key).filter(Boolean);
       const addKeys = difference2(newKeys, oldKeys);
       return _prevList.filter((item) => !item.key || newKeys.includes(item.key)).map((item) => ({
@@ -1914,15 +2056,17 @@ function useObjectList({
       );
     });
   }, [value]);
-  const add = () => {
+  const add = (defaultValue) => {
     setList((prevList) => [
       ...prevList,
       {
-        id: genId2()
+        id: genId2(),
+        value: defaultValue
       }
     ]);
   };
   const updateValue = (itemId, value2) => {
+    changeVersion.current = changeVersion.current + 1;
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
         if (_item.id === itemId) {
@@ -1936,8 +2080,9 @@ function useObjectList({
       onChange(
         Object.fromEntries(
           nextList.filter((item) => item.key).map((item) => [item.key, item.value]).map((_res, idx) => {
-            if (isObject2(_res[1]) && sortIndexKey) {
-              set(_res[1], sortIndexKey, idx);
+            const indexKey = typeof sortIndexKey === "function" ? sortIndexKey(_res[1]) : sortIndexKey;
+            if (isObject3(_res[1]) && indexKey) {
+              set(_res[1], indexKey, idx);
             }
             return _res;
           })
@@ -1947,6 +2092,7 @@ function useObjectList({
     });
   };
   const updateKey = (itemId, key) => {
+    changeVersion.current = changeVersion.current + 1;
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
         if (_item.id === itemId) {
@@ -1966,6 +2112,7 @@ function useObjectList({
     });
   };
   const remove = (itemId) => {
+    changeVersion.current = changeVersion.current + 1;
     setList((prevList) => {
       const nextList = prevList.filter((_item) => _item.id !== itemId);
       onChange(
@@ -2022,11 +2169,11 @@ function BatchOutputs(props) {
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ React23.createElement(Button3, { disabled: readonly, icon: /* @__PURE__ */ React23.createElement(IconPlus2, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ React23.createElement(Button3, { disabled: readonly, icon: /* @__PURE__ */ React23.createElement(IconPlus2, null), size: "small", onClick: () => add() }, I18n12.t("Add")));
 }
 
 // src/components/prompt-editor/index.tsx
-import React24, { useEffect as useEffect5, useRef as useRef2 } from "react";
+import React24, { useEffect as useEffect6, useRef as useRef5 } from "react";
 import { Renderer, EditorProvider as EditorProvider2, ActiveLinePlaceholder as ActiveLinePlaceholder2 } from "@coze-editor/editor/react";
 import preset2 from "@coze-editor/editor/preset-prompt";
 
@@ -2168,10 +2315,11 @@ function PromptEditor(props) {
     style,
     hasError,
     children,
-    disableMarkdownHighlight
+    disableMarkdownHighlight,
+    options
   } = props || {};
-  const editorRef = useRef2(null);
-  useEffect5(() => {
+  const editorRef = useRef5(null);
+  useEffect6(() => {
     if (editorRef.current?.getValue() !== value?.content) {
       editorRef.current?.setValue(String(value?.content || ""));
     }
@@ -2187,7 +2335,8 @@ function PromptEditor(props) {
       options: {
         readOnly: readonly,
         editable: !readonly,
-        placeholder
+        placeholder,
+        ...options
       },
       onChange: (e) => {
         onChange({ type: "template", content: e.value });
@@ -2200,7 +2349,7 @@ function PromptEditor(props) {
 import React27 from "react";
 
 // src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
-import React25, { useEffect as useEffect6, useState as useState6 } from "react";
+import React25, { useEffect as useEffect7, useState as useState6 } from "react";
 import { Popover as Popover2, Tree } from "@douyinfe/semi-ui";
 import {
   Mention,
@@ -2228,7 +2377,7 @@ function VariableTree() {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editor) {
       return;
     }
@@ -2433,7 +2582,7 @@ function PromptEditorWithVariables(props) {
 import React30 from "react";
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
-import React29, { useEffect as useEffect7, useState as useState7 } from "react";
+import React29, { useEffect as useEffect8, useState as useState7 } from "react";
 import { Popover as Popover4 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention2,
@@ -2527,7 +2676,7 @@ function InputsTree({ inputsValues }) {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  useEffect7(() => {
+  useEffect8(() => {
     if (!editor) {
       return;
     }
@@ -2569,7 +2718,7 @@ import React33 from "react";
 import { transformerCreator } from "@coze-editor/editor/preset-code";
 
 // src/components/json-editor-with-variables/extensions/variable-tree.tsx
-import React31, { useEffect as useEffect8, useState as useState8 } from "react";
+import React31, { useEffect as useEffect9, useState as useState8 } from "react";
 import { Popover as Popover5, Tree as Tree3 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention3,
@@ -2597,7 +2746,7 @@ function VariableTree2() {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  useEffect8(() => {
+  useEffect9(() => {
     if (!editor) {
       return;
     }
@@ -2836,8 +2985,8 @@ function JsonEditorWithVariables(props) {
 }
 
 // src/components/inputs-values/index.tsx
-import React35 from "react";
-import { I18n as I18n12 } from "@flowgram.ai/editor";
+import React34 from "react";
+import { I18n as I18n13 } from "@flowgram.ai/editor";
 import { Button as Button4, IconButton as IconButton4 } from "@douyinfe/semi-ui";
 import { IconDelete as IconDelete2, IconPlus as IconPlus3 } from "@douyinfe/semi-icons";
 
@@ -2851,31 +3000,10 @@ var UIRows2 = styled10.div`
 `;
 var UIRow3 = styled10.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 5px;
 `;
 
-// src/components/inputs-values/components/blur-input.tsx
-import React34, { useEffect as useEffect9, useState as useState9 } from "react";
-import Input6 from "@douyinfe/semi-ui/lib/es/input";
-function BlurInput2(props) {
-  const [value, setValue] = useState9("");
-  useEffect9(() => {
-    setValue(props.value);
-  }, [props.value]);
-  return /* @__PURE__ */ React34.createElement(
-    Input6,
-    {
-      ...props,
-      value,
-      onChange: (value2) => {
-        setValue(value2);
-      },
-      onBlur: (e) => props.onChange?.(value, e)
-    }
-  );
-}
-
 // src/components/inputs-values/index.tsx
 function InputsValues({
   value,
@@ -2891,17 +3019,17 @@ function InputsValues({
     onChange,
     sortIndexKey: "extra.index"
   });
-  return /* @__PURE__ */ React35.createElement("div", null, /* @__PURE__ */ React35.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ React35.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ React35.createElement(
-    BlurInput2,
+  return /* @__PURE__ */ React34.createElement("div", null, /* @__PURE__ */ React34.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ React34.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ React34.createElement(
+    BlurInput,
     {
       style: { width: 100, minWidth: 100, maxWidth: 100 },
       disabled: readonly,
       size: "small",
       value: item.key,
       onChange: (v) => updateKey(item.id, v),
-      placeholder: I18n12.t("Input Key")
+      placeholder: I18n13.t("Input Key")
     }
-  ), /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React34.createElement(
     InjectDynamicValueInput,
     {
       style: { flexGrow: 1 },
@@ -2915,20 +3043,20 @@ function InputsValues({
         strategies: [...constantProps?.strategies || []]
       }
     }
-  ), /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React34.createElement(
     IconButton4,
     {
       disabled: readonly,
       theme: "borderless",
-      icon: /* @__PURE__ */ React35.createElement(IconDelete2, { size: "small" }),
+      icon: /* @__PURE__ */ React34.createElement(IconDelete2, { size: "small" }),
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ React35.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React35.createElement(IconPlus3, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ React34.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React34.createElement(IconPlus3, null), size: "small", onClick: () => add() }, I18n13.t("Add")));
 }
 
 // src/components/display-schema-tree/index.tsx
-import React36 from "react";
+import React35 from "react";
 
 // src/components/display-schema-tree/styles.tsx
 import styled11, { css as css4 } from "styled-components";
@@ -3012,7 +3140,7 @@ var TreeItem = styled11.div`
 
 // src/components/display-schema-tree/index.tsx
 function DisplaySchemaTree(props) {
-  return /* @__PURE__ */ React36.createElement(SchemaTree, { ...props });
+  return /* @__PURE__ */ React35.createElement(SchemaTree, { ...props });
 }
 function SchemaTree(props) {
   const {
@@ -3028,18 +3156,18 @@ function SchemaTree(props) {
   const icon = typeManager?.getDisplayIcon(schema);
   let properties = drilldown && config ? config.getTypeSchemaProperties(schema) : {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ React36.createElement(TreeItem, { depth, key: parentKey || "root" }, /* @__PURE__ */ React36.createElement(TreeRow, null, depth !== 0 && /* @__PURE__ */ React36.createElement(HorizontalLine, null), showIcon && icon && React36.cloneElement(icon, {
+  return /* @__PURE__ */ React35.createElement(TreeItem, { depth, key: parentKey || "root" }, /* @__PURE__ */ React35.createElement(TreeRow, null, depth !== 0 && /* @__PURE__ */ React35.createElement(HorizontalLine, null), showIcon && icon && React35.cloneElement(icon, {
     className: "tree-icon"
-  }), /* @__PURE__ */ React36.createElement(TreeTitle, null, parentKey ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, `${parentKey} (`, title, ")") : title)), childEntries?.length ? /* @__PURE__ */ React36.createElement(TreeLevel, null, childEntries.map(([key, value]) => /* @__PURE__ */ React36.createElement(SchemaTree, { key, ...props, parentKey: key, value, depth: depth + 1 }))) : null);
+  }), /* @__PURE__ */ React35.createElement(TreeTitle, null, parentKey ? /* @__PURE__ */ React35.createElement(React35.Fragment, null, `${parentKey} (`, title, ")") : title)), childEntries?.length ? /* @__PURE__ */ React35.createElement(TreeLevel, null, childEntries.map(([key, value]) => /* @__PURE__ */ React35.createElement(SchemaTree, { key, ...props, parentKey: key, value, depth: depth + 1 }))) : null);
 }
 
 // src/components/display-outputs/index.tsx
-import React38, { useEffect as useEffect10 } from "react";
-import { JsonSchemaUtils as JsonSchemaUtils5 } from "@flowgram.ai/json-schema";
+import React37, { useEffect as useEffect10 } from "react";
+import { JsonSchemaUtils as JsonSchemaUtils6 } from "@flowgram.ai/json-schema";
 import { useCurrentScope as useCurrentScope3, useRefresh } from "@flowgram.ai/editor";
 
 // src/components/display-schema-tag/index.tsx
-import React37 from "react";
+import React36 from "react";
 import { Popover as Popover7 } from "@douyinfe/semi-ui";
 
 // src/components/display-schema-tag/styles.ts
@@ -3068,14 +3196,14 @@ var TitleSpan = styled12.span`
 function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }) {
   const typeManager = useTypeManager();
   const icon = typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({ type: "unknown" });
-  return /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React36.createElement(
     Popover7,
     {
-      content: /* @__PURE__ */ React37.createElement(PopoverContent, null, /* @__PURE__ */ React37.createElement(DisplaySchemaTree, { value, typeManager, showIcon: showIconInTree }))
+      content: /* @__PURE__ */ React36.createElement(PopoverContent, null, /* @__PURE__ */ React36.createElement(DisplaySchemaTree, { value, typeManager, showIcon: showIconInTree }))
     },
-    /* @__PURE__ */ React37.createElement(StyledTag, { color: warning ? "amber" : "white" }, icon && React37.cloneElement(icon, {
+    /* @__PURE__ */ React36.createElement(StyledTag, { color: warning ? "amber" : "white" }, icon && React36.cloneElement(icon, {
       className: "tag-icon"
-    }), title && /* @__PURE__ */ React37.createElement(TitleSpan, null, title))
+    }), title && /* @__PURE__ */ React36.createElement(TitleSpan, null, title))
   );
 }
 
@@ -3105,12 +3233,12 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
   const properties = displayFromScope ? scope.output.variables?.reduce((acm, curr) => {
     acm = {
       ...acm,
-      ...JsonSchemaUtils5.astToSchema(curr.type)?.properties || {}
+      ...JsonSchemaUtils6.astToSchema(curr.type)?.properties || {}
     };
     return acm;
   }, {}) : value?.properties || {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ React38.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React37.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ React37.createElement(
     DisplaySchemaTag,
     {
       key,
@@ -3123,36 +3251,25 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
 }
 
 // src/components/display-flow-value/index.tsx
-import React39, { useMemo as useMemo10 } from "react";
-import { JsonSchemaUtils as JsonSchemaUtils6 } from "@flowgram.ai/json-schema";
+import React38, { useMemo as useMemo10 } from "react";
+import { JsonSchemaUtils as JsonSchemaUtils7 } from "@flowgram.ai/json-schema";
 import { useScopeAvailable as useScopeAvailable4 } from "@flowgram.ai/editor";
 function DisplayFlowValue({ value, title, showIconInTree }) {
   const available = useScopeAvailable4();
   const variable = value?.type === "ref" ? available.getByKeyPath(value?.content) : void 0;
   const schema = useMemo10(() => {
     if (value?.type === "ref") {
-      return JsonSchemaUtils6.astToSchema(variable?.type);
+      return JsonSchemaUtils7.astToSchema(variable?.type);
     }
     if (value?.type === "template") {
       return { type: "string" };
     }
     if (value?.type === "constant") {
-      if (value?.schema) {
-        return value?.schema;
-      }
-      if (typeof value?.content === "string") {
-        return { type: "string" };
-      }
-      if (typeof value?.content === "number") {
-        return { type: "number" };
-      }
-      if (typeof value?.content === "boolean") {
-        return { type: "boolean" };
-      }
+      return FlowValueUtils.inferConstantJsonSchema(value);
     }
     return { type: "unknown" };
   }, [value, variable?.hash]);
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React38.createElement(
     DisplaySchemaTag,
     {
       title,
@@ -3164,7 +3281,9 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
 }
 
 // src/components/display-inputs-values/index.tsx
-import React40 from "react";
+import React39, { useMemo as useMemo11 } from "react";
+import { isPlainObject as isPlainObject2 } from "lodash";
+import { useScopeAvailable as useScopeAvailable5 } from "@flowgram.ai/editor";
 
 // src/components/display-inputs-values/styles.ts
 import styled14 from "styled-components";
@@ -3177,30 +3296,58 @@ var DisplayInputsWrapper = styled14.div`
 // src/components/display-inputs-values/index.tsx
 function DisplayInputsValues({ value, showIconInTree }) {
   const childEntries = Object.entries(value || {});
-  return /* @__PURE__ */ React40.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ React40.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
+  return /* @__PURE__ */ React39.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => {
+    if (FlowValueUtils.isFlowValue(value2)) {
+      return /* @__PURE__ */ React39.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree });
+    }
+    if (isPlainObject2(value2)) {
+      return /* @__PURE__ */ React39.createElement(
+        DisplayInputsValueAllInTag,
+        {
+          key,
+          title: key,
+          value: value2,
+          showIconInTree
+        }
+      );
+    }
+    return null;
+  }));
+}
+function DisplayInputsValueAllInTag({
+  value,
+  title,
+  showIconInTree
+}) {
+  const available = useScopeAvailable5();
+  const schema = useMemo11(
+    () => FlowValueUtils.inferJsonSchema(value, available.scope),
+    [available.version, value]
+  );
+  return /* @__PURE__ */ React39.createElement(DisplaySchemaTag, { title, value: schema, showIconInTree });
 }
 
 // src/components/assign-rows/index.tsx
-import React43 from "react";
+import React42 from "react";
 import { FieldArray } from "@flowgram.ai/editor";
 import { Button as Button5 } from "@douyinfe/semi-ui";
 import { IconPlus as IconPlus4 } from "@douyinfe/semi-icons";
 
 // src/components/assign-row/index.tsx
-import React42 from "react";
+import React41 from "react";
 import { IconButton as IconButton5 } from "@douyinfe/semi-ui";
 import { IconMinus as IconMinus2 } from "@douyinfe/semi-icons";
 
 // src/components/assign-row/components/blur-input.tsx
-import React41, { useEffect as useEffect11, useState as useState10 } from "react";
-import Input7 from "@douyinfe/semi-ui/lib/es/input";
-function BlurInput3(props) {
-  const [value, setValue] = useState10("");
+import React40, { useEffect as useEffect11, useState as useState9 } from "react";
+import Input6 from "@douyinfe/semi-ui/lib/es/input";
+function BlurInput2(props) {
+  const [value, setValue] = useState9("");
   useEffect11(() => {
     setValue(props.value);
   }, [props.value]);
-  return /* @__PURE__ */ React41.createElement(
-    Input7,
+  return /* @__PURE__ */ React40.createElement(
+    Input6,
     {
       ...props,
       value,
@@ -3222,7 +3369,7 @@ function AssignRow(props) {
     onDelete,
     readonly
   } = props;
-  return /* @__PURE__ */ React42.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ React42.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React41.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ React41.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ React41.createElement(
     InjectVariableSelector,
     {
       style: { width: "100%", height: 26 },
@@ -3233,8 +3380,8 @@ function AssignRow(props) {
         left: { type: "ref", content: v }
       })
     }
-  ) : /* @__PURE__ */ React42.createElement(
-    BlurInput3,
+  ) : /* @__PURE__ */ React41.createElement(
+    BlurInput2,
     {
       style: { height: 26 },
       size: "small",
@@ -3245,7 +3392,7 @@ function AssignRow(props) {
         left: v
       })
     }
-  )), /* @__PURE__ */ React42.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ React42.createElement(
+  )), /* @__PURE__ */ React41.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ React41.createElement(
     InjectDynamicValueInput,
     {
       readonly,
@@ -3255,12 +3402,12 @@ function AssignRow(props) {
         right: v
       })
     }
-  )), onDelete && /* @__PURE__ */ React42.createElement("div", null, /* @__PURE__ */ React42.createElement(
+  )), onDelete && /* @__PURE__ */ React41.createElement("div", null, /* @__PURE__ */ React41.createElement(
     IconButton5,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ React42.createElement(IconMinus2, null),
+      icon: /* @__PURE__ */ React41.createElement(IconMinus2, null),
       onClick: () => onDelete?.()
     }
   )));
@@ -3269,7 +3416,7 @@ function AssignRow(props) {
 // src/components/assign-rows/index.tsx
 function AssignRows(props) {
   const { name, readonly } = props;
-  return /* @__PURE__ */ React43.createElement(FieldArray, { name }, ({ field }) => /* @__PURE__ */ React43.createElement(React43.Fragment, null, field.map((childField, index) => /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React42.createElement(FieldArray, { name }, ({ field }) => /* @__PURE__ */ React42.createElement(React42.Fragment, null, field.map((childField, index) => /* @__PURE__ */ React42.createElement(
     AssignRow,
     {
       key: childField.key,
@@ -3280,27 +3427,331 @@ function AssignRows(props) {
       },
       onDelete: () => field.remove(index)
     }
-  )), /* @__PURE__ */ React43.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ React43.createElement(
+  )), /* @__PURE__ */ React42.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ React42.createElement(
     Button5,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ React43.createElement(IconPlus4, null),
+      icon: /* @__PURE__ */ React42.createElement(IconPlus4, null),
       onClick: () => field.append({ operator: "assign" })
     },
     "Assign"
-  ), /* @__PURE__ */ React43.createElement(
+  ), /* @__PURE__ */ React42.createElement(
     Button5,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ React43.createElement(IconPlus4, null),
+      icon: /* @__PURE__ */ React42.createElement(IconPlus4, null),
       onClick: () => field.append({ operator: "declare" })
     },
     "Declaration"
   ))));
 }
 
+// src/components/inputs-values-tree/index.tsx
+import React45 from "react";
+import { I18n as I18n15 } from "@flowgram.ai/editor";
+import { Button as Button6 } from "@douyinfe/semi-ui";
+import { IconPlus as IconPlus5 } from "@douyinfe/semi-icons";
+
+// src/components/inputs-values-tree/styles.tsx
+import React43 from "react";
+import styled15, { css as css5 } from "styled-components";
+import Icon4 from "@douyinfe/semi-icons";
+var UIContainer5 = styled15.div``;
+var UIRow4 = styled15.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+`;
+var UICollapseTrigger2 = styled15.div`
+  cursor: pointer;
+  margin-right: 5px;
+`;
+var UITreeItems2 = styled15.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  ${({ $shrink }) => $shrink && css5`
+      padding-left: 3px;
+      margin-top: 10px;
+    `}
+`;
+var UITreeItemLeft2 = styled15.div`
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+
+  ${({ $showLine, $isLast, $showCollapse }) => {
+  let height = $isLast ? "24px" : "100%";
+  let width = $showCollapse ? "12px" : "30px";
+  return $showLine && css5`
+        &::before {
+          /* 竖线 */
+          content: '';
+          height: ${height};
+          position: absolute;
+          left: -14px;
+          top: -16px;
+          width: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+
+        &::after {
+          /* 横线 */
+          content: '';
+          position: absolute;
+          left: -14px; // 横线起点和竖线对齐
+          top: 8px; // 跟随你的行高调整
+          width: ${width}; // 横线长度
+          height: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+      `;
+}}
+`;
+var UITreeItemRight2 = styled15.div`
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+var UITreeItemMain2 = styled15.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+`;
+var UICollapsible2 = styled15.div`
+  display: none;
+
+  ${({ $collapse }) => $collapse && css5`
+      display: block;
+    `}
+`;
+var UIActions2 = styled15.div`
+  white-space: nowrap;
+`;
+var iconAddChildrenSvg2 = /* @__PURE__ */ React43.createElement(
+  "svg",
+  {
+    className: "icon-icon icon-icon-coz_add_node ",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  /* @__PURE__ */ React43.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
+    }
+  ),
+  /* @__PURE__ */ React43.createElement("path", { d: "M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z" })
+);
+var IconAddChildren2 = () => /* @__PURE__ */ React43.createElement(Icon4, { size: "small", svg: iconAddChildrenSvg2 });
+
+// src/components/inputs-values-tree/row.tsx
+import React44, { useMemo as useMemo13, useState as useState10 } from "react";
+import { I18n as I18n14 } from "@flowgram.ai/editor";
+import { IconButton as IconButton6, Input as Input7 } from "@douyinfe/semi-ui";
+import { IconChevronDown as IconChevronDown2, IconChevronRight as IconChevronRight2, IconDelete as IconDelete3 } from "@douyinfe/semi-icons";
+
+// src/components/inputs-values-tree/hooks/use-child-list.tsx
+import { useMemo as useMemo12 } from "react";
+import { isPlainObject as isPlainObject3 } from "lodash";
+function useChildList(value, onChange) {
+  const canAddField = useMemo12(() => {
+    if (!isPlainObject3(value)) {
+      return false;
+    }
+    if (FlowValueUtils.isFlowValue(value)) {
+      return FlowValueUtils.isConstant(value) && value?.schema?.type === "object";
+    }
+    return true;
+  }, [value]);
+  const objectListValue = useMemo12(() => {
+    if (isPlainObject3(value)) {
+      if (FlowValueUtils.isFlowValue(value)) {
+        return void 0;
+      }
+      return value;
+    }
+    return void 0;
+  }, [value]);
+  const { list, add, updateKey, updateValue, remove } = useObjectList({
+    value: objectListValue,
+    onChange: (value2) => {
+      onChange?.(value2);
+    },
+    sortIndexKey: (value2) => FlowValueUtils.isFlowValue(value2) ? "extra.index" : ""
+  });
+  const hasChildren = useMemo12(
+    () => canAddField && (list.length > 0 || Object.keys(objectListValue || {}).length > 0),
+    [canAddField, list.length, Object.keys(objectListValue || {}).length]
+  );
+  return {
+    canAddField,
+    hasChildren,
+    list,
+    add,
+    updateKey,
+    updateValue,
+    remove
+  };
+}
+
+// src/components/inputs-values-tree/row.tsx
+var AddObjectChildStrategy = {
+  hit: (schema) => schema.type === "object",
+  Renderer: () => /* @__PURE__ */ React44.createElement(
+    Input7,
+    {
+      size: "small",
+      disabled: true,
+      style: { pointerEvents: "none" },
+      value: I18n14.t("Configure via child fields")
+    }
+  )
+};
+function InputValueRow(props) {
+  const {
+    keyName,
+    value,
+    $level = 0,
+    onUpdateKey,
+    onUpdateValue,
+    $isLast,
+    onRemove,
+    constantProps,
+    hasError,
+    readonly
+  } = props;
+  const [collapse, setCollapse] = useState10(false);
+  const { canAddField, hasChildren, list, add, updateKey, updateValue, remove } = useChildList(
+    value,
+    onUpdateValue
+  );
+  const strategies = useMemo13(
+    () => [...hasChildren ? [AddObjectChildStrategy] : [], ...constantProps?.strategies || []],
+    [hasChildren, constantProps?.strategies]
+  );
+  const flowDisplayValue = useMemo13(
+    () => hasChildren ? {
+      type: "constant",
+      schema: { type: "object" }
+    } : value,
+    [hasChildren, value]
+  );
+  return /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(UITreeItemLeft2, { $isLast, $showLine: $level > 0, $showCollapse: hasChildren }, hasChildren && /* @__PURE__ */ React44.createElement(UICollapseTrigger2, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ React44.createElement(IconChevronDown2, { size: "small" }) : /* @__PURE__ */ React44.createElement(IconChevronRight2, { size: "small" }))), /* @__PURE__ */ React44.createElement(UITreeItemRight2, null, /* @__PURE__ */ React44.createElement(UITreeItemMain2, null, /* @__PURE__ */ React44.createElement(UIRow4, null, /* @__PURE__ */ React44.createElement(
+    BlurInput,
+    {
+      style: { width: 100, minWidth: 100, maxWidth: 100 },
+      disabled: readonly,
+      size: "small",
+      value: keyName,
+      onChange: (v) => onUpdateKey?.(v),
+      placeholder: I18n14.t("Input Key")
+    }
+  ), /* @__PURE__ */ React44.createElement(
+    InjectDynamicValueInput,
+    {
+      style: { flexGrow: 1 },
+      readonly,
+      value: flowDisplayValue,
+      onChange: (v) => onUpdateValue(v),
+      hasError,
+      constantProps: {
+        ...constantProps,
+        strategies
+      }
+    }
+  ), /* @__PURE__ */ React44.createElement(UIActions2, null, canAddField && /* @__PURE__ */ React44.createElement(
+    IconButton6,
+    {
+      disabled: readonly,
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ React44.createElement(IconAddChildren2, null),
+      onClick: () => {
+        add();
+        setCollapse(true);
+      }
+    }
+  ), /* @__PURE__ */ React44.createElement(
+    IconButton6,
+    {
+      disabled: readonly,
+      theme: "borderless",
+      icon: /* @__PURE__ */ React44.createElement(IconDelete3, { size: "small" }),
+      size: "small",
+      onClick: () => onRemove?.()
+    }
+  )))), hasChildren && /* @__PURE__ */ React44.createElement(UICollapsible2, { $collapse: collapse }, /* @__PURE__ */ React44.createElement(UITreeItems2, { $shrink: true }, list.map((_item, index) => /* @__PURE__ */ React44.createElement(
+    InputValueRow,
+    {
+      readonly,
+      hasError,
+      constantProps,
+      key: _item.id,
+      keyName: _item.key,
+      value: _item.value,
+      $level: $level + 1,
+      onUpdateValue: (_v) => {
+        updateValue(_item.id, _v);
+      },
+      onUpdateKey: (k) => {
+        updateKey(_item.id, k);
+      },
+      onRemove: () => {
+        remove(_item.id);
+      },
+      $isLast: index === list.length - 1
+    }
+  ))))));
+}
+
+// src/components/inputs-values-tree/index.tsx
+function InputsValuesTree(props) {
+  const { value, onChange, readonly, hasError, constantProps } = props;
+  const { list, updateKey, updateValue, remove, add } = useObjectList({
+    value,
+    onChange,
+    sortIndexKey: (value2) => FlowValueUtils.isFlowValue(value2) ? "extra.index" : ""
+  });
+  return /* @__PURE__ */ React45.createElement("div", null, /* @__PURE__ */ React45.createElement(UITreeItems2, null, list.map((item) => /* @__PURE__ */ React45.createElement(
+    InputValueRow,
+    {
+      key: item.id,
+      keyName: item.key,
+      value: item.value,
+      onUpdateKey: (key) => updateKey(item.id, key),
+      onUpdateValue: (value2) => updateValue(item.id, value2),
+      onRemove: () => remove(item.id),
+      readonly,
+      hasError,
+      constantProps
+    }
+  ))), /* @__PURE__ */ React45.createElement(
+    Button6,
+    {
+      style: { marginTop: 10, marginLeft: 16 },
+      disabled: readonly,
+      icon: /* @__PURE__ */ React45.createElement(IconPlus5, null),
+      size: "small",
+      onClick: add
+    },
+    I18n15.t("Add")
+  ));
+}
+
 // src/effects/provide-batch-input/index.ts
 import {
   ASTFactory,
@@ -3337,7 +3788,6 @@ var provideBatchInputEffect = createEffectFromVariableProvider({
 });
 
 // src/effects/auto-rename-ref/index.ts
-import { isArray, isObject as isObject3, uniq } from "lodash";
 import {
   DataEvent,
   VariableFieldKeyRenameService
@@ -3364,7 +3814,7 @@ var autoRenameRefEffect = [
               form.setValueIn(_drilldownName, _v);
             }
           } else if (_v.type === "template") {
-            const templateKeyPaths = getTemplateKeyPaths(_v);
+            const templateKeyPaths = FlowValueUtils.getTemplateKeyPaths(_v);
             let hasMatch = false;
             templateKeyPaths.forEach((_keyPath) => {
               if (isKeyPathMatch(_keyPath, beforeKeyPath)) {
@@ -3394,44 +3844,17 @@ var autoRenameRefEffect = [
 function isKeyPathMatch(keyPath = [], targetKeyPath) {
   return targetKeyPath.every((_key, index) => _key === keyPath[index]);
 }
-function getTemplateKeyPaths(value) {
-  const keyPathReg = /{{(.*?)}}/g;
-  return uniq(value.content?.match(keyPathReg) || []).map(
-    (_keyPath) => _keyPath.slice(2, -2).split(".")
-  );
-}
-function isRef(value) {
-  return value?.type === "ref" && Array.isArray(value?.content) && typeof value?.content[0] === "string";
-}
-function isTemplate(value) {
-  return value?.type === "template" && typeof value?.content === "string";
-}
 function traverseRef(name, value, cb) {
-  if (isObject3(value)) {
-    if (isRef(value)) {
-      cb(name, value);
-      return;
-    }
-    if (isTemplate(value)) {
-      cb(name, value);
-      return;
-    }
-    Object.entries(value).forEach(([_key, _value]) => {
-      traverseRef(`${name}.${_key}`, _value, cb);
-    });
-    return;
-  }
-  if (isArray(value)) {
-    value.forEach((_value, idx) => {
-      traverseRef(`${name}[${idx}]`, _value, cb);
-    });
-    return;
+  for (const { value: _v, path } of FlowValueUtils.traverse(value, {
+    includeTypes: ["ref", "template"],
+    path: name
+  })) {
+    cb(path, _v);
   }
-  return;
 }
 
 // src/effects/provide-json-schema-outputs/index.ts
-import { JsonSchemaUtils as JsonSchemaUtils7 } from "@flowgram.ai/json-schema";
+import { JsonSchemaUtils as JsonSchemaUtils8 } from "@flowgram.ai/json-schema";
 import {
   ASTFactory as ASTFactory2,
   createEffectFromVariableProvider as createEffectFromVariableProvider2,
@@ -3445,7 +3868,7 @@ var provideJsonSchemaOutputs = createEffectFromVariableProvider2({
         title: getNodeForm2(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: JsonSchemaUtils7.schemaToAST(value)
+      type: JsonSchemaUtils8.schemaToAST(value)
     })
   ]
 });
@@ -3523,7 +3946,7 @@ var listenRefValueChange = (cb) => [
 ];
 
 // src/effects/listen-ref-schema-change/index.ts
-import { JsonSchemaUtils as JsonSchemaUtils8 } from "@flowgram.ai/json-schema";
+import { JsonSchemaUtils as JsonSchemaUtils9 } from "@flowgram.ai/json-schema";
 import {
   DataEvent as DataEvent5,
   getNodeScope as getNodeScope3
@@ -3539,7 +3962,7 @@ var listenRefSchemaChange = (cb) => [
       const disposable = getNodeScope3(context.node).available.trackByKeyPath(
         value?.content || [],
         (_type) => {
-          cb({ ...params, schema: JsonSchemaUtils8.astToSchema(_type) });
+          cb({ ...params, schema: JsonSchemaUtils9.astToSchema(_type) });
         },
         {
           selector: (_v) => _v?.type
@@ -3629,12 +4052,7 @@ var createBatchOutputsFormPlugin = defineFormPluginCreator({
 
 // src/form-plugins/infer-inputs-plugin/index.ts
 import { get as get2, set as set2 } from "lodash";
-import { JsonSchemaUtils as JsonSchemaUtils9 } from "@flowgram.ai/json-schema";
-import {
-  defineFormPluginCreator as defineFormPluginCreator2,
-  getNodePrivateScope as getNodePrivateScope3,
-  getNodeScope as getNodeScope5
-} from "@flowgram.ai/editor";
+import { defineFormPluginCreator as defineFormPluginCreator2, getNodePrivateScope as getNodePrivateScope3, getNodeScope as getNodeScope5 } from "@flowgram.ai/editor";
 var createInferInputsPlugin = defineFormPluginCreator2({
   onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
     if (!sourceKey || !targetKey) {
@@ -3644,7 +4062,7 @@ var createInferInputsPlugin = defineFormPluginCreator2({
       set2(
         formData,
         targetKey,
-        infer(
+        FlowValueUtils.inferJsonSchema(
           get2(formData, sourceKey),
           scope === "private" ? getNodePrivateScope3(ctx.node) : getNodeScope5(ctx.node)
         )
@@ -3653,59 +4071,6 @@ var createInferInputsPlugin = defineFormPluginCreator2({
     });
   }
 });
-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 ? JsonSchemaUtils9.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;
-      }, {})
-    };
-  }
-};
 
 // src/form-plugins/infer-assign-plugin/index.ts
 import { set as set3, uniqBy } from "lodash";
@@ -3788,7 +4153,7 @@ function validateFlowValue(value, ctx) {
     }
   }
   if (value?.type === "template") {
-    const allRefs = getTemplateKeyPaths2(value);
+    const allRefs = getTemplateKeyPaths(value);
     for (const ref of allRefs) {
       const variable = getNodeScope7(node).available.getByKeyPath(ref);
       if (!variable) {
@@ -3801,7 +4166,7 @@ function validateFlowValue(value, ctx) {
   }
   return void 0;
 }
-function getTemplateKeyPaths2(value) {
+function getTemplateKeyPaths(value) {
   const keyPathReg = /{{(.*?)}}/g;
   return uniq2(value.content?.match(keyPathReg) || []).map(
     (_keyPath) => _keyPath.slice(2, -2).split(".")
@@ -3812,24 +4177,28 @@ export {
   AssignRows,
   BatchOutputs,
   BatchVariableSelector,
+  BlurInput,
   CodeEditor,
   CodeEditorMini,
   ConditionRow,
   ConstantInput,
   DisplayFlowValue,
+  DisplayInputsValueAllInTag,
   DisplayInputsValues,
   DisplayOutputs,
   DisplaySchemaTag,
   DisplaySchemaTree,
   DynamicValueInput,
+  FlowValueUtils,
   InjectDynamicValueInput,
   InjectTypeSelector,
   InjectVariableSelector,
   InputsValues,
+  InputsValuesTree,
   JsonEditorWithVariables,
   JsonSchemaEditor,
   JsonSchemaTypePresetProvider,
-  JsonSchemaUtils,
+  JsonSchemaUtils2 as JsonSchemaUtils,
   PromptEditor,
   PromptEditorWithInputs,
   PromptEditorWithVariables,