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

package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js

@@ -1,199 +1,214 @@
-import { jsxs as d, jsx as i, Fragment as De } from "react/jsx-runtime";
-import { useState as k, useRef as Z, useCallback as s, useEffect as U } from "react";
-import { TitleSmall as ee, BodyCaption as He, BodySecondary as oe } from "../../TypographyStyle.js";
-import { COLORS as A } from "../../../constants/Theme.js";
-import { Step3Root as Le, Step3Grid as Ke, SectionBodyWrap as te, Step3Divider as qe, SideSection as ne, SideSectionHeader as Be } from "../AgentBuilder.styled.js";
-import { ConfigToolPanel as Fe } from "../components/ConfigToolPanel.js";
-import { CreateSubAgentPanel as Ge } from "../components/CreateSubAgentPanel.js";
-import { MentionField as ie } from "../components/MentionField.js";
-import { RequireVerificationModal as Ue } from "../components/RequireVerificationModal.js";
-import { RestApiToolPanel as We } from "../components/RestApiToolPanel.js";
-import { SelectableListSection as le } from "../components/SelectableListSection.js";
-import { StepSectionHeader as ze } from "../components/StepSectionHeader.js";
-import { STEP_DEFINITIONS as Ve } from "../constants/steps.js";
-import { CONFIG_TOOL_SOURCES as je, ToolSource as S } from "../constants/tools.js";
-import { useAgentBuilderContext as $e } from "../context/AgentBuilderContext.js";
-import { restApiMentionItem as Je, configToolMentionItem as Qe, restApiToolName as Xe, configToolName as Ye, toolSourceLabel as Ze, buildAgentMentionItems as ae, buildCustomToolMentionItems as eo, appTypeLabel as se } from "../utils/mentionSerialization.js";
-import { sourceIcon as fe, SOURCE_ICONS as re, renderSourceIcon as oo } from "../utils/sourceIcons.js";
-import { buildToolActions as to } from "../utils/toolActions.js";
-import no from "../../../icons/Informational/Common UI/Shield.js";
-import { Switch as io } from "../../switch/Switch.js";
-import { Dropdown as ce } from "../../dropdown/Dropdown.js";
-import { unwrapDropdownValue as de } from "../../dropdown/utils.js";
-const lo = (t) => oo(fe(t)) ?? void 0, ue = (t) => ({
+import { jsxs as d, jsx as i, Fragment as Le } from "react/jsx-runtime";
+import { useState as k, useRef as ee, useCallback as s, useEffect as U } from "react";
+import { TitleSmall as oe, BodyCaption as Ke, BodySecondary as te } from "../../TypographyStyle.js";
+import { COLORS as I } from "../../../constants/Theme.js";
+import { Step3Root as qe, Step3Grid as Be, SectionBodyWrap as ne, Step3Divider as Fe, SideSection as ie, SideSectionHeader as Ge } from "../AgentBuilder.styled.js";
+import { ConfigToolPanel as Ue } from "../components/ConfigToolPanel.js";
+import { CreateSubAgentPanel as We } from "../components/CreateSubAgentPanel.js";
+import { MentionField as le } from "../components/MentionField.js";
+import { RequireVerificationModal as ze } from "../components/RequireVerificationModal.js";
+import { RestApiToolPanel as Ve } from "../components/RestApiToolPanel.js";
+import { SelectableListSection as ae } from "../components/SelectableListSection.js";
+import { StepSectionHeader as je } from "../components/StepSectionHeader.js";
+import { STEP_DEFINITIONS as $e } from "../constants/steps.js";
+import { ToolSource as u, CONFIG_TOOL_SOURCES as Je } from "../constants/tools.js";
+import { useAgentBuilderContext as Qe } from "../context/AgentBuilderContext.js";
+import { restApiMentionItem as Xe, configToolMentionItem as Ye, restApiToolName as Ze, configToolName as eo, toolSourceLabel as oo, buildAgentMentionItems as se, buildCustomToolMentionItems as to, appTypeLabel as re } from "../utils/mentionSerialization.js";
+import { sourceIcon as ge, SOURCE_ICONS as ce, renderSourceIcon as no } from "../utils/sourceIcons.js";
+import { buildToolActions as io } from "../utils/toolActions.js";
+import lo from "../../../icons/Informational/Common UI/Shield.js";
+import { Dropdown as de } from "../../dropdown/Dropdown.js";
+import { unwrapDropdownValue as ue } from "../../dropdown/utils.js";
+import { Tooltip as ao } from "../../tooltips/Tooltip.js";
+import { Switch as so } from "../../switch/Switch.js";
+const ro = (t) => no(ge(t)) ?? void 0, pe = (t) => ({
   label: t.display_name,
   value: t.tool_id,
-  leadingIcon: lo(t.source ?? S.Manifest)
-}), pe = Ve[2], W = [
+  leadingIcon: ro(t.source ?? u.Manifest)
+}), me = $e[2], W = [
   { label: "OTP to phone", value: "phone_otp" },
   { label: "OTP to email", value: "email_otp" }
-], me = (t, l) => {
-  const y = t ?? [];
-  return y.some((u) => u.id === l.id) ? y.map((u) => u.id === l.id ? l : u) : [...y, l];
-}, ko = () => {
+], fe = (t, l) => {
+  const T = t ?? [];
+  return T.some((p) => p.id === l.id) ? T.map((p) => p.id === l.id ? l : p) : [...T, l];
+}, No = () => {
   const {
     value: t,
     patch: l,
-    updateField: y,
-    addReference: u,
+    updateField: T,
+    addReference: p,
     removeReference: z,
     availableTools: r,
-    availableSubAgents: ge,
-    availableModels: M,
-    configToolTemplates: x,
+    availableSubAgents: he,
+    availableModels: x,
+    configToolTemplates: M,
     applicationType: V,
-    charLimits: T,
+    charLimits: v,
     insertMention: c,
-    onCreateSubAgent: m,
-    onFetchSubAgent: I,
+    onCreateSubAgent: g,
+    onFetchSubAgent: C,
     onUpdateSubAgent: E,
-    onImproveSubAgent: he,
+    onImproveSubAgent: be,
     onImproveToolInstructions: N,
     registerSubAgentCreator: P,
-    registerToolActionHandler: D,
+    registerToolActionHandler: H,
     integrationStatus: j,
     onConnectIntegration: $
-  } = $e(), [p, C] = k(null), w = Z(0), [a, f] = k(null), O = Z(0), H = s((e) => {
-    O.current += 1, f({
-      key: O.current,
+  } = Qe(), [m, w] = k(null), _ = ee(0), [a, h] = k(null), R = ee(0), D = s((e) => {
+    R.current += 1, h({
+      key: R.current,
       kind: "restapi",
       initialRest: e
     });
   }, []), L = s(
     (e, o) => {
-      O.current += 1, f({
-        key: O.current,
+      R.current += 1, h({
+        key: R.current,
         kind: "config",
         toolKey: e,
         initialConfig: o
       });
     },
     []
-  ), be = s(
+  ), ye = s(
     (e) => {
       const o = !(t.restApiTools ?? []).some((n) => n.id === e.id);
-      l({ restApiTools: me(t.restApiTools, e) }), o && c("tool", e.id, Je(e).label), f(null);
+      l({ restApiTools: fe(t.restApiTools, e) }), o && c(
+        "tool",
+        e.id,
+        Xe(e).label,
+        u.RestApi
+      ), h(null);
     },
     [l, t.restApiTools, c]
   ), Se = s(
     (e) => {
       const o = !(t.configTools ?? []).some((n) => n.id === e.id);
-      l({ configTools: me(t.configTools, e) }), o && c("tool", e.id, Qe(e).label), f(null);
+      if (l({ configTools: fe(t.configTools, e) }), o) {
+        const n = e.tool_key === "send_slack_message" ? u.Slack : u.EmailHandover;
+        c(
+          "tool",
+          e.id,
+          Ye(e).label,
+          n
+        );
+      }
+      h(null);
     },
     [l, t.configTools, c]
   ), K = s(
     (e) => {
-      const o = je[e];
-      o ? L(o) : H();
+      const o = Je[e];
+      o ? L(o) : D();
     },
-    [L, H]
+    [L, D]
   );
-  U(() => (D(K), () => D(null)), [D, K]);
-  const [ye, J] = k([]), R = /* @__PURE__ */ new Map();
-  ge.forEach((e) => R.set(e.id, e)), ye.forEach((e) => R.set(e.id, e));
-  const Q = Array.from(R.values()), q = s(() => {
-    w.current += 1, C({ key: w.current, title: "Create sub-agent" });
+  U(() => (H(K), () => H(null)), [H, K]);
+  const [Te, J] = k([]), A = /* @__PURE__ */ new Map();
+  he.forEach((e) => A.set(e.id, e)), Te.forEach((e) => A.set(e.id, e));
+  const Q = Array.from(A.values()), q = s(() => {
+    _.current += 1, w({ key: _.current, title: "Create sub-agent" });
   }, []);
   U(() => {
-    if (m)
+    if (g)
       return P(q), () => P(null);
-  }, [P, q, m]);
-  const Te = s(
+  }, [P, q, g]);
+  const ve = s(
     async (e) => {
-      if (!I)
+      if (!C)
         return;
-      const o = await I(e);
-      w.current += 1, C({
-        key: w.current,
+      const o = await C(e);
+      _.current += 1, w({
+        key: _.current,
         title: "Edit sub-agent",
         editingId: e,
         initial: o
       });
     },
-    [I]
-  ), ve = s(
+    [C]
+  ), Ae = s(
     async (e) => {
-      if (p?.editingId) {
+      if (m?.editingId) {
         if (E) {
-          const o = await E(p.editingId, e);
+          const o = await E(m.editingId, e);
           J((n) => [
-            ...n.filter((b) => b.id !== o.id),
+            ...n.filter((S) => S.id !== o.id),
             o
           ]);
         }
-      } else if (m) {
-        const o = await m(e);
+      } else if (g) {
+        const o = await g(e);
         J((n) => [...n, o]), l({ subagents: [...t.subagents, o.id] }), c("subagent", o.id, `sub-agent: ${o.name}`);
       }
-      C(null);
+      w(null);
     },
     [
-      p,
-      E,
       m,
+      E,
+      g,
       l,
       t.subagents,
       c
     ]
-  ), g = t.tools.some(
+  ), f = t.tools.some(
     (e) => r.find((o) => o.tool_id === e)?.auth_required
-  ), h = t.authentication?.enabled ?? !1, v = t.authentication?.type ?? "email_otp";
+  ), b = t.authentication?.enabled ?? !1, y = t.authentication?.type ?? "email_otp";
   U(() => {
-    g && !h && l({ authentication: { enabled: !0, type: v } });
-  }, [g, h, v, l]);
-  const [_, B] = k(null), F = s(
+    f && !b && l({ authentication: { enabled: !0, type: y } });
+  }, [f, b, y, l]);
+  const [O, B] = k(null), F = s(
     (e) => {
-      c("tool", e), u("tool", e);
+      c("tool", e), p("tool", e);
     },
-    [c, u]
-  ), Ae = s(
+    [c, p]
+  ), Ie = s(
     (e) => {
-      if (r.find((n) => n.tool_id === e)?.auth_required && !h) {
+      if (r.find((n) => n.tool_id === e)?.auth_required && !b) {
         B(e);
         return;
       }
       F(e);
     },
-    [r, h, F]
-  ), Ie = t.tools.map((e) => {
+    [r, b, F]
+  ), Ce = t.tools.map((e) => {
     const o = r.find((n) => n.tool_id === e);
     return o ? {
       id: e,
       label: o.display_name,
-      icon: fe(o.source ?? S.Manifest),
+      icon: ge(o.source ?? u.Manifest),
       authRequired: o.auth_required
     } : null;
-  }).filter((e) => e !== null), Ce = (t.restApiTools ?? []).map(
+  }).filter((e) => e !== null), we = (t.restApiTools ?? []).map(
     (e) => ({
       id: e.id,
-      label: Xe(e),
-      icon: re[S.RestApi],
-      onConfigure: () => H(e)
+      label: Ze(e),
+      icon: ce[u.RestApi],
+      onConfigure: () => D(e)
     })
-  ), we = (t.configTools ?? []).map(
+  ), _e = (t.configTools ?? []).map(
     (e) => ({
       id: e.id,
-      label: Ye(e),
-      icon: re[e.tool_key === "send_slack_message" ? S.Slack : S.EmailHandover],
+      label: eo(e),
+      icon: ce[e.tool_key === "send_slack_message" ? u.Slack : u.EmailHandover],
       onConfigure: () => L(e.tool_key, e)
     })
-  ), Oe = [
-    ...Ie,
+  ), Re = [
     ...Ce,
-    ...we
-  ], Re = to(
-    x,
+    ...we,
+    ..._e
+  ], Oe = io(
+    M,
     K,
     j,
     $
-  ), _e = r.map(ue), ke = (() => {
+  ), ke = r.map(pe), xe = (() => {
     const e = [], o = /* @__PURE__ */ new Map();
     return r.forEach((n) => {
-      const b = n.source ?? S.Manifest;
-      o.has(b) || (o.set(b, []), e.push(b)), o.get(b)?.push(ue(n));
+      const S = n.source ?? u.Manifest;
+      o.has(S) || (o.set(S, []), e.push(S)), o.get(S)?.push(pe(n));
     }), e.map((n) => ({
       source: n,
-      label: Ze(n),
+      label: oo(n),
       options: o.get(n) ?? [],
       // Not connected → the source button opens the connect flow instead of
       // its tool list (see SelectableListSection / onConnectIntegration).
@@ -201,123 +216,133 @@ const lo = (t) => oo(fe(t)) ?? void 0, ue = (t) => ({
       onConnect: () => $?.(n)
     }));
   })(), Me = t.subagents.map((e) => {
-    const o = R.get(e);
+    const o = A.get(e);
     return o ? { id: e, label: o.name } : null;
-  }).filter((e) => e !== null), xe = Q.map((e) => ({
+  }).filter((e) => e !== null), Ee = Q.map((e) => ({
     label: e.name,
     value: e.id
-  })), X = se(V), Ee = [
-    ...ae(r, [], X),
-    ...eo(t.configTools, t.restApiTools)
-  ], Ne = ae(
+  })), X = re(V), Ne = [
+    ...se(r, [], X),
+    ...to(t.configTools, t.restApiTools)
+  ], Pe = se(
     [],
     Q,
     X
-  ), Pe = M.map((e) => ({
+  ), He = x.map((e) => ({
     label: e.label,
     value: e.value,
     selected: e.value === t.model
-  })), G = M.find((e) => e.value === t.model), Y = a?.kind === "config" && a.toolKey ? x?.[a.toolKey] : void 0;
-  return /* @__PURE__ */ d(Le, { children: [
-    /* @__PURE__ */ i(ze, { title: pe.title, helper: pe.helper }),
-    /* @__PURE__ */ d(Ke, { $grow: !0, children: [
-      /* @__PURE__ */ d(te, { children: [
+  })), G = x.find((e) => e.value === t.model), Y = a?.kind === "config" && a.toolKey ? M?.[a.toolKey] : void 0, Z = /* @__PURE__ */ i(
+    so,
+    {
+      "data-test": "agent-auth-toggle",
+      value: b || f,
+      disabled: f,
+      onValueChange: async (e) => {
+        l({ authentication: { enabled: e, type: y } });
+      }
+    }
+  ), De = f ? /* @__PURE__ */ i(
+    ao,
+    {
+      body: "Remove tools that requires customer verification to change this setting.",
+      placement: "bottom",
+      children: /* @__PURE__ */ i("span", { style: { display: "flex" }, children: Z })
+    }
+  ) : Z;
+  return /* @__PURE__ */ d(qe, { children: [
+    /* @__PURE__ */ i(je, { title: me.title, helper: me.helper }),
+    /* @__PURE__ */ d(Be, { $grow: !0, children: [
+      /* @__PURE__ */ d(ne, { children: [
         /* @__PURE__ */ i(
-          ie,
+          le,
           {
             fieldKey: "instructions",
             "data-test": "agent-instructions",
             label: "Instructions",
-            maxLength: T.instructions,
+            maxLength: v.instructions,
             placeholder: "Write the steps in plain English. The agent will follow them exactly. The more specific you are, the better it performs.",
             minHeight: "200px"
           }
         ),
         /* @__PURE__ */ i(
-          ie,
+          le,
           {
             fieldKey: "guardrail",
             "data-test": "agent-guardrail",
             label: "Guardrails",
-            maxLength: T.guardrail,
+            maxLength: v.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: "140px"
           }
         )
       ] }),
-      /* @__PURE__ */ i(qe, {}),
-      /* @__PURE__ */ d(te, { children: [
+      /* @__PURE__ */ i(Fe, {}),
+      /* @__PURE__ */ d(ne, { children: [
         /* @__PURE__ */ i(
-          le,
+          ae,
           {
             title: "Tools",
             helper: "Actions this agent can take while responding.",
             dataTestPrefix: "agent-tools",
-            items: Oe,
-            addableOptions: _e,
-            sourceGroups: ke,
-            mentionItems: Ee,
-            actionSources: Re,
+            items: Re,
+            addableOptions: ke,
+            sourceGroups: xe,
+            mentionItems: Ne,
+            actionSources: Oe,
             emptyText: "No tools added yet.",
-            onAdd: Ae,
+            onAdd: Ie,
             onRemove: (e) => z("tool", e),
             confirmDelete: { noun: "tool" }
           }
         ),
         /* @__PURE__ */ i(
-          le,
+          ae,
           {
             title: "Sub-agents",
             helper: "Other agents this agent can hand off the conversation to.",
             dataTestPrefix: "agent-subagents",
             items: Me,
-            addableOptions: xe,
-            mentionItems: Ne,
+            addableOptions: Ee,
+            mentionItems: Pe,
             emptyText: "No sub-agents added yet.",
             onAdd: (e) => {
-              c("subagent", e), u("subagent", e);
+              c("subagent", e), p("subagent", e);
             },
             onRemove: (e) => z("subagent", e),
             confirmDelete: { noun: "sub-agent" },
-            onConfigure: I ? Te : void 0,
-            createOption: m ? { label: "Create new", onSelect: q } : void 0
+            onConfigure: C ? ve : void 0,
+            createOption: g ? { label: "Create new", onSelect: q } : void 0
           }
         ),
-        /* @__PURE__ */ d(ne, { children: [
-          /* @__PURE__ */ d(Be, { children: [
+        /* @__PURE__ */ d(ie, { children: [
+          /* @__PURE__ */ d(Ge, { children: [
             /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-              /* @__PURE__ */ i(no, { size: 20 }),
-              /* @__PURE__ */ i(ee, { color: A.content.primary, children: "Require customer verification" })
+              /* @__PURE__ */ i(lo, { size: 20 }),
+              /* @__PURE__ */ i(oe, { color: I.content.primary, children: "Require customer verification" })
             ] }),
-            /* @__PURE__ */ i(
-              io,
-              {
-                "data-test": "agent-auth-toggle",
-                value: h || g,
-                disabled: g,
-                onValueChange: async (e) => {
-                  l({ authentication: { enabled: e, type: v } });
-                }
-              }
-            )
+            De
           ] }),
-          /* @__PURE__ */ i(He, { color: A.content.secondary, children: g ? "Required — this agent uses a tool that accesses customer order details." : "Customers must verify their identity before this agent responds." }),
-          (h || g) && /* @__PURE__ */ d(De, { children: [
-            /* @__PURE__ */ i(oe, { color: A.content.primary, children: "Select verification method" }),
+          /* @__PURE__ */ i(Ke, { color: I.content.secondary, children: f ? "Required — this agent uses a tool that accesses customer order details." : "Customers must verify their identity before this agent responds." }),
+          (b || f) && /* @__PURE__ */ d(Le, { children: [
+            /* @__PURE__ */ i(te, { color: I.content.primary, children: "Select verification method" }),
             /* @__PURE__ */ i(
-              ce,
+              de,
               {
                 "data-test": "agent-auth-method",
                 size: "small",
                 width: "100%",
                 dropdownWidth: "328px",
                 placeHolder: "Select verification method",
-                options: W,
+                options: W.map((e) => ({
+                  ...e,
+                  selected: e.value === y
+                })),
                 defaultOptions: [
-                  W.find((e) => e.value === v) ?? W[0]
+                  W.find((e) => e.value === y) ?? W[0]
                 ],
                 onSelect: (e) => {
-                  const o = de(e);
+                  const o = ue(e);
                   o && l({
                     authentication: {
                       enabled: !0,
@@ -329,18 +354,18 @@ const lo = (t) => oo(fe(t)) ?? void 0, ue = (t) => ({
             )
           ] })
         ] }),
-        M.length > 0 && /* @__PURE__ */ d(ne, { children: [
-          /* @__PURE__ */ i(ee, { color: A.content.primary, children: "Advanced settings" }),
-          /* @__PURE__ */ i(oe, { color: A.content.primary, children: "Select AI model" }),
+        x.length > 0 && /* @__PURE__ */ d(ie, { children: [
+          /* @__PURE__ */ i(oe, { color: I.content.primary, children: "Advanced settings" }),
+          /* @__PURE__ */ i(te, { color: I.content.primary, children: "Select AI model" }),
           /* @__PURE__ */ i(
-            ce,
+            de,
             {
               "data-test": "agent-model",
               size: "small",
               width: "100%",
               dropdownWidth: "328px",
               placeHolder: "Select model",
-              options: Pe,
+              options: He,
               defaultOptions: G ? [
                 {
                   label: G.label,
@@ -348,69 +373,70 @@ const lo = (t) => oo(fe(t)) ?? void 0, ue = (t) => ({
                 }
               ] : void 0,
               onSelect: (e) => {
-                const o = de(e);
-                o && y("model", o);
+                const o = ue(e);
+                o && T("model", o);
               }
             }
           )
         ] })
       ] })
     ] }),
-    p && /* @__PURE__ */ i(
-      Ge,
+    m && /* @__PURE__ */ i(
+      We,
       {
-        title: p.title,
-        initial: p.initial,
+        title: m.title,
+        initial: m.initial,
+        existingNames: t.subagents.filter((e) => e !== m.editingId).map((e) => A.get(e)?.name).filter((e) => !!e),
         availableTools: r,
-        configToolTemplates: x,
-        appLabel: se(V),
-        charLimits: T,
-        onImprove: he,
+        configToolTemplates: M,
+        appLabel: re(V),
+        charLimits: v,
+        onImprove: be,
         onImproveToolInstructions: N,
-        onClose: () => C(null),
-        onSave: ve
+        onClose: () => w(null),
+        onSave: Ae
       },
-      p.key
+      m.key
     ),
     a?.kind === "restapi" && /* @__PURE__ */ i(
-      We,
+      Ve,
       {
         initial: a.initialRest,
-        charLimits: T,
+        charLimits: v,
         existingNames: (t.restApiTools ?? []).filter((e) => e.id !== a.initialRest?.id).map((e) => e.name),
         onImprove: N,
-        onClose: () => f(null),
-        onSave: be
+        onClose: () => h(null),
+        onSave: ye
       },
       a.key
     ),
     a?.kind === "config" && a.toolKey && Y && /* @__PURE__ */ i(
-      Fe,
+      Ue,
       {
         toolKey: a.toolKey,
         template: Y,
         initial: a.initialConfig,
-        charLimits: T,
+        charLimits: v,
         onImprove: N,
-        onClose: () => f(null),
+        onClose: () => h(null),
         onSave: Se
       },
       a.key
     ),
     /* @__PURE__ */ i(
-      Ue,
+      ze,
       {
-        open: _ !== null,
-        toolLabel: r.find((e) => e.tool_id === _)?.display_name ?? "This tool",
+        open: O !== null,
+        toolLabel: r.find((e) => e.tool_id === O)?.display_name ?? "This tool",
         onCancel: () => B(null),
         onConfirm: () => {
-          l({ authentication: { enabled: !0, type: v } }), _ && F(_), B(null);
+          l({ authentication: { enabled: !0, type: y } }), O && F(O), B(null);
         }
       }
     )
   ] });
 };
 export {
-  ko as Step3HowItResponds
+  No as Step3HowItResponds
 };
 //# sourceMappingURL=Step3HowItResponds.js.map