@flowgram.ai/form-materials 1.0.2 → 1.0.6

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/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/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/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 };

package/dist/esm/components/json-schema-creator/json-input-modal.mjs

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Modal, Typography } from "@douyinfe/semi-ui";
+import { jsonToSchema } from "./utils/json-to-schema.mjs";
+import { JsonCodeEditor } from "../code-editor/index.mjs";
+const { Text } = Typography;
+function JsonInputModal({ visible, onClose, onConfirm }) {
+    const [jsonInput, setJsonInput] = useState('');
+    const [error, setError] = useState('');
+    const handleConfirm = ()=>{
+        try {
+            const schema = jsonToSchema(jsonInput);
+            onConfirm(schema);
+            setJsonInput('');
+            setError('');
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+    return /*#__PURE__*/ jsxs(Modal, {
+        visible: visible,
+        onCancel: onClose,
+        onOk: handleConfirm,
+        title: I18n.t('JSON to JSONSchema'),
+        okText: I18n.t('Generate'),
+        cancelText: I18n.t('Cancel'),
+        width: 600,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    marginBottom: 8
+                },
+                children: /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        I18n.t('Paste JSON data'),
+                        "："
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    minHeight: 300
+                },
+                children: /*#__PURE__*/ jsx(JsonCodeEditor, {
+                    value: jsonInput,
+                    onChange: (value)=>setJsonInput(value || '')
+                })
+            }),
+            error && /*#__PURE__*/ jsx("div", {
+                style: {
+                    marginTop: 8
+                },
+                children: /*#__PURE__*/ jsx(Text, {
+                    type: "danger",
+                    children: error
+                })
+            })
+        ]
+    });
+}
+export { JsonInputModal };

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

@@ -0,0 +1,26 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Button } from "@douyinfe/semi-ui";
+import { JsonInputModal } from "./json-input-modal.mjs";
+function JsonSchemaCreator({ onSchemaCreate }) {
+    const [visible, setVisible] = useState(false);
+    const handleCreate = (schema)=>{
+        onSchemaCreate?.(schema);
+        setVisible(false);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                onClick: ()=>setVisible(true),
+                children: I18n.t('JSON to JSONSchema')
+            }),
+            /*#__PURE__*/ jsx(JsonInputModal, {
+                visible: visible,
+                onClose: ()=>setVisible(false),
+                onConfirm: handleCreate
+            })
+        ]
+    });
+}
+export { JsonSchemaCreator };

package/dist/esm/components/json-schema-creator/utils/json-to-schema.mjs

@@ -0,0 +1,33 @@
+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
+    };
+}
+export { jsonToSchema };

package/dist/esm/index.mjs

@@ -1,8 +1,8 @@
-import { 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 } from "./components/index.mjs";
+import { 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 } from "./components/index.mjs";
 import { autoRenameRefEffect, listenRefSchemaChange, listenRefValueChange, provideBatchInputEffect, provideJsonSchemaOutputs, syncVariableTitle, validateWhenVariableSync } from "./effects/index.mjs";
 import { createBatchOutputsFormPlugin, createInferAssignPlugin, createInferInputsPlugin, provideBatchOutputsEffect } from "./form-plugins/index.mjs";
 import { useObjectList } from "./hooks/index.mjs";
 import { JsonSchemaTypePresetProvider, JsonSchemaUtils, createDisableDeclarationPlugin, createTypePresetPlugin, useTypeManager } from "./plugins/index.mjs";
 import { FlowValueUtils, createInjectMaterial, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, polyfillCreateRoot, unstableSetCreateRoot, withSuspense } from "./shared/index.mjs";
 import { validateFlowValue } from "./validate/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, FlowValueUtils, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, JsonSchemaUtils, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, polyfillCreateRoot, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, unstableSetCreateRoot, useCondition, useConditionContext, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync, withSuspense };
