@bikdotai/bik-component-library 0.0.852 → 0.0.853-beta.0

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

@@ -1,301 +1,369 @@
-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 { 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 = ({
+import { jsxs as k, jsx as l, Fragment as re } from "react/jsx-runtime";
+import ne from "../../../assets/icons/chevronRight.svg.js";
+import oe from "../../../assets/icons/searchIcon.svg.js";
+import ie from "../../../icons/Arrows/Normal arrows/ArrowLeft.js";
+import { useState as O, useMemo as w, useEffect as U, useRef as le } from "react";
+import h from "styled-components";
+import { TitleSmall as ae, BodySecondary as ce, BodyCaption as se } from "../../TypographyStyle.js";
+import { COLORS as o } from "../../../constants/Theme.js";
+import { PickerType as de } from "../../variable-picker-v3/model.js";
+import { CATEGORIES as he, toolSourceRank as X, isIntegrationSource as ue, CONFIG_TOOL_SOURCES as pe } from "../constants/tools.js";
+import { toolSourceLabel as V } from "../utils/mentionSerialization.js";
+import { renderSourceIcon as Y, sourceIcon as _ } from "../utils/sourceIcons.js";
+import { VariablePicker as fe } from "../../variable-picker-v3/VariablePicker.js";
+import Z from "../../../icons/Informational/Common UI/Shield.js";
+const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ge = "__bik_create_subagent__", je = ({
   items: a,
-  onSelect: C,
-  registerKeyHandler: L,
-  onClose: w,
+  onSelect: $,
+  registerKeyHandler: C,
+  onClose: v,
   onCreateSubAgent: I,
   initialSource: j,
-  toolActions: v,
-  integrationStatus: F,
-  onConnectIntegration: G
+  toolActions: y,
+  integrationStatus: G,
+  onConnectIntegration: H,
+  variablesData: z,
+  onSelectVariable: D
 }) => {
-  const [Z, _] = q(null), [c, z] = q(j ?? null), [$, b] = q(-1), [S, J] = q(""), m = y(
+  const [K, L] = O(null), [d, M] = O(j ?? null), [A, b] = O(-1), [S, J] = O(""), m = w(
     () => a.filter((e) => g(e)?.kind === "tool"),
     [a]
-  ), A = y(
+  ), B = w(
     () => a.filter((e) => g(e)?.kind === "subagent"),
     [a]
-  ), O = y(() => {
+  ), F = w(() => {
     const e = [];
-    return m.forEach((o) => {
-      const h = g(o)?.source ?? "other";
-      e.includes(h) || e.push(h);
+    return m.forEach((n) => {
+      const p = g(n)?.source ?? "other";
+      e.includes(p) || e.push(p);
     }), e;
-  }, [m]), D = y(
+  }, [m]), N = 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
-    ),
-    [m.length, A.length, I, v?.length]
-  ), M = B.length === 1 ? B[0].key : null, d = Z ?? M, u = d ? d === "subagent" ? (
+    [y]
+  ), E = w(
+    () => he.filter((e) => e.key === "tool" ? m.length > 0 || (y?.length ?? 0) > 0 : e.key === "variable" ? (z?.length ?? 0) > 0 && !!D : B.length > 0 || !!I),
+    [
+      m.length,
+      B.length,
+      I,
+      y?.length,
+      z?.length,
+      D
+    ]
+  ), P = E.length === 1 ? E[0].key : null, i = K ?? P, u = i ? i === "subagent" ? (
     // Always titled — with a back arrow only when the category chooser is above.
     {
       title: "Sub-agent",
-      onBack: M ? void 0 : () => _(null)
+      onBack: P ? void 0 : () => L(null)
     }
-  ) : c ? {
-    title: U(c),
+  ) : i === "variable" ? {
+    title: "Variables",
+    onBack: P ? void 0 : () => L(null)
+  } : d ? {
+    title: V(d),
     // 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)
+    onBack: j ? void 0 : () => M(null),
+    icon: _(d)
   } : (
     // 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: P ? void 0 : () => L(null)
     }
-  ) : null, l = y(() => {
-    if (!d)
-      return B.map((t) => ({
+  ) : null, s = w(() => {
+    if (!i)
+      return E.map((t) => ({
         id: t.key,
         label: t.label,
         drillsIn: !0,
         onActivate: () => {
-          _(t.key), z(null);
+          L(t.key), M(null);
         }
       }));
-    if (d === "subagent") {
-      const t = S.trim().toLowerCase(), f = A.filter((x) => !t || R(x).toLowerCase().includes(t)).map((x) => ({
+    if (i === "subagent") {
+      const t = S.trim().toLowerCase(), f = B.filter((x) => !t || R(x).toLowerCase().includes(t)).map((x) => ({
         id: String(x.id),
         label: R(x),
         drillsIn: !1,
-        onActivate: () => C(x)
+        onActivate: () => $(x)
       }));
       return I && f.push({
-        id: ue,
+        id: ge,
         label: "Create new",
         drillsIn: !1,
         isCreate: !0,
         onActivate: () => {
-          w?.(), I();
+          v?.(), I();
         }
       }), f;
     }
-    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 === "variable")
+      return [];
+    if (!d) {
+      const t = (y ?? []).map((r) => r.source).filter((r) => !F.includes(r)), f = [...F, ...t], x = (r) => {
+        const c = N.get(r);
+        if ((c !== void 0 ? c.connected : G?.[r]) === !1)
           return {
-            id: n,
-            label: U(n),
+            id: r,
+            label: V(r),
             drillsIn: !1,
-            icon: P(n) ?? i?.icon,
+            icon: _(r) ?? c?.icon,
             rightLabel: "Connect",
             onActivate: () => {
-              w?.(), i?.onConnect ? i.onConnect() : G?.(n);
+              v?.(), c?.onConnect ? c.onConnect() : H?.(r);
             }
           };
-        const V = m.filter(
-          (E) => (g(E)?.source ?? "other") === n
+        const W = m.filter(
+          (T) => (g(T)?.source ?? "other") === r
         );
-        if (V.length + (i ? 1 : 0) === 1 && !(i === void 0 && se(n))) {
-          const E = P(n) ?? i?.icon;
-          if (i)
+        if (W.length + (c ? 1 : 0) === 1 && !(c === void 0 && ue(r))) {
+          const T = _(r) ?? c?.icon;
+          if (c)
             return {
-              id: n,
-              label: i.label,
+              id: r,
+              label: c.label,
               drillsIn: !1,
-              icon: E,
+              icon: T,
               onActivate: () => {
-                w?.(), i.onSelect();
+                v?.(), c.onSelect();
               }
             };
-          const T = V[0];
+          const q = W[0];
           return {
-            id: String(T.id),
-            label: R(T),
+            id: String(q.id),
+            label: R(q),
             drillsIn: !1,
-            icon: E,
-            authRequired: g(T)?.authRequired,
-            onActivate: () => C(T)
+            icon: T,
+            authRequired: g(q)?.authRequired,
+            onActivate: () => $(q)
           };
         }
         return {
-          id: n,
-          label: U(n),
+          id: r,
+          label: V(r),
           drillsIn: !0,
-          icon: P(n) ?? i?.icon,
-          onActivate: () => z(n)
+          icon: _(r) ?? c?.icon,
+          onActivate: () => M(r)
         };
       };
-      return f.sort((n, i) => W(n) - W(i)).map(x);
+      return f.sort((r, c) => X(r) - X(c)).map(x);
     }
-    const e = S.trim().toLowerCase(), o = m.filter((t) => (g(t)?.source ?? "other") === c).filter((t) => !e || R(t).toLowerCase().includes(e)).map((t) => ({
+    const e = S.trim().toLowerCase(), n = m.filter((t) => (g(t)?.source ?? "other") === d).filter((t) => !e || R(t).toLowerCase().includes(e)).map((t) => ({
       id: String(t.id),
       label: R(t),
       drillsIn: !1,
       authRequired: g(t)?.authRequired,
-      onActivate: () => C(t)
-    })), h = D.get(c);
-    if (h) {
-      const t = c in de;
-      o.push({
-        id: `create:${c}`,
-        label: h.label,
+      onActivate: () => $(t)
+    })), p = N.get(d);
+    if (p) {
+      const t = d in pe;
+      n.push({
+        id: `create:${d}`,
+        label: p.label,
         drillsIn: !1,
         isCreate: !t,
         onActivate: () => {
-          w?.(), h.onSelect();
+          v?.(), p.onSelect();
         }
       });
     }
-    return o;
+    return n;
   }, [
+    i,
+    E,
     d,
-    B,
-    c,
     S,
     m,
-    A,
-    O,
-    C,
-    w,
-    I,
-    v,
-    D,
+    B,
     F,
-    G
+    $,
+    v,
+    I,
+    y,
+    N,
+    G,
+    H
   ]);
-  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(() => {
-    if (L)
-      return L((e) => {
-        const { rows: o, activeIndex: h, header: t } = Q.current;
+  U(() => b(-1), [i, d, S, a]), U(() => J(""), [i, d]);
+  const Q = le({ rows: s, activeIndex: A, header: u });
+  Q.current = { rows: s, activeIndex: A, header: u }, U(() => {
+    if (C)
+      return C((e) => {
+        const { rows: n, activeIndex: p, header: t } = Q.current;
+        if (!n.length && e.key !== "ArrowLeft")
+          return !1;
         switch (e.key) {
           case "ArrowDown":
-            return o.length && b((f) => (f + 1) % o.length), !0;
+            return b((f) => (f + 1) % n.length), !0;
           case "ArrowUp":
-            return o.length && b((f) => (f + o.length - 1) % o.length), !0;
+            return b((f) => (f + n.length - 1) % n.length), !0;
           case "ArrowRight":
           case "Enter":
-            return (o[h] ?? o[0])?.onActivate(), !0;
+            return (n[p] ?? n[0])?.onActivate(), !0;
           case "ArrowLeft":
             return t?.onBack ? (t.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: [
-    u && /* @__PURE__ */ k(
-      ve,
-      {
-        type: "button",
-        onClick: u.onBack,
-        disabled: !u.onBack,
-        style: {
-          background: r.surface.subdued,
-          cursor: u.onBack ? "pointer" : "default"
-        },
-        children: [
-          u.onBack && /* @__PURE__ */ s(
+      }), () => C(null);
+  }, [C]);
+  const ee = i ? s.length && !s[0].drillsIn ? "items" : "sources" : "categories", te = i === "tool" && !!d || i === "subagent";
+  return /* @__PURE__ */ k(
+    be,
+    {
+      className: `bik-mention-picker bik-mention-picker--${ee}`,
+      $fixedHeight: i === "variable",
+      children: [
+        u && /* @__PURE__ */ k(
+          $e,
+          {
+            type: "button",
+            onClick: u.onBack,
+            disabled: !u.onBack,
+            style: {
+              background: o.surface.subdued,
+              cursor: u.onBack ? "pointer" : "default"
+            },
+            children: [
+              u.onBack && /* @__PURE__ */ l(
+                ie,
+                {
+                  width: 20,
+                  height: 20,
+                  color: o.content.primary
+                }
+              ),
+              u.icon && Y(u.icon),
+              /* @__PURE__ */ k(ae, { children: [
+                " ",
+                u.title
+              ] })
+            ]
+          }
+        ),
+        te && /* @__PURE__ */ k(ke, { children: [
+          /* @__PURE__ */ l(
             oe,
             {
               width: 20,
               height: 20,
-              color: r.content.primary
+              color: o.content.placeholder
             }
           ),
-          u.icon && X(u.icon),
-          /* @__PURE__ */ k(ie, { children: [
-            " ",
-            u.title
-          ] })
-        ]
-      }
-    ),
-    H && /* @__PURE__ */ k(he, { children: [
-      /* @__PURE__ */ s(
-        ne,
-        {
-          width: 20,
-          height: 20,
-          color: r.content.placeholder
-        }
-      ),
-      /* @__PURE__ */ s(
-        fe,
-        {
-          autoFocus: !0,
-          value: S,
-          placeholder: "Search",
-          "data-test": "mention-picker-search",
-          onChange: (e) => J(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()));
-          }
-        }
-      )
-    ] }),
-    l.length === 0 ? /* @__PURE__ */ s(ye, { children: d === "subagent" ? null : "No tools available" }) : l.map((e, o) => /* @__PURE__ */ s(
-      ge,
-      {
-        type: "button",
-        $active: o === $,
-        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 }),
-            e.authRequired && /* @__PURE__ */ s(
-              Y,
-              {
-                size: 16,
-                "aria-label": "This tool requires customer verification"
+          /* @__PURE__ */ l(
+            ve,
+            {
+              autoFocus: !0,
+              value: S,
+              placeholder: "Search",
+              "data-test": "mention-picker-search",
+              onChange: (e) => J(e.target.value),
+              onKeyDown: (e) => {
+                s.length && (e.key === "ArrowDown" ? (e.preventDefault(), b((n) => (n + 1) % s.length)) : e.key === "ArrowUp" ? (e.preventDefault(), b((n) => (n + s.length - 1) % s.length)) : e.key === "Enter" && (e.preventDefault(), (s[A] ?? s[0])?.onActivate()));
               }
-            )
-          ] }),
-          e.rightLabel ? /* @__PURE__ */ s(xe, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ s(te, { width: 12, height: 12 })
+            }
+          )
+        ] }),
+        i === "variable" ? (
+          // Shared variable catalog, embedded as this drill-in view. The fill
+          // wrapper hands it the remaining card height, so ITS search bar stays
+          // fixed and only the variable list below scrolls. Selecting a
+          // variable dismisses the menu FIRST (strips the typed "@" + query),
+          // then hands the variable up to insert its `{{token}}` at the cursor.
+          /* @__PURE__ */ l(xe, { children: /* @__PURE__ */ l(
+            fe,
+            {
+              type: de.EMBEDDED,
+              data: z ?? [],
+              showRecommendedBar: !0,
+              skipDefaultVariableContent: !0,
+              onSelect: (e) => {
+                v?.(), D?.(e);
+              }
+            }
+          ) })
+        ) : s.length === 0 ? /* @__PURE__ */ l(Ce, { children: i === "subagent" ? null : "No tools available" }) : /* @__PURE__ */ l(me, { children: s.map((e, n) => /* @__PURE__ */ l(
+          ye,
+          {
+            type: "button",
+            $active: n === A,
+            onMouseEnter: () => b(n),
+            onMouseLeave: () => b(-1),
+            onClick: e.onActivate,
+            children: e.isCreate ? /* @__PURE__ */ l(Re, { children: e.label }) : /* @__PURE__ */ k(re, { children: [
+              /* @__PURE__ */ k(we, { children: [
+                Y(e.icon),
+                /* @__PURE__ */ l(ce, { color: o.content.primary, children: e.label }),
+                e.authRequired && /* @__PURE__ */ l(
+                  Z,
+                  {
+                    size: 14,
+                    "aria-label": "Requires customer verification"
+                  }
+                )
+              ] }),
+              e.rightLabel ? /* @__PURE__ */ l(Se, { children: e.rightLabel }) : e.drillsIn && /* @__PURE__ */ l(ne, { width: 12, height: 12 })
+            ] })
+          },
+          e.id
+        )) }),
+        s.some((e) => e.authRequired) && /* @__PURE__ */ k(Ie, { children: [
+          /* @__PURE__ */ l(Z, { size: 16 }),
+          /* @__PURE__ */ l(se, { color: o.content.secondary, children: "This tool requires customer verification" })
         ] })
-      },
-      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" })
-    ] })
-  ] });
-}, pe = p.div`
+      ]
+    }
+  );
+}, be = h.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};
+	/* Variables view is 45px taller: that is what the embedded picker's "Only
+	   Recommended" bar costs, so the variable list keeps the room it had before
+	   the bar was turned on (VariablePicker's calculateHeight subtracts it). */
+	${(a) => a.$fixedHeight ? "height: 346px;" : "max-height: 301px;"}
+	overflow: hidden;
+	background: ${o.surface.standard};
+	border: 1px solid ${o.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`, he = p.div`
+`, me = h.div`
+	flex: 1 1 auto;
+	min-height: 0;
+	overflow-y: auto;
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+`, xe = h.div`
+	flex: 1 1 auto;
+	min-height: 0;
+
+	> div {
+		height: 100%;
+	}
+
+	* {
+		scrollbar-width: none;
+	}
+
+	*::-webkit-scrollbar {
+		display: none;
+	}
+`, ke = 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`
+	border-bottom: 1px solid ${o.stroke.primary};
+`, ve = h.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -303,12 +371,12 @@ const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ue = "__bik_cre
 	background: transparent;
 	font-family: Inter;
 	font-size: 14px;
-	color: ${r.content.primary};
+	color: ${o.content.primary};
 
 	&::placeholder {
-		color: ${r.content.placeholder};
+		color: ${o.content.placeholder};
 	}
-`, ge = p.button`
+`, ye = h.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -322,45 +390,45 @@ const g = (a) => a.meta, R = (a) => g(a)?.plainLabel ?? a.label, ue = "__bik_cre
 	box-sizing: border-box;
 	flex-shrink: 0;
 	border: none;
-	border-bottom: 1px solid ${r.stroke.primary};
-	background: ${(a) => a.$active ? r.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: ${r.surface.hovered};
+		background: ${o.surface.hovered};
 	}
-`, be = p.div`
+`, we = h.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`, me = p.div`
+`, Ie = h.div`
 	display: flex;
 	align-items: center;
 	gap: 6px;
 	padding: 8px 12px;
-	border-top: 1px solid ${r.stroke.primary};
-`, xe = p.span`
+	border-top: 1px solid ${o.stroke.primary};
+`, Se = h.span`
 	flex-shrink: 0;
-	color: ${r.content.brand};
+	color: ${o.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
 	white-space: nowrap;
-`, ke = p.div`
+`, Re = h.div`
 	width: 100%;
 	text-align: center;
-	color: ${r.content.brand};
+	color: ${o.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`, ve = p.button`
+`, $e = h.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
 	border: none;
-	border-bottom: 1px solid ${r.stroke.primary};
+	border-bottom: 1px solid ${o.stroke.primary};
 	background: transparent;
 	cursor: pointer;
 	font-family: Inter;
@@ -370,13 +438,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};
+	color: ${o.content.secondary};
 `;
 export {
-  ze as MentionPicker
+  je as MentionPicker
 };
 //# sourceMappingURL=MentionPicker.js.map