@bikdotai/bik-component-library 0.0.841-beta.1 → 0.0.841

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

@@ -1,71 +1,70 @@
-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 k, useEffect as D, useRef as ne } from "react";
+import { jsxs as m, jsx as u, Fragment as Z } from "react/jsx-runtime";
+import K from "../../../assets/icons/chevronRight.svg.js";
+import H from "../../../assets/icons/searchIcon.svg.js";
+import ee from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
+import { useState as B, useMemo as x, useEffect as z, useRef as te } from "react";
 import p from "styled-components";
-import { TitleSmall as re, BodySecondary as oe, BodyCaption as ie } from "../../TypographyStyle.js";
-import { COLORS as r } from "../../../constants/Theme.js";
-import { CATEGORIES as ae, toolSourceRank as Q, 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 = (c) => c.meta, I = (c) => h(c)?.plainLabel ?? c.label, le = "__bik_create_subagent__", qe = ({
-  items: c,
-  onSelect: R,
-  registerKeyHandler: S,
+import { TitleSmall as ne, BodySecondary as re } from "../../TypographyStyle.js";
+import { COLORS as i } from "../../../constants/Theme.js";
+import { CATEGORIES as oe, toolSourceRank as Q, CONFIG_TOOL_SOURCES as ie } from "../constants/tools.js";
+import { toolSourceLabel as N } from "../utils/mentionSerialization.js";
+import { sourceIcon as E, renderSourceIcon as V } from "../utils/sourceIcons.js";
+const k = (l) => l.meta, I = (l) => k(l)?.plainLabel ?? l.label, le = "__bik_create_subagent__", Le = ({
+  items: l,
+  onSelect: S,
+  registerKeyHandler: C,
   onClose: v,
   onCreateSubAgent: y,
-  initialSource: N,
-  toolActions: x,
-  integrationStatus: U,
-  onConnectIntegration: j
+  initialSource: U,
+  toolActions: b,
+  integrationStatus: j,
+  onConnectIntegration: F
 }) => {
-  const [X, _] = E(null), [l, O] = E(N ?? null), [C, g] = E(-1), [w, F] = E(""), m = k(
-    () => c.filter((e) => h(e)?.kind === "tool"),
-    [c]
-  ), $ = k(
-    () => c.filter((e) => h(e)?.kind === "subagent"),
-    [c]
-  ), P = k(() => {
+  const [W, _] = B(null), [c, O] = B(U ?? null), [A, h] = B(-1), [w, G] = B(""), g = x(
+    () => l.filter((e) => k(e)?.kind === "tool"),
+    [l]
+  ), $ = x(
+    () => l.filter((e) => k(e)?.kind === "subagent"),
+    [l]
+  ), T = x(() => {
     const e = [];
-    return m.forEach((o) => {
-      const f = h(o)?.source ?? "other";
+    return g.forEach((r) => {
+      const f = k(r)?.source ?? "other";
       e.includes(f) || e.push(f);
     }), e;
-  }, [m]), T = k(
+  }, [g]), P = x(
     () => new Map(
-      (x ?? []).map((e) => [e.source, e])
+      (b ?? []).map((e) => [e.source, e])
     ),
-    [x]
-  ), A = k(
-    () => ae.filter(
-      (e) => e.key === "tool" ? m.length > 0 || (x?.length ?? 0) > 0 : $.length > 0 || !!y
+    [b]
+  ), L = x(
+    () => oe.filter(
+      (e) => e.key === "tool" ? g.length > 0 || (b?.length ?? 0) > 0 : $.length > 0 || !!y
     ),
-    [m.length, $.length, y, x?.length]
-  ), z = A.length === 1 ? A[0].key : null, d = X ?? z, u = d ? d === "subagent" ? (
+    [g.length, $.length, y, b?.length]
+  ), D = L.length === 1 ? L[0].key : null, s = W ?? D, d = s ? s === "subagent" ? (
     // Always titled — with a back arrow only when the category chooser is above.
     {
       title: "Sub-agent",
-      onBack: z ? void 0 : () => _(null)
+      onBack: D ? void 0 : () => _(null)
     }
-  ) : l ? {
-    title: M(l),
+  ) : c ? {
+    title: N(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(l)
+    onBack: U ? void 0 : () => O(null),
+    icon: E(c)
   } : (
     // 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: D ? void 0 : () => _(null)
     }
-  ) : null, a = k(() => {
-    if (!d)
-      return A.map((n) => ({
+  ) : null, a = x(() => {
+    if (!s)
+      return L.map((n) => ({
         id: n.key,
         label: n.label,
         drillsIn: !0,
@@ -73,12 +72,12 @@ const h = (c) => c.meta, I = (c) => h(c)?.plainLabel ?? c.label, le = "__bik_cre
           _(n.key), O(null);
         }
       }));
-    if (d === "subagent") {
-      const n = w.trim().toLowerCase(), t = $.filter((i) => !n || I(i).toLowerCase().includes(n)).map((i) => ({
-        id: String(i.id),
-        label: I(i),
+    if (s === "subagent") {
+      const n = w.trim().toLowerCase(), t = $.filter((o) => !n || I(o).toLowerCase().includes(n)).map((o) => ({
+        id: String(o.id),
+        label: I(o),
         drillsIn: !1,
-        onActivate: () => R(i)
+        onActivate: () => S(o)
       }));
       return y && t.push({
         id: le,
@@ -90,66 +89,64 @@ const h = (c) => c.meta, I = (c) => h(c)?.plainLabel ?? c.label, le = "__bik_cre
         }
       }), t;
     }
-    if (!l) {
-      const n = (x ?? []).map((t) => t.source).filter((t) => !P.includes(t));
-      return [...P, ...n].sort((t, i) => Q(t) - Q(i)).map((t) => {
-        const i = T.get(t);
-        if ((i !== void 0 ? i.connected : U?.[t]) === !1)
+    if (!c) {
+      const n = (b ?? []).map((t) => t.source).filter((t) => !T.includes(t));
+      return [...T, ...n].sort((t, o) => Q(t) - Q(o)).map((t) => {
+        const o = P.get(t);
+        if ((o !== void 0 ? o.connected : j?.[t]) === !1)
           return {
             id: t,
-            label: M(t),
+            label: N(t),
             drillsIn: !1,
-            icon: q(t) ?? i?.icon,
+            icon: E(t) ?? o?.icon,
             rightLabel: "Connect",
             onActivate: () => {
-              v?.(), i?.onConnect ? i.onConnect() : j?.(t);
+              v?.(), o?.onConnect ? o.onConnect() : F?.(t);
             }
           };
-        const J = m.filter(
-          (L) => (h(L)?.source ?? "other") === t
+        const J = g.filter(
+          (R) => (k(R)?.source ?? "other") === t
         );
-        if (J.length + (i ? 1 : 0) === 1) {
-          const L = q(t) ?? i?.icon;
-          if (i)
+        if (J.length + (o ? 1 : 0) === 1) {
+          const R = E(t) ?? o?.icon;
+          if (o)
             return {
               id: t,
-              label: i.label,
+              label: o.label,
               drillsIn: !1,
-              icon: L,
+              icon: R,
               onActivate: () => {
-                v?.(), i.onSelect();
+                v?.(), o.onSelect();
               }
             };
-          const B = J[0];
+          const M = J[0];
           return {
-            id: String(B.id),
-            label: I(B),
+            id: String(M.id),
+            label: I(M),
             drillsIn: !1,
-            icon: L,
-            authRequired: h(B)?.authRequired,
-            onActivate: () => R(B)
+            icon: R,
+            onActivate: () => S(M)
           };
         }
         return {
           id: t,
-          label: M(t),
+          label: N(t),
           drillsIn: !0,
-          icon: q(t) ?? i?.icon,
+          icon: E(t) ?? o?.icon,
           onActivate: () => O(t)
         };
       });
     }
-    const e = w.trim().toLowerCase(), o = m.filter((n) => (h(n)?.source ?? "other") === l).filter((n) => !e || I(n).toLowerCase().includes(e)).map((n) => ({
+    const e = w.trim().toLowerCase(), r = g.filter((n) => (k(n)?.source ?? "other") === c).filter((n) => !e || I(n).toLowerCase().includes(e)).map((n) => ({
       id: String(n.id),
       label: I(n),
       drillsIn: !1,
-      authRequired: h(n)?.authRequired,
-      onActivate: () => R(n)
-    })), f = T.get(l);
+      onActivate: () => S(n)
+    })), f = P.get(c);
     if (f) {
-      const n = l in ce;
-      o.push({
-        id: `create:${l}`,
+      const n = c in ie;
+      r.push({
+        id: `create:${c}`,
         label: f.label,
         drillsIn: !1,
         isCreate: !n,
@@ -158,144 +155,132 @@ const h = (c) => c.meta, I = (c) => h(c)?.plainLabel ?? c.label, le = "__bik_cre
         }
       });
     }
-    return o;
+    return r;
   }, [
-    d,
-    A,
-    l,
+    s,
+    L,
+    c,
     w,
-    m,
+    g,
     $,
-    P,
-    R,
+    T,
+    S,
     v,
     y,
-    x,
-    T,
-    U,
-    j
+    b,
+    P,
+    j,
+    F
   ]);
-  D(() => g(-1), [d, l, w, c]), D(() => F(""), [d, l]);
-  const G = ne({ rows: a, activeIndex: C, header: u });
-  G.current = { rows: a, activeIndex: C, header: u }, D(() => {
-    if (S)
-      return S((e) => {
-        const { rows: o, activeIndex: f, header: n } = G.current;
+  z(() => h(-1), [s, c, w, l]), z(() => G(""), [s, c]);
+  const q = te({ rows: a, activeIndex: A, header: d });
+  q.current = { rows: a, activeIndex: A, header: d }, z(() => {
+    if (C)
+      return C((e) => {
+        const { rows: r, activeIndex: f, header: n } = q.current;
         switch (e.key) {
           case "ArrowDown":
-            return o.length && g((t) => (t + 1) % o.length), !0;
+            return r.length && h((t) => (t + 1) % r.length), !0;
           case "ArrowUp":
-            return o.length && g((t) => (t + o.length - 1) % o.length), !0;
+            return r.length && h((t) => (t + 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;
         }
-      }), () => S(null);
-  }, [S]);
-  const Y = d ? a.length && !a[0].drillsIn ? "items" : "sources" : "categories", Z = d === "tool" && !!l || d === "subagent";
-  return /* @__PURE__ */ b(se, { className: `bik-mention-picker bik-mention-picker--${Y}`, children: [
-    u && /* @__PURE__ */ b(
-      be,
+      }), () => C(null);
+  }, [C]);
+  const X = s ? a.length && !a[0].drillsIn ? "items" : "sources" : "categories", Y = s === "tool" && !!c || s === "subagent";
+  return /* @__PURE__ */ m(ce, { className: `bik-mention-picker bik-mention-picker--${X}`, children: [
+    d && /* @__PURE__ */ m(
+      he,
       {
         type: "button",
-        onClick: u.onBack,
-        disabled: !u.onBack,
+        onClick: d.onBack,
+        disabled: !d.onBack,
         style: {
-          background: r.surface.subdued,
-          cursor: u.onBack ? "pointer" : "default"
+          background: i.surface.subdued,
+          cursor: d.onBack ? "pointer" : "default"
         },
         children: [
-          u.onBack && /* @__PURE__ */ s(
-            te,
+          d.onBack && /* @__PURE__ */ u(
+            ee,
             {
               width: 20,
               height: 20,
-              color: r.content.primary
+              color: i.content.primary
             }
           ),
-          u.icon && V(u.icon),
-          /* @__PURE__ */ b(re, { children: [
+          d.icon && V(d.icon),
+          /* @__PURE__ */ m(ne, { children: [
             " ",
-            u.title
+            d.title
           ] })
         ]
       }
     ),
-    Z && /* @__PURE__ */ b(de, { children: [
-      /* @__PURE__ */ s(
-        ee,
+    Y && /* @__PURE__ */ m(ae, { children: [
+      /* @__PURE__ */ u(
+        H,
         {
           width: 20,
           height: 20,
-          color: r.content.placeholder
+          color: i.content.placeholder
         }
       ),
-      /* @__PURE__ */ s(
-        ue,
+      /* @__PURE__ */ u(
+        se,
         {
           autoFocus: !0,
           value: w,
           placeholder: "Search",
           "data-test": "mention-picker-search",
-          onChange: (e) => F(e.target.value),
+          onChange: (e) => G(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()));
+            a.length && (e.key === "ArrowDown" ? (e.preventDefault(), h((r) => (r + 1) % a.length)) : e.key === "ArrowUp" ? (e.preventDefault(), h((r) => (r + a.length - 1) % a.length)) : e.key === "Enter" && (e.preventDefault(), (a[A] ?? a[0])?.onActivate()));
           }
         }
       )
     ] }),
-    a.length === 0 ? /* @__PURE__ */ s(xe, { children: d === "subagent" ? null : "No tools available" }) : a.map((e, o) => /* @__PURE__ */ s(
-      pe,
+    a.length === 0 ? /* @__PURE__ */ u(ge, { children: s === "subagent" ? null : "No tools available" }) : a.map((e, r) => /* @__PURE__ */ u(
+      de,
       {
         type: "button",
-        $active: o === C,
-        onMouseEnter: () => g(o),
-        onMouseLeave: () => g(-1),
+        $active: r === A,
+        onMouseEnter: () => h(r),
+        onMouseLeave: () => h(-1),
         onClick: e.onActivate,
-        children: e.isCreate ? /* @__PURE__ */ s(me, { children: e.label }) : /* @__PURE__ */ b(K, { children: [
-          /* @__PURE__ */ b(fe, { children: [
+        children: e.isCreate ? /* @__PURE__ */ u(fe, { children: e.label }) : /* @__PURE__ */ m(Z, { children: [
+          /* @__PURE__ */ m(ue, { children: [
             V(e.icon),
-            /* @__PURE__ */ s(oe, { color: r.content.primary, children: e.label }),
-            e.authRequired && /* @__PURE__ */ s(
-              W,
-              {
-                size: 14,
-                color: r.content.secondary,
-                "aria-label": "Requires customer verification"
-              }
-            )
+            /* @__PURE__ */ u(re, { color: i.content.primary, children: e.label })
           ] }),
-          e.rightLabel ? /* @__PURE__ */ s(ge, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ s(H, { width: 12, height: 12 })
+          e.rightLabel ? /* @__PURE__ */ u(pe, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ u(K, { width: 12, height: 12 })
         ] })
       },
       e.id
-    )),
-    a.some((e) => e.authRequired) && /* @__PURE__ */ b(he, { children: [
-      /* @__PURE__ */ s(W, { size: 14, color: r.content.secondary }),
-      /* @__PURE__ */ s(ie, { color: r.content.secondary, children: "Requires customer verification" })
-    ] })
+    ))
   ] });
-}, se = p.div`
+}, ce = p.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
 	max-height: 301px;
 	overflow-y: auto;
-	background: ${r.surface.standard};
-	border: 1px solid ${r.stroke.primary};
+	background: ${i.surface.standard};
+	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, de = p.div`
+`, ae = p.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
-	border-bottom: 1px solid ${r.stroke.primary};
-`, ue = p.input`
+	border-bottom: 1px solid ${i.stroke.primary};
+`, se = p.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -303,12 +288,12 @@ const h = (c) => c.meta, I = (c) => h(c)?.plainLabel ?? c.label, le = "__bik_cre
 	background: transparent;
 	font-family: Inter;
 	font-size: 14px;
-	color: ${r.content.primary};
+	color: ${i.content.primary};
 
 	&::placeholder {
-		color: ${r.content.placeholder};
+		color: ${i.content.placeholder};
 	}
-`, pe = p.button`
+`, de = p.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -317,45 +302,39 @@ const h = (c) => c.meta, I = (c) => h(c)?.plainLabel ?? c.label, le = "__bik_cre
 	padding: 8px 10px;
 	height: 48px;
 	border: none;
-	border-bottom: 1px solid ${r.stroke.primary};
-	background: ${(c) => c.$active ? r.surface.subdued : "transparent"};
+	border-bottom: 1px solid ${i.stroke.primary};
+	background: ${(l) => l.$active ? i.surface.subdued : "transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
-		background: ${r.surface.hovered};
+		background: ${i.surface.hovered};
 	}
-`, fe = p.div`
+`, ue = p.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`, he = p.div`
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	padding: 8px 12px;
-	border-top: 1px solid ${r.stroke.primary};
-`, ge = p.span`
+`, pe = p.span`
 	flex-shrink: 0;
-	color: ${r.content.brand};
+	color: ${i.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
 	white-space: nowrap;
-`, me = p.div`
+`, fe = p.div`
 	width: 100%;
 	text-align: center;
-	color: ${r.content.brand};
+	color: ${i.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`, be = p.button`
+`, he = p.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
 	border: none;
-	border-bottom: 1px solid ${r.stroke.primary};
+	border-bottom: 1px solid ${i.stroke.primary};
 	background: transparent;
 	cursor: pointer;
 	font-family: Inter;
@@ -363,13 +342,13 @@ const h = (c) => c.meta, I = (c) => h(c)?.plainLabel ?? c.label, le = "__bik_cre
 	font-weight: 600;
 	height: 48px;
 	gap: 4px;
-`, xe = p.div`
+`, ge = p.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
-	color: ${r.content.secondary};
+	color: ${i.content.secondary};
 `;
 export {
-  qe as MentionPicker
+  Le as MentionPicker
 };
 //# sourceMappingURL=MentionPicker.js.map