@flowgram.ai/form-materials 0.2.20 → 0.2.22

package/dist/index.js

@@ -33,12 +33,15 @@ __export(src_exports, {
   ArrayIcons: () => ArrayIcons,
   BatchOutputs: () => BatchOutputs,
   BatchVariableSelector: () => BatchVariableSelector,
+  CodeEditor: () => CodeEditor,
   ConditionRow: () => ConditionRow,
   ConstantInput: () => ConstantInput,
   DynamicValueInput: () => DynamicValueInput,
+  JsonEditorWithVariables: () => JsonEditorWithVariables,
   JsonSchemaEditor: () => JsonSchemaEditor,
   JsonSchemaUtils: () => JsonSchemaUtils,
   PromptEditor: () => PromptEditor,
+  PromptEditorWithInputs: () => PromptEditorWithInputs,
   PromptEditorWithVariables: () => PromptEditorWithVariables,
   TypeSelector: () => TypeSelector,
   VariableSelector: () => VariableSelector,
@@ -2141,7 +2144,16 @@ var jinja_default = JinjaHighlight;
 
 // src/components/prompt-editor/index.tsx
 function PromptEditor(props) {
-  const { value, onChange, readonly, style, hasError, children } = props || {};
+  const {
+    value,
+    onChange,
+    readonly,
+    placeholder,
+    activeLinePlaceholder,
+    style,
+    hasError,
+    children
+  } = props || {};
   return /* @__PURE__ */ import_react24.default.createElement(UIContainer4, { $hasError: hasError, style }, /* @__PURE__ */ import_react24.default.createElement(import_react25.EditorProvider, null, /* @__PURE__ */ import_react24.default.createElement(
     import_react25.Renderer,
     {
@@ -2149,13 +2161,14 @@ function PromptEditor(props) {
       defaultValue: String(value?.content),
       options: {
         readOnly: readonly,
-        editable: !readonly
+        editable: !readonly,
+        placeholder
       },
       onChange: (e) => {
         onChange({ type: "template", content: e.value });
       }
     }
-  ), /* @__PURE__ */ import_react24.default.createElement(markdown_default, null), /* @__PURE__ */ import_react24.default.createElement(language_support_default, null), /* @__PURE__ */ import_react24.default.createElement(jinja_default, null), children));
+  ), activeLinePlaceholder && /* @__PURE__ */ import_react24.default.createElement(import_react25.ActiveLinePlaceholder, null, activeLinePlaceholder), /* @__PURE__ */ import_react24.default.createElement(markdown_default, null), /* @__PURE__ */ import_react24.default.createElement(language_support_default, null), /* @__PURE__ */ import_react24.default.createElement(jinja_default, null), children));
 }
 
 // src/components/prompt-editor-with-variables/index.tsx
@@ -2372,30 +2385,673 @@ function PromptEditorWithVariables(props) {
   return /* @__PURE__ */ import_react30.default.createElement(PromptEditor, { ...props }, /* @__PURE__ */ import_react30.default.createElement(VariableTree, null), /* @__PURE__ */ import_react30.default.createElement(VariableTagInject, null));
 }
 
