n8n-editor-ui 1.57.0 → 1.58.0

package/dist/assets/{MainHeader-CnFMyNl3.js → MainHeader-OSniZ7Px.js}

@@ -1,19 +1,20 @@
-import { I as defineComponent, f as computed, J as openBlock, K as createElementBlock, Z as renderSlot, aB as pushScopeId, aC as popScopeId, an as resolveComponent, V as createBlock, $ as normalizeStyle, a3 as withCtx, L as createBaseVNode, R as Fragment, af as renderList, _ as normalizeClass, a6 as createTextVNode, a7 as toDisplayString, a8 as createVNode, a as ref, q as onMounted, m as onBeforeUnmount, ag as withKeys, b as watch, ac as withModifiers, n as nextTick, aM as useRouter, aE as useRoute, u as unref, U as createCommentVNode, aA as useCssModule, l as onBeforeMount, a4 as withDirectives, a9 as vShow } from "./vendor-tVazXwC6.js";
-import { s as shorten, c as useTagsStore, d as useDebounce, e as useUIStore, B as BREAKPOINT_SM, f as BREAKPOINT_XL, g as BREAKPOINT_LG, h as BREAKPOINT_MD, i as getBannerRowHeight, j as useRootStore, k as useCanvasStore, b as useSettingsStore, l as useSourceControlStore, a as useUsersStore, m as useWorkflowsStore, n as useProjectsStore, o as useNpsSurveyStore, u as useToast, p as useWorkflowHelpers, P as PLACEHOLDER_EMPTY_WORKFLOW_ID, V as VIEWS, q as getResourcePermissions, W as WORKFLOW_MENU_ACTIONS, r as hasPermission, E as EnterpriseEditionFeature, t as MAX_WORKFLOW_NAME_LENGTH, T as TagsDropdown, S as SaveButton, v as useI18n, w as useTelemetry, x as useMessage, y as useTitleChange, z as WORKFLOW_SHARE_MODAL_KEY, A as nodeViewEventBus, C as MODAL_CONFIRM, D as MODAL_CLOSE, F as WORKFLOW_SETTINGS_MODAL_KEY, G as SOURCE_CONTROL_PUSH_MODAL_KEY, H as VALID_WORKFLOW_IMPORT_URL_REGEX, I as DUPLICATE_MODAL_KEY, J as MAIN_HEADER_TABS, K as useNDVStore, L as useExecutionsStore, N as STICKY_NODE_TYPE } from "./index-BMqv_cxE.js";
-import { f as createEventBus, _ as _export_sfc } from "./n8n-NifPGZSM.js";
-import { m as mapStores } from "./pinia-DvV9jJ-A.js";
+import { I as defineComponent, f as computed, J as openBlock, K as createElementBlock, Z as renderSlot, a as ref, q as onMounted, m as onBeforeUnmount, an as resolveComponent, V as createBlock, a3 as withCtx, L as createBaseVNode, af as renderList, _ as normalizeClass, a6 as createTextVNode, a7 as toDisplayString, u as unref, a8 as createVNode, R as Fragment, $ as normalizeStyle, aB as pushScopeId, aC as popScopeId, n as nextTick, ag as withKeys, b as watch, ac as withModifiers, aM as useRouter, aE as useRoute, aA as useCssModule, U as createCommentVNode, l as onBeforeMount, a4 as withDirectives, a9 as vShow } from "./vendor-tVazXwC6.js";
+import { s as shorten, c as useTagsStore, d as useDebounce, e as useUIStore, B as BREAKPOINT_SM, f as BREAKPOINT_XL, g as BREAKPOINT_LG, h as BREAKPOINT_MD, i as getBannerRowHeight, V as VIEWS, j as useI18n, a as useUsersStore, k as useWorkflowsStore, l as isUserGlobalOwner, T as TIME, m as useRootStore, n as useCanvasStore, b as useSettingsStore, o as useSourceControlStore, p as useProjectsStore, q as useNpsSurveyStore, u as useToast, r as useWorkflowHelpers, P as PLACEHOLDER_EMPTY_WORKFLOW_ID, t as getResourcePermissions, W as WORKFLOW_MENU_ACTIONS, v as hasPermission, E as EnterpriseEditionFeature, w as MAX_WORKFLOW_NAME_LENGTH, _ as _sfc_main$f, S as SaveButton, x as useTelemetry, y as useMessage, z as useTitleChange, A as WORKFLOW_SHARE_MODAL_KEY, C as nodeViewEventBus, D as MODAL_CONFIRM, F as MODAL_CLOSE, G as WORKFLOW_SETTINGS_MODAL_KEY, H as SOURCE_CONTROL_PUSH_MODAL_KEY, I as VALID_WORKFLOW_IMPORT_URL_REGEX, J as DUPLICATE_MODAL_KEY, K as MAIN_HEADER_TABS, L as useNDVStore, N as useExecutionsStore, O as STICKY_NODE_TYPE } from "./index-CuuON5-N.js";
+import { f as createEventBus, _ as _export_sfc } from "./n8n-Bsq9j3nN.js";
 import { d as debounce } from "./lodash-es-kRWQHL5K.js";
