@flowgram.ai/form-materials 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/cjs/components/condition-context/hooks/use-condition.js

@@ -0,0 +1,97 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useCondition: ()=>useCondition
+});
+const external_react_namespaceObject = require("react");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+const index_js_namespaceObject = require("../../../plugins/index.js");
+const external_context_js_namespaceObject = require("../context.js");
+function useCondition({ leftSchema, operator, ruleConfig }) {
+    const typeManager = (0, index_js_namespaceObject.useTypeManager)();
+    const { rules: contextRules, ops: contextOps } = (0, external_context_js_namespaceObject.useConditionContext)();
+    const userRules = (0, external_react_namespaceObject.useMemo)(()=>ruleConfig?.rules || contextRules || {}, [
+        contextRules,
+        ruleConfig?.rules
+    ]);
+    const allOps = (0, external_react_namespaceObject.useMemo)(()=>ruleConfig?.ops || contextOps || {}, [
+        contextOps,
+        ruleConfig?.ops
+    ]);
+    const config = (0, external_react_namespaceObject.useMemo)(()=>leftSchema ? typeManager.getTypeBySchema(leftSchema) : void 0, [
+        leftSchema,
+        typeManager
+    ]);
+    const rule = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!config) return;
+        if (userRules[config.type]) return userRules[config.type];
+        if ('function' == typeof config.conditionRule) return config.conditionRule(leftSchema);
+        return config.conditionRule;
+    }, [
+        userRules,
+        leftSchema,
+        config
+    ]);
+    const opOptionList = (0, external_react_namespaceObject.useMemo)(()=>Object.keys(rule || {}).filter((_op)=>allOps[_op]).map((_op)=>({
+                ...allOps?.[_op] || {},
+                value: _op,
+                label: editor_namespaceObject.I18n.t(allOps?.[_op]?.label || _op)
+            })), [
+        rule,
+        allOps
+    ]);
+    const targetSchema = (0, external_react_namespaceObject.useMemo)(()=>{
+        const targetType = rule?.[operator || ''] || null;
+        if (!targetType) return;
+        if ('string' == typeof targetType) return {
+            type: targetType,
+            extra: {
+                weak: true
+            }
+        };
+        return targetType;
+    }, [
+        rule,
+        operator
+    ]);
+    const opConfig = (0, external_react_namespaceObject.useMemo)(()=>allOps[operator || ''], [
+        operator,
+        allOps
+    ]);
+    return {
+        rule,
+        opConfig,
+        opOptionList,
+        targetSchema
+    };
+}
+exports.useCondition = __webpack_exports__.useCondition;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "useCondition"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/condition-context/index.js

@@ -0,0 +1,47 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ConditionPresetOp: ()=>external_op_js_namespaceObject.ConditionPresetOp,
+    useConditionContext: ()=>external_context_js_namespaceObject.useConditionContext,
+    ConditionProvider: ()=>external_context_js_namespaceObject.ConditionProvider,
+    useCondition: ()=>use_condition_js_namespaceObject.useCondition
+});
+const external_op_js_namespaceObject = require("./op.js");
+const external_context_js_namespaceObject = require("./context.js");
+const use_condition_js_namespaceObject = require("./hooks/use-condition.js");
+exports.ConditionPresetOp = __webpack_exports__.ConditionPresetOp;
+exports.ConditionProvider = __webpack_exports__.ConditionProvider;
+exports.useCondition = __webpack_exports__.useCondition;
+exports.useConditionContext = __webpack_exports__.useConditionContext;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ConditionPresetOp",
+    "ConditionProvider",
+    "useCondition",
+    "useConditionContext"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/condition-context/op.js