+export { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, FlowValueUtils, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaCreator, JsonSchemaEditor, JsonSchemaTypePresetProvider, JsonSchemaUtils, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, polyfillCreateRoot, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, unstableSetCreateRoot, useCondition, useConditionContext, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync, withSuspense };

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/components/index.ts","../src/components/assign-row/index.tsx","../src/components/assign-row/types.ts","../src/components/assign-rows/index.tsx","../src/components/batch-outputs/index.tsx","../src/components/batch-outputs/types.ts","../src/components/batch-variable-selector/index.tsx","../src/components/blur-input/index.tsx","../src/components/code-editor/editor-all.tsx","../src/components/code-editor/editor-json.tsx","../src/components/code-editor/editor-python.tsx","../src/components/code-editor/editor-shell.tsx","../src/components/code-editor/editor-sql.tsx","../src/components/code-editor/editor-ts.tsx","../src/components/code-editor/editor.tsx","../src/components/code-editor/factory.tsx","../src/components/code-editor/index.tsx","../src/components/code-editor/utils.ts","../src/components/code-editor/theme/dark.ts","../src/components/code-editor/theme/index.ts","../src/components/code-editor/theme/light.ts","../src/components/code-editor-mini/index.tsx","../src/components/condition-context/context.tsx","../src/components/condition-context/index.tsx","../src/components/condition-context/op.ts","../src/components/condition-context/types.ts","../src/components/condition-context/hooks/use-condition.tsx","../src/components/condition-row/index.tsx","../src/components/condition-row/types.ts","../src/components/constant-input/index.tsx","../src/components/constant-input/types.ts","../src/components/coze-editor-extensions/index.tsx","../src/components/coze-editor-extensions/extensions/inputs-tree.tsx","../src/components/coze-editor-extensions/extensions/variable-tag.tsx","../src/components/coze-editor-extensions/extensions/variable-tree.tsx","../src/components/db-condition-row/index.tsx","../src/components/db-condition-row/types.ts","../src/components/display-flow-value/index.tsx","../src/components/display-inputs-values/index.tsx","../src/components/display-outputs/index.tsx","../src/components/display-schema-tag/index.tsx","../src/components/display-schema-tree/index.tsx","../src/components/dynamic-value-input/hooks.ts","../src/components/dynamic-value-input/index.tsx","../src/components/inputs-values/index.tsx","../src/components/inputs-values/types.ts","../src/components/inputs-values-tree/icon.tsx","../src/components/inputs-values-tree/index.tsx","../src/components/inputs-values-tree/row.tsx","../src/components/inputs-values-tree/types.ts","../src/components/inputs-values-tree/hooks/use-child-list.tsx","../src/components/json-editor-with-variables/editor.tsx","../src/components/json-editor-with-variables/index.tsx","../src/components/json-schema-editor/default-value.tsx","../src/components/json-schema-editor/hooks.tsx","../src/components/json-schema-editor/icon.tsx","../src/components/json-schema-editor/index.tsx","../src/components/json-schema-editor/types.ts","../src/components/prompt-editor/editor.tsx","../src/components/prompt-editor/index.tsx","../src/components/prompt-editor/types.tsx","../src/components/prompt-editor/extensions/jinja.tsx","../src/components/prompt-editor/extensions/language-support.tsx","../src/components/prompt-editor/extensions/markdown.tsx","../src/components/prompt-editor-with-inputs/index.tsx","../src/components/prompt-editor-with-variables/index.tsx","../src/components/sql-editor-with-variables/editor.tsx","../src/components/sql-editor-with-variables/index.tsx","../src/components/type-selector/index.tsx","../src/components/variable-selector/context.tsx","../src/components/variable-selector/index.tsx","../src/components/variable-selector/use-variable-tree.tsx","../src/effects/index.ts","../src/effects/auto-rename-ref/index.ts","../src/effects/listen-ref-schema-change/index.ts","../src/effects/listen-ref-value-change/index.ts","../src/effects/provide-batch-input/index.ts","../src/effects/provide-json-schema-outputs/index.ts","../src/effects/sync-variable-title/index.ts","../src/effects/validate-when-variable-sync/index.ts","../src/form-plugins/index.ts","../src/form-plugins/batch-outputs-plugin/index.ts","../src/form-plugins/infer-assign-plugin/index.ts","../src/form-plugins/infer-inputs-plugin/index.ts","../src/hooks/index.ts","../src/hooks/use-object-list/index.tsx","../src/plugins/index.ts","../src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts","../src/plugins/disable-declaration-plugin/index.tsx","../src/plugins/json-schema-preset/create-type-preset-plugin.tsx","../src/plugins/json-schema-preset/index.tsx","../src/plugins/json-schema-preset/react.tsx","../src/plugins/json-schema-preset/types.ts","../src/plugins/json-schema-preset/type-definition/array.tsx","../src/plugins/json-schema-preset/type-definition/boolean.tsx","../src/plugins/json-schema-preset/type-definition/date-time.tsx","../src/plugins/json-schema-preset/type-definition/index.tsx","../src/plugins/json-schema-preset/type-definition/integer.tsx","../src/plugins/json-schema-preset/type-definition/map.tsx","../src/plugins/json-schema-preset/type-definition/number.tsx","../src/plugins/json-schema-preset/type-definition/object.tsx","../src/plugins/json-schema-preset/type-definition/string.tsx","../src/shared/index.ts","../src/shared/flow-value/index.ts","../src/shared/flow-value/schema.ts","../src/shared/flow-value/types.ts","../src/shared/flow-value/utils.ts","../src/shared/format-legacy-refs/index.ts","../src/shared/inject-material/index.tsx","../src/shared/lazy-suspense/index.tsx","../src/shared/polyfill-create-root/index.tsx","../src/validate/index.ts","../src/validate/validate-flow-value/index.tsx"],"version":"5.9.2"}
+{"root":["../src/index.ts","../src/components/index.ts","../src/components/assign-row/index.tsx","../src/components/assign-row/types.ts","../src/components/assign-rows/index.tsx","../src/components/batch-outputs/index.tsx","../src/components/batch-outputs/types.ts","../src/components/batch-variable-selector/index.tsx","../src/components/blur-input/index.tsx","../src/components/code-editor/editor-all.tsx","../src/components/code-editor/editor-json.tsx","../src/components/code-editor/editor-python.tsx","../src/components/code-editor/editor-shell.tsx","../src/components/code-editor/editor-sql.tsx","../src/components/code-editor/editor-ts.tsx","../src/components/code-editor/editor.tsx","../src/components/code-editor/factory.tsx","../src/components/code-editor/index.tsx","../src/components/code-editor/utils.ts","../src/components/code-editor/theme/dark.ts","../src/components/code-editor/theme/index.ts","../src/components/code-editor/theme/light.ts","../src/components/code-editor-mini/index.tsx","../src/components/condition-context/context.tsx","../src/components/condition-context/index.tsx","../src/components/condition-context/op.ts","../src/components/condition-context/types.ts","../src/components/condition-context/hooks/use-condition.tsx","../src/components/condition-row/index.tsx","../src/components/condition-row/types.ts","../src/components/constant-input/index.tsx","../src/components/constant-input/types.ts","../src/components/coze-editor-extensions/index.tsx","../src/components/coze-editor-extensions/extensions/inputs-tree.tsx","../src/components/coze-editor-extensions/extensions/variable-tag.tsx","../src/components/coze-editor-extensions/extensions/variable-tree.tsx","../src/components/db-condition-row/index.tsx","../src/components/db-condition-row/types.ts","../src/components/display-flow-value/index.tsx","../src/components/display-inputs-values/index.tsx","../src/components/display-outputs/index.tsx","../src/components/display-schema-tag/index.tsx","../src/components/display-schema-tree/index.tsx","../src/components/dynamic-value-input/hooks.ts","../src/components/dynamic-value-input/index.tsx","../src/components/inputs-values/index.tsx","../src/components/inputs-values/types.ts","../src/components/inputs-values-tree/icon.tsx","../src/components/inputs-values-tree/index.tsx","../src/components/inputs-values-tree/row.tsx","../src/components/inputs-values-tree/types.ts","../src/components/inputs-values-tree/hooks/use-child-list.tsx","../src/components/json-editor-with-variables/editor.tsx","../src/components/json-editor-with-variables/index.tsx","../src/components/json-schema-creator/index.tsx","../src/components/json-schema-creator/json-input-modal.tsx","../src/components/json-schema-creator/json-schema-creator.tsx","../src/components/json-schema-creator/utils/json-to-schema.ts","../src/components/json-schema-editor/default-value.tsx","../src/components/json-schema-editor/hooks.tsx","../src/components/json-schema-editor/icon.tsx","../src/components/json-schema-editor/index.tsx","../src/components/json-schema-editor/types.ts","../src/components/prompt-editor/editor.tsx","../src/components/prompt-editor/index.tsx","../src/components/prompt-editor/types.tsx","../src/components/prompt-editor/extensions/jinja.tsx","../src/components/prompt-editor/extensions/language-support.tsx","../src/components/prompt-editor/extensions/markdown.tsx","../src/components/prompt-editor-with-inputs/index.tsx","../src/components/prompt-editor-with-variables/index.tsx","../src/components/sql-editor-with-variables/editor.tsx","../src/components/sql-editor-with-variables/index.tsx","../src/components/type-selector/index.tsx","../src/components/variable-selector/context.tsx","../src/components/variable-selector/index.tsx","../src/components/variable-selector/use-variable-tree.tsx","../src/effects/index.ts","../src/effects/auto-rename-ref/index.ts","../src/effects/listen-ref-schema-change/index.ts","../src/effects/listen-ref-value-change/index.ts","../src/effects/provide-batch-input/index.ts","../src/effects/provide-json-schema-outputs/index.ts","../src/effects/sync-variable-title/index.ts","../src/effects/validate-when-variable-sync/index.ts","../src/form-plugins/index.ts","../src/form-plugins/batch-outputs-plugin/index.ts","../src/form-plugins/infer-assign-plugin/index.ts","../src/form-plugins/infer-inputs-plugin/index.ts","../src/hooks/index.ts","../src/hooks/use-object-list/index.tsx","../src/plugins/index.ts","../src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts","../src/plugins/disable-declaration-plugin/index.tsx","../src/plugins/json-schema-preset/create-type-preset-plugin.tsx","../src/plugins/json-schema-preset/index.tsx","../src/plugins/json-schema-preset/react.tsx","../src/plugins/json-schema-preset/types.ts","../src/plugins/json-schema-preset/type-definition/array.tsx","../src/plugins/json-schema-preset/type-definition/boolean.tsx","../src/plugins/json-schema-preset/type-definition/date-time.tsx","../src/plugins/json-schema-preset/type-definition/index.tsx","../src/plugins/json-schema-preset/type-definition/integer.tsx","../src/plugins/json-schema-preset/type-definition/map.tsx","../src/plugins/json-schema-preset/type-definition/number.tsx","../src/plugins/json-schema-preset/type-definition/object.tsx","../src/plugins/json-schema-preset/type-definition/string.tsx","../src/shared/index.ts","../src/shared/flow-value/index.ts","../src/shared/flow-value/schema.ts","../src/shared/flow-value/types.ts","../src/shared/flow-value/utils.ts","../src/shared/format-legacy-refs/index.ts","../src/shared/inject-material/index.tsx","../src/shared/lazy-suspense/index.tsx","../src/shared/polyfill-create-root/index.tsx","../src/validate/index.ts","../src/validate/validate-flow-value/index.tsx"],"version":"5.9.2"}

