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

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

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