n8n-editor-ui 1.93.0 → 1.94.1

package/dist/assets/{NodeCreator-a0YVv1IE.js → NodeCreator-BWDbSeT1.js}

@@ -1,7 +1,6 @@
-import { d as defineComponent, bR as reactive, o as onMounted, aP as useExternalHooks, y as onBeforeUnmount, b3 as toRefs, h as resolveComponent, i as createElementBlock, g as openBlock, n as normalizeClass, k as createBaseVNode, f as createCommentVNode, j as createVNode, _ as _export_sfc, e0 as useNodeType, r as ref, q as computed, eS as DEFAULT_SUBCATEGORY, iH as CREDENTIAL_ONLY_NODE_PREFIX, c as useI18n, ff as HITL_SUBCATEGORY, dG as isCommunityPackageName, iI as isNodePreviewKey, co as resolveDirective, e as createBlock, aV as createSlots, w as withCtx, aA as withDirectives, aB as vShow, B as normalizeStyle, bC as _sfc_main$n, b2 as withModifiers, m as unref, cQ as COMMUNITY_NODES_INSTALLATION_DOCS_URL, cg as DRAG_EVENT_DATA_KEY, ag as useTelemetry, b7 as mergeProps, t as toDisplayString, fd as WEBHOOK_NODE_TYPE, fG as getNewNodePosition, fT as NODE_SIZE, u as useUsersStore, bE as N8nIcon, be as N8nText, l as createTextVNode, bg as N8nButton, x as renderSlot, Q as useWorkflowsStore, X as watch, b4 as normalizeProps, b5 as guardReactiveProps, bb as onUnmounted, F as Fragment, D as renderList, fi as REGULAR_NODE_CREATOR_VIEW, cP as useCommunityNodesStore, bz as useNodeTypesStore, aR as N8nTooltip, dr as i18n, i9 as captureException, b as useRouter, aS as N8nLink, V as VIEWS, fC as CUSTOM_API_CALL_KEY, fh as TRIGGER_NODE_CREATOR_VIEW, hR as OPEN_AI_NODE_TYPE, hQ as OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE, iJ as withMemo, fc as HTTP_REQUEST_NODE_TYPE, h4 as createStaticVNode, iK as REQUEST_NODE_FORM_URL, iL as filterAndSearchNodes, iM as prepareCommunityNodeDetailsViewStack, gw as getNodeIconSource, fr as transformNodeType, fp as flattenCreateElements, gr as SEND_AND_WAIT_OPERATION, eN as AI_OTHERS_NODE_CREATOR_VIEW, eP as AI_NODE_CREATOR_VIEW, a as useToast, bS as useCredentialsStore, iN as removePreviewToken, G as useDebounce, go as Transition, eM as AI_UNCATEGORIZED_CATEGORY, H as useUIStore, dE as useAssistantStore, bW as useBuilderStore, aT as _sfc_main$o, iO as SlideTransition, iP as useActionsGenerator } from "./index-DZ6VpjNj.js";
-import { u as useNodeCreatorStore, f as useViewStacks, g as camelCase, h as useKeyboardNavigation, A as AINodesView, j as AIView, R as RegularView, T as TriggerView } from "./useCanvasOperations-u8oSDa_u.js";
-import { u as useActions } from "./NodeCreation-DCfAFuL5.js";
-const _hoisted_1$8 = ["placeholder", "value"];
+import { d as defineComponent, bS as reactive, o as onMounted, aP as useExternalHooks, y as onBeforeUnmount, b4 as toRefs, h as resolveComponent, i as createElementBlock, g as openBlock, n as normalizeClass, k as createBaseVNode, f as createCommentVNode, j as createVNode, _ as _export_sfc, bT as useNodeCreatorStore, hI as useViewStacks, e8 as useNodeType, bz as useNodeTypesStore, r as ref, q as computed, hJ as DEFAULT_SUBCATEGORY, hK as CREDENTIAL_ONLY_NODE_PREFIX, c as useI18n, hL as HITL_SUBCATEGORY, dN as isCommunityPackageName, hM as isNodePreviewKey, hN as removePreviewToken, cu as resolveDirective, e as createBlock, aV as createSlots, w as withCtx, aA as withDirectives, aB as vShow, B as normalizeStyle, bD as _sfc_main$n, b3 as withModifiers, m as unref, aR as N8nTooltip, l as createTextVNode, t as toDisplayString, cW as COMMUNITY_NODES_INSTALLATION_DOCS_URL, cm as DRAG_EVENT_DATA_KEY, ag as useTelemetry, hO as camelCase, b8 as mergeProps, gL as WEBHOOK_NODE_TYPE, hP as getNewNodePosition, eX as NODE_SIZE, u as useUsersStore, bF as N8nIcon, bf as N8nText, bh as N8nButton, x as renderSlot, hQ as useKeyboardNavigation, Q as useWorkflowsStore, X as watch, b5 as normalizeProps, b6 as guardReactiveProps, bc as onUnmounted, F as Fragment, D as renderList, hR as REGULAR_NODE_CREATOR_VIEW, cV as useCommunityNodesStore, dx as i18n, h9 as captureException, b as useRouter, aS as N8nLink, V as VIEWS, fb as CUSTOM_API_CALL_KEY, gU as TRIGGER_NODE_CREATOR_VIEW, gI as OPEN_AI_NODE_TYPE, gH as OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE, hS as withMemo, hT as HTTP_REQUEST_NODE_TYPE, fV as createStaticVNode, hU as REQUEST_NODE_FORM_URL, hV as filterAndSearchNodes, hW as prepareCommunityNodeDetailsViewStack, fl as getNodeIconSource, gN as transformNodeType, hX as AINodesView, hY as AIView, hZ as RegularView, h_ as TriggerView, h$ as flattenCreateElements, fe as SEND_AND_WAIT_OPERATION, i0 as AI_OTHERS_NODE_CREATOR_VIEW, i1 as AI_NODE_CREATOR_VIEW, a as useToast, bU as useCredentialsStore, G as useDebounce, f8 as Transition, i2 as AI_UNCATEGORIZED_CATEGORY, H as useUIStore, dL as useAssistantStore, bY as useBuilderStore, aT as _sfc_main$o, i3 as SlideTransition, i4 as useActionsGenerator } from "./index-BEvy7DZc.js";
+import { u as useActions } from "./NodeCreation-ueFdk4bA.js";
+const _hoisted_1$a = ["placeholder", "value"];
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "SearchBar",
   props: {
@@ -63,7 +62,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             "data-test-id": "node-creator-search-bar",
             tabindex: "0",
             onInput
-          }, null, 42, _hoisted_1$8)
+          }, null, 42, _hoisted_1$a)
         ], 2),
         _ctx.modelValue.length > 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -98,6 +97,20 @@ const cssModules$k = {
   "$style": style0$k
 };
 const SearchBar = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__cssModules", cssModules$k]]);
