@bikdotai/bik-component-library 0.0.821 → 0.0.822-beta.1

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

@@ -1,90 +1,90 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import A from "../../../assets/icons/cross.svg.js";
-import w from "../../../assets/icons/plus.svg.js";
-import T from "react";
-import { RadioButton as g } from "../../radioButton/RadioButton.js";
-import { TitleSmall as l, BodyCaption as d, BodySecondary as f } from "../../TypographyStyle.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import I from "../../../assets/icons/cross.svg.js";
+import k from "../../../assets/icons/plus.svg.js";
+import x from "react";
+import { RadioButton as u } from "../../radioButton/RadioButton.js";
+import { TitleSmall as l, BodyCaption as d, BodySecondary as g } from "../../TypographyStyle.js";
 import { COLORS as o } from "../../../constants/Theme.js";
-import { CardRow as k, RadioCard as C, RadioCardText as v, FieldBlock as x, ChipWrap as R, IntentChip as B, ChipCloseButton as O, AddChipButton as D } from "../AgentBuilder.styled.js";
+import { CardRow as T, RadioCard as f, RadioCardText as C, FieldBlock as A, ChipWrap as B, IntentChip as R, ChipCloseButton as O, AddChipButton as D } from "../AgentBuilder.styled.js";
 import { AiTextArea as E } from "../components/AiTextArea.js";
-import { StepSectionHeader as H } from "../components/StepSectionHeader.js";
-import { AGENT_CHAR_LIMITS as M } from "../constants/charLimits.js";
-import { STEP_DEFINITIONS as F } from "../constants/steps.js";
+import { StepSectionHeader as F } from "../components/StepSectionHeader.js";
+import { STEP_DEFINITIONS as H } from "../constants/steps.js";
 import { useAgentBuilderContext as L } from "../context/AgentBuilderContext.js";
