@bikdotai/bik-component-library 0.0.821-2 → 0.0.821-beta.0

package/dist/esm/components/agent-builder/hooks/useAgentDraft.js

@@ -0,0 +1,27 @@
+import { useRef as o, useReducer as l, useCallback as u } from "react";
+const h = (e, t) => {
+  switch (t.type) {
+    case "patch":
+      return { ...e, ...t.patch };
+    case "set":
+      return t.value;
+    default:
+      return e;
+  }
+}, d = (e) => {
+  const t = o(e), [c, s] = l(h, e), a = u(
+    (r) => s({ type: "patch", patch: r }),
+    []
+  ), n = u(
+    (r) => s({ type: "set", value: r }),
+    []
+  ), p = u(
+    () => s({ type: "set", value: t.current }),
+    []
+  );
+  return { value: c, onChange: a, setValue: n, reset: p };
+};
+export {
+  d as useAgentDraft
+};
+//# sourceMappingURL=useAgentDraft.js.map

package/dist/esm/components/agent-builder/hooks/useAgentDraft.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAgentDraft.js","sources":["../../../../../src/components/agent-builder/hooks/useAgentDraft.ts"],"sourcesContent":["import { useCallback, useReducer, useRef } from 'react';\nimport { AgentValue } from '../AgentBuilder.model';\n\ntype DraftAction =\n\t| { type: 'patch'; patch: Partial<AgentValue> }\n\t| { type: 'set'; value: AgentValue };\n\nconst reducer = (state: AgentValue, action: DraftAction): AgentValue => {\n\tswitch (action.type) {\n\t\tcase 'patch':\n\t\t\treturn { ...state, ...action.patch };\n\t\tcase 'set':\n\t\t\treturn action.value;\n\t\tdefault:\n\t\t\treturn state;\n\t}\n};\n\nexport interface AgentDraft {\n\t/** Current draft value — pass straight to `<AgentBuilder value={...} />`. */\n\tvalue: AgentValue;\n\t/** Merge a partial — pass straight to `<AgentBuilder onChange={...} />`. */\n\tonChange: (patch: Partial<AgentValue>) => void;\n\t/** Replace the whole value (e.g. after an async edit-mode load). */\n\tsetValue: (value: AgentValue) => void;\n\t/** Reset back to the initial value this hook was created with. */\n\treset: () => void;\n}\n\n/**\n * `useReducer`-based state helper for driving a controlled `<AgentBuilder />` from\n * the consumer (e.g. merchantAdminReact) without hand-writing the patch/merge logic.\n *\n * The consumer remains the single source of truth — this just packages the reducer.\n * For edit mode where the agent loads asynchronously, either key the host component\n * on the agent id, or call `setValue` once the data arrives.\n *\n * @example\n * const { value, onChange } = useAgentDraft(mapDocToAgentValue(doc));\n * <AgentBuilder value={value} onChange={onChange} onSaveDraft={() => save(value)} ... />\n */\nexport const useAgentDraft = (initial: AgentValue): AgentDraft => {\n\tconst initialRef = useRef(initial);\n\tconst [value, dispatch] = useReducer(reducer, initial);\n\n\tconst onChange = useCallback(\n\t\t(patch: Partial<AgentValue>) => dispatch({ type: 'patch', patch }),\n\t\t[],\n\t);\n\tconst setValue = useCallback(\n\t\t(next: AgentValue) => dispatch({ type: 'set', value: next }),\n\t\t[],\n\t);\n\tconst reset = useCallback(\n\t\t() => dispatch({ type: 'set', value: initialRef.current }),\n\t\t[],\n\t);\n\n\treturn { value, onChange, setValue, reset };\n};\n"],"names":["reducer","state","action","useAgentDraft","initial","initialRef","useRef","value","dispatch","useReducer","onChange","useCallback","patch","setValue","next","reset"],"mappings":";AAOA,MAAMA,IAAU,CAACC,GAAmBC,MAAoC;AACvE,UAAQA,EAAO,MAAA;AAAA,IACd,KAAK;AACJ,aAAO,EAAE,GAAGD,GAAO,GAAGC,EAAO,MAAA;AAAA,IAC9B,KAAK;AACJ,aAAOA,EAAO;AAAA,IACf;AACC,aAAOD;AAAA,EAAA;AAEV,GAyBaE,IAAgB,CAACC,MAAoC;AACjE,QAAMC,IAAaC,EAAOF,CAAO,GAC3B,CAACG,GAAOC,CAAQ,IAAIC,EAAWT,GAASI,CAAO,GAE/CM,IAAWC;AAAA,IAChB,CAACC,MAA+BJ,EAAS,EAAE,MAAM,SAAS,OAAAI,GAAO;AAAA,IACjE,CAAA;AAAA,EAAC,GAEIC,IAAWF;AAAA,IAChB,CAACG,MAAqBN,EAAS,EAAE,MAAM,OAAO,OAAOM,GAAM;AAAA,IAC3D,CAAA;AAAA,EAAC,GAEIC,IAAQJ;AAAA,IACb,MAAMH,EAAS,EAAE,MAAM,OAAO,OAAOH,EAAW,SAAS;AAAA,IACzD,CAAA;AAAA,EAAC;AAGF,SAAO,EAAE,OAAAE,GAAO,UAAAG,GAAU,UAAAG,GAAU,OAAAE,EAAA;AACrC;"}

