@bikdotai/bik-component-library 0.0.866 → 0.0.867

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

@@ -1,12 +1,12 @@
-import { jsxs as de, Fragment as Le, jsx as c } from "react/jsx-runtime";
-import { useState as i, useRef as y, useMemo as Pe, useCallback as a } from "react";
-import ze from "styled-components";
+import { jsxs as de, Fragment as Pe, jsx as c } from "react/jsx-runtime";
+import { useState as i, useRef as T, useMemo as ze, useCallback as a } from "react";
+import He from "styled-components";
 import { addUnique as me } from "../../../utils/arrayUtils.js";
-import { COLORS as X } from "../../../constants/Theme.js";
-import { AGENT_CHAR_LIMITS as He } from "../constants/charLimits.js";
-import { CONFIG_TOOL_SOURCES as Ue, ToolSource as u } from "../constants/tools.js";
-import { buildAgentMentionItems as $e, buildCustomToolMentionItems as Fe, restApiMentionItem as je, configToolMentionItem as We, restApiToolName as qe, configToolName as Ye, toolSourceLabel as Xe } from "../utils/mentionSerialization.js";
-import { sourceIcon as Z, SOURCE_ICONS as pe, renderSourceIcon as fe } from "../utils/sourceIcons.js";
+import { COLORS as Z } from "../../../constants/Theme.js";
+import { AGENT_CHAR_LIMITS as Ue } from "../constants/charLimits.js";
+import { CONFIG_TOOL_SOURCES as $e, ToolSource as u } from "../constants/tools.js";
+import { buildAgentMentionItems as Le, buildCustomToolMentionItems as Fe, restApiMentionItem as je, configToolMentionItem as We, restApiToolName as qe, configToolName as Ye, toolSourceLabel as Xe } from "../utils/mentionSerialization.js";
+import { sourceIcon as J, SOURCE_ICONS as pe, renderSourceIcon as fe } from "../utils/sourceIcons.js";
 import { buildToolActions as Ze } from "../utils/toolActions.js";
 import { ConfigToolPanel as Je } from "./ConfigToolPanel.js";
 import { DRAWER_BODY_STYLE as Qe, DRAWER_HEADER_STYLE as Ve, DrawerHeaderText as et } from "./DrawerHeaderText.js";
@@ -16,14 +16,14 @@ import { SelectableListSection as ot } from "./SelectableListSection.js";
 import { SideModal as nt } from "../../side-modal/SideModal.js";
 import { Input as st } from "../../input/Input.js";
 import { Toaster as rt } from "../../toaster/Toaster.js";
