@bikdotai/bik-component-library 0.0.850-tools-beta.0 → 0.0.850

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

@@ -1,29 +1,29 @@
-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 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 Ut, configToolName as Ht, 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) => {
+import { jsxs as le, Fragment as Ne, jsx as c } from "react/jsx-runtime";
+import { useState as i, useRef as y, useMemo as Ge, useCallback as l } from "react";
+import Be from "styled-components";
+import { addUnique as ce } from "../../../utils/arrayUtils.js";
+import { COLORS as W } from "../../../constants/Theme.js";
+import { AGENT_CHAR_LIMITS as Le } from "../constants/charLimits.js";
+import { CONFIG_TOOL_SOURCES as Pe, ToolSource as u } from "../constants/tools.js";
+import { buildAgentMentionItems as ze, buildCustomToolMentionItems as He, restApiMentionItem as Ue, configToolMentionItem as $e, restApiToolName as Fe, configToolName as je, toolSourceLabel as We } from "../utils/mentionSerialization.js";
+import { sourceIcon as Y, SOURCE_ICONS as ue, renderSourceIcon as de } from "../utils/sourceIcons.js";
+import { buildToolActions as Ye } from "../utils/toolActions.js";
+import { ConfigToolPanel as Xe } from "./ConfigToolPanel.js";
+import { DRAWER_BODY_STYLE as Ze, DRAWER_HEADER_STYLE as qe, DrawerHeaderText as Je } from "./DrawerHeaderText.js";
+import { MentionEditor as me } from "./MentionEditor.js";
+import { RestApiToolPanel as Qe } from "./RestApiToolPanel.js";
+import { SelectableListSection as Ve } from "./SelectableListSection.js";
+import { SideModal as et } from "../../side-modal/SideModal.js";
+import { Input as tt } from "../../input/Input.js";
+import { Toaster as ot } from "../../toaster/Toaster.js";
+const nt = 1e3, X = 1002, pe = (x, g) => {
   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`
+  return s.some((d) => d.id === g.id) ? s.map((d) => d.id === g.id ? g : d) : [...s, g];
+}, ge = Be.button`
 	align-self: flex-start;
-	border: 1px solid ${F.stroke.primary};
-	color: ${F.content.primary};
-	background: ${F.surface.standard};
+	border: 1px solid ${W.stroke.primary};
+	color: ${W.content.primary};
+	background: ${W.surface.standard};
 	border-radius: 8px;
 	padding: 6px 12px;
 	font-size: 13px;
@@ -35,193 +35,207 @@ const te = 1e3, W = 1002, dt = (x, f) => {
 		cursor: default;
 		opacity: 0.6;
 	}
-`, be = ({
+`, St = ({
   onClose: x,
-  onSave: f,
+  onSave: g,
   availableTools: s,
-  onImprove: u,
-  onImproveToolInstructions: Y,
-  configToolTemplates: X,
-  title: Z = "Create sub-agent",
-  initial: g,
-  appLabel: q = "Manifest",
-  charLimits: T = Dt
+  onImprove: d,
+  onImproveToolInstructions: Z,
+  configToolTemplates: q,
+  title: J = "Create sub-agent",
+  initial: f,
+  existingNames: fe = [],
+  appLabel: Q = "Manifest",
+  charLimits: b = Le
 }) => {
-  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), k = h(0), [J, Q] = r(!1), [ft, N] = r(0), [gt, D] = r(0), [S, V] = r(null), G = Kt(
+  const [E, he] = i(f?.name ?? ""), [T, A] = i(f?.instructions ?? ""), [C, R] = i(f?.guardrail ?? ""), [M, _] = i(f?.tools ?? []), [p, O] = i(
+    f?.configTools ?? []
+  ), [m, D] = i(
+    f?.restApiTools ?? []
+  ), [a, h] = i(null), w = y(0), [V, ee] = i(!1), [ye, K] = i(0), [be, N] = i(0), [I, te] = i(null), G = Ge(
     () => [
-      ...Bt(s, [], q),
-      ...Pt(m, d)
+      ...ze(s, [], Q),
+      ...He(p, m)
     ],
-    [s, q, m, d]
-  ), E = h({}), B = h("instructions"), yt = a((t) => {
-    E.current.instructions = t ?? void 0;
-  }, []), ht = a((t) => {
-    E.current.guardrail = t ?? void 0;
-  }, []), Tt = a(() => {
+    [s, Q, p, m]
+  ), k = y({}), B = y("instructions"), Te = l((e) => {
+    k.current.instructions = e ?? void 0;
+  }, []), Ce = l((e) => {
+    k.current.guardrail = e ?? void 0;
+  }, []), Ie = l(() => {
     B.current = "instructions";
-  }, []), bt = a(() => {
+  }, []), Se = l(() => {
     B.current = "guardrail";
-  }, []), tt = h(/* @__PURE__ */ new Set());
-  tt.current = new Set(
-    [...m, ...d].map((t) => t.id)
+  }, []), oe = y(/* @__PURE__ */ new Set());
+  oe.current = new Set(
+    [...p, ...m].map((e) => e.id)
   );
-  const et = a(
-    (t, e) => {
-      t === "tool" && !tt.current.has(e) && _((o) => lt(o, e));
+  const ne = l(
+    (e, t) => {
+      e === "tool" && !oe.current.has(t) && _((o) => ce(o, t));
     },
     []
-  ), C = a((t, e) => {
-    (E.current[B.current] ?? E.current.instructions)?.("tool", t, e);
-  }, []), P = a((t) => {
-    k.current += 1, y({
-      key: k.current,
+  ), S = l(
+    (e, t, o) => {
+      (k.current[B.current] ?? k.current.instructions)?.("tool", e, t, o);
+    },
+    []
+  ), L = l((e) => {
+    w.current += 1, h({
+      key: w.current,
       kind: "restapi",
-      initialRest: t
+      initialRest: e
     });
-  }, []), z = a(
-    (t, e) => {
-      k.current += 1, y({
-        key: k.current,
+  }, []), P = l(
+    (e, t) => {
+      w.current += 1, h({
+        key: w.current,
         kind: "config",
-        toolKey: t,
-        initialConfig: e
+        toolKey: e,
+        initialConfig: t
       });
     },
     []
-  ), It = a(
-    (t) => {
-      const e = Gt[t];
-      e ? z(e) : P();
+  ), ve = l(
+    (e) => {
+      const t = Pe[e];
+      t ? P(t) : L();
     },
-    [z, P]
-  ), St = a(
-    (t) => {
-      const e = !d.some((o) => o.id === t.id);
-      K((o) => dt(o, t)), e && C(t.id, zt(t).label), y(null);
+    [P, L]
+  ), xe = l(
+    (e) => {
+      const t = !m.some((o) => o.id === e.id);
+      D((o) => pe(o, e)), t && S(
+        e.id,
+        Ue(e).label,
+        u.RestApi
+      ), h(null);
     },
-    [d, C]
-  ), Ct = a(
-    (t) => {
-      const e = !m.some((o) => o.id === t.id);
-      O((o) => dt(o, t)), e && C(t.id, Lt(t).label), y(null);
+    [m, S]
+  ), Ae = l(
+    (e) => {
+      const t = !p.some((o) => o.id === e.id);
+      if (O((o) => pe(o, e)), t) {
+        const o = e.tool_key === "send_slack_message" ? u.Slack : u.EmailHandover;
+        S(e.id, $e(e).label, o);
+      }
+      h(null);
     },
-    [m, C]
-  ), [L, U] = r(
+    [p, S]
+  ), [z, H] = i(
     null
-  ), H = 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("");
-    H.current = {
-      instructions: b,
-      guardrail: I,
-      tools: w,
-      configTools: m,
-      restApiTools: d
-    }, 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, U({ id: ot.current, message: `Tool "${e}" removed` });
-  }, xt = () => {
-    const t = H.current;
-    t && (A(t.instructions), R(t.guardrail), _(t.tools), O(t.configTools), K(t.restApiTools), N((e) => e + 1), D((e) => e + 1), H.current = null), U(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: e.display_name,
-      icon: j(e.source ?? p.Manifest)
+  ), U = y(null), se = y(0), Re = (e) => {
+    const t = s.find((n) => n.tool_id === e)?.display_name ?? m.find((n) => n.id === e)?.name ?? "Tool", o = `{{tool:${e}}}`, r = (n) => n.split(o).join("");
+    U.current = {
+      instructions: T,
+      guardrail: C,
+      tools: M,
+      configTools: p,
+      restApiTools: m
+    }, A((n) => r(n)), R((n) => r(n)), _((n) => n.filter((v) => v !== e)), O((n) => n.filter((v) => v.id !== e)), D((n) => n.filter((v) => v.id !== e)), K((n) => n + 1), N((n) => n + 1), se.current += 1, H({ id: se.current, message: `Tool "${t}" removed` });
+  }, _e = () => {
+    const e = U.current;
+    e && (A(e.instructions), R(e.guardrail), _(e.tools), O(e.configTools), D(e.restApiTools), K((t) => t + 1), N((t) => t + 1), U.current = null), H(null);
+  }, $ = E.trim(), F = $.length > 0 && fe.some(
+    (e) => e.trim().toLowerCase() === $.toLowerCase()
+  ), re = $.length > 0 && !F && (T.trim().length > 0 || C.trim().length > 0), we = M.map((e) => {
+    const t = s.find((o) => o.tool_id === e);
+    return t ? {
+      id: e,
+      label: t.display_name,
+      icon: Y(t.source ?? u.Manifest)
     } : null;
-  }).filter((t) => t !== null), Rt = d.map((t) => ({
-    id: t.id,
-    label: Ut(t),
-    icon: at[p.RestApi],
-    onConfigure: () => P(t)
-  })), _t = m.map((t) => ({
-    id: t.id,
-    label: Ht(t),
-    icon: at[t.tool_key === "send_slack_message" ? p.Slack : p.EmailHandover],
-    onConfigure: () => z(t.tool_key, t)
-  })), kt = [
-    ...At,
-    ...Rt,
-    ..._t
-  ], $ = Ft(
-    X,
-    It
-  ), st = i?.kind === "config" && i.toolKey ? X?.[i.toolKey] : void 0, Et = s.map((t) => ({
-    label: t.display_name,
-    value: t.tool_id,
-    leadingIcon: ct(j(t.source ?? p.Manifest)) ?? void 0
-  })), Mt = (() => {
-    const t = [], e = /* @__PURE__ */ new Map();
+  }).filter((e) => e !== null), ke = m.map((e) => ({
+    id: e.id,
+    label: Fe(e),
+    icon: ue[u.RestApi],
+    onConfigure: () => L(e)
+  })), Ee = p.map((e) => ({
+    id: e.id,
+    label: je(e),
+    icon: ue[e.tool_key === "send_slack_message" ? u.Slack : u.EmailHandover],
+    onConfigure: () => P(e.tool_key, e)
+  })), Me = [
+    ...we,
+    ...ke,
+    ...Ee
+  ], j = Ye(
+    q,
+    ve
+  ), ie = a?.kind === "config" && a.toolKey ? q?.[a.toolKey] : void 0, Oe = s.map((e) => ({
+    label: e.display_name,
+    value: e.tool_id,
+    leadingIcon: de(Y(e.source ?? u.Manifest)) ?? void 0
+  })), De = (() => {
+    const e = [], t = /* @__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({
+      const r = o.source ?? u.Manifest;
+      t.has(r) || (t.set(r, []), e.push(r)), t.get(r)?.push({
         label: o.display_name,
         value: o.tool_id,
-        leadingIcon: ct(j(o.source ?? p.Manifest)) ?? void 0
+        leadingIcon: de(Y(o.source ?? u.Manifest)) ?? void 0
       });
-    }), t.map((o) => ({
+    }), e.map((o) => ({
       source: o,
-      label: $t(o),
-      options: e.get(o) ?? []
+      label: We(o),
+      options: t.get(o) ?? []
     }));
-  })(), wt = async () => {
-    if (!nt || J)
+  })(), Ke = async () => {
+    if (!re || V)
       return;
-    const t = f({
-      name: M.trim(),
-      instructions: b,
-      guardrail: I,
-      tools: w,
-      configTools: m,
-      restApiTools: d
+    const e = g({
+      name: E.trim(),
+      instructions: T,
+      guardrail: C,
+      tools: M,
+      configTools: p,
+      restApiTools: m
     });
-    if (t && typeof t.then == "function") {
-      Q(!0);
+    if (e && typeof e.then == "function") {
+      ee(!0);
       try {
-        await t;
+        await e;
       } finally {
-        Q(!1);
+        ee(!1);
       }
     }
-  }, rt = async (t) => {
-    if (!(!u || S)) {
-      V(t);
+  }, ae = async (e) => {
+    if (!(!d || I)) {
+      te(e);
       try {
-        const o = await u(t, t === "instructions" ? b : I);
-        t === "instructions" ? (A(o), N((l) => l + 1)) : (R(o), D((l) => l + 1));
+        const o = await d(e, e === "instructions" ? T : C);
+        e === "instructions" ? (A(o), K((r) => r + 1)) : (R(o), N((r) => r + 1));
       } finally {
-        V(null);
+        te(null);
       }
     }
   };
-  return /* @__PURE__ */ it(Ot, { children: [
-    /* @__PURE__ */ it(
-      Jt,
+  return /* @__PURE__ */ le(Ne, { children: [
+    /* @__PURE__ */ le(
+      et,
       {
-        header: Z,
+        header: J,
         closeOnEscapeKey: !1,
-        zIndex: te,
+        zIndex: nt,
         headerCustomComponent: /* @__PURE__ */ c(
-          Xt,
+          Je,
           {
-            title: Z,
+            title: J,
             subtitle: "Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."
           }
         ),
         width: "421px",
-        headerStyle: Yt,
-        bodyStyle: Wt,
+        headerStyle: qe,
+        bodyStyle: Ze,
         onClose: x,
         saveButtonProps: {
           "data-test": "subagent-save",
           buttonText: "Save",
           buttonType: "primary",
           size: "small",
-          disabled: !nt,
-          isLoading: J,
-          onClick: wt
+          disabled: !re,
+          isLoading: V,
+          onClick: Ke
         },
         cancelButtonProps: {
           "data-test": "subagent-cancel",
@@ -232,129 +246,131 @@ const te = 1e3, W = 1002, dt = (x, f) => {
         },
         children: [
           /* @__PURE__ */ c(
-            Qt,
+            tt,
             {
               "data-test": "subagent-name",
               labelText: "Agent name",
               labelTextBold: !0,
               placeholder: "Enter agent name",
-              value: M,
-              maxCharLimit: T.name,
+              value: E,
+              maxCharLimit: b.name,
               maxCharLimitPosition: "TOP",
               maxCharStyle: { fontSize: 12, lineHeight: "16px" },
-              onChangeText: pt
+              state: F ? "invalid" : void 0,
+              errorMessage: F ? "A sub-agent with this name already exists" : void 0,
+              onChangeText: he
             }
           ),
           /* @__PURE__ */ c(
-            ut,
+            me,
             {
               "data-test": "subagent-instructions",
               label: "Instructions",
-              value: b,
+              value: T,
               onChange: A,
-              maxLength: T.instructions,
-              placeholder: "Write the steps in plain English. Type @ to reference a tool.",
+              maxLength: b.instructions,
+              placeholder: "Write the steps in plain English. The agent will follow them exactly. The more specific you are, the better it performs.",
               minHeight: "160px",
-              resetKey: `instr-${ft}`,
+              resetKey: `instr-${ye}`,
               mentionItems: G,
               tools: s,
-              toolActions: $,
-              onMentionSelect: et,
-              onFocus: Tt,
-              registerInsert: yt,
-              action: u ? /* @__PURE__ */ c(
-                mt,
+              toolActions: j,
+              onMentionSelect: ne,
+              onFocus: Ie,
+              registerInsert: Te,
+              action: d ? /* @__PURE__ */ c(
+                ge,
                 {
                   type: "button",
                   "data-test": "subagent-improve-instructions",
-                  disabled: S !== null,
-                  onClick: () => rt("instructions"),
-                  children: S === "instructions" ? "Improving…" : "Improve with AI"
+                  disabled: I !== null,
+                  onClick: () => ae("instructions"),
+                  children: I === "instructions" ? "Improving…" : "Improve with AI"
                 }
               ) : void 0
             }
           ),
           /* @__PURE__ */ c(
-            ut,
+            me,
             {
               "data-test": "subagent-guardrail",
               label: "Guardrails",
-              value: I,
+              value: C,
               onChange: R,
-              maxLength: T.guardrail,
-              placeholder: "e.g. Never discuss competitor pricing. Type @ to reference a tool.",
+              maxLength: b.guardrail,
+              placeholder: "e.g. Never discuss competitor pricing. Always stay within the cancellation policy. Do not process refunds above ₹10,000 without human approval.",
               minHeight: "160px",
-              resetKey: `guard-${gt}`,
+              resetKey: `guard-${be}`,
               mentionItems: G,
               tools: s,
-              toolActions: $,
-              onMentionSelect: et,
-              onFocus: bt,
-              registerInsert: ht,
-              action: u ? /* @__PURE__ */ c(
-                mt,
+              toolActions: j,
+              onMentionSelect: ne,
+              onFocus: Se,
+              registerInsert: Ce,
+              action: d ? /* @__PURE__ */ c(
+                ge,
                 {
                   type: "button",
                   "data-test": "subagent-improve-guardrail",
-                  disabled: S !== null,
-                  onClick: () => rt("guardrail"),
-                  children: S === "guardrail" ? "Improving…" : "Improve with AI"
+                  disabled: I !== null,
+                  onClick: () => ae("guardrail"),
+                  children: I === "guardrail" ? "Improving…" : "Improve with AI"
                 }
               ) : void 0
             }
           ),
           /* @__PURE__ */ c(
-            qt,
+            Ve,
             {
               title: "Tools this agent can use",
               dataTestPrefix: "subagent-tools",
-              items: kt,
-              addableOptions: Et,
-              sourceGroups: Mt,
+              items: Me,
+              addableOptions: Oe,
+              sourceGroups: De,
               mentionItems: G,
-              actionSources: $,
+              actionSources: j,
               emptyText: "No tools added yet.",
               pickerOpensUp: !0,
-              onAdd: (t) => {
-                C(t), _((e) => lt(e, t));
+              onAdd: (e) => {
+                S(e), _((t) => ce(t, e));
               },
-              onRemove: vt,
-              confirmDelete: { noun: "tool", zIndex: W + 1 }
+              onRemove: Re,
+              confirmDelete: { noun: "tool", zIndex: X + 1 }
             }
           )
         ]
       }
     ),
-    i?.kind === "restapi" && /* @__PURE__ */ c(
-      Zt,
+    a?.kind === "restapi" && /* @__PURE__ */ c(
+      Qe,
       {
-        initial: i.initialRest,
-        charLimits: T,
-        onImprove: Y,
-        onClose: () => y(null),
-        onSave: St,
-        zIndex: W
+        initial: a.initialRest,
+        charLimits: b,
+        onImprove: Z,
+        onClose: () => h(null),
+        onSave: xe,
+        zIndex: X
       },
-      i.key
+      a.key
     ),
-    i?.kind === "config" && i.toolKey && st && /* @__PURE__ */ c(
-      jt,
+    a?.kind === "config" && a.toolKey && ie && /* @__PURE__ */ c(
+      Xe,
       {
-        toolKey: i.toolKey,
-        template: st,
-        initial: i.initialConfig,
-        charLimits: T,
-        onImprove: Y,
-        onClose: () => y(null),
-        onSave: Ct,
-        zIndex: W
+        toolKey: a.toolKey,
+        template: ie,
+        initial: a.initialConfig,
+        charLimits: b,
+        onImprove: Z,
+        onClose: () => h(null),
+        onSave: Ae,
+        zIndex: X
       },
-      i.key
+      a.key
     ),
-    L && /* @__PURE__ */ c(
-      Vt,
+    z && /* @__PURE__ */ c(
+      ot,
       {
-        text: L.message,
+        text: z.message,
         type: "info",
         position: "top-right",
         autoClose: 5e3,
@@ -362,15 +378,15 @@ const te = 1e3, W = 1002, dt = (x, f) => {
         buttonProps: {
           buttonText: "Undo",
           showButton: !0,
-          onButtonClick: () => (xt(), {})
+          onButtonClick: () => (_e(), {})
         },
-        onCloseToast: () => U(null)
+        onCloseToast: () => H(null)
       },
-      L.id
+      z.id
     )
   ] });
 };
 export {
-  be as CreateSubAgentPanel
+  St as CreateSubAgentPanel
 };
 //# sourceMappingURL=CreateSubAgentPanel.js.map