@bikdotai/bik-component-library 0.0.850-tools-beta.0 → 0.0.850

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

@@ -1,300 +1,319 @@
-import { jsxs as b, jsx as s, Fragment as K } from "react/jsx-runtime";
-import H from "../../../assets/icons/chevronRight.svg.js";
-import ee from "../../../assets/icons/searchIcon.svg.js";
-import te from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
-import { useState as E, useMemo as v, useEffect as D, useRef as ne } from "react";
-import p from "styled-components";
-import { TitleSmall as re, BodySecondary as oe, BodyCaption as ie } from "../../TypographyStyle.js";
-import { COLORS as i } from "../../../constants/Theme.js";
-import { CATEGORIES as ae, toolSourceRank as Q, isIntegrationSource as le, CONFIG_TOOL_SOURCES as ce } from "../constants/tools.js";
-import { toolSourceLabel as M } from "../utils/mentionSerialization.js";
-import { sourceIcon as q, renderSourceIcon as V } from "../utils/sourceIcons.js";
-import W from "../../../icons/Informational/Common UI/Shield.js";
-const h = (l) => l.meta, I = (l) => h(l)?.plainLabel ?? l.label, se = "__bik_create_subagent__", Oe = ({
-  items: l,
-  onSelect: S,
-  registerKeyHandler: R,
-  onClose: k,
-  onCreateSubAgent: y,
-  initialSource: N,
-  toolActions: x,
-  integrationStatus: U,
-  onConnectIntegration: j
+import { jsxs as k, jsx as s, Fragment as oe } from "react/jsx-runtime";
+import ie from "../../../assets/icons/chevronRight.svg.js";
+import le from "../../../assets/icons/searchIcon.svg.js";
+import ae from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
+import { useState as A, useMemo as y, useEffect as U, useRef as ce } from "react";
+import h from "styled-components";
+import { TitleSmall as se, BodySecondary as de, BodyCaption as ue } from "../../TypographyStyle.js";
+import { COLORS as o } from "../../../constants/Theme.js";
+import { CATEGORIES as pe, isIntegrationSource as j, toolSourceRank as F, CONFIG_TOOL_SOURCES as he, INTEGRATIONS_RANK as fe } from "../constants/tools.js";
+import { toolSourceLabel as J } from "../utils/mentionSerialization.js";
+import { renderSourceIcon as H, sourceIcon as P } from "../utils/sourceIcons.js";
+import ee from "../../../icons/Informational/Common UI/Shield.js";
+const b = (a) => a.meta, C = (a) => b(a)?.plainLabel ?? a.label, ge = "__bik_create_subagent__", Ne = ({
+  items: a,
+  onSelect: $,
+  registerKeyHandler: L,
+  onClose: w,
+  onCreateSubAgent: I,
+  initialSource: Q,
+  toolActions: v,
+  integrationStatus: V,
+  onConnectIntegration: W
 }) => {
-  const [X, _] = E(null), [c, O] = E(N ?? null), [C, g] = E(-1), [w, F] = E(""), m = v(
-    () => l.filter((e) => h(e)?.kind === "tool"),
-    [l]
-  ), L = v(
-    () => l.filter((e) => h(e)?.kind === "subagent"),
-    [l]
-  ), P = v(() => {
+  const [te, z] = A(null), [c, B] = A(Q ?? null), [R, D] = A(null), [_, m] = A(-1), [S, X] = A(""), x = y(
+    () => a.filter((e) => b(e)?.kind === "tool"),
+    [a]
+  ), T = y(
+    () => a.filter((e) => b(e)?.kind === "subagent"),
+    [a]
+  ), N = y(() => {
     const e = [];
-    return m.forEach((o) => {
-      const f = h(o)?.source ?? "other";
+    return x.forEach((r) => {
+      const f = b(r)?.source ?? "other";
       e.includes(f) || e.push(f);
     }), e;
-  }, [m]), T = v(
+  }, [x]), M = y(
     () => new Map(
-      (x ?? []).map((e) => [e.source, e])
+      (v ?? []).map((e) => [e.source, e])
     ),
-    [x]
-  ), $ = v(
-    () => ae.filter(
-      (e) => e.key === "tool" ? m.length > 0 || (x?.length ?? 0) > 0 : L.length > 0 || !!y
+    [v]
+  ), E = y(
+    () => pe.filter(
+      (e) => e.key === "tool" ? x.length > 0 || (v?.length ?? 0) > 0 : T.length > 0 || !!I
     ),
-    [m.length, L.length, y, x?.length]
-  ), z = $.length === 1 ? $[0].key : null, d = X ?? z, u = d ? d === "subagent" ? (
+    [x.length, T.length, I, v?.length]
+  ), G = E.length === 1 ? E[0].key : null, d = te ?? G, u = d ? d === "subagent" ? (
     // Always titled — with a back arrow only when the category chooser is above.
     {
       title: "Sub-agent",
-      onBack: z ? void 0 : () => _(null)
+      onBack: G ? void 0 : () => z(null)
     }
   ) : c ? {
-    title: M(c),
+    title: J(c),
     // Deep-linked to a source (opened from a right-panel source button):
-    // that source IS the root, so no back arrow. In the @-drill flow
-    // (no initialSource) back returns to the source chooser.
-    onBack: N ? void 0 : () => O(null),
-    icon: q(c)
-  } : (
+    // that source IS the root, so no back arrow. Otherwise back clears the
+    // source — returning to the Integrations group if we came via it (its
+    // `group` state is untouched), else to the source chooser.
+    onBack: Q ? void 0 : () => B(null),
+    icon: P(c)
+  } : R === "integrations" ? { title: "Integrations", onBack: () => D(null) } : (
     // Always titled — matches the Sub-agent header; back arrow only when the
     // category chooser is above (i.e. not the sole category).
     {
       title: "Tools",
-      onBack: z ? void 0 : () => _(null)
+      onBack: G ? void 0 : () => z(null)
     }
-  ) : null, a = v(() => {
+  ) : null, l = y(() => {
     if (!d)
-      return $.map((n) => ({
+      return E.map((n) => ({
         id: n.key,
         label: n.label,
         drillsIn: !0,
         onActivate: () => {
-          _(n.key), O(null);
+          z(n.key), B(null), D(null);
         }
       }));
     if (d === "subagent") {
-      const n = w.trim().toLowerCase(), t = L.filter((r) => !n || I(r).toLowerCase().includes(n)).map((r) => ({
-        id: String(r.id),
-        label: I(r),
+      const n = S.trim().toLowerCase(), p = T.filter((g) => !n || C(g).toLowerCase().includes(n)).map((g) => ({
+        id: String(g.id),
+        label: C(g),
         drillsIn: !1,
-        onActivate: () => S(r)
+        onActivate: () => $(g)
       }));
-      return y && t.push({
-        id: se,
+      return I && p.push({
+        id: ge,
         label: "Create new",
         drillsIn: !1,
         isCreate: !0,
         onActivate: () => {
-          k?.(), y();
+          w?.(), I();
         }
-      }), t;
+      }), p;
     }
     if (!c) {
-      const n = (x ?? []).map((t) => t.source).filter((t) => !P.includes(t));
-      return [...P, ...n].sort((t, r) => Q(t) - Q(r)).map((t) => {
-        const r = T.get(t);
-        if ((r !== void 0 ? r.connected : U?.[t]) === !1)
+      const n = (v ?? []).map((t) => t.source).filter((t) => !N.includes(t)), p = [...N, ...n], g = (t) => {
+        const i = M.get(t);
+        if ((i !== void 0 ? i.connected : V?.[t]) === !1)
           return {
             id: t,
-            label: M(t),
+            label: J(t),
             drillsIn: !1,
-            icon: q(t) ?? r?.icon,
+            icon: P(t) ?? i?.icon,
             rightLabel: "Connect",
             onActivate: () => {
-              k?.(), r?.onConnect ? r.onConnect() : j?.(t);
+              w?.(), i?.onConnect ? i.onConnect() : W?.(t);
             }
           };
-        const J = m.filter(
-          (A) => (h(A)?.source ?? "other") === t
+        const K = x.filter(
+          (q) => (b(q)?.source ?? "other") === t
         );
-        if (J.length + (r ? 1 : 0) === 1 && !(r === void 0 && le(t))) {
-          const A = q(t) ?? r?.icon;
-          if (r)
+        if (K.length + (i ? 1 : 0) === 1) {
+          const q = P(t) ?? i?.icon;
+          if (i)
             return {
               id: t,
-              label: r.label,
+              label: i.label,
               drillsIn: !1,
-              icon: A,
+              icon: q,
               onActivate: () => {
-                k?.(), r.onSelect();
+                w?.(), i.onSelect();
               }
             };
-          const B = J[0];
+          const O = K[0];
           return {
-            id: String(B.id),
-            label: I(B),
+            id: String(O.id),
+            label: C(O),
             drillsIn: !1,
-            icon: A,
-            authRequired: h(B)?.authRequired,
-            onActivate: () => S(B)
+            icon: q,
+            authRequired: b(O)?.authRequired,
+            onActivate: () => $(O)
           };
         }
         return {
           id: t,
-          label: M(t),
+          label: J(t),
           drillsIn: !0,
-          icon: q(t) ?? r?.icon,
-          onActivate: () => O(t)
+          icon: P(t) ?? i?.icon,
+          onActivate: () => B(t)
         };
-      });
+      };
+      if (R === "integrations")
+        return p.filter(j).sort((t, i) => F(t) - F(i)).map(g);
+      const Z = p.filter((t) => !j(t)).map((t) => ({ rank: F(t), row: g(t) }));
+      return p.some(j) && Z.push({
+        rank: fe,
+        row: {
+          id: "__integrations__",
+          label: "Integrations",
+          drillsIn: !0,
+          onActivate: () => {
+            D("integrations"), B(null);
+          }
+        }
+      }), Z.sort((t, i) => t.rank - i.rank).map((t) => t.row);
     }
-    const e = w.trim().toLowerCase(), o = m.filter((n) => (h(n)?.source ?? "other") === c).filter((n) => !e || I(n).toLowerCase().includes(e)).map((n) => ({
+    const e = S.trim().toLowerCase(), r = x.filter((n) => (b(n)?.source ?? "other") === c).filter((n) => !e || C(n).toLowerCase().includes(e)).map((n) => ({
       id: String(n.id),
-      label: I(n),
+      label: C(n),
       drillsIn: !1,
-      authRequired: h(n)?.authRequired,
-      onActivate: () => S(n)
-    })), f = T.get(c);
+      authRequired: b(n)?.authRequired,
+      onActivate: () => $(n)
+    })), f = M.get(c);
     if (f) {
-      const n = c in ce;
-      o.push({
+      const n = c in he;
+      r.push({
         id: `create:${c}`,
         label: f.label,
         drillsIn: !1,
         isCreate: !n,
         onActivate: () => {
-          k?.(), f.onSelect();
+          w?.(), f.onSelect();
         }
       });
     }
-    return o;
+    return r;
   }, [
     d,
-    $,
+    E,
     c,
-    w,
-    m,
-    L,
-    P,
+    R,
     S,
-    k,
-    y,
     x,
     T,
-    U,
-    j
+    N,
+    $,
+    w,
+    I,
+    v,
+    M,
+    V,
+    W
   ]);
-  D(() => g(-1), [d, c, w, l]), D(() => F(""), [d, c]);
-  const G = ne({ rows: a, activeIndex: C, header: u });
-  G.current = { rows: a, activeIndex: C, header: u }, D(() => {
-    if (R)
-      return R((e) => {
-        const { rows: o, activeIndex: f, header: n } = G.current;
+  U(
+    () => m(-1),
+    [d, c, R, S, a]
+  ), U(() => X(""), [d, c, R]);
+  const Y = ce({ rows: l, activeIndex: _, header: u });
+  Y.current = { rows: l, activeIndex: _, header: u }, U(() => {
+    if (L)
+      return L((e) => {
+        const { rows: r, activeIndex: f, header: n } = Y.current;
         switch (e.key) {
           case "ArrowDown":
-            return o.length && g((t) => (t + 1) % o.length), !0;
+            return r.length && m((p) => (p + 1) % r.length), !0;
           case "ArrowUp":
-            return o.length && g((t) => (t + o.length - 1) % o.length), !0;
+            return r.length && m((p) => (p + r.length - 1) % r.length), !0;
           case "ArrowRight":
           case "Enter":
-            return (o[f] ?? o[0])?.onActivate(), !0;
+            return (r[f] ?? r[0])?.onActivate(), !0;
           case "ArrowLeft":
             return n?.onBack ? (n.onBack(), !0) : !1;
           default:
             return !1;
         }
-      }), () => R(null);
-  }, [R]);
-  const Y = d ? a.length && !a[0].drillsIn ? "items" : "sources" : "categories", Z = d === "tool" && !!c || d === "subagent";
-  return /* @__PURE__ */ b(de, { className: `bik-mention-picker bik-mention-picker--${Y}`, children: [
-    u && /* @__PURE__ */ b(
-      xe,
+      }), () => L(null);
+  }, [L]);
+  const ne = d ? l.length && !l[0].drillsIn ? "items" : "sources" : "categories", re = d === "tool" && !!c || d === "subagent";
+  return /* @__PURE__ */ k(be, { className: `bik-mention-picker bik-mention-picker--${ne}`, children: [
+    u && /* @__PURE__ */ k(
+      Re,
       {
         type: "button",
         onClick: u.onBack,
         disabled: !u.onBack,
         style: {
-          background: i.surface.subdued,
+          background: o.surface.subdued,
           cursor: u.onBack ? "pointer" : "default"
         },
         children: [
           u.onBack && /* @__PURE__ */ s(
-            te,
+            ae,
             {
               width: 20,
               height: 20,
-              color: i.content.primary
+              color: o.content.primary
             }
           ),
-          u.icon && V(u.icon),
-          /* @__PURE__ */ b(re, { children: [
+          u.icon && H(u.icon),
+          /* @__PURE__ */ k(se, { children: [
             " ",
             u.title
           ] })
         ]
       }
     ),
-    Z && /* @__PURE__ */ b(ue, { children: [
+    re && /* @__PURE__ */ k(me, { children: [
       /* @__PURE__ */ s(
-        ee,
+        le,
         {
           width: 20,
           height: 20,
-          color: i.content.placeholder
+          color: o.content.placeholder
         }
       ),
       /* @__PURE__ */ s(
-        pe,
+        xe,
         {
           autoFocus: !0,
-          value: w,
+          value: S,
           placeholder: "Search",
           "data-test": "mention-picker-search",
-          onChange: (e) => F(e.target.value),
+          onChange: (e) => X(e.target.value),
           onKeyDown: (e) => {
-            a.length && (e.key === "ArrowDown" ? (e.preventDefault(), g((o) => (o + 1) % a.length)) : e.key === "ArrowUp" ? (e.preventDefault(), g((o) => (o + a.length - 1) % a.length)) : e.key === "Enter" && (e.preventDefault(), (a[C] ?? a[0])?.onActivate()));
+            l.length && (e.key === "ArrowDown" ? (e.preventDefault(), m((r) => (r + 1) % l.length)) : e.key === "ArrowUp" ? (e.preventDefault(), m((r) => (r + l.length - 1) % l.length)) : e.key === "Enter" && (e.preventDefault(), (l[_] ?? l[0])?.onActivate()));
           }
         }
       )
     ] }),
-    a.length === 0 ? /* @__PURE__ */ s(ve, { children: d === "subagent" ? null : "No tools available" }) : a.map((e, o) => /* @__PURE__ */ s(
-      fe,
+    l.length === 0 ? /* @__PURE__ */ s(Se, { children: d === "subagent" ? null : "No tools available" }) : l.map((e, r) => /* @__PURE__ */ s(
+      ke,
       {
         type: "button",
-        $active: o === C,
-        onMouseEnter: () => g(o),
-        onMouseLeave: () => g(-1),
+        $active: r === _,
+        onMouseEnter: () => m(r),
+        onMouseLeave: () => m(-1),
         onClick: e.onActivate,
-        children: e.isCreate ? /* @__PURE__ */ s(be, { children: e.label }) : /* @__PURE__ */ b(K, { children: [
-          /* @__PURE__ */ b(he, { children: [
-            V(e.icon),
-            /* @__PURE__ */ s(oe, { color: i.content.primary, children: e.label }),
+        children: e.isCreate ? /* @__PURE__ */ s(Ie, { children: e.label }) : /* @__PURE__ */ k(oe, { children: [
+          /* @__PURE__ */ k(ve, { children: [
+            H(e.icon),
+            /* @__PURE__ */ s(de, { color: o.content.primary, children: e.label }),
             e.authRequired && /* @__PURE__ */ s(
-              W,
+              ee,
               {
-                size: 14,
-                "aria-label": "Requires customer verification"
+                size: 16,
+                "aria-label": "This tool requires customer verification"
               }
             )
           ] }),
-          e.rightLabel ? /* @__PURE__ */ s(me, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ s(H, { width: 12, height: 12 })
+          e.rightLabel ? /* @__PURE__ */ s(we, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ s(ie, { width: 12, height: 12 })
         ] })
       },
       e.id
     )),
-    a.some((e) => e.authRequired) && /* @__PURE__ */ b(ge, { children: [
-      /* @__PURE__ */ s(W, { size: 14 }),
-      /* @__PURE__ */ s(ie, { color: i.content.secondary, children: "Requires customer verification" })
+    l.some((e) => e.authRequired) && /* @__PURE__ */ k(ye, { children: [
+      /* @__PURE__ */ s(ee, { size: 16 }),
+      /* @__PURE__ */ s(ue, { color: o.content.secondary, children: "This tool requires customer verification" })
     ] })
   ] });
-}, de = p.div`
+}, be = h.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
 	max-height: 301px;
 	overflow-y: auto;
-	background: ${i.surface.standard};
-	border: 1px solid ${i.stroke.primary};
+	background: ${o.surface.standard};
+	border: 1px solid ${o.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, ue = p.div`
+`, me = h.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
-	border-bottom: 1px solid ${i.stroke.primary};
-`, pe = p.input`
+	flex-shrink: 0;
+	border-bottom: 1px solid ${o.stroke.primary};
+`, xe = h.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -302,12 +321,12 @@ const h = (l) => l.meta, I = (l) => h(l)?.plainLabel ?? l.label, se = "__bik_cre
 	background: transparent;
 	font-family: Inter;
 	font-size: 14px;
-	color: ${i.content.primary};
+	color: ${o.content.primary};
 
 	&::placeholder {
-		color: ${i.content.placeholder};
+		color: ${o.content.placeholder};
 	}
-`, fe = p.button`
+`, ke = h.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -315,60 +334,67 @@ const h = (l) => l.meta, I = (l) => h(l)?.plainLabel ?? l.label, se = "__bik_cre
 	width: 100%;
 	padding: 8px 10px;
 	height: 48px;
+	/* The card is a flex column with a max-height; without these a long list
+	   compresses its rows below 48px (why only the short first step looked right)
+	   instead of scrolling. Pin the row so the card scrolls instead. */
+	box-sizing: border-box;
+	flex-shrink: 0;
 	border: none;
-	border-bottom: 1px solid ${i.stroke.primary};
-	background: ${(l) => l.$active ? i.surface.subdued : "transparent"};
+	border-bottom: 1px solid ${o.stroke.primary};
+	background: ${(a) => a.$active ? o.surface.subdued : "transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
-		background: ${i.surface.hovered};
+		background: ${o.surface.hovered};
 	}
-`, he = p.div`
+`, ve = h.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`, ge = p.div`
+`, ye = h.div`
 	display: flex;
 	align-items: center;
 	gap: 6px;
 	padding: 8px 12px;
-	border-top: 1px solid ${i.stroke.primary};
-`, me = p.span`
+	border-top: 1px solid ${o.stroke.primary};
+`, we = h.span`
 	flex-shrink: 0;
-	color: ${i.content.brand};
+	color: ${o.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
 	white-space: nowrap;
-`, be = p.div`
+`, Ie = h.div`
 	width: 100%;
 	text-align: center;
-	color: ${i.content.brand};
+	color: ${o.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`, xe = p.button`
+`, Re = h.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
 	border: none;
-	border-bottom: 1px solid ${i.stroke.primary};
+	border-bottom: 1px solid ${o.stroke.primary};
 	background: transparent;
 	cursor: pointer;
 	font-family: Inter;
 	font-size: 12px;
 	font-weight: 600;
 	height: 48px;
+	box-sizing: border-box;
+	flex-shrink: 0;
 	gap: 4px;
-`, ve = p.div`
+`, Se = h.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
-	color: ${i.content.secondary};
+	color: ${o.content.secondary};
 `;
 export {
-  Oe as MentionPicker
+  Ne as MentionPicker
 };
 //# sourceMappingURL=MentionPicker.js.map