@flowgram.ai/form-materials 0.2.18 → 0.2.19

package/dist/index.js

@@ -1874,7 +1874,15 @@ function ConditionRow({ style, value, onChange, readonly }) {
       schema: targetSchema,
       onChange: (v) => onChange({ ...value, right: v })
     }
-  ) : /* @__PURE__ */ import_react15.default.createElement(import_semi_ui9.Input, { size: "small", disabled: true, value: opConfig?.rightDisplay || "Empty" }))));
+  ) : /* @__PURE__ */ import_react15.default.createElement(
+    import_semi_ui9.Input,
+    {
+      size: "small",
+      disabled: true,
+      style: { pointerEvents: "none" },
+      value: opConfig?.rightDisplay || "Empty"
+    }
+  ))));
 }
 
 // src/components/batch-outputs/index.tsx
@@ -2151,13 +2159,13 @@ function PromptEditor(props) {
 }
 
 // src/components/prompt-editor-with-variables/index.tsx
-var import_react28 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 
-// src/components/prompt-editor-with-variables/extensions/variable.tsx
+// src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
 var import_react26 = __toESM(require("react"));
 var import_semi_ui11 = require("@douyinfe/semi-ui");
 var import_react27 = require("@coze-editor/editor/react");
-function Variable() {
+function VariableTree() {
   const [posKey, setPosKey] = (0, import_react26.useState)("");
   const [visible, setVisible] = (0, import_react26.useState)(false);
   const [position, setPosition] = (0, import_react26.useState)(-1);
@@ -2183,7 +2191,7 @@ function Variable() {
     }
   }, [editor, visible]);
   const treeData = useVariableTree({});
