@bpinternal/integration-hub 0.5.0 → 0.6.1

package/README.md

@@ -447,3 +447,5 @@ pnpm --filter @bpinternal/integration-hub exec npm publish --access public
 ```
 
 `prepack` runs `clean && build` automatically before publish.
+
+**Note:** Depending on options passed to the botpress client (x-multiple-integrations = true), the integrations from Botpress Cloud are keyed by their ALIAS, not their ID. For edits that intend to use the integration ID, make sure to explicitly use the .id parameter.

package/dist/chunks/index.js

@@ -4,7 +4,7 @@ import { useState as H, useEffect as L, useCallback as D, useRef as ee, useMemo
 import { motion as ft } from "framer-motion";
 import { clsx as ht } from "clsx";
 import { twMerge as bt } from "tailwind-merge";
-import { Menu as S } from "@base-ui/react/menu";
+import { Menu as E } from "@base-ui/react/menu";
 const pt = [
   { name: "Popular", icon: Ge, description: "Most used integrations" },
   { name: "Communication & Channels", icon: _e, description: "Chat, email, SMS, and more" },
@@ -74,7 +74,7 @@ const pt = [
   focusCategoryButton: R,
   renderNoResults: K
 }) => {
-  var G, B;
+  var G, S;
   const [q, z] = H(/* @__PURE__ */ new Set());
   L(() => {
     z(/* @__PURE__ */ new Set());
@@ -142,7 +142,7 @@ const pt = [
                   /* @__PURE__ */ r("div", { className: "flex items-center h-full gap-6", children: [
                     /* @__PURE__ */ r("div", { className: "flex flex-col justify-between h-full flex-1 min-w-0", children: [
                       /* @__PURE__ */ e("h2", { className: "text-2xl font-semibold text-white leading-snug", children: (G = g[f]) == null ? void 0 : G.title }),
-                      /* @__PURE__ */ e("p", { className: "text-sm text-white/80", children: ((B = g[f]) == null ? void 0 : B.subtitle) ?? "" }),
+                      /* @__PURE__ */ e("p", { className: "text-sm text-white/80", children: ((S = g[f]) == null ? void 0 : S.subtitle) ?? "" }),
                       d && /* @__PURE__ */ e(
                         "button",
                         {
@@ -460,10 +460,10 @@ const pt = [
   renderIntegrationDetails: z,
   noResultsContent: O
 }) => {
-  const G = l ?? a, B = I(() => {
+  const G = l ?? a, S = I(() => {
     var j;
     return ((j = b[0]) == null ? void 0 : j.name) ?? "Popular";
-  }, [b]), [h, C] = H(i ?? B), k = ee(i), A = ee(!1), P = D(
+  }, [b]), [h, C] = H(i ?? S), k = ee(i), A = ee(!1), P = D(
     (j) => {
       C((me) => {
         const te = typeof j == "function" ? j(me) : j;
@@ -475,9 +475,9 @@ const pt = [
     integrationsByCategory: M,
     visibleCategories: T,
     sidebarCategories: U,
-    visibleCategoryNames: Se,
-    sidebarCategoryNames: Ee,
-    installedCategoryOrder: Be
+    visibleCategoryNames: Ee,
+    sidebarCategoryNames: Be,
+    installedCategoryOrder: Se
   } = Ct({
     hubIntegrations: g,
     sidebarIntegrations: m,
@@ -485,8 +485,8 @@ const pt = [
   }), { categoryScrollContainerRef: Ae, focusFirstCardInCategory: Te, scrollToCategorySection: X, focusCategoryButton: je } = wt({
     view: n,
     isHubLoading: f,
-    sidebarCategoryNames: Ee,
-    visibleCategoryNames: Se,
+    sidebarCategoryNames: Be,
+    visibleCategoryNames: Ee,
     setSelectedCategory: P
   }), { currentSlide: De, goToPreviousSlide: Re, goToNextSlide: Pe, goToSlide: Fe } = Nt({
     isOpen: t,
@@ -536,7 +536,7 @@ const pt = [
       isInstalledLoading: u,
       installedIntegrations: d,
       effectiveSearchTerm: G,
-      installedCategoryOrder: Be,
+      installedCategoryOrder: Se,
       renderInstalledIntegrations: q
     }
   ) : /* @__PURE__ */ e(
@@ -565,28 +565,28 @@ const pt = [
       renderNoResults: Oe
     }
   );
-}, E = "flex items-center gap-2 px-3 py-2 text-sm text-[var(--gray-11)] rounded-md cursor-pointer hover:bg-[var(--gray-a3)] outline-none", re = "bg-[var(--gray-2)] border border-[var(--gray-a4)] rounded-lg p-1 shadow-lg min-w-[160px]", ne = "flex items-center gap-1.5 mt-2 px-2 py-1 rounded-md bg-[var(--gray-a3)] text-xs text-[var(--gray-11)] whitespace-nowrap hover:bg-[var(--gray-a4)] cursor-pointer focus-visible:ring-2 focus-visible:ring-[var(--accent-9)]", kt = (t) => /* @__PURE__ */ e(S.Root, { ...t }), It = (t) => /* @__PURE__ */ e(S.Trigger, { ...t }), Ie = ({
+}, B = "flex items-center gap-2 px-3 py-2 text-sm text-[var(--gray-11)] rounded-md cursor-pointer hover:bg-[var(--gray-a3)] outline-none", re = "bg-[var(--gray-2)] border border-[var(--gray-a4)] rounded-lg p-1 shadow-lg min-w-[160px]", ne = "flex items-center gap-1.5 mt-2 px-2 py-1 rounded-md bg-[var(--gray-a3)] text-xs text-[var(--gray-11)] whitespace-nowrap hover:bg-[var(--gray-a4)] cursor-pointer focus-visible:ring-2 focus-visible:ring-[var(--accent-9)]", kt = (t) => /* @__PURE__ */ e(E.Root, { ...t }), It = (t) => /* @__PURE__ */ e(E.Trigger, { ...t }), Ie = ({
   align: t = "start",
   alignOffset: n = 0,
   side: a = "bottom",
   sideOffset: l = 4,
   className: s,
   ...i
-}) => /* @__PURE__ */ e(S.Portal, { children: /* @__PURE__ */ e(
-  S.Positioner,
+}) => /* @__PURE__ */ e(E.Portal, { children: /* @__PURE__ */ e(
+  E.Positioner,
   {
     className: "isolate z-50 outline-none",
     align: t,
     alignOffset: n,
     side: a,
     sideOffset: l,
-    children: /* @__PURE__ */ e(S.Popup, { className: x(s), ...i })
+    children: /* @__PURE__ */ e(E.Popup, { className: x(s), ...i })
   }
-) }), ie = (t) => /* @__PURE__ */ e(S.SubmenuRoot, { ...t }), se = ({
+) }), ie = (t) => /* @__PURE__ */ e(E.SubmenuRoot, { ...t }), se = ({
   className: t,
   children: n,
   ...a
-}) => /* @__PURE__ */ r(S.SubmenuTrigger, { className: x(t), ...a, children: [
+}) => /* @__PURE__ */ r(E.SubmenuTrigger, { className: x(t), ...a, children: [
   n,
   /* @__PURE__ */ e(ye, { className: "ml-auto w-4 h-4" })
 ] }), oe = ({
@@ -606,7 +606,7 @@ const pt = [
     sideOffset: l,
     ...i
   }
-), _ = (t) => /* @__PURE__ */ e(S.Item, { ...t }), Ht = ({
+), _ = (t) => /* @__PURE__ */ e(E.Item, { ...t }), Ht = ({
   visibility: t,
   verification: n,
   sortMethod: a,
@@ -655,13 +655,13 @@ const pt = [
           className: "bg-[var(--gray-2)] border border-[var(--gray-a4)] rounded-lg p-1 shadow-lg min-w-[180px]",
           children: [
             /* @__PURE__ */ r(ie, { children: [
-              /* @__PURE__ */ e(se, { className: E, children: g.visibilityGroup }),
+              /* @__PURE__ */ e(se, { className: B, children: g.visibilityGroup }),
               /* @__PURE__ */ r(oe, { className: re, children: [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, t === "private" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => f("private"),
+                    className: x(B, t === "private" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => f("private"),
                     "aria-checked": t === "private",
                     children: [
                       /* @__PURE__ */ e(W, { className: "w-4 h-4" }),
@@ -673,8 +673,8 @@ const pt = [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, t === "public" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => f("public"),
+                    className: x(B, t === "public" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => f("public"),
                     "aria-checked": t === "public",
                     children: [
                       /* @__PURE__ */ e(ue, { className: "w-4 h-4" }),
@@ -686,16 +686,16 @@ const pt = [
               ] })
             ] }),
             /* @__PURE__ */ r(ie, { children: [
-              /* @__PURE__ */ e(se, { className: E, children: g.verificationGroup }),
+              /* @__PURE__ */ e(se, { className: B, children: g.verificationGroup }),
               /* @__PURE__ */ r(oe, { className: `${re} min-w-[180px]`, children: [
                 /* @__PURE__ */ r(
                   _,
                   {
                     className: x(
-                      E,
+                      B,
                       c.includes("official") && "bg-[var(--gray-a3)] text-[var(--gray-12)]"
                     ),
-                    onSelect: () => m("official"),
+                    onClick: () => m("official"),
                     "aria-checked": c.includes("official"),
                     children: [
                       /* @__PURE__ */ e(J, { className: "w-4 h-4 text-blue-500" }),
@@ -708,10 +708,10 @@ const pt = [
                   _,
                   {
                     className: x(
-                      E,
+                      B,
                       c.includes("verified") && "bg-[var(--gray-a3)] text-[var(--gray-12)]"
                     ),
-                    onSelect: () => m("verified"),
+                    onClick: () => m("verified"),
                     "aria-checked": c.includes("verified"),
                     children: [
                       /* @__PURE__ */ e(Q, { className: "w-4 h-4 text-green-500" }),
@@ -723,13 +723,13 @@ const pt = [
               ] })
             ] }),
             /* @__PURE__ */ r(ie, { children: [
-              /* @__PURE__ */ e(se, { className: E, children: g.sortGroup }),
+              /* @__PURE__ */ e(se, { className: B, children: g.sortGroup }),
               /* @__PURE__ */ r(oe, { className: re, children: [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, a === "asc" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => o("asc"),
+                    className: x(B, a === "asc" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => o("asc"),
                     "aria-checked": a === "asc",
                     children: [
                       g.sort.asc,
@@ -740,8 +740,8 @@ const pt = [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, a === "desc" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => o("desc"),
+                    className: x(B, a === "desc" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => o("desc"),
                     "aria-checked": a === "desc",
                     children: [
                       g.sort.desc,
@@ -752,8 +752,8 @@ const pt = [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, a === "newest" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => o("newest"),
+                    className: x(B, a === "newest" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => o("newest"),
                     "aria-checked": a === "newest",
                     children: [
                       g.sort.newest,
@@ -764,8 +764,8 @@ const pt = [
                 /* @__PURE__ */ r(
                   _,
                   {
-                    className: x(E, a === "oldest" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
-                    onSelect: () => o("oldest"),
+                    className: x(B, a === "oldest" && "bg-[var(--gray-a3)] text-[var(--gray-12)]"),
+                    onClick: () => o("oldest"),
                     "aria-checked": a === "oldest",
                     children: [
                       g.sort.oldest,
@@ -874,12 +874,12 @@ const pt = [
       ] })
     }
   );
-}, St = (t) => t.title || t.name || "", qt = ({
+}, Et = (t) => t.title || t.name || "", qt = ({
   integrations: t,
   searchTerm: n,
   categoryOrder: a,
   onSelectIntegration: l,
-  getDisplayName: s = St,
+  getDisplayName: s = Et,
   actionLabel: i = "Manage"
 }) => {
   const o = I(
@@ -975,13 +975,13 @@ const pt = [
   onBackToSetup: z,
   notifications: O,
   children: G,
-  selectedDetailPanel: B,
+  selectedDetailPanel: S,
   onDismissSelectedDetailPanel: h
 }) => {
-  const [C, k] = H(!!B), A = !!B && C;
+  const [C, k] = H(!!S), A = !!S && C;
   L(() => {
-    k(!!B);
-  }, [B]);
+    k(!!S);
+  }, [S]);
   const P = D(() => {
     if (h) {
       h();
@@ -1123,18 +1123,18 @@ const pt = [
         "div",
         {
           className: "fixed top-3 right-3 bottom-3 w-[500px] z-50 bg-[var(--gray-2)] border border-[var(--gray-6)] rounded-xl shadow-lg overflow-y-auto",
-          children: B
+          children: S
         }
       )
     ] })
   ] });
-}, Et = (t) => t.startsWith("http") ? t : `https://${t}`, Bt = (t) => "Source Code", At = (t) => "Documentation", Wt = ({
+}, Bt = (t) => t.startsWith("http") ? t : `https://${t}`, St = (t) => "Source Code", At = (t) => "Documentation", Wt = ({
   version: t,
   githubUrl: n,
   guideUrl: a,
   onAboutClick: l,
   aboutLabel: s = "About Integration",
-  formatGithubLabel: i = Bt,
+  formatGithubLabel: i = St,
   formatGuideLabel: o = At
 }) => /* @__PURE__ */ r("div", { className: "flex items-start gap-12 px-6 py-4 rounded-lg border border-[var(--gray-a4)] bg-[var(--gray-a2)]", children: [
   /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
@@ -1146,7 +1146,7 @@ const pt = [
     /* @__PURE__ */ r(
       "a",
       {
-        href: Et(n),
+        href: Bt(n),
         target: "_blank",
         rel: "noopener noreferrer",
         className: "inline-flex w-fit items-center gap-1 text-sm font-medium text-[var(--blue-11)] hover:underline",
@@ -1381,9 +1381,9 @@ const pt = [
   if (t.length <= 1)
     return null;
   const s = ((i = t.find((o) => o.value === n)) == null ? void 0 : i.label) ?? String(n ?? "");
-  return /* @__PURE__ */ r(S.Root, { children: [
+  return /* @__PURE__ */ r(E.Root, { children: [
     /* @__PURE__ */ r(
-      S.Trigger,
+      E.Trigger,
       {
         disabled: l,
         className: "flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--gray-a3)] text-sm text-[var(--gray-12)] hover:bg-[var(--gray-a4)] cursor-pointer border-none outline-none w-[165px] disabled:opacity-60 disabled:cursor-not-allowed",
@@ -1393,13 +1393,13 @@ const pt = [
         ]
       }
     ),
-    /* @__PURE__ */ e(S.Portal, { children: /* @__PURE__ */ e(S.Positioner, { className: "isolate z-50 outline-none", align: "end", side: "bottom", sideOffset: 6, children: /* @__PURE__ */ e(
-      S.Popup,
+    /* @__PURE__ */ e(E.Portal, { children: /* @__PURE__ */ e(E.Positioner, { className: "isolate z-50 outline-none", align: "end", side: "bottom", sideOffset: 6, children: /* @__PURE__ */ e(
+      E.Popup,
       {
         role: "menu",
         className: "bg-[var(--gray-2)] rounded-lg p-1 shadow-lg w-(--anchor-width) overflow-hidden",
         children: t.map((o) => /* @__PURE__ */ e(
-          S.Item,
+          E.Item,
           {
             onClick: () => a(o.value),
             className: x(

package/dist/runtime/botpressTypes.d.ts

@@ -13,7 +13,7 @@ export type IntegrationPatchTransformers = Partial<Record<'install' | 'uninstall
 export interface BotpressInstalledIntegration extends BotIntegrationEntry {
     id: string;
     name: string;
-    botIntegrationId: string;
+    integrationAlias: string;
 }
 export interface BotpressIntegrationHubItem {
     id: string;

package/dist/runtime/index.js

@@ -1,9 +1,9 @@
-import { jsx as v, jsxs as z } from "react/jsx-runtime";
-import { Loader2 as yt } from "lucide-react";
+import { jsx as v, jsxs as K } from "react/jsx-runtime";
+import { Loader2 as It } from "lucide-react";
 import { useState as P, useRef as ut, useEffect as ct, useMemo as L, useCallback as J } from "react";
 import { I as Gt, c as lt, a as Zt, b as Jt, d as Xt, e as Yt, f as mt, g as tn, h as nn, i as en, j as on, k as an } from "../chunks/index.js";
 import { StaticZuiForm as sn } from "@bpinternal/static-zui-form";
-import { useQueryClient as St, useQuery as At, useMutation as j } from "@tanstack/react-query";
+import { useQueryClient as At, useQuery as St, useMutation as j } from "@tanstack/react-query";
 import "framer-motion";
 import "clsx";
 import "tailwind-merge";
@@ -69,11 +69,11 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
   onAuthorized: s,
   onError: d
 }) => {
-  const [u, C] = P(null), [b, y] = P(!1), [O, x] = P(!1), M = i ?? dn(o), h = !!(i || o), p = ut(d);
+  const [u, C] = P(null), [b, I] = P(!1), [O, x] = P(!1), M = i ?? dn(o), h = !!(i || o), p = ut(d);
   ct(() => {
     p.current = d;
   }, [d]);
-  const A = L(() => {
+  const S = L(() => {
     try {
       return JSON.stringify(a ?? {});
     } catch {
@@ -82,15 +82,15 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
   }, [a]);
   ct(() => {
     if (!h) {
-      C(null), y(!1);
+      C(null), I(!1);
       return;
     }
     let f = !1;
     return (async () => {
-      var I;
+      var y;
       let k = {};
       try {
-        k = JSON.parse(A);
+        k = JSON.parse(S);
       } catch {
         k = {};
       }
@@ -99,7 +99,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
         webhookId: M,
         ...k
       };
-      y(!0);
+      I(!0);
       try {
         const N = await un({
           client: n,
@@ -108,16 +108,16 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
         });
         f || C(N);
       } catch (N) {
-        f || (C(null), (I = p.current) == null || I.call(p, fn(N)));
+        f || (C(null), (y = p.current) == null || y.call(p, fn(N)));
       } finally {
-        f || y(!1);
+        f || I(!1);
       }
     })(), () => {
       f = !0;
     };
-  }, [n, h, e, A, o, M]);
-  const _ = h && !!u && !b && !c, K = async () => {
-    var f, S, k;
+  }, [n, h, e, S, o, M]);
+  const _ = h && !!u && !b && !c, H = async () => {
+    var f, A, k;
     if (!(!u || O)) {
       x(!0);
       try {
@@ -132,7 +132,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
           return;
         }
         if (E === "timeout") {
-          (S = p.current) == null || S.call(p, new Error("OAuth popup did not close in time. Please close it and try again."));
+          (A = p.current) == null || A.call(p, new Error("OAuth popup did not close in time. Please close it and try again."));
           return;
         }
         (k = p.current) == null || k.call(p, new Error("OAuth authorization finished but refresh failed."));
@@ -151,7 +151,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
       disabled: c,
       showInstallHint: !h,
       onClick: () => {
-        K();
+        H();
       }
     }
   );
@@ -167,7 +167,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     return [];
   const t = n.properties;
   return !t || typeof t != "object" ? [] : Object.keys(t);
-}, at = (n) => !n || typeof n != "object" || Array.isArray(n) ? {} : n, It = (n, t) => {
+}, at = (n) => !n || typeof n != "object" || Array.isArray(n) ? {} : n, yt = (n, t) => {
   if (t.length === 0)
     return {};
   const e = t.filter((i) => Object.prototype.hasOwnProperty.call(n, i)).map((i) => [i, n[i]]);
@@ -198,34 +198,34 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     () => Tt({ definition: n, selectedConnectionMethod: e }),
     [n, e]
   ), c = L(() => Ot(l), [l]), s = L(
-    () => It(at(t == null ? void 0 : t.configuration), c),
+    () => yt(at(t == null ? void 0 : t.configuration), c),
     [t == null ? void 0 : t.configuration, c]
-  ), d = L(() => c.join("\0"), [c]), [u, C] = P({}), [b, y] = P(null), [O, x] = P(0), M = ut(null);
+  ), d = L(() => c.join("\0"), [c]), [u, C] = P({}), [b, I] = P(null), [O, x] = P(0), M = ut(null);
   return ct(() => {
     const h = {
-      botIntegrationId: (t == null ? void 0 : t.botIntegrationId) ?? null,
+      integrationAlias: (t == null ? void 0 : t.integrationAlias) ?? null,
       configurationType: (t == null ? void 0 : t.configurationType) ?? null,
       schemaKeySignature: d,
       configuration: s
     }, p = M.current;
-    p && p.botIntegrationId === h.botIntegrationId && p.configurationType === h.configurationType && p.schemaKeySignature === h.schemaKeySignature && dt(p.configuration, h.configuration) || (M.current = h, C(s), y(null), x((A) => A + 1));
-  }, [s, t == null ? void 0 : t.botIntegrationId, t == null ? void 0 : t.configurationType, d]), !l || c.length === 0 ? null : /* @__PURE__ */ z("div", { className: "flex flex-col gap-3", children: [
+    p && p.integrationAlias === h.integrationAlias && p.configurationType === h.configurationType && p.schemaKeySignature === h.schemaKeySignature && dt(p.configuration, h.configuration) || (M.current = h, C(s), I(null), x((S) => S + 1));
+  }, [s, t == null ? void 0 : t.integrationAlias, t == null ? void 0 : t.configurationType, d]), !l || c.length === 0 ? null : /* @__PURE__ */ K("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ v(
       sn,
       {
         schema: l,
         value: u,
         onChange: (h) => {
-          const p = It(at(h), c);
+          const p = yt(at(h), c);
           C(p);
         },
         onValidation: ({ formValid: h }) => {
-          y(h);
+          I(h);
         }
       },
       O
     ),
-    /* @__PURE__ */ z(
+    /* @__PURE__ */ K(
       "button",
       {
         type: "button",
@@ -243,7 +243,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
         ),
         children: [
           /* @__PURE__ */ v("span", { className: o ? "invisible" : "", children: "Save Configuration" }),
-          o && /* @__PURE__ */ v(yt, { className: "absolute inset-0 m-auto h-4 w-4 animate-spin" })
+          o && /* @__PURE__ */ v(It, { className: "absolute inset-0 m-auto h-4 w-4 animate-spin" })
         ]
       }
     )
@@ -264,13 +264,13 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     ...i,
     id: typeof i.id == "string" && i.id.length > 0 ? i.id : t,
     name: typeof i.name == "string" && i.name.length > 0 ? i.name : t,
-    botIntegrationId: t
+    integrationAlias: t
   };
 }) : [], ft = ({
   installedIntegrations: n,
   integrationId: t,
   integrationName: e
-}) => n.find((i) => i.id === t) ?? n.find((i) => i.botIntegrationId === t) ?? (e ? n.find((i) => i.name === e) : void 0), Cn = ({
+}) => n.find((i) => i.id === t) ?? n.find((i) => i.integrationAlias === t) ?? (e ? n.find((i) => i.name === e) : void 0), Cn = ({
   summary: n,
   installedByName: t,
   categoryResolver: e
@@ -279,7 +279,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
   const i = t.get(n.name), o = xt((s = n.ownerWorkspace) == null ? void 0 : s.handle), a = (i == null ? void 0 : i.version) ?? null, l = n.version ?? null, c = a && l ? a !== l : !1;
   return {
     id: n.id,
-    installedId: i == null ? void 0 : i.botIntegrationId,
+    installedId: i == null ? void 0 : i.id,
     name: n.name,
     title: n.title,
     description: n.description,
@@ -311,7 +311,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
   const i = xt((a = t == null ? void 0 : t.ownerWorkspace) == null ? void 0 : a.handle), o = n.version && (t != null && t.version) ? n.version !== (t == null ? void 0 : t.version) : !1;
   return {
     id: (t == null ? void 0 : t.id) ?? n.id,
-    installedId: n.botIntegrationId,
+    installedId: n.id,
     name: (t == null ? void 0 : t.name) ?? n.name,
     title: (t == null ? void 0 : t.title) ?? n.name,
     description: (t == null ? void 0 : t.description) ?? null,
@@ -336,7 +336,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     version: (t == null ? void 0 : t.version) ?? n.version,
     updatedAt: t == null ? void 0 : t.updatedAt
   };
-}, In = (n) => {
+}, yn = (n) => {
   if (!n)
     return {
       actionCards: [],
@@ -373,7 +373,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     eventCards: e,
     channelCards: i
   };
-}, yn = (n) => {
+}, In = (n) => {
   var a, l, c, s;
   if (!n)
     return [];
@@ -389,14 +389,14 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
       label: vn(u.description) || u.title || d
     });
   return !!((c = n.sandbox) == null ? void 0 : c.identifierExtractScript) && !!((s = n.configurations) != null && s[st]) && e.push({ value: st, label: "Connect to a Playground" }), e;
-}, Sn = ({
+}, An = ({
   installedState: n,
   connectionMethods: t
 }) => {
   var i;
   const e = (n == null ? void 0 : n.configurationType) ?? null;
   return t.some((o) => o.value === e) ? e : ((i = t[0]) == null ? void 0 : i.value) ?? null;
-}, An = ({
+}, Sn = ({
   integrations: n,
   searchTerm: t,
   visibility: e,
@@ -459,13 +459,13 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     installedIntegrations: a,
     integrationId: e,
     integrationName: i.name
-  }), c = yn(i);
+  }), c = In(i);
   return {
     definition: i,
     installedState: l,
-    capabilities: In(i),
+    capabilities: yn(i),
     connectionMethods: c,
-    selectedConnectionMethod: Sn({ installedState: l, connectionMethods: c })
+    selectedConnectionMethod: An({ installedState: l, connectionMethods: c })
   };
 }, kt = ({
   client: n,
@@ -475,32 +475,32 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
   enabled: o = !0,
   transformIntegrationPatch: a
 }) => {
-  const l = St(), c = L(() => Tn(t, e), [t, e]), { data: s, isLoading: d, error: u, refetch: C } = At({
+  const l = At(), c = L(() => Tn(t, e), [t, e]), { data: s, isLoading: d, error: u, refetch: C } = St({
     queryKey: [...c, "details", i],
     enabled: o && !!i,
     queryFn: () => xn({ client: n, workspaceId: t, botId: e, integrationId: i, enabled: o })
   }), b = J(async () => {
     await l.invalidateQueries({ queryKey: c });
-  }, [l, c]), y = () => {
+  }, [l, c]), I = () => {
     if (!(s != null && s.installedState))
       throw new Error("Integration is not installed on this bot");
     return s.installedState;
   }, O = Ut({ client: n, botId: e, transformIntegrationPatch: a }), x = j({
     mutationFn: async (p) => {
-      const A = y();
+      const S = I();
       await O("configure", {
-        [A.botIntegrationId]: {
+        [S.integrationAlias]: {
           configuration: p,
-          configurationType: A.configurationType ?? null
+          configurationType: S.configurationType ?? null
         }
       });
     },
     onSuccess: b
   }), M = j({
     mutationFn: async () => {
-      const p = y(), A = p.enabled ? "disable" : "enable";
-      await O(A, {
-        [p.botIntegrationId]: {
+      const p = I(), S = p.enabled ? "disable" : "enable";
+      await O(S, {
+        [p.integrationAlias]: {
           enabled: !p.enabled
         }
       });
@@ -508,9 +508,9 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     onSuccess: b
   }), h = j({
     mutationFn: async (p) => {
-      const A = y();
+      const S = I();
       await O("configure", {
-        [A.botIntegrationId]: {
+        [S.integrationAlias]: {
           configurationType: p
         }
       });
@@ -598,7 +598,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
   installedIntegrations: t
 }) => {
   const e = ft({ installedIntegrations: t, integrationId: n });
-  return (e == null ? void 0 : e.botIntegrationId) ?? n;
+  return (e == null ? void 0 : e.integrationAlias) ?? n;
 }, Fn = async ({ client: n, botId: t, categoryResolver: e }) => {
   const [i, o, a] = await Promise.all([
     kn({ client: n }),
@@ -629,22 +629,22 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
   enabled: o = !0,
   transformIntegrationPatch: a
 }) => {
-  const l = St(), c = L(() => Bn(t, e), [t, e]), s = ut(Promise.resolve()), { data: d, isLoading: u, error: C, refetch: b } = At({
+  const l = At(), c = L(() => Bn(t, e), [t, e]), s = ut(Promise.resolve()), { data: d, isLoading: u, error: C, refetch: b } = St({
     queryKey: [...c, "catalog"],
     enabled: o,
     queryFn: () => Fn({ client: n, workspaceId: t, botId: e, categoryResolver: i })
-  }), y = J(async () => {
+  }), I = J(async () => {
     await l.invalidateQueries({ queryKey: c });
   }, [l, c]), O = J(async (f) => {
-    const S = s.current.then(f, f);
-    return s.current = S.then(
+    const A = s.current.then(f, f);
+    return s.current = A.then(
       () => {
       },
       () => {
       }
-    ), S;
+    ), A;
   }, []), x = Ut({ client: n, botId: e, transformIntegrationPatch: a }), M = async (f) => {
-    const { bot: S } = await n.getBot({ id: e }), k = X(S.integrations);
+    const { bot: A } = await n.getBot({ id: e }), k = X(A.integrations);
     return Nn({ integrationId: f, installedIntegrations: k });
   }, h = j({
     mutationFn: async (f) => {
@@ -652,49 +652,49 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
         await x("install", { [f]: { enabled: !0 } });
       });
     },
-    onSuccess: y
+    onSuccess: I
   }), p = j({
     mutationFn: async (f) => {
       await O(async () => {
-        const S = await M(f);
-        await x("uninstall", { [S]: null });
+        const A = await M(f);
+        await x("uninstall", { [A]: null });
       });
     },
-    onSuccess: y
-  }), A = j({
+    onSuccess: I
+  }), S = j({
     mutationFn: async (f) => {
       await O(async () => {
-        const S = await M(f);
-        await x("enable", { [S]: { enabled: !0 } });
+        const A = await M(f);
+        await x("enable", { [A]: { enabled: !0 } });
       });
     },
-    onSuccess: y
+    onSuccess: I
   }), _ = j({
     mutationFn: async (f) => {
       await O(async () => {
-        const S = await M(f);
-        await x("disable", { [S]: { enabled: !1 } });
+        const A = await M(f);
+        await x("disable", { [A]: { enabled: !1 } });
       });
     },
-    onSuccess: y
-  }), K = j({
+    onSuccess: I
+  }), H = j({
     mutationFn: async (f) => {
       await O(async () => {
-        const { bot: S } = await n.getBot({ id: e }), k = X(S.integrations), E = await Ln({ client: n, integrationId: f }), I = ft({
+        const { bot: A } = await n.getBot({ id: e }), k = X(A.integrations), E = await Ln({ client: n, integrationId: f }), y = ft({
           installedIntegrations: k,
           integrationId: f,
           integrationName: E
         }), N = {
-          enabled: (I == null ? void 0 : I.enabled) ?? !0,
-          configuration: (I == null ? void 0 : I.configuration) ?? {},
-          configurationType: (I == null ? void 0 : I.configurationType) ?? null
+          enabled: (y == null ? void 0 : y.enabled) ?? !0,
+          configuration: (y == null ? void 0 : y.configuration) ?? {},
+          configurationType: (y == null ? void 0 : y.configurationType) ?? null
         }, V = {
           [f]: N
         };
-        I && I.botIntegrationId !== f && (V[I.botIntegrationId] = null), await x("upgrade", V);
+        y && y.integrationAlias !== f && (V[y.integrationAlias] = null), await x("upgrade", V);
       });
     },
-    onSuccess: y
+    onSuccess: I
   });
   return {
     integrations: (d == null ? void 0 : d.integrations) ?? [],
@@ -703,28 +703,28 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     error: C ? pt(C) : null,
     install: h.mutateAsync,
     uninstall: p.mutateAsync,
-    enable: A.mutateAsync,
+    enable: S.mutateAsync,
     disable: _.mutateAsync,
-    upgrade: K.mutateAsync,
+    upgrade: H.mutateAsync,
     refresh: () => {
       b();
     },
     isInstalling: h.isPending,
     isUninstalling: p.isPending,
-    isEnabling: A.isPending,
+    isEnabling: S.isPending,
     isDisabling: _.isPending,
-    isUpgrading: K.isPending
+    isUpgrading: H.isPending
   };
-}, te = Nt, Dn = ["official", "verified"], jn = () => /* @__PURE__ */ v("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ v(yt, { className: "h-6 w-6 animate-spin text-[var(--gray-9)]" }) }), Vn = () => /* @__PURE__ */ v("div", { className: "flex items-center justify-center py-16 text-sm text-[var(--gray-11)]", children: "Integration details are unavailable for this selection." }), _n = (n) => n ? {
+}, te = Nt, Dn = ["official", "verified"], jn = () => /* @__PURE__ */ v("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ v(It, { className: "h-6 w-6 animate-spin text-[var(--gray-9)]" }) }), Vn = () => /* @__PURE__ */ v("div", { className: "flex items-center justify-center py-16 text-sm text-[var(--gray-11)]", children: "Integration details are unavailable for this selection." }), _n = (n) => n ? {
   key: n.key,
   type: n.type
-} : null, Kn = ({
+} : null, Hn = ({
   definition: n,
   selectedConnectionMethod: t
 }) => {
   var e, i, o, a, l;
   return t ? ((o = (i = (e = n.configurations) == null ? void 0 : e[t]) == null ? void 0 : i.identifier) == null ? void 0 : o.linkTemplateScript) ?? null : ((l = (a = n.configuration) == null ? void 0 : a.identifier) == null ? void 0 : l.linkTemplateScript) ?? null;
-}, Hn = ({
+}, zn = ({
   client: n,
   workspaceId: t,
   botId: e,
@@ -738,31 +738,31 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
   transformIntegrationPatch: u,
   categoryResolver: C,
   filterMenuLabels: b,
-  defaultVisibility: y,
+  defaultVisibility: I,
   defaultVerification: O,
   defaultSortMethod: x,
   renderConfigurationForm: M,
   renderConnectionsContent: h,
   oauthTemplateData: p,
-  renderDetailPanel: A,
+  renderDetailPanel: S,
   onInstall: _,
-  onUninstall: K,
+  onUninstall: H,
   onEnable: f,
-  onDisable: S,
+  onDisable: A,
   onUpgrade: k,
   onError: E
 }) => {
-  const [I, N] = P(i), [V, Ft] = P(""), [H, Q] = P(null), [gt, W] = P(null), [Y, q] = P(null), [m, Dt] = P(y), [tt, jt] = P(
+  const [y, N] = P(i), [V, Ft] = P(""), [z, Q] = P(null), [gt, W] = P(null), [Y, q] = P(null), [m, Dt] = P(I), [tt, jt] = P(
     O ?? [...Dn]
-  ), [nt, Vt] = P(x), [_t, et] = P("connections"), [Kt, it] = P("connections"), w = Nt({
+  ), [nt, Vt] = P(x), [_t, et] = P("connections"), [Ht, it] = P("connections"), w = Nt({
     client: n,
     workspaceId: t,
     botId: e,
     categoryResolver: C,
     enabled: !0,
     transformIntegrationPatch: u
-  }), Ht = L(
-    () => An({
+  }), zt = L(
+    () => Sn({
       integrations: w.integrations,
       searchTerm: V,
       visibility: m,
@@ -772,9 +772,9 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     [w.integrations, V, m, tt, nt]
   ), U = L(
     () => [...w.integrations, ...w.installedIntegrations].find(
-      (g) => g.id === H
+      (g) => g.id === z
     ) ?? null,
-    [w.integrations, w.installedIntegrations, H]
+    [w.integrations, w.installedIntegrations, z]
   ), r = kt({
     client: n,
     workspaceId: t,
@@ -782,7 +782,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     integrationId: gt,
     enabled: !!gt,
     transformIntegrationPatch: u
-  }), zt = L(
+  }), Kt = L(
     () => (o == null ? void 0 : o.filter((g) => g.name !== "Popular").map((g) => g.name)) ?? [],
     [o]
   ), R = J(
@@ -805,13 +805,13 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
       }
   }, qt = (g) => {
     var bt, vt, Ct, wt;
-    if (!H || g !== H)
+    if (!z || g !== z)
       return null;
     if (r.isLoading)
       return jn();
     if (!r.definition || !U)
       return Vn();
-    const B = !!r.installedState, F = Kn({
+    const B = !!r.installedState, F = Hn({
       definition: r.definition,
       selectedConnectionMethod: r.selectedConnectionMethod
     }), D = r.connectionMethods.length > 1 || !!F, ot = Tt({
@@ -830,7 +830,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
       selectedConnectionMethod: r.selectedConnectionMethod,
       onConnectionMethodChange: r.setConnectionMethod,
       isSettingConnectionMethod: r.isSettingConnectionMethod
-    }) : /* @__PURE__ */ z("div", { className: "flex flex-col gap-4", children: [
+    }) : /* @__PURE__ */ K("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ v("div", { className: "self-end", children: /* @__PURE__ */ v(
         mt,
         {
@@ -857,7 +857,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
           },
           onError: R
         }
-      ) : /* @__PURE__ */ z("p", { className: "text-sm text-[var(--gray-11)]", children: [
+      ) : /* @__PURE__ */ K("p", { className: "text-sm text-[var(--gray-11)]", children: [
         "No custom connection UI was provided. Use ",
         /* @__PURE__ */ v("code", { children: "renderConnectionsContent" }),
         " to plug your OAuth/manual connection flow."
@@ -917,7 +917,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
               }
               await w.enable(T.id);
             },
-            onSuccess: G ? S : f,
+            onSuccess: G ? A : f,
             integration: U
           });
         },
@@ -929,7 +929,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
                 throw new Error("Integration is not installed");
               await w.uninstall(T.id);
             },
-            onSuccess: K,
+            onSuccess: H,
             integration: U
           });
         },
@@ -949,7 +949,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
         hasUpdate: U.hasUpdate,
         isUpgrading: w.isUpgrading,
         toggleButtonLabel: (wt = r.installedState) != null && wt.enabled ? "Disable" : "Enable",
-        selectedDetailPanel: Y && A ? A({
+        selectedDetailPanel: Y && S ? S({
           definition: r.definition,
           selectedCard: Y,
           onClose: () => q(null)
@@ -964,7 +964,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
             hasConfigurationStep: Wt,
             configuredTab: _t,
             onConfiguredTabChange: et,
-            setupTab: Kt,
+            setupTab: Ht,
             onSetupTabChange: it,
             onCancelSetup: () => {
               Q(null), W(null), q(null);
@@ -1003,8 +1003,8 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
       }
     );
   };
-  return /* @__PURE__ */ z("div", { className: "flex h-full min-h-0 flex-col", children: [
-    !H && /* @__PURE__ */ v("div", { className: "flex justify-end px-6 pt-4", children: /* @__PURE__ */ z("div", { className: "flex rounded-lg bg-[var(--gray-a3)] p-1", children: [
+  return /* @__PURE__ */ K("div", { className: "flex h-full min-h-0 flex-col", children: [
+    !z && /* @__PURE__ */ v("div", { className: "flex justify-end px-6 pt-4", children: /* @__PURE__ */ K("div", { className: "flex rounded-lg bg-[var(--gray-a3)] p-1", children: [
       /* @__PURE__ */ v(
         "button",
         {
@@ -1012,7 +1012,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
           onClick: () => N("hub"),
           className: lt(
             "cursor-pointer rounded-md px-3 py-1.5 text-sm text-[var(--gray-11)] transition-colors",
-            I === "hub" && "bg-[var(--gray-1)] text-[var(--gray-12)] shadow-sm"
+            y === "hub" && "bg-[var(--gray-1)] text-[var(--gray-12)] shadow-sm"
           ),
           children: "Integration Hub"
         }
@@ -1024,7 +1024,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
           onClick: () => N("installed"),
           className: lt(
             "cursor-pointer rounded-md px-3 py-1.5 text-sm text-[var(--gray-11)] transition-colors",
-            I === "installed" && "bg-[var(--gray-1)] text-[var(--gray-12)] shadow-sm"
+            y === "installed" && "bg-[var(--gray-1)] text-[var(--gray-12)] shadow-sm"
           ),
           children: "Installed Integrations"
         }
@@ -1033,12 +1033,12 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
     /* @__PURE__ */ v(
       Zt,
       {
-        view: I,
+        view: y,
         searchInput: V,
         searchTerm: V,
         onSearchInputChange: Ft,
-        selectedIntegrationId: H,
-        hubIntegrations: Ht,
+        selectedIntegrationId: z,
+        hubIntegrations: zt,
         sidebarIntegrations: w.integrations,
         installedIntegrations: w.installedIntegrations,
         isHubLoading: w.isLoading,
@@ -1082,7 +1082,7 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
           {
             integrations: g,
             searchTerm: B,
-            categoryOrder: F.length > 0 ? F : zt,
+            categoryOrder: F.length > 0 ? F : Kt,
             onSelectIntegration: (D) => {
               Q(D.id), W(D.installedId ?? D.id), et("connections"), it("connections");
             }
@@ -1092,24 +1092,24 @@ const rn = "width=650,height=800,popup=true", cn = 500, ln = 5 * 60 * 1e3, dn =
       }
     )
   ] });
-}, ne = Hn;
+}, ne = zn;
 export {
   ne as BotpressIntegrationHub,
-  Hn as BotpressIntegrationHubScreen,
+  zn as BotpressIntegrationHubScreen,
   gn as IntegrationOAuthButton,
   hn as IntegrationStaticZuiConfigurationForm,
   Yn as dedupeById,
   un as fetchOAuthAuthorizationUrl,
-  An as filterAndSortIntegrations,
+  Sn as filterAndSortIntegrations,
   ft as findInstalledIntegration,
   X as getInstalledIntegrations,
-  Sn as getSelectedConnectionMethod,
+  An as getSelectedConnectionMethod,
   dn as getWebhookIdFromUrl,
   xt as isOfficialWorkspace,
   pn as openOAuthPopup,
   Bt as resolveCategory,
-  In as toCapabilityCards,
-  yn as toConnectionMethods,
+  yn as toCapabilityCards,
+  In as toConnectionMethods,
   pt as toError,
   Cn as toHubItem,
   wn as toInstalledItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpinternal/integration-hub",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Reusable Integration Hub for Botpress-style integration catalogs",
   "license": "AGPL-3.0",
   "type": "module",