package/dist/esm/components/agent-builder/index.d.ts

@@ -0,0 +1,7 @@
+export { AgentBuilder } from './AgentBuilder';
+export { useAgentDraft } from './hooks/useAgentDraft';
+export type { AgentDraft } from './hooks/useAgentDraft';
+export { AGENT_CHAR_LIMITS } from './constants/charLimits';
+export { STEP_DEFINITIONS } from './constants/steps';
+export { buildAgentMentionItems, editorDocToInstructions, instructionsToEditorHtml, } from './utils/mentionSerialization';
+export type { AgentBuilderProps, AgentBuilderConfig, AgentValue, AgentStatus as AgentBuilderStatus, StepKey, StepValidation, TriggerMode, AgentTriggerValue, AgentHandoverConfig, HandoverMethod, AgentTool, SubAgentRef, IntentOption, ModelOption, } from './AgentBuilder.model';

package/dist/esm/components/agent-builder/steps/Step1About.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Step1About: React.FC;

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

@@ -0,0 +1,43 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { AiTextArea as m } from "../components/AiTextArea.js";
+import { StepSectionHeader as l } from "../components/StepSectionHeader.js";
+import { AGENT_CHAR_LIMITS as n } from "../constants/charLimits.js";
+import { STEP_DEFINITIONS as p } from "../constants/steps.js";
+import { useAgentBuilderContext as s } from "../context/AgentBuilderContext.js";
+import { Input as d } from "../../input/Input.js";
+const o = p[0], f = () => {
+  const { value: i, updateField: a } = s();
+  return /* @__PURE__ */ r("div", { className: "bik-agent-step bik-agent-step--about", children: [
+    /* @__PURE__ */ e(l, { title: o.title, helper: o.helper }),
+    /* @__PURE__ */ e("div", { style: { marginBottom: 20 }, children: /* @__PURE__ */ e(
+      d,
+      {
+        "data-test": "agent-name",
+        labelText: "Agent name",
+        labelTextBold: !0,
+        placeholder: "Enter agent name",
+        value: i.name,
+        maxCharLimit: n.name,
+        maxCharLimitPosition: "TOP",
+        maxCharStyle: { fontSize: 12, lineHeight: "16px" },
+        onChangeText: (t) => a("name", t)
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      m,
+      {
+        "data-test": "agent-description",
+        label: "What it does",
+        value: i.description,
+        onChange: (t) => a("description", t),
+        maxLength: n.description,
+        placeholder: "Enter description",
+        minHeight: "200px"
+      }
+    )
+  ] });
+};
+export {
+  f as Step1About
+};
+//# sourceMappingURL=Step1About.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Step1About.js","sources":["../../../../../src/components/agent-builder/steps/Step1About.tsx"],"sourcesContent":["import React from 'react';\nimport { Input } from '@src/components/input';\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[0];\n\nexport const Step1About: React.FC = () => {\n\tconst { value, updateField } = useAgentBuilderContext();\n\n\treturn (\n\t\t<div className=\"bik-agent-step bik-agent-step--about\">\n\t\t\t<StepSectionHeader title={STEP.title} helper={STEP.helper} />\n\n\t\t\t<div style={{ marginBottom: 20 }}>\n\t\t\t\t<Input\n\t\t\t\t\tdata-test=\"agent-name\"\n\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\tlabelTextBold\n\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\tvalue={value.name}\n\t\t\t\t\tmaxCharLimit={AGENT_CHAR_LIMITS.name}\n\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\tonChangeText={(text) => updateField('name', text)}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t<AiTextArea\n\t\t\t\tdata-test=\"agent-description\"\n\t\t\t\tlabel=\"What it does\"\n\t\t\t\tvalue={value.description}\n\t\t\t\tonChange={(text) => updateField('description', text)}\n\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.description}\n\t\t\t\tplaceholder=\"Enter description\"\n\t\t\t\tminHeight=\"200px\"\n\t\t\t/>\n\t\t</div>\n\t);\n};\n"],"names":["STEP","STEP_DEFINITIONS","Step1About","value","updateField","useAgentBuilderContext","jsxs","jsx","StepSectionHeader","Input","AGENT_CHAR_LIMITS","text","AiTextArea"],"mappings":";;;;;;;AAQA,MAAMA,IAAOC,EAAiB,CAAC,GAElBC,IAAuB,MAAM;AACzC,QAAM,EAAE,OAAAC,GAAO,aAAAC,EAAA,IAAgBC,EAAA;AAE/B,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,wCACd,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAkB,OAAOR,EAAK,OAAO,QAAQA,EAAK,QAAQ;AAAA,sBAE1D,OAAA,EAAI,OAAO,EAAE,cAAc,MAC3B,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,WAAU;AAAA,QACV,eAAa;AAAA,QACb,aAAY;AAAA,QACZ,OAAON,EAAM;AAAA,QACb,cAAcO,EAAkB;AAAA,QAChC,sBAAqB;AAAA,QACrB,cAAc,EAAE,UAAU,IAAI,YAAY,OAAA;AAAA,QAC1C,cAAc,CAACC,MAASP,EAAY,QAAQO,CAAI;AAAA,MAAA;AAAA,IAAA,GAElD;AAAA,IAEA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,OAAM;AAAA,QACN,OAAOT,EAAM;AAAA,QACb,UAAU,CAACQ,MAASP,EAAY,eAAeO,CAAI;AAAA,QACnD,WAAWD,EAAkB;AAAA,QAC7B,aAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GACD;AAEF;"}

package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Step2WhenItStepsIn: React.FC;

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

@@ -0,0 +1,148 @@
+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 { 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 { 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 { 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, [I, h] = T.useState(!1), a = (e) => r({ trigger: { ...n, mode: e } }), b = (e) => {
+    n.intents.includes(e) || r({
+      trigger: { ...n, intents: [...n.intents, e] }
+    }), h(!1);
+  }, _ = (e) => r({
+    trigger: {
+      ...n,
+      intents: n.intents.filter((c) => c !== e)
+    }
+  }), 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 }));
+  return /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ t(H, { title: y.title, helper: y.helper }),
+    /* @__PURE__ */ i(k, { children: [
+      /* @__PURE__ */ i(
+        C,
+        {
+          "data-test": "trigger-mode-manifest",
+          selected: n.mode === "manifest_intent",
+          onClick: () => a("manifest_intent"),
+          children: [
+            /* @__PURE__ */ t(
+              g,
+              {
+                isActive: n.mode === "manifest_intent",
+                onValueChange: () => a("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,
+        {
+          "data-test": "trigger-mode-custom",
+          selected: n.mode === "custom_intent",
+          onClick: () => a("custom_intent"),
+          children: [
+            /* @__PURE__ */ t(
+              g,
+              {
+                isActive: n.mode === "custom_intent",
+                onValueChange: () => a("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." })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    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(
+            O,
+            {
+              onClick: () => _(e),
+              "aria-label": `Remove ${u(e)}`,
+              children: /* @__PURE__ */ t(
+                A,
+                {
+                  width: 14,
+                  height: 14,
+                  color: o.content.secondary
+                }
+              )
+            }
+          )
+        ] }, e)),
+        I && s.length > 0 ? /* @__PURE__ */ t(
+          N,
+          {
+            "data-test": "intent-add-dropdown",
+            size: "small",
+            width: "200px",
+            placeHolder: "Select intent",
+            isSearchable: !0,
+            options: s,
+            onSelect: (e) => {
+              const p = (Array.isArray(e) ? e[0] : e)?.value;
+              p && b(p);
+            }
+          }
+        ) : s.length > 0 && /* @__PURE__ */ i(
+          D,
+          {
+            "data-test": "intent-add-button",
+            onClick: () => h(!0),
+            children: [
+              /* @__PURE__ */ t(
+                w,
+                {
+                  width: 16,
+                  height: 16,
+                  color: o.content.secondary
+                }
+              ),
+              /* @__PURE__ */ t(f, { 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(
+      E,
+      {
+        "data-test": "custom-intent",
+        label: "Describe the trigger",
+        value: n.customIntent ?? "",
+        onChange: (e) => r({ trigger: { ...n, customIntent: e } }),
+        maxLength: M.customIntent,
+        placeholder: "e.g. The customer wants to cancel an order they placed.",
+        minHeight: "120px"
+      }
+    )
+  ] });
+};
+export {
+  Z as Step2WhenItStepsIn
+};
+//# sourceMappingURL=Step2WhenItStepsIn.js.map

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

@@ -0,0 +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.customIntent ?? ''}\n\t\t\t\t\tonChange={(text) =>\n\t\t\t\t\t\tpatch({ trigger: { ...trigger, customIntent: text } })\n\t\t\t\t\t}\n\t\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.customIntent}\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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"}

package/dist/esm/components/agent-builder/steps/Step3HowItResponds.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Step3HowItResponds: React.FC;

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

@@ -0,0 +1,112 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { TitleSmall as u } from "../../TypographyStyle.js";
+import { COLORS as g } from "../../../constants/Theme.js";
+import { Step3Grid as A, Step3Main as y, Step3Side as I, SideSection as O } from "../AgentBuilder.styled.js";
+import { InstructionsField as N } from "../components/InstructionsField.js";
+import { RichTextField as R } from "../components/RichTextField.js";
+import { SelectableListSection as b } from "../components/SelectableListSection.js";
+import { StepSectionHeader as _ } from "../components/StepSectionHeader.js";
+import { AGENT_CHAR_LIMITS as H } from "../constants/charLimits.js";
+import { STEP_DEFINITIONS as C } from "../constants/steps.js";
+import { useAgentBuilderContext as E } from "../context/AgentBuilderContext.js";
+import { Dropdown as F } from "../../dropdown/Dropdown.js";
+const f = C[2], J = () => {
+  const {
+    value: t,
+    patch: r,
+    updateField: d,
+    removeReference: m,
+    availableTools: p,
+    availableSubAgents: c,
+    availableModels: i
+  } = E(), v = t.tools.map((e) => {
+    const o = p.find((a) => a.tool_id === e);
+    return o ? { id: e, label: o.displayName } : null;
+  }).filter((e) => e !== null), S = p.filter((e) => !t.tools.includes(e.tool_id)).map((e) => ({
+    label: e.displayName,
+    value: e.tool_id,
+    subText: e.description
+  })), h = t.subagents.map((e) => {
+    const o = c.find((a) => a.id === e);
+    return o ? { id: e, label: o.name } : null;
+  }).filter((e) => e !== null), T = c.filter((e) => !t.subagents.includes(e.id)).map((e) => ({ label: e.name, value: e.id })), x = i.map((e) => ({
+    label: e.label,
+    value: e.value,
+    selected: e.value === t.model
+  })), s = i.find((e) => e.value === t.model);
+  return /* @__PURE__ */ n("div", { className: "bik-agent-step bik-agent-step--response", children: [
+    /* @__PURE__ */ l(_, { title: f.title, helper: f.helper }),
+    /* @__PURE__ */ n(A, { children: [
+      /* @__PURE__ */ n(y, { children: [
+        /* @__PURE__ */ l(N, {}),
+        /* @__PURE__ */ l(
+          R,
+          {
+            "data-test": "agent-guardrail",
+            label: "Guardrails",
+            value: t.guardrail ?? "",
+            onChange: (e) => d("guardrail", e),
+            maxLength: H.guardrail,
+            placeholder: "Things this agent must never do.",
+            minHeight: "140px",
+            resetKey: t.id
+          }
+        )
+      ] }),
+      /* @__PURE__ */ n(I, { children: [
+        /* @__PURE__ */ l(
+          b,
+          {
+            title: "Tools",
+            dataTestPrefix: "agent-tools",
+            items: v,
+            addableOptions: S,
+            emptyText: "No tools added yet.",
+            onAdd: (e) => r({ tools: [...t.tools, e] }),
+            onRemove: (e) => m("tool", e)
+          }
+        ),
+        /* @__PURE__ */ l(
+          b,
+          {
+            title: "Sub-agents",
+            dataTestPrefix: "agent-subagents",
+            items: h,
+            addableOptions: T,
+            emptyText: "No sub-agents added yet.",
+            onAdd: (e) => r({ subagents: [...t.subagents, e] }),
+            onRemove: (e) => m("subagent", e)
+          }
+        ),
+        i.length > 0 && /* @__PURE__ */ n(O, { children: [
+          /* @__PURE__ */ l(u, { color: g.content.primary, children: "Advanced settings" }),
+          /* @__PURE__ */ l(u, { color: g.content.secondary, children: "Select AI model" }),
+          /* @__PURE__ */ l(
+            F,
+            {
+              "data-test": "agent-model",
+              size: "small",
+              width: "100%",
+              placeHolder: "Select model",
+              options: x,
+              defaultOptions: s ? [
+                {
+                  label: s.label,
+                  value: s.value
+                }
+              ] : void 0,
+              onSelect: (e) => {
+                const a = (Array.isArray(e) ? e[0] : e)?.value;
+                a && d("model", a);
+              }
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  J as Step3HowItResponds
+};
+//# sourceMappingURL=Step3HowItResponds.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Step3HowItResponds.js","sources":["../../../../../src/components/agent-builder/steps/Step3HowItResponds.tsx"],"sourcesContent":["import React from 'react';\nimport { Dropdown } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tSideSection,\n\tStep3Grid,\n\tStep3Main,\n\tStep3Side,\n} from '../AgentBuilder.styled';\nimport { InstructionsField } from '../components/InstructionsField';\nimport { RichTextField } from '../components/RichTextField';\nimport {\n\tSelectableItem,\n\tSelectableListSection,\n} from '../components/SelectableListSection';\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[2];\n\nexport const Step3HowItResponds: React.FC = () => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\tupdateField,\n\t\tremoveReference,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tavailableModels,\n\t} = useAgentBuilderContext();\n\n\tconst toolItems: SelectableItem[] = value.tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool ? { id, label: tool.displayName } : null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\tconst toolOptions: SingleOption[] = availableTools\n\t\t.filter((t) => !value.tools.includes(t.tool_id))\n\t\t.map((t) => ({\n\t\t\tlabel: t.displayName,\n\t\t\tvalue: t.tool_id,\n\t\t\tsubText: t.description,\n\t\t}));\n\n\tconst subAgentItems: SelectableItem[] = value.subagents\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst sub = availableSubAgents.find((s) => s.id === id);\n\t\t\treturn sub ? { id, label: sub.name } : null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\tconst subAgentOptions: SingleOption[] = availableSubAgents\n\t\t.filter((s) => !value.subagents.includes(s.id))\n\t\t.map((s) => ({ label: s.name, value: s.id }));\n\n\tconst modelOptions: SingleOption[] = availableModels.map((m) => ({\n\t\tlabel: m.label,\n\t\tvalue: m.value,\n\t\tselected: m.value === value.model,\n\t}));\n\tconst selectedModel = availableModels.find((m) => m.value === value.model);\n\n\treturn (\n\t\t<div className=\"bik-agent-step bik-agent-step--response\">\n\t\t\t<StepSectionHeader title={STEP.title} helper={STEP.helper} />\n\n\t\t\t<Step3Grid>\n\t\t\t\t<Step3Main>\n\t\t\t\t\t<InstructionsField />\n\n\t\t\t\t\t<RichTextField\n\t\t\t\t\t\tdata-test=\"agent-guardrail\"\n\t\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\t\tvalue={value.guardrail ?? ''}\n\t\t\t\t\t\tonChange={(text) => updateField('guardrail', text)}\n\t\t\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.guardrail}\n\t\t\t\t\t\tplaceholder=\"Things this agent must never do.\"\n\t\t\t\t\t\tminHeight=\"140px\"\n\t\t\t\t\t\tresetKey={value.id}\n\t\t\t\t\t/>\n\t\t\t\t</Step3Main>\n\n\t\t\t\t<Step3Side>\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Tools\"\n\t\t\t\t\t\t// helper=\"Actions this agent can take while responding.\"\n\t\t\t\t\t\tdataTestPrefix=\"agent-tools\"\n\t\t\t\t\t\titems={toolItems}\n\t\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\t\tonAdd={(id) => patch({ tools: [...value.tools, id] })}\n\t\t\t\t\t\tonRemove={(id) => removeReference('tool', id)}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Sub-agents\"\n\t\t\t\t\t\t// helper=\"Other agents this agent can hand off the conversation to.\"\n\t\t\t\t\t\tdataTestPrefix=\"agent-subagents\"\n\t\t\t\t\t\titems={subAgentItems}\n\t\t\t\t\t\taddableOptions={subAgentOptions}\n\t\t\t\t\t\temptyText=\"No sub-agents added yet.\"\n\t\t\t\t\t\tonAdd={(id) => patch({ subagents: [...value.subagents, id] })}\n\t\t\t\t\t\tonRemove={(id) => removeReference('subagent', id)}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{availableModels.length > 0 && (\n\t\t\t\t\t\t<SideSection>\n\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tAdvanced settings\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\tSelect AI model\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\tdata-test=\"agent-model\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\tplaceHolder=\"Select model\"\n\t\t\t\t\t\t\t\toptions={modelOptions}\n\t\t\t\t\t\t\t\tdefaultOptions={\n\t\t\t\t\t\t\t\t\tselectedModel\n\t\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: selectedModel.label,\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: selectedModel.value,\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t  ]\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\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\tupdateField('model', 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</SideSection>\n\t\t\t\t\t)}\n\t\t\t\t</Step3Side>\n\t\t\t</Step3Grid>\n\t\t</div>\n\t);\n};\n"],"names":["STEP","STEP_DEFINITIONS","Step3HowItResponds","value","patch","updateField","removeReference","availableTools","availableSubAgents","availableModels","useAgentBuilderContext","toolItems","id","tool","t","x","toolOptions","subAgentItems","sub","s","subAgentOptions","modelOptions","m","selectedModel","jsxs","jsx","StepSectionHeader","Step3Grid","Step3Main","InstructionsField","RichTextField","text","AGENT_CHAR_LIMITS","Step3Side","SelectableListSection","SideSection","TitleSmall","COLORS","Dropdown","opt","v"],"mappings":"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"}

package/dist/esm/components/agent-builder/steps/Step4HandoverRules.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Step4HandoverRules: React.FC;

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

@@ -0,0 +1,83 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { RadioButton as d } from "../../radioButton/RadioButton.js";
+import { TitleSmall as a, BodyCaption as l } from "../../TypographyStyle.js";
+import { COLORS as n } from "../../../constants/Theme.js";
+import { FieldBlock as f, CardRow as u, RadioCard as s, RadioCardText as h } from "../AgentBuilder.styled.js";
+import { AiTextArea as v } from "../components/AiTextArea.js";
+import { StepSectionHeader as g } from "../components/StepSectionHeader.js";
+import { AGENT_CHAR_LIMITS as C } from "../constants/charLimits.js";
+import { STEP_DEFINITIONS as S } from "../constants/steps.js";
+import { useAgentBuilderContext as A } from "../context/AgentBuilderContext.js";
+const m = S[3], O = () => {
+  const { value: p, patch: c } = A(), { handover: t } = p, r = (i) => c({ handover: { ...t, method: i } });
+  return /* @__PURE__ */ o("div", { className: "bik-agent-step bik-agent-step--handover", children: [
+    /* @__PURE__ */ e(g, { title: m.title, helper: m.helper }),
+    /* @__PURE__ */ e(
+      v,
+      {
+        "data-test": "handover-when",
+        label: "Handover when",
+        value: t.when,
+        onChange: (i) => c({ handover: { ...t, when: i } }),
+        maxLength: C.handoverWhen,
+        placeholder: "e.g. Hand over if the customer is angry or requests a human agent.",
+        minHeight: "120px"
+      }
+    ),
+    /* @__PURE__ */ o(f, { children: [
+      /* @__PURE__ */ e(a, { color: n.content.primary, children: "Handover method" }),
+      /* @__PURE__ */ o(u, { children: [
+        /* @__PURE__ */ o(
+          s,
+          {
+            "data-test": "handover-method-default",
+            selected: t.method === "default",
+            onClick: () => r("default"),
+            children: [
+              /* @__PURE__ */ e(
+                d,
+                {
+                  isActive: t.method === "default",
+                  onValueChange: () => r("default"),
+                  skipSelectingOff: !0,
+                  activeColor: n.content.brand
+                }
+              ),
+              /* @__PURE__ */ o(h, { children: [
+                /* @__PURE__ */ e(a, { color: n.content.primary, children: "Use default settings" }),
+                /* @__PURE__ */ e(l, { color: n.content.secondary, children: "Defined in Customize > Agent handover" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(
+          s,
+          {
+            "data-test": "handover-method-specific",
+            selected: t.method === "specific_channels",
+            onClick: () => r("specific_channels"),
+            children: [
+              /* @__PURE__ */ e(
+                d,
+                {
+                  isActive: t.method === "specific_channels",
+                  onValueChange: () => r("specific_channels"),
+                  skipSelectingOff: !0,
+                  activeColor: n.content.brand
+                }
+              ),
+              /* @__PURE__ */ o(h, { children: [
+                /* @__PURE__ */ e(a, { color: n.content.primary, children: "Choose specific channels" }),
+                /* @__PURE__ */ e(l, { color: n.content.secondary, children: "Always hands over regardless of business hours." })
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  O as Step4HandoverRules
+};
+//# sourceMappingURL=Step4HandoverRules.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Step4HandoverRules.js","sources":["../../../../../src/components/agent-builder/steps/Step4HandoverRules.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioButton } from '@src/components/radioButton/RadioButton';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { HandoverMethod } from '../AgentBuilder.model';\nimport {\n\tCardRow,\n\tFieldBlock,\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[3];\n\nexport const Step4HandoverRules: React.FC = () => {\n\tconst { value, patch } = useAgentBuilderContext();\n\tconst { handover } = value;\n\n\tconst setMethod = (method: HandoverMethod) =>\n\t\tpatch({ handover: { ...handover, method } });\n\n\treturn (\n\t\t<div className=\"bik-agent-step bik-agent-step--handover\">\n\t\t\t<StepSectionHeader title={STEP.title} helper={STEP.helper} />\n\n\t\t\t<AiTextArea\n\t\t\t\tdata-test=\"handover-when\"\n\t\t\t\tlabel=\"Handover when\"\n\t\t\t\tvalue={handover.when}\n\t\t\t\tonChange={(text) => patch({ handover: { ...handover, when: text } })}\n\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.handoverWhen}\n\t\t\t\tplaceholder=\"e.g. Hand over if the customer is angry or requests a human agent.\"\n\t\t\t\tminHeight=\"120px\"\n\t\t\t/>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Handover method</TitleSmall>\n\t\t\t\t<CardRow>\n\t\t\t\t\t<RadioCard\n\t\t\t\t\t\tdata-test=\"handover-method-default\"\n\t\t\t\t\t\tselected={handover.method === 'default'}\n\t\t\t\t\t\tonClick={() => setMethod('default')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tisActive={handover.method === 'default'}\n\t\t\t\t\t\t\tonValueChange={() => setMethod('default')}\n\t\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\t\tactiveColor={COLORS.content.brand}\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\tUse default settings\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\tDefined in Customize &gt; Agent handover\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=\"handover-method-specific\"\n\t\t\t\t\t\tselected={handover.method === 'specific_channels'}\n\t\t\t\t\t\tonClick={() => setMethod('specific_channels')}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tisActive={handover.method === 'specific_channels'}\n\t\t\t\t\t\t\tonValueChange={() => setMethod('specific_channels')}\n\t\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\t\tactiveColor={COLORS.content.brand}\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\tChoose specific channels\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\tAlways hands over regardless of business hours.\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\t\t\t</FieldBlock>\n\t\t</div>\n\t);\n};\n"],"names":["STEP","STEP_DEFINITIONS","Step4HandoverRules","value","patch","useAgentBuilderContext","handover","setMethod","method","jsxs","jsx","StepSectionHeader","AiTextArea","text","AGENT_CHAR_LIMITS","FieldBlock","TitleSmall","COLORS","CardRow","RadioCard","RadioButton","RadioCardText","BodyCaption"],"mappings":";;;;;;;;;;AAiBA,MAAMA,IAAOC,EAAiB,CAAC,GAElBC,IAA+B,MAAM;AACjD,QAAM,EAAE,OAAAC,GAAO,OAAAC,EAAA,IAAUC,EAAA,GACnB,EAAE,UAAAC,MAAaH,GAEfI,IAAY,CAACC,MAClBJ,EAAM,EAAE,UAAU,EAAE,GAAGE,GAAU,QAAAE,EAAA,GAAU;AAE5C,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,2CACd,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAkB,OAAOX,EAAK,OAAO,QAAQA,EAAK,QAAQ;AAAA,IAE3D,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,OAAM;AAAA,QACN,OAAON,EAAS;AAAA,QAChB,UAAU,CAACO,MAAST,EAAM,EAAE,UAAU,EAAE,GAAGE,GAAU,MAAMO,EAAA,GAAQ;AAAA,QACnE,WAAWC,EAAkB;AAAA,QAC7B,aAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGVC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAS,UAAA,mBAAe;AAAA,wBACzDC,GAAA,EACA,UAAA;AAAA,QAAA,gBAAAT;AAAA,UAACU;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,UAAUb,EAAS,WAAW;AAAA,YAC9B,SAAS,MAAMC,EAAU,SAAS;AAAA,YAElC,UAAA;AAAA,cAAA,gBAAAG;AAAA,gBAACU;AAAA,gBAAA;AAAA,kBACA,UAAUd,EAAS,WAAW;AAAA,kBAC9B,eAAe,MAAMC,EAAU,SAAS;AAAA,kBACxC,kBAAgB;AAAA,kBAChB,aAAaU,EAAO,QAAQ;AAAA,gBAAA;AAAA,cAAA;AAAA,gCAE5BI,GAAA,EACA,UAAA;AAAA,gBAAA,gBAAAX,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAS,UAAA,wBAE3C;AAAA,kCACCK,GAAA,EAAY,OAAOL,EAAO,QAAQ,WAAW,UAAA,wCAAA,CAE9C;AAAA,cAAA,EAAA,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,gBAAAR;AAAA,UAACU;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,UAAUb,EAAS,WAAW;AAAA,YAC9B,SAAS,MAAMC,EAAU,mBAAmB;AAAA,YAE5C,UAAA;AAAA,cAAA,gBAAAG;AAAA,gBAACU;AAAA,gBAAA;AAAA,kBACA,UAAUd,EAAS,WAAW;AAAA,kBAC9B,eAAe,MAAMC,EAAU,mBAAmB;AAAA,kBAClD,kBAAgB;AAAA,kBAChB,aAAaU,EAAO,QAAQ;AAAA,gBAAA;AAAA,cAAA;AAAA,gCAE5BI,GAAA,EACA,UAAA;AAAA,gBAAA,gBAAAX,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAS,UAAA,4BAE3C;AAAA,kCACCK,GAAA,EAAY,OAAOL,EAAO,QAAQ,WAAW,UAAA,kDAAA,CAE9C;AAAA,cAAA,EAAA,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACD,EAAA,CACD;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}

package/dist/esm/components/agent-builder/utils/mentionSerialization.d.ts

@@ -0,0 +1,55 @@
+import { ApplicationType } from '@bikdotai/bik-models/growth';
+import { MentionItem } from '../../../editor';
+import { AgentTool, SubAgentRef } from '../AgentBuilder.model';
+/**
+ * Serialization helpers between the BikEditor document and the firebase
+ * `instructions` string.
+ *
+ * Firebase stores `instructions` as PLAIN TEXT with inline reference tokens:
+ *   - `{{subagent:<agentId>}}`  — hand-off to another agent
+ *   - `{{tool:<function_key>}}` — an action the agent can call
+ *   - `{{<variableName>}}`      — a template variable
+ *
+ * In the editor those references are inserted via the `@` mention menu (which we
+ * populate with BOTH tools and sub-agents). Mention nodes keep their `id` in the
+ * ProseMirror doc JSON (the rendered HTML drops it), so we serialize from the doc
+ * JSON — not from HTML.
+ */
+export interface MentionKindMeta {
+    /** Distinguishes a tool reference from a sub-agent reference. */
+    kind: 'tool' | 'subagent';
+    /** For tools: the function_key used in the `{{tool:KEY}}` token. */
+    functionKey?: string;
+    /** Plain item name (no prefix) shown in the picker dropdown rows. */
+    plainLabel?: string;
+    /** For tools: the source bucket (manifest / shopify / …) the picker groups by. */
+    source?: string;
+}
+/** Display labels for the known tool sources (drives picker headers + chip prefix). */
+export declare const TOOL_SOURCE_LABELS: Record<string, string>;
+/** Human label for a tool source; falls back to the host-app label, then the raw key. */
+export declare const toolSourceLabel: (source: string | undefined, fallback?: string) => string;
+/** Human label for the host application, used as the tool-chip prefix. */
+export declare const appTypeLabel: (applicationType?: ApplicationType) => string;
+/**
+ * Build the combined `@` mention list from the available tools + sub-agents.
+ *
+ * The `label` is the CHIP text shown once inserted — tools read
+ * `"<App> : <tool name>"` (e.g. "Manifest : Look up order"), sub-agents read
+ * `"sub-agent: <name>"`. `meta.plainLabel` is the un-prefixed name for the
+ * picker rows, and `meta.kind` drives the `{{tool}}` / `{{subagent}}` colour.
+ */
+export declare const buildAgentMentionItems: (tools: AgentTool[], subAgents: SubAgentRef[], appLabel?: string) => MentionItem[];
+/**
+ * Convert the stored instructions string into HTML for `BikEditor.initialContent`.
+ * `{{tool:KEY}}` / `{{subagent:ID}}` tokens are rehydrated into mention chips
+ * (resolved via `mentionItems`); any other `{{…}}` token is left as literal text
+ * for the editor's variable decoration. Newlines become paragraph / line breaks.
+ */
+export declare const instructionsToEditorHtml: (text: string, mentionItems?: MentionItem[]) => string;
+/**
+ * Convert a BikEditor document (from `ref.getJSON()`) into the firebase
+ * instructions string, replacing mention nodes with `{{subagent:ID}}` /
+ * `{{tool:KEY}}` tokens.
+ */
+export declare const editorDocToInstructions: (doc: Record<string, unknown> | null, tools: AgentTool[]) => string;