@bikdotai/bik-component-library 0.0.849-beta.2 → 0.0.849

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

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