@flowgram.ai/form-materials 0.1.0-alpha.19 → 0.1.0-alpha.20

package/dist/cjs/components/assign-rows/index.js

@@ -33,10 +33,16 @@ const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 const semi_icons_namespaceObject = require("@douyinfe/semi-icons");
 const index_js_namespaceObject = require("../assign-row/index.js");
 function AssignRows(props) {
-    const { name, readonly } = props;
+    const { name, readonly, defaultValue } = props;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(editor_namespaceObject.FieldArray, {
         name: name,
-        children: ({ field })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        defaultValue: defaultValue,
+        children: ({ field })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 5
+                },
                 children: [
                     field.map((childField, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.AssignRow, {
                             readonly: readonly,

package/dist/cjs/components/blur-input/index.js

@@ -43,7 +43,10 @@ function BlurInput(props) {
         onChange: (value)=>{
             setValue(value);
         },
-        onBlur: (e)=>props.onChange?.(value, e)
+        onBlur: (e)=>{
+            props.onChange?.(value, e);
+            props.onBlur?.(e);
+        }
     });
 }
 exports.BlurInput = __webpack_exports__.BlurInput;

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

@@ -87,6 +87,10 @@ function useCondition({ leftSchema, operator, onClearOp, onClearRight, ruleConfi
     ]);
     const prevTargetSchemaRef = (0, external_react_namespaceObject.useRef)(void 0);
     (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!prevTargetSchemaRef.current) {
+            prevTargetSchemaRef.current = targetSchema;
+            return;
+        }
         if (prevTargetSchemaRef.current?.type !== targetSchema?.type) onClearRight?.();
         prevTargetSchemaRef.current = targetSchema;
     }, [

package/dist/cjs/components/coze-editor-extensions/extensions/variable-tag.js

@@ -109,12 +109,21 @@ class VariableTagWidget extends view_namespaceObject.WidgetType {
         this.toDispose.push(editor_namespaceObject.Disposable.create(()=>{
             this.root.unmount();
         }));
-        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
-            this.renderVariable(v);
-        }, {
+        const refresh = ()=>{
+            this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        };
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, refresh, {
+            triggerOnInit: false
+        }));
+        if (this.keyPath?.[0]) this.toDispose.push(this.scope.available.trackByKeyPath([
+            this.keyPath[0]
+        ], refresh, {
+            selector: (curr)=>({
+                    ...curr?.meta
+                }),
             triggerOnInit: false
         }));
-        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        refresh();
         return dom;
     }
     eq(other) {

package/dist/cjs/components/coze-editor-extensions/extensions/variable-tree.js

@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
+const external_lodash_es_namespaceObject = require("lodash-es");
 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");
@@ -65,6 +66,7 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
         visible
     ]);
     const treeData = (0, index_js_namespaceObject.useVariableTree)({});
+    const debounceUpdatePosKey = (0, external_react_namespaceObject.useCallback)((0, external_lodash_es_namespaceObject.debounce)(()=>setPosKey(String(Math.random())), 100), []);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Mention, {
@@ -84,8 +86,8 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
                     },
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Tree, {
                         treeData: treeData,
-                        onExpand: (v)=>{
-                            setPosKey(String(Math.random()));
+                        onExpand: ()=>{
+                            debounceUpdatePosKey();
                         },
                         onSelect: (v)=>{
                             insert(v);
@@ -94,7 +96,9 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
                 }),
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.PositionMirror, {
                     position: position,
-                    onChange: ()=>setPosKey(String(Math.random()))
+                    onChange: ()=>{
+                        setPosKey(String(Math.random()));
+                    }
                 })
             })
         ]

package/dist/cjs/components/display-outputs/index.js

@@ -32,10 +32,10 @@ const json_schema_namespaceObject = require("@flowgram.ai/json-schema");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const index_js_namespaceObject = require("../display-schema-tag/index.js");
 require("./styles.css");
