@flowgram.ai/form-materials 0.4.4 → 0.4.6

package/dist/esm/editor-H2R7JJLO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/json-editor-with-variables/editor.tsx","../../src/components/json-editor-with-variables/extensions/variable-tree.tsx","../../src/components/json-editor-with-variables/extensions/variable-tag.tsx","../../src/components/json-editor-with-variables/styles.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\n\nimport { I18n } from '@flowgram.ai/editor';\nimport { transformerCreator } from '@coze-editor/editor/preset-code';\nimport { Text } from '@coze-editor/editor/language-json';\n\nimport { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';\n\nimport { VariableTree } from './extensions/variable-tree';\nimport { VariableTagInject } from './extensions/variable-tag';\n\ntype Match = { match: string; range: [number, number] };\nfunction findAllMatches(inputString: string, regex: RegExp): Match[] {\n  const globalRegex = new RegExp(\n    regex,\n    regex.flags.includes('g') ? regex.flags : regex.flags + 'g'\n  );\n  let match;\n  const matches: Match[] = [];\n\n  while ((match = globalRegex.exec(inputString)) !== null) {\n    if (match.index === globalRegex.lastIndex) {\n      globalRegex.lastIndex++;\n    }\n    matches.push({\n      match: match[0],\n      range: [match.index, match.index + match[0].length],\n    });\n  }\n\n  return matches;\n}\n\nconst transformer = transformerCreator((text: Text) => {\n  const originalSource = text.toString();\n  const matches = findAllMatches(originalSource, /\\{\\{([^\\}]*)\\}\\}/g);\n\n  if (matches.length > 0) {\n    matches.forEach(({ range }) => {\n      text.replaceRange(range[0], range[1], 'null');\n    });\n  }\n\n  return text;\n});\n\nexport interface JsonEditorWithVariablesProps extends Omit<CodeEditorPropsType, 'languageId'> {}\n\nexport function JsonEditorWithVariables(props: JsonEditorWithVariablesProps) {\n  return (\n    <CodeEditor\n      languageId=\"json\"\n      activeLinePlaceholder={I18n.t(\"Press '@' to Select variable\")}\n      {...props}\n      options={{\n        transformer,\n        ...(props.options || {}),\n      }}\n    >\n      <VariableTree />\n      <VariableTagInject />\n    </CodeEditor>\n  );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useEffect, useState } from 'react';\n\nimport { Popover, Tree } from '@douyinfe/semi-ui';\nimport {\n  Mention,\n  MentionOpenChangeEvent,\n  getCurrentMentionReplaceRange,\n  useEditor,\n  PositionMirror,\n} from '@coze-editor/editor/react';\nimport { EditorAPI } from '@coze-editor/editor/preset-prompt';\n\nimport { useVariableTree } from '@/components/variable-selector';\n\nexport function VariableTree() {\n  const [posKey, setPosKey] = useState('');\n  const [visible, setVisible] = useState(false);\n  const [position, setPosition] = useState(-1);\n  const editor = useEditor<EditorAPI>();\n\n  function insert(variablePath: string) {\n    const range = getCurrentMentionReplaceRange(editor.$view.state);\n\n    if (!range) {\n      return;\n    }\n\n    editor.replaceText({\n      ...range,\n      text: '{{' + variablePath + '}}',\n    });\n\n    setVisible(false);\n  }\n\n  function handleOpenChange(e: MentionOpenChangeEvent) {\n    setPosition(e.state.selection.main.head);\n    setVisible(e.value);\n  }\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n  }, [editor, visible]);\n\n  const treeData = useVariableTree({});\n\n  return (\n    <>\n      <Mention triggerCharacters={['@']} onOpenChange={handleOpenChange} />\n\n      <Popover\n        visible={visible}\n        trigger=\"custom\"\n        position=\"topLeft\"\n        rePosKey={posKey}\n        content={\n          <div style={{ width: 300 }}>\n            <Tree\n              treeData={treeData}\n              onSelect={(v) => {\n                insert(v);\n              }}\n            />\n          </div>\n        }\n      >\n        {/* PositionMirror allows the Popover to appear at the specified cursor position */}\n        <PositionMirror\n          position={position}\n          // When Doc scroll, update position\n          onChange={() => setPosKey(String(Math.random()))}\n        />\n      </Popover>\n    </>\n  );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useLayoutEffect } from 'react';\n\nimport { isEqual, last } from 'lodash';\nimport {\n  BaseVariableField,\n  Disposable,\n  DisposableCollection,\n  Scope,\n  useCurrentScope,\n} from '@flowgram.ai/editor';\nimport { Popover } from '@douyinfe/semi-ui';\nimport { IconIssueStroked } from '@douyinfe/semi-icons';\nimport { useInjector } from '@coze-editor/editor/react';\nimport {\n  Decoration,\n  DecorationSet,\n  EditorView,\n  MatchDecorator,\n  ViewPlugin,\n  WidgetType,\n} from '@codemirror/view';\n\nimport { IPolyfillRoot, polyfillCreateRoot } from '@/shared';\n\nimport { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';\n\nclass VariableTagWidget extends WidgetType {\n  keyPath?: string[];\n\n  toDispose = new DisposableCollection();\n\n  scope: Scope;\n\n  root: IPolyfillRoot;\n\n  constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {\n    super();\n\n    this.keyPath = keyPath;\n    this.scope = scope;\n  }\n\n  renderIcon = (icon: string | JSX.Element) => {\n    if (typeof icon === 'string') {\n      return <img style={{ marginRight: 8 }} width={12} height={12} src={icon} />;\n    }\n\n    return icon;\n  };\n\n  renderVariable(v?: BaseVariableField) {\n    if (!v) {\n      this.root.render(\n        <UITag prefixIcon={<IconIssueStroked />} color=\"amber\">\n          Unknown\n        </UITag>\n      );\n      return;\n    }\n\n    const rootField = last(v.parentFields);\n\n    const rootTitle = (\n      <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>\n    );\n    const rootIcon = this.renderIcon(rootField?.meta.icon);\n\n    this.root.render(\n      <Popover\n        content={\n          <UIPopoverContent>\n            {rootIcon}\n            {rootTitle}\n            <UIVarName>{v?.keyPath.slice(1).join('.')}</UIVarName>\n          </UIPopoverContent>\n        }\n      >\n        <UITag prefixIcon={rootIcon}>\n          {rootTitle}\n          <UIVarName>{v?.key}</UIVarName>\n        </UITag>\n      </Popover>\n    );\n  }\n\n  toDOM(view: EditorView): HTMLElement {\n    const dom = document.createElement('span');\n\n    this.root = polyfillCreateRoot(dom);\n\n    this.toDispose.push(\n      Disposable.create(() => {\n        this.root.unmount();\n      })\n    );\n\n    this.toDispose.push(\n      this.scope.available.trackByKeyPath(\n        this.keyPath,\n        (v) => {\n          this.renderVariable(v);\n        },\n        { triggerOnInit: false }\n      )\n    );\n\n    this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));\n\n    return dom;\n  }\n\n  eq(other: VariableTagWidget) {\n    return isEqual(this.keyPath, other.keyPath);\n  }\n\n  ignoreEvent(): boolean {\n    return false;\n  }\n\n  destroy(dom: HTMLElement): void {\n    this.toDispose.dispose();\n  }\n}\n\nexport function VariableTagInject() {\n  const injector = useInjector();\n\n  const scope = useCurrentScope();\n\n  // 基于 {{var}} 的正则进行匹配，匹配后进行自定义渲染\n  useLayoutEffect(() => {\n    const atMatcher = new MatchDecorator({\n      regexp: /\\{\\{([^\\}\\{]+)\\}\\}/g,\n      decoration: (match) =>\n        Decoration.replace({\n          widget: new VariableTagWidget({\n            keyPath: match[1]?.split('.') ?? [],\n            scope,\n          }),\n        }),\n    });\n\n    return injector.inject([\n      ViewPlugin.fromClass(\n        class {\n          decorations: DecorationSet;\n\n          constructor(private view: EditorView) {\n            this.decorations = atMatcher.createDeco(view);\n          }\n\n          update() {\n            this.decorations = atMatcher.createDeco(this.view);\n          }\n        },\n        {\n          decorations: (p) => p.decorations,\n          provide(p) {\n            return EditorView.atomicRanges.of(\n              (view) => view.plugin(p)?.decorations ?? Decoration.none\n            );\n          },\n        }\n      ),\n    ]);\n  }, [injector]);\n\n  return null;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport styled from 'styled-components';\nimport { Tag } from '@douyinfe/semi-ui';\n\nexport const UIRootTitle = styled.div`\n  margin-right: 4px;\n  min-width: 20px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--semi-color-text-2);\n`;\n\nexport const UIVarName = styled.div`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const UITag = styled(Tag)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  max-width: 300px;\n\n  & .semi-tag-content-center {\n    justify-content: flex-start;\n  }\n\n  &.semi-tag {\n    margin: 0 5px;\n  }\n`;\n\nexport const UIPopoverContent = styled.div`\n  padding: 10px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n`;\n"],"mappings":";;;;;;;;;AAKA,OAAOA,YAAW;AAElB,SAAS,YAAY;AACrB,SAAS,0BAA0B;;;ACHnC,OAAO,SAAS,WAAW,gBAAgB;AAE3C,SAAS,SAAS,YAAY;AAC9B;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKA,SAAS,eAAe;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,SAAS,UAAqB;AAEpC,WAAS,OAAO,cAAsB;AACpC,UAAM,QAAQ,8BAA8B,OAAO,MAAM,KAAK;AAE9D,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,WAAO,YAAY;AAAA,MACjB,GAAG;AAAA,MACH,MAAM,OAAO,eAAe;AAAA,IAC9B,CAAC;AAED,eAAW,KAAK;AAAA,EAClB;AAEA,WAAS,iBAAiB,GAA2B;AACnD,gBAAY,EAAE,MAAM,UAAU,KAAK,IAAI;AACvC,eAAW,EAAE,KAAK;AAAA,EACpB;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,WAAW,gBAAgB,CAAC,CAAC;AAEnC,SACE,0DACE,oCAAC,WAAQ,mBAAmB,CAAC,GAAG,GAAG,cAAc,kBAAkB,GAEnE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,UAAU;AAAA,MACV,SACE,oCAAC,SAAI,OAAO,EAAE,OAAO,IAAI,KACvB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU,CAAC,MAAM;AACf,mBAAO,CAAC;AAAA,UACV;AAAA;AAAA,MACF,CACF;AAAA;AAAA,IAIF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAEA,UAAU,MAAM,UAAU,OAAO,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA,IACjD;AAAA,EACF,CACF;AAEJ;;;AC7EA,OAAOC,UAAS,uBAAuB;AAEvC,SAAS,SAAS,YAAY;AAC9B;AAAA,EAEE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,WAAAC,gBAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACpBP,OAAO,YAAY;AACnB,SAAS,WAAW;AAEb,IAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,IAAM,QAAQ,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAexB,IAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADPvC,IAAM,oBAAN,cAAgC,WAAW;AAAA,EASzC,YAAY,EAAE,SAAS,MAAM,GAAyC;AACpE,UAAM;AAPR,qBAAY,IAAI,qBAAqB;AAarC,sBAAa,CAAC,SAA+B;AAC3C,UAAI,OAAO,SAAS,UAAU;AAC5B,eAAO,gBAAAC,OAAA,cAAC,SAAI,OAAO,EAAE,aAAa,EAAE,GAAG,OAAO,IAAI,QAAQ,IAAI,KAAK,MAAM;AAAA,MAC3E;AAEA,aAAO;AAAA,IACT;AAVE,SAAK,UAAU;AACf,SAAK,QAAQ;AAAA,EACf;AAAA,EAUA,eAAe,GAAuB;AACpC,QAAI,CAAC,GAAG;AACN,WAAK,KAAK;AAAA,QACR,gBAAAA,OAAA,cAAC,SAAM,YAAY,gBAAAA,OAAA,cAAC,sBAAiB,GAAI,OAAM,WAAQ,SAEvD;AAAA,MACF;AACA;AAAA,IACF;AAEA,UAAM,YAAY,KAAK,EAAE,YAAY;AAErC,UAAM,YACJ,gBAAAA,OAAA,cAAC,mBAAa,WAAW,KAAK,QAAQ,GAAG,UAAU,KAAK,KAAK,OAAO,EAAG;AAEzE,UAAM,WAAW,KAAK,WAAW,WAAW,KAAK,IAAI;AAErD,SAAK,KAAK;AAAA,MACR,gBAAAA,OAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SACE,gBAAAD,OAAA,cAAC,wBACE,UACA,WACD,gBAAAA,OAAA,cAAC,iBAAW,GAAG,QAAQ,MAAM,CAAC,EAAE,KAAK,GAAG,CAAE,CAC5C;AAAA;AAAA,QAGF,gBAAAA,OAAA,cAAC,SAAM,YAAY,YAChB,WACD,gBAAAA,OAAA,cAAC,iBAAW,GAAG,GAAI,CACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,MAAM,MAA+B;AACnC,UAAM,MAAM,SAAS,cAAc,MAAM;AAEzC,SAAK,OAAO,mBAAmB,GAAG;AAElC,SAAK,UAAU;AAAA,MACb,WAAW,OAAO,MAAM;AACtB,aAAK,KAAK,QAAQ;AAAA,MACpB,CAAC;AAAA,IACH;AAEA,SAAK,UAAU;AAAA,MACb,KAAK,MAAM,UAAU;AAAA,QACnB,KAAK;AAAA,QACL,CAAC,MAAM;AACL,eAAK,eAAe,CAAC;AAAA,QACvB;AAAA,QACA,EAAE,eAAe,MAAM;AAAA,MACzB;AAAA,IACF;AAEA,SAAK,eAAe,KAAK,MAAM,UAAU,aAAa,KAAK,OAAO,CAAC;AAEnE,WAAO;AAAA,EACT;AAAA,EAEA,GAAG,OAA0B;AAC3B,WAAO,QAAQ,KAAK,SAAS,MAAM,OAAO;AAAA,EAC5C;AAAA,EAEA,cAAuB;AACrB,WAAO;AAAA,EACT;AAAA,EAEA,QAAQ,KAAwB;AAC9B,SAAK,UAAU,QAAQ;AAAA,EACzB;AACF;AAEO,SAAS,oBAAoB;AAClC,QAAM,WAAW,YAAY;AAE7B,QAAM,QAAQ,gBAAgB;AAG9B,kBAAgB,MAAM;AACpB,UAAM,YAAY,IAAI,eAAe;AAAA,MACnC,QAAQ;AAAA,MACR,YAAY,CAAC,UACX,WAAW,QAAQ;AAAA,QACjB,QAAQ,IAAI,kBAAkB;AAAA,UAC5B,SAAS,MAAM,CAAC,GAAG,MAAM,GAAG,KAAK,CAAC;AAAA,UAClC;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAAA,IACL,CAAC;AAED,WAAO,SAAS,OAAO;AAAA,MACrB,WAAW;AAAA,QACT,MAAM;AAAA,UAGJ,YAAoB,MAAkB;AAAlB;AAClB,iBAAK,cAAc,UAAU,WAAW,IAAI;AAAA,UAC9C;AAAA,UAEA,SAAS;AACP,iBAAK,cAAc,UAAU,WAAW,KAAK,IAAI;AAAA,UACnD;AAAA,QACF;AAAA,QACA;AAAA,UACE,aAAa,CAAC,MAAM,EAAE;AAAA,UACtB,QAAQ,GAAG;AACT,mBAAO,WAAW,aAAa;AAAA,cAC7B,CAAC,SAAS,KAAK,OAAO,CAAC,GAAG,eAAe,WAAW;AAAA,YACtD;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;;;AF5JA,SAAS,eAAe,aAAqB,OAAwB;AACnE,QAAM,cAAc,IAAI;AAAA,IACtB;AAAA,IACA,MAAM,MAAM,SAAS,GAAG,IAAI,MAAM,QAAQ,MAAM,QAAQ;AAAA,EAC1D;AACA,MAAI;AACJ,QAAM,UAAmB,CAAC;AAE1B,UAAQ,QAAQ,YAAY,KAAK,WAAW,OAAO,MAAM;AACvD,QAAI,MAAM,UAAU,YAAY,WAAW;AACzC,kBAAY;AAAA,IACd;AACA,YAAQ,KAAK;AAAA,MACX,OAAO,MAAM,CAAC;AAAA,MACd,OAAO,CAAC,MAAM,OAAO,MAAM,QAAQ,MAAM,CAAC,EAAE,MAAM;AAAA,IACpD,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEA,IAAM,cAAc,mBAAmB,CAAC,SAAe;AACrD,QAAM,iBAAiB,KAAK,SAAS;AACrC,QAAM,UAAU,eAAe,gBAAgB,mBAAmB;AAElE,MAAI,QAAQ,SAAS,GAAG;AACtB,YAAQ,QAAQ,CAAC,EAAE,MAAM,MAAM;AAC7B,WAAK,aAAa,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,MAAM;AAAA,IAC9C,CAAC;AAAA,EACH;AAEA,SAAO;AACT,CAAC;AAIM,SAAS,wBAAwB,OAAqC;AAC3E,SACE,gBAAAE,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,uBAAuB,KAAK,EAAE,8BAA8B;AAAA,MAC3D,GAAG;AAAA,MACJ,SAAS;AAAA,QACP;AAAA,QACA,GAAI,MAAM,WAAW,CAAC;AAAA,MACxB;AAAA;AAAA,IAEA,gBAAAA,OAAA,cAAC,kBAAa;AAAA,IACd,gBAAAA,OAAA,cAAC,uBAAkB;AAAA,EACrB;AAEJ;","names":["React","React","Popover","React","Popover","React"]}

package/dist/esm/editor-JX42GFAZ.js

@@ -0,0 +1,249 @@
+import {
+  PromptEditor
+} from "./chunk-6OZSB6PD.js";
+import {
+  useVariableTree
+} from "./chunk-G4HQ7OSI.js";
+import {
+  polyfillCreateRoot
+} from "./chunk-QIJ4QVB2.js";
+
+// src/components/prompt-editor-with-variables/editor.tsx
+import React3 from "react";
+
+// src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
+import React, { useEffect, useState } from "react";
+import { Popover, Tree } from "@douyinfe/semi-ui";
+import {
+  Mention,
+  getCurrentMentionReplaceRange,
+  useEditor,
+  PositionMirror
+} from "@coze-editor/editor/react";
+function VariableTree() {
+  const [posKey, setPosKey] = useState("");
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(-1);
+  const editor = useEditor();
+  function insert(variablePath) {
+    const range = getCurrentMentionReplaceRange(editor.$view.state);
+    if (!range) {
+      return;
+    }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
+    editor.replaceText({
+      from,
+      to,
+      text: "{{" + variablePath + "}}"
+    });
+    setVisible(false);
+  }
+  function handleOpenChange(e) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+  const treeData = useVariableTree({});
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      visible,
+      trigger: "custom",
+      position: "topLeft",
+      rePosKey: posKey,
+      content: /* @__PURE__ */ React.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React.createElement(
+        Tree,
+        {
+          treeData,
+          onSelect: (v) => {
+            insert(v);
+          }
+        }
+      ))
+    },
+    /* @__PURE__ */ React.createElement(
+      PositionMirror,
+      {
+        position,
+        onChange: () => setPosKey(String(Math.random()))
+      }
+    )
+  ));
+}
+
+// src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
+import React2, { useLayoutEffect } from "react";
+import { isEqual, last } from "lodash";
+import {
+  Disposable,
+  DisposableCollection,
+  useCurrentScope
+} from "@flowgram.ai/editor";
+import { Popover as Popover2 } from "@douyinfe/semi-ui";
+import { IconIssueStroked } from "@douyinfe/semi-icons";
+import { useInjector } from "@coze-editor/editor/react";
+import {
+  Decoration,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  WidgetType
+} from "@codemirror/view";
+
+// src/components/prompt-editor-with-variables/styles.tsx
+import styled from "styled-components";
+import { Tag } from "@douyinfe/semi-ui";
+var UIRootTitle = styled.div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+var UIVarName = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var UITag = styled(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 UIPopoverContent = styled.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+// src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
+var VariableTagWidget = class extends WidgetType {
+  constructor({ keyPath, scope }) {
+    super();
+    this.toDispose = new DisposableCollection();
+    this.renderIcon = (icon) => {
+      if (typeof icon === "string") {
+        return /* @__PURE__ */ React2.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__ */ React2.createElement(UITag, { prefixIcon: /* @__PURE__ */ React2.createElement(IconIssueStroked, null), color: "amber" }, "Unknown")
+      );
+      return;
+    }
+    const rootField = last(v.parentFields);
+    const rootTitle = /* @__PURE__ */ React2.createElement(UIRootTitle, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
+    const rootIcon = this.renderIcon(rootField?.meta.icon);
+    this.root.render(
+      /* @__PURE__ */ React2.createElement(
+        Popover2,
+        {
+          content: /* @__PURE__ */ React2.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ React2.createElement(UIVarName, null, v?.keyPath.slice(1).join(".")))
+        },
+        /* @__PURE__ */ React2.createElement(UITag, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React2.createElement(UIVarName, null, v?.key))
+      )
+    );
+  }
+  toDOM(view) {
+    const dom = document.createElement("span");
+    this.root = polyfillCreateRoot(dom);
+    this.toDispose.push(
+      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 isEqual(this.keyPath, other.keyPath);
+  }
+  ignoreEvent() {
+    return false;
+  }
+  destroy(dom) {
+    this.toDispose.dispose();
+  }
+};
+function VariableTagInject() {
+  const injector = useInjector();
+  const scope = useCurrentScope();
+  useLayoutEffect(() => {
+    const atMatcher = new MatchDecorator({
+      regexp: /\{\{([^\}\{]+)\}\}/g,
+      decoration: (match) => Decoration.replace({
+        widget: new VariableTagWidget({
+          keyPath: match[1]?.split(".") ?? [],
+          scope
+        })
+      })
+    });
+    return injector.inject([
+      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 EditorView.atomicRanges.of(
+              (view) => view.plugin(p)?.decorations ?? Decoration.none
+            );
+          }
+        }
+      )
+    ]);
+  }, [injector]);
+  return null;
+}
+
+// src/components/prompt-editor-with-variables/editor.tsx
+function PromptEditorWithVariables(props) {
+  return /* @__PURE__ */ React3.createElement(PromptEditor, { ...props }, /* @__PURE__ */ React3.createElement(VariableTree, null), /* @__PURE__ */ React3.createElement(VariableTagInject, null));
+}
+export {
+  PromptEditorWithVariables
+};
+//# sourceMappingURL=editor-JX42GFAZ.js.map