@@ -0,0 +1,117 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ConditionPresetOp: ()=>ConditionPresetOp,
+    defaultConditionOpConfigs: ()=>defaultConditionOpConfigs
+});
+var ConditionPresetOp = /*#__PURE__*/ function(ConditionPresetOp) {
+    ConditionPresetOp["EQ"] = "eq";
+    ConditionPresetOp["NEQ"] = "neq";
+    ConditionPresetOp["GT"] = "gt";
+    ConditionPresetOp["GTE"] = "gte";
+    ConditionPresetOp["LT"] = "lt";
+    ConditionPresetOp["LTE"] = "lte";
+    ConditionPresetOp["IN"] = "in";
+    ConditionPresetOp["NIN"] = "nin";
+    ConditionPresetOp["CONTAINS"] = "contains";
+    ConditionPresetOp["NOT_CONTAINS"] = "not_contains";
+    ConditionPresetOp["IS_EMPTY"] = "is_empty";
+    ConditionPresetOp["IS_NOT_EMPTY"] = "is_not_empty";
+    ConditionPresetOp["IS_TRUE"] = "is_true";
+    ConditionPresetOp["IS_FALSE"] = "is_false";
+    return ConditionPresetOp;
+}({});
+const defaultConditionOpConfigs = {
+    ["eq"]: {
+        label: 'Equal',
+        abbreviation: '='
+    },
+    ["neq"]: {
+        label: 'Not Equal',
+        abbreviation: '≠'
+    },
+    ["gt"]: {
+        label: 'Greater Than',
+        abbreviation: '>'
+    },
+    ["gte"]: {
+        label: 'Greater Than or Equal',
+        abbreviation: '>='
+    },
+    ["lt"]: {
+        label: 'Less Than',
+        abbreviation: '<'
+    },
+    ["lte"]: {
+        label: 'Less Than or Equal',
+        abbreviation: '<='
+    },
+    ["in"]: {
+        label: 'In',
+        abbreviation: '∈'
+    },
+    ["nin"]: {
+        label: 'Not In',
+        abbreviation: '∉'
+    },
+    ["contains"]: {
+        label: 'Contains',
+        abbreviation: '⊇'
+    },
+    ["not_contains"]: {
+        label: 'Not Contains',
+        abbreviation: '⊉'
+    },
+    ["is_empty"]: {
+        label: 'Is Empty',
+        abbreviation: '=',
+        rightDisplay: 'Empty'
+    },
+    ["is_not_empty"]: {
+        label: 'Is Not Empty',
+        abbreviation: '≠',
+        rightDisplay: 'Empty'
+    },
+    ["is_true"]: {
+        label: 'Is True',
+        abbreviation: '=',
+        rightDisplay: 'True'
+    },
+    ["is_false"]: {
+        label: 'Is False',
+        abbreviation: '=',
+        rightDisplay: 'False'
+    }
+};
+exports.ConditionPresetOp = __webpack_exports__.ConditionPresetOp;
+exports.defaultConditionOpConfigs = __webpack_exports__.defaultConditionOpConfigs;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ConditionPresetOp",
+    "defaultConditionOpConfigs"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/condition-row/index.js

@@ -28,43 +28,62 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
+const json_schema_namespaceObject = require("@flowgram.ai/json-schema");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const index_js_namespaceObject = require("../variable-selector/index.js");
 const external_dynamic_value_input_index_js_namespaceObject = require("../dynamic-value-input/index.js");
+const external_condition_context_index_js_namespaceObject = require("../condition-context/index.js");
 const external_styles_js_namespaceObject = require("./styles.js");
-const useRule_js_namespaceObject = require("./hooks/useRule.js");
-const useOp_js_namespaceObject = require("./hooks/useOp.js");
-const external_constants_js_namespaceObject = require("./constants.js");
 const defaultRuleConfig = {
     ops: {},
     rules: {}
 };
 function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRuleConfig }) {
     const { left, operator, right } = value || {};
-    const { rule } = (0, useRule_js_namespaceObject.useRule)(left, ruleConfig.rules);
-    const { renderOpSelect, opConfig } = (0, useOp_js_namespaceObject.useOp)({
-        rule,
-        op: operator,
-        onChange: (v)=>onChange({
-                ...value,
-                operator: v
-            }),
-        readonly,
-        userOps: ruleConfig.ops
-    });
-    const targetSchema = (0, external_react_namespaceObject.useMemo)(()=>{
-        const targetType = rule?.[operator || ''] || null;
-        return targetType ? {
-            type: targetType,
-            extra: {
-                weak: true
-            }
-        } : null;
+    const available = (0, editor_namespaceObject.useScopeAvailable)();
+    const variable = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!left) return;
+        return available.getByKeyPath(left.content);
+    }, [
+        available,
+        left
+    ]);
+    const leftSchema = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!variable) return;
+        return json_schema_namespaceObject.JsonSchemaUtils.astToSchema(variable.type, {
+            drilldown: false
+        });
     }, [
-        rule,
-        opConfig
+        variable?.type?.hash
     ]);
