@flowgram.ai/form-materials 0.4.10 → 0.4.11

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

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __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, {
@@ -37,8 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
-const input_namespaceObject = require("@douyinfe/semi-ui/lib/es/input");
-var input_default = /*#__PURE__*/ __webpack_require__.n(input_namespaceObject);
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
 function BlurInput(props) {
     const [value, setValue] = (0, external_react_namespaceObject.useState)('');
     (0, external_react_namespaceObject.useEffect)(()=>{
@@ -46,7 +36,7 @@ function BlurInput(props) {
     }, [
         props.value
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_default(), {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Input, {
         ...props,
         value: value,
         onChange: (value)=>{

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-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,7 +78,9 @@ 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,

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
+});

package/dist/cjs/components/index.js

@@ -32,6 +32,7 @@ __webpack_require__.d(__webpack_exports__, {
     DynamicValueInput: ()=>external_dynamic_value_input_index_js_namespaceObject.DynamicValueInput,
     AssignRows: ()=>external_assign_rows_index_js_namespaceObject.AssignRows,
     ConditionRow: ()=>external_condition_row_index_js_namespaceObject.ConditionRow,
+    EditorInputsTree: ()=>external_coze_editor_extensions_index_js_namespaceObject.EditorInputsTree,
     InjectDynamicValueInput: ()=>external_dynamic_value_input_index_js_namespaceObject.InjectDynamicValueInput,
     PromptEditorWithVariables: ()=>external_prompt_editor_with_variables_index_js_namespaceObject.PromptEditorWithVariables,
     JsonEditorWithVariables: ()=>external_json_editor_with_variables_index_js_namespaceObject.JsonEditorWithVariables,
@@ -48,11 +49,13 @@ __webpack_require__.d(__webpack_exports__, {
     VariableSelectorProvider: ()=>external_variable_selector_index_js_namespaceObject.VariableSelectorProvider,
     DisplayFlowValue: ()=>external_display_flow_value_index_js_namespaceObject.DisplayFlowValue,
     JsonSchemaEditor: ()=>external_json_schema_editor_index_js_namespaceObject.JsonSchemaEditor,
-    PromptEditorWithInputs: ()=>external_prompt_editor_with_inputs_index_js_namespaceObject.PromptEditorWithInputs,
+    EditorVariableTagInject: ()=>external_coze_editor_extensions_index_js_namespaceObject.EditorVariableTagInject,
     InputsValuesTree: ()=>external_inputs_values_tree_index_js_namespaceObject.InputsValuesTree,
+    PromptEditorWithInputs: ()=>external_prompt_editor_with_inputs_index_js_namespaceObject.PromptEditorWithInputs,
     parseTypeSelectValue: ()=>external_type_selector_index_js_namespaceObject.parseTypeSelectValue,
     CodeEditor: ()=>external_code_editor_index_js_namespaceObject.CodeEditor,
     DisplayInputsValueAllInTag: ()=>external_display_inputs_values_index_js_namespaceObject.DisplayInputsValueAllInTag,
+    EditorVariableTree: ()=>external_coze_editor_extensions_index_js_namespaceObject.EditorVariableTree,
     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,
@@ -67,6 +70,7 @@ const external_code_editor_index_js_namespaceObject = require("./code-editor/ind
 const external_code_editor_mini_index_js_namespaceObject = require("./code-editor-mini/index.js");
 const external_condition_row_index_js_namespaceObject = require("./condition-row/index.js");
 const external_constant_input_index_js_namespaceObject = require("./constant-input/index.js");
+const external_coze_editor_extensions_index_js_namespaceObject = require("./coze-editor-extensions/index.js");
 const external_db_condition_row_index_js_namespaceObject = require("./db-condition-row/index.js");
 const external_display_flow_value_index_js_namespaceObject = require("./display-flow-value/index.js");
 const external_display_inputs_values_index_js_namespaceObject = require("./display-inputs-values/index.js");
@@ -100,6 +104,9 @@ exports.DisplayOutputs = __webpack_exports__.DisplayOutputs;
 exports.DisplaySchemaTag = __webpack_exports__.DisplaySchemaTag;
 exports.DisplaySchemaTree = __webpack_exports__.DisplaySchemaTree;
 exports.DynamicValueInput = __webpack_exports__.DynamicValueInput;
+exports.EditorInputsTree = __webpack_exports__.EditorInputsTree;
+exports.EditorVariableTagInject = __webpack_exports__.EditorVariableTagInject;
+exports.EditorVariableTree = __webpack_exports__.EditorVariableTree;
 exports.InjectDynamicValueInput = __webpack_exports__.InjectDynamicValueInput;
 exports.InjectTypeSelector = __webpack_exports__.InjectTypeSelector;
 exports.InjectVariableSelector = __webpack_exports__.InjectVariableSelector;
@@ -134,6 +141,9 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "DisplaySchemaTag",
     "DisplaySchemaTree",
     "DynamicValueInput",
+    "EditorInputsTree",
+    "EditorVariableTagInject",
+    "EditorVariableTree",
     "InjectDynamicValueInput",
     "InjectTypeSelector",
     "InjectVariableSelector",

package/dist/cjs/components/json-editor-with-variables/editor.js

@@ -30,9 +30,11 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 require("react");
 const editor_namespaceObject = require("@flowgram.ai/editor");
 const preset_code_namespaceObject = require("@flowgram.ai/coze-editor/preset-code");
-const index_js_namespaceObject = require("../code-editor/index.js");
-const variable_tree_js_namespaceObject = require("./extensions/variable-tree.js");
-const variable_tag_js_namespaceObject = require("./extensions/variable-tag.js");
+const index_js_namespaceObject = require("../coze-editor-extensions/index.js");
+const external_code_editor_index_js_namespaceObject = require("../code-editor/index.js");
+const TRIGGER_CHARACTERS = [
+    '@'
+];
 function findAllMatches(inputString, regex) {
     const globalRegex = new RegExp(regex, regex.flags.includes('g') ? regex.flags : regex.flags + 'g');
     let match;
@@ -58,7 +60,7 @@ const transformer = (0, preset_code_namespaceObject.transformerCreator)((text)=>
     return text;
 });
 function JsonEditorWithVariables(props) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_js_namespaceObject.CodeEditor, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_code_editor_index_js_namespaceObject.CodeEditor, {
         languageId: "json",
         activeLinePlaceholder: editor_namespaceObject.I18n.t("Press '@' to Select variable"),
         ...props,
@@ -67,8 +69,10 @@ function JsonEditorWithVariables(props) {
             ...props.options || {}
         },
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(variable_tree_js_namespaceObject.VariableTree, {}),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(variable_tag_js_namespaceObject.VariableTagInject, {})
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EditorVariableTree, {
+                triggerCharacters: TRIGGER_CHARACTERS
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EditorVariableTagInject, {})
         ]
     });
 }

package/dist/cjs/components/prompt-editor-with-inputs/editor.js

@@ -29,11 +29,11 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 require("react");
 const index_js_namespaceObject = require("../prompt-editor/index.js");
-const inputs_tree_js_namespaceObject = require("./extensions/inputs-tree.js");
+const external_coze_editor_extensions_index_js_namespaceObject = require("../coze-editor-extensions/index.js");
 function PromptEditorWithInputs({ inputsValues, ...restProps }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.PromptEditor, {
         ...restProps,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(inputs_tree_js_namespaceObject.InputsTree, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_coze_editor_extensions_index_js_namespaceObject.EditorInputsTree, {
             inputsValues: inputsValues
         })
     });

package/dist/cjs/components/prompt-editor-with-variables/editor.js

@@ -29,14 +29,13 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 require("react");
 const index_js_namespaceObject = require("../prompt-editor/index.js");
-const variable_tree_js_namespaceObject = require("./extensions/variable-tree.js");
-const variable_tag_js_namespaceObject = require("./extensions/variable-tag.js");
+const external_coze_editor_extensions_index_js_namespaceObject = require("../coze-editor-extensions/index.js");
 function PromptEditorWithVariables(props) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_js_namespaceObject.PromptEditor, {
         ...props,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(variable_tree_js_namespaceObject.VariableTree, {}),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(variable_tag_js_namespaceObject.VariableTagInject, {})
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_coze_editor_extensions_index_js_namespaceObject.EditorVariableTree, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_coze_editor_extensions_index_js_namespaceObject.EditorVariableTagInject, {})
         ]
     });
 }

package/dist/cjs/components/variable-selector/index.js

@@ -65,6 +65,7 @@ const VariableSelector = ({ value, config = {}, onChange, style, readonly = fals
         });
         return icon;
     };
+    console.log('debugger treeValue', treeValue);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_styles_js_namespaceObject.UITreeSelect, {
             dropdownMatchSelectWidth: false,

package/dist/cjs/index.js

@@ -45,6 +45,7 @@ __webpack_require__.d(__webpack_exports__, {
     useVariableTree: ()=>index_js_namespaceObject.useVariableTree,
     formatLegacyRefOnSubmit: ()=>external_shared_index_js_namespaceObject.formatLegacyRefOnSubmit,
     DisplayFlowValue: ()=>index_js_namespaceObject.DisplayFlowValue,
+    EditorVariableTagInject: ()=>index_js_namespaceObject.EditorVariableTagInject,
     formatLegacyRefToNewRef: ()=>external_shared_index_js_namespaceObject.formatLegacyRefToNewRef,
     formatLegacyRefOnInit: ()=>external_shared_index_js_namespaceObject.formatLegacyRefOnInit,
     CodeEditor: ()=>index_js_namespaceObject.CodeEditor,
@@ -59,10 +60,11 @@ __webpack_require__.d(__webpack_exports__, {
     CodeEditorMini: ()=>index_js_namespaceObject.CodeEditorMini,
     DBConditionRow: ()=>index_js_namespaceObject.DBConditionRow,
     DynamicValueInput: ()=>index_js_namespaceObject.DynamicValueInput,
+    EditorInputsTree: ()=>index_js_namespaceObject.EditorInputsTree,
     PromptEditorWithVariables: ()=>index_js_namespaceObject.PromptEditorWithVariables,
     lazySuspense: ()=>external_shared_index_js_namespaceObject.lazySuspense,
-    unstableSetCreateRoot: ()=>external_shared_index_js_namespaceObject.unstableSetCreateRoot,
     provideJsonSchemaOutputs: ()=>external_effects_index_js_namespaceObject.provideJsonSchemaOutputs,
+    unstableSetCreateRoot: ()=>external_shared_index_js_namespaceObject.unstableSetCreateRoot,
     createInferInputsPlugin: ()=>external_form_plugins_index_js_namespaceObject.createInferInputsPlugin,
     InjectVariableSelector: ()=>index_js_namespaceObject.InjectVariableSelector,
     DisplayOutputs: ()=>index_js_namespaceObject.DisplayOutputs,
@@ -82,6 +84,7 @@ __webpack_require__.d(__webpack_exports__, {
     InputsValuesTree: ()=>index_js_namespaceObject.InputsValuesTree,
     parseTypeSelectValue: ()=>index_js_namespaceObject.parseTypeSelectValue,
     syncVariableTitle: ()=>external_effects_index_js_namespaceObject.syncVariableTitle,
+    EditorVariableTree: ()=>index_js_namespaceObject.EditorVariableTree,
     JsonSchemaUtils: ()=>external_plugins_index_js_namespaceObject.JsonSchemaUtils,
     DisplayInputsValues: ()=>index_js_namespaceObject.DisplayInputsValues,
     autoRenameRefEffect: ()=>external_effects_index_js_namespaceObject.autoRenameRefEffect,
@@ -112,6 +115,9 @@ exports.DisplayOutputs = __webpack_exports__.DisplayOutputs;
 exports.DisplaySchemaTag = __webpack_exports__.DisplaySchemaTag;
 exports.DisplaySchemaTree = __webpack_exports__.DisplaySchemaTree;
 exports.DynamicValueInput = __webpack_exports__.DynamicValueInput;
+exports.EditorInputsTree = __webpack_exports__.EditorInputsTree;
+exports.EditorVariableTagInject = __webpack_exports__.EditorVariableTagInject;
+exports.EditorVariableTree = __webpack_exports__.EditorVariableTree;
 exports.FlowValueUtils = __webpack_exports__.FlowValueUtils;
 exports.InjectDynamicValueInput = __webpack_exports__.InjectDynamicValueInput;
 exports.InjectTypeSelector = __webpack_exports__.InjectTypeSelector;
@@ -176,6 +182,9 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "DisplaySchemaTag",
     "DisplaySchemaTree",
     "DynamicValueInput",
+    "EditorInputsTree",
+    "EditorVariableTagInject",
+    "EditorVariableTree",
     "FlowValueUtils",
     "InjectDynamicValueInput",
     "InjectTypeSelector",

package/dist/cjs/shared/inject-material/index.js

@@ -39,13 +39,13 @@ const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 const editor_namespaceObject = require("@flowgram.ai/editor");
 function createInjectMaterial(Component, params) {
+    const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
     const InjectComponent = (props)=>{
         const container = (0, editor_namespaceObject.usePlaygroundContainer)();
         if (!container?.isBound(editor_namespaceObject.FlowRendererRegistry)) return /*#__PURE__*/ external_react_default().createElement(Component, {
             ...props
         });
         const rendererRegistry = container.get(editor_namespaceObject.FlowRendererRegistry);
-        const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
         const renderer = rendererRegistry.tryToGetRendererComponent(renderKey);
         if (renderer?.type !== editor_namespaceObject.FlowRendererComponentType.REACT) return /*#__PURE__*/ external_react_default().createElement(Component, {
             ...props
@@ -54,6 +54,7 @@ function createInjectMaterial(Component, params) {
             ...props
         });
     };
+    InjectComponent.renderKey = renderKey;
     return InjectComponent;
 }
 exports.createInjectMaterial = __webpack_exports__.createInjectMaterial;

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import input from "@douyinfe/semi-ui/lib/es/input";
+import { Input } from "@douyinfe/semi-ui";
 function BlurInput(props) {
     const [value, setValue] = useState('');
     useEffect(()=>{
@@ -8,7 +8,7 @@ function BlurInput(props) {
     }, [
         props.value
     ]);
-    return /*#__PURE__*/ jsx(input, {
+    return /*#__PURE__*/ jsx(Input, {
         ...props,
         value: value,
         onChange: (value)=>{

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

@@ -0,0 +1,135 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { isPlainObject, last } from "lodash-es";
+import { ASTMatch, useScopeAvailable } from "@flowgram.ai/editor";
+import { Mention, PositionMirror, getCurrentMentionReplaceRange, useEditor } from "@flowgram.ai/coze-editor/react";
+import { Popover, Tree } from "@douyinfe/semi-ui";
+import { FlowValueUtils } from "../../../shared/index.mjs";
+function InputsPicker({ inputsValues, onSelect }) {
+    const available = useScopeAvailable();
+    const getArrayDrilldown = (type, depth = 1)=>{
+        if (ASTMatch.isArray(type.items)) return getArrayDrilldown(type.items, depth + 1);
+        return {
+            type: type.items,
+            depth: depth
+        };
+    };
+    const renderVariable = (variable, keyPath)=>{
+        let type = variable?.type;
+        let children;
+        if (ASTMatch.isObject(type)) children = (type.properties || []).map((_property)=>renderVariable(_property, [
+                ...keyPath,
+                _property.key
+            ])).filter(Boolean);
+        if (ASTMatch.isArray(type)) {
+            const drilldown = getArrayDrilldown(type);
+            if (ASTMatch.isObject(drilldown.type)) children = (drilldown.type.properties || []).map((_property)=>renderVariable(_property, [
+                    ...keyPath,
+                    ...new Array(drilldown.depth).fill('[0]'),
+                    _property.key
+                ])).filter(Boolean);
+        }
+        const key = keyPath.map((_key, idx)=>'[0]' === _key || 0 === idx ? _key : `.${_key}`).join('');
+        return {
+            key: key,
+            label: last(keyPath),
+            value: key,
+            children
+        };
+    };
+    const getTreeData = (value, keyPath)=>{
+        const currKey = keyPath.join('.');
+        if (FlowValueUtils.isFlowValue(value)) {
+            if (FlowValueUtils.isRef(value)) {
+                const variable = available.getByKeyPath(value.content || []);
+                if (variable) return renderVariable(variable, keyPath);
+            }
+            return {
+                key: currKey,
+                value: currKey,
+                label: last(keyPath)
+            };
+        }
+        if (isPlainObject(value)) return {
+            key: currKey,
+            value: currKey,
+            label: last(keyPath),
+            children: Object.entries(value).map(([key, value])=>getTreeData(value, [
+                    ...keyPath,
+                    key
+                ])).filter(Boolean)
+        };
+    };
+    const treeData = useMemo(()=>Object.entries(inputsValues).map(([key, value])=>getTreeData(value, [
+                key
+            ])).filter(Boolean), []);
+    return /*#__PURE__*/ jsx(Tree, {
+        treeData: treeData,
+        onSelect: (v)=>onSelect(v)
+    });
+}
+const DEFAULT_TRIGGER_CHARACTERS = [
+    '{',
+    '{}',
+    '@'
+];
+function InputsTree({ inputsValues, triggerCharacters = DEFAULT_TRIGGER_CHARACTERS }) {
+    const [posKey, setPosKey] = useState('');
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState(-1);
+    const editor = useEditor();
+    function insert(variablePath) {
+        const range = 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);
+    }
+    useEffect(()=>{
+        if (!editor) return;
+    }, [
+        editor,
+        visible
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Mention, {
+                triggerCharacters: triggerCharacters,
+                onOpenChange: handleOpenChange
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                visible: visible,
+                trigger: "custom",
+                position: "topLeft",
+                rePosKey: posKey,
+                content: /*#__PURE__*/ jsx("div", {
+                    style: {
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
+                    },
+                    children: /*#__PURE__*/ jsx(InputsPicker, {
+                        inputsValues: inputsValues,
+                        onSelect: (v)=>{
+                            insert(v);
+                        }
+                    })
+                }),
+                children: /*#__PURE__*/ jsx(PositionMirror, {
+                    position: position,
+                    onChange: ()=>setPosKey(String(Math.random()))
+                })
+            })
+        ]
+    });
+}
+export { InputsPicker, InputsTree };

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

@@ -3,7 +3,12 @@ import { useEffect, useState } from "react";
 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";
-function VariableTree() {
+const DEFAULT_TRIGGER_CHARACTER = [
+    '{',
+    '{}',
+    '@'
+];
+function VariableTree({ triggerCharacters = DEFAULT_TRIGGER_CHARACTER }) {
     const [posKey, setPosKey] = useState('');
     const [visible, setVisible] = useState(false);
     const [position, setPosition] = useState(-1);
@@ -35,11 +40,7 @@ function VariableTree() {
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Mention, {
-                triggerCharacters: [
-                    '{',
-                    '{}',
-                    '@'
-                ],
+                triggerCharacters: triggerCharacters,
                 onOpenChange: handleOpenChange
             }),
             /*#__PURE__*/ jsx(Popover, {
@@ -49,7 +50,9 @@ function VariableTree() {
                 rePosKey: posKey,
                 content: /*#__PURE__*/ jsx("div", {
                     style: {
-                        width: 300
+                        width: 300,
+                        maxHeight: 300,
+                        overflowY: 'auto'
                     },
                     children: /*#__PURE__*/ jsx(Tree, {
                         treeData: treeData,