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

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

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