@bikdotai/bik-component-library 0.0.839-beta.7 → 0.0.840-beta.0

package/dist/esm/components/agent-builder/components/SelectableListSection.d.ts

@@ -11,9 +11,11 @@ export interface SelectableItem {
     /**
      * When set, this row shows an edit (Configure) icon that calls this instead of
      * the section-level `onConfigure`. Use for rows that open their own drawer
-     * (e.g. a configured Rest API / email-handover tool).
+     * (e.g. a configured Rest API / email-handover tool). A pending promise
+     * disables the row's edit button until it settles (e.g. while the consumer
+     * fetches the sub-agent's data before opening its drawer).
      */
-    onConfigure?: () => void;
+    onConfigure?: () => void | Promise<void>;
 }
 /** A tool source for the empty-state picker (Tools): a button → its searchable list. */
 export interface SourceGroup {
@@ -45,9 +47,10 @@ interface SelectableListSectionProps {
     };
     /**
      * When provided, each row shows an edit (Configure) icon next to Delete.
-     * Omit for tools (Delete only).
+     * Omit for tools (Delete only). A pending promise disables the edit buttons
+     * until it settles.
      */
-    onConfigure?: (id: string) => void;
+    onConfigure?: (id: string) => void | Promise<void>;
     /**
      * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a
      * button per source; clicking one reveals a searchable dropdown of just that
@@ -81,6 +84,12 @@ interface SelectableListSectionProps {
         noun: string;
         zIndex?: number;
     };
+    /**
+     * Open the `@` picker popover above the trigger instead of below. Use inside
+     * a drawer where the section sits near the bottom — opening downward
+     * stretches the drawer and leaves a gap.
+     */
+    pickerOpensUp?: boolean;
 }
 export declare const SelectableListSection: React.FC<SelectableListSectionProps>;
 export {};

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

@@ -1,82 +1,90 @@
-import { jsx as o, jsxs as i, Fragment as j } from "react/jsx-runtime";
-import ne from "../../../assets/icons/delete.svg.js";
-import te from "../../../assets/icons/edit.svg.js";
-import F from "../../../assets/icons/plus.svg.js";
-import { useState as v, useRef as K, useEffect as le } from "react";
-import E from "styled-components";
-import { TitleSmall as re, BodyCaption as U, BodySecondary as C } from "../../TypographyStyle.js";
+import { jsx as o, jsxs as i, Fragment as q } from "react/jsx-runtime";
+import ce from "../../../assets/icons/delete.svg.js";
+import ie from "../../../assets/icons/edit.svg.js";
+import U from "../../../assets/icons/plus.svg.js";
+import { useState as f, useRef as J, useEffect as de } from "react";
+import _ from "styled-components";
+import { TitleSmall as se, BodyCaption as v, BodySecondary as ue } from "../../TypographyStyle.js";
 import { COLORS as d } from "../../../constants/Theme.js";