+    const { rule, opConfig, opOptionList, targetSchema } = (0, external_condition_context_index_js_namespaceObject.useCondition)({
+        leftSchema,
+        operator
+    });
+    const renderOpSelect = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Select, {
+            style: {
+                height: 22
+            },
+            disabled: readonly,
+            size: "small",
+            value: operator,
+            optionList: opOptionList,
+            onChange: (v)=>{
+                onChange({
+                    ...value,
+                    operator: v
+                });
+            },
+            triggerRender: ({ value })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Button, {
+                    size: "small",
+                    disabled: !rule,
+                    children: opConfig?.abbreviation || /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_icons_namespaceObject.IconChevronDownStroked, {
+                        size: "small"
+                    })
+                })
+        });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_styles_js_namespaceObject.UIContainer, {
         style: style,
         children: [
@@ -112,8 +131,6 @@ function ConditionRow({ style, value, onChange, readonly, ruleConfig = defaultRu
         ]
     });
 }
-ConditionRow.defaultRules = external_constants_js_namespaceObject.defaultRules;
-ConditionRow.defaultOpConfigs = external_constants_js_namespaceObject.defaultOpConfigs;
 exports.ConditionRow = __webpack_exports__.ConditionRow;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "ConditionRow"

package/dist/cjs/components/condition-row/types.js

@@ -1,16 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
 (()=>{
     __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
@@ -23,30 +12,7 @@ var __webpack_require__ = {};
 })();
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    Op: ()=>Op
-});
-var Op = /*#__PURE__*/ function(Op) {
-    Op["EQ"] = "eq";
-    Op["NEQ"] = "neq";
-    Op["GT"] = "gt";
-    Op["GTE"] = "gte";
-    Op["LT"] = "lt";
-    Op["LTE"] = "lte";
-    Op["IN"] = "in";
-    Op["NIN"] = "nin";
-    Op["CONTAINS"] = "contains";
-    Op["NOT_CONTAINS"] = "not_contains";
-    Op["IS_EMPTY"] = "is_empty";
-    Op["IS_NOT_EMPTY"] = "is_not_empty";
-    Op["IS_TRUE"] = "is_true";
-    Op["IS_FALSE"] = "is_false";
-    return Op;
-}({});
-exports.Op = __webpack_exports__.Op;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "Op"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/cjs/components/{prompt-editor-with-inputs/inputs-picker.js → coze-editor-extensions/extensions/inputs-tree.js}

@@ -24,14 +24,16 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    InputsTree: ()=>InputsTree,
     InputsPicker: ()=>InputsPicker
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const external_lodash_es_namespaceObject = require("lodash-es");
 const editor_namespaceObject = require("@flowgram.ai/editor");
+const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
-const index_js_namespaceObject = require("../../shared/index.js");
+const index_js_namespaceObject = require("../../../shared/index.js");
 function InputsPicker({ inputsValues, onSelect }) {
     const available = (0, editor_namespaceObject.useScopeAvailable)();
     const getArrayDrilldown = (type, depth = 1)=>{
@@ -95,9 +97,75 @@ function InputsPicker({ inputsValues, onSelect }) {
         onSelect: (v)=>onSelect(v)
     });
 }
+const DEFAULT_TRIGGER_CHARACTERS = [
+    '{',
+    '{}',
+    '@'
+];
+function InputsTree({ inputsValues, triggerCharacters = DEFAULT_TRIGGER_CHARACTERS }) {
+    const [posKey, setPosKey] = (0, external_react_namespaceObject.useState)('');
+    const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
+    const [position, setPosition] = (0, external_react_namespaceObject.useState)(-1);
+    const editor = (0, react_namespaceObject.useEditor)();
+    function insert(variablePath) {
+        const range = (0, react_namespaceObject.getCurrentMentionReplaceRange)(editor.$view.state);
+        if (!range) return;
+        let { from, to } = range;
+        while('{' === editor.$view.state.doc.sliceString(from - 1, from))from--;
+        while('}' === editor.$view.state.doc.sliceString(to, to + 1))to++;
+        editor.replaceText({
+            ...range,
+            text: '{{' + variablePath + '}}'
+        });
+        setVisible(false);
+    }
+    function handleOpenChange(e) {
+        setPosition(e.state.selection.main.head);
+        setVisible(e.value);
+    }
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
+                triggerCharacters: triggerCharacters,
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    style: {
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
+                    },
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InputsPicker, {
+                        inputsValues: inputsValues,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
 exports.InputsPicker = __webpack_exports__.InputsPicker;
+exports.InputsTree = __webpack_exports__.InputsTree;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "InputsPicker"
+    "InputsPicker",
+    "InputsTree"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/cjs/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tag.js

@@ -58,9 +58,10 @@ class VariableTagWidget extends view_namespaceObject.WidgetType {
             color: "amber",
             children: "Unknown"
         }));
