@bikdotai/bik-component-library 0.0.853 → 0.0.855

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

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