+const _hoisted_1$9 = {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$9, _cache[0] || (_cache[0] = [
+    createBaseVNode("path", {
+      fill: "currentColor",
+      d: "m23 12l-2.44-2.78l.34-3.68l-3.61-.82l-1.89-3.18L12 3L8.6 1.54L6.71 4.72l-3.61.81l.34 3.68L1 12l2.44 2.78l-.34 3.69l3.61.82l1.89 3.18L12 21l3.4 1.46l1.89-3.18l3.61-.82l-.34-3.68zm-13 5l-4-4l1.41-1.41L10 14.17l6.59-6.59L18 9z"
+    }, null, -1)
+  ]));
+}
+const OfficialIcon = { name: "mdi-verified", render: render$1 };
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "NodeItem",
   props: {
@@ -115,6 +128,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const { isSubNodeType } = useNodeType({
       nodeType: props.nodeType
     });
+    const nodeTypesStore = useNodeTypesStore();
     const dragging = ref(false);
     const draggablePosition = ref({ x: -100, y: -100 });
     const draggableDataTransfer2 = ref(null);
@@ -166,6 +180,15 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const isTrigger = computed(() => {
       return props.nodeType.group.includes("trigger") && !hasActions.value;
     });
+    const communityNodeType = computed(() => {
+      return nodeTypesStore.communityNodeType(removePreviewToken(props.nodeType.name));
+    });
+    const isOfficial = computed(() => {
+      return communityNodeType.value?.isOfficialNode ?? false;
+    });
+    const author = computed(() => {
+      return communityNodeType.value?.displayName ?? displayName.value;
+    });
     function onDragStart(event) {
       if (event.dataTransfer) {
         event.dataTransfer.effectAllowed = "copy";
@@ -190,6 +213,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
+      const _component_n8n_icon = resolveComponent("n8n-icon");
       const _component_N8nNodeCreatorNode = resolveComponent("N8nNodeCreatorNode");
       const _directive_n8n_html = resolveDirective("n8n-html");
       return openBlock(), createBlock(_component_N8nNodeCreatorNode, {
@@ -199,6 +223,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         title: displayName.value,
         "show-action-arrow": showActionArrow.value,
         "is-trigger": isTrigger.value,
+        "is-official": isOfficial.value,
         "data-test-id": dataTestId.value,
         tag: _ctx.nodeType.tag,
         onDragstart: onDragStart,
@@ -234,43 +259,81 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         ]),
         _: 2
       }, [
-        isCommunityNode.value && !isCommunityNodePreview.value && !unref(activeViewStack)?.communityNodeDetails ? {
-          name: "tooltip",
+        isOfficial.value ? {
+          name: "extraDetails",
           fn: withCtx(() => [
-            withDirectives(createBaseVNode("p", {
-              class: normalizeClass(_ctx.$style.communityNodeIcon),
-              onClick: onCommunityNodeTooltipClick
-            }, null, 2), [
-              [
-                _directive_n8n_html,
-                unref(i18n2).baseText("generic.communityNode.tooltip", {
-                  interpolate: {
-                    packageName: _ctx.nodeType.name.split(".")[0],
-                    docURL: unref(COMMUNITY_NODES_INSTALLATION_DOCS_URL)
-                  }
-                })
-              ]
-            ])
+            createVNode(unref(N8nTooltip), {
+              placement: "top",
+              "show-after": 500
+            }, {
+              content: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18n2).baseText("generic.officialNode.tooltip", { interpolate: { author: author.value } })), 1)
+              ]),
+              default: withCtx(() => [
+                createVNode(unref(OfficialIcon), {
+                  class: normalizeClass([_ctx.$style.icon, _ctx.$style.official])
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            })
           ]),
           key: "0"
+        } : isCommunityNode.value && !isCommunityNodePreview.value && !unref(activeViewStack)?.communityNodeDetails ? {
+          name: "extraDetails",
+          fn: withCtx(() => [
+            createVNode(unref(N8nTooltip), {
+              placement: "top",
+              "show-after": 500
+            }, {
+              content: withCtx(() => [
+                withDirectives(createBaseVNode("p", {
+                  class: normalizeClass(_ctx.$style.communityNodeIcon),
+                  onClick: onCommunityNodeTooltipClick
+                }, null, 2), [
+                  [
+                    _directive_n8n_html,
+                    unref(i18n2).baseText("generic.communityNode.tooltip", {
+                      interpolate: {
+                        packageName: _ctx.nodeType.name.split(".")[0],
+                        docURL: unref(COMMUNITY_NODES_INSTALLATION_DOCS_URL)
+                      }
+                    })
+                  ]
+                ])
+              ]),
+              default: withCtx(() => [
+                createVNode(_component_n8n_icon, {
+                  size: "small",
+                  class: normalizeClass(_ctx.$style.icon),
+                  icon: "cube"
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            })
+          ]),
+          key: "1"
         } : void 0
-      ]), 1032, ["draggable", "class", "description", "title", "show-action-arrow", "is-trigger", "data-test-id", "tag"]);
+      ]), 1032, ["draggable", "class", "description", "title", "show-action-arrow", "is-trigger", "is-official", "data-test-id", "tag"]);
     };
   }
 });
