@bikdotai/bik-component-library 0.0.852 → 0.0.853

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

@@ -1,205 +1,229 @@
-import { jsxs as k, jsx as s, Fragment as ee } from "react/jsx-runtime";
-import te from "../../../assets/icons/chevronRight.svg.js";
-import ne from "../../../assets/icons/searchIcon.svg.js";
-import oe from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
-import { useState as q, useMemo as y, useEffect as N, useRef as re } from "react";
-import p from "styled-components";
-import { TitleSmall as ie, BodySecondary as le, BodyCaption as ae } from "../../TypographyStyle.js";
+import { jsxs as k, jsx as s, Fragment as ie } from "react/jsx-runtime";
+import le from "../../../assets/icons/chevronRight.svg.js";
+import ae from "../../../assets/icons/searchIcon.svg.js";
+import ce from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
+import { useState as N, useMemo as w, useEffect as U, useRef as se } from "react";
+import h from "styled-components";
+import { TitleSmall as de, BodySecondary as ue, BodyCaption as pe } from "../../TypographyStyle.js";
 import { COLORS as r } from "../../../constants/Theme.js";
-import { CATEGORIES as ce, toolSourceRank as W, isIntegrationSource as se, CONFIG_TOOL_SOURCES as de } from "../constants/tools.js";
-import { toolSourceLabel as U } from "../utils/mentionSerialization.js";
-import { renderSourceIcon as X, sourceIcon as P } from "../utils/sourceIcons.js";
-import Y from "../../../icons/Informational/Common UI/Shield.js";
-const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ue = "__bik_create_subagent__", ze = ({
-  items: a,
+import { CATEGORIES as he, MORE_INTEGRATIONS_KEY as v, isMoreIntegrationSource as P, toolSourceRank as j, MORE_INTEGRATIONS_LABEL as Z, isIntegrationSource as fe, CONFIG_TOOL_SOURCES as ge, MORE_INTEGRATIONS_RANK as me } from "../constants/tools.js";
+import { toolSourceLabel as F } from "../utils/mentionSerialization.js";
+import { renderSourceIcon as H, sourceIcon as z } from "../utils/sourceIcons.js";
+import be from "../../../icons/Informational/Identity/PuzzlePiece.js";
+import ee from "../../../icons/Informational/Common UI/Shield.js";
+const te = {
+  Icon: be,
+  w: 20,
+  h: 20
+}, m = (c) => c.meta, E = (c) => m(c)?.plainLabel ?? c.label, xe = "__bik_create_subagent__", Fe = ({
+  items: c,
   onSelect: C,
   registerKeyHandler: L,
-  onClose: w,
-  onCreateSubAgent: I,
-  initialSource: j,
-  toolActions: v,
-  integrationStatus: F,
-  onConnectIntegration: G
+  onClose: I,
+  onCreateSubAgent: R,
+  initialSource: Y,
+  toolActions: y,
+  integrationStatus: J,
+  onConnectIntegration: K
 }) => {
-  const [Z, _] = q(null), [c, z] = q(j ?? null), [$, b] = q(-1), [S, J] = q(""), m = y(
-    () => a.filter((e) => g(e)?.kind === "tool"),
-    [a]
-  ), A = y(
-    () => a.filter((e) => g(e)?.kind === "subagent"),
-    [a]
-  ), O = y(() => {
+  const [ne, M] = N(null), [i, S] = N(Y ?? null), [T, b] = N(-1), [A, Q] = N(""), x = w(
+    () => c.filter((e) => m(e)?.kind === "tool"),
+    [c]
+  ), O = w(
+    () => c.filter((e) => m(e)?.kind === "subagent"),
+    [c]
+  ), q = w(() => {
     const e = [];
-    return m.forEach((o) => {
-      const h = g(o)?.source ?? "other";
-      e.includes(h) || e.push(h);
+    return x.forEach((o) => {
+      const f = m(o)?.source ?? "other";
+      e.includes(f) || e.push(f);
     }), e;
-  }, [m]), D = y(
+  }, [x]), D = w(
     () => new Map(
-      (v ?? []).map((e) => [e.source, e])
+      (y ?? []).map((e) => [e.source, e])
     ),
-    [v]
-  ), B = y(
-    () => ce.filter(
-      (e) => e.key === "tool" ? m.length > 0 || (v?.length ?? 0) > 0 : A.length > 0 || !!I
+    [y]
+  ), _ = w(
+    () => he.filter(
+      (e) => e.key === "tool" ? x.length > 0 || (y?.length ?? 0) > 0 : O.length > 0 || !!R
     ),
-    [m.length, A.length, I, v?.length]
-  ), M = B.length === 1 ? B[0].key : null, d = Z ?? M, u = d ? d === "subagent" ? (
+    [x.length, O.length, R, y?.length]
+  ), G = _.length === 1 ? _[0].key : null, d = ne ?? G, u = d ? d === "subagent" ? (
     // Always titled — with a back arrow only when the category chooser is above.
     {
       title: "Sub-agent",
-      onBack: M ? void 0 : () => _(null)
+      onBack: G ? void 0 : () => M(null)
     }
-  ) : c ? {
-    title: U(c),
+  ) : i === v ? {
+    title: Z,
+    onBack: () => S(null),
+    icon: te
+  } : i ? {
+    title: F(i),
     // Deep-linked to a source (opened from a right-panel source button):
-    // that source IS the root, so no back arrow. Otherwise back clears the
-    // source — returning to the source chooser.
-    onBack: j ? void 0 : () => z(null),
-    icon: P(c)
+    // that source IS the root, so no back arrow. Otherwise back returns to
+    // the "More Integrations" umbrella for a vendor that lives under it,
+    // else to the source chooser.
+    onBack: Y ? void 0 : () => S(
+      P(i) ? v : null
+    ),
+    icon: z(i)
   } : (
     // 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: M ? void 0 : () => _(null)
+      onBack: G ? void 0 : () => M(null)
     }
-  ) : null, l = y(() => {
+  ) : null, a = w(() => {
     if (!d)
-      return B.map((t) => ({
-        id: t.key,
-        label: t.label,
+      return _.map((n) => ({
+        id: n.key,
+        label: n.label,
         drillsIn: !0,
         onActivate: () => {
-          _(t.key), z(null);
+          M(n.key), S(null);
         }
       }));
     if (d === "subagent") {
-      const t = S.trim().toLowerCase(), f = A.filter((x) => !t || R(x).toLowerCase().includes(t)).map((x) => ({
-        id: String(x.id),
-        label: R(x),
+      const n = A.trim().toLowerCase(), p = O.filter((g) => !n || E(g).toLowerCase().includes(n)).map((g) => ({
+        id: String(g.id),
+        label: E(g),
         drillsIn: !1,
-        onActivate: () => C(x)
+        onActivate: () => C(g)
       }));
-      return I && f.push({
-        id: ue,
+      return R && p.push({
+        id: xe,
         label: "Create new",
         drillsIn: !1,
         isCreate: !0,
         onActivate: () => {
-          w?.(), I();
+          I?.(), R();
         }
-      }), f;
+      }), p;
     }
-    if (!c) {
-      const t = (v ?? []).map((n) => n.source).filter((n) => !O.includes(n)), f = [...O, ...t], x = (n) => {
-        const i = D.get(n);
-        if ((i !== void 0 ? i.connected : F?.[n]) === !1)
+    if (!i || i === v) {
+      const n = (y ?? []).map((t) => t.source).filter((t) => !q.includes(t)), p = [...q, ...n], g = (t) => {
+        const l = D.get(t);
+        if ((l !== void 0 ? l.connected : J?.[t]) === !1)
           return {
-            id: n,
-            label: U(n),
+            id: t,
+            label: F(t),
             drillsIn: !1,
-            icon: P(n) ?? i?.icon,
+            icon: z(t) ?? l?.icon,
             rightLabel: "Connect",
             onActivate: () => {
-              w?.(), i?.onConnect ? i.onConnect() : G?.(n);
+              I?.(), l?.onConnect ? l.onConnect() : K?.(t);
             }
           };
-        const V = m.filter(
-          (E) => (g(E)?.source ?? "other") === n
+        const X = x.filter(
+          ($) => (m($)?.source ?? "other") === t
         );
-        if (V.length + (i ? 1 : 0) === 1 && !(i === void 0 && se(n))) {
-          const E = P(n) ?? i?.icon;
-          if (i)
+        if (X.length + (l ? 1 : 0) === 1 && !(l === void 0 && fe(t))) {
+          const $ = z(t) ?? l?.icon;
+          if (l)
             return {
-              id: n,
-              label: i.label,
+              id: t,
+              label: l.label,
               drillsIn: !1,
-              icon: E,
+              icon: $,
               onActivate: () => {
-                w?.(), i.onSelect();
+                I?.(), l.onSelect();
               }
             };
-          const T = V[0];
+          const B = X[0];
           return {
-            id: String(T.id),
-            label: R(T),
+            id: String(B.id),
+            label: E(B),
             drillsIn: !1,
-            icon: E,
-            authRequired: g(T)?.authRequired,
-            onActivate: () => C(T)
+            icon: $,
+            authRequired: m(B)?.authRequired,
+            onActivate: () => C(B)
           };
         }
         return {
-          id: n,
-          label: U(n),
+          id: t,
+          label: F(t),
           drillsIn: !0,
-          icon: P(n) ?? i?.icon,
-          onActivate: () => z(n)
+          icon: z(t) ?? l?.icon,
+          onActivate: () => S(t)
         };
       };
-      return f.sort((n, i) => W(n) - W(i)).map(x);
+      if (i === v)
+        return p.filter((t) => P(t)).sort((t, l) => j(t) - j(l)).map(g);
+      const W = p.filter((t) => !P(t)).map((t) => ({ row: g(t), rank: j(t) }));
+      return p.some((t) => P(t)) && W.push({
+        rank: me,
+        row: {
+          id: v,
+          label: Z,
+          drillsIn: !0,
+          icon: te,
+          onActivate: () => S(v)
+        }
+      }), W.sort((t, l) => t.rank - l.rank).map((t) => t.row);
     }
-    const e = S.trim().toLowerCase(), o = m.filter((t) => (g(t)?.source ?? "other") === c).filter((t) => !e || R(t).toLowerCase().includes(e)).map((t) => ({
-      id: String(t.id),
-      label: R(t),
+    const e = A.trim().toLowerCase(), o = x.filter((n) => (m(n)?.source ?? "other") === i).filter((n) => !e || E(n).toLowerCase().includes(e)).map((n) => ({
+      id: String(n.id),
+      label: E(n),
       drillsIn: !1,
-      authRequired: g(t)?.authRequired,
-      onActivate: () => C(t)
-    })), h = D.get(c);
-    if (h) {
-      const t = c in de;
+      authRequired: m(n)?.authRequired,
+      onActivate: () => C(n)
+    })), f = D.get(i);
+    if (f) {
+      const n = i in ge;
       o.push({
-        id: `create:${c}`,
-        label: h.label,
+        id: `create:${i}`,
+        label: f.label,
         drillsIn: !1,
-        isCreate: !t,
+        isCreate: !n,
         onActivate: () => {
-          w?.(), h.onSelect();
+          I?.(), f.onSelect();
         }
       });
     }
     return o;
   }, [
     d,
-    B,
-    c,
-    S,
-    m,
+    _,
+    i,
     A,
+    x,
     O,
+    q,
     C,
-    w,
     I,
-    v,
+    R,
+    y,
     D,
-    F,
-    G
+    J,
+    K
   ]);
-  N(() => b(-1), [d, c, S, a]), N(() => J(""), [d, c]);
-  const Q = re({ rows: l, activeIndex: $, header: u });
-  Q.current = { rows: l, activeIndex: $, header: u }, N(() => {
+  U(() => b(-1), [d, i, A, c]), U(() => Q(""), [d, i]);
+  const V = se({ rows: a, activeIndex: T, header: u });
+  V.current = { rows: a, activeIndex: T, header: u }, U(() => {
     if (L)
       return L((e) => {
-        const { rows: o, activeIndex: h, header: t } = Q.current;
+        const { rows: o, activeIndex: f, header: n } = V.current;
         switch (e.key) {
           case "ArrowDown":
-            return o.length && b((f) => (f + 1) % o.length), !0;
+            return o.length && b((p) => (p + 1) % o.length), !0;
           case "ArrowUp":
-            return o.length && b((f) => (f + o.length - 1) % o.length), !0;
+            return o.length && b((p) => (p + o.length - 1) % o.length), !0;
           case "ArrowRight":
           case "Enter":
-            return (o[h] ?? o[0])?.onActivate(), !0;
+            return (o[f] ?? o[0])?.onActivate(), !0;
           case "ArrowLeft":
-            return t?.onBack ? (t.onBack(), !0) : !1;
+            return n?.onBack ? (n.onBack(), !0) : !1;
           default:
             return !1;
         }
       }), () => L(null);
   }, [L]);
-  const K = d ? l.length && !l[0].drillsIn ? "items" : "sources" : "categories", H = d === "tool" && !!c || d === "subagent";
-  return /* @__PURE__ */ k(pe, { className: `bik-mention-picker bik-mention-picker--${K}`, children: [
+  const oe = d ? a.length && !a[0].drillsIn ? "items" : "sources" : "categories", re = d === "tool" && !!i && i !== v || d === "subagent";
+  return /* @__PURE__ */ k(ke, { className: `bik-mention-picker bik-mention-picker--${oe}`, children: [
     u && /* @__PURE__ */ k(
-      ve,
+      Ee,
       {
         type: "button",
         onClick: u.onBack,
@@ -210,24 +234,24 @@ const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ue = "__bik_cre
         },
         children: [
           u.onBack && /* @__PURE__ */ s(
-            oe,
+            ce,
             {
               width: 20,
               height: 20,
               color: r.content.primary
             }
           ),
-          u.icon && X(u.icon),
-          /* @__PURE__ */ k(ie, { children: [
+          u.icon && H(u.icon),
+          /* @__PURE__ */ k(de, { children: [
             " ",
             u.title
           ] })
         ]
       }
     ),
-    H && /* @__PURE__ */ k(he, { children: [
+    re && /* @__PURE__ */ k(ve, { children: [
       /* @__PURE__ */ s(
-        ne,
+        ae,
         {
           width: 20,
           height: 20,
@@ -235,50 +259,50 @@ const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ue = "__bik_cre
         }
       ),
       /* @__PURE__ */ s(
-        fe,
+        ye,
         {
           autoFocus: !0,
-          value: S,
+          value: A,
           placeholder: "Search",
           "data-test": "mention-picker-search",
-          onChange: (e) => J(e.target.value),
+          onChange: (e) => Q(e.target.value),
           onKeyDown: (e) => {
-            l.length && (e.key === "ArrowDown" ? (e.preventDefault(), b((o) => (o + 1) % l.length)) : e.key === "ArrowUp" ? (e.preventDefault(), b((o) => (o + l.length - 1) % l.length)) : e.key === "Enter" && (e.preventDefault(), (l[$] ?? l[0])?.onActivate()));
+            a.length && (e.key === "ArrowDown" ? (e.preventDefault(), b((o) => (o + 1) % a.length)) : e.key === "ArrowUp" ? (e.preventDefault(), b((o) => (o + a.length - 1) % a.length)) : e.key === "Enter" && (e.preventDefault(), (a[T] ?? a[0])?.onActivate()));
           }
         }
       )
     ] }),
-    l.length === 0 ? /* @__PURE__ */ s(ye, { children: d === "subagent" ? null : "No tools available" }) : l.map((e, o) => /* @__PURE__ */ s(
-      ge,
+    a.length === 0 ? /* @__PURE__ */ s(Ce, { children: d === "subagent" ? null : "No tools available" }) : a.map((e, o) => /* @__PURE__ */ s(
+      we,
       {
         type: "button",
-        $active: o === $,
+        $active: o === T,
         onMouseEnter: () => b(o),
         onMouseLeave: () => b(-1),
         onClick: e.onActivate,
-        children: e.isCreate ? /* @__PURE__ */ s(ke, { children: e.label }) : /* @__PURE__ */ k(ee, { children: [
-          /* @__PURE__ */ k(be, { children: [
-            X(e.icon),
-            /* @__PURE__ */ s(le, { color: r.content.primary, children: e.label }),
+        children: e.isCreate ? /* @__PURE__ */ s(Ae, { children: e.label }) : /* @__PURE__ */ k(ie, { children: [
+          /* @__PURE__ */ k(Ie, { children: [
+            H(e.icon),
+            /* @__PURE__ */ s(ue, { color: r.content.primary, children: e.label }),
             e.authRequired && /* @__PURE__ */ s(
-              Y,
+              ee,
               {
                 size: 16,
                 "aria-label": "This tool requires customer verification"
               }
             )
           ] }),
-          e.rightLabel ? /* @__PURE__ */ s(xe, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ s(te, { width: 12, height: 12 })
+          e.rightLabel ? /* @__PURE__ */ s(Se, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ s(le, { width: 12, height: 12 })
         ] })
       },
       e.id
     )),
-    l.some((e) => e.authRequired) && /* @__PURE__ */ k(me, { children: [
-      /* @__PURE__ */ s(Y, { size: 16 }),
-      /* @__PURE__ */ s(ae, { color: r.content.secondary, children: "This tool requires customer verification" })
+    a.some((e) => e.authRequired) && /* @__PURE__ */ k(Re, { children: [
+      /* @__PURE__ */ s(ee, { size: 16 }),
+      /* @__PURE__ */ s(pe, { color: r.content.secondary, children: "This tool requires customer verification" })
     ] })
   ] });
-}, pe = p.div`
+}, ke = h.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
@@ -288,14 +312,14 @@ const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ue = "__bik_cre
 	border: 1px solid ${r.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, he = p.div`
+`, ve = h.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
 	flex-shrink: 0;
 	border-bottom: 1px solid ${r.stroke.primary};
-`, fe = p.input`
+`, ye = h.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -308,7 +332,7 @@ const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ue = "__bik_cre
 	&::placeholder {
 		color: ${r.content.placeholder};
 	}
-`, ge = p.button`
+`, we = h.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -323,39 +347,39 @@ const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ue = "__bik_cre
 	flex-shrink: 0;
 	border: none;
 	border-bottom: 1px solid ${r.stroke.primary};
-	background: ${(a) => a.$active ? r.surface.subdued : "transparent"};
+	background: ${(c) => c.$active ? r.surface.subdued : "transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
 		background: ${r.surface.hovered};
 	}
-`, be = p.div`
+`, Ie = h.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`, me = p.div`
+`, Re = h.div`
 	display: flex;
 	align-items: center;
 	gap: 6px;
 	padding: 8px 12px;
 	border-top: 1px solid ${r.stroke.primary};
-`, xe = p.span`
+`, Se = h.span`
 	flex-shrink: 0;
 	color: ${r.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
 	white-space: nowrap;
-`, ke = p.div`
+`, Ae = h.div`
 	width: 100%;
 	text-align: center;
 	color: ${r.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`, ve = p.button`
+`, Ee = h.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
@@ -370,13 +394,13 @@ const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ue = "__bik_cre
 	box-sizing: border-box;
 	flex-shrink: 0;
 	gap: 4px;
-`, ye = p.div`
+`, Ce = h.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
 	color: ${r.content.secondary};
 `;
 export {
-  ze as MentionPicker
+  Fe as MentionPicker
 };
 //# sourceMappingURL=MentionPicker.js.map