-// src/effects/provide-batch-input/index.ts
+// src/components/prompt-editor-with-inputs/index.tsx
+var import_react34 = __toESM(require("react"));
+
+// src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
+var import_react32 = __toESM(require("react"));
+var import_semi_ui15 = require("@douyinfe/semi-ui");
+var import_react33 = require("@coze-editor/editor/react");
+
+// src/components/prompt-editor-with-inputs/inputs-picker.tsx
+var import_react31 = __toESM(require("react"));
+var import_lodash5 = require("lodash");
 var import_editor8 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor8.createEffectFromVariableProvider)({
+var import_semi_ui14 = require("@douyinfe/semi-ui");
+function InputsPicker({
+  inputsValues,
+  onSelect
+}) {
+  const available = (0, import_editor8.useScopeAvailable)();
+  const getArrayDrilldown = (type, depth = 1) => {
+    if (import_editor8.ASTMatch.isArray(type.items)) {
+      return getArrayDrilldown(type.items, depth + 1);
+    }
+    return { type: type.items, depth };
+  };
+  const renderVariable = (variable, keyPath) => {
+    let type = variable?.type;
+    let children;
+    if (import_editor8.ASTMatch.isObject(type)) {
+      children = (type.properties || []).map((_property) => renderVariable(_property, [...keyPath, _property.key])).filter(Boolean);
+    }
+    if (import_editor8.ASTMatch.isArray(type)) {
+      const drilldown = getArrayDrilldown(type);
+      if (import_editor8.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) => _key === "[0]" || idx === 0 ? _key : `.${_key}`).join("");
+    return {
+      key,
+      label: (0, import_lodash5.last)(keyPath),
+      value: key,
+      children
+    };
+  };
+  const treeData = (0, import_react31.useMemo)(
+    () => Object.entries(inputsValues).map(([key, value]) => {
+      if (value.type === "ref") {
+        const variable = available.getByKeyPath(value.content || []);
+        if (variable) {
+          return renderVariable(variable, [key]);
+        }
+      }
+      return {
+        key,
+        value: key,
+        label: key
+      };
+    }),
+    []
+  );
+  return /* @__PURE__ */ import_react31.default.createElement(import_semi_ui14.Tree, { treeData, onSelect: (v) => onSelect(v) });
+}
+
+// src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
+function InputsTree({ inputsValues }) {
+  const [posKey, setPosKey] = (0, import_react32.useState)("");
+  const [visible, setVisible] = (0, import_react32.useState)(false);
+  const [position, setPosition] = (0, import_react32.useState)(-1);
+  const editor = (0, import_react33.useEditor)();
+  function insert(variablePath) {
+    const range = (0, import_react33.getCurrentMentionReplaceRange)(editor.$view.state);
+    if (!range) {
+      return;
+    }
+    editor.replaceText({
+      ...range,
+      text: "{{" + variablePath + "}}"
+    });
+    setVisible(false);
+  }
+  function handleOpenChange(e) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+  (0, import_react32.useEffect)(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+  return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, /* @__PURE__ */ import_react32.default.createElement(import_react33.Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react32.default.createElement(
+    import_semi_ui15.Popover,
+    {
+      visible,
+      trigger: "custom",
+      position: "topLeft",
+      rePosKey: posKey,
+      content: /* @__PURE__ */ import_react32.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react32.default.createElement(
+        InputsPicker,
+        {
+          inputsValues,
+          onSelect: (v) => {
+            insert(v);
+          }
+        }
+      ))
+    },
+    /* @__PURE__ */ import_react32.default.createElement(
+      import_react33.PositionMirror,
+      {
+        position,
+        onChange: () => setPosKey(String(Math.random()))
+      }
+    )
+  ));
+}
+
+// src/components/prompt-editor-with-inputs/index.tsx
+function PromptEditorWithInputs({ inputsValues, ...restProps }) {
+  return /* @__PURE__ */ import_react34.default.createElement(PromptEditor, { ...restProps }, /* @__PURE__ */ import_react34.default.createElement(InputsTree, { inputsValues }));
+}
+
+// src/components/code-editor/index.tsx
+var import_react35 = __toESM(require("react"));
+var import_react36 = require("@coze-editor/editor/react");
+var import_preset_code5 = __toESM(require("@coze-editor/editor/preset-code"));
+var import_view4 = require("@codemirror/view");
+
+// src/components/code-editor/utils.ts
+function getSuffixByLanguageId(languageId) {
+  if (languageId === "python") {
+    return ".py";
+  }
+  if (languageId === "typescript") {
+    return ".ts";
+  }
+  if (languageId === "shell") {
+    return ".sh";
+  }
+  if (languageId === "json") {
+    return ".json";
+  }
+  return "";
+}
+
+// src/components/code-editor/theme/index.ts
+var import_preset_code3 = require("@coze-editor/editor/preset-code");
+
+// src/components/code-editor/theme/light.ts
+var import_preset_code = require("@coze-editor/editor/preset-code");
+var colors = {
+  background: "#F7F7FC",
+  // syntax
+  comment: "#000A298A",
+  key: "#00818C",
+  string: "#D1009D",
+  number: "#C74200",
+  boolean: "#2B57D9",
+  null: "#2B57D9",
+  separator: "#0F1529D1"
+};
+var lightTheme = (0, import_preset_code.createTheme)({
+  variant: "light",
+  settings: {
+    background: "#fff",
+    foreground: "#000",
+    caret: "#000",
+    selection: "#d9d9d9",
+    gutterBackground: "#f0f0f0",
+    gutterForeground: "#666",
+    gutterBorderColor: "transparent",
+    gutterBorderWidth: 0,
+    lineHighlight: "#f0f0f0",
+    bracketColors: ["#FFEF61", "#DD99FF", "#78B0FF"],
+    tooltip: {
+      backgroundColor: "#f0f0f0",
+      color: "#000",
+      border: "1px solid #ccc"
+    },
+    link: {
+      color: "#007bff"
+    },
+    completionItemHover: {
+      backgroundColor: "#f0f0f0"
+    },
+    completionItemSelected: {
+      backgroundColor: "#e0e0e0"
+    },
+    completionItemIcon: {
+      color: "#333"
+    },
+    completionItemLabel: {
+      color: "#333"
+    },
+    completionItemInfo: {
+      color: "#333"
+    },
+    completionItemDetail: {
+      color: "#666"
+    }
+  },
+  styles: [
+    // JSON
+    {
+      tag: import_preset_code.tags.comment,
+      color: colors.comment
+    },
+    {
+      tag: [import_preset_code.tags.propertyName],
+      color: colors.key
+    },
+    {
+      tag: [import_preset_code.tags.string],
+      color: colors.string
+    },
+    {
+      tag: [import_preset_code.tags.number],
+      color: colors.number
+    },
+    {
+      tag: [import_preset_code.tags.bool],
+      color: colors.boolean
+    },
+    {
+      tag: [import_preset_code.tags.null],
+      color: colors.null
+    },
+    {
+      tag: [import_preset_code.tags.separator],
+      color: colors.separator
+    },
+    // markdown
+    {
+      tag: [import_preset_code.tags.heading],
+      color: "#3e76ef"
+    },
+    {
+      tag: [import_preset_code.tags.processingInstruction],
+      color: "#3e76ef"
+    },
+    // shell
+    // curl
+    {
+      tag: [import_preset_code.tags.standard(import_preset_code.tags.variableName)],
+      color: "#00804A"
+    },
+    // -X
+    {
+      tag: [import_preset_code.tags.attributeName],
+      color: "#C74200"
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [import_preset_code.tags.special(import_preset_code.tags.string)],
+      color: "#2B57D9"
+    }
+  ]
+});
+
+// src/components/code-editor/theme/dark.ts
+var import_preset_code2 = require("@coze-editor/editor/preset-code");
+var colors2 = {
+  background: "#151B27",
+  // syntax
+  comment: "#FFFFFF63",
+  key: "#39E5D7",
+  string: "#FF94D2",
+  number: "#FF9933",
+  boolean: "#78B0FF",
+  null: "#78B0FF",
+  separator: "#FFFFFFC9"
+};
+var darkTheme = (0, import_preset_code2.createTheme)({
+  variant: "dark",
+  settings: {
+    background: colors2.background,
+    foreground: "#fff",
+    caret: "#AEAFAD",
+    selection: "#d9d9d942",
+    gutterBackground: colors2.background,
+    gutterForeground: "#FFFFFF63",
+    gutterBorderColor: "transparent",
+    gutterBorderWidth: 0,
+    lineHighlight: "#272e3d36",
+    bracketColors: ["#FFEF61", "#DD99FF", "#78B0FF"],
+    tooltip: {
+      backgroundColor: "#363D4D",
+      color: "#fff",
+      border: "none"
+    },
+    link: {
+      color: "#4daafc"
+    },
+    completionItemHover: {
+      backgroundColor: "#FFFFFF0F"
+    },
+    completionItemSelected: {
+      backgroundColor: "#FFFFFF17"
+    },
+    completionItemIcon: {
+      color: "#FFFFFFC9"
+    },
+    completionItemLabel: {
+      color: "#FFFFFFC9"
+    },
+    completionItemInfo: {
+      color: "#FFFFFFC9"
+    },
+    completionItemDetail: {
+      color: "#FFFFFF63"
+    }
+  },
+  styles: [
+    // json
+    {
+      tag: import_preset_code2.tags.comment,
+      color: colors2.comment
+    },
+    {
+      tag: [import_preset_code2.tags.propertyName],
+      color: colors2.key
+    },
+    {
+      tag: [import_preset_code2.tags.string],
+      color: colors2.string
+    },
+    {
+      tag: [import_preset_code2.tags.number],
+      color: colors2.number
+    },
+    {
+      tag: [import_preset_code2.tags.bool],
+      color: colors2.boolean
+    },
+    {
+      tag: [import_preset_code2.tags.null],
+      color: colors2.null
+    },
+    {
+      tag: [import_preset_code2.tags.separator],
+      color: colors2.separator
+    },
+    // markdown
+    {
+      tag: [import_preset_code2.tags.heading],
+      color: "#6b6bff"
+    },
+    {
+      tag: [import_preset_code2.tags.processingInstruction],
+      color: "#6b6bff"
+    },
+    // shell
+    // curl
+    {
+      tag: [import_preset_code2.tags.standard(import_preset_code2.tags.variableName)],
+      color: "#3BEB84"
+    },
+    // -X
+    {
+      tag: [import_preset_code2.tags.attributeName],
+      color: "#FF9933"
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [import_preset_code2.tags.special(import_preset_code2.tags.string)],
+      color: "#78B0FF"
+    }
+  ]
+});
+
+// src/components/code-editor/theme/index.ts
+import_preset_code3.themes.register("dark", darkTheme);
+import_preset_code3.themes.register("light", lightTheme);
+
+// src/components/code-editor/language-features.ts
+var import_preset_code4 = require("@coze-editor/editor/preset-code");
+var import_language_shell = require("@coze-editor/editor/language-shell");
+var import_language_python = require("@coze-editor/editor/language-python");
+var import_language_json = require("@coze-editor/editor/language-json");
+var import_editor9 = require("@coze-editor/editor");
+import_preset_code4.languages.register("python", import_language_python.python);
+import_preset_code4.languages.register("json", {
+  // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
+  language: (0, import_editor9.mixLanguages)({
+    outerLanguage: import_language_json.json.language
+  }),
+  languageService: import_language_json.json.languageService
+});
+import_preset_code4.languages.register("shell", import_language_shell.shell);
+
+// src/components/code-editor/index.tsx
+var OriginCodeEditor = (0, import_react36.createRenderer)(import_preset_code5.default, [
+  import_view4.EditorView.theme({
+    "&.cm-focused": {
+      outline: "none"
+    }
+  })
+]);
+function CodeEditor({
+  value,
+  onChange,
+  languageId = "python",
+  theme = "light",
+  children
+}) {
+  const editorRef = (0, import_react35.useRef)(null);
+  return /* @__PURE__ */ import_react35.default.createElement(import_react36.EditorProvider, null, /* @__PURE__ */ import_react35.default.createElement(
+    OriginCodeEditor,
+    {
+      defaultValue: value,
+      options: {
+        uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+        languageId,
+        theme
+      },
+      didMount: (editor) => {
+        editorRef.current = editor;
+      },
+      onChange: (e) => onChange?.(e.value)
+    },
+    children
+  ));
+}
+
+// src/components/json-editor-with-variables/index.tsx
+var import_react41 = __toESM(require("react"));
+
+// src/components/json-editor-with-variables/extensions/variable-tree.tsx
+var import_react37 = __toESM(require("react"));
+var import_semi_ui16 = require("@douyinfe/semi-ui");
+var import_react38 = require("@coze-editor/editor/react");
+function VariableTree2() {
+  const [posKey, setPosKey] = (0, import_react37.useState)("");
+  const [visible, setVisible] = (0, import_react37.useState)(false);
+  const [position, setPosition] = (0, import_react37.useState)(-1);
+  const editor = (0, import_react38.useEditor)();
+  function insert(variablePath) {
+    const range = (0, import_react38.getCurrentMentionReplaceRange)(editor.$view.state);
+    if (!range) {
+      return;
+    }
+    editor.replaceText({
+      ...range,
+      text: "{{" + variablePath + "}}"
+    });
+    setVisible(false);
+  }
+  function handleOpenChange(e) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+  (0, import_react37.useEffect)(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+  const treeData = useVariableTree({});
+  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(import_react38.Mention, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react37.default.createElement(
+    import_semi_ui16.Popover,
+    {
+      visible,
+      trigger: "custom",
+      position: "topLeft",
+      rePosKey: posKey,
+      content: /* @__PURE__ */ import_react37.default.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ import_react37.default.createElement(
+        import_semi_ui16.Tree,
+        {
+          treeData,
+          onSelect: (v) => {
+            insert(v);
+          }
+        }
+      ))
+    },
+    /* @__PURE__ */ import_react37.default.createElement(
+      import_react38.PositionMirror,
+      {
+        position,
+        onChange: () => setPosKey(String(Math.random()))
+      }
+    )
+  ));
+}
+
+// src/components/json-editor-with-variables/extensions/variable-tag.tsx
+var import_react39 = __toESM(require("react"));
+var import_client2 = require("react-dom/client");
+var import_lodash6 = require("lodash");
+var import_editor10 = require("@flowgram.ai/editor");
+var import_semi_ui18 = require("@douyinfe/semi-ui");
+var import_semi_icons10 = require("@douyinfe/semi-icons");
+var import_react40 = require("@coze-editor/editor/react");
+var import_view5 = require("@codemirror/view");
+
+// src/components/json-editor-with-variables/styles.tsx
+var import_styled_components8 = __toESM(require("styled-components"));
+var import_semi_ui17 = require("@douyinfe/semi-ui");
+var UIRootTitle3 = import_styled_components8.default.div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+var UIVarName3 = import_styled_components8.default.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var UITag3 = (0, import_styled_components8.default)(import_semi_ui17.Tag)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 300px;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+`;
+var UIPopoverContent2 = import_styled_components8.default.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+// src/components/json-editor-with-variables/extensions/variable-tag.tsx
+var VariableTagWidget2 = class extends import_view5.WidgetType {
+  constructor({ keyPath, scope }) {
+    super();
+    this.toDispose = new import_editor10.DisposableCollection();
+    this.renderIcon = (icon) => {
+      if (typeof icon === "string") {
+        return /* @__PURE__ */ import_react39.default.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+      }
+      return icon;
+    };
+    this.keyPath = keyPath;
+    this.scope = scope;
+  }
+  renderVariable(v) {
+    if (!v) {
+      this.root.render(
+        /* @__PURE__ */ import_react39.default.createElement(UITag3, { prefixIcon: /* @__PURE__ */ import_react39.default.createElement(import_semi_icons10.IconIssueStroked, null), color: "amber" }, "Unknown")
+      );
+      return;
+    }
+    const rootField = (0, import_lodash6.last)(v.parentFields);
+    const rootTitle = /* @__PURE__ */ import_react39.default.createElement(UIRootTitle3, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
+    const rootIcon = this.renderIcon(rootField?.meta.icon);
+    this.root.render(
+      /* @__PURE__ */ import_react39.default.createElement(
+        import_semi_ui18.Popover,
+        {
+          content: /* @__PURE__ */ import_react39.default.createElement(UIPopoverContent2, null, rootIcon, rootTitle, /* @__PURE__ */ import_react39.default.createElement(UIVarName3, null, v?.keyPath.slice(1).join(".")))
+        },
+        /* @__PURE__ */ import_react39.default.createElement(UITag3, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ import_react39.default.createElement(UIVarName3, null, v?.key))
+      )
+    );
+  }
+  toDOM(view) {
+    const dom = document.createElement("span");
+    this.root = (0, import_client2.createRoot)(dom);
+    this.toDispose.push(
+      import_editor10.Disposable.create(() => {
+        this.root.unmount();
+      })
+    );
+    this.toDispose.push(
+      this.scope.available.trackByKeyPath(
+        this.keyPath,
+        (v) => {
+          this.renderVariable(v);
+        },
+        { triggerOnInit: false }
+      )
+    );
+    this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+    return dom;
+  }
+  eq(other) {
+    return (0, import_lodash6.isEqual)(this.keyPath, other.keyPath);
+  }
+  ignoreEvent() {
+    return false;
+  }
+  destroy(dom) {
+    this.toDispose.dispose();
+  }
+};
+function VariableTagInject2() {
+  const injector = (0, import_react40.useInjector)();
+  const scope = (0, import_editor10.useCurrentScope)();
+  (0, import_react39.useLayoutEffect)(() => {
+    const atMatcher = new import_view5.MatchDecorator({
+      regexp: /\{\{([^\}]+)\}\}/g,
+      decoration: (match) => import_view5.Decoration.replace({
+        widget: new VariableTagWidget2({
+          keyPath: match[1]?.split(".") ?? [],
+          scope
+        })
+      })
+    });
+    return injector.inject([
+      import_view5.ViewPlugin.fromClass(
+        class {
+          constructor(view) {
+            this.view = view;
+            this.decorations = atMatcher.createDeco(view);
+          }
+          update() {
+            this.decorations = atMatcher.createDeco(this.view);
+          }
+        },
+        {
+          decorations: (p) => p.decorations,
+          provide(p) {
+            return import_view5.EditorView.atomicRanges.of(
+              (view) => view.plugin(p)?.decorations ?? import_view5.Decoration.none
+            );
+          }
+        }
+      )
+    ]);
+  }, [injector]);
+  return null;
+}
+
+// src/components/json-editor-with-variables/index.tsx
+function JsonEditorWithVariables(props) {
+  return /* @__PURE__ */ import_react41.default.createElement(CodeEditor, { languageId: "json", ...props }, /* @__PURE__ */ import_react41.default.createElement(VariableTree2, null), /* @__PURE__ */ import_react41.default.createElement(VariableTagInject2, null));
+}
+
+// src/effects/provide-batch-input/index.ts
+var import_editor11 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor11.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor8.ASTFactory.createVariableDeclaration({
+    import_editor11.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor8.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor11.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor8.ASTFactory.createObject({
+      type: import_editor11.ASTFactory.createObject({
         properties: [
-          import_editor8.ASTFactory.createProperty({
+          import_editor11.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor8.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor8.ASTFactory.createKeyPathExpression({
+            initializer: import_editor11.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor11.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor8.ASTFactory.createProperty({
+          import_editor11.ASTFactory.createProperty({
             key: "index",
-            type: import_editor8.ASTFactory.createNumber()
+            type: import_editor11.ASTFactory.createNumber()
           })
         ]
       })
@@ -2404,21 +3060,21 @@ var provideBatchInputEffect = (0, import_editor8.createEffectFromVariableProvide
 });
 
 // src/effects/provide-batch-outputs/index.ts
-var import_editor9 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor9.createEffectFromVariableProvider)({
+var import_editor12 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor12.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor9.ASTFactory.createVariableDeclaration({
+    import_editor12.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor9.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor12.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor9.ASTFactory.createObject({
+      type: import_editor12.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor9.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor12.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor9.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor9.ASTFactory.createKeyPathExpression({
+            initializer: import_editor12.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor12.ASTFactory.createKeyPathExpression({
                 keyPath: value2.content || []
               })
             })
@@ -2430,14 +3086,14 @@ var provideBatchOutputsEffect = (0, import_editor9.createEffectFromVariableProvi
 });
 
 // src/effects/auto-rename-ref/index.ts
-var import_lodash5 = require("lodash");
-var import_editor10 = require("@flowgram.ai/editor");
+var import_lodash7 = require("lodash");
+var import_editor13 = require("@flowgram.ai/editor");
 var autoRenameRefEffect = [
   {
-    event: import_editor10.DataEvent.onValueInit,
+    event: import_editor13.DataEvent.onValueInit,
     effect: (params) => {
       const { context, form, name } = params;
-      const renameService = context.node.getService(import_editor10.VariableFieldKeyRenameService);
+      const renameService = context.node.getService(import_editor13.VariableFieldKeyRenameService);
       const disposable = renameService.onRename(({ before, after }) => {
         const beforeKeyPath = [
           ...before.parentFields.map((_field) => _field.key).reverse(),
@@ -2467,7 +3123,7 @@ function isRef(value) {
   return value?.type === "ref" && Array.isArray(value?.content) && typeof value?.content[0] === "string";
 }
 function traverseRef(name, value, cb) {
-  if ((0, import_lodash5.isObject)(value)) {
+  if ((0, import_lodash7.isObject)(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
@@ -2477,7 +3133,7 @@ function traverseRef(name, value, cb) {
     });
     return;
   }
-  if ((0, import_lodash5.isArray)(value)) {
+  if ((0, import_lodash7.isArray)(value)) {
     value.forEach((_value, idx) => {
       traverseRef(`${name}[${idx}]`, _value, cb);
     });
@@ -2487,13 +3143,13 @@ function traverseRef(name, value, cb) {
 }
 
 // src/effects/provide-json-schema-outputs/index.ts
-var import_editor11 = require("@flowgram.ai/editor");
-var provideJsonSchemaOutputs = (0, import_editor11.createEffectFromVariableProvider)({
+var import_editor14 = require("@flowgram.ai/editor");
+var provideJsonSchemaOutputs = (0, import_editor14.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor11.ASTFactory.createVariableDeclaration({
+    import_editor14.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor11.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
+        title: (0, import_editor14.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
       type: JsonSchemaUtils.schemaToAST(value)
@@ -2502,12 +3158,12 @@ var provideJsonSchemaOutputs = (0, import_editor11.createEffectFromVariableProvi
 });
 
 // src/effects/sync-variable-title/index.ts
-var import_editor12 = require("@flowgram.ai/editor");
+var import_editor15 = require("@flowgram.ai/editor");
 var syncVariableTitle = [
   {
-    event: import_editor12.DataEvent.onValueChange,
+    event: import_editor15.DataEvent.onValueChange,
     effect: ({ value, context }) => {
-      context.node.getData(import_editor12.FlowNodeVariableData).allScopes.forEach((_scope) => {
+      context.node.getData(import_editor15.FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
             title: value || context.node.id,
@@ -2520,21 +3176,21 @@ var syncVariableTitle = [
 ];
 
 // src/form-plugins/batch-outputs-plugin/index.ts
-var import_editor13 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect2 = (0, import_editor13.createEffectFromVariableProvider)({
+var import_editor16 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect2 = (0, import_editor16.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor13.ASTFactory.createVariableDeclaration({
+    import_editor16.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor13.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor16.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor13.ASTFactory.createObject({
+      type: import_editor16.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor13.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor16.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor13.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor13.ASTFactory.createKeyPathExpression({
+            initializer: import_editor16.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor16.ASTFactory.createKeyPathExpression({
                 keyPath: value2?.content || []
               })
             })
@@ -2544,7 +3200,7 @@ var provideBatchOutputsEffect2 = (0, import_editor13.createEffectFromVariablePro
     })
   ]
 });
-var createBatchOutputsFormPlugin = (0, import_editor13.defineFormPluginCreator)({
+var createBatchOutputsFormPlugin = (0, import_editor16.defineFormPluginCreator)({
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
@@ -2552,7 +3208,7 @@ var createBatchOutputsFormPlugin = (0, import_editor13.defineFormPluginCreator)(
     });
   },
   onInit(ctx, { outputKey }) {
-    const chainTransformService = ctx.node.getService(import_editor13.ScopeChainTransformService);
+    const chainTransformService = ctx.node.getService(import_editor16.ScopeChainTransformService);
     const batchNodeType = ctx.node.flowNodeType;
     const transformerId = `${batchNodeType}-outputs`;
     if (chainTransformService.hasTransformer(transformerId)) {
@@ -2562,21 +3218,21 @@ var createBatchOutputsFormPlugin = (0, import_editor13.defineFormPluginCreator)(
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, (0, import_editor13.getNodeScope)(node.parent)];
+          return [...covers, (0, import_editor16.getNodeScope)(node.parent)];
         }
         return covers;
       },
       transformDeps(scopes, ctx2) {
         const scopeMeta = ctx2.scope.meta;
-        if (scopeMeta?.type === import_editor13.FlowNodeScopeType.private) {
+        if (scopeMeta?.type === import_editor16.FlowNodeScopeType.private) {
           return scopes;
         }
         const node = scopeMeta?.node;
         if (node?.flowNodeType === batchNodeType) {
           const childBlocks = node.blocks;
           return [
-            (0, import_editor13.getNodePrivateScope)(node),
-            ...childBlocks.map((_childBlock) => (0, import_editor13.getNodeScope)(_childBlock))
+            (0, import_editor16.getNodePrivateScope)(node),
+            ...childBlocks.map((_childBlock) => (0, import_editor16.getNodeScope)(_childBlock))
           ];
         }
         return scopes;
@@ -2589,12 +3245,15 @@ var createBatchOutputsFormPlugin = (0, import_editor13.defineFormPluginCreator)(
   ArrayIcons,
   BatchOutputs,
   BatchVariableSelector,
+  CodeEditor,
   ConditionRow,
   ConstantInput,
   DynamicValueInput,
+  JsonEditorWithVariables,
   JsonSchemaEditor,
   JsonSchemaUtils,
   PromptEditor,
+  PromptEditorWithInputs,
   PromptEditorWithVariables,
   TypeSelector,
   VariableSelector,