-        const rootField = (0, external_lodash_es_namespaceObject.last)(v.parentFields);
+        const rootField = (0, external_lodash_es_namespaceObject.last)(v.parentFields) || v;
+        const isRoot = v === rootField;
         const rootTitle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIRootTitle, {
-            children: rootField?.meta.title ? `${rootField.meta.title} -` : ''
+            children: rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''
         });
         const rootIcon = this.renderIcon(rootField?.meta.icon);
         this.root.render(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
@@ -77,7 +78,7 @@ class VariableTagWidget extends view_namespaceObject.WidgetType {
                 prefixIcon: rootIcon,
                 children: [
                     rootTitle,
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
+                    !isRoot && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UIVarName, {
                         children: v?.key
                     })
                 ]

package/dist/cjs/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.js

@@ -31,7 +31,12 @@ const external_react_namespaceObject = require("react");
 const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
 const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const index_js_namespaceObject = require("../../variable-selector/index.js");
-function VariableTree() {
+const DEFAULT_TRIGGER_CHARACTER = [
+    '{',
+    '{}',
+    '@'
+];
+function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
     const [posKey, setPosKey] = (0, external_react_namespaceObject.useState)('');
     const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
     const [position, setPosition] = (0, external_react_namespaceObject.useState)(-1);
@@ -63,11 +68,7 @@ function VariableTree() {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
-                triggerCharacters: [
-                    '{',
-                    '{}',
-                    '@'
-                ],
+                triggerCharacters: triggerCharacters,
                 onOpenChange: handleOpenChange
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Popover, {
@@ -77,10 +78,15 @@ function VariableTree() {
                 rePosKey: posKey,
                 content: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                     style: {
-                        width: 300
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
                     },
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Tree, {
                         treeData: treeData,
+                        onExpand: (v)=>{
+                            setPosKey(String(Math.random()));
+                        },
                         onSelect: (v)=>{
                             insert(v);
                         }

package/dist/cjs/components/coze-editor-extensions/index.js

@@ -0,0 +1,86 @@
+"use strict";
+var __webpack_modules__ = {
+    "./extensions/inputs-tree": function(module) {
+        module.exports = import("./extensions/inputs-tree.js").then(function(module) {
+            return module;
+        });
+    },
+    "./extensions/variable-tag": function(module) {
+        module.exports = import("./extensions/variable-tag.js").then(function(module) {
+            return module;
+        });
+    },
+    "./extensions/variable-tree": function(module) {
+        module.exports = import("./extensions/variable-tree.js").then(function(module) {
+            return module;
+        });
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__webpack_exports__, {
+        EditorInputsTree: ()=>EditorInputsTree,
+        EditorVariableTagInject: ()=>EditorVariableTagInject,
+        EditorVariableTree: ()=>EditorVariableTree
+    });
+    const external_react_namespaceObject = require("react");
+    const index_js_namespaceObject = require("../../shared/index.js");
+    const EditorVariableTree = (0, index_js_namespaceObject.createInjectMaterial)(/*#__PURE__*/ (0, external_react_namespaceObject.lazy)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./extensions/variable-tree")).then((module)=>({
+                default: module.VariableTree
+            }))), {
+        renderKey: 'EditorVariableTree'
+    });
+    const EditorVariableTagInject = (0, index_js_namespaceObject.createInjectMaterial)(/*#__PURE__*/ (0, external_react_namespaceObject.lazy)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./extensions/variable-tag")).then((module)=>({
+                default: module.VariableTagInject
+            }))), {
+        renderKey: 'EditorVariableTagInject'
+    });
+    const EditorInputsTree = (0, index_js_namespaceObject.createInjectMaterial)(/*#__PURE__*/ (0, external_react_namespaceObject.lazy)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./extensions/inputs-tree")).then((module)=>({
+                default: module.InputsTree
+            }))), {
+        renderKey: 'EditorInputsTree'
+    });
+})();
+exports.EditorInputsTree = __webpack_exports__.EditorInputsTree;
+exports.EditorVariableTagInject = __webpack_exports__.EditorVariableTagInject;
+exports.EditorVariableTree = __webpack_exports__.EditorVariableTree;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "EditorInputsTree",
+    "EditorVariableTagInject",
+    "EditorVariableTree"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});