@flowgram.ai/form-materials 0.2.18 → 0.2.19

package/dist/esm/index.js

@@ -1817,7 +1817,15 @@ function ConditionRow({ style, value, onChange, readonly }) {
       schema: targetSchema,
       onChange: (v) => onChange({ ...value, right: v })
     }
-  ) : /* @__PURE__ */ React13.createElement(Input3, { size: "small", disabled: true, value: opConfig?.rightDisplay || "Empty" }))));
+  ) : /* @__PURE__ */ React13.createElement(
+    Input3,
+    {
+      size: "small",
+      disabled: true,
+      style: { pointerEvents: "none" },
+      value: opConfig?.rightDisplay || "Empty"
+    }
+  ))));
 }
 
 // src/components/batch-outputs/index.tsx
@@ -2094,9 +2102,9 @@ function PromptEditor(props) {
 }
 
 // src/components/prompt-editor-with-variables/index.tsx
-import React17 from "react";
+import React18 from "react";
 
-// src/components/prompt-editor-with-variables/extensions/variable.tsx
+// src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
 import React16, { useEffect as useEffect4, useState as useState6 } from "react";
 import { Popover, Tree } from "@douyinfe/semi-ui";
 import {
@@ -2105,7 +2113,7 @@ import {
   useEditor,
   PositionMirror
 } from "@coze-editor/editor/react";
-function Variable() {
+function VariableTree() {
   const [posKey, setPosKey] = useState6("");
   const [visible, setVisible] = useState6(false);
   const [position, setPosition] = useState6(-1);
@@ -2131,7 +2139,7 @@ function Variable() {
     }
   }, [editor, visible]);
   const treeData = useVariableTree({});
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Mention, { triggerCharacters: ["{", "{}"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React16.createElement(
     Popover,
     {
       visible,
@@ -2157,11 +2165,169 @@ function Variable() {
     )
   ));
 }
-var variable_default = Variable;
+
+// src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
+import React17, { useLayoutEffect as useLayoutEffect4 } from "react";
+import { createRoot } from "react-dom/client";
+import { isEqual, last } from "lodash";
+import {
+  Disposable,
+  DisposableCollection,
+  useCurrentScope
+} from "@flowgram.ai/editor";
+import { Popover as Popover2 } from "@douyinfe/semi-ui";
+import { IconIssueStroked as IconIssueStroked2 } from "@douyinfe/semi-icons";
+import { useInjector as useInjector4 } from "@coze-editor/editor/react";
+import {
+  Decoration,
+  EditorView as EditorView3,
+  MatchDecorator,
+  ViewPlugin,
+  WidgetType
+} from "@codemirror/view";
+
+// src/components/prompt-editor-with-variables/styles.tsx
+import styled7 from "styled-components";
+import { Tag as Tag2 } from "@douyinfe/semi-ui";
+var UIRootTitle2 = styled7.div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+var UIVarName2 = styled7.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var UITag2 = styled7(Tag2)`
+  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 = styled7.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__ */ React17.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__ */ React17.createElement(UITag2, { prefixIcon: /* @__PURE__ */ React17.createElement(IconIssueStroked2, null), color: "amber" }, "Unknown")
+      );
+      return;
+    }
+    const rootField = last(v.parentFields);
+    const rootTitle = /* @__PURE__ */ React17.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
+    const rootIcon = this.renderIcon(rootField?.meta.icon);
+    this.root.render(
+      /* @__PURE__ */ React17.createElement(
+        Popover2,
+        {
+          content: /* @__PURE__ */ React17.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ React17.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
+        },
+        /* @__PURE__ */ React17.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React17.createElement(UIVarName2, null, v?.key))
+      )
+    );
+  }
+  toDOM(view) {
+    const dom = document.createElement("span");
+    this.root = createRoot(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 = useInjector4();
+  const scope = useCurrentScope();
+  useLayoutEffect4(() => {
+    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 EditorView3.atomicRanges.of(
+              (view) => view.plugin(p)?.decorations ?? Decoration.none
+            );
+          }
+        }
+      )
+    ]);
+  }, [injector]);
+  return null;
+}
 
 // src/components/prompt-editor-with-variables/index.tsx
 function PromptEditorWithVariables(props) {
-  return /* @__PURE__ */ React17.createElement(PromptEditor, { ...props }, /* @__PURE__ */ React17.createElement(variable_default, null));
+  return /* @__PURE__ */ React18.createElement(PromptEditor, { ...props }, /* @__PURE__ */ React18.createElement(VariableTree, null), /* @__PURE__ */ React18.createElement(VariableTagInject, null));
 }
 
 // src/effects/provide-batch-input/index.ts