@bikdotai/bik-component-library 0.0.831-beta.1 → 0.0.831-beta.3

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

@@ -1,24 +1,25 @@
-import { jsxs as rt, Fragment as Kt, jsx as c } from "react/jsx-runtime";
-import { useState as r, useRef as A, useMemo as Lt, useCallback as a } from "react";
-import Nt from "styled-components";
+import { jsxs as rt, Fragment as Ot, jsx as c } from "react/jsx-runtime";
+import { useState as r, useRef as v, useMemo as wt, useCallback as a } from "react";
+import Kt from "styled-components";
 import { addUnique as it } from "../../../utils/arrayUtils.js";
 import { COLORS as F } from "../../../constants/Theme.js";
-import { AGENT_CHAR_LIMITS as wt } from "../constants/charLimits.js";
-import { CONFIG_TOOL_SOURCES as lt, ToolSource as p, TOOL_ACTION_SOURCES as Bt, TOOL_ACTION_LABELS as Dt, TOOL_SOURCE_LABELS as Gt } from "../constants/tools.js";
-import { buildAgentMentionItems as Pt, buildCustomToolMentionItems as Ut, restApiMentionItem as zt, configToolMentionItem as Ht, restApiToolName as $t, configToolName as Ft, toolSourceLabel as jt } from "../utils/mentionSerialization.js";
-import { sourceIcon as j, SOURCE_ICONS as W, renderSourceIcon as at } from "../utils/sourceIcons.js";
-import { ConfigToolPanel as Wt } from "./ConfigToolPanel.js";
-import { DRAWER_BODY_STYLE as Yt, DRAWER_HEADER_STYLE as Xt, DrawerHeaderText as Zt } from "./DrawerHeaderText.js";
+import { AGENT_CHAR_LIMITS as Nt } from "../constants/charLimits.js";
+import { CONFIG_TOOL_SOURCES as Dt, ToolSource as p } from "../constants/tools.js";
+import { buildAgentMentionItems as Gt, buildCustomToolMentionItems as Bt, restApiMentionItem as Pt, configToolMentionItem as zt, restApiToolName as Lt, configToolName as Ht, toolSourceLabel as Ut } from "../utils/mentionSerialization.js";
+import { sourceIcon as j, SOURCE_ICONS as lt, renderSourceIcon as at } from "../utils/sourceIcons.js";
+import { buildToolActions as $t } from "../utils/toolActions.js";
+import { ConfigToolPanel as Ft } from "./ConfigToolPanel.js";
+import { DRAWER_BODY_STYLE as jt, DRAWER_HEADER_STYLE as Wt, DrawerHeaderText as Yt } from "./DrawerHeaderText.js";
 import { MentionEditor as ct } from "./MentionEditor.js";