-import { _ as __unplugin_components_0$1 } from "./PushConnectionTracker-CWhTRNCw.js";
-import { W as WorkflowActivator } from "./WorkflowActivator-BSG90j8i.js";
-import { o as onClickOutside, a6 as useLocalStorage } from "./@vueuse/core-C-N7SOS8.js";
-import { F as FileSaver_minExports } from "./file-saver-Kt7b8Ak0.js";
-import { u as usePushConnection } from "./usePushConnection-DmqdJ4p5.js";
+import { _ as __unplugin_components_0 } from "./PushConnectionTracker-yY5K4aH_.js";
+import { W as WorkflowActivator } from "./WorkflowActivator-QJQEAlol.js";
+import { o as onClickOutside, d as useLocalStorage } from "./@vueuse/core-nU0-5GsD.js";
+import { u as useCollaborationStore } from "./collaboration.store-C3-IWwmH.js";
+import { F as FileSaver_minExports } from "./file-saver-DIrhuITr.js";
+import { u as usePushConnection } from "./usePushConnection-DLShU-B9.js";
 import "./axios-B4zXCSve.js";
 import "./flatted-D70IerrI.js";
+import "./pinia-DvV9jJ-A.js";
 import "./bowser-C3wWO1p5.js";
-import "./@n8n/permissions-BdHAniXb.js";
+import "./@n8n/permissions-BxSXRD9U.js";
 import "./uuid-sKupIUZ4.js";
-import "./dateformat-U_ybGERk.js";
+import "./dateformat-AR6dqtgF.js";
 import "./vue-i18n-DNQ-lWfW.js";
 import "./luxon-Bt_g4NOb.js";
 import "./@n8n/codemirror-lang-CIGGB1t0.js";
@@ -27,17 +28,17 @@ import "./@jsplumb/connector-bezier-D659hq4c.js";
 import "./@jsplumb/browser-ui-BphmFVJY.js";
 import "./codemirror-lang-html-n8n-CXTCIWzP.js";
 import "./esprima-next-DUEu30kB.js";
-import "./fast-json-stable-stringify-DFVeKQSP.js";
+import "./fast-json-stable-stringify-Bv7WnfR3.js";
 import "./timeago.js-CgQus8nl.js";
 import "./qrcode.vue-Di8rc46A.js";
 import "./vue3-touch-events-DVOgU3fI.js";
 import "./chart.js-DiBOFLDH.js";
-import "./useWorkflowActivate-BpRa7BDT.js";
-import "./pushConnection.store-BQ8wQOWv.js";
-const _hoisted_1$9 = ["title", "data-test-id"];
+import "./useWorkflowActivate-BGn1xTwP.js";
+import "./pushConnection.store-BNUIa0bj.js";
+const _hoisted_1$a = ["title", "data-test-id"];
 const DEFAULT_WORKFLOW_NAME_LIMIT = 25;
 const WORKFLOW_NAME_END_COUNT_TO_KEEP = 4;
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "ShortenName",
   props: {
     name: {},
@@ -55,11 +56,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         "data-test-id": _ctx.testId
       }, [
         renderSlot(_ctx.$slots, "default", { shortenedName: shortenedName.value })
-      ], 8, _hoisted_1$9);
+      ], 8, _hoisted_1$a);
     };
   }
 });
