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

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

@@ -1,20 +1,21 @@
 import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import T from "../../../assets/icons/cross.svg.js";
-import _ from "../../../assets/icons/plus.svg.js";
-import x from "styled-components";
-import { DropdownPopover as w } from "../../dropdown/DropdownPopover/index.js";
-import { RadioButton as h } from "../../radioButton/RadioButton.js";
-import { TitleSmall as c, BodyCaption as l } from "../../TypographyStyle.js";
-import { BASE_COLORS as u, COLORS as r } from "../../../constants/Theme.js";
-import { SectionBodyWrap as k, CardRow as A, RadioCard as f, RadioCardText as g, FieldBlock as B, ChipWrap as O } from "../AgentBuilder.styled.js";
-import { AiTextArea as R } from "../components/AiTextArea.js";
+import x from "../../../assets/icons/cross.svg.js";
+import w from "../../../assets/icons/plus.svg.js";
+import k from "styled-components";
+import { DropdownPopover as A } from "../../dropdown/DropdownPopover/index.js";
+import { RadioButton as u } from "../../radioButton/RadioButton.js";
+import { TitleSmall as l, BodyCaption as d } from "../../TypographyStyle.js";
+import { BASE_COLORS as g, COLORS as r } from "../../../constants/Theme.js";
+import { SectionBodyWrap as B, CardRow as L, RadioCard as f, RadioCardText as v, FieldBlock as O, ChipWrap as R } from "../AgentBuilder.styled.js";
+import { AiTextArea as E } from "../components/AiTextArea.js";
 import { StepSectionHeader as D } from "../components/StepSectionHeader.js";
