@bikdotai/bik-component-library 0.0.871 → 0.0.872

package/dist/esm/components/agent-builder/components/SelectableListSection.js

@@ -1,130 +1,148 @@
-import { jsx as n, jsxs as i, Fragment as J } from "react/jsx-runtime";
-import de from "../../../assets/icons/delete.svg.js";
-import se from "../../../assets/icons/edit.svg.js";
-import Q from "../../../assets/icons/plus.svg.js";
-import { useState as m, useRef as U, useEffect as ae } from "react";
+import { jsx as o, jsxs as d, Fragment as Q } from "react/jsx-runtime";
+import ue from "../../../assets/icons/delete.svg.js";
+import he from "../../../assets/icons/edit.svg.js";
+import U from "../../../assets/icons/plus.svg.js";
+import { useState as S, useRef as X, useEffect as fe } from "react";
 import D from "styled-components";
-import { TitleSmall as ue, BodyCaption as $, BodySecondary as A } from "../../TypographyStyle.js";
-import { COLORS as d } from "../../../constants/Theme.js";
-import { SideSection as he, SideSectionHeader as fe, AddIconButton as pe, SourceButtonRow as me, SourceButton as X, SelectableRow as Se, RowLabel as be, RowText as ve, RowActions as ye, RowMenuButton as Y, RowActionDivider as we } from "../AgentBuilder.styled.js";
-import { isIntegrationSource as $e } from "../constants/tools.js";
-import { renderSourceIcon as I, sourceIcon as ge } from "../utils/sourceIcons.js";
-import { MentionPicker as Ce } from "./MentionPicker.js";
-import { Dropdown as Z } from "../../dropdown/Dropdown.js";
-import { unwrapDropdownValue as P } from "../../dropdown/utils.js";
-import { Button as ke } from "../../button/Button.js";
-import { DeleteConfirmationModal as Ee } from "../../states-modal/DeleteConfirmationModal.js";
-import { Tooltip as g } from "../../tooltips/Tooltip.js";
-import Re from "../../../icons/Informational/Common UI/Shield.js";
-const G = "__bik_create_new__", Xe = ({
-  title: s,
+import { TitleSmall as pe, BodyCaption as w, BodySecondary as Y } from "../../TypographyStyle.js";
+import { COLORS as s } from "../../../constants/Theme.js";
+import { SideSection as me, SideSectionHeader as Se, AddIconButton as be, SourceButtonRow as ge, SourceButton as Z, SelectableRow as ve, RowLabel as ye, RowText as we, RowActions as $e, RowMenuButton as P, RowActionDivider as Ce } from "../AgentBuilder.styled.js";
+import { isIntegrationSource as ke } from "../constants/tools.js";
+import { toolSourceLabel as Ee } from "../utils/mentionSerialization.js";
+import { renderSourceIcon as I, sourceIcon as Re } from "../utils/sourceIcons.js";
+import { MentionPicker as Ae } from "./MentionPicker.js";
+import { Dropdown as G } from "../../dropdown/Dropdown.js";
+import { unwrapDropdownValue as T } from "../../dropdown/utils.js";
+import { Button as Ie } from "../../button/Button.js";
+import { DeleteConfirmationModal as De } from "../../states-modal/DeleteConfirmationModal.js";
+import { Tooltip as $ } from "../../tooltips/Tooltip.js";
+import _e from "../../../icons/Informational/Common UI/Shield.js";
+const O = "__bik_create_new__", Te = ({
+  title: u,
   helper: _,
-  items: u,
-  addableOptions: S,
-  onAdd: b,
-  onRemove: L,
-  dataTestPrefix: r,
-  emptyText: O,
-  createOption: t,
-  onConfigure: B,
-  sourceGroups: h,
+  items: h,
+  addableOptions: b,
+  onAdd: g,
+  onRemove: B,
+  dataTestPrefix: c,
+  emptyText: ne,
+  createOption: l,
+  onConfigure: L,
+  sourceGroups: f,
   mentionItems: C,
-  actionSources: v,
-  confirmDelete: p,
-  pickerOpensUp: z,
-  appLabel: ee
+  actionSources: z,
+  confirmDelete: m,
+  pickerOpensUp: x,
+  appLabel: M,
+  integrationStatus: oe,
+  onConnectIntegration: te
 }) => {
-  const [f, l] = m(!1), [x, k] = m(null), [H, M] = m(null), [ne, E] = m(null), y = !!h && h.length > 0, R = h?.find((e) => e.source === ne), c = C !== void 0, j = U(null), q = U(null), [w, W] = m(null);
-  ae(() => {
-    if (!c || !f)
+  const [p, r] = S(!1), [H, k] = S(null), [j, q] = S(null), [le, E] = S(null), v = !!f && f.length > 0, W = (() => {
+    const e = [], n = /* @__PURE__ */ new Map();
+    return (z ?? []).filter((t) => t.connected !== !1).forEach((t) => {
+      n.has(t.source) || (n.set(t.source, []), e.push(t.source)), n.get(t.source)?.push(t);
+    }), e.map((t) => {
+      const a = n.get(t) ?? [];
+      return {
+        source: t,
+        actions: a,
+        icon: a[0].icon,
+        // One capability reads as itself ("Send email"); several read as the
+        // brand that holds them ("Google Sheets").
+        label: a.length > 1 ? Ee(t, M) : a[0].label
+      };
+    });
+  })(), R = f?.find((e) => e.source === le), i = C !== void 0, F = X(null), K = X(null), [y, A] = S(null);
+  fe(() => {
+    if (!i || !p)
       return;
-    const e = (a) => {
-      const V = a.target;
-      !j.current?.contains(V) && !q.current?.contains(V) && l(!1);
-    }, o = (a) => {
-      a.key === "Escape" && l(!1);
+    const e = (t) => {
+      const a = t.target;
+      !F.current?.contains(a) && !K.current?.contains(a) && r(!1);
+    }, n = (t) => {
+      t.key === "Escape" && r(!1);
     };
-    return document.addEventListener("mousedown", e), document.addEventListener("keydown", o), () => {
-      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", o);
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", n), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", n);
     };
-  }, [c, f]);
-  const oe = y ? c || u.length > 0 : c || S.length > 0 || !!t && u.length > 0, te = u.length === 0 && !!t && !y && !c, F = !!v && v.length > 0, le = (y || F) && u.length === 0, re = () => {
-    if (c) {
-      if ((C?.length ?? 0) === 0 && t) {
-        t.onSelect();
+  }, [i, p]);
+  const re = v ? i || h.length > 0 : i || b.length > 0 || !!l && h.length > 0, ce = h.length === 0 && !!l && !v && !i, N = W.length > 0, ie = (v || N) && h.length === 0, de = () => {
+    if (i) {
+      if ((C?.length ?? 0) === 0 && l) {
+        l.onSelect();
         return;
       }
-      W(null), l((e) => !e);
+      A(null), r((e) => !e);
       return;
     }
-    if (y) {
-      E(null), l((e) => !e);
+    if (v) {
+      E(null), r((e) => !e);
       return;
     }
-    if (S.length === 0 && t) {
-      t.onSelect();
+    if (b.length === 0 && l) {
+      l.onSelect();
       return;
     }
-    l((e) => !e);
-  }, ce = (e, o) => {
-    if (H)
+    r((e) => !e);
+  }, se = (e, n) => {
+    if (j)
       return;
-    const a = o();
-    a && typeof a.then == "function" && (M(e), a.finally(() => M(null)));
-  }, ie = () => u.map((e) => {
-    const o = e.onConfigure ?? (B ? () => B(e.id) : void 0);
-    return /* @__PURE__ */ i(
-      Se,
+    const t = n();
+    t && typeof t.then == "function" && (q(e), t.finally(() => q(null)));
+  }, ae = () => h.map((e) => {
+    const n = e.onConfigure ?? (L ? () => L(e.id) : void 0);
+    return /* @__PURE__ */ d(
+      ve,
       {
-        "data-test": `${r}-row-${e.id}`,
+        "data-test": `${c}-row-${e.id}`,
         children: [
           I(e.icon),
-          /* @__PURE__ */ i(be, { children: [
-            /* @__PURE__ */ n(g, { body: e.label, placement: "top", children: /* @__PURE__ */ n(ve, { children: /* @__PURE__ */ n(A, { numberOfLines: 1, color: d.content.primary, children: e.label }) }) }),
+          /* @__PURE__ */ d(ye, { children: [
+            /* @__PURE__ */ o($, { body: e.label, placement: "top", children: /* @__PURE__ */ o(we, { children: /* @__PURE__ */ o(Y, { numberOfLines: 1, color: s.content.primary, children: e.label }) }) }),
             e.authRequired && // Order tools touch customer-private data — the shield flags that
             // this agent must verify the customer before the tool can run.
-            /* @__PURE__ */ n(g, { body: "Requires customer verification", placement: "top", children: /* @__PURE__ */ n(
+            /* @__PURE__ */ o($, { body: "Requires customer verification", placement: "top", children: /* @__PURE__ */ o(
               "span",
               {
-                "data-test": `${r}-auth-${e.id}`,
+                "data-test": `${c}-auth-${e.id}`,
                 style: { display: "inline-flex", flexShrink: 0 },
-                children: /* @__PURE__ */ n(Re, { size: 16 })
+                children: /* @__PURE__ */ o(_e, { size: 16 })
               }
             ) })
           ] }),
-          /* @__PURE__ */ i(ye, { children: [
-            o && // Configurable rows (sub-agents, Rest API / email tools) get an
+          /* @__PURE__ */ d($e, { children: [
+            n && // Configurable rows (sub-agents, Rest API / email tools) get an
             // always-visible edit icon.
-            /* @__PURE__ */ n(g, { body: "Edit", placement: "top", children: /* @__PURE__ */ n(
-              Y,
+            /* @__PURE__ */ o($, { body: "Edit", placement: "top", children: /* @__PURE__ */ o(
+              P,
               {
-                "data-test": `${r}-edit-${e.id}`,
+                "data-test": `${c}-edit-${e.id}`,
                 "aria-label": `Edit ${e.label}`,
-                disabled: H !== null,
-                onClick: () => ce(e.id, o),
-                children: /* @__PURE__ */ n(
-                  se,
+                disabled: j !== null,
+                onClick: () => se(e.id, n),
+                children: /* @__PURE__ */ o(
+                  he,
                   {
                     width: 16,
                     height: 16,
-                    color: d.content.secondary
+                    color: s.content.secondary
                   }
                 )
               }
             ) }),
-            o && /* @__PURE__ */ n(we, { "aria-hidden": !0 }),
-            /* @__PURE__ */ n(g, { body: "Delete", placement: "top", children: /* @__PURE__ */ n(
-              Y,
+            n && /* @__PURE__ */ o(Ce, { "aria-hidden": !0 }),
+            /* @__PURE__ */ o($, { body: "Delete", placement: "top", children: /* @__PURE__ */ o(
+              P,
               {
-                "data-test": `${r}-delete-${e.id}`,
+                "data-test": `${c}-delete-${e.id}`,
                 "aria-label": `Delete ${e.label}`,
-                onClick: () => p ? k(e.id) : L(e.id),
-                children: /* @__PURE__ */ n(
-                  de,
+                onClick: () => m ? k(e.id) : B(e.id),
+                children: /* @__PURE__ */ o(
+                  ue,
                   {
                     width: 16,
                     height: 16,
-                    color: d.content.secondary
+                    color: s.content.secondary
                   }
                 )
               }
@@ -134,221 +152,228 @@ const G = "__bik_create_new__", Xe = ({
       },
       e.id
     );
-  }), K = t ? [
-    ...S,
+  }), V = l ? [
+    ...b,
     {
-      label: t.label,
-      value: G,
-      searchKey: t.label,
-      customComponent: /* @__PURE__ */ n(
+      label: l.label,
+      value: O,
+      searchKey: l.label,
+      customComponent: /* @__PURE__ */ o(
         "div",
         {
           style: {
             width: "100%",
             textAlign: "center",
-            color: d.content.brand,
+            color: s.content.brand,
             fontFamily: "Inter",
             fontSize: 14,
             fontWeight: 600
           },
-          children: t.label
+          children: l.label
         }
       )
     }
-  ] : S, N = c ? /* @__PURE__ */ n(
-    Ce,
+  ] : b, J = i ? /* @__PURE__ */ o(
+    Ae,
     {
       items: C ?? [],
       query: "",
       activeIndex: 0,
-      initialSource: w ?? void 0,
+      initialSource: y ?? void 0,
       onSelect: (e) => {
-        l(!1), b(String(e.id));
+        r(!1), g(String(e.id));
       },
-      onClose: () => l(!1),
-      onCreateSubAgent: t ? () => {
-        l(!1), t.onSelect();
+      onClose: () => r(!1),
+      onCreateSubAgent: l ? () => {
+        r(!1), l.onSelect();
       } : void 0,
-      toolActions: F ? v?.map((e) => ({
+      toolActions: N ? z?.map((e) => ({
         ...e,
         onSelect: () => {
-          l(!1), e.onSelect();
+          r(!1), e.onSelect();
         }
       })) : void 0,
-      integrationStatus: Object.fromEntries(
-        (h ?? []).filter((e) => e.connected !== void 0).map((e) => [e.source, e.connected])
+      integrationStatus: oe ?? Object.fromEntries(
+        (f ?? []).filter((e) => e.connected !== void 0).map((e) => [e.source, e.connected])
       ),
       onConnectIntegration: (e) => {
-        l(!1), h?.find((o) => o.source === e)?.onConnect?.();
+        r(!1);
+        const n = f?.find((t) => t.source === e);
+        if (n?.onConnect) {
+          n.onConnect();
+          return;
+        }
+        te?.(e);
       },
-      appLabel: ee
+      appLabel: M
     },
-    w ?? "__root__"
+    y ?? "__root__"
   ) : null;
-  return /* @__PURE__ */ i(he, { children: [
-    /* @__PURE__ */ i(fe, { children: [
-      /* @__PURE__ */ n(ue, { color: d.content.primary, children: s }),
-      oe && /* @__PURE__ */ i(Ae, { ref: j, children: [
-        /* @__PURE__ */ n(
-          pe,
+  return /* @__PURE__ */ d(me, { children: [
+    /* @__PURE__ */ d(Se, { children: [
+      /* @__PURE__ */ o(pe, { color: s.content.primary, children: u }),
+      re && /* @__PURE__ */ d(Be, { ref: F, children: [
+        /* @__PURE__ */ o(
+          be,
           {
-            "data-test": `${r}-add`,
-            onClick: re,
-            "aria-label": `Add ${s}`,
-            children: /* @__PURE__ */ n(Q, { width: 16, height: 16, color: d.content.primary })
+            "data-test": `${c}-add`,
+            onClick: de,
+            "aria-label": `Add ${u}`,
+            children: /* @__PURE__ */ o(U, { width: 16, height: 16, color: s.content.primary })
           }
         ),
-        c && f && w === null && /* @__PURE__ */ n(
-          T,
+        i && p && y === null && /* @__PURE__ */ o(
+          ee,
           {
-            $up: z,
-            "data-test": `${r}-picker`,
-            children: N
+            $up: x,
+            "data-test": `${c}-picker`,
+            children: J
           }
         )
       ] })
     ] }),
-    _ && /* @__PURE__ */ n($, { color: d.content.secondary, children: _ }),
-    le ? /* @__PURE__ */ i(Ie, { ref: c ? q : void 0, children: [
-      /* @__PURE__ */ i(me, { "data-test": `${r}-sources`, children: [
-        h?.map((e) => {
-          const o = e.connected !== !1 && e.options.length === 1 && !$e(e.source) ? e.options[0] : void 0;
-          return /* @__PURE__ */ i(
-            X,
+    _ && /* @__PURE__ */ o(w, { color: s.content.secondary, children: _ }),
+    ie ? /* @__PURE__ */ d(Le, { ref: i ? K : void 0, children: [
+      /* @__PURE__ */ d(ge, { "data-test": `${c}-sources`, children: [
+        f?.map((e) => {
+          const n = e.connected !== !1 && e.options.length === 1 && !ke(e.source) ? e.options[0] : void 0;
+          return /* @__PURE__ */ d(
+            Z,
             {
               type: "button",
-              "data-test": `${r}-source-${e.source}`,
+              "data-test": `${c}-source-${e.source}`,
               onClick: () => {
                 if (e.connected === !1) {
                   e.onConnect?.();
                   return;
                 }
-                if (o) {
-                  l(!1), b(o.value);
+                if (n) {
+                  r(!1), g(n.value);
                   return;
                 }
-                if (c) {
-                  W(e.source), l(!0);
+                if (i) {
+                  A(e.source), r(!0);
                   return;
                 }
                 E(e.source);
               },
               children: [
-                I(ge(e.source), -4),
-                /* @__PURE__ */ n($, { color: d.content.primary, children: o ? o.label : e.label }),
+                I(Re(e.source), -4),
+                /* @__PURE__ */ o(w, { color: s.content.primary, children: n ? n.label : e.label }),
                 e.connected === !1 && // Not connected → show "Connect" upfront (consistent with
                 // the `@` picker); clicking runs the connect flow.
-                /* @__PURE__ */ n(A, { color: d.content.brand, children: "Connect" })
+                /* @__PURE__ */ o(Y, { color: s.content.brand, children: "Connect" })
               ]
             },
             e.source
           );
         }),
-        v?.map((e) => /* @__PURE__ */ i(
-          X,
+        W.map(({ source: e, label: n, icon: t, actions: a }) => /* @__PURE__ */ d(
+          Z,
           {
             type: "button",
-            "data-test": `${r}-action-${e.source}`,
-            onClick: e.connected === !1 ? () => e.onConnect?.() : () => {
-              l(!1), e.onSelect();
+            "data-test": `${c}-action-${e}`,
+            onClick: () => {
+              if (a.length > 1 && i) {
+                A(e), r(!0);
+                return;
+              }
+              r(!1), a[0].onSelect();
             },
             children: [
-              I(e.icon, -4),
-              /* @__PURE__ */ n($, { color: d.content.primary, children: e.label }),
-              e.connected === !1 && // Not connected → "Connect" upfront (consistent with the
-              // source buttons and the `@` picker).
-              /* @__PURE__ */ n(A, { color: d.content.brand, children: "Connect" })
+              I(t, -4),
+              /* @__PURE__ */ o(w, { color: s.content.primary, children: n })
             ]
           },
-          e.source
+          e
         ))
       ] }),
-      c && f && w !== null && /* @__PURE__ */ n(
-        T,
+      i && p && y !== null && /* @__PURE__ */ o(
+        ee,
         {
           $align: "left",
-          $up: z,
-          "data-test": `${r}-picker`,
-          children: N
+          $up: x,
+          "data-test": `${c}-picker`,
+          children: J
         }
       ),
-      !c && R && /* @__PURE__ */ n(
-        Z,
+      !i && R && /* @__PURE__ */ o(
+        G,
         {
-          "data-test": `${r}-dropdown`,
+          "data-test": `${c}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
           placeHolder: `Search ${R.label} tools`,
           options: R.options,
           onSelect: (e) => {
-            const o = P(e);
-            E(null), l(!1), o && b(o);
+            const n = T(e);
+            E(null), r(!1), n && g(n);
           }
         }
       )
-    ] }) : /* @__PURE__ */ i(J, { children: [
-      !c && f && K.length > 0 && /* @__PURE__ */ n(
-        Z,
+    ] }) : /* @__PURE__ */ d(Q, { children: [
+      !i && p && V.length > 0 && /* @__PURE__ */ o(
+        G,
         {
-          "data-test": `${r}-dropdown`,
+          "data-test": `${c}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
-          placeHolder: `Select ${s.toLowerCase()}`,
-          options: K,
+          placeHolder: `Select ${u.toLowerCase()}`,
+          options: V,
           onSelect: (e) => {
-            const o = P(e);
-            l(!1), o && (o === G ? t?.onSelect() : b(o));
+            const n = T(e);
+            r(!1), n && (n === O ? l?.onSelect() : g(n));
           }
         }
       ),
-      u.length === 0 && !f ? /* @__PURE__ */ i(J, { children: [
-        /* @__PURE__ */ n($, { color: d.content.placeholder, children: O }),
-        te && t && /* @__PURE__ */ n(
-          ke,
+      h.length === 0 && !p ? /* @__PURE__ */ d(Q, { children: [
+        /* @__PURE__ */ o(w, { color: s.content.placeholder, children: ne }),
+        ce && l && /* @__PURE__ */ o(
+          Ie,
           {
-            "data-test": `${r}-create`,
+            "data-test": `${c}-create`,
             buttonType: "secondary",
             size: "small",
             matchParentWidth: !0,
-            LeadingIcon: Q,
-            buttonText: t.label,
-            onClick: t.onSelect
+            LeadingIcon: U,
+            buttonText: l.label,
+            onClick: l.onSelect
           }
         )
-      ] }) : ie()
+      ] }) : ae()
     ] }),
-    p && x && /* @__PURE__ */ n(
-      Ee,
+    m && H && /* @__PURE__ */ o(
+      De,
       {
-        "data-test": `${r}-delete-confirm`,
-        header: `Delete this ${p.noun}?`,
-        subHeader: `Deleting this ${p.noun} will also remove it from your instructions, wherever it's referenced.`,
+        "data-test": `${c}-delete-confirm`,
+        header: `Delete this ${m.noun}?`,
+        subHeader: `Deleting this ${m.noun} will also remove it from your instructions, wherever it's referenced.`,
         confirmationText: "Delete",
-        zIndex: p.zIndex,
+        zIndex: m.zIndex,
         onDeleteConfirmed: () => {
-          L(x), k(null);
+          B(H), k(null);
         },
         onCancelClicked: () => k(null)
       }
     )
   ] });
-}, Ae = D.div`
+}, Be = D.div`
 	position: relative;
 	display: flex;
-`, Ie = D.div`
+`, Le = D.div`
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, T = D.div`
+`, ee = D.div`
 	position: absolute;
-	${(s) => s.$up ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
-	${(s) => s.$align === "left" ? "left: 0;" : "right: 0;"}
+	${(u) => u.$up ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
+	${(u) => u.$align === "left" ? "left: 0;" : "right: 0;"}
 	z-index: 30;
 `;
 export {
-  Xe as SelectableListSection
+  Te as SelectableListSection
 };
 //# sourceMappingURL=SelectableListSection.js.map