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

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

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