-import { Dropdown as N } from "../../dropdown/Dropdown.js";
-const y = F[1], Z = () => {
-  const { value: S, patch: r, availableIntents: m } = L(), { trigger: n } = S, [_, h] = T.useState(!1), a = (e) => r({ trigger: { ...n, mode: e } }), b = (e) => {
-    n.intents.includes(e) || r({
-      trigger: { ...n, intents: [...n.intents, e] }
+import { Dropdown as M } from "../../dropdown/Dropdown.js";
+import { unwrapDropdownValue as P } from "../../dropdown/utils.js";
+const v = H[1], Z = () => {
+  const { value: y, patch: a, availableIntents: m, charLimits: S } = L(), { trigger: n } = y, [_, h] = x.useState(!1), c = (t) => a({ trigger: { ...n, mode: t } }), b = (t) => {
+    n.intents.includes(t) || a({
+      trigger: { ...n, intents: [...n.intents, t] }
     }), h(!1);
-  }, I = (e) => r({
+  }, w = (t) => a({
     trigger: {
       ...n,
-      intents: n.intents.filter((c) => c !== e)
+      intents: n.intents.filter((r) => r !== t)
     }
-  }), u = (e) => m.find((c) => c.value === e)?.label ?? e, s = m.filter((e) => !n.intents.includes(e.value)).map((e) => ({ label: e.label, value: e.value }));
+  }), p = (t) => m.find((r) => r.value === t)?.label ?? t, s = m.filter((t) => !n.intents.includes(t.value)).map((t) => ({ label: t.label, value: t.value }));
   return /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ t(H, { title: y.title, helper: y.helper }),
-    /* @__PURE__ */ i(k, { children: [
+    /* @__PURE__ */ e(F, { title: v.title, helper: v.helper }),
+    /* @__PURE__ */ i(T, { children: [
       /* @__PURE__ */ i(
-        C,
+        f,
         {
           "data-test": "trigger-mode-manifest",
           selected: n.mode === "manifest_intent",
-          onClick: () => a("manifest_intent"),
+          onClick: () => c("manifest_intent"),
           children: [
-            /* @__PURE__ */ t(
-              g,
+            /* @__PURE__ */ e(
+              u,
               {
                 isActive: n.mode === "manifest_intent",
-                onValueChange: () => a("manifest_intent"),
+                onValueChange: () => c("manifest_intent"),
                 skipSelectingOff: !0,
                 activeColor: o.content.brand
               }
             ),
-            /* @__PURE__ */ i(v, { children: [
-              /* @__PURE__ */ t(l, { color: o.content.primary, children: "Manifest intent" }),
-              /* @__PURE__ */ t(d, { color: o.content.secondary, children: "Manifest's AI classifier routes conversations automatically — no keywords needed." })
+            /* @__PURE__ */ i(C, { children: [
+              /* @__PURE__ */ e(l, { color: o.content.primary, children: "Manifest intent" }),
+              /* @__PURE__ */ e(d, { color: o.content.secondary, children: "Manifest's AI classifier routes conversations automatically — no keywords needed." })
             ] })
           ]
         }
       ),
       /* @__PURE__ */ i(
-        C,
+        f,
         {
           "data-test": "trigger-mode-custom",
           selected: n.mode === "custom_intent",
-          onClick: () => a("custom_intent"),
+          onClick: () => c("custom_intent"),
           children: [
-            /* @__PURE__ */ t(
-              g,
+            /* @__PURE__ */ e(
+              u,
               {
                 isActive: n.mode === "custom_intent",
-                onValueChange: () => a("custom_intent"),
+                onValueChange: () => c("custom_intent"),
                 skipSelectingOff: !0,
                 activeColor: o.content.brand
               }
             ),
-            /* @__PURE__ */ i(v, { children: [
-              /* @__PURE__ */ t(l, { color: o.content.primary, children: "Custom intent" }),
-              /* @__PURE__ */ t(d, { color: o.content.secondary, children: "Define your own trigger — use exact phrases or describe the customer's intent." })
+            /* @__PURE__ */ i(C, { children: [
+              /* @__PURE__ */ e(l, { color: o.content.primary, children: "Custom intent" }),
+              /* @__PURE__ */ e(d, { color: o.content.secondary, children: "Define your own trigger — use exact phrases or describe the customer's intent." })
             ] })
           ]
         }
       )
     ] }),
-    n.mode === "manifest_intent" ? /* @__PURE__ */ i(x, { children: [
-      /* @__PURE__ */ t(l, { color: o.content.primary, children: "If customer talks about" }),
-      /* @__PURE__ */ i(R, { children: [
-        n.intents.map((e) => /* @__PURE__ */ i(B, { "data-test": `intent-chip-${e}`, children: [
-          /* @__PURE__ */ t(f, { color: o.content.primary, children: u(e) }),
-          /* @__PURE__ */ t(
+    n.mode === "manifest_intent" ? /* @__PURE__ */ i(A, { children: [
+      /* @__PURE__ */ e(l, { color: o.content.primary, children: "If customer talks about" }),
+      /* @__PURE__ */ i(B, { children: [
+        n.intents.map((t) => /* @__PURE__ */ i(R, { "data-test": `intent-chip-${t}`, children: [
+          /* @__PURE__ */ e(g, { color: o.content.primary, children: p(t) }),
+          /* @__PURE__ */ e(
             O,
             {
-              onClick: () => I(e),
-              "aria-label": `Remove ${u(e)}`,
-              children: /* @__PURE__ */ t(
-                A,
+              onClick: () => w(t),
+              "aria-label": `Remove ${p(t)}`,
+              children: /* @__PURE__ */ e(
+                I,
                 {
                   width: 14,
                   height: 14,
@@ -93,9 +93,9 @@ const y = F[1], Z = () => {
               )
             }
           )
-        ] }, e)),
-        _ && s.length > 0 ? /* @__PURE__ */ t(
-          N,
+        ] }, t)),
+        _ && s.length > 0 ? /* @__PURE__ */ e(
+          M,
           {
             "data-test": "intent-add-dropdown",
             size: "small",
@@ -103,9 +103,9 @@ const y = F[1], Z = () => {
             placeHolder: "Select intent",
             isSearchable: !0,
             options: s,
-            onSelect: (e) => {
-              const p = (Array.isArray(e) ? e[0] : e)?.value;
-              p && b(p);
+            onSelect: (t) => {
+              const r = P(t);
+              r && b(r);
             }
           }
         ) : s.length > 0 && /* @__PURE__ */ i(
@@ -114,28 +114,28 @@ const y = F[1], Z = () => {
             "data-test": "intent-add-button",
             onClick: () => h(!0),
             children: [
-              /* @__PURE__ */ t(
-                w,
+              /* @__PURE__ */ e(
+                k,
                 {
                   width: 16,
                   height: 16,
                   color: o.content.secondary
                 }
               ),
-              /* @__PURE__ */ t(f, { color: o.content.secondary, children: "Intent" })
+              /* @__PURE__ */ e(g, { color: o.content.secondary, children: "Intent" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ t(d, { color: o.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__ */ t(
+      /* @__PURE__ */ e(d, { color: o.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__ */ e(
       E,
       {
         "data-test": "custom-intent",
         label: "Describe the trigger",
         value: n.custom_intent ?? "",
-        onChange: (e) => r({ trigger: { ...n, custom_intent: e } }),
-        maxLength: M.custom_intent,
+        onChange: (t) => a({ trigger: { ...n, custom_intent: t } }),
+        maxLength: S.custom_intent,
         placeholder: "e.g. The customer wants to cancel an order they placed.",
         minHeight: "120px"
       }

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 { Dropdown } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { RadioButton } from '@src/components/radioButton/RadioButton';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { TriggerMode } from '../AgentBuilder.model';\nimport {\n\tAddChipButton,\n\tCardRow,\n\tChipCloseButton,\n\tChipWrap,\n\tFieldBlock,\n\tIntentChip,\n\tRadioCard,\n\tRadioCardText,\n} from '../AgentBuilder.styled';\nimport { AiTextArea } from '../components/AiTextArea';\nimport { StepSectionHeader } from '../components/StepSectionHeader';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\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 } = useAgentBuilderContext();\n\tconst { trigger } = value;\n\tconst [adding, setAdding] = React.useState(false);\n\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\tsetAdding(false);\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\n\t\t\t<CardRow>\n\t\t\t\t<RadioCard\n\t\t\t\t\tdata-test=\"trigger-mode-manifest\"\n\t\t\t\t\tselected={trigger.mode === 'manifest_intent'}\n\t\t\t\t\tonClick={() => setMode('manifest_intent')}\n\t\t\t\t>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={trigger.mode === 'manifest_intent'}\n\t\t\t\t\t\tonValueChange={() => setMode('manifest_intent')}\n\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\tactiveColor={COLORS.content.brand}\n\t\t\t\t\t/>\n\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\tManifest intent\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tManifest&apos;s AI classifier routes conversations automatically —\n\t\t\t\t\t\t\tno keywords needed.\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</RadioCardText>\n\t\t\t\t</RadioCard>\n\n\t\t\t\t<RadioCard\n\t\t\t\t\tdata-test=\"trigger-mode-custom\"\n\t\t\t\t\tselected={trigger.mode === 'custom_intent'}\n\t\t\t\t\tonClick={() => setMode('custom_intent')}\n\t\t\t\t>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={trigger.mode === 'custom_intent'}\n\t\t\t\t\t\tonValueChange={() => setMode('custom_intent')}\n\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\tactiveColor={COLORS.content.brand}\n\t\t\t\t\t/>\n\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\tCustom intent\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tDefine your own trigger — use exact phrases or describe the\n\t\t\t\t\t\t\tcustomer&apos;s intent.\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</RadioCardText>\n\t\t\t\t</RadioCard>\n\t\t\t</CardRow>\n\n\t\t\t{trigger.mode === 'manifest_intent' ? (\n\t\t\t\t<FieldBlock>\n\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\tIf customer talks about\n\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t<ChipWrap>\n\t\t\t\t\t\t{trigger.intents.map((intent) => (\n\t\t\t\t\t\t\t<IntentChip key={intent} data-test={`intent-chip-${intent}`}>\n\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t{labelFor(intent)}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<ChipCloseButton\n\t\t\t\t\t\t\t\t\tonClick={() => removeIntent(intent)}\n\t\t\t\t\t\t\t\t\taria-label={`Remove ${labelFor(intent)}`}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={14}\n\t\t\t\t\t\t\t\t\t\theight={14}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</ChipCloseButton>\n\t\t\t\t\t\t\t</IntentChip>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{adding && remainingOptions.length > 0 ? (\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tdata-test=\"intent-add-dropdown\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\twidth=\"200px\"\n\t\t\t\t\t\t\t\tplaceHolder=\"Select intent\"\n\t\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\t\toptions={remainingOptions}\n\t\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\t\t\t\tconst v = (single as SingleOption)?.value;\n\t\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\t\taddIntent(v);\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/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tremainingOptions.length > 0 && (\n\t\t\t\t\t\t\t\t<AddChipButton\n\t\t\t\t\t\t\t\t\tdata-test=\"intent-add-button\"\n\t\t\t\t\t\t\t\t\tonClick={() => setAdding(true)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t\tIntent\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t</AddChipButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ChipWrap>\n\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\tThis agent takes over from your main assistant when this intent is\n\t\t\t\t\t\tdetected. The changeover is automatic when you go live.\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</FieldBlock>\n\t\t\t) : (\n\t\t\t\t<AiTextArea\n\t\t\t\t\tdata-test=\"custom-intent\"\n\t\t\t\t\tlabel=\"Describe the trigger\"\n\t\t\t\t\tvalue={trigger.custom_intent ?? ''}\n\t\t\t\t\tonChange={(text) =>\n\t\t\t\t\t\tpatch({ trigger: { ...trigger, custom_intent: text } })\n\t\t\t\t\t}\n\t\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.custom_intent}\n\t\t\t\t\tplaceholder=\"e.g. The customer wants to cancel an order they placed.\"\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["STEP","STEP_DEFINITIONS","Step2WhenItStepsIn","value","patch","availableIntents","useAgentBuilderContext","trigger","adding","setAdding","React","setMode","mode","addIntent","intentValue","removeIntent","i","labelFor","v","o","remainingOptions","jsx","StepSectionHeader","CardRow","jsxs","RadioCard","RadioButton","COLORS","RadioCardText","TitleSmall","BodyCaption","FieldBlock","ChipWrap","intent","IntentChip","BodySecondary","ChipCloseButton","CrossIcon","Dropdown","opt","AddChipButton","PlusIcon","AiTextArea","text","AGENT_CHAR_LIMITS"],"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 { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { RadioButton } from '@src/components/radioButton/RadioButton';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { TriggerMode } from '../AgentBuilder.model';\nimport {\n\tAddChipButton,\n\tCardRow,\n\tChipCloseButton,\n\tChipWrap,\n\tFieldBlock,\n\tIntentChip,\n\tRadioCard,\n\tRadioCardText,\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\tconst [adding, setAdding] = React.useState(false);\n\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\tsetAdding(false);\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\n\t\t\t<CardRow>\n\t\t\t\t<RadioCard\n\t\t\t\t\tdata-test=\"trigger-mode-manifest\"\n\t\t\t\t\tselected={trigger.mode === 'manifest_intent'}\n\t\t\t\t\tonClick={() => setMode('manifest_intent')}\n\t\t\t\t>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={trigger.mode === 'manifest_intent'}\n\t\t\t\t\t\tonValueChange={() => setMode('manifest_intent')}\n\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\tactiveColor={COLORS.content.brand}\n\t\t\t\t\t/>\n\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\tManifest intent\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tManifest&apos;s AI classifier routes conversations automatically —\n\t\t\t\t\t\t\tno keywords needed.\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</RadioCardText>\n\t\t\t\t</RadioCard>\n\n\t\t\t\t<RadioCard\n\t\t\t\t\tdata-test=\"trigger-mode-custom\"\n\t\t\t\t\tselected={trigger.mode === 'custom_intent'}\n\t\t\t\t\tonClick={() => setMode('custom_intent')}\n\t\t\t\t>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={trigger.mode === 'custom_intent'}\n\t\t\t\t\t\tonValueChange={() => setMode('custom_intent')}\n\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\tactiveColor={COLORS.content.brand}\n\t\t\t\t\t/>\n\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\tCustom intent\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tDefine your own trigger — use exact phrases or describe the\n\t\t\t\t\t\t\tcustomer&apos;s intent.\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</RadioCardText>\n\t\t\t\t</RadioCard>\n\t\t\t</CardRow>\n\n\t\t\t{trigger.mode === 'manifest_intent' ? (\n\t\t\t\t<FieldBlock>\n\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\tIf customer talks about\n\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t<ChipWrap>\n\t\t\t\t\t\t{trigger.intents.map((intent) => (\n\t\t\t\t\t\t\t<IntentChip key={intent} data-test={`intent-chip-${intent}`}>\n\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t{labelFor(intent)}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<ChipCloseButton\n\t\t\t\t\t\t\t\t\tonClick={() => removeIntent(intent)}\n\t\t\t\t\t\t\t\t\taria-label={`Remove ${labelFor(intent)}`}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={14}\n\t\t\t\t\t\t\t\t\t\theight={14}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</ChipCloseButton>\n\t\t\t\t\t\t\t</IntentChip>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{adding && remainingOptions.length > 0 ? (\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tdata-test=\"intent-add-dropdown\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\twidth=\"200px\"\n\t\t\t\t\t\t\t\tplaceHolder=\"Select intent\"\n\t\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\t\toptions={remainingOptions}\n\t\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\t\taddIntent(v);\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/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tremainingOptions.length > 0 && (\n\t\t\t\t\t\t\t\t<AddChipButton\n\t\t\t\t\t\t\t\t\tdata-test=\"intent-add-button\"\n\t\t\t\t\t\t\t\t\tonClick={() => setAdding(true)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t\tIntent\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t</AddChipButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ChipWrap>\n\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\tThis agent takes over from your main assistant when this intent is\n\t\t\t\t\t\tdetected. The changeover is automatic when you go live.\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</FieldBlock>\n\t\t\t) : (\n\t\t\t\t<AiTextArea\n\t\t\t\t\tdata-test=\"custom-intent\"\n\t\t\t\t\tlabel=\"Describe the trigger\"\n\t\t\t\t\tvalue={trigger.custom_intent ?? ''}\n\t\t\t\t\tonChange={(text) =>\n\t\t\t\t\t\tpatch({ trigger: { ...trigger, custom_intent: text } })\n\t\t\t\t\t}\n\t\t\t\t\tmaxLength={charLimits.custom_intent}\n\t\t\t\t\tplaceholder=\"e.g. The customer wants to cancel an order they placed.\"\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["STEP","STEP_DEFINITIONS","Step2WhenItStepsIn","value","patch","availableIntents","charLimits","useAgentBuilderContext","trigger","adding","setAdding","React","setMode","mode","addIntent","intentValue","removeIntent","i","labelFor","v","o","remainingOptions","jsx","StepSectionHeader","CardRow","jsxs","RadioCard","RadioButton","COLORS","RadioCardText","TitleSmall","BodyCaption","FieldBlock","ChipWrap","intent","IntentChip","BodySecondary","ChipCloseButton","CrossIcon","Dropdown","opt","unwrapDropdownValue","AddChipButton","PlusIcon","AiTextArea","text"],"mappings":"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"}

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

@@ -1,51 +1,49 @@
-import { jsxs as c, jsx as l } from "react/jsx-runtime";
-import q, { useState as C, useRef as J, useCallback as A, useEffect as Q } from "react";
-import { TitleSmall as w } from "../../TypographyStyle.js";
-import { COLORS as O } from "../../../constants/Theme.js";
-import { Step3Grid as V, Step3Main as X, Step3Side as Y, SideSection as Z } from "../AgentBuilder.styled.js";
-import { CreateSubAgentPanel as ee } from "../components/CreateSubAgentPanel.js";
-import { MentionField as x } from "../components/MentionField.js";
-import { SelectableListSection as E } from "../components/SelectableListSection.js";
-import { StepSectionHeader as te } from "../components/StepSectionHeader.js";
-import { AGENT_CHAR_LIMITS as R } from "../constants/charLimits.js";
-import { STEP_DEFINITIONS as ne } from "../constants/steps.js";
-import { useAgentBuilderContext as oe } from "../context/AgentBuilderContext.js";
-import { toolSourceLabel as ae, appTypeLabel as le } from "../utils/mentionSerialization.js";
-import { SOURCE_ICONS as L } from "../utils/sourceIcons.js";
-import { Dropdown as se } from "../../dropdown/Dropdown.js";
-const ie = (n) => {
-  const a = L[n];
-  return a ? q.createElement(a.Icon, { width: a.w, height: a.h }) : void 0;
-}, _ = (n) => ({
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useState as E, useRef as Y, useCallback as A, useEffect as Z } from "react";
+import { TitleSmall as M } from "../../TypographyStyle.js";
+import { COLORS as L } from "../../../constants/Theme.js";
+import { Step3Grid as ee, Step3Main as te, Step3Side as ne, SideSection as oe } from "../AgentBuilder.styled.js";
+import { CreateSubAgentPanel as ae } from "../components/CreateSubAgentPanel.js";
+import { MentionField as k } from "../components/MentionField.js";
+import { SelectableListSection as R } from "../components/SelectableListSection.js";
+import { StepSectionHeader as le } from "../components/StepSectionHeader.js";
+import { STEP_DEFINITIONS as se } from "../constants/steps.js";
+import { useAgentBuilderContext as ie } from "../context/AgentBuilderContext.js";
+import { toolSourceLabel as re, buildAgentMentionItems as P, appTypeLabel as N } from "../utils/mentionSerialization.js";
+import { SOURCE_ICONS as F, renderSourceIcon as ce } from "../utils/sourceIcons.js";
+import { Dropdown as ue } from "../../dropdown/Dropdown.js";
+import { unwrapDropdownValue as de } from "../../dropdown/utils.js";
+const pe = (n) => ce(F[n]) ?? void 0, _ = (n) => ({
   label: n.display_name,
   value: n.tool_id,
-  leadingIcon: ie(n.source ?? "manifest")
-}), k = ne[2], Te = () => {
+  leadingIcon: pe(n.source ?? "manifest")
+}), H = se[2], Ee = () => {
   const {
     value: n,
-    patch: a,
-    updateField: M,
-    removeReference: I,
-    availableTools: u,
-    availableSubAgents: N,
+    patch: u,
+    updateField: G,
+    removeReference: C,
+    availableTools: r,
+    availableSubAgents: D,
     availableModels: f,
-    applicationType: P,
+    applicationType: T,
+    charLimits: h,
     insertMention: d,
-    onCreateSubAgent: i,
+    onCreateSubAgent: s,
     onFetchSubAgent: p,
-    onUpdateSubAgent: h,
-    onImproveSubAgent: H,
-    registerSubAgentCreator: S
-  } = oe(), [s, m] = C(null), g = J(0), [G, T] = C([]), b = /* @__PURE__ */ new Map();
-  N.forEach((e) => b.set(e.id, e)), G.forEach((e) => b.set(e.id, e));
-  const F = Array.from(b.values()), v = A(() => {
+    onUpdateSubAgent: S,
+    onImproveSubAgent: K,
+    registerSubAgentCreator: v
+  } = ie(), [l, m] = E(null), g = Y(0), [j, w] = E([]), b = /* @__PURE__ */ new Map();
+  D.forEach((e) => b.set(e.id, e)), j.forEach((e) => b.set(e.id, e));
+  const O = Array.from(b.values()), y = A(() => {
     g.current += 1, m({ key: g.current, title: "Create sub-agent" });
   }, []);
-  Q(() => {
-    if (i)
-      return S(v), () => S(null);
-  }, [S, v, i]);
-  const K = A(
+  Z(() => {
+    if (s)
+      return v(y), () => v(null);
+  }, [v, y, s]);
+  const B = A(
     async (e) => {
       if (!p)
         return;
@@ -58,161 +56,168 @@ const ie = (n) => {
       });
     },
     [p]
-  ), j = A(
+  ), U = A(
     async (e) => {
-      if (s?.editingId) {
-        if (h) {
-          const t = await h(s.editingId, e);
-          T((o) => [
-            ...o.filter((r) => r.id !== t.id),
+      if (l?.editingId) {
+        if (S) {
+          const t = await S(l.editingId, e);
+          w((o) => [
+            ...o.filter((i) => i.id !== t.id),
             t
           ]);
         }
-      } else if (i) {
-        const t = await i(e);
-        T((o) => [...o, t]), a({ subagents: [...n.subagents, t.id] }), d("subagent", t.id, `sub-agent: ${t.name}`);
+      } else if (s) {
+        const t = await s(e);
+        w((o) => [...o, t]), u({ subagents: [...n.subagents, t.id] }), d("subagent", t.id, `sub-agent: ${t.name}`);
       }
       m(null);
     },
     [
+      l,
+      S,
       s,
-      h,
-      i,
-      a,
+      u,
       n.subagents,
       d
     ]
-  ), B = n.tools.map((e) => {
-    const t = u.find((o) => o.tool_id === e);
+  ), z = n.tools.map((e) => {
+    const t = r.find((o) => o.tool_id === e);
     return t ? {
       id: e,
       label: t.display_name,
-      icon: L[t.source ?? "manifest"]
+      icon: F[t.source ?? "manifest"]
     } : null;
-  }).filter((e) => e !== null), D = u.map(_), U = (() => {
+  }).filter((e) => e !== null), V = r.map(_), W = (() => {
     const e = [], t = /* @__PURE__ */ new Map();
-    return u.forEach((o) => {
-      const r = o.source ?? "manifest";
-      t.has(r) || (t.set(r, []), e.push(r)), t.get(r)?.push(_(o));
+    return r.forEach((o) => {
+      const i = o.source ?? "manifest";
+      t.has(i) || (t.set(i, []), e.push(i)), t.get(i)?.push(_(o));
     }), e.map((o) => ({
       source: o,
-      label: ae(o),
+      label: re(o),
       options: t.get(o) ?? []
     }));
-  })(), z = n.subagents.map((e) => {
+  })(), $ = n.subagents.map((e) => {
     const t = b.get(e);
     return t ? { id: e, label: t.name } : null;
-  }).filter((e) => e !== null), W = F.map((e) => ({
+  }).filter((e) => e !== null), q = O.map((e) => ({
     label: e.name,
     value: e.id
-  })), $ = f.map((e) => ({
+  })), x = N(T), J = P(r, [], x), Q = P(
+    [],
+    O,
+    x
+  ), X = f.map((e) => ({
     label: e.label,
     value: e.value,
     selected: e.value === n.model
-  })), y = f.find((e) => e.value === n.model);
+  })), I = f.find((e) => e.value === n.model);
   return /* @__PURE__ */ c("div", { className: "bik-agent-step bik-agent-step--response", children: [
-    /* @__PURE__ */ l(te, { title: k.title, helper: k.helper }),
-    /* @__PURE__ */ c(V, { children: [
-      /* @__PURE__ */ c(X, { children: [
-        /* @__PURE__ */ l(
-          x,
+    /* @__PURE__ */ a(le, { title: H.title, helper: H.helper }),
+    /* @__PURE__ */ c(ee, { children: [
+      /* @__PURE__ */ c(te, { children: [
+        /* @__PURE__ */ a(
+          k,
           {
             fieldKey: "instructions",
             "data-test": "agent-instructions",
             label: "Instructions",
-            maxLength: R.instructions,
+            maxLength: h.instructions,
             placeholder: "Write what this agent should do. Type @ to reference a tool or sub-agent.",
             minHeight: "200px"
           }
         ),
-        /* @__PURE__ */ l(
-          x,
+        /* @__PURE__ */ a(
+          k,
           {
             fieldKey: "guardrail",
             "data-test": "agent-guardrail",
             label: "Guardrails",
-            maxLength: R.guardrail,
+            maxLength: h.guardrail,
             placeholder: "Things this agent must never do. Type @ to reference a tool or sub-agent.",
             minHeight: "140px"
           }
         )
       ] }),
-      /* @__PURE__ */ c(Y, { children: [
-        /* @__PURE__ */ l(
-          E,
+      /* @__PURE__ */ c(ne, { children: [
+        /* @__PURE__ */ a(
+          R,
           {
             title: "Tools",
             helper: "Actions this agent can take while responding.",
             dataTestPrefix: "agent-tools",
-            items: B,
-            addableOptions: D,
-            sourceGroups: U,
+            items: z,
+            addableOptions: V,
+            sourceGroups: W,
+            mentionItems: J,
             emptyText: "No tools added yet.",
             onAdd: (e) => {
-              d("tool", e), n.tools.includes(e) || a({ tools: [...n.tools, e] });
+              d("tool", e), n.tools.includes(e) || u({ tools: [...n.tools, e] });
             },
-            onRemove: (e) => I("tool", e)
+            onRemove: (e) => C("tool", e)
           }
         ),
-        /* @__PURE__ */ l(
-          E,
+        /* @__PURE__ */ a(
+          R,
           {
             title: "Sub-agents",
             helper: "Other agents this agent can hand off the conversation to.",
             dataTestPrefix: "agent-subagents",
-            items: z,
-            addableOptions: W,
+            items: $,
+            addableOptions: q,
+            mentionItems: Q,
             emptyText: "No sub-agents added yet.",
             onAdd: (e) => {
-              d("subagent", e), n.subagents.includes(e) || a({ subagents: [...n.subagents, e] });
+              d("subagent", e), n.subagents.includes(e) || u({ subagents: [...n.subagents, e] });
             },
-            onRemove: (e) => I("subagent", e),
-            onConfigure: p ? K : void 0,
-            createOption: i ? { label: "Create new", onSelect: v } : void 0
+            onRemove: (e) => C("subagent", e),
+            onConfigure: p ? B : void 0,
+            createOption: s ? { label: "Create new", onSelect: y } : void 0
           }
         ),
-        f.length > 0 && /* @__PURE__ */ c(Z, { children: [
-          /* @__PURE__ */ l(w, { color: O.content.primary, children: "Advanced settings" }),
-          /* @__PURE__ */ l(w, { color: O.content.secondary, children: "Select AI model" }),
-          /* @__PURE__ */ l(
-            se,
+        f.length > 0 && /* @__PURE__ */ c(oe, { children: [
+          /* @__PURE__ */ a(M, { color: L.content.primary, children: "Advanced settings" }),
+          /* @__PURE__ */ a(M, { color: L.content.secondary, children: "Select AI model" }),
+          /* @__PURE__ */ a(
+            ue,
             {
               "data-test": "agent-model",
               size: "small",
               width: "100%",
               placeHolder: "Select model",
-              options: $,
-              defaultOptions: y ? [
+              options: X,
+              defaultOptions: I ? [
                 {
-                  label: y.label,
-                  value: y.value
+                  label: I.label,
+                  value: I.value
                 }
               ] : void 0,
               onSelect: (e) => {
-                const o = (Array.isArray(e) ? e[0] : e)?.value;
-                o && M("model", o);
+                const t = de(e);
+                t && G("model", t);
               }
             }
           )
         ] })
       ] })
     ] }),
-    s && /* @__PURE__ */ l(
-      ee,
+    l && /* @__PURE__ */ a(
+      ae,
       {
-        title: s.title,
-        initial: s.initial,
-        availableTools: u,
-        appLabel: le(P),
-        onImprove: H,
+        title: l.title,
+        initial: l.initial,
+        availableTools: r,
+        appLabel: N(T),
+        charLimits: h,
+        onImprove: K,
         onClose: () => m(null),
-        onSave: j
+        onSave: U
       },
-      s.key
+      l.key
     )
   ] });
 };
 export {
-  Te as Step3HowItResponds
+  Ee as Step3HowItResponds
 };
 //# sourceMappingURL=Step3HowItResponds.js.map