-const _sfc_main$a = defineComponent({
+const _sfc_main$d = defineComponent({
   name: "IntersectionObserver",
   props: {
     threshold: {
@@ -113,14 +114,14 @@ const _sfc_main$a = defineComponent({
     }
   }
 });
-const _hoisted_1$8 = { ref: "root" };
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$8, [
+const _hoisted_1$9 = { ref: "root" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
     renderSlot(_ctx.$slots, "default")
   ], 512);
 }
-const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$2]]);
-const _sfc_main$9 = defineComponent({
+const IntersectionObserver$1 = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$1]]);
+const _sfc_main$c = defineComponent({
   name: "IntersectionObserved",
   props: {
     enabled: {
@@ -145,68 +146,57 @@ const _sfc_main$9 = defineComponent({
     }
   }
 });
-const _hoisted_1$7 = { ref: "observed" };
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$7, [
+const _hoisted_1$8 = { ref: "observed" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$8, [
     renderSlot(_ctx.$slots, "default")
   ], 512);
 }
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$1]]);
-const DEFAULT_MAX_TAGS_LIMIT = 20;
-const _sfc_main$8 = defineComponent({
-  name: "TagsContainer",
-  components: { IntersectionObserver: __unplugin_components_1, IntersectionObserved: __unplugin_components_0 },
+const IntersectionObserved = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render]]);
+const _withScopeId$4 = (n) => (pushScopeId("data-v-8b1055e0"), n = n(), popScopeId(), n);
+const _hoisted_1$7 = { class: "tags" };
+const _hoisted_2$2 = ["onClick"];
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "TagsContainer",
   props: {
-    tagIds: {
-      type: Array,
-      required: true
-    },
-    limit: {
-      type: Number,
-      default: DEFAULT_MAX_TAGS_LIMIT
-    },
-    clickable: Boolean,
-    responsive: Boolean,
-    hoverable: Boolean
-  },
-  emits: {
-    click: null
-  },
-  data() {
-    return {
-      maxWidth: 320,
-      intersectionEventBus: createEventBus(),
-      visibility: {},
-      debouncedSetMaxWidth: () => {
-      }
-    };
+    tagIds: {},
+    tagsById: {},
+    limit: { default: 20 },
+    clickable: { type: Boolean, default: false },
+    responsive: { type: Boolean, default: false },
+    hoverable: { type: Boolean, default: false }
   },