-const it = 1e3, J = 1002, he = (x, f) => {
-  const s = x ?? [];
+const it = 1e3, Q = 1002, he = (A, f) => {
+  const s = A ?? [];
   return s.some((d) => d.id === f.id) ? s.map((d) => d.id === f.id ? f : d) : [...s, f];
-}, ye = ze.button`
+}, ye = He.button`
 	align-self: flex-start;
-	border: 1px solid ${X.stroke.primary};
-	color: ${X.content.primary};
-	background: ${X.surface.standard};
+	border: 1px solid ${Z.stroke.primary};
+	color: ${Z.content.primary};
+	background: ${Z.surface.standard};
 	border-radius: 8px;
 	padding: 6px 12px;
 	font-size: 13px;
@@ -36,63 +36,63 @@ const it = 1e3, J = 1002, he = (x, f) => {
 		opacity: 0.6;
 	}
 `, At = ({
-  onClose: x,
+  onClose: A,
   onSave: f,
   availableTools: s,
   onImprove: d,
-  onImproveToolInstructions: Q,
-  configToolTemplates: V,
-  integrationStatus: A,
-  onConnectIntegration: R,
-  title: ee = "Create sub-agent",
+  onImproveToolInstructions: V,
+  configToolTemplates: ee,
+  integrationStatus: R,
+  onConnectIntegration: _,
+  title: te = "Create sub-agent",
   initial: g,
   existingNames: Te = [],
-  appLabel: te = "Manifest",
-  charLimits: T = He,
-  variablesData: _
+  appLabel: h = "Manifest",
+  charLimits: b = Ue,
+  variablesData: w
 }) => {
-  const [K, be] = i(g?.name ?? ""), [b, w] = i(g?.instructions ?? ""), [C, k] = i(g?.guardrail ?? ""), [N, E] = i(g?.tools ?? []), [p, D] = i(
+  const [N, be] = i(g?.name ?? ""), [C, k] = i(g?.instructions ?? ""), [I, E] = i(g?.guardrail ?? ""), [D, M] = i(g?.tools ?? []), [p, B] = i(
     g?.configTools ?? []
-  ), [m, B] = i(
+  ), [m, G] = i(
     g?.restApiTools ?? []
-  ), [l, h] = i(null), M = y(0), [oe, ne] = i(!1), [Ce, G] = i(0), [Ie, L] = i(0), [I, se] = i(null), P = Pe(
+  ), [l, y] = i(null), O = T(0), [oe, ne] = i(!1), [Ce, P] = i(0), [Ie, z] = i(0), [S, se] = i(null), H = ze(
     () => [
-      ...$e(s, [], te),
+      ...Le(s, [], h),
       ...Fe(p, m)
     ],
-    [s, te, p, m]
-  ), O = y({}), z = y("instructions"), Se = a((e) => {
-    O.current.instructions = e ?? void 0;
+    [s, h, p, m]
+  ), K = T({}), U = T("instructions"), Se = a((e) => {
+    K.current.instructions = e ?? void 0;
   }, []), ve = a((e) => {
-    O.current.guardrail = e ?? void 0;
+    K.current.guardrail = e ?? void 0;
   }, []), xe = a(() => {
-    z.current = "instructions";
+    U.current = "instructions";
   }, []), Ae = a(() => {
-    z.current = "guardrail";
-  }, []), re = y(/* @__PURE__ */ new Set());
+    U.current = "guardrail";
+  }, []), re = T(/* @__PURE__ */ new Set());
   re.current = new Set(
     [...p, ...m].map((e) => e.id)
   );
   const ie = a(
     (e, t) => {
-      e === "tool" && !re.current.has(t) && E((o) => me(o, t));
+      e === "tool" && !re.current.has(t) && M((o) => me(o, t));
     },
     []
-  ), S = a(
+  ), v = a(
     (e, t, o) => {
-      (O.current[z.current] ?? O.current.instructions)?.("tool", e, t, o);
+      (K.current[U.current] ?? K.current.instructions)?.("tool", e, t, o);
     },
     []
-  ), H = a((e) => {
-    M.current += 1, h({
-      key: M.current,
+  ), $ = a((e) => {
+    O.current += 1, y({
+      key: O.current,
       kind: "restapi",
       initialRest: e
     });
-  }, []), U = a(
+  }, []), L = a(
     (e, t) => {
-      M.current += 1, h({
-        key: M.current,
+      O.current += 1, y({
+        key: O.current,
         kind: "config",
         toolKey: e,
         initialConfig: t
@@ -101,52 +101,52 @@ const it = 1e3, J = 1002, he = (x, f) => {
     []
   ), Re = a(
     (e) => {
-      const t = Ue[e];
-      t ? U(t) : H();
+      const t = $e[e];
+      t ? L(t) : $();
     },
-    [U, H]
+    [L, $]
   ), _e = a(
     (e) => {
       const t = !m.some((o) => o.id === e.id);
-      B((o) => he(o, e)), t && S(
+      G((o) => he(o, e)), t && v(
         e.id,
         je(e).label,
         u.RestApi
-      ), h(null);
+      ), y(null);
     },
-    [m, S]
+    [m, v]
   ), we = a(
     (e) => {
       const t = !p.some((o) => o.id === e.id);
-      if (D((o) => he(o, e)), t) {
+      if (B((o) => he(o, e)), t) {
         const o = e.tool_key === "send_slack_message" ? u.Slack : u.EmailHandover;
-        S(e.id, We(e).label, o);
+        v(e.id, We(e).label, o);
       }
-      h(null);
+      y(null);
     },
-    [p, S]
-  ), [$, F] = i(
+    [p, v]
+  ), [F, j] = i(
     null
-  ), j = y(null), le = y(0), ke = (e) => {
+  ), W = T(null), le = T(0), ke = (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("");
-    j.current = {
-      instructions: b,
-      guardrail: C,
-      tools: N,
+    W.current = {
+      instructions: C,
+      guardrail: I,
+      tools: D,
       configTools: p,
       restApiTools: m
-    }, w((n) => r(n)), k((n) => r(n)), E((n) => n.filter((v) => v !== e)), D((n) => n.filter((v) => v.id !== e)), B((n) => n.filter((v) => v.id !== e)), G((n) => n + 1), L((n) => n + 1), le.current += 1, F({ id: le.current, message: `Tool "${t}" removed` });
+    }, k((n) => r(n)), E((n) => r(n)), M((n) => n.filter((x) => x !== e)), B((n) => n.filter((x) => x.id !== e)), G((n) => n.filter((x) => x.id !== e)), P((n) => n + 1), z((n) => n + 1), le.current += 1, j({ id: le.current, message: `Tool "${t}" removed` });
   }, Ee = () => {
-    const e = j.current;
-    e && (w(e.instructions), k(e.guardrail), E(e.tools), D(e.configTools), B(e.restApiTools), G((t) => t + 1), L((t) => t + 1), j.current = null), F(null);
-  }, W = K.trim(), q = W.length > 0 && Te.some(
-    (e) => e.trim().toLowerCase() === W.toLowerCase()
-  ), ae = W.length > 0 && !q && (b.trim().length > 0 || C.trim().length > 0), Me = N.map((e) => {
+    const e = W.current;
+    e && (k(e.instructions), E(e.guardrail), M(e.tools), B(e.configTools), G(e.restApiTools), P((t) => t + 1), z((t) => t + 1), W.current = null), j(null);
+  }, q = N.trim(), Y = q.length > 0 && Te.some(
+    (e) => e.trim().toLowerCase() === q.toLowerCase()
+  ), ae = q.length > 0 && !Y && (C.trim().length > 0 || I.trim().length > 0), Me = D.map((e) => {
     const t = s.find((o) => o.tool_id === e);
     return t ? {
       id: e,
       label: t.display_name,
-      icon: Z(t.source ?? u.Manifest),
+      icon: J(t.source ?? u.Manifest),
       // Shield flags a tool that needs customer verification, same as
       // the main builder's Step 3 tool rows.
       authRequired: t.auth_required
@@ -155,25 +155,25 @@ const it = 1e3, J = 1002, he = (x, f) => {
     id: e.id,
     label: qe(e),
     icon: pe[u.RestApi],
-    onConfigure: () => H(e)
+    onConfigure: () => $(e)
   })), Ke = p.map((e) => ({
     id: e.id,
     label: Ye(e),
     icon: pe[e.tool_key === "send_slack_message" ? u.Slack : u.EmailHandover],
-    onConfigure: () => U(e.tool_key, e)
+    onConfigure: () => L(e.tool_key, e)
   })), Ne = [
     ...Me,
     ...Oe,
     ...Ke
-  ], Y = Ze(
-    V,
+  ], X = Ze(
+    ee,
     Re,
-    A,
-    R
-  ), ce = l?.kind === "config" && l.toolKey ? V?.[l.toolKey] : void 0, De = s.map((e) => ({
+    R,
+    _
+  ), ce = l?.kind === "config" && l.toolKey ? ee?.[l.toolKey] : void 0, De = s.map((e) => ({
     label: e.display_name,
     value: e.tool_id,
-    leadingIcon: fe(Z(e.source ?? u.Manifest)) ?? void 0
+    leadingIcon: fe(J(e.source ?? u.Manifest)) ?? void 0
   })), Be = (() => {
     const e = [], t = /* @__PURE__ */ new Map();
     return s.forEach((o) => {
@@ -181,25 +181,25 @@ const it = 1e3, J = 1002, he = (x, f) => {
       t.has(r) || (t.set(r, []), e.push(r)), t.get(r)?.push({
         label: o.display_name,
         value: o.tool_id,
-        leadingIcon: fe(Z(o.source ?? u.Manifest)) ?? void 0
+        leadingIcon: fe(J(o.source ?? u.Manifest)) ?? void 0
       });
     }), e.map((o) => ({
       source: o,
-      label: Xe(o),
+      label: Xe(o, h),
       options: t.get(o) ?? [],
       // Not connected → the source button opens the connect flow instead of
       // its tool list (mirrors Step 3's tool section).
-      connected: A?.[o],
-      onConnect: () => R?.(o)
+      connected: R?.[o],
+      onConnect: () => _?.(o)
     }));
   })(), Ge = async () => {
     if (!ae || oe)
       return;
     const e = f({
-      name: K.trim(),
-      instructions: b,
-      guardrail: C,
-      tools: N,
+      name: N.trim(),
+      instructions: C,
+      guardrail: I,
+      tools: D,
       configTools: p,
       restApiTools: m
     });
@@ -212,34 +212,34 @@ const it = 1e3, J = 1002, he = (x, f) => {
       }
     }
   }, ue = async (e) => {
-    if (!(!d || I)) {
+    if (!(!d || S)) {
       se(e);
       try {
-        const o = await d(e, e === "instructions" ? b : C);
-        e === "instructions" ? (w(o), G((r) => r + 1)) : (k(o), L((r) => r + 1));
+        const o = await d(e, e === "instructions" ? C : I);
+        e === "instructions" ? (k(o), P((r) => r + 1)) : (E(o), z((r) => r + 1));
       } finally {
         se(null);
       }
     }
   };
-  return /* @__PURE__ */ de(Le, { children: [
+  return /* @__PURE__ */ de(Pe, { children: [
     /* @__PURE__ */ de(
       nt,
       {
-        header: ee,
+        header: te,
         closeOnEscapeKey: !1,
         zIndex: it,
         headerCustomComponent: /* @__PURE__ */ c(
           et,
           {
-            title: ee,
+            title: te,
             subtitle: "Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."
           }
         ),
         width: "421px",
         headerStyle: Ve,
         bodyStyle: Qe,
-        onClose: x,
+        onClose: A,
         saveButtonProps: {
           "data-test": "subagent-save",
           buttonText: "Save",
@@ -254,7 +254,7 @@ const it = 1e3, J = 1002, he = (x, f) => {
           buttonText: "Cancel",
           buttonType: "tertiaryGray",
           size: "small",
-          onClick: x
+          onClick: A
         },
         children: [
           /* @__PURE__ */ c(
@@ -264,12 +264,12 @@ const it = 1e3, J = 1002, he = (x, f) => {
               labelText: "Agent name",
               labelTextBold: !0,
               placeholder: "Enter agent name",
-              value: K,
-              maxCharLimit: T.name,
+              value: N,
+              maxCharLimit: b.name,
               maxCharLimitPosition: "TOP",
               maxCharStyle: { fontSize: 12, lineHeight: "16px" },
-              state: q ? "invalid" : void 0,
-              errorMessage: q ? "A sub-agent with this name already exists" : void 0,
+              state: Y ? "invalid" : void 0,
+              errorMessage: Y ? "A sub-agent with this name already exists" : void 0,
               onChangeText: be
             }
           ),
@@ -278,19 +278,20 @@ const it = 1e3, J = 1002, he = (x, f) => {
             {
               "data-test": "subagent-instructions",
               label: "Instructions",
-              value: b,
-              onChange: w,
-              maxLength: T.instructions,
+              value: C,
+              onChange: k,
+              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-${Ce}`,
-              mentionItems: P,
+              mentionItems: H,
               tools: s,
-              toolActions: Y,
-              variablesData: _,
+              toolActions: X,
+              variablesData: w,
               addDataButton: !0,
-              integrationStatus: A,
-              onConnectIntegration: R,
+              integrationStatus: R,
+              appLabel: h,
+              onConnectIntegration: _,
               onMentionSelect: ie,
               onFocus: xe,
               registerInsert: Se,
@@ -299,9 +300,9 @@ const it = 1e3, J = 1002, he = (x, f) => {
                 {
                   type: "button",
                   "data-test": "subagent-improve-instructions",
-                  disabled: I !== null,
+                  disabled: S !== null,
                   onClick: () => ue("instructions"),
-                  children: I === "instructions" ? "Improving…" : "Improve with AI"
+                  children: S === "instructions" ? "Improving…" : "Improve with AI"
                 }
               ) : void 0
             }