-const nodeItem = "_nodeItem_1107w_123";
-const nodeIcon$4 = "_nodeIcon_1107w_131";
-const subNodeBackground = "_subNodeBackground_1107w_135";
-const communityNodeIcon = "_communityNodeIcon_1107w_145";
-const draggable$1 = "_draggable_1107w_149";
-const draggableDataTransfer$1 = "_draggableDataTransfer_1107w_163";
+const nodeItem = "_nodeItem_b8za2_123";
+const nodeIcon$4 = "_nodeIcon_b8za2_131";
+const subNodeBackground = "_subNodeBackground_b8za2_135";
+const communityNodeIcon = "_communityNodeIcon_b8za2_145";
+const draggable$1 = "_draggable_b8za2_149";
+const draggableDataTransfer$1 = "_draggableDataTransfer_b8za2_163";
+const icon$1 = "_icon_b8za2_168";
+const official = "_official_b8za2_173";
 const style0$j = {
   nodeItem,
   nodeIcon: nodeIcon$4,
   subNodeBackground,
   communityNodeIcon,
   draggable: draggable$1,
-  draggableDataTransfer: draggableDataTransfer$1
+  draggableDataTransfer: draggableDataTransfer$1,
+  icon: icon$1,
+  official
 };
 const cssModules$j = {
   "$style": style0$j
@@ -316,7 +379,7 @@ const cssModules$i = {
   "$style": style0$i
 };
 const SubcategoryItem = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__cssModules", cssModules$i]]);
-const _hoisted_1$7 = ["textContent"];
+const _hoisted_1$8 = ["textContent"];
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "LabelItem",
   props: {
@@ -330,7 +393,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         createBaseVNode("span", {
           class: normalizeClass(_ctx.$style.name),
           textContent: toDisplayString(_ctx.item.key)
-        }, null, 10, _hoisted_1$7)
+        }, null, 10, _hoisted_1$8)
       ], 2);
     };
   }