-import { STEP_DEFINITIONS as L } from "../constants/steps.js";
-import { useAgentBuilderContext as E } from "../context/AgentBuilderContext.js";
-import { Button as v } from "../../button/Button.js";
-import { unwrapDropdownValue as P } from "../../dropdown/utils.js";
-const y = L[1], Y = () => {
-  const { value: b, patch: a, availableIntents: d, charLimits: C } = E(), { trigger: e } = b, s = (t) => a({ trigger: { ...e, mode: t } }), S = (t) => {
+import { STEP_DEFINITION_TEMPLATES as P, resolveAppToken as $ } from "../constants/steps.js";
+import { useAgentBuilderContext as F } from "../context/AgentBuilderContext.js";
+import { appTypeLabel as W } from "../utils/mentionSerialization.js";
+import { Button as y } from "../../button/Button.js";
+import { unwrapDropdownValue as j } from "../../dropdown/utils.js";
+const b = P[1], ot = () => {
+  const { value: T, patch: a, availableIntents: m, charLimits: C, applicationType: S } = F(), { trigger: e } = T, c = W(S), s = (t) => a({ trigger: { ...e, mode: t } }), _ = (t) => {
     e.intents.includes(t) || a({
       trigger: { ...e, intents: [...e.intents, t] }
     });
@@ -23,11 +24,17 @@ const y = L[1], Y = () => {
       ...e,
       intents: e.intents.filter((i) => i !== t)
     }
-  }), m = (t) => d.find((i) => i.value === t)?.label ?? t, p = d.filter((t) => !e.intents.includes(t.value)).map((t) => ({ label: t.label, value: t.value }));
+  }), p = (t) => m.find((i) => i.value === t)?.label ?? t, h = m.filter((t) => !e.intents.includes(t.value)).map((t) => ({ label: t.label, value: t.value }));
   return /* @__PURE__ */ o("div", { children: [
-    /* @__PURE__ */ n(D, { title: y.title, helper: y.helper }),
-    /* @__PURE__ */ o(k, { children: [
-      /* @__PURE__ */ o(A, { children: [
+    /* @__PURE__ */ n(
+      D,
+      {
+        title: b.title,
+        helper: $(b.helper, c)
+      }
+    ),
+    /* @__PURE__ */ o(B, { children: [
+      /* @__PURE__ */ o(L, { children: [
         /* @__PURE__ */ o(
           f,
           {
@@ -36,17 +43,17 @@ const y = L[1], Y = () => {
             onClick: () => s("manifest_intent"),
             children: [
               /* @__PURE__ */ n(
-                h,
+                u,
                 {
                   isActive: e.mode === "manifest_intent",
                   onValueChange: () => s("manifest_intent"),
                   skipSelectingOff: !0,
-                  activeColor: u.brand[800]
+                  activeColor: g.brand[800]
                 }
               ),
-              /* @__PURE__ */ o(g, { children: [
-                /* @__PURE__ */ n(c, { color: r.content.primary, children: "Manifest intent" }),
-                /* @__PURE__ */ n(l, { color: r.content.secondary, children: "Manifest's AI classifier routes conversations automatically — no keywords needed." })
+              /* @__PURE__ */ o(v, { children: [
+                /* @__PURE__ */ n(l, { color: r.content.primary, children: `${c} intent` }),
+                /* @__PURE__ */ n(d, { color: r.content.secondary, children: `${c}'s AI classifier routes conversations automatically — no keywords needed.` })
               ] })
             ]
           }
@@ -59,67 +66,67 @@ const y = L[1], Y = () => {
             onClick: () => s("custom_intent"),
             children: [
               /* @__PURE__ */ n(
-                h,
+                u,
                 {
                   isActive: e.mode === "custom_intent",
                   onValueChange: () => s("custom_intent"),
                   skipSelectingOff: !0,
-                  activeColor: u.brand[800]
+                  activeColor: g.brand[800]
                 }
               ),
-              /* @__PURE__ */ o(g, { children: [
-                /* @__PURE__ */ n(c, { color: r.content.primary, children: "Custom intent" }),
-                /* @__PURE__ */ n(l, { color: r.content.secondary, children: "Define your own trigger — use exact phrases or describe the customer's intent." })
+              /* @__PURE__ */ o(v, { children: [
+                /* @__PURE__ */ n(l, { color: r.content.primary, children: "Custom intent" }),
+                /* @__PURE__ */ n(d, { color: r.content.secondary, children: "Define your own trigger — use exact phrases or describe the customer's intent." })
               ] })
             ]
           }
         )
       ] }),
-      e.mode === "manifest_intent" ? /* @__PURE__ */ o(B, { children: [
-        /* @__PURE__ */ n(c, { color: r.content.primary, children: "If customer talks about" }),
-        e.intents.length > 0 && /* @__PURE__ */ n(O, { children: e.intents.map((t) => /* @__PURE__ */ n(
-          v,
+      e.mode === "manifest_intent" ? /* @__PURE__ */ o(O, { children: [
+        /* @__PURE__ */ n(l, { color: r.content.primary, children: "If customer talks about" }),
+        e.intents.length > 0 && /* @__PURE__ */ n(R, { children: e.intents.map((t) => /* @__PURE__ */ n(
+          y,
           {
             "data-test": `intent-chip-${t}`,
             size: "chip",
             buttonType: "tertiaryGray",
-            buttonText: m(t),
-            TrailingIcon: T,
-            "aria-label": `Remove ${m(t)}`,
+            buttonText: p(t),
+            TrailingIcon: x,
+            "aria-label": `Remove ${p(t)}`,
             onClick: () => I(t)
           },
           t
         )) }),
-        p.length > 0 && // Dashed "+ Intent" button on its own row under the chips;
+        h.length > 0 && // Dashed "+ Intent" button on its own row under the chips;
         // clicking it opens the intent list directly — no intermediate
         // select input.
-        /* @__PURE__ */ n(F, { children: /* @__PURE__ */ n(
-          w,
+        /* @__PURE__ */ n(z, { children: /* @__PURE__ */ n(
+          A,
           {
             "data-test": "intent-add-dropdown",
             isSearchable: !0,
             width: "200px",
             placement: "bottom-start",
-            options: p,
+            options: h,
             onSelect: (t) => {
-              const i = P(t);
-              i && S(i);
+              const i = j(t);
+              i && _(i);
             },
             children: /* @__PURE__ */ n(
-              v,
+              y,
               {
                 "data-test": "intent-add-button",
                 buttonType: "dashBold",
                 size: "medium",
-                LeadingIcon: _,
+                LeadingIcon: w,
                 buttonText: "Intent"
               }
             )
           }
         ) }),
-        /* @__PURE__ */ n(l, { color: r.content.secondary, children: "This agent takes over from your main assistant when this intent is detected. The changeover is automatic when you go live." })
+        /* @__PURE__ */ n(d, { color: r.content.secondary, children: "This agent takes over from your main assistant when this intent is detected. The changeover is automatic when you go live." })
       ] }) : /* @__PURE__ */ n(
-        R,
+        E,
         {
           "data-test": "custom-intent",
           label: "Describe the trigger",
@@ -132,10 +139,10 @@ const y = L[1], Y = () => {
       )
     ] })
   ] });
-}, F = x.div`
+}, z = k.div`
 	display: flex;
 `;
 export {
-  Y as Step2WhenItStepsIn
+  ot as Step2WhenItStepsIn
 };
 //# sourceMappingURL=Step2WhenItStepsIn.js.map

package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step2WhenItStepsIn.js","sources":["../../../../../src/components/agent-builder/steps/Step2WhenItStepsIn.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { unwrapDropdownValue } from '@src/components/dropdown';\nimport { DropdownPopover } from '@src/components/dropdown/DropdownPopover';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { RadioButton } from '@src/components/radioButton/RadioButton';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport { TriggerMode } from '../AgentBuilder.model';\nimport {\n\tCardRow,\n\tChipWrap,\n\tFieldBlock,\n\tRadioCard,\n\tRadioCardText,\n\tSectionBodyWrap,\n} from '../AgentBuilder.styled';\nimport { AiTextArea } from '../components/AiTextArea';\nimport { StepSectionHeader } from '../components/StepSectionHeader';\nimport { STEP_DEFINITIONS } from '../constants/steps';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\n\nconst STEP = STEP_DEFINITIONS[1];\n\nexport const Step2WhenItStepsIn: React.FC = () => {\n\tconst { value, patch, availableIntents, charLimits } =\n\t\tuseAgentBuilderContext();\n\tconst { trigger } = value;\n\n\t// Only the mode changes here. The modes are mutually exclusive on save, but the\n\t// unselected one's data is kept until the merchant leaves this step (see\n\t// `triggerForSelectedMode` in AgentBuilderContext) — so toggling the radio to\n\t// compare the two options doesn't delete what they already picked or typed.\n\tconst setMode = (mode: TriggerMode) =>\n\t\tpatch({ trigger: { ...trigger, mode } });\n\n\tconst addIntent = (intentValue: string) => {\n\t\tif (!trigger.intents.includes(intentValue)) {\n\t\t\tpatch({\n\t\t\t\ttrigger: { ...trigger, intents: [...trigger.intents, intentValue] },\n\t\t\t});\n\t\t}\n\t};\n\n\tconst removeIntent = (intentValue: string) =>\n\t\tpatch({\n\t\t\ttrigger: {\n\t\t\t\t...trigger,\n\t\t\t\tintents: trigger.intents.filter((i) => i !== intentValue),\n\t\t\t},\n\t\t});\n\n\tconst labelFor = (v: string) =>\n\t\tavailableIntents.find((o) => o.value === v)?.label ?? v;\n\n\tconst remainingOptions: SingleOption[] = availableIntents\n\t\t.filter((o) => !trigger.intents.includes(o.value))\n\t\t.map((o) => ({ label: o.label, value: o.value }));\n\n\treturn (\n\t\t<div>\n\t\t\t<StepSectionHeader title={STEP.title} helper={STEP.helper} />\n\t\t\t<SectionBodyWrap>\n\t\t\t\t<CardRow>\n\t\t\t\t\t<RadioCard\n\t\t\t\t\t\tdata-test=\"trigger-mode-manifest\"\n\t\t\t\t\t\tselected={trigger.mode === 'manifest_intent'}\n\t\t\t\t\t\tonClick={() => setMode('manifest_intent')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tisActive={trigger.mode === 'manifest_intent'}\n\t\t\t\t\t\t\tonValueChange={() => setMode('manifest_intent')}\n\t\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\t\tactiveColor={BASE_COLORS.brand['800']}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tManifest intent\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\tManifest&apos;s AI classifier routes conversations automatically\n\t\t\t\t\t\t\t\t— no keywords needed.\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</RadioCardText>\n\t\t\t\t\t</RadioCard>\n\n\t\t\t\t\t<RadioCard\n\t\t\t\t\t\tdata-test=\"trigger-mode-custom\"\n\t\t\t\t\t\tselected={trigger.mode === 'custom_intent'}\n\t\t\t\t\t\tonClick={() => setMode('custom_intent')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tisActive={trigger.mode === 'custom_intent'}\n\t\t\t\t\t\t\tonValueChange={() => setMode('custom_intent')}\n\t\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\t\tactiveColor={BASE_COLORS.brand['800']}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tCustom intent\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\tDefine your own trigger — use exact phrases or describe the\n\t\t\t\t\t\t\t\tcustomer&apos;s intent.\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</RadioCardText>\n\t\t\t\t\t</RadioCard>\n\t\t\t\t</CardRow>\n\n\t\t\t\t{trigger.mode === 'manifest_intent' ? (\n\t\t\t\t\t<FieldBlock>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\tIf customer talks about\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t{trigger.intents.length > 0 && (\n\t\t\t\t\t\t\t<ChipWrap>\n\t\t\t\t\t\t\t\t{trigger.intents.map((intent) => (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tkey={intent}\n\t\t\t\t\t\t\t\t\t\tdata-test={`intent-chip-${intent}`}\n\t\t\t\t\t\t\t\t\t\tsize=\"chip\"\n\t\t\t\t\t\t\t\t\t\tbuttonType=\"tertiaryGray\"\n\t\t\t\t\t\t\t\t\t\tbuttonText={labelFor(intent)}\n\t\t\t\t\t\t\t\t\t\tTrailingIcon={CrossIcon}\n\t\t\t\t\t\t\t\t\t\taria-label={`Remove ${labelFor(intent)}`}\n\t\t\t\t\t\t\t\t\t\tonClick={() => removeIntent(intent)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</ChipWrap>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{remainingOptions.length > 0 && (\n\t\t\t\t\t\t\t// Dashed \"+ Intent\" button on its own row under the chips;\n\t\t\t\t\t\t\t// clicking it opens the intent list directly — no intermediate\n\t\t\t\t\t\t\t// select input.\n\t\t\t\t\t\t\t<AddIntentRow>\n\t\t\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\t\t\tdata-test=\"intent-add-dropdown\"\n\t\t\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\t\t\twidth=\"200px\"\n\t\t\t\t\t\t\t\t\tplacement=\"bottom-start\"\n\t\t\t\t\t\t\t\t\toptions={remainingOptions}\n\t\t\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\t\t\taddIntent(v);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tdata-test=\"intent-add-button\"\n\t\t\t\t\t\t\t\t\t\tbuttonType=\"dashBold\"\n\t\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\t\t\t\t\tbuttonText=\"Intent\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</DropdownPopover>\n\t\t\t\t\t\t\t</AddIntentRow>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tThis agent takes over from your main assistant when this intent is\n\t\t\t\t\t\t\tdetected. The changeover is automatic when you go live.\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</FieldBlock>\n\t\t\t\t) : (\n\t\t\t\t\t<AiTextArea\n\t\t\t\t\t\tdata-test=\"custom-intent\"\n\t\t\t\t\t\tlabel=\"Describe the trigger\"\n\t\t\t\t\t\tvalue={trigger.custom_intent ?? ''}\n\t\t\t\t\t\tonChange={(text) =>\n\t\t\t\t\t\t\tpatch({ trigger: { ...trigger, custom_intent: text } })\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmaxLength={charLimits.custom_intent}\n\t\t\t\t\t\tplaceholder=\"e.g. The customer wants to cancel an order they placed.\"\n\t\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</SectionBodyWrap>\n\t\t</div>\n\t);\n};\n\n// Keeps the dashed \"+ Intent\" button at its natural width on its own row.\nconst AddIntentRow = styled.div`\n\tdisplay: flex;\n`;\n"],"names":["STEP","STEP_DEFINITIONS","Step2WhenItStepsIn","value","patch","availableIntents","charLimits","useAgentBuilderContext","trigger","setMode","mode","addIntent","intentValue","removeIntent","labelFor","v","o","remainingOptions","jsx","StepSectionHeader","SectionBodyWrap","jsxs","CardRow","RadioCard","RadioButton","BASE_COLORS","RadioCardText","TitleSmall","COLORS","BodyCaption","FieldBlock","ChipWrap","intent","Button","CrossIcon","AddIntentRow","DropdownPopover","opt","unwrapDropdownValue","PlusIcon","AiTextArea","text","styled"],"mappings":"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"}
+{"version":3,"file":"Step2WhenItStepsIn.js","sources":["../../../../../src/components/agent-builder/steps/Step2WhenItStepsIn.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { unwrapDropdownValue } from '@src/components/dropdown';\nimport { DropdownPopover } from '@src/components/dropdown/DropdownPopover';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { RadioButton } from '@src/components/radioButton/RadioButton';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport { TriggerMode } from '../AgentBuilder.model';\nimport {\n\tCardRow,\n\tChipWrap,\n\tFieldBlock,\n\tRadioCard,\n\tRadioCardText,\n\tSectionBodyWrap,\n} from '../AgentBuilder.styled';\nimport { AiTextArea } from '../components/AiTextArea';\nimport { StepSectionHeader } from '../components/StepSectionHeader';\nimport { resolveAppToken, STEP_DEFINITION_TEMPLATES } from '../constants/steps';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\nimport { appTypeLabel } from '../utils/mentionSerialization';\n\nconst STEP = STEP_DEFINITION_TEMPLATES[1];\n\nexport const Step2WhenItStepsIn: React.FC = () => {\n\tconst { value, patch, availableIntents, charLimits, applicationType } =\n\t\tuseAgentBuilderContext();\n\tconst { trigger } = value;\n\n\t// The first trigger mode is the host product's own intent classifier, so it's\n\t// named after whichever product the merchant is in — \"Manifest intent\" in\n\t// Manifest, \"BIK intent\" in BIK. `trigger.mode` stays `'manifest_intent'`:\n\t// it's a bik-models TriggerMode the backend keys off, not a label.\n\tconst appLabel = appTypeLabel(applicationType);\n\n\t// Only the mode changes here. The modes are mutually exclusive on save, but the\n\t// unselected one's data is kept until the merchant leaves this step (see\n\t// `triggerForSelectedMode` in AgentBuilderContext) — so toggling the radio to\n\t// compare the two options doesn't delete what they already picked or typed.\n\tconst setMode = (mode: TriggerMode) =>\n\t\tpatch({ trigger: { ...trigger, mode } });\n\n\tconst addIntent = (intentValue: string) => {\n\t\tif (!trigger.intents.includes(intentValue)) {\n\t\t\tpatch({\n\t\t\t\ttrigger: { ...trigger, intents: [...trigger.intents, intentValue] },\n\t\t\t});\n\t\t}\n\t};\n\n\tconst removeIntent = (intentValue: string) =>\n\t\tpatch({\n\t\t\ttrigger: {\n\t\t\t\t...trigger,\n\t\t\t\tintents: trigger.intents.filter((i) => i !== intentValue),\n\t\t\t},\n\t\t});\n\n\tconst labelFor = (v: string) =>\n\t\tavailableIntents.find((o) => o.value === v)?.label ?? v;\n\n\tconst remainingOptions: SingleOption[] = availableIntents\n\t\t.filter((o) => !trigger.intents.includes(o.value))\n\t\t.map((o) => ({ label: o.label, value: o.value }));\n\n\treturn (\n\t\t<div>\n\t\t\t<StepSectionHeader\n\t\t\t\ttitle={STEP.title}\n\t\t\t\thelper={resolveAppToken(STEP.helper, appLabel)}\n\t\t\t/>\n\t\t\t<SectionBodyWrap>\n\t\t\t\t<CardRow>\n\t\t\t\t\t<RadioCard\n\t\t\t\t\t\tdata-test=\"trigger-mode-manifest\"\n\t\t\t\t\t\tselected={trigger.mode === 'manifest_intent'}\n\t\t\t\t\t\tonClick={() => setMode('manifest_intent')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tisActive={trigger.mode === 'manifest_intent'}\n\t\t\t\t\t\t\tonValueChange={() => setMode('manifest_intent')}\n\t\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\t\tactiveColor={BASE_COLORS.brand['800']}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t{`${appLabel} intent`}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t{`${appLabel}'s AI classifier routes conversations automatically — no keywords needed.`}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</RadioCardText>\n\t\t\t\t\t</RadioCard>\n\n\t\t\t\t\t<RadioCard\n\t\t\t\t\t\tdata-test=\"trigger-mode-custom\"\n\t\t\t\t\t\tselected={trigger.mode === 'custom_intent'}\n\t\t\t\t\t\tonClick={() => setMode('custom_intent')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tisActive={trigger.mode === 'custom_intent'}\n\t\t\t\t\t\t\tonValueChange={() => setMode('custom_intent')}\n\t\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\t\tactiveColor={BASE_COLORS.brand['800']}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tCustom intent\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\tDefine your own trigger — use exact phrases or describe the\n\t\t\t\t\t\t\t\tcustomer&apos;s intent.\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</RadioCardText>\n\t\t\t\t\t</RadioCard>\n\t\t\t\t</CardRow>\n\n\t\t\t\t{trigger.mode === 'manifest_intent' ? (\n\t\t\t\t\t<FieldBlock>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\tIf customer talks about\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t{trigger.intents.length > 0 && (\n\t\t\t\t\t\t\t<ChipWrap>\n\t\t\t\t\t\t\t\t{trigger.intents.map((intent) => (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tkey={intent}\n\t\t\t\t\t\t\t\t\t\tdata-test={`intent-chip-${intent}`}\n\t\t\t\t\t\t\t\t\t\tsize=\"chip\"\n\t\t\t\t\t\t\t\t\t\tbuttonType=\"tertiaryGray\"\n\t\t\t\t\t\t\t\t\t\tbuttonText={labelFor(intent)}\n\t\t\t\t\t\t\t\t\t\tTrailingIcon={CrossIcon}\n\t\t\t\t\t\t\t\t\t\taria-label={`Remove ${labelFor(intent)}`}\n\t\t\t\t\t\t\t\t\t\tonClick={() => removeIntent(intent)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</ChipWrap>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{remainingOptions.length > 0 && (\n\t\t\t\t\t\t\t// Dashed \"+ Intent\" button on its own row under the chips;\n\t\t\t\t\t\t\t// clicking it opens the intent list directly — no intermediate\n\t\t\t\t\t\t\t// select input.\n\t\t\t\t\t\t\t<AddIntentRow>\n\t\t\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\t\t\tdata-test=\"intent-add-dropdown\"\n\t\t\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\t\t\twidth=\"200px\"\n\t\t\t\t\t\t\t\t\tplacement=\"bottom-start\"\n\t\t\t\t\t\t\t\t\toptions={remainingOptions}\n\t\t\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\t\t\taddIntent(v);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tdata-test=\"intent-add-button\"\n\t\t\t\t\t\t\t\t\t\tbuttonType=\"dashBold\"\n\t\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\t\t\t\t\tbuttonText=\"Intent\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</DropdownPopover>\n\t\t\t\t\t\t\t</AddIntentRow>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tThis agent takes over from your main assistant when this intent is\n\t\t\t\t\t\t\tdetected. The changeover is automatic when you go live.\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</FieldBlock>\n\t\t\t\t) : (\n\t\t\t\t\t<AiTextArea\n\t\t\t\t\t\tdata-test=\"custom-intent\"\n\t\t\t\t\t\tlabel=\"Describe the trigger\"\n\t\t\t\t\t\tvalue={trigger.custom_intent ?? ''}\n\t\t\t\t\t\tonChange={(text) =>\n\t\t\t\t\t\t\tpatch({ trigger: { ...trigger, custom_intent: text } })\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmaxLength={charLimits.custom_intent}\n\t\t\t\t\t\tplaceholder=\"e.g. The customer wants to cancel an order they placed.\"\n\t\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</SectionBodyWrap>\n\t\t</div>\n\t);\n};\n\n// Keeps the dashed \"+ Intent\" button at its natural width on its own row.\nconst AddIntentRow = styled.div`\n\tdisplay: flex;\n`;\n"],"names":["STEP","STEP_DEFINITION_TEMPLATES","Step2WhenItStepsIn","value","patch","availableIntents","charLimits","applicationType","useAgentBuilderContext","trigger","appLabel","appTypeLabel","setMode","mode","addIntent","intentValue","removeIntent","labelFor","v","o","remainingOptions","jsx","StepSectionHeader","resolveAppToken","SectionBodyWrap","jsxs","CardRow","RadioCard","RadioButton","BASE_COLORS","RadioCardText","TitleSmall","COLORS","BodyCaption","FieldBlock","ChipWrap","intent","Button","CrossIcon","AddIntentRow","DropdownPopover","opt","unwrapDropdownValue","PlusIcon","AiTextArea","text","styled"],"mappings":"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"}