@@ -311,19 +312,20 @@ const it = 1e3, J = 1002, he = (x, f) => {
             {
               "data-test": "subagent-guardrail",
               label: "Guardrails",
-              value: C,
-              onChange: k,
-              maxLength: T.guardrail,
+              value: I,
+              onChange: E,
+              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-${Ie}`,
-              mentionItems: P,
+              mentionItems: H,
               tools: s,
-              toolActions: Y,
-              variablesData: _,
+              toolActions: X,
+              variablesData: w,
               addDataButton: !0,
-              integrationStatus: A,
-              onConnectIntegration: R,
+              integrationStatus: R,
+              appLabel: h,
+              onConnectIntegration: _,
               onMentionSelect: ie,
               onFocus: Ae,
               registerInsert: ve,
@@ -332,9 +334,9 @@ const it = 1e3, J = 1002, he = (x, f) => {
                 {
                   type: "button",
                   "data-test": "subagent-improve-guardrail",
-                  disabled: I !== null,
+                  disabled: S !== null,
                   onClick: () => ue("guardrail"),
-                  children: I === "guardrail" ? "Improving…" : "Improve with AI"
+                  children: S === "guardrail" ? "Improving…" : "Improve with AI"
                 }
               ) : void 0
             }
@@ -347,15 +349,16 @@ const it = 1e3, J = 1002, he = (x, f) => {
               items: Ne,
               addableOptions: De,
               sourceGroups: Be,
-              mentionItems: P,
-              actionSources: Y,
+              mentionItems: H,
+              actionSources: X,
               emptyText: "No tools added yet.",
+              appLabel: h,
               pickerOpensUp: !0,
               onAdd: (e) => {
-                S(e), E((t) => me(t, e));
+                v(e), M((t) => me(t, e));
               },
               onRemove: ke,
-              confirmDelete: { noun: "tool", zIndex: J + 1 }
+              confirmDelete: { noun: "tool", zIndex: Q + 1 }
             }
           )
         ]
@@ -365,12 +368,12 @@ const it = 1e3, J = 1002, he = (x, f) => {
       tt,
       {
         initial: l.initialRest,
-        charLimits: T,
-        variablesData: _,
-        onImprove: Q,
-        onClose: () => h(null),
+        charLimits: b,
+        variablesData: w,
+        onImprove: V,
+        onClose: () => y(null),
         onSave: _e,
-        zIndex: J
+        zIndex: Q
       },
       l.key
     ),
@@ -380,19 +383,19 @@ const it = 1e3, J = 1002, he = (x, f) => {
         toolKey: l.toolKey,
         template: ce,
         initial: l.initialConfig,
-        charLimits: T,
-        variablesData: _,
-        onImprove: Q,
-        onClose: () => h(null),
+        charLimits: b,
+        variablesData: w,
+        onImprove: V,
+        onClose: () => y(null),
         onSave: we,
-        zIndex: J
+        zIndex: Q
       },
       l.key
     ),
-    $ && /* @__PURE__ */ c(
+    F && /* @__PURE__ */ c(
       rt,
       {
-        text: $.message,
+        text: F.message,
         type: "info",
         position: "top-right",
         autoClose: 5e3,
@@ -402,9 +405,9 @@ const it = 1e3, J = 1002, he = (x, f) => {
           showButton: !0,
           onButtonClick: () => (Ee(), {})
         },
-        onCloseToast: () => F(null)
+        onCloseToast: () => j(null)
       },
-      $.id
+      F.id
     )
   ] });
 };