-function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
+function DisplayOutputs({ value, showIconInTree, displayFromScope, style }) {
     const scope = (0, editor_namespaceObject.useCurrentScope)();
     const refresh = (0, editor_namespaceObject.useRefresh)();
-    (0, external_react_namespaceObject.useEffect)(()=>{
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
         if (!displayFromScope || !scope) return ()=>null;
         const disposable = scope.output.onListOrAnyVarChange(()=>{
             refresh();
@@ -56,6 +56,7 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     const childEntries = Object.entries(properties || {});
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "gedit-m-display-outputs-wrapper",
+        style: style,
         children: childEntries.map(([key, schema])=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.DisplaySchemaTag, {
                 title: key,
                 value: schema,

package/dist/cjs/components/index.js

@@ -70,7 +70,8 @@ __webpack_require__.d(__webpack_exports__, {
     getTypeSelectValue: ()=>external_type_selector_index_js_namespaceObject.getTypeSelectValue,
     DisplayInputsValues: ()=>external_display_inputs_values_index_js_namespaceObject.DisplayInputsValues,
     BatchOutputs: ()=>external_batch_outputs_index_js_namespaceObject.BatchOutputs,
-    VariableSelector: ()=>external_variable_selector_index_js_namespaceObject.VariableSelector
+    VariableSelector: ()=>external_variable_selector_index_js_namespaceObject.VariableSelector,
+    JsonSchemaCreator: ()=>external_json_schema_creator_index_js_namespaceObject.JsonSchemaCreator
 });
 const index_js_namespaceObject = require("./assign-row/index.js");
 const external_assign_rows_index_js_namespaceObject = require("./assign-rows/index.js");
@@ -93,6 +94,7 @@ const external_dynamic_value_input_index_js_namespaceObject = require("./dynamic
 const external_inputs_values_index_js_namespaceObject = require("./inputs-values/index.js");
 const external_inputs_values_tree_index_js_namespaceObject = require("./inputs-values-tree/index.js");
 const external_json_editor_with_variables_index_js_namespaceObject = require("./json-editor-with-variables/index.js");
+const external_json_schema_creator_index_js_namespaceObject = require("./json-schema-creator/index.js");
 const external_json_schema_editor_index_js_namespaceObject = require("./json-schema-editor/index.js");
 const external_prompt_editor_index_js_namespaceObject = require("./prompt-editor/index.js");
 const external_prompt_editor_with_inputs_index_js_namespaceObject = require("./prompt-editor-with-inputs/index.js");
@@ -130,6 +132,7 @@ exports.InputsValues = __webpack_exports__.InputsValues;
 exports.InputsValuesTree = __webpack_exports__.InputsValuesTree;
 exports.JsonCodeEditor = __webpack_exports__.JsonCodeEditor;
 exports.JsonEditorWithVariables = __webpack_exports__.JsonEditorWithVariables;
+exports.JsonSchemaCreator = __webpack_exports__.JsonSchemaCreator;
 exports.JsonSchemaEditor = __webpack_exports__.JsonSchemaEditor;
 exports.PromptEditor = __webpack_exports__.PromptEditor;
 exports.PromptEditorWithInputs = __webpack_exports__.PromptEditorWithInputs;
@@ -178,6 +181,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "InputsValuesTree",
     "JsonCodeEditor",
     "JsonEditorWithVariables",
+    "JsonSchemaCreator",
     "JsonSchemaEditor",
     "PromptEditor",
     "PromptEditorWithInputs",

package/dist/cjs/components/json-schema-creator/index.js

@@ -0,0 +1,36 @@
+"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__, {
+    JsonSchemaCreator: ()=>external_json_schema_creator_js_namespaceObject.JsonSchemaCreator
+});
+const external_json_schema_creator_js_namespaceObject = require("./json-schema-creator.js");
+exports.JsonSchemaCreator = __webpack_exports__.JsonSchemaCreator;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "JsonSchemaCreator"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-schema-creator/json-input-modal.js

@@ -0,0 +1,96 @@
+"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__, {
+    JsonInputModal: ()=>JsonInputModal
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const json_to_schema_js_namespaceObject = require("./utils/json-to-schema.js");
+const index_js_namespaceObject = require("../code-editor/index.js");
+const { Text } = semi_ui_namespaceObject.Typography;
+function JsonInputModal({ visible, onClose, onConfirm }) {
+    const [jsonInput, setJsonInput] = (0, external_react_namespaceObject.useState)('');
+    const [error, setError] = (0, external_react_namespaceObject.useState)('');
+    const handleConfirm = ()=>{
+        try {
+            const schema = (0, json_to_schema_js_namespaceObject.jsonToSchema)(jsonInput);
+            onConfirm(schema);
+            setJsonInput('');
+            setError('');
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(semi_ui_namespaceObject.Modal, {
+        visible: visible,
+        onCancel: onClose,
+        onOk: handleConfirm,
+        title: editor_namespaceObject.I18n.t('JSON to JSONSchema'),
+        okText: editor_namespaceObject.I18n.t('Generate'),
+        cancelText: editor_namespaceObject.I18n.t('Cancel'),
+        width: 600,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                style: {
+                    marginBottom: 8
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Text, {
+                    children: [
+                        editor_namespaceObject.I18n.t('Paste JSON data'),
+                        "："
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                style: {
+                    minHeight: 300
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.JsonCodeEditor, {
+                    value: jsonInput,
+                    onChange: (value)=>setJsonInput(value || '')
+                })
+            }),
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                style: {
+                    marginTop: 8
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
+                    type: "danger",
+                    children: error
+                })
+            })
+        ]
+    });
+}
+exports.JsonInputModal = __webpack_exports__.JsonInputModal;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "JsonInputModal"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-schema-creator/json-schema-creator.js

@@ -0,0 +1,60 @@
+"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__, {
+    JsonSchemaCreator: ()=>JsonSchemaCreator
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const editor_namespaceObject = require("@flowgram.ai/editor");
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const external_json_input_modal_js_namespaceObject = require("./json-input-modal.js");
+function JsonSchemaCreator({ onSchemaCreate }) {
+    const [visible, setVisible] = (0, external_react_namespaceObject.useState)(false);
+    const handleCreate = (schema)=>{
+        onSchemaCreate?.(schema);
+        setVisible(false);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Button, {
+                onClick: ()=>setVisible(true),
+                children: editor_namespaceObject.I18n.t('JSON to JSONSchema')
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_json_input_modal_js_namespaceObject.JsonInputModal, {
+                visible: visible,
+                onClose: ()=>setVisible(false),
+                onConfirm: handleCreate
+            })
+        ]
+    });
+}
+exports.JsonSchemaCreator = __webpack_exports__.JsonSchemaCreator;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "JsonSchemaCreator"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/json-schema-creator/utils/json-to-schema.js

@@ -0,0 +1,67 @@
+"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__, {
+    jsonToSchema: ()=>jsonToSchema
+});
+function jsonToSchema(jsonString) {
+    const data = JSON.parse(jsonString);
+    return generateSchema(data);
+}
+function generateSchema(value) {
+    if (null === value) return {
+        type: 'string'
+    };
+    if (Array.isArray(value)) {
+        const schema = {
+            type: 'array'
+        };
+        if (value.length > 0) schema.items = generateSchema(value[0]);
+        return schema;
+    }
+    if ('object' == typeof value) {
+        const schema = {
+            type: 'object',
+            properties: {},
+            required: []
+        };
+        for (const [key, val] of Object.entries(value)){
+            schema.properties[key] = generateSchema(val);
+            schema.required.push(key);
+        }
+        return schema;
+    }
+    const type = typeof value;
+    return {
+        type: type
+    };
+}
+exports.jsonToSchema = __webpack_exports__.jsonToSchema;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "jsonToSchema"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/effects/validate-when-variable-sync/index.js

@@ -26,15 +26,15 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     validateWhenVariableSync: ()=>validateWhenVariableSync
 });