package/dist/types/components/assign-rows/index.d.ts

@@ -3,9 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 import React from 'react';
+import { AssignValueType } from '../assign-row';
 interface AssignRowsProps {
     name: string;
     readonly?: boolean;
+    defaultValue?: AssignValueType[];
 }
 export declare function AssignRows(props: AssignRowsProps): React.JSX.Element;
 export {};

package/dist/types/components/display-outputs/index.d.ts

@@ -10,6 +10,7 @@ interface PropsType {
     showIconInTree?: boolean;
     displayFromScope?: boolean;
     typeManager?: JsonSchemaTypeManager;
+    style?: React.CSSProperties;
 }
-export declare function DisplayOutputs({ value, showIconInTree, displayFromScope }: PropsType): React.JSX.Element;
+export declare function DisplayOutputs({ value, showIconInTree, displayFromScope, style }: PropsType): React.JSX.Element;
 export {};

package/dist/types/components/index.d.ts

@@ -23,6 +23,7 @@ export { DynamicValueInput, InjectDynamicValueInput } from './dynamic-value-inpu
 export { InputsValues } from './inputs-values';
 export { InputsValuesTree } from './inputs-values-tree';
 export { JsonEditorWithVariables, type JsonEditorWithVariablesProps, } from './json-editor-with-variables';