-  computed: {
-    ...mapStores(useTagsStore),
-    style() {
-      return {
-        "max-width": `${this.maxWidth}px`
-      };
-    },
-    tags() {
-      const tags = this.tagIds.map((tagId) => this.tagsStore.tagsById[tagId]).filter(Boolean);
-      let toDisplay = this.limit ? tags.slice(0, this.limit) : tags;
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const maxWidth = ref(320);
+    const intersectionEventBus = createEventBus();
+    const visibility = ref({});
+    const tagsContainer = ref();
+    const style = computed(() => ({
+      "max-width": `${maxWidth.value}px`
+    }));
+    const tags = computed(() => {
+      const allTags = props.tagIds.map((tagId) => props.tagsById[tagId]).filter(Boolean);
+      let toDisplay = props.limit ? allTags.slice(0, props.limit) : allTags;
       toDisplay = toDisplay.map((tag) => ({
         ...tag,
-        hidden: this.responsive && !this.visibility[tag.id]
+        hidden: props.responsive && !visibility.value[tag.id]
       }));
       let visibleCount = toDisplay.length;
-      if (this.responsive) {
-        visibleCount = Object.values(this.visibility).reduce(
+      if (props.responsive) {
+        visibleCount = Object.values(visibility.value).reduce(
           (accu, val) => val ? accu + 1 : accu,
           0
         );
       }
-      if (visibleCount < tags.length) {
-        const hidden = tags.slice(visibleCount);
-        const hiddenTitle = hidden.reduce((accu, tag) => {
-          return accu ? `${accu}, ${tag.name}` : tag.name;
-        }, "");
+      if (visibleCount < allTags.length) {
+        const hidden = allTags.slice(visibleCount);
+        const hiddenTitle = hidden.reduce(
+          (accu, tag) => accu ? `${accu}, ${tag.name}` : tag.name,
+          ""
+        );
         const countTag = {
           id: "count",
           name: `+${hidden.length}`,
@@ -216,115 +206,137 @@ const _sfc_main$8 = defineComponent({
         toDisplay.splice(visibleCount, 0, countTag);
       }
       return toDisplay;
-    }
-  },
-  created() {
-    this.debouncedSetMaxWidth = debounce(this.setMaxWidth, 100);
-  },
-  mounted() {
-    this.setMaxWidth();
-    window.addEventListener("resize", this.debouncedSetMaxWidth);
-  },
-  beforeUnmount() {
-    window.removeEventListener("resize", this.debouncedSetMaxWidth);
-  },
-  methods: {
-    setMaxWidth() {
-      const containerEl = this.$refs.tagsContainer;
-      const container2 = containerEl.$el;
-      const parent = container2.parentNode;
+    });
+    const setMaxWidth = () => {
+      var _a;
+      const container2 = (_a = tagsContainer.value) == null ? void 0 : _a.$el;
+      const parent = container2 == null ? void 0 : container2.parentNode;
       if (parent) {
-        this.maxWidth = 0;
-        void this.$nextTick(() => {
-          this.maxWidth = parent.clientWidth;
+        maxWidth.value = 0;
+        void nextTick(() => {
+          maxWidth.value = parent.clientWidth;
         });
       }
-    },
-    onObserved({ el, isIntersecting }) {
+    };
+    const debouncedSetMaxWidth = debounce(setMaxWidth, 100);
+    const onObserved = ({ el, isIntersecting }) => {
       if (el.dataset.id) {
-        this.visibility = { ...this.visibility, [el.dataset.id]: isIntersecting };
+        visibility.value = { ...visibility.value, [el.dataset.id]: isIntersecting };
       }
-    },
-    onClick(e, tag) {
-      if (this.clickable) {
+    };
+    const onClick = (e, tag) => {
+      if (props.clickable) {
         e.stopPropagation();
       }
       if (!tag.hidden) {
-        this.$emit("click", tag.id);
+        emit("click", tag.id);
       }
-    }
-  }
-});
-const _withScopeId$4 = (n) => (pushScopeId("data-v-708f5aea"), n = n(), popScopeId(), n);
-const _hoisted_1$6 = { class: "tags" };
-const _hoisted_2$1 = ["onClick"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_tag = resolveComponent("el-tag");
-  const _component_IntersectionObserved = __unplugin_components_0;
-  const _component_IntersectionObserver = __unplugin_components_1;
-  return openBlock(), createBlock(_component_IntersectionObserver, {
-    ref: "tagsContainer",
-    threshold: 1,
-    class: "tags-container",
-    style: normalizeStyle(_ctx.style),
-    enabled: _ctx.responsive,
-    "event-bus": _ctx.intersectionEventBus,
-    onObserved: _ctx.onObserved
-  }, {
-    default: withCtx(() => [
-      createBaseVNode("span", _hoisted_1$6, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tags, (tag) => {
-          return openBlock(), createElementBlock("span", {
-            key: tag.id,
-            class: normalizeClass({ clickable: !tag.hidden }),
-            onClick: (e) => _ctx.onClick(e, tag)
-          }, [
-            tag.isCount ? (openBlock(), createBlock(_component_el_tag, {
-              key: 0,
-              title: tag.title,
-              type: "info",
-              size: "small",
-              class: "count-container",
-              "disable-transitions": true
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(tag.name), 1)
-              ]),
-              _: 2
-            }, 1032, ["title"])) : (openBlock(), createBlock(_component_IntersectionObserved, {
-              key: 1,
-              class: normalizeClass({ hideTag: tag.hidden }),
-              "data-id": tag.id,
-              enabled: _ctx.responsive,
-              "event-bus": _ctx.intersectionEventBus
-            }, {
-              default: withCtx(() => [
-                createVNode(_component_el_tag, {
-                  title: tag.name,
+    };
+    onMounted(() => {
+      setMaxWidth();
+      window.addEventListener("resize", debouncedSetMaxWidth);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", debouncedSetMaxWidth);
+    });
+    return (_ctx, _cache) => {
+      const _component_el_tag = resolveComponent("el-tag");
+      return openBlock(), createBlock(IntersectionObserver$1, {
+        ref_key: "tagsContainer",
+        ref: tagsContainer,
+        threshold: 1,
+        class: "tags-container",
+        style: normalizeStyle(style.value),
+        enabled: _ctx.responsive,
+        "event-bus": unref(intersectionEventBus),
+        onObserved
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("span", _hoisted_1$7, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (tag) => {
+              return openBlock(), createElementBlock("span", {
+                key: tag.id,
+                class: normalizeClass({ clickable: !tag.hidden }),
+                onClick: (e) => onClick(e, tag)
+              }, [
+                tag.isCount ? (openBlock(), createBlock(_component_el_tag, {
+                  key: 0,
+                  title: tag.title,
                   type: "info",
                   size: "small",
-                  class: normalizeClass({ hoverable: _ctx.hoverable }),
+                  class: "count-container",
                   "disable-transitions": true
                 }, {
                   default: withCtx(() => [
                     createTextVNode(toDisplayString(tag.name), 1)
                   ]),
                   _: 2
-                }, 1032, ["title", "class"])
-              ]),
-              _: 2
-            }, 1032, ["class", "data-id", "enabled", "event-bus"]))
-          ], 10, _hoisted_2$1);
-        }), 128))
-      ])
-    ]),
-    _: 1
-  }, 8, ["style", "enabled", "event-bus", "onObserved"]);
-}
-const TagsContainer = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render], ["__scopeId", "data-v-708f5aea"]]);
+                }, 1032, ["title"])) : (openBlock(), createBlock(IntersectionObserved, {
+                  key: 1,
+                  class: normalizeClass({ hideTag: tag.hidden }),
+                  "data-id": tag.id,
+                  enabled: _ctx.responsive,
+                  "event-bus": unref(intersectionEventBus)
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_tag, {
+                      title: tag.name,
+                      type: "info",
+                      size: "small",
+                      class: normalizeClass({ hoverable: _ctx.hoverable }),
+                      "disable-transitions": true
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(tag.name), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["title", "class"])
+                  ]),
+                  _: 2
+                }, 1032, ["class", "data-id", "enabled", "event-bus"]))
+              ], 10, _hoisted_2$2);
+            }), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["style", "enabled", "event-bus"]);
+    };
+  }
+});
+const TagsContainer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-8b1055e0"]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "WorkflowTagsContainer",
+  props: {
+    tagIds: {},
+    limit: {},
+    clickable: { type: Boolean },
+    responsive: { type: Boolean },
+    hoverable: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const annotationTagsStore = useTagsStore();
+    const tagsById = computed(() => annotationTagsStore.tagsById);
+    function onClick(tagId) {
+      emit("click", tagId);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(TagsContainer, {
+        "tag-ids": _ctx.tagIds,
+        "tags-by-id": tagsById.value,
+        limit: _ctx.limit,
+        clickable: _ctx.clickable,
+        responsive: _ctx.responsive,
+        hoverable: _ctx.hoverable,
+        onClick
+      }, null, 8, ["tag-ids", "tags-by-id", "limit", "clickable", "responsive", "hoverable"]);
+    };
+  }
+});
 const _withScopeId$3 = (n) => (pushScopeId("data-v-b6416d9d"), n = n(), popScopeId(), n);