-import { RestApiToolPanel as qt } from "./RestApiToolPanel.js";
-import { SelectableListSection as Jt } from "./SelectableListSection.js";
-import { SideModal as Qt } from "../../side-modal/SideModal.js";
-import { Input as Vt } from "../../input/Input.js";
-import { Toaster as te } from "../../toaster/Toaster.js";
-const ee = 1e3, ut = 1002, dt = (v, f) => {
-  const s = v ?? [];
+import { RestApiToolPanel as Xt } from "./RestApiToolPanel.js";
+import { SelectableListSection as Zt } from "./SelectableListSection.js";
+import { SideModal as qt } from "../../side-modal/SideModal.js";
+import { Input as Jt } from "../../input/Input.js";
+import { Toaster as Qt } from "../../toaster/Toaster.js";
+const Vt = 1e3, W = 1002, ut = (x, f) => {
+  const s = x ?? [];
   return s.some((u) => u.id === f.id) ? s.map((u) => u.id === f.id ? f : u) : [...s, f];
-}, mt = Nt.button`
+}, dt = Kt.button`
 	align-self: flex-start;
 	border: 1px solid ${F.stroke.primary};
 	color: ${F.content.primary};
@@ -34,8 +35,8 @@ const ee = 1e3, ut = 1002, dt = (v, f) => {
 		cursor: default;
 		opacity: 0.6;
 	}
-`, be = ({
-  onClose: v,
+`, To = ({
+  onClose: x,
   onSave: f,
   availableTools: s,
   onImprove: u,
@@ -44,138 +45,131 @@ const ee = 1e3, ut = 1002, dt = (v, f) => {
   title: Z = "Create sub-agent",
   initial: g,
   appLabel: q = "Manifest",
-  charLimits: h = wt
+  charLimits: h = Nt
 }) => {
-  const [k, pt] = r(g?.name ?? ""), [T, x] = r(g?.instructions ?? ""), [b, _] = r(g?.guardrail ?? ""), [M, R] = r(g?.tools ?? []), [m, K] = r(
+  const [M, mt] = r(g?.name ?? ""), [b, A] = r(g?.instructions ?? ""), [T, R] = r(g?.guardrail ?? ""), [O, _] = r(g?.tools ?? []), [m, w] = r(
     g?.configTools ?? []
-  ), [d, L] = r(
+  ), [d, K] = r(
     g?.restApiTools ?? []
-  ), [i, y] = r(null), O = A(0), [J, Q] = r(!1), [ft, N] = r(0), [gt, w] = r(0), [S, V] = r(null), B = Lt(
+  ), [i, y] = r(null), E = v(0), [J, Q] = r(!1), [pt, N] = r(0), [ft, D] = r(0), [I, V] = r(null), G = wt(
     () => [
-      ...Pt(s, [], q),
-      ...Ut(m, d)
+      ...Gt(s, [], q),
+      ...Bt(m, d)
     ],
     [s, q, m, d]
-  ), E = A({}), D = A("instructions"), yt = a((t) => {
-    E.current.instructions = t ?? void 0;
-  }, []), ht = a((t) => {
-    E.current.guardrail = t ?? void 0;
-  }, []), Tt = a(() => {
-    D.current = "instructions";
+  ), k = v({}), B = v("instructions"), gt = a((t) => {
+    k.current.instructions = t ?? void 0;
+  }, []), yt = a((t) => {
+    k.current.guardrail = t ?? void 0;
+  }, []), ht = a(() => {
+    B.current = "instructions";
   }, []), bt = a(() => {
-    D.current = "guardrail";
+    B.current = "guardrail";
   }, []), tt = a(
-    (t, e) => {
-      t === "tool" && R((o) => it(o, e));
+    (t, o) => {
+      t === "tool" && _((e) => it(e, o));
     },
     []
-  ), C = a((t, e) => {
-    (E.current[D.current] ?? E.current.instructions)?.("tool", t, e);
-  }, []), G = a((t) => {
-    O.current += 1, y({
-      key: O.current,
+  ), C = a((t, o) => {
+    (k.current[B.current] ?? k.current.instructions)?.("tool", t, o);
+  }, []), P = a((t) => {
+    E.current += 1, y({
+      key: E.current,
       kind: "restapi",
       initialRest: t
     });
-  }, []), P = a(
-    (t, e) => {
-      O.current += 1, y({
-        key: O.current,
+  }, []), z = a(
+    (t, o) => {
+      E.current += 1, y({
+        key: E.current,
         kind: "config",
         toolKey: t,
-        initialConfig: e
+        initialConfig: o
       });
     },
     []
-  ), St = a(
+  ), Tt = a(
     (t) => {
-      const e = lt[t];
-      e ? P(e) : G();
+      const o = Dt[t];
+      o ? z(o) : P();
     },
-    [P, G]
-  ), Ct = a(
+    [z, P]
+  ), It = a(
     (t) => {
-      const e = !d.some((o) => o.id === t.id);
-      L((o) => dt(o, t)), e && C(t.id, zt(t).label), y(null);
+      const o = !d.some((e) => e.id === t.id);
+      K((e) => ut(e, t)), o && C(t.id, Pt(t).label), y(null);
     },
     [d, C]
-  ), It = a(
+  ), Ct = a(
     (t) => {
-      const e = !m.some((o) => o.id === t.id);
-      K((o) => dt(o, t)), e && C(t.id, Ht(t).label), y(null);
+      const o = !m.some((e) => e.id === t.id);
+      w((e) => ut(e, t)), o && C(t.id, zt(t).label), y(null);
     },
     [m, C]
-  ), [U, z] = r(
+  ), [L, H] = r(
     null
-  ), H = A(null), et = A(0), At = (t) => {
-    const e = s.find((n) => n.tool_id === t)?.display_name ?? d.find((n) => n.id === t)?.name ?? "Tool", o = `{{tool:${t}}}`, l = (n) => n.split(o).join("");
-    H.current = {
-      instructions: T,
-      guardrail: b,
-      tools: M,
+  ), U = v(null), ot = v(0), St = (t) => {
+    const o = s.find((n) => n.tool_id === t)?.display_name ?? d.find((n) => n.id === t)?.name ?? "Tool", e = `{{tool:${t}}}`, l = (n) => n.split(e).join("");
+    U.current = {
+      instructions: b,
+      guardrail: T,
+      tools: O,
       configTools: m,
       restApiTools: d
-    }, x((n) => l(n)), _((n) => l(n)), R((n) => n.filter((I) => I !== t)), K((n) => n.filter((I) => I.id !== t)), L((n) => n.filter((I) => I.id !== t)), N((n) => n + 1), w((n) => n + 1), et.current += 1, z({ id: et.current, message: `Tool "${e}" removed` });
+    }, A((n) => l(n)), R((n) => l(n)), _((n) => n.filter((S) => S !== t)), w((n) => n.filter((S) => S.id !== t)), K((n) => n.filter((S) => S.id !== t)), N((n) => n + 1), D((n) => n + 1), ot.current += 1, H({ id: ot.current, message: `Tool "${o}" removed` });
   }, vt = () => {
-    const t = H.current;
-    t && (x(t.instructions), _(t.guardrail), R(t.tools), K(t.configTools), L(t.restApiTools), N((e) => e + 1), w((e) => e + 1), H.current = null), z(null);
-  }, ot = k.trim().length > 0 && (T.trim().length > 0 || b.trim().length > 0), xt = M.map((t) => {
-    const e = s.find((o) => o.tool_id === t);
-    return e ? {
+    const t = U.current;
+    t && (A(t.instructions), R(t.guardrail), _(t.tools), w(t.configTools), K(t.restApiTools), N((o) => o + 1), D((o) => o + 1), U.current = null), H(null);
+  }, et = M.trim().length > 0 && (b.trim().length > 0 || T.trim().length > 0), xt = O.map((t) => {
+    const o = s.find((e) => e.tool_id === t);
+    return o ? {
       id: t,
-      label: e.display_name,
-      icon: j(e.source ?? p.Manifest)
+      label: o.display_name,
+      icon: j(o.source ?? p.Manifest)
     } : null;
-  }).filter((t) => t !== null), _t = d.map((t) => ({
+  }).filter((t) => t !== null), At = d.map((t) => ({
     id: t.id,
-    label: $t(t),
-    icon: W[p.RestApi],
-    onConfigure: () => G(t)
+    label: Lt(t),
+    icon: lt[p.RestApi],
+    onConfigure: () => P(t)
   })), Rt = m.map((t) => ({
     id: t.id,
-    label: Ft(t),
-    icon: W[t.tool_key === "send_slack_message" ? p.Slack : p.EmailHandover],
-    onConfigure: () => P(t.tool_key, t)
-  })), Ot = [
+    label: Ht(t),
+    icon: lt[t.tool_key === "send_slack_message" ? p.Slack : p.EmailHandover],
+    onConfigure: () => z(t.tool_key, t)
+  })), _t = [
     ...xt,
-    ..._t,
+    ...At,
     ...Rt
-  ], $ = Bt.filter(
-    (t) => {
-      const e = lt[t];
-      return !e || !!X?.[e];
-    }
-  ).map((t) => ({
-    source: t,
-    label: Dt[t] ?? Gt[t],
-    icon: W[t],
-    onSelect: () => St(t)
-  })), nt = i?.kind === "config" && i.toolKey ? X?.[i.toolKey] : void 0, Et = s.map((t) => ({
+  ], $ = $t(
+    X,
+    Tt
+  ), nt = i?.kind === "config" && i.toolKey ? X?.[i.toolKey] : void 0, Et = s.map((t) => ({
     label: t.display_name,
     value: t.tool_id,
     leadingIcon: at(j(t.source ?? p.Manifest)) ?? void 0
   })), kt = (() => {
-    const t = [], e = /* @__PURE__ */ new Map();
-    return s.forEach((o) => {
-      const l = o.source ?? p.Manifest;
-      e.has(l) || (e.set(l, []), t.push(l)), e.get(l)?.push({
-        label: o.display_name,
-        value: o.tool_id,
-        leadingIcon: at(j(o.source ?? p.Manifest)) ?? void 0
+    const t = [], o = /* @__PURE__ */ new Map();
+    return s.forEach((e) => {
+      const l = e.source ?? p.Manifest;
+      o.has(l) || (o.set(l, []), t.push(l)), o.get(l)?.push({
+        label: e.display_name,
+        value: e.tool_id,
+        leadingIcon: at(j(e.source ?? p.Manifest)) ?? void 0
       });
-    }), t.map((o) => ({
-      source: o,
-      label: jt(o),
-      options: e.get(o) ?? []
+    }), t.map((e) => ({
+      source: e,
+      label: Ut(e),
+      options: o.get(e) ?? []
     }));
   })(), Mt = async () => {
-    if (!ot || J)
+    if (!et || J)
       return;
     const t = f({
-      name: k.trim(),
-      instructions: T,
-      guardrail: b,
-      tools: M,
+      name: M.trim(),
+      instructions: b,
+      guardrail: T,
+      tools: O,
       configTools: m,
       restApiTools: d
     });
@@ -188,40 +182,40 @@ const ee = 1e3, ut = 1002, dt = (v, f) => {
       }
     }
   }, st = async (t) => {
-    if (!(!u || S)) {
+    if (!(!u || I)) {
       V(t);
       try {
-        const o = await u(t, t === "instructions" ? T : b);
-        t === "instructions" ? (x(o), N((l) => l + 1)) : (_(o), w((l) => l + 1));
+        const e = await u(t, t === "instructions" ? b : T);
+        t === "instructions" ? (A(e), N((l) => l + 1)) : (R(e), D((l) => l + 1));
       } finally {
         V(null);
       }
     }
   };
-  return /* @__PURE__ */ rt(Kt, { children: [
+  return /* @__PURE__ */ rt(Ot, { children: [
     /* @__PURE__ */ rt(
-      Qt,
+      qt,
       {
         header: Z,
         closeOnEscapeKey: !1,
-        zIndex: ee,
+        zIndex: Vt,
         headerCustomComponent: /* @__PURE__ */ c(
-          Zt,
+          Yt,
           {
             title: Z,
             subtitle: "Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."
           }
         ),
         width: "421px",
-        headerStyle: Xt,
-        bodyStyle: Yt,
-        onClose: v,
+        headerStyle: Wt,
+        bodyStyle: jt,
+        onClose: x,
         saveButtonProps: {
           "data-test": "subagent-save",
           buttonText: "Save",
           buttonType: "primary",
           size: "small",
-          disabled: !ot,
+          disabled: !et,
           isLoading: J,
           onClick: Mt
         },
@@ -230,21 +224,21 @@ const ee = 1e3, ut = 1002, dt = (v, f) => {
           buttonText: "Cancel",
           buttonType: "tertiaryGray",
           size: "small",
-          onClick: v
+          onClick: x
         },
         children: [
           /* @__PURE__ */ c(
-            Vt,
+            Jt,
             {
               "data-test": "subagent-name",
               labelText: "Agent name",
               labelTextBold: !0,
               placeholder: "Enter agent name",
-              value: k,
+              value: M,
               maxCharLimit: h.name,
               maxCharLimitPosition: "TOP",
               maxCharStyle: { fontSize: 12, lineHeight: "16px" },
-              onChangeText: pt
+              onChangeText: mt
             }
           ),
           /* @__PURE__ */ c(
@@ -252,26 +246,26 @@ const ee = 1e3, ut = 1002, dt = (v, f) => {
             {
               "data-test": "subagent-instructions",
               label: "Instructions",
-              value: T,
-              onChange: x,
+              value: b,
+              onChange: A,
               maxLength: h.instructions,
               placeholder: "Write the steps in plain English. Type @ to reference a tool.",
               minHeight: "160px",
-              resetKey: `instr-${ft}`,
-              mentionItems: B,
+              resetKey: `instr-${pt}`,
+              mentionItems: G,
               tools: s,
               toolActions: $,
               onMentionSelect: tt,
-              onFocus: Tt,
-              registerInsert: yt,
+              onFocus: ht,
+              registerInsert: gt,
               action: u ? /* @__PURE__ */ c(
-                mt,
+                dt,
                 {
                   type: "button",
                   "data-test": "subagent-improve-instructions",
-                  disabled: S !== null,
+                  disabled: I !== null,
                   onClick: () => st("instructions"),
-                  children: S === "instructions" ? "Improving…" : "Improve with AI"
+                  children: I === "instructions" ? "Improving…" : "Improve with AI"
                 }
               ) : void 0
             }
@@ -281,64 +275,65 @@ const ee = 1e3, ut = 1002, dt = (v, f) => {
             {
               "data-test": "subagent-guardrail",
               label: "Guardrails",
-              value: b,
-              onChange: _,
+              value: T,
+              onChange: R,
               maxLength: h.guardrail,
               placeholder: "e.g. Never discuss competitor pricing. Type @ to reference a tool.",
               minHeight: "160px",
-              resetKey: `guard-${gt}`,
-              mentionItems: B,
+              resetKey: `guard-${ft}`,
+              mentionItems: G,
               tools: s,
               toolActions: $,
               onMentionSelect: tt,
               onFocus: bt,
-              registerInsert: ht,
+              registerInsert: yt,
               action: u ? /* @__PURE__ */ c(
-                mt,
+                dt,
                 {
                   type: "button",
                   "data-test": "subagent-improve-guardrail",
-                  disabled: S !== null,
+                  disabled: I !== null,
                   onClick: () => st("guardrail"),
-                  children: S === "guardrail" ? "Improving…" : "Improve with AI"
+                  children: I === "guardrail" ? "Improving…" : "Improve with AI"
                 }
               ) : void 0
             }
           ),
           /* @__PURE__ */ c(
-            Jt,
+            Zt,
             {
               title: "Tools this agent can use",
               dataTestPrefix: "subagent-tools",
-              items: Ot,
+              items: _t,
               addableOptions: Et,
               sourceGroups: kt,
-              mentionItems: B,
+              mentionItems: G,
               actionSources: $,
               emptyText: "No tools added yet.",
               onAdd: (t) => {
-                C(t), R((e) => it(e, t));
+                C(t), _((o) => it(o, t));
               },
-              onRemove: At
+              onRemove: St,
+              confirmDelete: { noun: "tool", zIndex: W + 1 }
             }
           )
         ]
       }
     ),
     i?.kind === "restapi" && /* @__PURE__ */ c(
-      qt,
+      Xt,
       {
         initial: i.initialRest,
         charLimits: h,
         onImprove: Y,
         onClose: () => y(null),
-        onSave: Ct,
-        zIndex: ut
+        onSave: It,
+        zIndex: W
       },
       i.key
     ),
     i?.kind === "config" && i.toolKey && nt && /* @__PURE__ */ c(
-      Wt,
+      Ft,
       {
         toolKey: i.toolKey,
         template: nt,
@@ -346,15 +341,15 @@ const ee = 1e3, ut = 1002, dt = (v, f) => {
         charLimits: h,
         onImprove: Y,
         onClose: () => y(null),
-        onSave: It,
-        zIndex: ut
+        onSave: Ct,
+        zIndex: W
       },
       i.key
     ),
-    U && /* @__PURE__ */ c(
-      te,
+    L && /* @__PURE__ */ c(
+      Qt,
       {
-        text: U.message,
+        text: L.message,
         type: "info",
         position: "top-right",
         autoClose: 5e3,
@@ -364,13 +359,13 @@ const ee = 1e3, ut = 1002, dt = (v, f) => {
           showButton: !0,
           onButtonClick: () => (vt(), {})
         },
-        onCloseToast: () => z(null)
+        onCloseToast: () => H(null)
       },
-      U.id
+      L.id
     )
   ] });
 };
 export {
-  be as CreateSubAgentPanel
+  To as CreateSubAgentPanel
 };
 //# sourceMappingURL=CreateSubAgentPanel.js.map