+export { JsonSchemaCreator, type JsonSchemaCreatorProps } from './json-schema-creator';
 export { JsonSchemaEditor } from './json-schema-editor';
 export { PromptEditor, type PromptEditorPropsType } from './prompt-editor';
 export { PromptEditorWithInputs, type PromptEditorWithInputsProps, } from './prompt-editor-with-inputs';

package/dist/types/components/json-schema-creator/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+export { JsonSchemaCreator } from './json-schema-creator';
+export type { JsonSchemaCreatorProps } from './json-schema-creator';

package/dist/types/components/json-schema-creator/json-input-modal.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+interface JsonInputModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onConfirm: (schema: IJsonSchema) => void;
+}
+export declare function JsonInputModal({ visible, onClose, onConfirm }: JsonInputModalProps): React.JSX.Element;
+export {};

package/dist/types/components/json-schema-creator/json-schema-creator.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+export interface JsonSchemaCreatorProps {
+    /** 生成 schema 后的回调 */
+    onSchemaCreate?: (schema: IJsonSchema) => void;
+}
+export declare function JsonSchemaCreator({ onSchemaCreate }: JsonSchemaCreatorProps): React.JSX.Element;

package/dist/types/components/json-schema-creator/utils/json-to-schema.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+export declare function jsonToSchema(jsonString: string): IJsonSchema;

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-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, type AssignValueType, type CodeEditorPropsType, type ConditionOpConfig, type ConditionOpConfigs, type ConditionRowValueType, type ConstantInputStrategy, type DBConditionOptionType, type DBConditionRowValueType, type IConditionRule, type IConditionRuleFactory, type JsonEditorWithVariablesProps, type PromptEditorPropsType, type PromptEditorWithInputsProps, type PromptEditorWithVariablesProps, type SQLEditorWithVariablesProps, type TypeSelectorProps, type VariableSelectorProps, useCondition, useConditionContext, useVariableTree, } from './components';
+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, type AssignValueType, type CodeEditorPropsType, type ConditionOpConfig, type ConditionOpConfigs, type ConditionRowValueType, type ConstantInputStrategy, type DBConditionOptionType, type DBConditionRowValueType, type IConditionRule, type IConditionRuleFactory, type JsonEditorWithVariablesProps, type JsonSchemaCreatorProps, type PromptEditorPropsType, type PromptEditorWithInputsProps, type PromptEditorWithVariablesProps, type SQLEditorWithVariablesProps, type TypeSelectorProps, type VariableSelectorProps, useCondition, useConditionContext, useVariableTree, } from './components';
 export { autoRenameRefEffect, listenRefSchemaChange, listenRefValueChange, provideBatchInputEffect, provideJsonSchemaOutputs, syncVariableTitle, validateWhenVariableSync, } from './effects';
 export { createBatchOutputsFormPlugin, createInferAssignPlugin, createInferInputsPlugin, provideBatchOutputsEffect, } from './form-plugins';
 export { useObjectList } from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -67,9 +67,9 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "1.0.2",