-const _hoisted_1$5 = ["data-value"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = ["data-value"];
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "ExpandableInputBase",
   props: {
     modelValue: {},
@@ -346,13 +358,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         "data-value": hiddenValue.value
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 10, _hoisted_1$5);
+      ], 10, _hoisted_1$6);
     };
   }
 });
-const ExpandableInputBase = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-b6416d9d"]]);
-const _hoisted_1$4 = ["value", "placeholder", "maxlength"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const ExpandableInputBase = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-b6416d9d"]]);
+const _hoisted_1$5 = ["value", "placeholder", "maxlength"];
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "ExpandableInputEdit",
   props: {
     modelValue: {},
@@ -419,7 +431,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               withKeys(onEnter, ["enter"]),
               withKeys(onEscape, ["esc"])
             ]
-          }, null, 40, _hoisted_1$4)
+          }, null, 40, _hoisted_1$5)
         ]),
         _: 1
       }, 8, ["model-value", "placeholder"]);
@@ -427,8 +439,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 const _withScopeId$2 = (n) => (pushScopeId("data-v-87c6f53b"), n = n(), popScopeId(), n);
-const _hoisted_1$3 = ["value"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = ["value"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "ExpandableInputPreview",
   props: {
     modelValue: {}
@@ -445,17 +457,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             value: _ctx.modelValue,
             disabled: true,
             size: "4"
-          }, null, 8, _hoisted_1$3)
+          }, null, 8, _hoisted_1$4)
         ]),
         _: 1
       }, 8, ["model-value"]);
     };
   }
 });
-const ExpandableInputPreview = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-87c6f53b"]]);
+const ExpandableInputPreview = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-87c6f53b"]]);
 const _withScopeId$1 = (n) => (pushScopeId("data-v-dd0473d7"), n = n(), popScopeId(), n);