@@ -613,7 +676,7 @@ const cssModules$c = {
   "$style": style0$c
 };
 const CommunityNodeItem = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__cssModules", cssModules$c]]);
-const _hoisted_1$6 = ["textContent"];
+const _hoisted_1$7 = ["textContent"];
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "CategoryItem",
   props: {
@@ -645,7 +708,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           }, [
             createBaseVNode("span", {
               textContent: toDisplayString(categoryName.value)
-            }, null, 8, _hoisted_1$6),
+            }, null, 8, _hoisted_1$7),
             _ctx.isTrigger ? (openBlock(), createBlock(_component_font_awesome_icon, {
               key: 0,
               icon: "bolt",
@@ -684,7 +747,7 @@ const cssModules$b = {
   "$style": style0$b
 };
 const CategoryItem = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__cssModules", cssModules$b]]);
-const _hoisted_1$5 = ["data-category-collapsed"];
+const _hoisted_1$6 = ["data-category-collapsed"];
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "CategorizedItemsRenderer",
   props: {
@@ -806,7 +869,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 2)) : createCommentVNode("", true),
-        isPreview.value ? (openBlock(), createBlock(CommunityNodeInstallHint, {
+        isPreview.value && expanded.value ? (openBlock(), createBlock(CommunityNodeInstallHint, {
           key: 1,
           hint: unref(i18n2).baseText("communityNodeItem.actions.hint")
         }, null, 8, ["hint"])) : createCommentVNode("", true),
@@ -821,7 +884,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["elements", "is-trigger", "class"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$5);
+      ], 10, _hoisted_1$6);
     };
   }
 });
@@ -841,7 +904,7 @@ const cssModules$a = {
   "$style": style0$a
 };
 const CategorizedItemsRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__cssModules", cssModules$a]]);
-const _hoisted_1$4 = { key: 0 };
+const _hoisted_1$5 = { key: 0 };
 const _hoisted_2$3 = ["data-keyboard-nav-type", "data-keyboard-nav-id", "onClick"];
 const LAZY_LOAD_THRESHOLD = 20;
 const LAZY_LOAD_ITEMS_PER_TICK = 5;