-    "@flowgram.ai/coze-editor": "1.0.2",
-    "@flowgram.ai/json-schema": "1.0.2"
+    "@flowgram.ai/json-schema": "1.0.6",
+    "@flowgram.ai/editor": "1.0.6",
+    "@flowgram.ai/coze-editor": "1.0.6"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -86,8 +86,8 @@
     "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
     "date-fns": "~4.1.0",
-    "@flowgram.ai/eslint-config": "1.0.2",
-    "@flowgram.ai/ts-config": "1.0.2"
+    "@flowgram.ai/eslint-config": "1.0.6",
+    "@flowgram.ai/ts-config": "1.0.6"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/assign-rows/index.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { FieldArray, FieldArrayRenderProps } from '@flowgram.ai/editor';
+import { FieldArray } from '@flowgram.ai/editor';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 
@@ -14,15 +14,16 @@ import { AssignRow, AssignValueType } from '@/components/assign-row';
 interface AssignRowsProps {
   name: string;
   readonly?: boolean;
+  defaultValue?: AssignValueType[];
 }
 
 export function AssignRows(props: AssignRowsProps) {
-  const { name, readonly } = props;
+  const { name, readonly, defaultValue } = props;
 
   return (
-    <FieldArray name={name}>
-      {({ field }: FieldArrayRenderProps<AssignValueType | undefined>) => (
-        <>
+    <FieldArray<AssignValueType | undefined> name={name} defaultValue={defaultValue}>
+      {({ field }) => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
           {field.map((childField, index) => (
             <AssignRow
               key={childField.key}
@@ -52,7 +53,7 @@ export function AssignRows(props: AssignRowsProps) {
               Declaration
             </Button>
           </div>
-        </>
+        </div>
       )}
     </FieldArray>
   );

package/src/components/display-outputs/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 
 import { IJsonSchema, JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useCurrentScope, useRefresh } from '@flowgram.ai/editor';
@@ -17,13 +17,14 @@ interface PropsType {
   showIconInTree?: boolean;
   displayFromScope?: boolean;
   typeManager?: JsonSchemaTypeManager;
+  style?: React.CSSProperties;
 }
 
-export function DisplayOutputs({ value, showIconInTree, displayFromScope }: PropsType) {
+export function DisplayOutputs({ value, showIconInTree, displayFromScope, style }: PropsType) {
   const scope = useCurrentScope();
   const refresh = useRefresh();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!displayFromScope || !scope) {
       return () => null;
     }
@@ -50,7 +51,7 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
   const childEntries = Object.entries(properties || {});
 
   return (
-    <div className="gedit-m-display-outputs-wrapper">
+    <div className="gedit-m-display-outputs-wrapper" style={style}>
       {childEntries.map(([key, schema]) => (
         <DisplaySchemaTag
           key={key}

package/src/components/index.ts

@@ -53,6 +53,7 @@ export {
   JsonEditorWithVariables,
   type JsonEditorWithVariablesProps,
 } from './json-editor-with-variables';
+export { JsonSchemaCreator, type JsonSchemaCreatorProps } from './json-schema-creator';
 export { JsonSchemaEditor } from './json-schema-editor';
 export { PromptEditor, type PromptEditorPropsType } from './prompt-editor';
 export {

package/src/components/json-schema-creator/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { JsonSchemaCreator } from './json-schema-creator';
+export type { JsonSchemaCreatorProps } from './json-schema-creator';

package/src/components/json-schema-creator/json-input-modal.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useState } from 'react';
+
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
+import { Modal, Typography } from '@douyinfe/semi-ui';
+
+import { jsonToSchema } from './utils/json-to-schema';
+import { JsonCodeEditor } from '../code-editor';
+
+const { Text } = Typography;
+
+interface JsonInputModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onConfirm: (schema: IJsonSchema) => void;
+}
+
+export function JsonInputModal({ visible, onClose, onConfirm }: JsonInputModalProps) {
+  const [jsonInput, setJsonInput] = useState('');
+  const [error, setError] = useState('');
+
+  const handleConfirm = () => {
+    try {
+      const schema = jsonToSchema(jsonInput);
+      onConfirm(schema);
+      setJsonInput('');
+      setError('');
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      onCancel={onClose}
+      onOk={handleConfirm}
+      title={I18n.t('JSON to JSONSchema')}
+      okText={I18n.t('Generate')}
+      cancelText={I18n.t('Cancel')}
+      width={600}
+    >
+      <div style={{ marginBottom: 8 }}>
+        <Text>{I18n.t('Paste JSON data')}：</Text>
+      </div>
+      <div style={{ minHeight: 300 }}>
+        <JsonCodeEditor value={jsonInput} onChange={(value) => setJsonInput(value || '')} />
+      </div>
+      {error && (
+        <div style={{ marginTop: 8 }}>
+          <Text type="danger">{error}</Text>
+        </div>
+      )}
+    </Modal>
+  );
+}

package/src/components/json-schema-creator/json-schema-creator.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useState } from 'react';
+
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
+import { Button } from '@douyinfe/semi-ui';
+
+import { JsonInputModal } from './json-input-modal';
+
+export interface JsonSchemaCreatorProps {
+  /** 生成 schema 后的回调 */
+  onSchemaCreate?: (schema: IJsonSchema) => void;
+}
+
+export function JsonSchemaCreator({ onSchemaCreate }: JsonSchemaCreatorProps) {
+  const [visible, setVisible] = useState(false);
+
+  const handleCreate = (schema: IJsonSchema) => {
+    onSchemaCreate?.(schema);
+    setVisible(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>{I18n.t('JSON to JSONSchema')}</Button>
+      <JsonInputModal
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={handleCreate}
+      />
+    </>
+  );
+}

package/src/components/json-schema-creator/utils/json-to-schema.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+
+export function jsonToSchema(jsonString: string): IJsonSchema {
+  // 1. 解析 JSON
+  const data = JSON.parse(jsonString); // 会自动抛出语法错误
+
+  // 2. 生成 schema
+  return generateSchema(data);
+}
+
+function generateSchema(value: any): IJsonSchema {
+  // null
+  if (value === null) {
+    return { type: 'string' };
+  }
+
+  // array
+  if (Array.isArray(value)) {
+    const schema: IJsonSchema = { type: 'array' };
+    if (value.length > 0) {
+      schema.items = generateSchema(value[0]);
+    }
+    return schema;
+  }
+
+  // object
+  if (typeof value === 'object') {
+    const schema: IJsonSchema = {
+      type: 'object',
+      properties: {},
+      required: [],
+    };
+
+    for (const [key, val] of Object.entries(value)) {
+      schema.properties![key] = generateSchema(val);
+      schema.required!.push(key);
+    }
+
+    return schema;
+  }
+
+  // primitive types
+  const type = typeof value;
+  return { type: type as any };
+}

package/src/index.ts

@@ -34,6 +34,7 @@ export {
   InputsValuesTree,
   JsonCodeEditor,
   JsonEditorWithVariables,
+  JsonSchemaCreator,
   JsonSchemaEditor,
   PromptEditor,
   PromptEditorWithInputs,
@@ -59,6 +60,7 @@ export {
   type IConditionRule,
   type IConditionRuleFactory,
   type JsonEditorWithVariablesProps,
+  type JsonSchemaCreatorProps,
   type PromptEditorPropsType,
   type PromptEditorWithInputsProps,
   type PromptEditorWithVariablesProps,