@bikdotai/bik-component-library 0.0.840 → 0.0.841-beta.1

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

@@ -1,332 +1,416 @@
-import { jsxs as T, jsx as l } from "react/jsx-runtime";
-import { useState as N, useRef as W, useCallback as r, useEffect as $ } from "react";
-import { TitleSmall as z } from "../../TypographyStyle.js";
-import { COLORS as V } from "../../../constants/Theme.js";
-import { Step3Root as Ie, Step3Grid as Ce, SectionBodyWrap as q, Step3Divider as we, SideSection as ke } from "../AgentBuilder.styled.js";
-import { ConfigToolPanel as Oe } from "../components/ConfigToolPanel.js";
-import { CreateSubAgentPanel as Re } from "../components/CreateSubAgentPanel.js";
-import { MentionField as J } from "../components/MentionField.js";
-import { RestApiToolPanel as Me } from "../components/RestApiToolPanel.js";
-import { SelectableListSection as Q } from "../components/SelectableListSection.js";
-import { StepSectionHeader as Ee } from "../components/StepSectionHeader.js";
-import { STEP_DEFINITIONS as _e } from "../constants/steps.js";
-import { CONFIG_TOOL_SOURCES as xe, ToolSource as g } from "../constants/tools.js";
-import { useAgentBuilderContext as Ke } from "../context/AgentBuilderContext.js";
-import { restApiMentionItem as Le, configToolMentionItem as Ne, restApiToolName as De, configToolName as Pe, toolSourceLabel as He, buildAgentMentionItems as X, buildCustomToolMentionItems as Fe, appTypeLabel as Y } from "../utils/mentionSerialization.js";
-import { sourceIcon as ne, SOURCE_ICONS as Z, renderSourceIcon as Ge } from "../utils/sourceIcons.js";
-import { buildToolActions as Be } from "../utils/toolActions.js";
-import { Dropdown as Ue } from "../../dropdown/Dropdown.js";
-import { unwrapDropdownValue as je } from "../../dropdown/utils.js";
-const We = (t) => Ge(ne(t)) ?? void 0, ee = (t) => ({
+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) => ({
   label: t.display_name,
   value: t.tool_id,
-  leadingIcon: We(t.source ?? g.Manifest)
-}), oe = _e[2], te = (t, i) => {
-  const f = t ?? [];
-  return f.some((c) => c.id === i.id) ? f.map((c) => c.id === i.id ? i : c) : [...f, i];
-}, uo = () => {
+  leadingIcon: lo(t.source ?? S.Manifest)
+}), pe = Ve[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 = () => {
   const {
     value: t,
-    patch: i,
-    updateField: f,
-    addReference: c,
-    removeReference: D,
-    availableTools: b,
-    availableSubAgents: le,
-    availableModels: C,
-    configToolTemplates: w,
-    applicationType: P,
-    charLimits: S,
-    insertMention: a,
-    onCreateSubAgent: u,
-    onFetchSubAgent: h,
-    onUpdateSubAgent: k,
-    onImproveSubAgent: ie,
-    onImproveToolInstructions: O,
-    registerSubAgentCreator: R,
-    registerToolActionHandler: M,
-    integrationStatus: H,
-    onConnectIntegration: F
-  } = Ke(), [d, A] = N(null), v = W(0), [s, p] = N(null), y = W(0), E = r((e) => {
-    y.current += 1, p({
-      key: y.current,
+    patch: l,
+    updateField: y,
+    addReference: u,
+    removeReference: z,
+    availableTools: r,
+    availableSubAgents: ge,
+    availableModels: M,
+    configToolTemplates: x,
+    applicationType: V,
+    charLimits: T,
+    insertMention: c,
+    onCreateSubAgent: m,
+    onFetchSubAgent: I,
+    onUpdateSubAgent: E,
+    onImproveSubAgent: he,
+    onImproveToolInstructions: N,
+    registerSubAgentCreator: P,
+    registerToolActionHandler: D,
+    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,
       kind: "restapi",
       initialRest: e
     });
-  }, []), _ = r(
+  }, []), L = s(
     (e, o) => {
-      y.current += 1, p({
-        key: y.current,
+      O.current += 1, f({
+        key: O.current,
         kind: "config",
         toolKey: e,
         initialConfig: o
       });
     },
     []
-  ), se = r(
+  ), be = s(
     (e) => {
       const o = !(t.restApiTools ?? []).some((n) => n.id === e.id);
-      i({ restApiTools: te(t.restApiTools, e) }), o && a("tool", e.id, Le(e).label), p(null);
+      l({ restApiTools: me(t.restApiTools, e) }), o && c("tool", e.id, Je(e).label), f(null);
     },
-    [i, t.restApiTools, a]
-  ), ae = r(
+    [l, t.restApiTools, c]
+  ), Se = s(
     (e) => {
       const o = !(t.configTools ?? []).some((n) => n.id === e.id);
-      i({ configTools: te(t.configTools, e) }), o && a("tool", e.id, Ne(e).label), p(null);
+      l({ configTools: me(t.configTools, e) }), o && c("tool", e.id, Qe(e).label), f(null);
     },
-    [i, t.configTools, a]
-  ), x = r(
+    [l, t.configTools, c]
+  ), K = s(
     (e) => {
-      const o = xe[e];
-      o ? _(o) : E();
+      const o = je[e];
+      o ? L(o) : H();
     },
-    [_, E]
+    [L, H]
   );
-  $(() => (M(x), () => M(null)), [M, x]);
-  const [re, G] = N([]), I = /* @__PURE__ */ new Map();
-  le.forEach((e) => I.set(e.id, e)), re.forEach((e) => I.set(e.id, e));
-  const B = Array.from(I.values()), K = r(() => {
-    v.current += 1, A({ key: v.current, title: "Create sub-agent" });
+  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" });
   }, []);
-  $(() => {
-    if (u)
-      return R(K), () => R(null);
-  }, [R, K, u]);
-  const ce = r(
+  U(() => {
+    if (m)
+      return P(q), () => P(null);
+  }, [P, q, m]);
+  const Te = s(
     async (e) => {
-      if (!h)
+      if (!I)
         return;
-      const o = await h(e);
-      v.current += 1, A({
-        key: v.current,
+      const o = await I(e);
+      w.current += 1, C({
+        key: w.current,
         title: "Edit sub-agent",
         editingId: e,
         initial: o
       });
     },
-    [h]
-  ), de = r(
+    [I]
+  ), ve = s(
     async (e) => {
-      if (d?.editingId) {
-        if (k) {
-          const o = await k(d.editingId, e);
-          G((n) => [
-            ...n.filter((m) => m.id !== o.id),
+      if (p?.editingId) {
+        if (E) {
+          const o = await E(p.editingId, e);
+          J((n) => [
+            ...n.filter((b) => b.id !== o.id),
             o
           ]);
         }
-      } else if (u) {
-        const o = await u(e);
-        G((n) => [...n, o]), i({ subagents: [...t.subagents, o.id] }), a("subagent", o.id, `sub-agent: ${o.name}`);
+      } 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}`);
       }
-      A(null);
+      C(null);
     },
     [
-      d,
-      k,
-      u,
-      i,
+      p,
+      E,
+      m,
+      l,
       t.subagents,
-      a
+      c
     ]
-  ), ue = t.tools.map((e) => {
-    const o = b.find((n) => n.tool_id === e);
+  ), g = t.tools.some(
+    (e) => r.find((o) => o.tool_id === e)?.auth_required
+  ), h = t.authentication?.enabled ?? !1, v = t.authentication?.type ?? "email_otp";
+  U(() => {
+    g && !h && l({ authentication: { enabled: !0, type: v } });
+  }, [g, h, v, l]);
+  const [_, B] = k(null), F = s(
+    (e) => {
+      c("tool", e), u("tool", e);
+    },
+    [c, u]
+  ), Ae = s(
+    (e) => {
+      if (r.find((n) => n.tool_id === e)?.auth_required && !h) {
+        B(e);
+        return;
+      }
+      F(e);
+    },
+    [r, h, F]
+  ), Ie = t.tools.map((e) => {
+    const o = r.find((n) => n.tool_id === e);
     return o ? {
       id: e,
       label: o.display_name,
-      icon: ne(o.source ?? g.Manifest)
+      icon: fe(o.source ?? S.Manifest),
+      authRequired: o.auth_required
     } : null;
-  }).filter((e) => e !== null), pe = (t.restApiTools ?? []).map(
+  }).filter((e) => e !== null), Ce = (t.restApiTools ?? []).map(
     (e) => ({
       id: e.id,
-      label: De(e),
-      icon: Z[g.RestApi],
-      onConfigure: () => E(e)
+      label: Xe(e),
+      icon: re[S.RestApi],
+      onConfigure: () => H(e)
     })
-  ), me = (t.configTools ?? []).map(
+  ), we = (t.configTools ?? []).map(
     (e) => ({
       id: e.id,
-      label: Pe(e),
-      icon: Z[e.tool_key === "send_slack_message" ? g.Slack : g.EmailHandover],
-      onConfigure: () => _(e.tool_key, e)
+      label: Ye(e),
+      icon: re[e.tool_key === "send_slack_message" ? S.Slack : S.EmailHandover],
+      onConfigure: () => L(e.tool_key, e)
     })
-  ), ge = [
-    ...ue,
-    ...pe,
-    ...me
-  ], fe = Be(
-    w,
+  ), Oe = [
+    ...Ie,
+    ...Ce,
+    ...we
+  ], Re = to(
     x,
-    H,
-    F
-  ), be = b.map(ee), Se = (() => {
+    K,
+    j,
+    $
+  ), _e = r.map(ue), ke = (() => {
     const e = [], o = /* @__PURE__ */ new Map();
-    return b.forEach((n) => {
-      const m = n.source ?? g.Manifest;
-      o.has(m) || (o.set(m, []), e.push(m)), o.get(m)?.push(ee(n));
+    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: He(n),
+      label: Ze(n),
       options: o.get(n) ?? [],
       // Not connected → the source button opens the connect flow instead of
       // its tool list (see SelectableListSection / onConnectIntegration).
-      connected: H?.[n],
-      onConnect: () => F?.(n)
+      connected: j?.[n],
+      onConnect: () => $?.(n)
     }));
-  })(), Te = t.subagents.map((e) => {
-    const o = I.get(e);
+  })(), Me = t.subagents.map((e) => {
+    const o = R.get(e);
     return o ? { id: e, label: o.name } : null;
-  }).filter((e) => e !== null), he = B.map((e) => ({
+  }).filter((e) => e !== null), xe = Q.map((e) => ({
     label: e.name,
     value: e.id
-  })), U = Y(P), Ae = [
-    ...X(b, [], U),
-    ...Fe(t.configTools, t.restApiTools)
-  ], ve = X(
+  })), X = se(V), Ee = [
+    ...ae(r, [], X),
+    ...eo(t.configTools, t.restApiTools)
+  ], Ne = ae(
     [],
-    B,
-    U
-  ), ye = C.map((e) => ({
+    Q,
+    X
+  ), Pe = M.map((e) => ({
     label: e.label,
     value: e.value,
     selected: e.value === t.model
-  })), L = C.find((e) => e.value === t.model), j = s?.kind === "config" && s.toolKey ? w?.[s.toolKey] : void 0;
-  return /* @__PURE__ */ T(Ie, { children: [
-    /* @__PURE__ */ l(Ee, { title: oe.title, helper: oe.helper }),
-    /* @__PURE__ */ T(Ce, { $grow: !0, children: [
-      /* @__PURE__ */ T(q, { children: [
-        /* @__PURE__ */ l(
-          J,
+  })), 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: [
+        /* @__PURE__ */ i(
+          ie,
           {
             fieldKey: "instructions",
             "data-test": "agent-instructions",
             label: "Instructions",
-            maxLength: S.instructions,
-            placeholder: "Write what this agent should do. Type @ to reference a tool or sub-agent.",
+            maxLength: T.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__ */ l(
-          J,
+        /* @__PURE__ */ i(
+          ie,
           {
             fieldKey: "guardrail",
             "data-test": "agent-guardrail",
             label: "Guardrails",
-            maxLength: S.guardrail,
-            placeholder: "Things this agent must never do. Type @ to reference a tool or sub-agent.",
+            maxLength: T.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__ */ l(we, {}),
-      /* @__PURE__ */ T(q, { children: [
-        /* @__PURE__ */ l(
-          Q,
+      /* @__PURE__ */ i(qe, {}),
+      /* @__PURE__ */ d(te, { children: [
+        /* @__PURE__ */ i(
+          le,
           {
             title: "Tools",
             helper: "Actions this agent can take while responding.",
             dataTestPrefix: "agent-tools",
-            items: ge,
-            addableOptions: be,
-            sourceGroups: Se,
-            mentionItems: Ae,
-            actionSources: fe,
+            items: Oe,
+            addableOptions: _e,
+            sourceGroups: ke,
+            mentionItems: Ee,
+            actionSources: Re,
             emptyText: "No tools added yet.",
-            onAdd: (e) => {
-              a("tool", e), c("tool", e);
-            },
-            onRemove: (e) => D("tool", e),
+            onAdd: Ae,
+            onRemove: (e) => z("tool", e),
             confirmDelete: { noun: "tool" }
           }
         ),
-        /* @__PURE__ */ l(
-          Q,
+        /* @__PURE__ */ i(
+          le,
           {
             title: "Sub-agents",
             helper: "Other agents this agent can hand off the conversation to.",
             dataTestPrefix: "agent-subagents",
-            items: Te,
-            addableOptions: he,
-            mentionItems: ve,
+            items: Me,
+            addableOptions: xe,
+            mentionItems: Ne,
             emptyText: "No sub-agents added yet.",
             onAdd: (e) => {
-              a("subagent", e), c("subagent", e);
+              c("subagent", e), u("subagent", e);
             },
-            onRemove: (e) => D("subagent", e),
+            onRemove: (e) => z("subagent", e),
             confirmDelete: { noun: "sub-agent" },
-            onConfigure: h ? ce : void 0,
-            createOption: u ? { label: "Create new", onSelect: K } : void 0
+            onConfigure: I ? Te : void 0,
+            createOption: m ? { label: "Create new", onSelect: q } : void 0
           }
         ),
-        C.length > 0 && /* @__PURE__ */ T(ke, { children: [
-          /* @__PURE__ */ l(z, { color: V.content.primary, children: "Advanced settings" }),
-          /* @__PURE__ */ l(z, { color: V.content.secondary, children: "Select AI model" }),
-          /* @__PURE__ */ l(
-            Ue,
+        /* @__PURE__ */ d(ne, { children: [
+          /* @__PURE__ */ d(Be, { 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(
+              io,
+              {
+                "data-test": "agent-auth-toggle",
+                value: h || g,
+                disabled: g,
+                onValueChange: async (e) => {
+                  l({ authentication: { enabled: e, type: v } });
+                }
+              }
+            )
+          ] }),
+          /* @__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(
+              ce,
+              {
+                "data-test": "agent-auth-method",
+                size: "small",
+                width: "100%",
+                dropdownWidth: "328px",
+                placeHolder: "Select verification method",
+                options: W,
+                defaultOptions: [
+                  W.find((e) => e.value === v) ?? W[0]
+                ],
+                onSelect: (e) => {
+                  const o = de(e);
+                  o && l({
+                    authentication: {
+                      enabled: !0,
+                      type: o
+                    }
+                  });
+                }
+              }
+            )
+          ] })
+        ] }),
+        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,
             {
               "data-test": "agent-model",
               size: "small",
               width: "100%",
+              dropdownWidth: "328px",
               placeHolder: "Select model",
-              options: ye,
-              defaultOptions: L ? [
+              options: Pe,
+              defaultOptions: G ? [
                 {
-                  label: L.label,
-                  value: L.value
+                  label: G.label,
+                  value: G.value
                 }
               ] : void 0,
               onSelect: (e) => {
-                const o = je(e);
-                o && f("model", o);
+                const o = de(e);
+                o && y("model", o);
               }
             }
           )
         ] })
       ] })
     ] }),
-    d && /* @__PURE__ */ l(
-      Re,
+    p && /* @__PURE__ */ i(
+      Ge,
       {
-        title: d.title,
-        initial: d.initial,
-        availableTools: b,
-        configToolTemplates: w,
-        appLabel: Y(P),
-        charLimits: S,
-        onImprove: ie,
-        onImproveToolInstructions: O,
-        onClose: () => A(null),
-        onSave: de
+        title: p.title,
+        initial: p.initial,
+        availableTools: r,
+        configToolTemplates: x,
+        appLabel: se(V),
+        charLimits: T,
+        onImprove: he,
+        onImproveToolInstructions: N,
+        onClose: () => C(null),
+        onSave: ve
       },
-      d.key
+      p.key
     ),
-    s?.kind === "restapi" && /* @__PURE__ */ l(
-      Me,
+    a?.kind === "restapi" && /* @__PURE__ */ i(
+      We,
       {
-        initial: s.initialRest,
-        charLimits: S,
-        onImprove: O,
-        onClose: () => p(null),
-        onSave: se
+        initial: a.initialRest,
+        charLimits: T,
+        existingNames: (t.restApiTools ?? []).filter((e) => e.id !== a.initialRest?.id).map((e) => e.name),
+        onImprove: N,
+        onClose: () => f(null),
+        onSave: be
       },
-      s.key
+      a.key
     ),
-    s?.kind === "config" && s.toolKey && j && /* @__PURE__ */ l(
-      Oe,
+    a?.kind === "config" && a.toolKey && Y && /* @__PURE__ */ i(
+      Fe,
       {
-        toolKey: s.toolKey,
-        template: j,
-        initial: s.initialConfig,
-        charLimits: S,
-        onImprove: O,
-        onClose: () => p(null),
-        onSave: ae
+        toolKey: a.toolKey,
+        template: Y,
+        initial: a.initialConfig,
+        charLimits: T,
+        onImprove: N,
+        onClose: () => f(null),
+        onSave: Se
       },
-      s.key
+      a.key
+    ),
+    /* @__PURE__ */ i(
+      Ue,
+      {
+        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);
+        }
+      }
     )
   ] });
 };
 export {
-  uo as Step3HowItResponds
+  ko as Step3HowItResponds
 };
 //# sourceMappingURL=Step3HowItResponds.js.map