@flowgram.ai/form-materials 0.4.0 → 0.4.1

package/dist/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   AssignRows: () => AssignRows,
   BatchOutputs: () => BatchOutputs,
   BatchVariableSelector: () => BatchVariableSelector,
+  BlurInput: () => BlurInput,
   CodeEditor: () => CodeEditor,
   CodeEditorMini: () => CodeEditorMini,
   ConditionRow: () => ConditionRow,
@@ -44,14 +45,16 @@ __export(src_exports, {
   DisplaySchemaTag: () => DisplaySchemaTag,
   DisplaySchemaTree: () => DisplaySchemaTree,
   DynamicValueInput: () => DynamicValueInput,
+  FlowValueUtils: () => FlowValueUtils,
   InjectDynamicValueInput: () => InjectDynamicValueInput,
   InjectTypeSelector: () => InjectTypeSelector,
   InjectVariableSelector: () => InjectVariableSelector,
   InputsValues: () => InputsValues,
+  InputsValuesTree: () => InputsValuesTree,
   JsonEditorWithVariables: () => JsonEditorWithVariables,
   JsonSchemaEditor: () => JsonSchemaEditor,
   JsonSchemaTypePresetProvider: () => JsonSchemaTypePresetProvider,
-  JsonSchemaUtils: () => import_json_schema3.JsonSchemaUtils,
+  JsonSchemaUtils: () => import_json_schema4.JsonSchemaUtils,
   PromptEditor: () => PromptEditor,
   PromptEditorWithInputs: () => PromptEditorWithInputs,
   PromptEditorWithVariables: () => PromptEditorWithVariables,
@@ -179,18 +182,171 @@ function createInjectMaterial(Component, params) {
   return InjectComponent;
 }
 
+// src/shared/flow-value/utils.ts
+var import_lodash2 = require("lodash");
+var import_json_schema = require("@flowgram.ai/json-schema");
+
+// src/shared/flow-value/schema.ts
+var import_zod = __toESM(require("zod"));
+var extraSchema = import_zod.default.object({
+  index: import_zod.default.number().optional()
+}).optional();
+var constantSchema = import_zod.default.object({
+  type: import_zod.default.literal("constant"),
+  content: import_zod.default.union([import_zod.default.string(), import_zod.default.number(), import_zod.default.boolean()]).optional(),
+  schema: import_zod.default.any().optional(),
+  extra: extraSchema
+});
+var refSchema = import_zod.default.object({
+  type: import_zod.default.literal("ref"),
+  content: import_zod.default.array(import_zod.default.string()).optional(),
+  extra: extraSchema
+});
+var expressionSchema = import_zod.default.object({
+  type: import_zod.default.literal("expression"),
+  content: import_zod.default.string().optional(),
+  extra: extraSchema
+});
+var templateSchema = import_zod.default.object({
+  type: import_zod.default.literal("template"),
+  content: import_zod.default.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 ((0, import_lodash2.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 ((0, import_lodash2.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 (0, import_lodash2.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 ((0, import_lodash2.isObject)(value.content)) {
+      return {
+        type: "object"
+      };
+    }
+    return void 0;
+  }
+  FlowValueUtils2.inferConstantJsonSchema = inferConstantJsonSchema;
+  function inferJsonSchema(values, scope) {
+    if ((0, import_lodash2.isPlainObject)(values)) {
+      if (isConstant(values)) {
+        return inferConstantJsonSchema(values);
+      }
+      if (isRef(values)) {
+        const variable = scope.available.getByKeyPath(values?.content);
+        const schema = variable?.type ? import_json_schema.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
 var import_react12 = __toESM(require("react"));
-var import_json_schema4 = require("@flowgram.ai/json-schema");
+var import_json_schema5 = require("@flowgram.ai/json-schema");
 var import_editor11 = require("@flowgram.ai/editor");
 var import_semi_ui5 = require("@douyinfe/semi-ui");
 
 // src/plugins/json-schema-preset/index.tsx
 var import_react11 = __toESM(require("react"));
-var import_json_schema3 = require("@flowgram.ai/json-schema");
+var import_json_schema4 = require("@flowgram.ai/json-schema");
 
 // src/plugins/json-schema-preset/type-definition/index.tsx
-var import_json_schema = require("@flowgram.ai/json-schema");
+var import_json_schema2 = require("@flowgram.ai/json-schema");
 
 // src/plugins/json-schema-preset/type-definition/string.tsx
 var import_react2 = __toESM(require("react"));
@@ -198,11 +354,20 @@ var import_editor2 = require("@flowgram.ai/editor");
 var import_semi_ui = require("@douyinfe/semi-ui");
 var stringRegistry = {
   type: "string",
-  ConstantRenderer: (props) => /* @__PURE__ */ import_react2.default.createElement(
-    import_semi_ui.Input,
+  ConstantRenderer: (props) => props?.enableMultiLineStr ? /* @__PURE__ */ import_react2.default.createElement(
+    import_semi_ui.TextArea,
     {
+      autosize: true,
+      rows: 1,
       placeholder: import_editor2.I18n.t("Please Input String"),
+      disabled: props.readonly,
+      ...props
+    }
+  ) : /* @__PURE__ */ import_react2.default.createElement(
+    import_semi_ui.Input,
+    {
       size: "small",
+      placeholder: import_editor2.I18n.t("Please Input String"),
       disabled: props.readonly,
       ...props
     }
@@ -681,27 +846,27 @@ var jsonSchemaTypePreset = [
   booleanRegistry,
   arrayRegistry
 ];
-jsonSchemaTypePreset.forEach((_type) => import_json_schema.jsonSchemaTypeManager.register(_type));
+jsonSchemaTypePreset.forEach((_type) => import_json_schema2.jsonSchemaTypeManager.register(_type));
 
 // src/plugins/json-schema-preset/create-type-preset-plugin.tsx
-var import_json_schema2 = require("@flowgram.ai/json-schema");
+var import_json_schema3 = require("@flowgram.ai/json-schema");
 var import_editor9 = require("@flowgram.ai/editor");
 var createTypePresetPlugin = (0, import_editor9.definePluginCreator)({
   onInit(ctx, opts) {
-    const typeManager = ctx.get(import_json_schema2.BaseTypeManager);
+    const typeManager = ctx.get(import_json_schema3.BaseTypeManager);
     jsonSchemaTypePreset.forEach((_type) => typeManager.register(_type));
     opts.types?.forEach((_type) => typeManager.register(_type));
     opts.unregisterTypes?.forEach((_type) => typeManager.unregister(_type));
   },
-  containerModules: [import_json_schema2.jsonSchemaContainerModule]
+  containerModules: [import_json_schema3.jsonSchemaContainerModule]
 });
 
 // src/plugins/json-schema-preset/index.tsx
-var useTypeManager = () => (0, import_json_schema3.useTypeManager)();
+var useTypeManager = () => (0, import_json_schema4.useTypeManager)();
 var JsonSchemaTypePresetProvider = ({
   types = [],
   children
-}) => /* @__PURE__ */ import_react11.default.createElement(import_json_schema3.TypePresetProvider, { types: [...jsonSchemaTypePreset, ...types] }, children);
+}) => /* @__PURE__ */ import_react11.default.createElement(import_json_schema4.TypePresetProvider, { types: [...jsonSchemaTypePreset, ...types] }, children);
 
 // src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts
 var import_editor10 = require("@flowgram.ai/editor");
@@ -735,7 +900,7 @@ function useVariableTree(params) {
       }
       return variable.meta.icon;
     }
-    const schema = import_json_schema4.JsonSchemaUtils.astToSchema(variable.type, { drilldownObject: false });
+    const schema = import_json_schema5.JsonSchemaUtils.astToSchema(variable.type, { drilldownObject: false });
     return /* @__PURE__ */ import_react12.default.createElement(import_semi_ui5.Icon, { size: "small", svg: typeManager.getDisplayIcon(schema || {}) });
   }, []);
   const renderVariable = (variable, parentFields = []) => {
@@ -749,8 +914,8 @@ function useVariableTree(params) {
     }
     const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
     const key = keyPath.join(".");
-    const isSchemaInclude = includeSchema ? import_json_schema4.JsonSchemaUtils.isASTMatchSchema(type, includeSchema) : true;
-    const isSchemaExclude = excludeSchema ? import_json_schema4.JsonSchemaUtils.isASTMatchSchema(type, excludeSchema) : false;
+    const isSchemaInclude = includeSchema ? import_json_schema5.JsonSchemaUtils.isASTMatchSchema(type, includeSchema) : true;
+    const isSchemaExclude = excludeSchema ? import_json_schema5.JsonSchemaUtils.isASTMatchSchema(type, excludeSchema) : false;
     const isCustomSkip = customSkip ? customSkip(variable) : false;
     const isMetaDisabled = variable.meta?.disabled;
     const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip && !isMetaDisabled;
@@ -986,8 +1151,29 @@ var import_editor14 = require("@flowgram.ai/editor");
 var import_semi_ui10 = require("@douyinfe/semi-ui");
 var import_semi_icons3 = require("@douyinfe/semi-icons");
 
-// src/components/json-schema-editor/styles.tsx
+// src/components/blur-input/index.tsx
 var import_react15 = __toESM(require("react"));
+var import_input = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
+function BlurInput(props) {
+  const [value, setValue] = (0, import_react15.useState)("");
+  (0, import_react15.useEffect)(() => {
+    setValue(props.value);
+  }, [props.value]);
+  return /* @__PURE__ */ import_react15.default.createElement(
+    import_input.default,
+    {
+      ...props,
+      value,
+      onChange: (value2) => {
+        setValue(value2);
+      },
+      onBlur: (e) => props.onChange?.(value, e)
+    }
+  );
+}
+
+// src/components/json-schema-editor/styles.tsx
+var import_react16 = __toESM(require("react"));
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_semi_icons2 = __toESM(require("@douyinfe/semi-icons"));
 var UIContainer = import_styled_components3.default.div`
@@ -1016,32 +1202,30 @@ var UILabel = import_styled_components3.default.div`
   font-weight: 400;
   margin-bottom: 2px;
 `;
-var UIProperties = import_styled_components3.default.div`
+var UITreeItems = import_styled_components3.default.div`
   display: grid;
   grid-template-columns: auto 1fr;
 
   ${({ $shrink }) => $shrink && import_styled_components3.css`
-      padding-left: 10px;
+      padding-left: 3px;
       margin-top: 10px;
     `}
 `;
-var UIPropertyLeft = import_styled_components3.default.div`
+var UITreeItemLeft = import_styled_components3.default.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 && import_styled_components3.css`
         &::before {
           /* 竖线 */
           content: '';
           height: ${height};
           position: absolute;
-          left: -22px;
+          left: -14px;
           top: -16px;
           width: 1px;
           background: #d9d9d9;
@@ -1052,9 +1236,9 @@ var UIPropertyLeft = import_styled_components3.default.div`
           /* 横线 */
           content: '';
           position: absolute;
-          left: -22px; // 横线起点和竖线对齐
+          left: -14px; // 横线起点和竖线对齐
           top: 8px; // 跟随你的行高调整
-          width: 18px; // 横线长度
+          width: ${width}; // 横线长度
           height: 1px;
           background: #d9d9d9;
           display: block;
@@ -1062,7 +1246,7 @@ var UIPropertyLeft = import_styled_components3.default.div`
       `;
 }}
 `;
-var UIPropertyRight = import_styled_components3.default.div`
+var UITreeItemRight = import_styled_components3.default.div`
   grid-column: 2;
   margin-bottom: 10px;
 
@@ -1070,35 +1254,11 @@ var UIPropertyRight = import_styled_components3.default.div`
     margin-bottom: 0px;
   }
 `;
-var UIPropertyMain = import_styled_components3.default.div`
+var UITreeItemMain = import_styled_components3.default.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 && import_styled_components3.css`
-        background-color: #f5f5f5;
-        padding: 10px;
-        border-radius: 4px;
-
-        ${$showCollapse && $collapse && (type === "array" || type === "object") && import_styled_components3.css`
-          ${beforeElement}
-        `}
-      `;
-}}
 `;
 var UICollapsible = import_styled_components3.default.div`
   display: none;
@@ -1115,7 +1275,7 @@ var UIRequired = import_styled_components3.default.div``;
 var UIActions = import_styled_components3.default.div`
   white-space: nowrap;
 `;
-var iconAddChildrenSvg = /* @__PURE__ */ import_react15.default.createElement(
+var iconAddChildrenSvg = /* @__PURE__ */ import_react16.default.createElement(
   "svg",
   {
     className: "icon-icon icon-icon-coz_add_node ",
@@ -1125,7 +1285,7 @@ var iconAddChildrenSvg = /* @__PURE__ */ import_react15.default.createElement(
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react15.default.createElement(
+  /* @__PURE__ */ import_react16.default.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1133,9 +1293,9 @@ var iconAddChildrenSvg = /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.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__ */ import_react16.default.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__ */ import_react15.default.createElement(import_semi_icons2.default, { size: "small", svg: iconAddChildrenSvg });
+var IconAddChildren = () => /* @__PURE__ */ import_react16.default.createElement(import_semi_icons2.default, { size: "small", svg: iconAddChildrenSvg });
 var DefaultValueWrapper = import_styled_components3.default.div`
   margin: 0;
 `;
@@ -1150,29 +1310,36 @@ var ConstantInputWrapper = import_styled_components3.default.div`
 `;
 
 // src/components/json-schema-editor/hooks.tsx
-var import_react16 = require("react");
-var import_lodash2 = require("lodash");
+var import_react17 = require("react");
+var import_lodash3 = require("lodash");
 var import_immer = require("immer");
-var import_json_schema5 = require("@flowgram.ai/json-schema");
+var import_json_schema6 = require("@flowgram.ai/json-schema");
 var _id = 0;
 function genId() {
   return _id++;
 }
 function usePropertiesEdit(value, onChange) {
-  const typeManager = (0, import_json_schema5.useTypeManager)();
+  const typeManager = (0, import_json_schema6.useTypeManager)();
   const drilldownSchema = typeManager.getPropertiesParent(value || {});
   const canAddField = typeManager.canAddField(value || {});
-  const [propertyList, setPropertyList] = (0, import_react16.useState)([]);
-  (0, import_react16.useEffect)(() => {
+  const [propertyList, setPropertyList] = (0, import_react17.useState)([]);
+  const effectVersion = (0, import_react17.useRef)(0);
+  const changeVersion = (0, import_react17.useRef)(0);
+  (0, import_react17.useEffect)(() => {
+    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);
-      const addNames = (0, import_lodash2.difference)(newNames, oldNames);
+      const addNames = (0, import_lodash3.difference)(newNames, oldNames);
       return _list.filter((item) => !item.name || newNames.includes(item.name)).map((item) => ({
         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(),
@@ -1184,6 +1351,7 @@ function usePropertiesEdit(value, onChange) {
     });
   }, [drilldownSchema]);
   const updatePropertyList = (updater) => {
+    changeVersion.current = changeVersion.current + 1;
     setPropertyList((_list) => {
       const next = updater(_list);
       const nextProperties = {};
@@ -1192,7 +1360,7 @@ function usePropertiesEdit(value, onChange) {
         if (!_property.name) {
           continue;
         }
-        nextProperties[_property.name] = (0, import_lodash2.omit)(_property, ["key", "name", "isPropertyRequired"]);
+        nextProperties[_property.name] = (0, import_lodash3.omit)(_property, ["key", "name", "isPropertyRequired"]);
         if (_property.isPropertyRequired) {
           nextRequired.push(_property.name);
         }
@@ -1224,7 +1392,7 @@ function usePropertiesEdit(value, onChange) {
       (_list) => _list.map((_property) => _property.key === key ? nextValue : _property)
     );
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!canAddField) {
       setPropertyList([]);
     }
@@ -1239,16 +1407,16 @@ function usePropertiesEdit(value, onChange) {
 }
 
 // src/components/json-schema-editor/default-value.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_editor13 = require("@flowgram.ai/editor");
 
 // src/components/constant-input/index.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_semi_ui9 = require("@douyinfe/semi-ui");
 function ConstantInput(props) {
   const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;
   const typeManager = useTypeManager();
-  const Renderer2 = (0, import_react17.useMemo)(() => {
+  const Renderer2 = (0, import_react18.useMemo)(() => {
     const strategy = (strategies || []).find((_strategy) => _strategy.hit(schema));
     if (!strategy) {
       return typeManager.getTypeBySchema(schema)?.ConstantRenderer;
@@ -1257,53 +1425,33 @@ function ConstantInput(props) {
   }, [strategies, schema]);
   if (!Renderer2) {
     if (fallbackRenderer) {
-      return import_react17.default.createElement(fallbackRenderer, {
+      return import_react18.default.createElement(fallbackRenderer, {
         value,
         onChange,
         readonly,
         ...rest
       });
     }
-    return /* @__PURE__ */ import_react17.default.createElement(import_semi_ui9.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
+    return /* @__PURE__ */ import_react18.default.createElement(import_semi_ui9.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
   }
-  return /* @__PURE__ */ import_react17.default.createElement(Renderer2, { value, onChange, readonly, ...rest });
+  return /* @__PURE__ */ import_react18.default.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__ */ import_react18.default.createElement(ConstantInputWrapper, null, /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(ConstantInputWrapper, null, /* @__PURE__ */ import_react19.default.createElement(
     ConstantInput,
     {
       value,
       onChange: (_v) => onChange(_v),
       schema: schema || { type: "string" },
-      placeholder: placeholder ?? import_editor13.I18n.t("Default value if parameter is not provided")
+      placeholder: placeholder ?? import_editor13.I18n.t("Default value if parameter is not provided"),
+      enableMultiLineStr: true
     }
   ));
 }
 
-// src/components/json-schema-editor/components/blur-input.tsx
-var import_react19 = __toESM(require("react"));
-var import_input = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
-function BlurInput(props) {
-  const [value, setValue] = (0, import_react19.useState)("");
-  (0, import_react19.useEffect)(() => {
-    setValue(props.value);
-  }, [props.value]);
-  return /* @__PURE__ */ import_react19.default.createElement(
-    import_input.default,
-    {
-      ...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) {
@@ -1312,14 +1460,13 @@ function JsonSchemaEditor(props) {
     value,
     onChangeProps
   );
-  return /* @__PURE__ */ import_react20.default.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ import_react20.default.createElement(UIProperties, null, propertyList.map((_property, index) => /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(UIContainer, { className: props.className }, /* @__PURE__ */ import_react20.default.createElement(UITreeItems, null, propertyList.map((_property) => /* @__PURE__ */ import_react20.default.createElement(
     PropertyEdit,
     {
       readonly,
       key: _property.key,
       value: _property,
       config,
-      $index: index,
       onChange: (_v) => {
         onEditProperty(_property.key, _v);
       },
@@ -1340,20 +1487,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] = (0, import_react20.useState)(false);
   const [collapse, setCollapse] = (0, import_react20.useState)(false);
   const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
@@ -1366,109 +1500,84 @@ function PropertyEdit(props) {
     });
   };
   const showCollapse = canAddField && propertyList.length > 0;
-  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
-    UIPropertyLeft,
-    {
-      type,
-      $index,
-      $isFirst,
-      $isLast,
-      $showLine,
-      $isExpand: expand,
-      $parentExpand,
-      $parentType
-    },
-    showCollapse && /* @__PURE__ */ import_react20.default.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconChevronRight, { size: "small" }))
-  ), /* @__PURE__ */ import_react20.default.createElement(UIPropertyRight, null, /* @__PURE__ */ import_react20.default.createElement(
-    UIPropertyMain,
-    {
-      $showCollapse: showCollapse,
-      $collapse: collapse,
-      $expand: expand,
-      type
-    },
-    /* @__PURE__ */ import_react20.default.createElement(UIRow, null, /* @__PURE__ */ import_react20.default.createElement(UIName, null, /* @__PURE__ */ import_react20.default.createElement(
-      BlurInput,
-      {
-        disabled: readonly,
-        placeholder: config?.placeholder ?? "Input Variable Name",
-        size: "small",
-        value: name,
-        onChange: (value2) => onChange("name", value2)
-      }
-    )), /* @__PURE__ */ import_react20.default.createElement(UIType, null, /* @__PURE__ */ import_react20.default.createElement(
-      InjectTypeSelector,
-      {
-        value: typeSelectorValue,
-        readonly,
-        onChange: (_value) => {
-          onChangeProps?.({
-            ...value || {},
-            ..._value
-          });
-        }
-      }
-    )), /* @__PURE__ */ import_react20.default.createElement(UIRequired, null, /* @__PURE__ */ import_react20.default.createElement(
-      import_semi_ui10.Checkbox,
-      {
-        disabled: readonly,
-        checked: isPropertyRequired,
-        onChange: (e) => onChange("isPropertyRequired", e.target.checked)
-      }
-    )), /* @__PURE__ */ import_react20.default.createElement(UIActions, null, /* @__PURE__ */ import_react20.default.createElement(
-      import_semi_ui10.IconButton,
-      {
-        disabled: readonly,
-        size: "small",
-        theme: "borderless",
-        icon: expand ? /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconExpand, { size: "small" }),
-        onClick: () => {
-          setExpand((_expand) => !_expand);
-        }
-      }
-    ), canAddField && /* @__PURE__ */ import_react20.default.createElement(
-      import_semi_ui10.IconButton,
-      {
-        disabled: readonly,
-        size: "small",
-        theme: "borderless",
-        icon: /* @__PURE__ */ import_react20.default.createElement(IconAddChildren, null),
-        onClick: () => {
-          onAddProperty();
-          setCollapse(true);
-        }
-      }
-    ), /* @__PURE__ */ import_react20.default.createElement(
-      import_semi_ui10.IconButton,
-      {
-        disabled: readonly,
-        size: "small",
-        theme: "borderless",
-        icon: /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconMinus, { size: "small" }),
-        onClick: onRemove
+  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(UITreeItemLeft, { $isLast, $showLine: $level > 0, $showCollapse: showCollapse }, showCollapse && /* @__PURE__ */ import_react20.default.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconChevronRight, { size: "small" }))), /* @__PURE__ */ import_react20.default.createElement(UITreeItemRight, null, /* @__PURE__ */ import_react20.default.createElement(UITreeItemMain, null, /* @__PURE__ */ import_react20.default.createElement(UIRow, null, /* @__PURE__ */ import_react20.default.createElement(UIName, null, /* @__PURE__ */ import_react20.default.createElement(
+    BlurInput,
+    {
+      disabled: readonly,
+      placeholder: config?.placeholder ?? "Input Variable Name",
+      size: "small",
+      value: name,
+      onChange: (value2) => onChange("name", value2)
+    }
+  )), /* @__PURE__ */ import_react20.default.createElement(UIType, null, /* @__PURE__ */ import_react20.default.createElement(
+    InjectTypeSelector,
+    {
+      value: typeSelectorValue,
+      readonly,
+      onChange: (_value) => {
+        onChangeProps?.({
+          ...value || {},
+          ..._value
+        });
       }
-    ))),
-    expand && /* @__PURE__ */ import_react20.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react20.default.createElement(UILabel, null, config?.descTitle ?? import_editor14.I18n.t("Description")), /* @__PURE__ */ import_react20.default.createElement(
-      BlurInput,
-      {
-        disabled: readonly,
-        size: "small",
-        value: description,
-        onChange: (value2) => onChange("description", value2),
-        placeholder: config?.descPlaceholder ?? import_editor14.I18n.t("Help LLM to understand the property")
+    }
+  )), /* @__PURE__ */ import_react20.default.createElement(UIRequired, null, /* @__PURE__ */ import_react20.default.createElement(
+    import_semi_ui10.Checkbox,
+    {
+      disabled: readonly,
+      checked: isPropertyRequired,
+      onChange: (e) => onChange("isPropertyRequired", e.target.checked)
+    }
+  )), /* @__PURE__ */ import_react20.default.createElement(UIActions, null, /* @__PURE__ */ import_react20.default.createElement(
+    import_semi_ui10.IconButton,
+    {
+      disabled: readonly,
+      size: "small",
+      theme: "borderless",
+      icon: expand ? /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconExpand, { size: "small" }),
+      onClick: () => {
+        setExpand((_expand) => !_expand);
       }
-    ), $level === 0 && /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? import_editor14.I18n.t("Default Value")), /* @__PURE__ */ import_react20.default.createElement(DefaultValueWrapper, null, /* @__PURE__ */ import_react20.default.createElement(
-      DefaultValue,
-      {
-        value: defaultValue,
-        schema: value,
-        type,
-        placeholder: config?.defaultValuePlaceholder ?? import_editor14.I18n.t("Default Value"),
-        jsonFormatText: config?.jsonFormatText,
-        onChange: (value2) => onChange("default", value2)
+    }
+  ), canAddField && /* @__PURE__ */ import_react20.default.createElement(
+    import_semi_ui10.IconButton,
+    {
+      disabled: readonly,
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ import_react20.default.createElement(IconAddChildren, null),
+      onClick: () => {
+        onAddProperty();
+        setCollapse(true);
       }
-    ))))
-  ), showCollapse && /* @__PURE__ */ import_react20.default.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ import_react20.default.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ import_react20.default.createElement(
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement(
+    import_semi_ui10.IconButton,
+    {
+      disabled: readonly,
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ import_react20.default.createElement(import_semi_icons3.IconMinus, { size: "small" }),
+      onClick: onRemove
+    }
+  ))), expand && /* @__PURE__ */ import_react20.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react20.default.createElement(UILabel, null, config?.descTitle ?? import_editor14.I18n.t("Description")), /* @__PURE__ */ import_react20.default.createElement(
+    BlurInput,
+    {
+      disabled: readonly,
+      size: "small",
+      value: description,
+      onChange: (value2) => onChange("description", value2),
+      placeholder: config?.descPlaceholder ?? import_editor14.I18n.t("Help LLM to understand the property")
+    }
+  ), $level === 0 && /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? import_editor14.I18n.t("Default Value")), /* @__PURE__ */ import_react20.default.createElement(DefaultValueWrapper, null, /* @__PURE__ */ import_react20.default.createElement(
+    DefaultValue,
+    {
+      value: defaultValue,
+      schema: value,
+      placeholder: config?.defaultValuePlaceholder ?? import_editor14.I18n.t("Default Value"),
+      onChange: (value2) => onChange("default", value2)
+    }
+  ))))), showCollapse && /* @__PURE__ */ import_react20.default.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ import_react20.default.createElement(UITreeItems, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ import_react20.default.createElement(
     PropertyEdit,
     {
       readonly,
@@ -1476,18 +1585,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
     }
   ))))));
 }
@@ -1505,7 +1609,7 @@ function BatchVariableSelector(props) {
 
 // src/components/dynamic-value-input/index.tsx
 var import_react23 = __toESM(require("react"));
-var import_json_schema6 = require("@flowgram.ai/json-schema");
+var import_json_schema7 = require("@flowgram.ai/json-schema");
 var import_semi_ui11 = require("@douyinfe/semi-ui");
 var import_semi_icons4 = require("@douyinfe/semi-icons");
 
@@ -1525,6 +1629,8 @@ var UIMain = import_styled_components4.default.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,
@@ -1538,17 +1644,25 @@ var UIMain = import_styled_components4.default.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 = import_styled_components4.default.div`
-  border-right: 1px solid #e5e5e5;
-
   & .semi-button {
     border-radius: 0;
   }
 `;
 var UITrigger = import_styled_components4.default.div`
-  border-left: 1px solid #e5e5e5;
-
   & .semi-button {
     border-radius: 0;
   }
@@ -1604,7 +1718,7 @@ function DynamicValueInput({
       return /* @__PURE__ */ import_react23.default.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
     }
     if (value?.type === "ref") {
-      const schema = refVariable?.type ? import_json_schema6.JsonSchemaUtils.astToSchema(refVariable?.type) : void 0;
+      const schema = refVariable?.type ? import_json_schema7.JsonSchemaUtils.astToSchema(refVariable?.type) : void 0;
       return /* @__PURE__ */ import_react23.default.createElement(TypeSelector, { value: schema, readonly: true });
     }
     return /* @__PURE__ */ import_react23.default.createElement(
@@ -1646,13 +1760,13 @@ function DynamicValueInput({
         }
       );
     }
-    const constantSchema = schemaFromProps || selectSchema || { type: "string" };
+    const constantSchema2 = schemaFromProps || selectSchema || { type: "string" };
     return /* @__PURE__ */ import_react23.default.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__ */ import_react23.default.createElement(
@@ -1713,7 +1827,7 @@ var UIValues = import_styled_components5.default.div`
 
 // src/components/condition-row/hooks/useRule.ts
 var import_react24 = require("react");
-var import_json_schema7 = require("@flowgram.ai/json-schema");
+var import_json_schema8 = require("@flowgram.ai/json-schema");
 var import_editor17 = require("@flowgram.ai/editor");
 
 // src/components/condition-row/constants.ts
@@ -1846,7 +1960,7 @@ function useRule(left, userRules) {
   }, [available, left]);
   const rule = (0, import_react24.useMemo)(() => {
     if (!variable) return void 0;
-    const schema = import_json_schema7.JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
+    const schema = import_json_schema8.JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
     return rules[schema?.type];
   }, [variable?.type, rules]);
   return { rule };
@@ -1945,13 +2059,14 @@ function ConditionRow({
 
 // src/components/batch-outputs/index.tsx
 var import_react28 = __toESM(require("react"));
+var import_editor20 = require("@flowgram.ai/editor");
 var import_semi_ui14 = require("@douyinfe/semi-ui");
 var import_semi_icons6 = require("@douyinfe/semi-icons");
 
 // src/hooks/use-object-list/index.tsx
 var import_react27 = require("react");
 var import_nanoid = require("nanoid");
-var import_lodash3 = require("lodash");
+var import_lodash4 = require("lodash");
 function genId2() {
   return (0, import_nanoid.nanoid)();
 }
@@ -1961,11 +2076,24 @@ function useObjectList({
   sortIndexKey
 }) {
   const [list, setList] = (0, import_react27.useState)([]);
+  const effectVersion = (0, import_react27.useRef)(0);
+  const changeVersion = (0, import_react27.useRef)(0);
+  const getSortIndex = (value2) => {
+    if (typeof sortIndexKey === "function") {
+      return (0, import_lodash4.get)(value2, sortIndexKey(value2)) || 0;
+    }
+    return (0, import_lodash4.get)(value2, sortIndexKey || "") || 0;
+  };
   (0, import_react27.useEffect)(() => {
+    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) => (0, import_lodash3.get)(a[1], sortIndexKey || 0) - (0, import_lodash3.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 = (0, import_lodash3.difference)(newKeys, oldKeys);
+      const addKeys = (0, import_lodash4.difference)(newKeys, oldKeys);
       return _prevList.filter((item) => !item.key || newKeys.includes(item.key)).map((item) => ({
         id: item.id,
         key: item.key,
@@ -1979,15 +2107,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) {
@@ -2001,8 +2131,9 @@ function useObjectList({
       onChange(
         Object.fromEntries(
           nextList.filter((item) => item.key).map((item) => [item.key, item.value]).map((_res, idx) => {
-            if ((0, import_lodash3.isObject)(_res[1]) && sortIndexKey) {
-              (0, import_lodash3.set)(_res[1], sortIndexKey, idx);
+            const indexKey = typeof sortIndexKey === "function" ? sortIndexKey(_res[1]) : sortIndexKey;
+            if ((0, import_lodash4.isObject)(_res[1]) && indexKey) {
+              (0, import_lodash4.set)(_res[1], indexKey, idx);
             }
             return _res;
           })
@@ -2012,6 +2143,7 @@ function useObjectList({
     });
   };
   const updateKey = (itemId, key) => {
+    changeVersion.current = changeVersion.current + 1;
     setList((prevList) => {
       const nextList = prevList.map((_item) => {
         if (_item.id === itemId) {
@@ -2031,6 +2163,7 @@ function useObjectList({
     });
   };
   const remove = (itemId) => {
+    changeVersion.current = changeVersion.current + 1;
     setList((prevList) => {
       const nextList = prevList.filter((_item) => _item.id !== itemId);
       onChange(
@@ -2087,7 +2220,7 @@ function BatchOutputs(props) {
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ import_react28.default.createElement(import_semi_ui14.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react28.default.createElement(import_semi_icons6.IconPlus, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ import_react28.default.createElement(import_semi_ui14.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react28.default.createElement(import_semi_icons6.IconPlus, null), size: "small", onClick: () => add() }, import_editor20.I18n.t("Add")));
 }
 
 // src/components/prompt-editor/index.tsx
@@ -2110,13 +2243,13 @@ var UIContainer4 = import_styled_components7.default.div`
 // src/components/prompt-editor/extensions/markdown.tsx
 var import_react29 = require("react");
 var import_react30 = require("@coze-editor/editor/react");
-var import_editor20 = require("@coze-editor/editor");
+var import_editor21 = require("@coze-editor/editor");
 var import_view2 = require("@codemirror/view");
 function MarkdownHighlight() {
   const injector = (0, import_react30.useInjector)();
   (0, import_react29.useLayoutEffect)(
     () => injector.inject([
-      import_editor20.astDecorator.whole.of((cursor) => {
+      import_editor21.astDecorator.whole.of((cursor) => {
         if (cursor.name.startsWith("ATXHeading")) {
           return {
             type: "className",
@@ -2178,13 +2311,13 @@ var language_support_default = LanguageSupport;
 // src/components/prompt-editor/extensions/jinja.tsx
 var import_react33 = require("react");
 var import_react34 = require("@coze-editor/editor/react");
-var import_editor21 = require("@coze-editor/editor");
+var import_editor22 = require("@coze-editor/editor");
 var import_view3 = require("@codemirror/view");
 function JinjaHighlight() {
   const injector = (0, import_react34.useInjector)();
   (0, import_react33.useLayoutEffect)(
     () => injector.inject([
-      import_editor21.astDecorator.whole.of((cursor) => {
+      import_editor22.astDecorator.whole.of((cursor) => {
         if (cursor.name === "JinjaStatementStart" || cursor.name === "JinjaStatementEnd") {
           return {
             type: "className",
@@ -2233,7 +2366,8 @@ function PromptEditor(props) {
     style,
     hasError,
     children,
-    disableMarkdownHighlight
+    disableMarkdownHighlight,
+    options
   } = props || {};
   const editorRef = (0, import_react35.useRef)(null);
   (0, import_react35.useEffect)(() => {
@@ -2252,7 +2386,8 @@ function PromptEditor(props) {
       options: {
         readOnly: readonly,
         editable: !readonly,
-        placeholder
+        placeholder,
+        ...options
       },
       onChange: (e) => {
         onChange({ type: "template", content: e.value });
@@ -2324,8 +2459,8 @@ function VariableTree() {
 // src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
 var import_react_dom = __toESM(require("react-dom"));
 var import_react39 = __toESM(require("react"));
-var import_lodash4 = require("lodash");
-var import_editor22 = require("@flowgram.ai/editor");
+var import_lodash5 = require("lodash");
+var import_editor23 = require("@flowgram.ai/editor");
 var import_semi_ui17 = require("@douyinfe/semi-ui");
 var import_semi_icons7 = require("@douyinfe/semi-icons");
 var import_react40 = require("@coze-editor/editor/react");
@@ -2372,7 +2507,7 @@ var UIPopoverContent2 = import_styled_components8.default.div`
 var VariableTagWidget = class extends import_view4.WidgetType {
   constructor({ keyPath, scope }) {
     super();
-    this.toDispose = new import_editor22.DisposableCollection();
+    this.toDispose = new import_editor23.DisposableCollection();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
         return /* @__PURE__ */ import_react39.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
@@ -2392,7 +2527,7 @@ var VariableTagWidget = class extends import_view4.WidgetType {
       );
       return;
     }
-    const rootField = (0, import_lodash4.last)(v.parentFields) || v;
+    const rootField = (0, import_lodash5.last)(v.parentFields) || v;
     const isRoot = v.parentFields.length === 0;
     const rootTitle = /* @__PURE__ */ import_react39.default.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? "" : "-"} ` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
@@ -2410,7 +2545,7 @@ var VariableTagWidget = class extends import_view4.WidgetType {
     const dom = document.createElement("span");
     this.rootDOM = dom;
     this.toDispose.push(
-      import_editor22.Disposable.create(() => {
+      import_editor23.Disposable.create(() => {
         import_react_dom.default.unmountComponentAtNode(this.rootDOM);
       })
     );
@@ -2427,7 +2562,7 @@ var VariableTagWidget = class extends import_view4.WidgetType {
     return dom;
   }
   eq(other) {
-    return (0, import_lodash4.isEqual)(this.keyPath, other.keyPath);
+    return (0, import_lodash5.isEqual)(this.keyPath, other.keyPath);
   }
   ignoreEvent() {
     return false;
@@ -2438,7 +2573,7 @@ var VariableTagWidget = class extends import_view4.WidgetType {
 };
 function VariableTagInject() {
   const injector = (0, import_react40.useInjector)();
-  const scope = (0, import_editor22.useCurrentScope)();
+  const scope = (0, import_editor23.useCurrentScope)();
   (0, import_react39.useLayoutEffect)(() => {
     const atMatcher = new import_view4.MatchDecorator({
       regexp: /\{\{([^\}]+)\}\}/g,
@@ -2489,16 +2624,16 @@ var import_react44 = require("@coze-editor/editor/react");
 
 // src/components/prompt-editor-with-inputs/inputs-picker.tsx
 var import_react42 = __toESM(require("react"));
-var import_lodash5 = require("lodash");
-var import_editor23 = require("@flowgram.ai/editor");
+var import_lodash6 = require("lodash");
+var import_editor24 = require("@flowgram.ai/editor");
 var import_semi_ui18 = require("@douyinfe/semi-ui");
 function InputsPicker({
   inputsValues,
   onSelect
 }) {
-  const available = (0, import_editor23.useScopeAvailable)();
+  const available = (0, import_editor24.useScopeAvailable)();
   const getArrayDrilldown = (type, depth = 1) => {
-    if (import_editor23.ASTMatch.isArray(type.items)) {
+    if (import_editor24.ASTMatch.isArray(type.items)) {
       return getArrayDrilldown(type.items, depth + 1);
     }
     return { type: type.items, depth };
@@ -2506,12 +2641,12 @@ function InputsPicker({
   const renderVariable = (variable, keyPath) => {
     let type = variable?.type;
     let children;
-    if (import_editor23.ASTMatch.isObject(type)) {
+    if (import_editor24.ASTMatch.isObject(type)) {
       children = (type.properties || []).map((_property) => renderVariable(_property, [...keyPath, _property.key])).filter(Boolean);
     }
-    if (import_editor23.ASTMatch.isArray(type)) {
+    if (import_editor24.ASTMatch.isArray(type)) {
       const drilldown = getArrayDrilldown(type);
-      if (import_editor23.ASTMatch.isObject(drilldown.type)) {
+      if (import_editor24.ASTMatch.isObject(drilldown.type)) {
         children = (drilldown.type.properties || []).map(
           (_property) => renderVariable(_property, [
             ...keyPath,
@@ -2524,7 +2659,7 @@ function InputsPicker({
     const key = keyPath.map((_key, idx) => _key === "[0]" || idx === 0 ? _key : `.${_key}`).join("");
     return {
       key,
-      label: (0, import_lodash5.last)(keyPath),
+      label: (0, import_lodash6.last)(keyPath),
       value: key,
       children
     };
@@ -2670,8 +2805,8 @@ function VariableTree2() {
 // src/components/json-editor-with-variables/extensions/variable-tag.tsx
 var import_react48 = __toESM(require("react"));
 var import_client = require("react-dom/client");
-var import_lodash6 = require("lodash");
-var import_editor24 = require("@flowgram.ai/editor");
+var import_lodash7 = require("lodash");
+var import_editor25 = require("@flowgram.ai/editor");
 var import_semi_ui22 = require("@douyinfe/semi-ui");
 var import_semi_icons8 = require("@douyinfe/semi-icons");
 var import_react49 = require("@coze-editor/editor/react");
@@ -2718,7 +2853,7 @@ var UIPopoverContent3 = import_styled_components9.default.div`
 var VariableTagWidget2 = class extends import_view5.WidgetType {
   constructor({ keyPath, scope }) {
     super();
-    this.toDispose = new import_editor24.DisposableCollection();
+    this.toDispose = new import_editor25.DisposableCollection();
     this.renderIcon = (icon) => {
       if (typeof icon === "string") {
         return /* @__PURE__ */ import_react48.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
@@ -2735,7 +2870,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
       );
       return;
     }
-    const rootField = (0, import_lodash6.last)(v.parentFields);
+    const rootField = (0, import_lodash7.last)(v.parentFields);
     const rootTitle = /* @__PURE__ */ import_react48.default.createElement(UIRootTitle3, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.root.render(
@@ -2752,7 +2887,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
     const dom = document.createElement("span");
     this.root = (0, import_client.createRoot)(dom);
     this.toDispose.push(
-      import_editor24.Disposable.create(() => {
+      import_editor25.Disposable.create(() => {
         this.root.unmount();
       })
     );
@@ -2769,7 +2904,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
     return dom;
   }
   eq(other) {
-    return (0, import_lodash6.isEqual)(this.keyPath, other.keyPath);
+    return (0, import_lodash7.isEqual)(this.keyPath, other.keyPath);
   }
   ignoreEvent() {
     return false;
@@ -2780,7 +2915,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
 };
 function VariableTagInject2() {
   const injector = (0, import_react49.useInjector)();
-  const scope = (0, import_editor24.useCurrentScope)();
+  const scope = (0, import_editor25.useCurrentScope)();
   (0, import_react48.useLayoutEffect)(() => {
     const atMatcher = new import_view5.MatchDecorator({
       regexp: /\{\{([^\}]+)\}\}/g,
@@ -2863,8 +2998,8 @@ function JsonEditorWithVariables(props) {
 }
 
 // src/components/inputs-values/index.tsx
-var import_react52 = __toESM(require("react"));
-var import_editor25 = require("@flowgram.ai/editor");
+var import_react51 = __toESM(require("react"));
+var import_editor26 = require("@flowgram.ai/editor");
 var import_semi_ui23 = require("@douyinfe/semi-ui");
 var import_semi_icons9 = require("@douyinfe/semi-icons");
 
@@ -2878,31 +3013,10 @@ var UIRows2 = import_styled_components10.default.div`
 `;
 var UIRow3 = import_styled_components10.default.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 5px;
 `;
 
-// src/components/inputs-values/components/blur-input.tsx
-var import_react51 = __toESM(require("react"));
-var import_input2 = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
-function BlurInput2(props) {
-  const [value, setValue] = (0, import_react51.useState)("");
-  (0, import_react51.useEffect)(() => {
-    setValue(props.value);
-  }, [props.value]);
-  return /* @__PURE__ */ import_react51.default.createElement(
-    import_input2.default,
-    {
-      ...props,
-      value,
-      onChange: (value2) => {
-        setValue(value2);
-      },
-      onBlur: (e) => props.onChange?.(value, e)
-    }
-  );
-}
-
 // src/components/inputs-values/index.tsx
 function InputsValues({
   value,
@@ -2918,17 +3032,17 @@ function InputsValues({
     onChange,
     sortIndexKey: "extra.index"
   });
-  return /* @__PURE__ */ import_react52.default.createElement("div", null, /* @__PURE__ */ import_react52.default.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ import_react52.default.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ import_react52.default.createElement(
-    BlurInput2,
+  return /* @__PURE__ */ import_react51.default.createElement("div", null, /* @__PURE__ */ import_react51.default.createElement(UIRows2, { style }, list.map((item) => /* @__PURE__ */ import_react51.default.createElement(UIRow3, { key: item.id }, /* @__PURE__ */ import_react51.default.createElement(
+    BlurInput,
     {
       style: { width: 100, minWidth: 100, maxWidth: 100 },
       disabled: readonly,
       size: "small",
       value: item.key,
       onChange: (v) => updateKey(item.id, v),
-      placeholder: import_editor25.I18n.t("Input Key")
+      placeholder: import_editor26.I18n.t("Input Key")
     }
-  ), /* @__PURE__ */ import_react52.default.createElement(
+  ), /* @__PURE__ */ import_react51.default.createElement(
     InjectDynamicValueInput,
     {
       style: { flexGrow: 1 },
@@ -2942,20 +3056,20 @@ function InputsValues({
         strategies: [...constantProps?.strategies || []]
       }
     }
-  ), /* @__PURE__ */ import_react52.default.createElement(
+  ), /* @__PURE__ */ import_react51.default.createElement(
     import_semi_ui23.IconButton,
     {
       disabled: readonly,
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react52.default.createElement(import_semi_icons9.IconDelete, { size: "small" }),
+      icon: /* @__PURE__ */ import_react51.default.createElement(import_semi_icons9.IconDelete, { size: "small" }),
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ import_react52.default.createElement(import_semi_ui23.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react52.default.createElement(import_semi_icons9.IconPlus, null), size: "small", onClick: add }, "Add"));
+  )))), /* @__PURE__ */ import_react51.default.createElement(import_semi_ui23.Button, { disabled: readonly, icon: /* @__PURE__ */ import_react51.default.createElement(import_semi_icons9.IconPlus, null), size: "small", onClick: () => add() }, import_editor26.I18n.t("Add")));
 }
 
 // src/components/display-schema-tree/index.tsx
-var import_react53 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 
 // src/components/display-schema-tree/styles.tsx
 var import_styled_components11 = __toESM(require("styled-components"));
@@ -3039,7 +3153,7 @@ var TreeItem = import_styled_components11.default.div`
 
 // src/components/display-schema-tree/index.tsx
 function DisplaySchemaTree(props) {
-  return /* @__PURE__ */ import_react53.default.createElement(SchemaTree, { ...props });
+  return /* @__PURE__ */ import_react52.default.createElement(SchemaTree, { ...props });
 }
 function SchemaTree(props) {
   const {
@@ -3055,18 +3169,18 @@ function SchemaTree(props) {
   const icon = typeManager?.getDisplayIcon(schema);
   let properties = drilldown && config ? config.getTypeSchemaProperties(schema) : {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ import_react53.default.createElement(TreeItem, { depth, key: parentKey || "root" }, /* @__PURE__ */ import_react53.default.createElement(TreeRow, null, depth !== 0 && /* @__PURE__ */ import_react53.default.createElement(HorizontalLine, null), showIcon && icon && import_react53.default.cloneElement(icon, {
+  return /* @__PURE__ */ import_react52.default.createElement(TreeItem, { depth, key: parentKey || "root" }, /* @__PURE__ */ import_react52.default.createElement(TreeRow, null, depth !== 0 && /* @__PURE__ */ import_react52.default.createElement(HorizontalLine, null), showIcon && icon && import_react52.default.cloneElement(icon, {
     className: "tree-icon"
-  }), /* @__PURE__ */ import_react53.default.createElement(TreeTitle, null, parentKey ? /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, `${parentKey} (`, title, ")") : title)), childEntries?.length ? /* @__PURE__ */ import_react53.default.createElement(TreeLevel, null, childEntries.map(([key, value]) => /* @__PURE__ */ import_react53.default.createElement(SchemaTree, { key, ...props, parentKey: key, value, depth: depth + 1 }))) : null);
+  }), /* @__PURE__ */ import_react52.default.createElement(TreeTitle, null, parentKey ? /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, `${parentKey} (`, title, ")") : title)), childEntries?.length ? /* @__PURE__ */ import_react52.default.createElement(TreeLevel, null, childEntries.map(([key, value]) => /* @__PURE__ */ import_react52.default.createElement(SchemaTree, { key, ...props, parentKey: key, value, depth: depth + 1 }))) : null);
 }
 
 // src/components/display-outputs/index.tsx
-var import_react55 = __toESM(require("react"));
-var import_json_schema8 = require("@flowgram.ai/json-schema");
-var import_editor26 = require("@flowgram.ai/editor");
+var import_react54 = __toESM(require("react"));
+var import_json_schema9 = require("@flowgram.ai/json-schema");
+var import_editor27 = require("@flowgram.ai/editor");
 
 // src/components/display-schema-tag/index.tsx
-var import_react54 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_semi_ui25 = require("@douyinfe/semi-ui");
 
 // src/components/display-schema-tag/styles.ts
@@ -3095,14 +3209,14 @@ var TitleSpan = import_styled_components12.default.span`
 function DisplaySchemaTag({ value = {}, showIconInTree, title, warning }) {
   const typeManager = useTypeManager();
   const icon = typeManager?.getDisplayIcon(value) || typeManager.getDisplayIcon({ type: "unknown" });
-  return /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(
     import_semi_ui25.Popover,
     {
-      content: /* @__PURE__ */ import_react54.default.createElement(PopoverContent, null, /* @__PURE__ */ import_react54.default.createElement(DisplaySchemaTree, { value, typeManager, showIcon: showIconInTree }))
+      content: /* @__PURE__ */ import_react53.default.createElement(PopoverContent, null, /* @__PURE__ */ import_react53.default.createElement(DisplaySchemaTree, { value, typeManager, showIcon: showIconInTree }))
     },
-    /* @__PURE__ */ import_react54.default.createElement(StyledTag, { color: warning ? "amber" : "white" }, icon && import_react54.default.cloneElement(icon, {
+    /* @__PURE__ */ import_react53.default.createElement(StyledTag, { color: warning ? "amber" : "white" }, icon && import_react53.default.cloneElement(icon, {
       className: "tag-icon"
-    }), title && /* @__PURE__ */ import_react54.default.createElement(TitleSpan, null, title))
+    }), title && /* @__PURE__ */ import_react53.default.createElement(TitleSpan, null, title))
   );
 }
 
@@ -3116,9 +3230,9 @@ var DisplayOutputsWrapper = import_styled_components13.default.div`
 
 // src/components/display-outputs/index.tsx
 function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
-  const scope = (0, import_editor26.useCurrentScope)();
-  const refresh = (0, import_editor26.useRefresh)();
-  (0, import_react55.useEffect)(() => {
+  const scope = (0, import_editor27.useCurrentScope)();
+  const refresh = (0, import_editor27.useRefresh)();
+  (0, import_react54.useEffect)(() => {
     if (!displayFromScope) {
       return () => null;
     }
@@ -3132,12 +3246,12 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
   const properties = displayFromScope ? scope.output.variables?.reduce((acm, curr) => {
     acm = {
       ...acm,
-      ...import_json_schema8.JsonSchemaUtils.astToSchema(curr.type)?.properties || {}
+      ...import_json_schema9.JsonSchemaUtils.astToSchema(curr.type)?.properties || {}
     };
     return acm;
   }, {}) : value?.properties || {};
   const childEntries = Object.entries(properties || {});
-  return /* @__PURE__ */ import_react55.default.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(DisplayOutputsWrapper, null, childEntries.map(([key, schema]) => /* @__PURE__ */ import_react54.default.createElement(
     DisplaySchemaTag,
     {
       key,
@@ -3150,15 +3264,15 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
 }
 
 // src/components/display-flow-value/index.tsx
-var import_react56 = __toESM(require("react"));
-var import_json_schema9 = require("@flowgram.ai/json-schema");
-var import_editor27 = require("@flowgram.ai/editor");
+var import_react55 = __toESM(require("react"));
+var import_json_schema10 = require("@flowgram.ai/json-schema");
+var import_editor28 = require("@flowgram.ai/editor");
 function DisplayFlowValue({ value, title, showIconInTree }) {
-  const available = (0, import_editor27.useScopeAvailable)();
+  const available = (0, import_editor28.useScopeAvailable)();
   const variable = value?.type === "ref" ? available.getByKeyPath(value?.content) : void 0;
-  const schema = (0, import_react56.useMemo)(() => {
+  const schema = (0, import_react55.useMemo)(() => {
     if (value?.type === "ref") {
-      return import_json_schema9.JsonSchemaUtils.astToSchema(variable?.type);
+      return import_json_schema10.JsonSchemaUtils.astToSchema(variable?.type);
     }
     if (value?.type === "template") {
       return { type: "string" };
@@ -3179,7 +3293,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
     }
     return { type: "unknown" };
   }, [value, variable?.hash]);
-  return /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(
     DisplaySchemaTag,
     {
       title,
@@ -3191,7 +3305,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
 }
 
 // src/components/display-inputs-values/index.tsx
-var import_react57 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 
 // src/components/display-inputs-values/styles.ts
 var import_styled_components14 = __toESM(require("styled-components"));
@@ -3204,30 +3318,30 @@ var DisplayInputsWrapper = import_styled_components14.default.div`
 // src/components/display-inputs-values/index.tsx
 function DisplayInputsValues({ value, showIconInTree }) {
   const childEntries = Object.entries(value || {});
-  return /* @__PURE__ */ import_react57.default.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ import_react57.default.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
+  return /* @__PURE__ */ import_react56.default.createElement(DisplayInputsWrapper, null, childEntries.map(([key, value2]) => /* @__PURE__ */ import_react56.default.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree })));
 }
 
 // src/components/assign-rows/index.tsx
-var import_react60 = __toESM(require("react"));
-var import_editor28 = require("@flowgram.ai/editor");
+var import_react59 = __toESM(require("react"));
+var import_editor29 = require("@flowgram.ai/editor");
 var import_semi_ui27 = require("@douyinfe/semi-ui");
 var import_semi_icons11 = require("@douyinfe/semi-icons");
 
 // src/components/assign-row/index.tsx
-var import_react59 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_semi_ui26 = require("@douyinfe/semi-ui");
 var import_semi_icons10 = require("@douyinfe/semi-icons");
 
 // src/components/assign-row/components/blur-input.tsx
-var import_react58 = __toESM(require("react"));
-var import_input3 = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
-function BlurInput3(props) {
-  const [value, setValue] = (0, import_react58.useState)("");
-  (0, import_react58.useEffect)(() => {
+var import_react57 = __toESM(require("react"));
+var import_input2 = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
+function BlurInput2(props) {
+  const [value, setValue] = (0, import_react57.useState)("");
+  (0, import_react57.useEffect)(() => {
     setValue(props.value);
   }, [props.value]);
-  return /* @__PURE__ */ import_react58.default.createElement(
-    import_input3.default,
+  return /* @__PURE__ */ import_react57.default.createElement(
+    import_input2.default,
     {
       ...props,
       value,
@@ -3249,7 +3363,7 @@ function AssignRow(props) {
     onDelete,
     readonly
   } = props;
-  return /* @__PURE__ */ import_react59.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ import_react59.default.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react58.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5 } }, /* @__PURE__ */ import_react58.default.createElement("div", { style: { width: 150, minWidth: 150, maxWidth: 150 } }, value?.operator === "assign" ? /* @__PURE__ */ import_react58.default.createElement(
     InjectVariableSelector,
     {
       style: { width: "100%", height: 26 },
@@ -3260,8 +3374,8 @@ function AssignRow(props) {
         left: { type: "ref", content: v }
       })
     }
-  ) : /* @__PURE__ */ import_react59.default.createElement(
-    BlurInput3,
+  ) : /* @__PURE__ */ import_react58.default.createElement(
+    BlurInput2,
     {
       style: { height: 26 },
       size: "small",
@@ -3272,7 +3386,7 @@ function AssignRow(props) {
         left: v
       })
     }
-  )), /* @__PURE__ */ import_react59.default.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ import_react59.default.createElement(
+  )), /* @__PURE__ */ import_react58.default.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ import_react58.default.createElement(
     InjectDynamicValueInput,
     {
       readonly,
@@ -3282,12 +3396,12 @@ function AssignRow(props) {
         right: v
       })
     }
-  )), onDelete && /* @__PURE__ */ import_react59.default.createElement("div", null, /* @__PURE__ */ import_react59.default.createElement(
+  )), onDelete && /* @__PURE__ */ import_react58.default.createElement("div", null, /* @__PURE__ */ import_react58.default.createElement(
     import_semi_ui26.IconButton,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react59.default.createElement(import_semi_icons10.IconMinus, null),
+      icon: /* @__PURE__ */ import_react58.default.createElement(import_semi_icons10.IconMinus, null),
       onClick: () => onDelete?.()
     }
   )));
@@ -3296,7 +3410,7 @@ function AssignRow(props) {
 // src/components/assign-rows/index.tsx
 function AssignRows(props) {
   const { name, readonly } = props;
-  return /* @__PURE__ */ import_react60.default.createElement(import_editor28.FieldArray, { name }, ({ field }) => /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, field.map((childField, index) => /* @__PURE__ */ import_react60.default.createElement(
+  return /* @__PURE__ */ import_react59.default.createElement(import_editor29.FieldArray, { name }, ({ field }) => /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, field.map((childField, index) => /* @__PURE__ */ import_react59.default.createElement(
     AssignRow,
     {
       key: childField.key,
@@ -3307,51 +3421,345 @@ function AssignRows(props) {
       },
       onDelete: () => field.remove(index)
     }
-  )), /* @__PURE__ */ import_react60.default.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ import_react60.default.createElement(
+  )), /* @__PURE__ */ import_react59.default.createElement("div", { style: { display: "flex", gap: 5 } }, /* @__PURE__ */ import_react59.default.createElement(
     import_semi_ui27.Button,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react60.default.createElement(import_semi_icons11.IconPlus, null),
+      icon: /* @__PURE__ */ import_react59.default.createElement(import_semi_icons11.IconPlus, null),
       onClick: () => field.append({ operator: "assign" })
     },
     "Assign"
-  ), /* @__PURE__ */ import_react60.default.createElement(
+  ), /* @__PURE__ */ import_react59.default.createElement(
     import_semi_ui27.Button,
     {
       size: "small",
       theme: "borderless",
-      icon: /* @__PURE__ */ import_react60.default.createElement(import_semi_icons11.IconPlus, null),
+      icon: /* @__PURE__ */ import_react59.default.createElement(import_semi_icons11.IconPlus, null),
       onClick: () => field.append({ operator: "declare" })
     },
     "Declaration"
   ))));
 }
 
+// src/components/inputs-values-tree/index.tsx
+var import_react63 = __toESM(require("react"));
+var import_editor31 = require("@flowgram.ai/editor");
+var import_semi_ui29 = require("@douyinfe/semi-ui");
+var import_semi_icons14 = require("@douyinfe/semi-icons");
+
+// src/components/inputs-values-tree/styles.tsx
+var import_react60 = __toESM(require("react"));
+var import_styled_components15 = __toESM(require("styled-components"));
+var import_semi_icons12 = __toESM(require("@douyinfe/semi-icons"));
+var UIContainer5 = import_styled_components15.default.div``;
+var UIRow4 = import_styled_components15.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+`;
+var UICollapseTrigger2 = import_styled_components15.default.div`
+  cursor: pointer;
+  margin-right: 5px;
+`;
+var UITreeItems2 = import_styled_components15.default.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  ${({ $shrink }) => $shrink && import_styled_components15.css`
+      padding-left: 3px;
+      margin-top: 10px;
+    `}
+`;
+var UITreeItemLeft2 = import_styled_components15.default.div`
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+
+  ${({ $showLine, $isLast, $showCollapse }) => {
+  let height = $isLast ? "24px" : "100%";
+  let width = $showCollapse ? "12px" : "30px";
+  return $showLine && import_styled_components15.css`
+        &::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 = import_styled_components15.default.div`
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+var UITreeItemMain2 = import_styled_components15.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+`;
+var UICollapsible2 = import_styled_components15.default.div`
+  display: none;
+
+  ${({ $collapse }) => $collapse && import_styled_components15.css`
+      display: block;
+    `}
+`;
+var UIActions2 = import_styled_components15.default.div`
+  white-space: nowrap;
+`;
+var iconAddChildrenSvg2 = /* @__PURE__ */ import_react60.default.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__ */ import_react60.default.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__ */ import_react60.default.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__ */ import_react60.default.createElement(import_semi_icons12.default, { size: "small", svg: iconAddChildrenSvg2 });
+
+// src/components/inputs-values-tree/row.tsx
+var import_react62 = __toESM(require("react"));
+var import_editor30 = require("@flowgram.ai/editor");
+var import_semi_ui28 = require("@douyinfe/semi-ui");
+var import_semi_icons13 = require("@douyinfe/semi-icons");
+
+// src/components/inputs-values-tree/hooks/use-child-list.tsx
+var import_react61 = require("react");
+var import_lodash8 = require("lodash");
+function useChildList(value, onChange) {
+  const canAddField = (0, import_react61.useMemo)(() => {
+    if (!(0, import_lodash8.isPlainObject)(value)) {
+      return false;
+    }
+    if (FlowValueUtils.isFlowValue(value)) {
+      return FlowValueUtils.isConstant(value) && value?.schema?.type === "object";
+    }
+    return true;
+  }, [value]);
+  const objectListValue = (0, import_react61.useMemo)(() => {
+    if ((0, import_lodash8.isPlainObject)(value)) {
+      if (FlowValueUtils.isFlowValue(value)) {
+        return void 0;
+      }
+      return value;
+    }
+    return void 0;
+  }, [value]);
+  console.log("debugger objectListValue", objectListValue);
+  const { list, add, updateKey, updateValue, remove } = useObjectList({
+    value: objectListValue,
+    onChange: (value2) => {
+      onChange?.(value2);
+    },
+    sortIndexKey: (value2) => FlowValueUtils.isFlowValue(value2) ? "extra.index" : ""
+  });
+  return {
+    canAddField,
+    list,
+    add,
+    updateKey,
+    updateValue,
+    remove
+  };
+}
+
+// src/components/inputs-values-tree/row.tsx
+var AddObjectChildStrategy = {
+  hit: (schema) => schema.type === "object",
+  Renderer: () => /* @__PURE__ */ import_react62.default.createElement(
+    import_semi_ui28.Input,
+    {
+      size: "small",
+      disabled: true,
+      style: { pointerEvents: "none" },
+      value: import_editor30.I18n.t("Configure via child fields")
+    }
+  )
+};
+function InputValueRow(props) {
+  const {
+    keyName,
+    value,
+    $level = 0,
+    onUpdateKey,
+    onUpdateValue,
+    $isLast,
+    onRemove,
+    constantProps,
+    hasError,
+    readonly
+  } = props;
+  const [collapse, setCollapse] = (0, import_react62.useState)(false);
+  const { canAddField, list, add, updateKey, updateValue, remove } = useChildList(
+    value,
+    onUpdateValue
+  );
+  const hasChildren = canAddField && list.length > 0;
+  const flowDisplayValue = hasChildren ? { type: "constant", schema: { type: " object" } } : value;
+  return /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, /* @__PURE__ */ import_react62.default.createElement(UITreeItemLeft2, { $isLast, $showLine: $level > 0, $showCollapse: hasChildren }, hasChildren && /* @__PURE__ */ import_react62.default.createElement(UICollapseTrigger2, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react62.default.createElement(import_semi_icons13.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react62.default.createElement(import_semi_icons13.IconChevronRight, { size: "small" }))), /* @__PURE__ */ import_react62.default.createElement(UITreeItemRight2, null, /* @__PURE__ */ import_react62.default.createElement(UITreeItemMain2, null, /* @__PURE__ */ import_react62.default.createElement(UIRow4, null, /* @__PURE__ */ import_react62.default.createElement(
+    BlurInput,
+    {
+      style: { width: 100, minWidth: 100, maxWidth: 100 },
+      disabled: readonly,
+      size: "small",
+      value: keyName,
+      onChange: (v) => onUpdateKey?.(v),
+      placeholder: import_editor30.I18n.t("Input Key")
+    }
+  ), /* @__PURE__ */ import_react62.default.createElement(
+    InjectDynamicValueInput,
+    {
+      style: { flexGrow: 1 },
+      readonly,
+      value: flowDisplayValue,
+      onChange: (v) => onUpdateValue(v),
+      hasError,
+      constantProps: {
+        ...constantProps,
+        strategies: [
+          ...hasChildren ? [AddObjectChildStrategy] : [],
+          ...constantProps?.strategies || []
+        ]
+      }
+    }
+  ), /* @__PURE__ */ import_react62.default.createElement(UIActions2, null, canAddField && /* @__PURE__ */ import_react62.default.createElement(
+    import_semi_ui28.IconButton,
+    {
+      disabled: readonly,
+      size: "small",
+      theme: "borderless",
+      icon: /* @__PURE__ */ import_react62.default.createElement(IconAddChildren2, null),
+      onClick: () => {
+        add();
+        setCollapse(true);
+      }
+    }
+  ), /* @__PURE__ */ import_react62.default.createElement(
+    import_semi_ui28.IconButton,
+    {
+      disabled: readonly,
+      theme: "borderless",
+      icon: /* @__PURE__ */ import_react62.default.createElement(import_semi_icons13.IconDelete, { size: "small" }),
+      size: "small",
+      onClick: () => onRemove?.()
+    }
+  )))), hasChildren && /* @__PURE__ */ import_react62.default.createElement(UICollapsible2, { $collapse: collapse }, /* @__PURE__ */ import_react62.default.createElement(UITreeItems2, { $shrink: true }, list.map((_item, index) => /* @__PURE__ */ import_react62.default.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__ */ import_react63.default.createElement("div", null, /* @__PURE__ */ import_react63.default.createElement(UITreeItems2, null, list.map((item) => /* @__PURE__ */ import_react63.default.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__ */ import_react63.default.createElement(
+    import_semi_ui29.Button,
+    {
+      style: { marginTop: 10, marginLeft: 16 },
+      disabled: readonly,
+      icon: /* @__PURE__ */ import_react63.default.createElement(import_semi_icons14.IconPlus, null),
+      size: "small",
+      onClick: add
+    },
+    import_editor31.I18n.t("Add")
+  ));
+}
+
 // src/effects/provide-batch-input/index.ts
-var import_editor29 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor29.createEffectFromVariableProvider)({
+var import_editor32 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor32.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor29.ASTFactory.createVariableDeclaration({
+    import_editor32.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor29.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor32.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor29.ASTFactory.createObject({
+      type: import_editor32.ASTFactory.createObject({
         properties: [
-          import_editor29.ASTFactory.createProperty({
+          import_editor32.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor29.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor29.ASTFactory.createKeyPathExpression({
+            initializer: import_editor32.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor32.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor29.ASTFactory.createProperty({
+          import_editor32.ASTFactory.createProperty({
             key: "index",
-            type: import_editor29.ASTFactory.createNumber()
+            type: import_editor32.ASTFactory.createNumber()
           })
         ]
       })
@@ -3360,14 +3768,13 @@ var provideBatchInputEffect = (0, import_editor29.createEffectFromVariableProvid
 });
 
 // src/effects/auto-rename-ref/index.ts
-var import_lodash7 = require("lodash");
-var import_editor30 = require("@flowgram.ai/editor");
+var import_editor33 = require("@flowgram.ai/editor");
 var autoRenameRefEffect = [
   {
-    event: import_editor30.DataEvent.onValueInit,
+    event: import_editor33.DataEvent.onValueInit,
     effect: (params) => {
       const { context, form, name } = params;
-      const renameService = context.node.getService(import_editor30.VariableFieldKeyRenameService);
+      const renameService = context.node.getService(import_editor33.VariableFieldKeyRenameService);
       const disposable = renameService.onRename(({ before, after }) => {
         const beforeKeyPath = [
           ...before.parentFields.map((_field) => _field.key).reverse(),
@@ -3384,7 +3791,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)) {
@@ -3414,65 +3821,38 @@ var autoRenameRefEffect = [
 function isKeyPathMatch(keyPath = [], targetKeyPath) {
   return targetKeyPath.every((_key, index) => _key === keyPath[index]);
 }
-function getTemplateKeyPaths(value) {
-  const keyPathReg = /{{(.*?)}}/g;
-  return (0, import_lodash7.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 ((0, import_lodash7.isObject)(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 ((0, import_lodash7.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
-var import_json_schema10 = require("@flowgram.ai/json-schema");
-var import_editor31 = require("@flowgram.ai/editor");
-var provideJsonSchemaOutputs = (0, import_editor31.createEffectFromVariableProvider)({
+var import_json_schema11 = require("@flowgram.ai/json-schema");
+var import_editor34 = require("@flowgram.ai/editor");
+var provideJsonSchemaOutputs = (0, import_editor34.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor31.ASTFactory.createVariableDeclaration({
+    import_editor34.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor31.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
+        title: (0, import_editor34.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_json_schema10.JsonSchemaUtils.schemaToAST(value)
+      type: import_json_schema11.JsonSchemaUtils.schemaToAST(value)
     })
   ]
 });
 
 // src/effects/sync-variable-title/index.ts
-var import_editor32 = require("@flowgram.ai/editor");
+var import_editor35 = require("@flowgram.ai/editor");
 var syncVariableTitle = [
   {
-    event: import_editor32.DataEvent.onValueChange,
+    event: import_editor35.DataEvent.onValueChange,
     effect: ({ value, context }) => {
-      context.node.getData(import_editor32.FlowNodeVariableData).allScopes.forEach((_scope) => {
+      context.node.getData(import_editor35.FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
             ..._var.meta || {},
@@ -3486,17 +3866,17 @@ var syncVariableTitle = [
 ];
 
 // src/effects/validate-when-variable-sync/index.ts
-var import_lodash8 = require("lodash");
-var import_editor33 = require("@flowgram.ai/editor");
+var import_lodash9 = require("lodash");
+var import_editor36 = require("@flowgram.ai/editor");
 var validateWhenVariableSync = ({
   scope
 } = {}) => [
   {
-    event: import_editor33.DataEvent.onValueInit,
+    event: import_editor36.DataEvent.onValueInit,
     effect: ({ context, form }) => {
-      const nodeScope = scope === "private" ? (0, import_editor33.getNodePrivateScope)(context.node) : (0, import_editor33.getNodeScope)(context.node);
+      const nodeScope = scope === "private" ? (0, import_editor36.getNodePrivateScope)(context.node) : (0, import_editor36.getNodeScope)(context.node);
       const disposable = nodeScope.available.onListOrAnyVarChange(() => {
-        if (!(0, import_lodash8.isEmpty)(form.state.errors)) {
+        if (!(0, import_lodash9.isEmpty)(form.state.errors)) {
           form.validate();
         }
       });
@@ -3506,16 +3886,16 @@ var validateWhenVariableSync = ({
 ];
 
 // src/effects/listen-ref-value-change/index.ts
-var import_editor34 = require("@flowgram.ai/editor");
+var import_editor37 = require("@flowgram.ai/editor");
 var listenRefValueChange = (cb) => [
   {
-    event: import_editor34.DataEvent.onValueInitOrChange,
+    event: import_editor37.DataEvent.onValueInitOrChange,
     effect: (params) => {
       const { context, value } = params;
       if (value?.type !== "ref") {
         return () => null;
       }
-      const disposable = (0, import_editor34.getNodeScope)(context.node).available.trackByKeyPath(
+      const disposable = (0, import_editor37.getNodeScope)(context.node).available.trackByKeyPath(
         value?.content || [],
         (v) => {
           cb({ ...params, variable: v });
@@ -3529,20 +3909,20 @@ var listenRefValueChange = (cb) => [
 ];
 
 // src/effects/listen-ref-schema-change/index.ts
-var import_json_schema11 = require("@flowgram.ai/json-schema");
-var import_editor35 = require("@flowgram.ai/editor");
+var import_json_schema12 = require("@flowgram.ai/json-schema");
+var import_editor38 = require("@flowgram.ai/editor");
 var listenRefSchemaChange = (cb) => [
   {
-    event: import_editor35.DataEvent.onValueInitOrChange,
+    event: import_editor38.DataEvent.onValueInitOrChange,
     effect: (params) => {
       const { context, value } = params;
       if (value?.type !== "ref") {
         return () => null;
       }
-      const disposable = (0, import_editor35.getNodeScope)(context.node).available.trackByKeyPath(
+      const disposable = (0, import_editor38.getNodeScope)(context.node).available.trackByKeyPath(
         value?.content || [],
         (_type) => {
-          cb({ ...params, schema: import_json_schema11.JsonSchemaUtils.astToSchema(_type) });
+          cb({ ...params, schema: import_json_schema12.JsonSchemaUtils.astToSchema(_type) });
         },
         {
           selector: (_v) => _v?.type
@@ -3556,21 +3936,21 @@ var listenRefSchemaChange = (cb) => [
 ];
 
 // src/form-plugins/batch-outputs-plugin/index.ts
-var import_editor36 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor36.createEffectFromVariableProvider)({
+var import_editor39 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor39.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor36.ASTFactory.createVariableDeclaration({
+    import_editor39.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor36.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor39.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor36.ASTFactory.createObject({
+      type: import_editor39.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor36.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor39.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor36.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor36.ASTFactory.createKeyPathExpression({
+            initializer: import_editor39.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor39.ASTFactory.createKeyPathExpression({
                 keyPath: value2?.content || []
               })
             })
@@ -3580,7 +3960,7 @@ var provideBatchOutputsEffect = (0, import_editor36.createEffectFromVariableProv
     })
   ]
 });
-var createBatchOutputsFormPlugin = (0, import_editor36.defineFormPluginCreator)({
+var createBatchOutputsFormPlugin = (0, import_editor39.defineFormPluginCreator)({
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
@@ -3588,7 +3968,7 @@ var createBatchOutputsFormPlugin = (0, import_editor36.defineFormPluginCreator)(
     });
   },
   onInit(ctx, { outputKey }) {
-    const chainTransformService = ctx.node.getService(import_editor36.ScopeChainTransformService);
+    const chainTransformService = ctx.node.getService(import_editor39.ScopeChainTransformService);
     const batchNodeType = ctx.node.flowNodeType;
     const transformerId = `${batchNodeType}-outputs`;
     if (chainTransformService.hasTransformer(transformerId)) {
@@ -3598,21 +3978,21 @@ var createBatchOutputsFormPlugin = (0, import_editor36.defineFormPluginCreator)(
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, (0, import_editor36.getNodeScope)(node.parent)];
+          return [...covers, (0, import_editor39.getNodeScope)(node.parent)];
         }
         return covers;
       },
       transformDeps(scopes, ctx2) {
         const scopeMeta = ctx2.scope.meta;
-        if (scopeMeta?.type === import_editor36.FlowNodeScopeType.private) {
+        if (scopeMeta?.type === import_editor39.FlowNodeScopeType.private) {
           return scopes;
         }
         const node = scopeMeta?.node;
         if (node?.flowNodeType === batchNodeType) {
           const childBlocks = node.blocks;
           return [
-            (0, import_editor36.getNodePrivateScope)(node),
-            ...childBlocks.map((_childBlock) => (0, import_editor36.getNodeScope)(_childBlock))
+            (0, import_editor39.getNodePrivateScope)(node),
+            ...childBlocks.map((_childBlock) => (0, import_editor39.getNodeScope)(_childBlock))
           ];
         }
         return scopes;
@@ -3622,110 +4002,56 @@ var createBatchOutputsFormPlugin = (0, import_editor36.defineFormPluginCreator)(
 });
 
 // src/form-plugins/infer-inputs-plugin/index.ts
-var import_lodash9 = require("lodash");
-var import_json_schema12 = require("@flowgram.ai/json-schema");
-var import_editor37 = require("@flowgram.ai/editor");
-var createInferInputsPlugin = (0, import_editor37.defineFormPluginCreator)({
+var import_lodash10 = require("lodash");
+var import_editor40 = require("@flowgram.ai/editor");
+var createInferInputsPlugin = (0, import_editor40.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit }, { sourceKey, targetKey, scope }) {
     if (!sourceKey || !targetKey) {
       return;
     }
     addFormatOnSubmit((formData, ctx) => {
-      (0, import_lodash9.set)(
+      (0, import_lodash10.set)(
         formData,
         targetKey,
-        infer(
-          (0, import_lodash9.get)(formData, sourceKey),
-          scope === "private" ? (0, import_editor37.getNodePrivateScope)(ctx.node) : (0, import_editor37.getNodeScope)(ctx.node)
+        FlowValueUtils.inferJsonSchema(
+          (0, import_lodash10.get)(formData, sourceKey),
+          scope === "private" ? (0, import_editor40.getNodePrivateScope)(ctx.node) : (0, import_editor40.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 ? import_json_schema12.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;
-      }, {})
-    };
-  }
-};
 
 // src/form-plugins/infer-assign-plugin/index.ts
-var import_lodash10 = require("lodash");
+var import_lodash11 = require("lodash");
 var import_json_schema13 = require("@flowgram.ai/json-schema");
-var import_editor38 = require("@flowgram.ai/editor");
-var createInferAssignPlugin = (0, import_editor38.defineFormPluginCreator)({
+var import_editor41 = require("@flowgram.ai/editor");
+var createInferAssignPlugin = (0, import_editor41.defineFormPluginCreator)({
   onSetupFormMeta({ addFormatOnSubmit, mergeEffect }, { assignKey, outputKey }) {
     if (!assignKey || !outputKey) {
       return;
     }
     mergeEffect({
-      [assignKey]: (0, import_editor38.createEffectFromVariableProvider)({
+      [assignKey]: (0, import_editor41.createEffectFromVariableProvider)({
         parse: (value, ctx) => {
-          const declareRows = (0, import_lodash10.uniqBy)(
+          const declareRows = (0, import_lodash11.uniqBy)(
             value.filter((_v) => _v.operator === "declare" && _v.left && _v.right),
             "left"
           );
           return [
-            import_editor38.ASTFactory.createVariableDeclaration({
+            import_editor41.ASTFactory.createVariableDeclaration({
               key: `${ctx.node.id}`,
               meta: {
-                title: (0, import_editor38.getNodeForm)(ctx.node)?.getValueIn("title"),
+                title: (0, import_editor41.getNodeForm)(ctx.node)?.getValueIn("title"),
                 icon: ctx.node.getNodeRegistry().info?.icon
               },
-              type: import_editor38.ASTFactory.createObject({
+              type: import_editor41.ASTFactory.createObject({
                 properties: declareRows.map(
-                  (_v) => import_editor38.ASTFactory.createProperty({
+                  (_v) => import_editor41.ASTFactory.createProperty({
                     key: _v.left,
                     type: _v.right?.type === "constant" ? import_json_schema13.JsonSchemaUtils.schemaToAST(_v.right?.schema || {}) : void 0,
-                    initializer: _v.right?.type === "ref" ? import_editor38.ASTFactory.createKeyPathExpression({
+                    initializer: _v.right?.type === "ref" ? import_editor41.ASTFactory.createKeyPathExpression({
                       keyPath: _v.right?.content || []
                     }) : {}
                   })
@@ -3737,10 +4063,10 @@ var createInferAssignPlugin = (0, import_editor38.defineFormPluginCreator)({
       })
     });
     addFormatOnSubmit((formData, ctx) => {
-      (0, import_lodash10.set)(
+      (0, import_lodash11.set)(
         formData,
         outputKey,
-        import_json_schema13.JsonSchemaUtils.astToSchema((0, import_editor38.getNodeScope)(ctx.node).output.variables?.[0]?.type)
+        import_json_schema13.JsonSchemaUtils.astToSchema((0, import_editor41.getNodeScope)(ctx.node).output.variables?.[0]?.type)
       );
       return formData;
     });
@@ -3748,36 +4074,36 @@ var createInferAssignPlugin = (0, import_editor38.defineFormPluginCreator)({
 });
 
 // src/validate/validate-flow-value/index.tsx
-var import_lodash11 = require("lodash");
-var import_editor39 = require("@flowgram.ai/editor");
+var import_lodash12 = require("lodash");
+var import_editor42 = require("@flowgram.ai/editor");
 function validateFlowValue(value, ctx) {
   const { node, required, errorMessages } = ctx;
   const {
     required: requiredMessage = "Field is required",
     unknownVariable: unknownVariableMessage = "Unknown Variable"
   } = errorMessages || {};
-  if (required && ((0, import_lodash11.isNil)(value) || (0, import_lodash11.isNil)(value?.content) || value?.content === "")) {
+  if (required && ((0, import_lodash12.isNil)(value) || (0, import_lodash12.isNil)(value?.content) || value?.content === "")) {
     return {
-      level: import_editor39.FeedbackLevel.Error,
+      level: import_editor42.FeedbackLevel.Error,
       message: requiredMessage
     };
   }
   if (value?.type === "ref") {
-    const variable = (0, import_editor39.getNodeScope)(node).available.getByKeyPath(value?.content || []);
+    const variable = (0, import_editor42.getNodeScope)(node).available.getByKeyPath(value?.content || []);
     if (!variable) {
       return {
-        level: import_editor39.FeedbackLevel.Error,
+        level: import_editor42.FeedbackLevel.Error,
         message: unknownVariableMessage
       };
     }
   }
   if (value?.type === "template") {
-    const allRefs = getTemplateKeyPaths2(value);
+    const allRefs = getTemplateKeyPaths(value);
     for (const ref of allRefs) {
-      const variable = (0, import_editor39.getNodeScope)(node).available.getByKeyPath(ref);
+      const variable = (0, import_editor42.getNodeScope)(node).available.getByKeyPath(ref);
       if (!variable) {
         return {
-          level: import_editor39.FeedbackLevel.Error,
+          level: import_editor42.FeedbackLevel.Error,
           message: unknownVariableMessage
         };
       }
@@ -3785,9 +4111,9 @@ function validateFlowValue(value, ctx) {
   }
   return void 0;
 }
-function getTemplateKeyPaths2(value) {
+function getTemplateKeyPaths(value) {
   const keyPathReg = /{{(.*?)}}/g;
-  return (0, import_lodash11.uniq)(value.content?.match(keyPathReg) || []).map(
+  return (0, import_lodash12.uniq)(value.content?.match(keyPathReg) || []).map(
     (_keyPath) => _keyPath.slice(2, -2).split(".")
   );
 }
@@ -3797,6 +4123,7 @@ function getTemplateKeyPaths2(value) {
   AssignRows,
   BatchOutputs,
   BatchVariableSelector,
+  BlurInput,
   CodeEditor,
   CodeEditorMini,
   ConditionRow,
@@ -3807,10 +4134,12 @@ function getTemplateKeyPaths2(value) {
   DisplaySchemaTag,
   DisplaySchemaTree,
   DynamicValueInput,
+  FlowValueUtils,
   InjectDynamicValueInput,
   InjectTypeSelector,
   InjectVariableSelector,
   InputsValues,
+  InputsValuesTree,
   JsonEditorWithVariables,
   JsonSchemaEditor,
   JsonSchemaTypePresetProvider,