package/dist/esm/editor-JX42GFAZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/prompt-editor-with-variables/editor.tsx","../../src/components/prompt-editor-with-variables/extensions/variable-tree.tsx","../../src/components/prompt-editor-with-variables/extensions/variable-tag.tsx","../../src/components/prompt-editor-with-variables/styles.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\n\nimport { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';\n\nimport { VariableTree } from './extensions/variable-tree';\nimport { VariableTagInject } from './extensions/variable-tag';\n\nexport interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}\n\nexport function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {\n  return (\n    <PromptEditor {...props}>\n      <VariableTree />\n      <VariableTagInject />\n    </PromptEditor>\n  );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useEffect, useState } from 'react';\n\nimport { Popover, Tree } from '@douyinfe/semi-ui';\nimport {\n  Mention,\n  MentionOpenChangeEvent,\n  getCurrentMentionReplaceRange,\n  useEditor,\n  PositionMirror,\n} from '@coze-editor/editor/react';\nimport { EditorAPI } from '@coze-editor/editor/preset-prompt';\n\nimport { useVariableTree } from '@/components/variable-selector';\n\nexport function VariableTree() {\n  const [posKey, setPosKey] = useState('');\n  const [visible, setVisible] = useState(false);\n  const [position, setPosition] = useState(-1);\n  const editor = useEditor<EditorAPI>();\n\n  function insert(variablePath: string) {\n    const range = getCurrentMentionReplaceRange(editor.$view.state);\n\n    if (!range) {\n      return;\n    }\n\n    /**\n     * When user input {{xxxx}}, {{{xxx}}}(more brackets if possible), replace all brackets with {{xxxx}}\n     */\n    let { from, to } = range;\n    while (editor.$view.state.doc.sliceString(from - 1, from) === '{') {\n      from--;\n    }\n    while (editor.$view.state.doc.sliceString(to, to + 1) === '}') {\n      to++;\n    }\n\n    editor.replaceText({\n      from,\n      to,\n      text: '{{' + variablePath + '}}',\n    });\n\n    setVisible(false);\n  }\n\n  function handleOpenChange(e: MentionOpenChangeEvent) {\n    setPosition(e.state.selection.main.head);\n    setVisible(e.value);\n  }\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n  }, [editor, visible]);\n\n  const treeData = useVariableTree({});\n\n  return (\n    <>\n      <Mention triggerCharacters={['{', '{}', '@']} onOpenChange={handleOpenChange} />\n\n      <Popover\n        visible={visible}\n        trigger=\"custom\"\n        position=\"topLeft\"\n        rePosKey={posKey}\n        content={\n          <div style={{ width: 300 }}>\n            <Tree\n              treeData={treeData}\n              onSelect={(v) => {\n                insert(v);\n              }}\n            />\n          </div>\n        }\n      >\n        {/* PositionMirror allows the Popover to appear at the specified cursor position */}\n        <PositionMirror\n          position={position}\n          // When Doc scroll, update position\n          onChange={() => setPosKey(String(Math.random()))}\n        />\n      </Popover>\n    </>\n  );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useLayoutEffect } from 'react';\n\nimport { isEqual, last } from 'lodash';\nimport {\n  BaseVariableField,\n  Disposable,\n  DisposableCollection,\n  Scope,\n  useCurrentScope,\n} from '@flowgram.ai/editor';\nimport { Popover } from '@douyinfe/semi-ui';\nimport { IconIssueStroked } from '@douyinfe/semi-icons';\nimport { useInjector } from '@coze-editor/editor/react';\nimport {\n  Decoration,\n  DecorationSet,\n  EditorView,\n  MatchDecorator,\n  ViewPlugin,\n  WidgetType,\n} from '@codemirror/view';\n\nimport { IPolyfillRoot, polyfillCreateRoot } from '@/shared';\n\nimport { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';\n\nclass VariableTagWidget extends WidgetType {\n  keyPath?: string[];\n\n  toDispose = new DisposableCollection();\n\n  scope: Scope;\n\n  root: IPolyfillRoot;\n\n  constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {\n    super();\n\n    this.keyPath = keyPath;\n    this.scope = scope;\n  }\n\n  renderIcon = (icon: string | JSX.Element) => {\n    if (typeof icon === 'string') {\n      return <img style={{ marginRight: 8 }} width={12} height={12} src={icon} />;\n    }\n\n    return icon;\n  };\n\n  renderVariable(v?: BaseVariableField) {\n    if (!v) {\n      this.root.render(\n        <UITag prefixIcon={<IconIssueStroked />} color=\"amber\">\n          Unknown\n        </UITag>\n      );\n      return;\n    }\n\n    const rootField = last(v.parentFields);\n\n    const rootTitle = (\n      <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>\n    );\n    const rootIcon = this.renderIcon(rootField?.meta.icon);\n\n    this.root.render(\n      <Popover\n        content={\n          <UIPopoverContent>\n            {rootIcon}\n            {rootTitle}\n            <UIVarName>{v?.keyPath.slice(1).join('.')}</UIVarName>\n          </UIPopoverContent>\n        }\n      >\n        <UITag prefixIcon={rootIcon}>\n          {rootTitle}\n          <UIVarName>{v?.key}</UIVarName>\n        </UITag>\n      </Popover>\n    );\n  }\n\n  toDOM(view: EditorView): HTMLElement {\n    const dom = document.createElement('span');\n\n    this.root = polyfillCreateRoot(dom);\n\n    this.toDispose.push(\n      Disposable.create(() => {\n        this.root.unmount();\n      })\n    );\n\n    this.toDispose.push(\n      this.scope.available.trackByKeyPath(\n        this.keyPath,\n        (v) => {\n          this.renderVariable(v);\n        },\n        { triggerOnInit: false }\n      )\n    );\n\n    this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));\n\n    return dom;\n  }\n\n  eq(other: VariableTagWidget) {\n    return isEqual(this.keyPath, other.keyPath);\n  }\n\n  ignoreEvent(): boolean {\n    return false;\n  }\n\n  destroy(dom: HTMLElement): void {\n    this.toDispose.dispose();\n  }\n}\n\nexport function VariableTagInject() {\n  const injector = useInjector();\n\n  const scope = useCurrentScope();\n\n  // 基于 {{var}} 的正则进行匹配，匹配后进行自定义渲染\n  useLayoutEffect(() => {\n    const atMatcher = new MatchDecorator({\n      regexp: /\\{\\{([^\\}\\{]+)\\}\\}/g,\n      decoration: (match) =>\n        Decoration.replace({\n          widget: new VariableTagWidget({\n            keyPath: match[1]?.split('.') ?? [],\n            scope,\n          }),\n        }),\n    });\n\n    return injector.inject([\n      ViewPlugin.fromClass(\n        class {\n          decorations: DecorationSet;\n\n          constructor(private view: EditorView) {\n            this.decorations = atMatcher.createDeco(view);\n          }\n\n          update() {\n            this.decorations = atMatcher.createDeco(this.view);\n          }\n        },\n        {\n          decorations: (p) => p.decorations,\n          provide(p) {\n            return EditorView.atomicRanges.of(\n              (view) => view.plugin(p)?.decorations ?? Decoration.none\n            );\n          },\n        }\n      ),\n    ]);\n  }, [injector]);\n\n  return null;\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport styled from 'styled-components';\nimport { Tag } from '@douyinfe/semi-ui';\n\nexport const UIRootTitle = styled.div`\n  margin-right: 4px;\n  min-width: 20px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--semi-color-text-2);\n`;\n\nexport const UIVarName = styled.div`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const UITag = styled(Tag)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  max-width: 300px;\n\n  & .semi-tag-content-center {\n    justify-content: flex-start;\n  }\n\n  &.semi-tag {\n    margin: 0 5px;\n  }\n`;\n\nexport const UIPopoverContent = styled.div`\n  padding: 10px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n`;\n"],"mappings":"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","names":["React","React","Popover","React","Popover","React"]}

package/dist/esm/editor-YMNCDGUR.js

@@ -0,0 +1,167 @@
+import {
+  PromptEditor
+} from "./chunk-6OZSB6PD.js";
+import {
+  FlowValueUtils
+} from "./chunk-QIJ4QVB2.js";
+
+// src/components/prompt-editor-with-inputs/editor.tsx
+import React3 from "react";
+
+// src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
+import React2, { useEffect, useState } from "react";
+import { Popover } from "@douyinfe/semi-ui";
+import {
+  Mention,
+  getCurrentMentionReplaceRange,
+  useEditor,
+  PositionMirror
+} from "@coze-editor/editor/react";
+
+// src/components/prompt-editor-with-inputs/inputs-picker.tsx
+import React, { useMemo } from "react";
+import { isPlainObject, last } from "lodash";
+import {
+  ASTMatch,
+  useScopeAvailable
+} from "@flowgram.ai/editor";
+import { Tree } from "@douyinfe/semi-ui";
+function InputsPicker({
+  inputsValues,
+  onSelect
+}) {
+  const available = useScopeAvailable();
+  const getArrayDrilldown = (type, depth = 1) => {
+    if (ASTMatch.isArray(type.items)) {
+      return getArrayDrilldown(type.items, depth + 1);
+    }
+    return { type: type.items, depth };
+  };
+  const renderVariable = (variable, keyPath) => {
+    let type = variable?.type;
+    let children;
+    if (ASTMatch.isObject(type)) {
+      children = (type.properties || []).map((_property) => renderVariable(_property, [...keyPath, _property.key])).filter(Boolean);
+    }
+    if (ASTMatch.isArray(type)) {
+      const drilldown = getArrayDrilldown(type);
+      if (ASTMatch.isObject(drilldown.type)) {
+        children = (drilldown.type.properties || []).map(
+          (_property) => renderVariable(_property, [
+            ...keyPath,
+            ...new Array(drilldown.depth).fill("[0]"),
+            _property.key
+          ])
+        ).filter(Boolean);
+      }
+    }
+    const key = keyPath.map((_key, idx) => _key === "[0]" || idx === 0 ? _key : `.${_key}`).join("");
+    return {
+      key,
+      label: last(keyPath),
+      value: key,
+      children
+    };
+  };
+  const getTreeData = (value, keyPath) => {
+    const currKey = keyPath.join(".");
+    if (FlowValueUtils.isFlowValue(value)) {
+      if (FlowValueUtils.isRef(value)) {
+        const variable = available.getByKeyPath(value.content || []);
+        if (variable) {
+          return renderVariable(variable, keyPath);
+        }
+      }
+      return {
+        key: currKey,
+        value: currKey,
+        label: last(keyPath)
+      };
+    }
+    if (isPlainObject(value)) {
+      return {
+        key: currKey,
+        value: currKey,
+        label: last(keyPath),
+        children: Object.entries(value).map(([key, value2]) => getTreeData(value2, [...keyPath, key])).filter(Boolean)
+      };
+    }
+  };
+  const treeData = useMemo(
+    () => Object.entries(inputsValues).map(([key, value]) => getTreeData(value, [key])).filter(Boolean),
+    []
+  );
+  return /* @__PURE__ */ React.createElement(Tree, { treeData, onSelect: (v) => onSelect(v) });
+}
+
+// src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
+function InputsTree({ inputsValues }) {
+  const [posKey, setPosKey] = useState("");
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(-1);
+  const editor = useEditor();
+  function insert(variablePath) {
+    const range = getCurrentMentionReplaceRange(editor.$view.state);
+    if (!range) {
+      return;
+    }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
+    editor.replaceText({
+      ...range,
+      text: "{{" + variablePath + "}}"
+    });
+    setVisible(false);
+  }
+  function handleOpenChange(e) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React2.createElement(
+    Popover,
+    {
+      visible,
+      trigger: "custom",
+      position: "topLeft",
+      rePosKey: posKey,
+      content: /* @__PURE__ */ React2.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React2.createElement(
+        InputsPicker,
+        {
+          inputsValues,
+          onSelect: (v) => {
+            insert(v);
+          }
+        }
+      ))
+    },
+    /* @__PURE__ */ React2.createElement(
+      PositionMirror,
+      {
+        position,
+        onChange: () => setPosKey(String(Math.random()))
+      }
+    )
+  ));
+}
+
+// src/components/prompt-editor-with-inputs/editor.tsx
+function PromptEditorWithInputs({
+  inputsValues,
+  ...restProps
+}) {
+  return /* @__PURE__ */ React3.createElement(PromptEditor, { ...restProps }, /* @__PURE__ */ React3.createElement(InputsTree, { inputsValues }));
+}
+export {
+  PromptEditorWithInputs
+};
+//# sourceMappingURL=editor-YMNCDGUR.js.map

package/dist/esm/editor-YMNCDGUR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/prompt-editor-with-inputs/editor.tsx","../../src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx","../../src/components/prompt-editor-with-inputs/inputs-picker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\n\nimport { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';\n\nimport { InputsTree } from './extensions/inputs-tree';\n\nexport interface PromptEditorWithInputsProps extends PromptEditorPropsType {\n  inputsValues: any;\n}\n\nexport function PromptEditorWithInputs({\n  inputsValues,\n  ...restProps\n}: PromptEditorWithInputsProps) {\n  return (\n    <PromptEditor {...restProps}>\n      <InputsTree inputsValues={inputsValues} />\n    </PromptEditor>\n  );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useEffect, useState } from 'react';\n\nimport { Popover } from '@douyinfe/semi-ui';\nimport {\n  Mention,\n  MentionOpenChangeEvent,\n  getCurrentMentionReplaceRange,\n  useEditor,\n  PositionMirror,\n} from '@coze-editor/editor/react';\nimport { EditorAPI } from '@coze-editor/editor/preset-prompt';\n\nimport { IFlowValue } from '@/typings';\n\nimport { InputsPicker } from '../inputs-picker';\n\nexport function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlowValue> }) {\n  const [posKey, setPosKey] = useState('');\n  const [visible, setVisible] = useState(false);\n  const [position, setPosition] = useState(-1);\n  const editor = useEditor<EditorAPI>();\n\n  function insert(variablePath: string) {\n    const range = getCurrentMentionReplaceRange(editor.$view.state);\n\n    if (!range) {\n      return;\n    }\n\n    /**\n     * When user input {{xxxx}}, {{{xxx}}}(more brackets if possible), replace all brackets with {{xxxx}}\n     */\n    let { from, to } = range;\n    while (editor.$view.state.doc.sliceString(from - 1, from) === '{') {\n      from--;\n    }\n    while (editor.$view.state.doc.sliceString(to, to + 1) === '}') {\n      to++;\n    }\n\n    editor.replaceText({\n      ...range,\n      text: '{{' + variablePath + '}}',\n    });\n\n    setVisible(false);\n  }\n\n  function handleOpenChange(e: MentionOpenChangeEvent) {\n    setPosition(e.state.selection.main.head);\n    setVisible(e.value);\n  }\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n  }, [editor, visible]);\n\n  return (\n    <>\n      <Mention triggerCharacters={['{', '{}', '@']} onOpenChange={handleOpenChange} />\n\n      <Popover\n        visible={visible}\n        trigger=\"custom\"\n        position=\"topLeft\"\n        rePosKey={posKey}\n        content={\n          <div style={{ width: 300 }}>\n            <InputsPicker\n              inputsValues={inputsValues}\n              onSelect={(v) => {\n                insert(v);\n              }}\n            />\n          </div>\n        }\n      >\n        {/* PositionMirror allows the Popover to appear at the specified cursor position */}\n        <PositionMirror\n          position={position}\n          // When Doc scroll, update position\n          onChange={() => setPosKey(String(Math.random()))}\n        />\n      </Popover>\n    </>\n  );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useMemo } from 'react';\n\nimport { isPlainObject, last } from 'lodash';\nimport {\n  type ArrayType,\n  ASTMatch,\n  type BaseType,\n  type BaseVariableField,\n  useScopeAvailable,\n} from '@flowgram.ai/editor';\nimport { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';\nimport { Tree } from '@douyinfe/semi-ui';\n\nimport { FlowValueUtils } from '@/shared';\n\ntype VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;\n\nexport function InputsPicker({\n  inputsValues,\n  onSelect,\n}: {\n  inputsValues: any;\n  onSelect: (v: string) => void;\n}) {\n  const available = useScopeAvailable();\n\n  const getArrayDrilldown = (type: ArrayType, depth = 1): { type: BaseType; depth: number } => {\n    if (ASTMatch.isArray(type.items)) {\n      return getArrayDrilldown(type.items, depth + 1);\n    }\n\n    return { type: type.items, depth: depth };\n  };\n\n  const renderVariable = (variable: VariableField, keyPath: string[]): TreeNodeData => {\n    let type = variable?.type;\n\n    let children: TreeNodeData[] | undefined;\n\n    if (ASTMatch.isObject(type)) {\n      children = (type.properties || [])\n        .map((_property) => renderVariable(_property as VariableField, [...keyPath, _property.key]))\n        .filter(Boolean) as TreeNodeData[];\n    }\n\n    if (ASTMatch.isArray(type)) {\n      const drilldown = getArrayDrilldown(type);\n\n      if (ASTMatch.isObject(drilldown.type)) {\n        children = (drilldown.type.properties || [])\n          .map((_property) =>\n            renderVariable(_property as VariableField, [\n              ...keyPath,\n              ...new Array(drilldown.depth).fill('[0]'),\n              _property.key,\n            ])\n          )\n          .filter(Boolean) as TreeNodeData[];\n      }\n    }\n\n    const key = keyPath\n      .map((_key, idx) => (_key === '[0]' || idx === 0 ? _key : `.${_key}`))\n      .join('');\n\n    return {\n      key: key,\n      label: last(keyPath),\n      value: key,\n      children,\n    };\n  };\n\n  const getTreeData = (value: any, keyPath: string[]): TreeNodeData | undefined => {\n    const currKey = keyPath.join('.');\n\n    if (FlowValueUtils.isFlowValue(value)) {\n      if (FlowValueUtils.isRef(value)) {\n        const variable = available.getByKeyPath(value.content || []);\n        if (variable) {\n          return renderVariable(variable, keyPath);\n        }\n      }\n      return {\n        key: currKey,\n        value: currKey,\n        label: last(keyPath),\n      };\n    }\n\n    if (isPlainObject(value)) {\n      return {\n        key: currKey,\n        value: currKey,\n        label: last(keyPath),\n        children: Object.entries(value)\n          .map(([key, value]) => getTreeData(value, [...keyPath, key])!)\n          .filter(Boolean),\n      };\n    }\n  };\n\n  const treeData: TreeNodeData[] = useMemo(\n    () =>\n      Object.entries(inputsValues)\n        .map(([key, value]) => getTreeData(value, [key])!)\n        .filter(Boolean),\n    []\n  );\n\n  return <Tree treeData={treeData} onSelect={(v) => onSelect(v)} />;\n}\n"],"mappings":"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","names":["React","React","value","React","React"]}