-import { SideSection as ce, SideSectionHeader as ie, AddIconButton as de, SourceButtonRow as se, SourceButton as V, SelectableRow as ae, RowText as ue, RowActions as he, RowMenuButton as q, RowActionDivider as fe } from "../AgentBuilder.styled.js";
-import { renderSourceIcon as A, SOURCE_ICONS as pe } from "../utils/sourceIcons.js";
-import { MentionPicker as me } from "./MentionPicker.js";
-import { Dropdown as J } from "../../dropdown/Dropdown.js";
-import { unwrapDropdownValue as P } from "../../dropdown/utils.js";
-import { Button as Se } from "../../button/Button.js";
-import { DeleteConfirmationModal as we } from "../../states-modal/DeleteConfirmationModal.js";
-const Q = "__bik_create_new__", He = ({
-  title: u,
-  helper: _,
-  items: s,
-  addableOptions: f,
-  onAdd: g,
-  onRemove: R,
-  dataTestPrefix: t,
-  emptyText: Y,
-  createOption: n,
-  onConfigure: D,
-  sourceGroups: p,
+import { SideSection as ae, SideSectionHeader as he, AddIconButton as pe, SourceButtonRow as fe, SourceButton as P, SelectableRow as me, RowText as Se, RowActions as ge, RowMenuButton as Q, RowActionDivider as we } from "../AgentBuilder.styled.js";
+import { renderSourceIcon as A, SOURCE_ICONS as ye } from "../utils/sourceIcons.js";
+import { MentionPicker as ve } from "./MentionPicker.js";
+import { Dropdown as X } from "../../dropdown/Dropdown.js";
+import { unwrapDropdownValue as Y } from "../../dropdown/utils.js";
+import { Button as $e } from "../../button/Button.js";
+import { DeleteConfirmationModal as be } from "../../states-modal/DeleteConfirmationModal.js";
+import { Tooltip as E } from "../../tooltips/Tooltip.js";
+const Z = "__bik_create_new__", Ke = ({
+  title: s,
+  helper: D,
+  items: a,
+  addableOptions: m,
+  onAdd: $,
+  onRemove: I,
+  dataTestPrefix: l,
+  emptyText: T,
+  createOption: t,
+  onConfigure: R,
+  sourceGroups: S,
   mentionItems: B,
-  actionSources: m,
-  confirmDelete: h
+  actionSources: g,
+  confirmDelete: p,
+  pickerOpensUp: L
 }) => {
-  const [a, c] = v(!1), [I, $] = v(null), [Z, y] = v(null), S = !!p && p.length > 0, b = p?.find((e) => e.source === Z), l = B !== void 0, L = K(null), z = K(null), [w, x] = v(null);
-  le(() => {
-    if (!l || !a)
+  const [h, r] = f(!1), [z, b] = f(null), [x, H] = f(null), [O, C] = f(null), w = !!S && S.length > 0, k = S?.find((e) => e.source === O), c = B !== void 0, M = J(null), N = J(null), [y, W] = f(null);
+  de(() => {
+    if (!c || !h)
       return;
-    const e = (k) => {
-      const W = k.target;
-      !L.current?.contains(W) && !z.current?.contains(W) && c(!1);
-    }, r = (k) => {
-      k.key === "Escape" && c(!1);
+    const e = (u) => {
+      const V = u.target;
+      !M.current?.contains(V) && !N.current?.contains(V) && r(!1);
+    }, n = (u) => {
+      u.key === "Escape" && r(!1);
     };
-    return document.addEventListener("mousedown", e), document.addEventListener("keydown", r), () => {
-      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", r);
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", n), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", n);
     };
-  }, [l, a]);
-  const G = S ? l || s.length > 0 : l || f.length > 0 || !!n && s.length > 0, T = s.length === 0 && !!n && !S && !l, H = !!m && m.length > 0, O = (S || H) && s.length === 0, ee = () => {
-    if (l) {
-      x(null), c((e) => !e);
+  }, [c, h]);
+  const ee = w ? c || a.length > 0 : c || m.length > 0 || !!t && a.length > 0, oe = a.length === 0 && !!t && !w && !c, j = !!g && g.length > 0, ne = (w || j) && a.length === 0, te = () => {
+    if (c) {
+      W(null), r((e) => !e);
       return;
     }
-    if (S) {
-      y(null), c((e) => !e);
+    if (w) {
+      C(null), r((e) => !e);
       return;
     }
-    if (f.length === 0 && n) {
-      n.onSelect();
+    if (m.length === 0 && t) {
+      t.onSelect();
       return;
     }
-    c((e) => !e);
-  }, oe = () => s.map((e) => {
-    const r = e.onConfigure ?? (D ? () => D(e.id) : void 0);
+    r((e) => !e);
+  }, le = (e, n) => {
+    if (x)
+      return;
+    const u = n();
+    u && typeof u.then == "function" && (H(e), u.finally(() => H(null)));
+  }, re = () => a.map((e) => {
+    const n = e.onConfigure ?? (R ? () => R(e.id) : void 0);
     return /* @__PURE__ */ i(
-      ae,
+      me,
       {
-        "data-test": `${t}-row-${e.id}`,
+        "data-test": `${l}-row-${e.id}`,
         children: [
           A(e.icon),
-          /* @__PURE__ */ o(ue, { children: /* @__PURE__ */ o(C, { numberOfLines: 1, color: d.content.primary, children: e.label }) }),
-          /* @__PURE__ */ i(he, { children: [
-            r && // Configurable rows (sub-agents, Rest API / email tools) get an
+          /* @__PURE__ */ o(E, { body: e.label, placement: "top", children: /* @__PURE__ */ o(Se, { children: /* @__PURE__ */ o(ue, { numberOfLines: 1, color: d.content.primary, children: e.label }) }) }),
+          /* @__PURE__ */ i(ge, { children: [
+            n && // Configurable rows (sub-agents, Rest API / email tools) get an
             // always-visible edit icon.
-            /* @__PURE__ */ o(
-              q,
+            /* @__PURE__ */ o(E, { body: "Edit", placement: "top", children: /* @__PURE__ */ o(
+              Q,
               {
-                "data-test": `${t}-edit-${e.id}`,
+                "data-test": `${l}-edit-${e.id}`,
                 "aria-label": `Edit ${e.label}`,
-                onClick: r,
+                disabled: x !== null,
+                onClick: () => le(e.id, n),
                 children: /* @__PURE__ */ o(
-                  te,
+                  ie,
                   {
                     width: 16,
                     height: 16,
@@ -84,16 +92,16 @@ const Q = "__bik_create_new__", He = ({
                   }
                 )
               }
-            ),
-            r && /* @__PURE__ */ o(fe, { "aria-hidden": !0 }),
-            /* @__PURE__ */ o(
-              q,
+            ) }),
+            n && /* @__PURE__ */ o(we, { "aria-hidden": !0 }),
+            /* @__PURE__ */ o(E, { body: "Delete", placement: "top", children: /* @__PURE__ */ o(
+              Q,
               {
-                "data-test": `${t}-delete-${e.id}`,
+                "data-test": `${l}-delete-${e.id}`,
                 "aria-label": `Delete ${e.label}`,
-                onClick: () => h ? $(e.id) : R(e.id),
+                onClick: () => p ? b(e.id) : I(e.id),
                 children: /* @__PURE__ */ o(
-                  ne,
+                  ce,
                   {
                     width: 16,
                     height: 16,
@@ -101,18 +109,18 @@ const Q = "__bik_create_new__", He = ({
                   }
                 )
               }
-            )
+            ) })
           ] })
         ]
       },
       e.id
     );
-  }), M = n ? [
-    ...f,
+  }), F = t ? [
+    ...m,
     {
-      label: n.label,
-      value: Q,
-      searchKey: n.label,
+      label: t.label,
+      value: Z,
+      searchKey: t.label,
       customComponent: /* @__PURE__ */ o(
         "div",
         {
@@ -124,163 +132,180 @@ const Q = "__bik_create_new__", He = ({
             fontSize: 14,
             fontWeight: 600
           },
-          children: n.label
+          children: t.label
         }
       )
     }
-  ] : f, N = l ? /* @__PURE__ */ o(
-    me,
+  ] : m, K = c ? /* @__PURE__ */ o(
+    ve,
     {
       items: B ?? [],
       query: "",
       activeIndex: 0,
-      initialSource: w ?? void 0,
+      initialSource: y ?? void 0,
       onSelect: (e) => {
-        c(!1), g(String(e.id));
+        r(!1), $(String(e.id));
       },
-      onClose: () => c(!1),
-      onCreateSubAgent: n ? () => {
-        c(!1), n.onSelect();
+      onClose: () => r(!1),
+      onCreateSubAgent: t ? () => {
+        r(!1), t.onSelect();
       } : void 0,
-      toolActions: H ? m?.map((e) => ({
+      toolActions: j ? g?.map((e) => ({
         ...e,
         onSelect: () => {
-          c(!1), e.onSelect();
+          r(!1), e.onSelect();
         }
       })) : void 0
     },
-    w ?? "__root__"
+    y ?? "__root__"
   ) : null;
-  return /* @__PURE__ */ i(ce, { children: [
-    /* @__PURE__ */ i(ie, { children: [
-      /* @__PURE__ */ o(re, { color: d.content.primary, children: u }),
-      G && /* @__PURE__ */ i(ve, { ref: L, children: [
+  return /* @__PURE__ */ i(ae, { children: [
+    /* @__PURE__ */ i(he, { children: [
+      /* @__PURE__ */ o(se, { color: d.content.primary, children: s }),
+      ee && /* @__PURE__ */ i(Ce, { ref: M, children: [
         /* @__PURE__ */ o(
-          de,
+          pe,
           {
-            "data-test": `${t}-add`,
-            onClick: ee,
-            "aria-label": `Add ${u}`,
-            children: /* @__PURE__ */ o(F, { width: 20, height: 20, color: d.content.brand })
+            "data-test": `${l}-add`,
+            onClick: te,
+            "aria-label": `Add ${s}`,
+            children: /* @__PURE__ */ o(U, { width: 16, height: 16, color: d.content.primary })
           }
         ),
-        l && a && w === null && /* @__PURE__ */ o(X, { "data-test": `${t}-picker`, children: N })
+        c && h && y === null && /* @__PURE__ */ o(
+          G,
+          {
+            $up: L,
+            "data-test": `${l}-picker`,
+            children: K
+          }
+        )
       ] })
     ] }),
-    _ && /* @__PURE__ */ o(U, { color: d.content.secondary, children: _ }),
-    O ? /* @__PURE__ */ i(ge, { ref: l ? z : void 0, children: [
-      /* @__PURE__ */ i(se, { "data-test": `${t}-sources`, children: [
-        p?.map((e) => /* @__PURE__ */ i(
-          V,
+    D && /* @__PURE__ */ o(v, { color: d.content.secondary, children: D }),
+    ne ? /* @__PURE__ */ i(ke, { ref: c ? N : void 0, children: [
+      /* @__PURE__ */ i(fe, { "data-test": `${l}-sources`, children: [
+        S?.map((e) => /* @__PURE__ */ i(
+          P,
           {
             type: "button",
-            "data-test": `${t}-source-${e.source}`,
+            "data-test": `${l}-source-${e.source}`,
             onClick: () => {
-              if (l) {
-                x(e.source), c(!0);
+              if (c) {
+                W(e.source), r(!0);
                 return;
               }
-              y(e.source);
+              C(e.source);
             },
             children: [
-              A(pe[e.source], -4),
-              /* @__PURE__ */ o(C, { color: d.content.primary, children: e.label })
+              A(ye[e.source], -4),
+              /* @__PURE__ */ o(v, { color: d.content.primary, children: e.label })
             ]
           },
           e.source
         )),
-        m?.map((e) => /* @__PURE__ */ i(
-          V,
+        g?.map((e) => /* @__PURE__ */ i(
+          P,
           {
             type: "button",
-            "data-test": `${t}-action-${e.source}`,
-            onClick: e.onSelect,
+            "data-test": `${l}-action-${e.source}`,
+            onClick: () => {
+              r(!1), e.onSelect();
+            },
             children: [
               A(e.icon, -4),
-              /* @__PURE__ */ o(C, { color: d.content.primary, children: e.label })
+              /* @__PURE__ */ o(v, { color: d.content.primary, children: e.label })
             ]
           },
           e.source
         ))
       ] }),
-      l && a && w !== null && /* @__PURE__ */ o(X, { $align: "left", "data-test": `${t}-picker`, children: N }),
-      !l && b && /* @__PURE__ */ o(
-        J,
+      c && h && y !== null && /* @__PURE__ */ o(
+        G,
+        {
+          $align: "left",
+          $up: L,
+          "data-test": `${l}-picker`,
+          children: K
+        }
+      ),
+      !c && k && /* @__PURE__ */ o(
+        X,
         {
-          "data-test": `${t}-dropdown`,
+          "data-test": `${l}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
-          placeHolder: `Search ${b.label} tools`,
-          options: b.options,
+          placeHolder: `Search ${k.label} tools`,
+          options: k.options,
           onSelect: (e) => {
-            const r = P(e);
-            y(null), c(!1), r && g(r);
+            const n = Y(e);
+            C(null), r(!1), n && $(n);
           }
         }
       )
-    ] }) : /* @__PURE__ */ i(j, { children: [
-      !l && a && M.length > 0 && /* @__PURE__ */ o(
-        J,
+    ] }) : /* @__PURE__ */ i(q, { children: [
+      !c && h && F.length > 0 && /* @__PURE__ */ o(
+        X,
         {
-          "data-test": `${t}-dropdown`,
+          "data-test": `${l}-dropdown`,
           size: "small",
           width: "100%",
           isSearchable: !0,
-          placeHolder: `Select ${u.toLowerCase()}`,
-          options: M,
+          placeHolder: `Select ${s.toLowerCase()}`,
+          options: F,
           onSelect: (e) => {
-            const r = P(e);
-            c(!1), r && (r === Q ? n?.onSelect() : g(r));
+            const n = Y(e);
+            r(!1), n && (n === Z ? t?.onSelect() : $(n));
           }
         }
       ),
-      s.length === 0 && !a ? /* @__PURE__ */ i(j, { children: [
-        /* @__PURE__ */ o(U, { color: d.content.placeholder, children: Y }),
-        T && n && /* @__PURE__ */ o(
-          Se,
+      a.length === 0 && !h ? /* @__PURE__ */ i(q, { children: [
+        /* @__PURE__ */ o(v, { color: d.content.placeholder, children: T }),
+        oe && t && /* @__PURE__ */ o(
+          $e,
           {
-            "data-test": `${t}-create`,
+            "data-test": `${l}-create`,
             buttonType: "secondary",
             size: "small",
             matchParentWidth: !0,
-            LeadingIcon: F,
-            buttonText: n.label,
-            onClick: n.onSelect
+            LeadingIcon: U,
+            buttonText: t.label,
+            onClick: t.onSelect
           }
         )
-      ] }) : oe()
+      ] }) : re()
     ] }),
-    h && I && /* @__PURE__ */ o(
-      we,
+    p && z && /* @__PURE__ */ o(
+      be,
       {
-        "data-test": `${t}-delete-confirm`,
-        header: `Delete this ${h.noun}?`,
-        subHeader: `Deleting this ${h.noun} will also remove it from your instructions, wherever it's referenced.`,
+        "data-test": `${l}-delete-confirm`,
+        header: `Delete this ${p.noun}?`,
+        subHeader: `Deleting this ${p.noun} will also remove it from your instructions, wherever it's referenced.`,
         confirmationText: "Delete",
-        zIndex: h.zIndex,
+        zIndex: p.zIndex,
         onDeleteConfirmed: () => {
-          R(I), $(null);
+          I(z), b(null);
         },
-        onCancelClicked: () => $(null)
+        onCancelClicked: () => b(null)
       }
     )
   ] });
-}, ve = E.div`
+}, Ce = _.div`
 	position: relative;
 	display: flex;
-`, ge = E.div`
+`, ke = _.div`
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, X = E.div`
+`, G = _.div`
 	position: absolute;
-	top: calc(100% + 4px);
-	${(u) => u.$align === "left" ? "left: 0;" : "right: 0;"}
+	${(s) => s.$up ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
+	${(s) => s.$align === "left" ? "left: 0;" : "right: 0;"}
 	z-index: 30;
 `;
 export {
-  He as SelectableListSection
+  Ke as SelectableListSection
 };
 //# sourceMappingURL=SelectableListSection.js.map