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

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

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