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

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

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