-const _hoisted_1$2 = { key: 0 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { key: 0 };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "InlineTextEdit",
   props: {
     isEditEnabled: { type: Boolean, default: false },
@@ -522,8 +534,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         onKeydown: _cache[1] || (_cache[1] = withModifiers(() => {
         }, ["stop"]))
       }, [
-        _ctx.isEditEnabled && !isDisabled.value ? (openBlock(), createElementBlock("span", _hoisted_1$2, [
-          createVNode(_sfc_main$6, {
+        _ctx.isEditEnabled && !isDisabled.value ? (openBlock(), createElementBlock("span", _hoisted_1$3, [
+          createVNode(_sfc_main$8, {
             modelValue: newValue.value,
             "onUpdate:modelValue": [
               _cache[0] || (_cache[0] = ($event) => newValue.value = $event),
@@ -550,8 +562,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InlineTextEdit = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-dd0473d7"]]);
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const InlineTextEdit = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-dd0473d7"]]);
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "BreakpointsObserver",
   props: {
     valueXS: {},
@@ -624,7 +636,158 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _withScopeId = (n) => (pushScopeId("data-v-f3671ada"), n = n(), popScopeId(), n);
+const _hoisted_1$2 = { key: 0 };
+const _hoisted_2$1 = { key: 1 };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "WorkflowHistoryButton",
+  props: {
+    workflowId: {},
+    isNewWorkflow: { type: Boolean },
+    isFeatureEnabled: { type: Boolean }
+  },
+  emits: ["upgrade"],
+  setup(__props, { emit: __emit }) {
+    const locale = useI18n();
+    const props = __props;
+    const emit = __emit;
+    const workflowHistoryRoute = computed(() => ({
+      name: VIEWS.WORKFLOW_HISTORY,
+      params: {
+        workflowId: props.workflowId
+      }
+    }));
+    return (_ctx, _cache) => {
+      const _component_N8nIconButton = resolveComponent("N8nIconButton");
+      const _component_RouterLink = resolveComponent("RouterLink");
+      const _component_N8nLink = resolveComponent("N8nLink");
+      const _component_i18n_t = resolveComponent("i18n-t");
+      const _component_N8nTooltip = resolveComponent("N8nTooltip");
+      return openBlock(), createBlock(_component_N8nTooltip, { placement: "bottom" }, {
+        content: withCtx(() => [
+          _ctx.isFeatureEnabled && _ctx.isNewWorkflow ? (openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(unref(locale).baseText("workflowHistory.button.tooltip.empty")), 1)) : _ctx.isFeatureEnabled ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(unref(locale).baseText("workflowHistory.button.tooltip.enabled")), 1)) : (openBlock(), createBlock(_component_i18n_t, {
+            key: 2,
+            keypath: "workflowHistory.button.tooltip.disabled"
+          }, {
+            link: withCtx(() => [
+              createVNode(_component_N8nLink, {
+                size: "small",
+                onClick: _cache[0] || (_cache[0] = ($event) => emit("upgrade"))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(locale).baseText("workflowHistory.button.tooltip.disabled.link")), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }))
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_RouterLink, {
+            to: workflowHistoryRoute.value,
+            class: normalizeClass(_ctx.$style.workflowHistoryButton)
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_N8nIconButton, {
+                disabled: _ctx.isNewWorkflow || !_ctx.isFeatureEnabled,
+                "data-test-id": "workflow-history-button",
+                type: "tertiary",
+                icon: "history",
+                size: "medium",
+                text: ""
+              }, null, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["to", "class"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const workflowHistoryButton = "_workflowHistoryButton_1hnmm_1";
+const style0$2 = {
+  workflowHistoryButton
+};
+const cssModules$3 = {
+  "$style": style0$2
+};
+const WorkflowHistoryButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "CollaborationPane",
+  setup(__props) {
+    const collaborationStore = useCollaborationStore();
+    const usersStore = useUsersStore();
+    const workflowsStore = useWorkflowsStore();
+    const HEARTBEAT_INTERVAL = 5 * TIME.MINUTE;
+    const heartbeatTimer = ref(null);
+    const activeUsersSorted = computed(() => {
+      const currentWorkflowUsers = (collaborationStore.getUsersForCurrentWorkflow ?? []).map(
+        (userInfo) => userInfo.user
+      );
+      const owner = currentWorkflowUsers.find(isUserGlobalOwner);
+      return {
+        defaultGroup: owner ? [owner, ...currentWorkflowUsers.filter((user) => user.id !== owner.id)] : currentWorkflowUsers
+      };
+    });
+    const currentUserEmail = computed(() => {
+      var _a;
+      return (_a = usersStore.currentUser) == null ? void 0 : _a.email;
+    });
+    const startHeartbeat = () => {
+      if (heartbeatTimer.value !== null) {
+        clearInterval(heartbeatTimer.value);
+        heartbeatTimer.value = null;
+      }
+      heartbeatTimer.value = window.setInterval(() => {
+        collaborationStore.notifyWorkflowOpened(workflowsStore.workflow.id);
+      }, HEARTBEAT_INTERVAL);
+    };
+    const stopHeartbeat = () => {
+      if (heartbeatTimer.value !== null) {
+        clearInterval(heartbeatTimer.value);
+      }
+    };
+    const onDocumentVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        stopHeartbeat();
+      } else {
+        startHeartbeat();
+      }
+    };
+    onMounted(() => {
+      collaborationStore.initialize();
+      startHeartbeat();
+      document.addEventListener("visibilitychange", onDocumentVisibilityChange);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("visibilitychange", onDocumentVisibilityChange);
+      stopHeartbeat();
+      collaborationStore.terminate();
+    });
+    return (_ctx, _cache) => {
+      const _component_n8n_user_stack = resolveComponent("n8n-user-stack");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`collaboration-pane-container ${_ctx.$style.container}`),
+        "data-test-id": "collaboration-pane"
+      }, [
+        createVNode(_component_n8n_user_stack, {
+          users: activeUsersSorted.value,
+          "current-user-email": currentUserEmail.value
+        }, null, 8, ["users", "current-user-email"])
+      ], 2);
+    };
+  }
+});
+const container$2 = "_container_iuui0_1";
+const style0$1 = {
+  container: container$2
+};
+const cssModules$2 = {
+  "$style": style0$1
+};
+const CollaborationPane = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
+const _withScopeId = (n) => (pushScopeId("data-v-71fdd091"), n = n(), popScopeId(), n);
 const _hoisted_1$1 = {
   key: 0,
   class: "tags",
@@ -763,17 +926,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const isWorkflowHistoryFeatureEnabled = computed(() => {
       return settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.WorkflowHistory];
     });
-    const workflowHistoryRoute = computed(() => {
-      return {
-        name: VIEWS.WORKFLOW_HISTORY,
-        params: {
-          workflowId: props.workflow.id
-        }
-      };
-    });
-    const isWorkflowHistoryButtonDisabled = computed(() => {
-      return isNewWorkflow.value;
-    });
     const workflowTagIds = computed(() => {
       return (props.workflow.tags ?? []).map((tag) => typeof tag === "string" ? tag : tag.id);
     });
@@ -1083,6 +1235,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     function goToUpgrade() {
       void uiStore.goToUpgrade("workflow_sharing", "upgrade-workflow-sharing");
     }
+    function goToWorkflowHistoryUpgrade() {
+      void uiStore.goToUpgrade("workflow-history", "upgrade-workflow-history");
+    }
     function showCreateWorkflowSuccessToast(id) {
       if (!id || ["new", PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(id)) {
         let toastTitle = locale.baseText("workflows.create.personal.toast.title");
@@ -1107,20 +1262,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       const _component_i18n_t = resolveComponent("i18n-t");
       const _component_N8nTooltip = resolveComponent("N8nTooltip");
       const _component_EnterpriseEdition = resolveComponent("EnterpriseEdition");
-      const _component_N8nIconButton = resolveComponent("N8nIconButton");
-      const _component_RouterLink = resolveComponent("RouterLink");
       const _component_N8nActionDropdown = resolveComponent("N8nActionDropdown");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(unref($style).container)
       }, [
-        createVNode(_sfc_main$3, {
+        createVNode(_sfc_main$5, {
           "value-x-s": 15,
           "value-s-m": 25,
           "value-m-d": 50,
           class: "name-container"
         }, {
           default: withCtx(({ value }) => [
-            createVNode(_sfc_main$b, {
+            createVNode(_sfc_main$e, {
               name: _ctx.workflow.name,
               limit: value,
               custom: true,
@@ -1145,7 +1298,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           _: 1
         }),
         unref(settingsStore).areTagsEnabled ? (openBlock(), createElementBlock("span", _hoisted_1$1, [
-          isTagsEditEnabled.value && !_ctx.readOnly && (isNewWorkflow.value || workflowPermissions.value.update) ? (openBlock(), createBlock(TagsDropdown, {
+          isTagsEditEnabled.value && !_ctx.readOnly && (isNewWorkflow.value || workflowPermissions.value.update) ? (openBlock(), createBlock(_sfc_main$f, {
             key: 0,
             ref: "dropdown",
             modelValue: appliedTagIds.value,
@@ -1162,7 +1315,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               "data-test-id": "new-tag-link",
               onClick: onTagsEditEnable
             }, " + " + toDisplayString(_ctx.$locale.baseText("workflowDetails.addTag")), 1)
-          ])) : (openBlock(), createBlock(TagsContainer, {
+          ])) : (openBlock(), createBlock(_sfc_main$a, {
             key: _ctx.workflow.id,
             "tag-ids": workflowTagIds.value,
             clickable: true,
@@ -1171,7 +1324,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             onClick: onTagsEditEnable
           }, null, 8, ["tag-ids"]))
         ])) : (openBlock(), createElementBlock("span", _hoisted_3)),
-        createVNode(__unplugin_components_0$1, { class: "actions" }, {
+        createVNode(__unplugin_components_0, { class: "actions" }, {
           default: withCtx(() => [
             createBaseVNode("span", {
               class: normalizeClass(`activator ${unref($style).group}`)
@@ -1218,6 +1371,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 createBaseVNode("div", {
                   class: normalizeClass(unref($style).group)
                 }, [
+                  createVNode(CollaborationPane),
                   createVNode(_component_N8nButton, {
                     type: "secondary",
                     "data-test-id": "workflow-share-button",
@@ -1245,23 +1399,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 "data-test-id": "workflow-save-button",
                 onClick: onSaveButtonClick
               }, null, 8, ["saved", "disabled", "is-saving", "with-shortcut", "shortcut-tooltip"]),
-              isWorkflowHistoryFeatureEnabled.value ? (openBlock(), createBlock(_component_RouterLink, {
-                key: 0,
-                to: workflowHistoryRoute.value,
-                class: normalizeClass(unref($style).workflowHistoryButton)
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_N8nIconButton, {
-                    disabled: isWorkflowHistoryButtonDisabled.value,
-                    "data-test-id": "workflow-history-button",
-                    type: "tertiary",
-                    icon: "history",
-                    size: "medium",
-                    text: ""
-                  }, null, 8, ["disabled"])
-                ]),
-                _: 1
-              }, 8, ["to", "class"])) : createCommentVNode("", true)
+              createVNode(WorkflowHistoryButton, {
+                "workflow-id": props.workflow.id,
+                "is-feature-enabled": isWorkflowHistoryFeatureEnabled.value,
+                "is-new-workflow": isNewWorkflow.value,
+                onUpgrade: goToWorkflowHistoryUpgrade
+              }, null, 8, ["workflow-id", "is-feature-enabled", "is-new-workflow"])
             ], 2),
             createBaseVNode("div", {
               class: normalizeClass([unref($style).workflowMenuContainer, unref($style).group])
@@ -1287,24 +1430,22 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$1 = "_container_osj4g_1";
-const group = "_group_osj4g_9";
-const hiddenInput = "_hiddenInput_osj4g_14";
-const deleteItem = "_deleteItem_osj4g_18";
-const disabledShareButton = "_disabledShareButton_osj4g_22";
-const workflowHistoryButton = "_workflowHistoryButton_osj4g_26";
+const container$1 = "_container_1ascc_1";
+const group = "_group_1ascc_9";
+const hiddenInput = "_hiddenInput_1ascc_14";
+const deleteItem = "_deleteItem_1ascc_18";
+const disabledShareButton = "_disabledShareButton_1ascc_22";
 const style1 = {
   container: container$1,
   group,
   hiddenInput,
   deleteItem,
-  disabledShareButton,
-  workflowHistoryButton
+  disabledShareButton
 };
 const cssModules$1 = {
   "$style": style1
 };
-const WorkflowDetails = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$1], ["__scopeId", "data-v-f3671ada"]]);
+const WorkflowDetails = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$1], ["__scopeId", "data-v-71fdd091"]]);
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "TabBar",
   props: {