@bikdotai/bik-component-library 0.0.865-beta.4 → 0.0.865-beta.6

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

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