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

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