@@ -941,7 +1004,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("div", {
             key: item.uuid
           }, [
-            renderedItems2.value.includes(item) ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+            renderedItems2.value.includes(item) ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
               item.type === "section" ? (openBlock(), createBlock(CategorizedItemsRenderer, {
                 key: 0,
                 elements: item.children,
@@ -1064,6 +1127,20 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$4 = {
+  viewBox: "0 0 512 512",
+  width: "1.2em",
+  height: "1.2em"
+};
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [
+    createBaseVNode("path", {
+      fill: "currentColor",
+      d: "m466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3c11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3M256.1 446.3l-.1-381l175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7"
+    }, null, -1)
+  ]));
+}
+const ShieldIcon = { name: "fa-solid-shield-alt", render };
 const _hoisted_1$3 = { key: 2 };
 const _hoisted_2$2 = { key: 3 };
 const _hoisted_3 = { style: { "padding-bottom": "8px" } };
@@ -1075,6 +1152,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const publisherName = ref(void 0);
     const downloads = ref(null);
     const verified = ref(false);
+    const official2 = ref(false);
     const communityNodesStore = useCommunityNodesStore();
     const nodeTypesStore = useNodeTypesStore();
     const isOwner = computed(() => useUsersStore().isInstanceOwner);
@@ -1090,8 +1168,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         activeViewStack.communityNodeDetails?.key || ""
       );
       if (communityNodeAttributes) {
-        publisherName.value = communityNodeAttributes.authorName;
+        publisherName.value = communityNodeAttributes.companyName ?? communityNodeAttributes.authorName;
         downloads.value = formatNumber(communityNodeAttributes.numberOfDownloads);
+        official2.value = communityNodeAttributes.isOfficialNode;
         const packageInfo = communityNodesStore.getInstalledPackages.find(
           (p) => p.packageName === communityNodeAttributes.packageName
         );
@@ -1160,13 +1239,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             placement: "top"
           }, {
             content: withCtx(() => [
-              createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.approved")), 1)
+              createTextVNode(toDisplayString(official2.value ? unref(i18n).baseText("communityNodeInfo.officialApproved") : unref(i18n).baseText("communityNodeInfo.approved")), 1)
             ]),
             default: withCtx(() => [
               createBaseVNode("div", null, [
-                createVNode(_component_FontAwesomeIcon, {
-                  class: normalizeClass(_ctx.$style.tooltipIcon),
-                  icon: "check-circle"
+                createVNode(unref(ShieldIcon), {
+                  class: normalizeClass(_ctx.$style.tooltipIcon)
                 }, null, 8, ["class"]),
                 createVNode(unref(N8nText), {
                   color: "text-light",
@@ -1276,13 +1354,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$4 = "_container_1ty35_123";
-const nodeIcon$2 = "_nodeIcon_1ty35_132";
-const description = "_description_1ty35_137";
-const separator = "_separator_1ty35_141";
-const info$1 = "_info_1ty35_147";
-const tooltipIcon = "_tooltipIcon_1ty35_162";
-const contactOwnerHint = "_contactOwnerHint_1ty35_167";
+const container$4 = "_container_6y5mo_123";
+const nodeIcon$2 = "_nodeIcon_6y5mo_132";
+const description = "_description_6y5mo_137";
+const separator = "_separator_6y5mo_141";
+const info$1 = "_info_6y5mo_147";
+const tooltipIcon = "_tooltipIcon_6y5mo_162";
+const contactOwnerHint = "_contactOwnerHint_6y5mo_168";
 const style0$8 = {
   container: container$4,
   nodeIcon: nodeIcon$2,
@@ -2095,6 +2173,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           nodeActions
         );
         pushViewStack(viewStack, {
+          resetStacks: true,
           transitionDirection: "none"
         });
       } else {
@@ -2136,9 +2215,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_NodeIcon = _sfc_main$n;
+      const _component_N8nTooltip = resolveComponent("N8nTooltip");
       const _component_FontAwesomeIcon = resolveComponent("FontAwesomeIcon");
       const _component_N8nButton = resolveComponent("N8nButton");
-      return openBlock(), createElementBlock("div", {
+      return unref(communityNodeDetails) ? (openBlock(), createElementBlock("div", {
+        key: 0,
         class: normalizeClass(_ctx.$style.container)
       }, [
         createBaseVNode("div", {
@@ -2147,24 +2228,44 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           createBaseVNode("div", {
             class: normalizeClass(_ctx.$style.title)
           }, [
-            unref(communityNodeDetails)?.nodeIcon ? (openBlock(), createBlock(_component_NodeIcon, {
+            unref(communityNodeDetails).nodeIcon ? (openBlock(), createBlock(_component_NodeIcon, {
               key: 0,
               class: normalizeClass(_ctx.$style.nodeIcon),
               "icon-source": unref(communityNodeDetails).nodeIcon,
               circle: false,
               "show-tooltip": false
             }, null, 8, ["class", "icon-source"])) : createCommentVNode("", true),
-            createBaseVNode("span", null, toDisplayString(unref(communityNodeDetails)?.title), 1)
+            createBaseVNode("span", null, toDisplayString(unref(communityNodeDetails).title), 1),
+            unref(communityNodeDetails).official ? (openBlock(), createBlock(_component_N8nTooltip, {
+              key: 1,
+              placement: "bottom",
+              "show-after": 500
+            }, {
+              content: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18n).baseText("generic.officialNode.tooltip", {
+                  interpolate: {
+                    author: unref(communityNodeDetails).companyName ?? unref(communityNodeDetails).title
+                  }
+                })), 1)
+              ]),
+              default: withCtx(() => [
+                createVNode(unref(OfficialIcon), {
+                  class: normalizeClass(_ctx.$style.officialIcon)
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
           ], 2),
           createBaseVNode("div", null, [
-            unref(communityNodeDetails)?.installed ? (openBlock(), createElementBlock("div", {
+            unref(communityNodeDetails).installed ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(_ctx.$style.installed)
             }, [
-              createVNode(_component_FontAwesomeIcon, {
+              !unref(communityNodeDetails).official ? (openBlock(), createBlock(_component_FontAwesomeIcon, {
+                key: 0,
                 class: normalizeClass(_ctx.$style.installedIcon),
                 icon: "cube"
-              }, null, 8, ["class"]),
+              }, null, 8, ["class"])) : createCommentVNode("", true),
               createVNode(unref(N8nText), {
                 color: "text-light",
                 size: "small",
@@ -2175,33 +2276,36 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               })
-            ], 2)) : isOwner.value ? (openBlock(), createBlock(_component_N8nButton, {
+            ], 2)) : createCommentVNode("", true),
+            isOwner.value && !unref(communityNodeDetails).installed ? (openBlock(), createBlock(_component_N8nButton, {
               key: 1,
               loading: loading.value,
               disabled: loading.value,
-              label: "Install Node",
+              label: unref(i18n).baseText("communityNodeDetails.install"),
               size: "small",
-              onClick: onInstall,
-              "data-test-id": "install-community-node-button"
-            }, null, 8, ["loading", "disabled"])) : createCommentVNode("", true)
+              "data-test-id": "install-community-node-button",
+              onClick: onInstall
+            }, null, 8, ["loading", "disabled", "label"])) : createCommentVNode("", true)
           ])
         ], 2)
-      ], 2);
+      ], 2)) : createCommentVNode("", true);
     };
   }
 });
-const container$1 = "_container_1eqm0_123";
-const header$1 = "_header_1eqm0_131";
-const title$1 = "_title_1eqm0_137";
-const nodeIcon$1 = "_nodeIcon_1eqm0_145";
-const installedIcon = "_installedIcon_1eqm0_150";
-const installed = "_installed_1eqm0_150";
+const container$1 = "_container_1ut3v_123";
+const header$1 = "_header_1ut3v_131";
+const title$1 = "_title_1ut3v_138";
+const nodeIcon$1 = "_nodeIcon_1ut3v_146";
+const installedIcon = "_installedIcon_1ut3v_151";
+const officialIcon = "_officialIcon_1ut3v_157";
+const installed = "_installed_1ut3v_151";
 const style0$3 = {
   container: container$1,
   header: header$1,
   title: title$1,
   nodeIcon: nodeIcon$1,
   installedIcon,
+  officialIcon,
   installed
 };
 const cssModules$3 = {

package/dist/assets/{NodeCreator-D18StsVZ.css → NodeCreator-Cp8Apzva.css}

@@ -297,7 +297,7 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._nodeItem_1107w_123 {
+._nodeItem_b8za2_123 {
   --trigger-icon-background-color: var(--color-background-xlight);
   --trigger-icon-border-color: var(--color-text-lighter);
   margin-left: 15px;
@@ -305,10 +305,10 @@
   -webkit-user-select: none;
           user-select: none;
 }
-._nodeIcon_1107w_131 {
+._nodeIcon_b8za2_131 {
   z-index: 2;
 }
-._subNodeBackground_1107w_135 {
+._subNodeBackground_b8za2_135 {
   background-color: var(--node-type-supplemental-background);
   border-radius: 50%;
   height: 40px;
@@ -317,10 +317,10 @@
   width: 40px;
   z-index: 1;
 }
-._communityNodeIcon_1107w_145 {
+._communityNodeIcon_b8za2_145 {
   vertical-align: top;
 }
-._draggable_1107w_149 {
+._draggable_b8za2_149 {
   width: 100px;
   height: 100px;
   position: fixed;
@@ -333,9 +333,17 @@
   justify-content: center;
   align-items: center;
 }
-._draggableDataTransfer_1107w_163 {
+._draggableDataTransfer_b8za2_163 {
   width: 1px;
   height: 1px;
+}
+._icon_b8za2_168 {
+  display: inline-flex;
+  color: var(--color-text-base);
+  width: 12px;
+}
+._icon_b8za2_168._official_b8za2_173 {
+  width: 14px;
 }/* BEM support Func
  -------------------------- */
 /* Transition
@@ -1883,7 +1891,7 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._container_1ty35_123 {
+._container_6y5mo_123 {
   width: 100%;
   padding: var(--spacing-s);
   padding-top: 0;
@@ -1891,19 +1899,19 @@
   display: flex;
   flex-direction: column;
 }
-._nodeIcon_1ty35_132 {
+._nodeIcon_6y5mo_132 {
   --node-icon-size: 36px;
   margin-right: var(--spacing-s);
 }
-._description_1ty35_137 {
+._description_6y5mo_137 {
   margin: var(--spacing-m) 0;
 }
-._separator_1ty35_141 {
+._separator_6y5mo_141 {
   height: var(--border-width-base);
   background: var(--color-foreground-base);
   margin-bottom: var(--spacing-m);
 }
-._info_1ty35_147 {
+._info_6y5mo_147 {
   display: flex;
   align-items: center;
   justify-content: left;
@@ -1911,16 +1919,17 @@
   margin-bottom: var(--spacing-m);
   flex-wrap: wrap;
 }
-._info_1ty35_147 div {
+._info_6y5mo_147 div {
   display: flex;
   align-items: center;
-  gap: var(--spacing-3xs);
+  gap: var(--spacing-4xs);
 }
-._tooltipIcon_1ty35_162 {
+._tooltipIcon_6y5mo_162 {
   color: var(--color-text-light);
   font-size: var(--font-size-2xs);
+  width: 12px;
 }
-._contactOwnerHint_1ty35_167 {
+._contactOwnerHint_6y5mo_168 {
   display: flex;
   align-items: center;
   gap: var(--spacing-s);
@@ -2624,35 +2633,43 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._container_1eqm0_123 {
+._container_1ut3v_123 {
   width: 100%;
   padding: var(--spacing-s);
   display: flex;
   flex-direction: column;
   padding-bottom: var(--spacing-xs);
 }
-._header_1eqm0_131 {
+._header_1ut3v_131 {
   display: flex;
+  gap: var(--spacing-2xs);
   align-items: center;
   justify-content: space-between;
 }
-._title_1eqm0_137 {
+._title_1ut3v_138 {
   display: flex;
   align-items: center;
   color: var(--color-text);
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
 }
-._nodeIcon_1eqm0_145 {
+._nodeIcon_1ut3v_146 {
   --node-icon-size: 36px;
   margin-right: var(--spacing-s);
 }
-._installedIcon_1eqm0_150 {
+._installedIcon_1ut3v_151 {
   margin-right: var(--spacing-3xs);
   color: var(--color-text-base);
   font-size: var(--font-size-2xs);
 }
-._installed_1eqm0_150 {
+._officialIcon_1ut3v_157 {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-left: var(--spacing-4xs);
+  color: var(--color-text-base);
+  width: 14px;
+}
+._installed_1ut3v_151 {
   display: flex;
   align-items: center;
   margin-right: var(--spacing-xs);