-  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(import_react27.Mention, { triggerCharacters: ["{", "{}"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(import_react27.Mention, { triggerCharacters: ["{", "{}", "@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ import_react26.default.createElement(
     import_semi_ui11.Popover,
     {
       visible,
@@ -2209,37 +2217,185 @@ function Variable() {
     )
   ));
 }
-var variable_default = Variable;
+
+// src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
+var import_react28 = __toESM(require("react"));
+var import_client = require("react-dom/client");
+var import_lodash4 = require("lodash");
+var import_editor7 = require("@flowgram.ai/editor");
+var import_semi_ui13 = require("@douyinfe/semi-ui");
+var import_semi_icons9 = require("@douyinfe/semi-icons");
+var import_react29 = require("@coze-editor/editor/react");
+var import_view3 = require("@codemirror/view");
+
+// src/components/prompt-editor-with-variables/styles.tsx
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_semi_ui12 = require("@douyinfe/semi-ui");
+var UIRootTitle2 = import_styled_components7.default.div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+var UIVarName2 = import_styled_components7.default.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var UITag2 = (0, import_styled_components7.default)(import_semi_ui12.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 = import_styled_components7.default.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 import_view3.WidgetType {
+  constructor({ keyPath, scope }) {
+    super();
+    this.toDispose = new import_editor7.DisposableCollection();
+    this.renderIcon = (icon) => {
+      if (typeof icon === "string") {
+        return /* @__PURE__ */ import_react28.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_react28.default.createElement(UITag2, { prefixIcon: /* @__PURE__ */ import_react28.default.createElement(import_semi_icons9.IconIssueStroked, null), color: "amber" }, "Unknown")
+      );
+      return;
+    }
+    const rootField = (0, import_lodash4.last)(v.parentFields);
+    const rootTitle = /* @__PURE__ */ import_react28.default.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
+    const rootIcon = this.renderIcon(rootField?.meta.icon);
+    this.root.render(
+      /* @__PURE__ */ import_react28.default.createElement(
+        import_semi_ui13.Popover,
+        {
+          content: /* @__PURE__ */ import_react28.default.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ import_react28.default.createElement(UIVarName2, null, v?.keyPath.slice(1).join(".")))
+        },
+        /* @__PURE__ */ import_react28.default.createElement(UITag2, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ import_react28.default.createElement(UIVarName2, null, v?.key))
+      )
+    );
+  }
+  toDOM(view) {
+    const dom = document.createElement("span");
+    this.root = (0, import_client.createRoot)(dom);
+    this.toDispose.push(
+      import_editor7.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_lodash4.isEqual)(this.keyPath, other.keyPath);
+  }
+  ignoreEvent() {
+    return false;
+  }
+  destroy(dom) {
+    this.toDispose.dispose();
+  }
+};
+function VariableTagInject() {
+  const injector = (0, import_react29.useInjector)();
+  const scope = (0, import_editor7.useCurrentScope)();
+  (0, import_react28.useLayoutEffect)(() => {
+    const atMatcher = new import_view3.MatchDecorator({
+      regexp: /\{\{([^\}]+)\}\}/g,
+      decoration: (match) => import_view3.Decoration.replace({
+        widget: new VariableTagWidget({
+          keyPath: match[1]?.split(".") ?? [],
+          scope
+        })
+      })
+    });
+    return injector.inject([
+      import_view3.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_view3.EditorView.atomicRanges.of(
+              (view) => view.plugin(p)?.decorations ?? import_view3.Decoration.none
+            );
+          }
+        }
+      )
+    ]);
+  }, [injector]);
+  return null;
+}
 
 // src/components/prompt-editor-with-variables/index.tsx
 function PromptEditorWithVariables(props) {
-  return /* @__PURE__ */ import_react28.default.createElement(PromptEditor, { ...props }, /* @__PURE__ */ import_react28.default.createElement(variable_default, null));
+  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
-var import_editor7 = require("@flowgram.ai/editor");
-var provideBatchInputEffect = (0, import_editor7.createEffectFromVariableProvider)({
+var import_editor8 = require("@flowgram.ai/editor");
+var provideBatchInputEffect = (0, import_editor8.createEffectFromVariableProvider)({
   private: true,
   parse: (value, ctx) => [
-    import_editor7.ASTFactory.createVariableDeclaration({
+    import_editor8.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}_locals`,
       meta: {
-        title: (0, import_editor7.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor8.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor7.ASTFactory.createObject({
+      type: import_editor8.ASTFactory.createObject({
         properties: [
-          import_editor7.ASTFactory.createProperty({
+          import_editor8.ASTFactory.createProperty({
             key: "item",
-            initializer: import_editor7.ASTFactory.createEnumerateExpression({
-              enumerateFor: import_editor7.ASTFactory.createKeyPathExpression({
+            initializer: import_editor8.ASTFactory.createEnumerateExpression({
+              enumerateFor: import_editor8.ASTFactory.createKeyPathExpression({
                 keyPath: value.content || []
               })
             })
           }),
-          import_editor7.ASTFactory.createProperty({
+          import_editor8.ASTFactory.createProperty({
             key: "index",
-            type: import_editor7.ASTFactory.createNumber()
+            type: import_editor8.ASTFactory.createNumber()
           })
         ]
       })
@@ -2248,21 +2404,21 @@ var provideBatchInputEffect = (0, import_editor7.createEffectFromVariableProvide
 });
 
 // src/effects/provide-batch-outputs/index.ts
-var import_editor8 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect = (0, import_editor8.createEffectFromVariableProvider)({
+var import_editor9 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect = (0, import_editor9.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor8.ASTFactory.createVariableDeclaration({
+    import_editor9.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor8.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor9.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor8.ASTFactory.createObject({
+      type: import_editor9.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor8.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor9.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor8.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor8.ASTFactory.createKeyPathExpression({
+            initializer: import_editor9.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor9.ASTFactory.createKeyPathExpression({
                 keyPath: value2.content || []
               })
             })
@@ -2274,14 +2430,14 @@ var provideBatchOutputsEffect = (0, import_editor8.createEffectFromVariableProvi
 });
 
 // src/effects/auto-rename-ref/index.ts
-var import_lodash4 = require("lodash");
-var import_editor9 = require("@flowgram.ai/editor");
+var import_lodash5 = require("lodash");
+var import_editor10 = require("@flowgram.ai/editor");
 var autoRenameRefEffect = [
   {
-    event: import_editor9.DataEvent.onValueInit,
+    event: import_editor10.DataEvent.onValueInit,
     effect: (params) => {
       const { context, form, name } = params;
-      const renameService = context.node.getService(import_editor9.VariableFieldKeyRenameService);
+      const renameService = context.node.getService(import_editor10.VariableFieldKeyRenameService);
       const disposable = renameService.onRename(({ before, after }) => {
         const beforeKeyPath = [
           ...before.parentFields.map((_field) => _field.key).reverse(),
@@ -2311,7 +2467,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_lodash4.isObject)(value)) {
+  if ((0, import_lodash5.isObject)(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
@@ -2321,7 +2477,7 @@ function traverseRef(name, value, cb) {
     });
     return;
   }
-  if ((0, import_lodash4.isArray)(value)) {
+  if ((0, import_lodash5.isArray)(value)) {
     value.forEach((_value, idx) => {
       traverseRef(`${name}[${idx}]`, _value, cb);
     });
@@ -2331,13 +2487,13 @@ function traverseRef(name, value, cb) {
 }
 
 // src/effects/provide-json-schema-outputs/index.ts
-var import_editor10 = require("@flowgram.ai/editor");
-var provideJsonSchemaOutputs = (0, import_editor10.createEffectFromVariableProvider)({
+var import_editor11 = require("@flowgram.ai/editor");
+var provideJsonSchemaOutputs = (0, import_editor11.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor10.ASTFactory.createVariableDeclaration({
+    import_editor11.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor10.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
+        title: (0, import_editor11.getNodeForm)(ctx.node)?.getValueIn("title") || ctx.node.id,
         icon: ctx.node.getNodeRegistry().info?.icon
       },
       type: JsonSchemaUtils.schemaToAST(value)
@@ -2346,12 +2502,12 @@ var provideJsonSchemaOutputs = (0, import_editor10.createEffectFromVariableProvi
 });
 
 // src/effects/sync-variable-title/index.ts
-var import_editor11 = require("@flowgram.ai/editor");
+var import_editor12 = require("@flowgram.ai/editor");
 var syncVariableTitle = [
   {
-    event: import_editor11.DataEvent.onValueChange,
+    event: import_editor12.DataEvent.onValueChange,
     effect: ({ value, context }) => {
-      context.node.getData(import_editor11.FlowNodeVariableData).allScopes.forEach((_scope) => {
+      context.node.getData(import_editor12.FlowNodeVariableData).allScopes.forEach((_scope) => {
         _scope.output.variables.forEach((_var) => {
           _var.updateMeta({
             title: value || context.node.id,
@@ -2364,21 +2520,21 @@ var syncVariableTitle = [
 ];
 
 // src/form-plugins/batch-outputs-plugin/index.ts
-var import_editor12 = require("@flowgram.ai/editor");
-var provideBatchOutputsEffect2 = (0, import_editor12.createEffectFromVariableProvider)({
+var import_editor13 = require("@flowgram.ai/editor");
+var provideBatchOutputsEffect2 = (0, import_editor13.createEffectFromVariableProvider)({
   parse: (value, ctx) => [
-    import_editor12.ASTFactory.createVariableDeclaration({
+    import_editor13.ASTFactory.createVariableDeclaration({
       key: `${ctx.node.id}`,
       meta: {
-        title: (0, import_editor12.getNodeForm)(ctx.node)?.getValueIn("title"),
+        title: (0, import_editor13.getNodeForm)(ctx.node)?.getValueIn("title"),
         icon: ctx.node.getNodeRegistry().info?.icon
       },
-      type: import_editor12.ASTFactory.createObject({
+      type: import_editor13.ASTFactory.createObject({
         properties: Object.entries(value).map(
-          ([_key, value2]) => import_editor12.ASTFactory.createProperty({
+          ([_key, value2]) => import_editor13.ASTFactory.createProperty({
             key: _key,
-            initializer: import_editor12.ASTFactory.createWrapArrayExpression({
-              wrapFor: import_editor12.ASTFactory.createKeyPathExpression({
+            initializer: import_editor13.ASTFactory.createWrapArrayExpression({
+              wrapFor: import_editor13.ASTFactory.createKeyPathExpression({
                 keyPath: value2?.content || []
               })
             })
@@ -2388,7 +2544,7 @@ var provideBatchOutputsEffect2 = (0, import_editor12.createEffectFromVariablePro
     })
   ]
 });
-var createBatchOutputsFormPlugin = (0, import_editor12.defineFormPluginCreator)({
+var createBatchOutputsFormPlugin = (0, import_editor13.defineFormPluginCreator)({
   name: "batch-outputs-plugin",
   onSetupFormMeta({ mergeEffect }, { outputKey }) {
     mergeEffect({
@@ -2396,7 +2552,7 @@ var createBatchOutputsFormPlugin = (0, import_editor12.defineFormPluginCreator)(
     });
   },
   onInit(ctx, { outputKey }) {
-    const chainTransformService = ctx.node.getService(import_editor12.ScopeChainTransformService);
+    const chainTransformService = ctx.node.getService(import_editor13.ScopeChainTransformService);
     const batchNodeType = ctx.node.flowNodeType;
     const transformerId = `${batchNodeType}-outputs`;
     if (chainTransformService.hasTransformer(transformerId)) {
@@ -2406,21 +2562,21 @@ var createBatchOutputsFormPlugin = (0, import_editor12.defineFormPluginCreator)(
       transformCovers: (covers, ctx2) => {
         const node = ctx2.scope.meta?.node;
         if (node?.parent?.flowNodeType === batchNodeType) {
-          return [...covers, (0, import_editor12.getNodeScope)(node.parent)];
+          return [...covers, (0, import_editor13.getNodeScope)(node.parent)];
         }
         return covers;
       },
       transformDeps(scopes, ctx2) {
         const scopeMeta = ctx2.scope.meta;
-        if (scopeMeta?.type === import_editor12.FlowNodeScopeType.private) {
+        if (scopeMeta?.type === import_editor13.FlowNodeScopeType.private) {
           return scopes;
         }
         const node = scopeMeta?.node;
         if (node?.flowNodeType === batchNodeType) {
           const childBlocks = node.blocks;
           return [
-            (0, import_editor12.getNodePrivateScope)(node),
-            ...childBlocks.map((_childBlock) => (0, import_editor12.getNodeScope)(_childBlock))
+            (0, import_editor13.getNodePrivateScope)(node),
+            ...childBlocks.map((_childBlock) => (0, import_editor13.getNodeScope)(_childBlock))
           ];
         }
         return scopes;