@flowgram.ai/form-materials 0.2.4 → 0.2.6

package/dist/index.js

@@ -56,17 +56,17 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/variable-selector/index.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"));
 var import_semi_icons2 = require("@douyinfe/semi-icons");
 
 // src/components/variable-selector/use-variable-tree.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"));
 var import_editor2 = require("@flowgram.ai/editor");
 var import_semi_ui = require("@douyinfe/semi-ui");
 
 // src/components/type-selector/constants.tsx
-var import_react = __toESM(require("react"), 1);
-var import_semi_icons = __toESM(require("@douyinfe/semi-icons"), 1);
+var import_react = __toESM(require("react"));
+var import_semi_icons = __toESM(require("@douyinfe/semi-icons"));
 var VariableTypeIcons = {
   custom: /* @__PURE__ */ import_react.default.createElement(
     "svg",
@@ -627,7 +627,7 @@ function useVariableTree(params) {
 }
 
 // src/components/variable-selector/styles.tsx
-var import_styled_components = __toESM(require("styled-components"), 1);
+var import_styled_components = __toESM(require("styled-components"));
 var import_semi_ui2 = require("@douyinfe/semi-ui");
 var UIRootTitle = import_styled_components.default.span`
   margin-right: 4px;
@@ -671,7 +671,7 @@ var UITreeSelect = (0, import_styled_components.default)(import_semi_ui2.TreeSel
 // src/components/variable-selector/index.tsx
 var VariableSelector = ({
   value,
-  config,
+  config = {},
   onChange,
   style,
   readonly = false,
@@ -745,7 +745,7 @@ var VariableSelector = ({
 };
 
 // src/components/type-selector/index.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"));
 var import_semi_ui3 = require("@douyinfe/semi-ui");
 var getTypeSelectValue = (value) => {
   if (value?.type === "array" && value?.items) {
@@ -780,14 +780,14 @@ function TypeSelector(props) {
 }
 
 // src/components/json-schema-editor/index.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_semi_ui4 = require("@douyinfe/semi-ui");
-var import_semi_icons4 = require("@douyinfe/semi-icons");
+var import_react10 = __toESM(require("react"));
+var import_semi_ui6 = require("@douyinfe/semi-ui");
+var import_semi_icons5 = require("@douyinfe/semi-icons");
 
 // src/components/json-schema-editor/styles.tsx
-var import_react5 = __toESM(require("react"), 1);
-var import_styled_components2 = __toESM(require("styled-components"), 1);
-var import_semi_icons3 = __toESM(require("@douyinfe/semi-icons"), 1);
+var import_react5 = __toESM(require("react"));
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_semi_icons3 = __toESM(require("@douyinfe/semi-icons"));
 var UIContainer = import_styled_components2.default.div`
   /* & .semi-input {
     background-color: #fff;
@@ -826,32 +826,39 @@ var UIProperties = import_styled_components2.default.div`
 var UIPropertyLeft = import_styled_components2.default.div`
   grid-column: 1;
   position: relative;
+  width: 16px;
 
-  ${({ $showLine, $isLast }) => $showLine && import_styled_components2.css`
-      &::before {
-        /* 竖线 */
-        content: '';
-        position: absolute;
-        left: -22px;
-        top: -18px;
-        bottom: ${$isLast ? "12px" : "0px"};
-        width: 1px;
-        background: #d9d9d9;
-        display: block;
-      }
+  ${({ $showLine, $isLast, $parentType }) => {
+  let height = "100%";
+  if ($parentType && $isLast) {
+    height = "24px";
+  }
+  return $showLine && import_styled_components2.css`
+        &::before {
+          /* 竖线 */
+          content: '';
+          height: ${height};
+          position: absolute;
+          left: -22px;
+          top: -16px;
+          width: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
 
-      &::after {
-        /* 横线 */
-        content: '';
-        position: absolute;
-        left: -22px; // 横线起点和竖线对齐
-        top: 12px; // 跟随你的行高调整
-        width: 22px; // 横线长度
-        height: 1px;
-        background: #d9d9d9;
-        display: block;
-      }
-    `}
+        &::after {
+          /* 横线 */
+          content: '';
+          position: absolute;
+          left: -22px; // 横线起点和竖线对齐
+          top: 8px; // 跟随你的行高调整
+          width: 18px; // 横线长度
+          height: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+      `;
+}}
 `;
 var UIPropertyRight = import_styled_components2.default.div`
   grid-column: 2;
@@ -865,12 +872,31 @@ var UIPropertyMain = import_styled_components2.default.div`
   display: flex;
   flex-direction: column;
   gap: 10px;
+  position: relative;
 
-  ${({ $expand }) => $expand && import_styled_components2.css`
-      background-color: #f5f5f5;
-      padding: 10px;
-      border-radius: 4px;
-    `}
+  ${({ $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_components2.css`
+        background-color: #f5f5f5;
+        padding: 10px;
+        border-radius: 4px;
+
+        ${$showCollapse && $collapse && (type === "array" || type === "object") && import_styled_components2.css`
+          ${beforeElement}
+        `}
+      `;
+}}
 `;
 var UICollapsible = import_styled_components2.default.div`
   display: none;
@@ -908,6 +934,43 @@ var iconAddChildrenSvg = /* @__PURE__ */ import_react5.default.createElement(
   /* @__PURE__ */ import_react5.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_react5.default.createElement(import_semi_icons3.default, { size: "small", svg: iconAddChildrenSvg });
+var DefaultValueWrapper = import_styled_components2.default.div`
+  margin: 0;
+`;
+var JSONViewerWrapper = import_styled_components2.default.div`
+  padding: 0 0 24px;
+  &:first-child {
+    margin-top: 0px;
+  }
+`;
+var JSONHeader = import_styled_components2.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--semi-color-fill-0);
+  border-radius: 6px 6px 0 0;
+  height: 36px;
+  padding: 0 8px 0 12px;
+`;
+var JSONHeaderLeft = import_styled_components2.default.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+var JSONHeaderRight = import_styled_components2.default.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+var ConstantInputWrapper = import_styled_components2.default.div`
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+`;
 
 // src/components/json-schema-editor/hooks.tsx
 var import_react6 = require("react");
@@ -1026,15 +1089,195 @@ function usePropertiesEdit(value, onChange) {
   };
 }
 
+// src/components/json-schema-editor/default-value.tsx
+var import_react8 = __toESM(require("react"));
+var import_semi_ui5 = require("@douyinfe/semi-ui");
+var import_semi_icons4 = require("@douyinfe/semi-icons");
+
+// src/components/json-schema-editor/utils.ts
+function getValueType(value) {
+  const type = typeof value;
+  if (type === "string") {
+    return "string";
+  } else if (type === "number") {
+    return Number.isInteger(value) ? "integer" : "number";
+  } else if (type === "boolean") {
+    return "boolean";
+  } else if (type === "object") {
+    if (value === null) {
+      return "other";
+    }
+    return Array.isArray(value) ? "array" : "object";
+  } else {
+    return "other";
+  }
+}
+
+// src/components/constant-input/index.tsx
+var import_react7 = __toESM(require("react"));
+var import_semi_ui4 = require("@douyinfe/semi-ui");
+var defaultStrategies = [
+  {
+    hit: (schema) => schema?.type === "string",
+    Renderer: (props) => /* @__PURE__ */ import_react7.default.createElement(import_semi_ui4.Input, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
+  },
+  {
+    hit: (schema) => schema?.type === "number",
+    Renderer: (props) => /* @__PURE__ */ import_react7.default.createElement(
+      import_semi_ui4.InputNumber,
+      {
+        placeholder: "Please Input Number",
+        size: "small",
+        disabled: props.readonly,
+        hideButtons: true,
+        ...props
+      }
+    )
+  },
+  {
+    hit: (schema) => schema?.type === "integer",
+    Renderer: (props) => /* @__PURE__ */ import_react7.default.createElement(
+      import_semi_ui4.InputNumber,
+      {
+        placeholder: "Please Input Integer",
+        size: "small",
+        disabled: props.readonly,
+        hideButtons: true,
+        precision: 0,
+        ...props
+      }
+    )
+  },
+  {
+    hit: (schema) => schema?.type === "boolean",
+    Renderer: (props) => {
+      const { value, onChange, ...rest } = props;
+      return /* @__PURE__ */ import_react7.default.createElement(
+        import_semi_ui4.Select,
+        {
+          placeholder: "Please Select Boolean",
+          size: "small",
+          disabled: props.readonly,
+          optionList: [
+            { label: "True", value: 1 },
+            { label: "False", value: 0 }
+          ],
+          value: value ? 1 : 0,
+          onChange: (value2) => onChange?.(!!value2),
+          ...rest
+        }
+      );
+    }
+  }
+];
+function ConstantInput(props) {
+  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
+  const strategies = (0, import_react7.useMemo)(
+    () => [...defaultStrategies, ...extraStrategies || []],
+    [extraStrategies]
+  );
+  const Renderer = (0, import_react7.useMemo)(() => {
+    const strategy = strategies.find((_strategy) => _strategy.hit(schema));
+    return strategy?.Renderer;
+  }, [strategies, schema]);
+  if (!Renderer) {
+    return /* @__PURE__ */ import_react7.default.createElement(import_semi_ui4.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
+  }
+  return /* @__PURE__ */ import_react7.default.createElement(Renderer, { value, onChange, readonly, ...rest });
+}
+
+// src/components/json-schema-editor/default-value.tsx
+function DefaultValue(props) {
+  const { value, schema, type, onChange, placeholder, jsonFormatText } = props;
+  const wrapperRef = (0, import_react8.useRef)(null);
+  const JsonViewerRef = (0, import_react8.useRef)(null);
+  const [internalJsonValue, setInternalJsonValue] = (0, import_react8.useState)(
+    getValueType(value) === "string" ? value : ""
+  );
+  const handleJsonChange = (0, import_react8.useCallback)((val) => {
+    if (val !== internalJsonValue) {
+      setInternalJsonValue(val);
+    }
+  }, []);
+  const handleEditComplete = (0, import_react8.useCallback)(() => {
+    onChange(internalJsonValue);
+    requestAnimationFrame(() => {
+      wrapperRef.current?.blur();
+    });
+    setJsonReadOnly(true);
+  }, [internalJsonValue, onChange]);
+  const [jsonReadOnly, setJsonReadOnly] = (0, import_react8.useState)(true);
+  const handleFormatJson = (0, import_react8.useCallback)(() => {
+    try {
+      const parsed = JSON.parse(internalJsonValue);
+      const formatted = JSON.stringify(parsed, null, 4);
+      setInternalJsonValue(formatted);
+      onChange(formatted);
+    } catch (error) {
+      console.error("Invalid JSON:", error);
+    }
+  }, [internalJsonValue, onChange]);
+  return type === "object" ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(JSONHeader, null, /* @__PURE__ */ import_react8.default.createElement(JSONHeaderLeft, null, "json"), /* @__PURE__ */ import_react8.default.createElement(JSONHeaderRight, null, /* @__PURE__ */ import_react8.default.createElement(import_semi_ui5.Tooltip, { content: jsonFormatText ?? "Format" }, /* @__PURE__ */ import_react8.default.createElement(
+    import_semi_ui5.IconButton,
+    {
+      icon: /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconBrackets, { style: { color: "var(--semi-color-primary)" } }),
+      size: "small",
+      type: "tertiary",
+      theme: "borderless",
+      onClick: handleFormatJson
+    }
+  )))), /* @__PURE__ */ import_react8.default.createElement(
+    JSONViewerWrapper,
+    {
+      ref: wrapperRef,
+      tabIndex: -1,
+      onBlur: (e) => {
+        if (wrapperRef.current && !wrapperRef.current?.contains(e.relatedTarget)) {
+          handleEditComplete();
+        }
+      },
+      onClick: (e) => {
+        setJsonReadOnly(false);
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      import_semi_ui5.JsonViewer,
+      {
+        ref: JsonViewerRef,
+        value: getValueType(value) === "string" ? value : "",
+        height: 120,
+        width: "100%",
+        showSearch: false,
+        options: {
+          readOnly: jsonReadOnly,
+          formatOptions: { tabSize: 4, insertSpaces: true, eol: "\n" }
+        },
+        style: {
+          padding: 0
+        },
+        onChange: handleJsonChange
+      }
+    )
+  )) : /* @__PURE__ */ import_react8.default.createElement(ConstantInputWrapper, null, /* @__PURE__ */ import_react8.default.createElement(
+    ConstantInput,
+    {
+      value,
+      onChange: (_v) => onChange(_v),
+      schema: schema || { type: "string" },
+      placeholder: placeholder ?? "Default value if parameter is not provided"
+    }
+  ));
+}
+
 // src/components/json-schema-editor/components/blur-input.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_input = __toESM(require("@douyinfe/semi-ui/lib/es/input"), 1);
+var import_react9 = __toESM(require("react"));
+var import_input = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
 function BlurInput(props) {
-  const [value, setValue] = (0, import_react7.useState)("");
-  (0, import_react7.useEffect)(() => {
+  const [value, setValue] = (0, import_react9.useState)("");
+  (0, import_react9.useEffect)(() => {
     setValue(props.value);
   }, [props.value]);
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     import_input.default,
     {
       ...props,
@@ -1054,12 +1297,13 @@ function JsonSchemaEditor(props) {
     value,
     onChangeProps
   );
-  return /* @__PURE__ */ import_react8.default.createElement(UIContainer, null, /* @__PURE__ */ import_react8.default.createElement(UIProperties, null, propertyList.map((_property) => /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(UIContainer, null, /* @__PURE__ */ import_react10.default.createElement(UIProperties, null, propertyList.map((_property, index) => /* @__PURE__ */ import_react10.default.createElement(
     PropertyEdit,
     {
       key: _property.key,
       value: _property,
       config,
+      $index: index,
       onChange: (_v) => {
         onEditProperty(_property.key, _v);
       },
@@ -1067,14 +1311,26 @@ function JsonSchemaEditor(props) {
         onRemoveProperty(_property.key);
       }
     }
-  ))), /* @__PURE__ */ import_react8.default.createElement(import_semi_ui4.Button, { size: "small", style: { marginTop: 10 }, icon: /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconPlus, null), onClick: onAddProperty }, config?.addButtonText ?? "Add"));
+  ))), /* @__PURE__ */ import_react10.default.createElement(import_semi_ui6.Button, { size: "small", style: { marginTop: 10 }, icon: /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconPlus, null), onClick: onAddProperty }, config?.addButtonText ?? "Add"));
 }
 function PropertyEdit(props) {
-  const { value, config, onChange: onChangeProps, onRemove, $isLast, $showLine } = props;
-  const [expand, setExpand] = (0, import_react8.useState)(false);
-  const [collapse, setCollapse] = (0, import_react8.useState)(false);
-  const { name, type, items, description, isPropertyRequired } = value || {};
-  const typeSelectorValue = (0, import_react8.useMemo)(() => ({ type, items }), [type, items]);
+  const {
+    value,
+    config,
+    $level = 0,
+    onChange: onChangeProps,
+    onRemove,
+    $index,
+    $isFirst,
+    $isLast,
+    $parentExpand = false,
+    $parentType = "",
+    $showLine
+  } = props;
+  const [expand, setExpand] = (0, import_react10.useState)(false);
+  const [collapse, setCollapse] = (0, import_react10.useState)(false);
+  const { name, type, items, default: defaultValue, description, isPropertyRequired } = value || {};
+  const typeSelectorValue = (0, import_react10.useMemo)(() => ({ type, items }), [type, items]);
   const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(value, onChangeProps);
   const onChange = (key, _value) => {
     onChangeProps?.({
@@ -1083,72 +1339,110 @@ function PropertyEdit(props) {
     });
   };
   const showCollapse = isDrilldownObject && propertyList.length > 0;
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(UIPropertyLeft, { $isLast, $showLine }, showCollapse && /* @__PURE__ */ import_react8.default.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconChevronRight, { size: "small" }))), /* @__PURE__ */ import_react8.default.createElement(UIPropertyRight, null, /* @__PURE__ */ import_react8.default.createElement(UIPropertyMain, { $expand: expand }, /* @__PURE__ */ import_react8.default.createElement(UIRow, null, /* @__PURE__ */ import_react8.default.createElement(UIName, null, /* @__PURE__ */ import_react8.default.createElement(
-    BlurInput,
+  return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
+    UIPropertyLeft,
     {
-      placeholder: config?.placeholder ?? "Input Variable Name",
-      size: "small",
-      value: name,
-      onChange: (value2) => onChange("name", value2)
-    }
-  )), /* @__PURE__ */ import_react8.default.createElement(UIType, null, /* @__PURE__ */ import_react8.default.createElement(
-    TypeSelector,
+      type,
+      $index,
+      $isFirst,
+      $isLast,
+      $showLine,
+      $isExpand: expand,
+      $parentExpand,
+      $parentType
+    },
+    showCollapse && /* @__PURE__ */ import_react10.default.createElement(UICollapseTrigger, { onClick: () => setCollapse((_collapse) => !_collapse) }, collapse ? /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconChevronDown, { size: "small" }) : /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconChevronRight, { size: "small" }))
+  ), /* @__PURE__ */ import_react10.default.createElement(UIPropertyRight, null, /* @__PURE__ */ import_react10.default.createElement(
+    UIPropertyMain,
     {
-      value: typeSelectorValue,
-      onChange: (_value) => {
-        onChangeProps?.({
-          ...value || {},
-          ..._value
-        });
+      $showCollapse: showCollapse,
+      $collapse: collapse,
+      $expand: expand,
+      type
+    },
+    /* @__PURE__ */ import_react10.default.createElement(UIRow, null, /* @__PURE__ */ import_react10.default.createElement(UIName, null, /* @__PURE__ */ import_react10.default.createElement(
+      BlurInput,
+      {
+        placeholder: config?.placeholder ?? "Input Variable Name",
+        size: "small",
+        value: name,
+        onChange: (value2) => onChange("name", value2)
       }
-    }
-  )), /* @__PURE__ */ import_react8.default.createElement(UIRequired, null, /* @__PURE__ */ import_react8.default.createElement(
-    import_semi_ui4.Checkbox,
-    {
-      checked: isPropertyRequired,
-      onChange: (e) => onChange("isPropertyRequired", e.target.checked)
-    }
-  )), /* @__PURE__ */ import_react8.default.createElement(UIActions, null, /* @__PURE__ */ import_react8.default.createElement(
-    import_semi_ui4.IconButton,
-    {
-      size: "small",
-      theme: "borderless",
-      icon: expand ? /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconExpand, { size: "small" }),
-      onClick: () => setExpand((_expand) => !_expand)
-    }
-  ), isDrilldownObject && /* @__PURE__ */ import_react8.default.createElement(
-    import_semi_ui4.IconButton,
-    {
-      size: "small",
-      theme: "borderless",
-      icon: /* @__PURE__ */ import_react8.default.createElement(IconAddChildren, null),
-      onClick: () => {
-        onAddProperty();
-        setCollapse(true);
+    )), /* @__PURE__ */ import_react10.default.createElement(UIType, null, /* @__PURE__ */ import_react10.default.createElement(
+      TypeSelector,
+      {
+        value: typeSelectorValue,
+        onChange: (_value) => {
+          onChangeProps?.({
+            ...value || {},
+            ..._value
+          });
+        }
       }
-    }
-  ), /* @__PURE__ */ import_react8.default.createElement(
-    import_semi_ui4.IconButton,
-    {
-      size: "small",
-      theme: "borderless",
-      icon: /* @__PURE__ */ import_react8.default.createElement(import_semi_icons4.IconMinus, { size: "small" }),
-      onClick: onRemove
-    }
-  ))), expand && /* @__PURE__ */ import_react8.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react8.default.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ import_react8.default.createElement(
-    BlurInput,
-    {
-      size: "small",
-      value: description,
-      onChange: (value2) => onChange("description", value2),
-      placeholder: config?.descPlaceholder ?? "Help LLM to understand the property"
-    }
-  ))), showCollapse && /* @__PURE__ */ import_react8.default.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ import_react8.default.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ import_react8.default.createElement(
+    )), /* @__PURE__ */ import_react10.default.createElement(UIRequired, null, /* @__PURE__ */ import_react10.default.createElement(
+      import_semi_ui6.Checkbox,
+      {
+        checked: isPropertyRequired,
+        onChange: (e) => onChange("isPropertyRequired", e.target.checked)
+      }
+    )), /* @__PURE__ */ import_react10.default.createElement(UIActions, null, /* @__PURE__ */ import_react10.default.createElement(
+      import_semi_ui6.IconButton,
+      {
+        size: "small",
+        theme: "borderless",
+        icon: expand ? /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconShrink, { size: "small" }) : /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconExpand, { size: "small" }),
+        onClick: () => {
+          setExpand((_expand) => !_expand);
+        }
+      }
+    ), isDrilldownObject && /* @__PURE__ */ import_react10.default.createElement(
+      import_semi_ui6.IconButton,
+      {
+        size: "small",
+        theme: "borderless",
+        icon: /* @__PURE__ */ import_react10.default.createElement(IconAddChildren, null),
+        onClick: () => {
+          onAddProperty();
+          setCollapse(true);
+        }
+      }
+    ), /* @__PURE__ */ import_react10.default.createElement(
+      import_semi_ui6.IconButton,
+      {
+        size: "small",
+        theme: "borderless",
+        icon: /* @__PURE__ */ import_react10.default.createElement(import_semi_icons5.IconMinus, { size: "small" }),
+        onClick: onRemove
+      }
+    ))),
+    expand && /* @__PURE__ */ import_react10.default.createElement(UIExpandDetail, null, /* @__PURE__ */ import_react10.default.createElement(UILabel, null, config?.descTitle ?? "Description"), /* @__PURE__ */ import_react10.default.createElement(
+      BlurInput,
+      {
+        size: "small",
+        value: description,
+        onChange: (value2) => onChange("description", value2),
+        placeholder: config?.descPlaceholder ?? "Help LLM to understand the property"
+      }
+    ), $level === 0 && type && type !== "array" && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(UILabel, { style: { marginTop: 10 } }, config?.defaultValueTitle ?? "Default Value"), /* @__PURE__ */ import_react10.default.createElement(DefaultValueWrapper, null, /* @__PURE__ */ import_react10.default.createElement(
+      DefaultValue,
+      {
+        value: defaultValue,
+        schema: value,
+        type,
+        placeholder: config?.defaultValuePlaceholder,
+        jsonFormatText: config?.jsonFormatText,
+        onChange: (value2) => onChange("default", value2)
+      }
+    ))))
+  ), showCollapse && /* @__PURE__ */ import_react10.default.createElement(UICollapsible, { $collapse: collapse }, /* @__PURE__ */ import_react10.default.createElement(UIProperties, { $shrink: true }, propertyList.map((_property, index) => /* @__PURE__ */ import_react10.default.createElement(
     PropertyEdit,
     {
       key: _property.key,
       value: _property,
       config,
+      $level: $level + 1,
+      $parentExpand: expand,
+      $parentType: type,
       onChange: (_v) => {
         onEditProperty(_property.key, _v);
       },
@@ -1156,102 +1450,31 @@ function PropertyEdit(props) {
         onRemoveProperty(_property.key);
       },
       $isLast: index === propertyList.length - 1,
+      $isFirst: index === 0,
+      $index: index,
       $showLine: true
     }
   ))))));
 }
 
 // src/components/batch-variable-selector/index.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"));
 var import_editor3 = require("@flowgram.ai/editor");
 var batchVariableSchema = {
   type: "array",
   extra: { weak: true }
 };
 function BatchVariableSelector(props) {
-  return /* @__PURE__ */ import_react9.default.createElement(import_editor3.PrivateScopeProvider, null, /* @__PURE__ */ import_react9.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
-}
-
-// src/components/constant-input/index.tsx
-var import_react10 = __toESM(require("react"), 1);
-var import_semi_ui5 = require("@douyinfe/semi-ui");
-var defaultStrategies = [
-  {
-    hit: (schema) => schema?.type === "string",
-    Renderer: (props) => /* @__PURE__ */ import_react10.default.createElement(import_semi_ui5.Input, { placeholder: "Please Input String", size: "small", disabled: props.readonly, ...props })
-  },
-  {
-    hit: (schema) => schema?.type === "number",
-    Renderer: (props) => /* @__PURE__ */ import_react10.default.createElement(
-      import_semi_ui5.InputNumber,
-      {
-        placeholder: "Please Input Number",
-        size: "small",
-        disabled: props.readonly,
-        hideButtons: true,
-        ...props
-      }
-    )
-  },
-  {
-    hit: (schema) => schema?.type === "integer",
-    Renderer: (props) => /* @__PURE__ */ import_react10.default.createElement(
-      import_semi_ui5.InputNumber,
-      {
-        placeholder: "Please Input Integer",
-        size: "small",
-        disabled: props.readonly,
-        hideButtons: true,
-        precision: 0,
-        ...props
-      }
-    )
-  },
-  {
-    hit: (schema) => schema?.type === "boolean",
-    Renderer: (props) => {
-      const { value, onChange, ...rest } = props;
-      return /* @__PURE__ */ import_react10.default.createElement(
-        import_semi_ui5.Select,
-        {
-          placeholder: "Please Select Boolean",
-          size: "small",
-          disabled: props.readonly,
-          optionList: [
-            { label: "True", value: 1 },
-            { label: "False", value: 0 }
-          ],
-          value: value ? 1 : 0,
-          onChange: (value2) => onChange?.(!!value2),
-          ...rest
-        }
-      );
-    }
-  }
-];
-function ConstantInput(props) {
-  const { value, onChange, schema, strategies: extraStrategies, readonly, ...rest } = props;
-  const strategies = (0, import_react10.useMemo)(
-    () => [...defaultStrategies, ...extraStrategies || []],
-    [extraStrategies]
-  );
-  const Renderer = (0, import_react10.useMemo)(() => {
-    const strategy = strategies.find((_strategy) => _strategy.hit(schema));
-    return strategy?.Renderer;
-  }, [strategies, schema]);
-  if (!Renderer) {
-    return /* @__PURE__ */ import_react10.default.createElement(import_semi_ui5.Input, { size: "small", disabled: true, placeholder: "Unsupported type" });
-  }
-  return /* @__PURE__ */ import_react10.default.createElement(Renderer, { value, onChange, readonly, ...rest });
+  return /* @__PURE__ */ import_react11.default.createElement(import_editor3.PrivateScopeProvider, null, /* @__PURE__ */ import_react11.default.createElement(VariableSelector, { ...props, includeSchema: batchVariableSchema }));
 }
 
 // src/components/dynamic-value-input/index.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_semi_ui6 = require("@douyinfe/semi-ui");
-var import_semi_icons5 = require("@douyinfe/semi-icons");
+var import_react12 = __toESM(require("react"));
+var import_semi_ui7 = require("@douyinfe/semi-ui");
+var import_semi_icons6 = require("@douyinfe/semi-icons");
 
 // src/components/dynamic-value-input/styles.tsx
-var import_styled_components3 = __toESM(require("styled-components"), 1);
+var import_styled_components3 = __toESM(require("styled-components"));
 var UIContainer2 = import_styled_components3.default.div`
   display: flex;
   align-items: center;
@@ -1277,7 +1500,7 @@ function DynamicValueInput({
   schema,
   constantProps
 }) {
-  const includeSchema = (0, import_react11.useMemo)(() => {
+  const includeSchema = (0, import_react12.useMemo)(() => {
     if (schema?.type === "number") {
       return [schema, { type: "integer" }];
     }
@@ -1285,7 +1508,7 @@ function DynamicValueInput({
   }, [schema]);
   const renderMain = () => {
     if (value?.type === "ref") {
-      return /* @__PURE__ */ import_react11.default.createElement(
+      return /* @__PURE__ */ import_react12.default.createElement(
         VariableSelector,
         {
           value: value?.content,
@@ -1295,7 +1518,7 @@ function DynamicValueInput({
         }
       );
     }
-    return /* @__PURE__ */ import_react11.default.createElement(
+    return /* @__PURE__ */ import_react12.default.createElement(
       ConstantInput,
       {
         value: value?.content,
@@ -1306,7 +1529,7 @@ function DynamicValueInput({
       }
     );
   };
-  const renderTrigger = () => /* @__PURE__ */ import_react11.default.createElement(
+  const renderTrigger = () => /* @__PURE__ */ import_react12.default.createElement(
     VariableSelector,
     {
       style: { width: "100%" },
@@ -1314,18 +1537,18 @@ function DynamicValueInput({
       onChange: (_v) => onChange({ type: "ref", content: _v }),
       includeSchema,
       readonly,
-      triggerRender: () => /* @__PURE__ */ import_react11.default.createElement(import_semi_ui6.IconButton, { disabled: readonly, size: "small", icon: /* @__PURE__ */ import_react11.default.createElement(import_semi_icons5.IconSetting, { size: "small" }) })
+      triggerRender: () => /* @__PURE__ */ import_react12.default.createElement(import_semi_ui7.IconButton, { disabled: readonly, size: "small", icon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons6.IconSetting, { size: "small" }) })
     }
   );
-  return /* @__PURE__ */ import_react11.default.createElement(UIContainer2, { style }, /* @__PURE__ */ import_react11.default.createElement(UIMain, null, renderMain()), /* @__PURE__ */ import_react11.default.createElement(UITrigger, null, renderTrigger()));
+  return /* @__PURE__ */ import_react12.default.createElement(UIContainer2, { style }, /* @__PURE__ */ import_react12.default.createElement(UIMain, null, renderMain()), /* @__PURE__ */ import_react12.default.createElement(UITrigger, null, renderTrigger()));
 }
 
 // src/components/condition-row/index.tsx
-var import_react14 = __toESM(require("react"), 1);
-var import_semi_ui8 = require("@douyinfe/semi-ui");
+var import_react15 = __toESM(require("react"));
+var import_semi_ui9 = require("@douyinfe/semi-ui");
 
 // src/components/condition-row/styles.tsx
-var import_styled_components4 = __toESM(require("styled-components"), 1);
+var import_styled_components4 = __toESM(require("styled-components"));
 var UIContainer3 = import_styled_components4.default.div`
   display: flex;
   align-items: center;
@@ -1347,7 +1570,7 @@ var UIValues = import_styled_components4.default.div`
 `;
 
 // src/components/condition-row/hooks/useRule.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor4 = require("@flowgram.ai/editor");
 
 // src/components/condition-row/constants.ts
@@ -1537,11 +1760,11 @@ function formatNewRefToLegacyRef(value) {
 // src/components/condition-row/hooks/useRule.ts
 function useRule(left) {
   const available = (0, import_editor4.useScopeAvailable)();
-  const variable = (0, import_react12.useMemo)(() => {
+  const variable = (0, import_react13.useMemo)(() => {
     if (!left) return void 0;
     return available.getByKeyPath(left.content);
   }, [available, left]);
-  const rule = (0, import_react12.useMemo)(() => {
+  const rule = (0, import_react13.useMemo)(() => {
     if (!variable) return void 0;
     const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldown: false });
     return rules[schema?.type];
@@ -1550,20 +1773,20 @@ function useRule(left) {
 }
 
 // src/components/condition-row/hooks/useOp.tsx
-var import_react13 = __toESM(require("react"), 1);
-var import_semi_ui7 = require("@douyinfe/semi-ui");
-var import_semi_icons6 = require("@douyinfe/semi-icons");
+var import_react14 = __toESM(require("react"));
+var import_semi_ui8 = require("@douyinfe/semi-ui");
+var import_semi_icons7 = require("@douyinfe/semi-icons");
 function useOp({ rule, op, onChange }) {
-  const options2 = (0, import_react13.useMemo)(
+  const options2 = (0, import_react14.useMemo)(
     () => Object.keys(rule || {}).map((_op) => ({
       ...opConfigs[_op] || {},
       value: _op
     })),
     [rule]
   );
-  const opConfig = (0, import_react13.useMemo)(() => opConfigs[op], [op]);
-  const renderOpSelect = () => /* @__PURE__ */ import_react13.default.createElement(
-    import_semi_ui7.Select,
+  const opConfig = (0, import_react14.useMemo)(() => opConfigs[op], [op]);
+  const renderOpSelect = () => /* @__PURE__ */ import_react14.default.createElement(
+    import_semi_ui8.Select,
     {
       style: { height: 22 },
       size: "small",
@@ -1572,7 +1795,7 @@ function useOp({ rule, op, onChange }) {
       onChange: (v) => {
         onChange(v);
       },
-      triggerRender: ({ value }) => /* @__PURE__ */ import_react13.default.createElement(import_semi_ui7.Button, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ import_react13.default.createElement(import_semi_icons6.IconChevronDownStroked, { size: "small" }))
+      triggerRender: ({ value }) => /* @__PURE__ */ import_react14.default.createElement(import_semi_ui8.Button, { size: "small", disabled: !rule }, opConfig?.abbreviation || /* @__PURE__ */ import_react14.default.createElement(import_semi_icons7.IconChevronDownStroked, { size: "small" }))
     }
   );
   return { renderOpSelect, opConfig };
@@ -1587,11 +1810,11 @@ function ConditionRow({ style, value, onChange, readonly }) {
     op: operator,
     onChange: (v) => onChange({ ...value, operator: v })
   });
-  const targetSchema = (0, import_react14.useMemo)(() => {
+  const targetSchema = (0, import_react15.useMemo)(() => {
     const targetType = rule?.[operator] || null;
     return targetType ? { type: targetType, extra: { weak: true } } : null;
   }, [rule, opConfig]);
-  return /* @__PURE__ */ import_react14.default.createElement(UIContainer3, { style }, /* @__PURE__ */ import_react14.default.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ import_react14.default.createElement(UIValues, null, /* @__PURE__ */ import_react14.default.createElement(UILeft, null, /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(UIContainer3, { style }, /* @__PURE__ */ import_react15.default.createElement(UIOperator, null, renderOpSelect()), /* @__PURE__ */ import_react15.default.createElement(UIValues, null, /* @__PURE__ */ import_react15.default.createElement(UILeft, null, /* @__PURE__ */ import_react15.default.createElement(
     VariableSelector,
     {
       readonly,
@@ -1605,7 +1828,7 @@ function ConditionRow({ style, value, onChange, readonly }) {
         }
       })
     }
-  )), /* @__PURE__ */ import_react14.default.createElement(UIRight, null, targetSchema ? /* @__PURE__ */ import_react14.default.createElement(
+  )), /* @__PURE__ */ import_react15.default.createElement(UIRight, null, targetSchema ? /* @__PURE__ */ import_react15.default.createElement(
     DynamicValueInput,
     {
       readonly: readonly || !rule,
@@ -1613,7 +1836,7 @@ function ConditionRow({ style, value, onChange, readonly }) {
       schema: targetSchema,
       onChange: (v) => onChange({ ...value, right: v })
     }
-  ) : /* @__PURE__ */ import_react14.default.createElement(import_semi_ui8.Input, { size: "small", disabled: true, value: opConfig?.rightDisplay || "Empty" }))));
+  ) : /* @__PURE__ */ import_react15.default.createElement(import_semi_ui9.Input, { size: "small", disabled: true, value: opConfig?.rightDisplay || "Empty" }))));
 }
 
 // src/effects/provide-batch-input/index.ts