-const external_lodash_es_namespaceObject = require("lodash-es");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const validateWhenVariableSync = ({ scope } = {})=>[
         {
             event: editor_namespaceObject.DataEvent.onValueInit,
-            effect: ({ context, form })=>{
+            effect: ({ context, form, name })=>{
                 const nodeScope = 'private' === scope ? (0, editor_namespaceObject.getNodePrivateScope)(context.node) : (0, editor_namespaceObject.getNodeScope)(context.node);
                 const disposable = nodeScope.available.onListOrAnyVarChange(()=>{
-                    if (!(0, external_lodash_es_namespaceObject.isEmpty)(form.state.errors)) form.validate();
+                    const errorKeys = Object.entries(form.state.errors || {}).filter(([_, errors])=>errors?.length > 0).filter(([key])=>key.startsWith(name) || name.startsWith(key)).map(([key])=>key);
+                    if (errorKeys.length > 0) form.validate();
                 });
                 return ()=>disposable.dispose();
             }

package/dist/cjs/index.js

@@ -62,6 +62,7 @@ __webpack_require__.d(__webpack_exports__, {
     BatchOutputs: ()=>index_js_namespaceObject.BatchOutputs,
     polyfillCreateRoot: ()=>external_shared_index_js_namespaceObject.polyfillCreateRoot,
     VariableSelector: ()=>index_js_namespaceObject.VariableSelector,
+    JsonSchemaCreator: ()=>index_js_namespaceObject.JsonSchemaCreator,
     BatchVariableSelector: ()=>index_js_namespaceObject.BatchVariableSelector,
     AssignRow: ()=>index_js_namespaceObject.AssignRow,
     createInferAssignPlugin: ()=>external_form_plugins_index_js_namespaceObject.createInferAssignPlugin,
@@ -140,6 +141,7 @@ exports.InputsValues = __webpack_exports__.InputsValues;
 exports.InputsValuesTree = __webpack_exports__.InputsValuesTree;
 exports.JsonCodeEditor = __webpack_exports__.JsonCodeEditor;
 exports.JsonEditorWithVariables = __webpack_exports__.JsonEditorWithVariables;
+exports.JsonSchemaCreator = __webpack_exports__.JsonSchemaCreator;
 exports.JsonSchemaEditor = __webpack_exports__.JsonSchemaEditor;
 exports.JsonSchemaTypePresetProvider = __webpack_exports__.JsonSchemaTypePresetProvider;
 exports.JsonSchemaUtils = __webpack_exports__.JsonSchemaUtils;
@@ -218,6 +220,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "InputsValuesTree",
     "JsonCodeEditor",
     "JsonEditorWithVariables",
+    "JsonSchemaCreator",
     "JsonSchemaEditor",
     "JsonSchemaTypePresetProvider",
     "JsonSchemaUtils",

package/dist/esm/components/assign-rows/index.mjs

@@ -1,14 +1,20 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { FieldArray } from "@flowgram.ai/editor";
 import { Button } from "@douyinfe/semi-ui";
 import { IconPlus } from "@douyinfe/semi-icons";
 import { AssignRow } from "../assign-row/index.mjs";
 function AssignRows(props) {
-    const { name, readonly } = props;
+    const { name, readonly, defaultValue } = props;
     return /*#__PURE__*/ jsx(FieldArray, {
         name: name,
-        children: ({ field })=>/*#__PURE__*/ jsxs(Fragment, {
+        defaultValue: defaultValue,
+        children: ({ field })=>/*#__PURE__*/ jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 5
+                },
                 children: [
                     field.map((childField, index)=>/*#__PURE__*/ jsx(AssignRow, {
                             readonly: readonly,

package/dist/esm/components/blur-input/index.mjs

@@ -15,7 +15,10 @@ function BlurInput(props) {
         onChange: (value)=>{
             setValue(value);
         },
-        onBlur: (e)=>props.onChange?.(value, e)
+        onBlur: (e)=>{
+            props.onChange?.(value, e);
+            props.onBlur?.(e);
+        }
     });
 }
 export { BlurInput };

package/dist/esm/components/condition-context/hooks/use-condition.mjs

@@ -59,6 +59,10 @@ function useCondition({ leftSchema, operator, onClearOp, onClearRight, ruleConfi
     ]);
     const prevTargetSchemaRef = useRef(void 0);
     useEffect(()=>{
+        if (!prevTargetSchemaRef.current) {
+            prevTargetSchemaRef.current = targetSchema;
+            return;
+        }
         if (prevTargetSchemaRef.current?.type !== targetSchema?.type) onClearRight?.();
         prevTargetSchemaRef.current = targetSchema;
     }, [

package/dist/esm/components/coze-editor-extensions/extensions/variable-tag.mjs

@@ -81,12 +81,21 @@ class VariableTagWidget extends WidgetType {
         this.toDispose.push(Disposable.create(()=>{
             this.root.unmount();
         }));
-        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, (v)=>{
-            this.renderVariable(v);
-        }, {
+        const refresh = ()=>{
+            this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        };
+        this.toDispose.push(this.scope.available.trackByKeyPath(this.keyPath, refresh, {
+            triggerOnInit: false
+        }));
+        if (this.keyPath?.[0]) this.toDispose.push(this.scope.available.trackByKeyPath([
+            this.keyPath[0]
+        ], refresh, {
+            selector: (curr)=>({
+                    ...curr?.meta
+                }),
             triggerOnInit: false
         }));
-        this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+        refresh();
         return dom;
     }
     eq(other) {

package/dist/esm/components/coze-editor-extensions/extensions/variable-tree.mjs

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { debounce } from "lodash-es";
 import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
 import { Popover, Tree } from "@douyinfe/semi-ui";
 import { useVariableTree } from "../../variable-selector/index.mjs";
@@ -37,6 +38,7 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
         visible
     ]);
     const treeData = useVariableTree({});
+    const debounceUpdatePosKey = useCallback(debounce(()=>setPosKey(String(Math.random())), 100), []);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Mention, {
@@ -56,8 +58,8 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
                     },
                     children: /*#__PURE__*/ jsx(Tree, {
                         treeData: treeData,
-                        onExpand: (v)=>{
-                            setPosKey(String(Math.random()));
+                        onExpand: ()=>{
+                            debounceUpdatePosKey();
                         },
                         onSelect: (v)=>{
                             insert(v);
@@ -66,7 +68,9 @@ function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
                 }),
                 children: /*#__PURE__*/ jsx(PositionMirror, {
                     position: position,
-                    onChange: ()=>setPosKey(String(Math.random()))
+                    onChange: ()=>{
+                        setPosKey(String(Math.random()));
+                    }
                 })
             })
         ]

package/dist/esm/components/display-outputs/index.mjs

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 import { JsonSchemaUtils } from "@flowgram.ai/json-schema";
 import { useCurrentScope, useRefresh } from "@flowgram.ai/editor";
 import { DisplaySchemaTag } from "../display-schema-tag/index.mjs";
 import "./styles.css";
-function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
+function DisplayOutputs({ value, showIconInTree, displayFromScope, style }) {
     const scope = useCurrentScope();
     const refresh = useRefresh();
-    useEffect(()=>{
+    useLayoutEffect(()=>{
         if (!displayFromScope || !scope) return ()=>null;
         const disposable = scope.output.onListOrAnyVarChange(()=>{
             refresh();
@@ -28,6 +28,7 @@ function DisplayOutputs({ value, showIconInTree, displayFromScope }) {
     const childEntries = Object.entries(properties || {});
     return /*#__PURE__*/ jsx("div", {
         className: "gedit-m-display-outputs-wrapper",
+        style: style,
         children: childEntries.map(([key, schema])=>/*#__PURE__*/ jsx(DisplaySchemaTag, {
                 title: key,
                 value: schema,

package/dist/esm/components/index.mjs

@@ -19,6 +19,7 @@ import { DynamicValueInput, InjectDynamicValueInput } from "./dynamic-value-inpu
 import { InputsValues } from "./inputs-values/index.mjs";
 import { InputsValuesTree } from "./inputs-values-tree/index.mjs";
 import { JsonEditorWithVariables } from "./json-editor-with-variables/index.mjs";
+import { JsonSchemaCreator } from "./json-schema-creator/index.mjs";
 import { JsonSchemaEditor } from "./json-schema-editor/index.mjs";
 import { PromptEditor } from "./prompt-editor/index.mjs";
 import { PromptEditorWithInputs } from "./prompt-editor-with-inputs/index.mjs";
@@ -26,4 +27,4 @@ import { PromptEditorWithVariables } from "./prompt-editor-with-variables/index.
 import { SQLEditorWithVariables } from "./sql-editor-with-variables/index.mjs";
 import { InjectTypeSelector, TypeSelector, getTypeSelectValue, parseTypeSelectValue } from "./type-selector/index.mjs";
 import { InjectVariableSelector, VariableSelector, VariableSelectorProvider, useVariableTree } from "./variable-selector/index.mjs";
-export { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaEditor, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, getTypeSelectValue, parseTypeSelectValue, useCondition, useConditionContext, useVariableTree };
+export { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaCreator, JsonSchemaEditor, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, getTypeSelectValue, parseTypeSelectValue, useCondition, useConditionContext, useVariableTree };

package/dist/esm/components/json-schema-creator/index.mjs

@@ -0,0 +1,2 @@
+import { JsonSchemaCreator } from "./json-schema-creator.mjs";
+export { JsonSchemaCreator };