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

package/dist/esm/components/agent-builder/components/AgentBuilderTopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentBuilderTopBar.js","sources":["../../../../../src/components/agent-builder/components/AgentBuilderTopBar.tsx"],"sourcesContent":["import ArrowLeftIcon from '@src/assets/icons/arrow_left.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { Tag } from '@src/components/tag';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentStatus } from '../AgentBuilder.model';\nimport { BackButton, TopBar, TopBarSide } from '../AgentBuilder.styled';\n\ninterface AgentBuilderTopBarProps {\n\tname: string;\n\tstatus: AgentStatus;\n\tonBack?: () => void;\n\tonDiscard: () => void;\n\tonSaveDraft: () => void;\n\tisSaving?: boolean;\n}\n\nexport const AgentBuilderTopBar: React.FC<AgentBuilderTopBarProps> = ({\n\tname,\n\tstatus,\n\tonBack,\n\tonDiscard,\n\tonSaveDraft,\n\tisSaving,\n}) => {\n\tconst isLive = status === 'live';\n\treturn (\n\t\t<TopBar>\n\t\t\t<TopBarSide>\n\t\t\t\t{onBack && (\n\t\t\t\t\t<BackButton\n\t\t\t\t\t\tdata-test=\"agent-builder-back\"\n\t\t\t\t\t\tonClick={onBack}\n\t\t\t\t\t\taria-label=\"Back\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowLeftIcon\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BackButton>\n\t\t\t\t)}\n\t\t\t\t<TitleRegular color={COLORS.content.primary}>\n\t\t\t\t\t{name || 'Untitled agent'}\n\t\t\t\t</TitleRegular>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={isLive ? 'Live' : 'Draft'}\n\t\t\t\t\ttype={isLive ? 'positive' : 'neutral'}\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t/>\n\t\t\t</TopBarSide>\n\n\t\t\t<TopBarSide>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-builder-discard\"\n\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tbuttonText=\"Discard\"\n\t\t\t\t\tonClick={onDiscard}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-builder-save-draft\"\n\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\tisLoading={isSaving}\n\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t/>\n\t\t\t</TopBarSide>\n\t\t</TopBar>\n\t);\n};\n"],"names":["AgentBuilderTopBar","name","status","onBack","onDiscard","onSaveDraft","isSaving","isLive","TopBar","jsxs","TopBarSide","jsx","BackButton","ArrowLeftIcon","COLORS","TitleRegular","Tag","Button"],"mappings":";;;;;;;AAkBO,MAAMA,IAAwD,CAAC;AAAA,EACrE,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AACD,MAAM;AACL,QAAMC,IAASL,MAAW;AAC1B,2BACEM,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAAP,KACA,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,SAAST;AAAA,UACT,cAAW;AAAA,UAEX,UAAA,gBAAAQ;AAAA,YAACE;AAAAA,YAAA;AAAA,cACA,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAOC,EAAO,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,wBAGDC,GAAA,EAAa,OAAOD,EAAO,QAAQ,SAClC,eAAQ,kBACV;AAAA,MACA,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,SAAST,IAAS,SAAS;AAAA,UAC3B,MAAMA,IAAS,aAAa;AAAA,UAC5B,SAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACT,GACD;AAAA,sBAECG,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,YAAW;AAAA,UACX,MAAK;AAAA,UACL,YAAW;AAAA,UACX,SAASb;AAAA,QAAA;AAAA,MAAA;AAAA,MAEV,gBAAAO;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,YAAW;AAAA,UACX,MAAK;AAAA,UACL,YAAW;AAAA,UACX,WAAWX;AAAA,UACX,SAASD;AAAA,QAAA;AAAA,MAAA;AAAA,IACV,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface AiTextAreaProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    maxLength: number;
+    placeholder?: string;
+    minHeight?: string;
+    disabled?: boolean;
+    'data-test'?: string;
+}
+/** Labelled textarea with a live character counter. */
+export declare const AiTextArea: React.FC<AiTextAreaProps>;
+export {};

package/dist/esm/components/agent-builder/components/AiTextArea.js

@@ -0,0 +1,44 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { TitleSmall as h, BodyCaption as A } from "../../TypographyStyle.js";
+import { COLORS as n } from "../../../constants/Theme.js";
+import { FieldBlock as x, FieldLabelRow as F, AiTextAreaShell as S, AiTextAreaInput as T } from "../AgentBuilder.styled.js";
+const O = ({
+  label: i,
+  value: o,
+  onChange: a,
+  maxLength: r,
+  placeholder: c,
+  minHeight: s,
+  disabled: d,
+  ...m
+}) => {
+  const [p, l] = u(!1);
+  return /* @__PURE__ */ e(x, { children: [
+    /* @__PURE__ */ e(F, { children: [
+      /* @__PURE__ */ t(h, { color: n.content.primary, children: i }),
+      /* @__PURE__ */ e(A, { color: n.content.secondary, children: [
+        o.length,
+        "/",
+        r
+      ] })
+    ] }),
+    /* @__PURE__ */ t(S, { focused: p, minHeight: s, children: /* @__PURE__ */ t(
+      T,
+      {
+        "data-test": m["data-test"],
+        value: o,
+        placeholder: c,
+        maxLength: r,
+        disabled: d,
+        onFocus: () => l(!0),
+        onBlur: () => l(!1),
+        onChange: (f) => a(f.target.value)
+      }
+    ) })
+  ] });
+};
+export {
+  O as AiTextArea
+};
+//# sourceMappingURL=AiTextArea.js.map

package/dist/esm/components/agent-builder/components/AiTextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiTextArea.js","sources":["../../../../../src/components/agent-builder/components/AiTextArea.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAiTextAreaInput,\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\n\ninterface AiTextAreaProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\tdisabled?: boolean;\n\t'data-test'?: string;\n}\n\n/** Labelled textarea with a live character counter. */\nexport const AiTextArea: React.FC<AiTextAreaProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight,\n\tdisabled,\n\t...rest\n}) => {\n\tconst [focused, setFocused] = useState(false);\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{value.length}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell focused={focused} minHeight={minHeight}>\n\t\t\t\t<AiTextAreaInput\n\t\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonFocus={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\n\t\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\t/>\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["AiTextArea","label","value","onChange","maxLength","placeholder","minHeight","disabled","rest","focused","setFocused","useState","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","AiTextAreaInput","e"],"mappings":";;;;;AAsBO,MAAMA,IAAwC,CAAC;AAAA,EACrD,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK;AAE5C,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAhB,GAAM;AAAA,MAClD,gBAAAY,EAACK,GAAA,EAAY,OAAOD,EAAO,QAAQ,WACjC,UAAA;AAAA,QAAAf,EAAM;AAAA,QAAO;AAAA,QAAEE;AAAA,MAAA,EAAA,CACjB;AAAA,IAAA,GACD;AAAA,IAEA,gBAAAW,EAACI,GAAA,EAAgB,SAAAV,GAAkB,WAAAH,GAClC,UAAA,gBAAAS;AAAA,MAACK;AAAA,MAAA;AAAA,QACA,aAAWZ,EAAK,WAAW;AAAA,QAC3B,OAAAN;AAAA,QACA,aAAAG;AAAA,QACA,WAAAD;AAAA,QACA,UAAAG;AAAA,QACA,SAAS,MAAMG,EAAW,EAAI;AAAA,QAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,QAC9B,UAAU,CAACW,MAAMlB,EAASkB,EAAE,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA,EACzC,CACD;AAAA,EAAA,GACD;AAEF;"}

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+interface DiscardModalProps {
+    open: boolean;
+    /** Dismiss the dialog and stay on the builder (X / outside click). */
+    onClose: () => void;
+    /** Leave without saving. */
+    onDiscard: () => void;
+    /** Save the draft, then leave. */
+    onSaveDraft: () => void;
+    isSaving?: boolean;
+}
+/**
+ * "Save agent as draft?" confirmation shown when the user tries to leave the
+ * builder (Back). Actions live inside the body (see GoLiveModal for why we avoid
+ * StyledModal's footer). Content is left-aligned per design.
+ */
+export declare const DiscardModal: React.FC<DiscardModalProps>;
+export {};

package/dist/esm/components/agent-builder/components/DiscardModal.js

@@ -0,0 +1,54 @@
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { TitleRegular as s, BodySecondary as c } from "../../TypographyStyle.js";
+import { COLORS as r } from "../../../constants/Theme.js";
+import { ModalBody as m, ModalActions as u } from "../AgentBuilder.styled.js";
+import { StyledModal as f } from "../../modals/styledModal.js";
+import { Button as a } from "../../button/Button.js";
+const v = ({
+  open: o,
+  onClose: d,
+  onDiscard: i,
+  onSaveDraft: n,
+  isSaving: l
+}) => o ? /* @__PURE__ */ t(
+  f,
+  {
+    "data-test": "agent-discard-modal",
+    open: !0,
+    onClose: d,
+    width: "530px",
+    children: /* @__PURE__ */ e(m, { style: { alignItems: "flex-start", textAlign: "left" }, children: [
+      /* @__PURE__ */ t(s, { color: r.content.primary, children: "Save agent as draft?" }),
+      /* @__PURE__ */ t(c, { color: r.content.secondary, children: "Your progress will be lost if you leave. You can save as draft and come back to this later." }),
+      /* @__PURE__ */ e(u, { children: [
+        /* @__PURE__ */ t(
+          a,
+          {
+            "data-test": "agent-discard-leave",
+            buttonType: "secondary",
+            size: "medium",
+            matchParentWidth: !0,
+            buttonText: "Discard",
+            onClick: i
+          }
+        ),
+        /* @__PURE__ */ t(
+          a,
+          {
+            "data-test": "agent-discard-save-draft",
+            buttonType: "primary",
+            size: "medium",
+            matchParentWidth: !0,
+            buttonText: "Save as draft",
+            isLoading: l,
+            onClick: n
+          }
+        )
+      ] })
+    ] })
+  }
+) : null;
+export {
+  v as DiscardModal
+};
+//# sourceMappingURL=DiscardModal.js.map

package/dist/esm/components/agent-builder/components/DiscardModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscardModal.js","sources":["../../../../../src/components/agent-builder/components/DiscardModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ModalActions, ModalBody } from '../AgentBuilder.styled';\n\ninterface DiscardModalProps {\n\topen: boolean;\n\t/** Dismiss the dialog and stay on the builder (X / outside click). */\n\tonClose: () => void;\n\t/** Leave without saving. */\n\tonDiscard: () => void;\n\t/** Save the draft, then leave. */\n\tonSaveDraft: () => void;\n\tisSaving?: boolean;\n}\n\n/**\n * \"Save agent as draft?\" confirmation shown when the user tries to leave the\n * builder (Back). Actions live inside the body (see GoLiveModal for why we avoid\n * StyledModal's footer). Content is left-aligned per design.\n */\nexport const DiscardModal: React.FC<DiscardModalProps> = ({\n\topen,\n\tonClose,\n\tonDiscard,\n\tonSaveDraft,\n\tisSaving,\n}) => {\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-discard-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"530px\"\n\t\t>\n\t\t\t<ModalBody style={{ alignItems: 'flex-start', textAlign: 'left' }}>\n\t\t\t\t<TitleRegular color={COLORS.content.primary}>\n\t\t\t\t\tSave agent as draft?\n\t\t\t\t</TitleRegular>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\tYour progress will be lost if you leave. You can save as draft and\n\t\t\t\t\tcome back to this later.\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"agent-discard-leave\"\n\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\tbuttonText=\"Discard\"\n\t\t\t\t\t\tonClick={onDiscard}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"agent-discard-save-draft\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\t\tisLoading={isSaving}\n\t\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t\t/>\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["DiscardModal","open","onClose","onDiscard","onSaveDraft","isSaving","jsx","StyledModal","jsxs","ModalBody","TitleRegular","COLORS","BodySecondary","ModalActions","Button"],"mappings":";;;;;;AAuBO,MAAMA,IAA4C,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AACD,MACMJ,IAKJ,gBAAAK;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,aAAU;AAAA,IACV,MAAI;AAAA,IACJ,SAAAL;AAAA,IACA,OAAM;AAAA,IAEN,UAAA,gBAAAM,EAACC,KAAU,OAAO,EAAE,YAAY,cAAc,WAAW,UACxD,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAa,OAAOC,EAAO,QAAQ,SAAS,UAAA,wBAE7C;AAAA,wBACCC,GAAA,EAAc,OAAOD,EAAO,QAAQ,WAAW,UAAA,+FAGhD;AAAA,wBAECE,GAAA,EACA,UAAA;AAAA,QAAA,gBAAAP;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,kBAAgB;AAAA,YAChB,YAAW;AAAA,YACX,SAASX;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAG;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,kBAAgB;AAAA,YAChB,YAAW;AAAA,YACX,WAAWT;AAAA,YACX,SAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACV,EAAA,CACD;AAAA,IAAA,EAAA,CACD;AAAA,EAAA;AAAA,IAtCM;"}

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export type GoLiveModalMode = 'confirm' | 'success' | null;
+interface GoLiveModalProps {
+    mode: GoLiveModalMode;
+    onClose: () => void;
+    onConfirm: () => void;
+    onSaveDraft: () => void;
+    onGoToDashboard?: () => void;
+    isPublishing?: boolean;
+}
+/**
+ * Confirm / success dialog for going live. Uses `StyledModal` as the shell but
+ * renders the actions INSIDE the body (not StyledModal's footer) — the footer's
+ * `margin-top:auto` detaches from this short, centered hero layout and spills
+ * out of the card. Body-level actions stay anchored under the content.
+ */
+export declare const GoLiveModal: React.FC<GoLiveModalProps>;
+export {};

package/dist/esm/components/agent-builder/components/GoLiveModal.js

@@ -0,0 +1,73 @@
+import { jsx as t, jsxs as i, Fragment as l } from "react/jsx-runtime";
+import u from "../../../assets/icons/ManifestGlass.svg.js";
+import h from "../../../assets/icons/successIcon.svg.js";
+import { TitleRegular as g, BodySecondary as p } from "../../TypographyStyle.js";
+import { COLORS as n } from "../../../constants/Theme.js";
+import { ModalBody as y, ModalIcon as f, ModalActions as v } from "../AgentBuilder.styled.js";
+import { StyledModal as b } from "../../modals/styledModal.js";
+import { Button as o } from "../../button/Button.js";
+const A = ({
+  mode: a,
+  onClose: r,
+  onConfirm: d,
+  onSaveDraft: s,
+  onGoToDashboard: c,
+  isPublishing: m
+}) => {
+  if (!a)
+    return null;
+  const e = a === "success";
+  return /* @__PURE__ */ t(
+    b,
+    {
+      "data-test": "agent-go-live-modal",
+      open: !0,
+      onClose: r,
+      width: e ? "400px" : "520px",
+      children: /* @__PURE__ */ i(y, { children: [
+        /* @__PURE__ */ t(f, { children: e ? /* @__PURE__ */ t(h, { width: 64, height: 64 }) : /* @__PURE__ */ t(u, { width: 64, height: 64 }) }),
+        /* @__PURE__ */ t(g, { color: n.content.primary, children: e ? "Your agent is live!" : "Ready to go live?" }),
+        /* @__PURE__ */ t(p, { color: n.content.secondary, children: e ? "You can manage your agents from the AI agent dashboard." : "This agent will start handling customer conversations immediately. You can pause it at any time." }),
+        /* @__PURE__ */ t(v, { children: e ? /* @__PURE__ */ t(
+          o,
+          {
+            "data-test": "agent-go-dashboard",
+            buttonType: "primary",
+            size: "medium",
+            matchParentWidth: !0,
+            buttonText: "Go to Agent dashboard",
+            onClick: c ?? r
+          }
+        ) : /* @__PURE__ */ i(l, { children: [
+          /* @__PURE__ */ t(
+            o,
+            {
+              "data-test": "agent-confirm-save-draft",
+              buttonType: "secondary",
+              size: "medium",
+              matchParentWidth: !0,
+              buttonText: "Save as draft",
+              onClick: s
+            }
+          ),
+          /* @__PURE__ */ t(
+            o,
+            {
+              "data-test": "agent-confirm-go-live",
+              buttonType: "primary",
+              size: "medium",
+              matchParentWidth: !0,
+              buttonText: "Go live now",
+              isLoading: m,
+              onClick: d
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+};
+export {
+  A as GoLiveModal
+};
+//# sourceMappingURL=GoLiveModal.js.map

package/dist/esm/components/agent-builder/components/GoLiveModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoLiveModal.js","sources":["../../../../../src/components/agent-builder/components/GoLiveModal.tsx"],"sourcesContent":["import ManifestGlass from '@src/assets/icons/ManifestGlass.svg';\nimport SuccessIcon from '@src/assets/icons/successIcon.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ModalActions, ModalBody, ModalIcon } from '../AgentBuilder.styled';\n\nexport type GoLiveModalMode = 'confirm' | 'success' | null;\n\ninterface GoLiveModalProps {\n\tmode: GoLiveModalMode;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tonSaveDraft: () => void;\n\tonGoToDashboard?: () => void;\n\tisPublishing?: boolean;\n}\n\n/**\n * Confirm / success dialog for going live. Uses `StyledModal` as the shell but\n * renders the actions INSIDE the body (not StyledModal's footer) — the footer's\n * `margin-top:auto` detaches from this short, centered hero layout and spills\n * out of the card. Body-level actions stay anchored under the content.\n */\nexport const GoLiveModal: React.FC<GoLiveModalProps> = ({\n\tmode,\n\tonClose,\n\tonConfirm,\n\tonSaveDraft,\n\tonGoToDashboard,\n\tisPublishing,\n}) => {\n\tif (!mode) {\n\t\treturn null;\n\t}\n\n\tconst isSuccess = mode === 'success';\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-go-live-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth={isSuccess ? '400px' : '520px'}\n\t\t\t// centralContainerStyles={{ padding: '24px' }}\n\t\t>\n\t\t\t<ModalBody>\n\t\t\t\t<ModalIcon>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<SuccessIcon width={64} height={64} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ManifestGlass width={64} height={64} />\n\t\t\t\t\t)}\n\t\t\t\t</ModalIcon>\n\n\t\t\t\t<TitleRegular color={COLORS.content.primary}>\n\t\t\t\t\t{isSuccess ? 'Your agent is live!' : 'Ready to go live?'}\n\t\t\t\t</TitleRegular>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{isSuccess\n\t\t\t\t\t\t? 'You can manage your agents from the AI agent dashboard.'\n\t\t\t\t\t\t: 'This agent will start handling customer conversations immediately. You can pause it at any time.'}\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-go-dashboard\"\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\tbuttonText=\"Go to Agent dashboard\"\n\t\t\t\t\t\t\tonClick={onGoToDashboard ?? onClose}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-save-draft\"\n\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-go-live\"\n\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Go live now\"\n\t\t\t\t\t\t\t\tisLoading={isPublishing}\n\t\t\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["GoLiveModal","mode","onClose","onConfirm","onSaveDraft","onGoToDashboard","isPublishing","isSuccess","jsx","StyledModal","ModalBody","ModalIcon","SuccessIcon","ManifestGlass","TitleRegular","COLORS","BodySecondary","ModalActions","Button","jsxs","Fragment"],"mappings":";;;;;;;;AA0BO,MAAMA,IAA0C,CAAC;AAAA,EACvD,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AACD,MAAM;AACL,MAAI,CAACL;AACJ,WAAO;AAGR,QAAMM,IAAYN,MAAS;AAE3B,SACC,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,MAAI;AAAA,MACJ,SAAAP;AAAA,MACA,OAAOK,IAAY,UAAU;AAAA,MAG7B,4BAACG,GAAA,EACA,UAAA;AAAA,QAAA,gBAAAF,EAACG,GAAA,EACC,UAAAJ,IACA,gBAAAC,EAACI,GAAA,EAAY,OAAO,IAAI,QAAQ,IAAI,sBAEnCC,GAAA,EAAc,OAAO,IAAI,QAAQ,IAAI,GAExC;AAAA,QAEA,gBAAAL,EAACM,KAAa,OAAOC,EAAO,QAAQ,SAClC,UAAAR,IAAY,wBAAwB,oBAAA,CACtC;AAAA,QACA,gBAAAC,EAACQ,KAAc,OAAOD,EAAO,QAAQ,WACnC,UAAAR,IACE,4DACA,mGAAA,CACJ;AAAA,QAEA,gBAAAC,EAACS,KACC,UAAAV,IACA,gBAAAC;AAAA,UAACU;AAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,kBAAgB;AAAA,YAChB,YAAW;AAAA,YACX,SAASb,KAAmBH;AAAA,UAAA;AAAA,QAAA,IAG7B,gBAAAiB,EAAAC,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAZ;AAAA,YAACU;AAAA,YAAA;AAAA,cACA,aAAU;AAAA,cACV,YAAW;AAAA,cACX,MAAK;AAAA,cACL,kBAAgB;AAAA,cAChB,YAAW;AAAA,cACX,SAASd;AAAA,YAAA;AAAA,UAAA;AAAA,UAEV,gBAAAI;AAAA,YAACU;AAAA,YAAA;AAAA,cACA,aAAU;AAAA,cACV,YAAW;AAAA,cACX,MAAK;AAAA,cACL,kBAAgB;AAAA,cAChB,YAAW;AAAA,cACX,WAAWZ;AAAA,cACX,SAASH;AAAA,YAAA;AAAA,UAAA;AAAA,QACV,EAAA,CACD,EAAA,CAEF;AAAA,MAAA,EAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGH;"}

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

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

package/dist/esm/components/agent-builder/components/InstructionsField.js

@@ -0,0 +1,81 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useRef as x, useState as y, useMemo as f, useEffect as C } from "react";
+import { TitleSmall as A, BodyCaption as E } from "../../TypographyStyle.js";
+import { COLORS as g } from "../../../constants/Theme.js";
+import { FieldBlock as I, FieldLabelRow as R, AiTextAreaShell as H } from "../AgentBuilder.styled.js";
+import { AGENT_CHAR_LIMITS as h } from "../constants/charLimits.js";
+import { AGENT_EDITOR_STYLE as k } from "../constants/editorStyle.js";
+import { useAgentBuilderContext as L } from "../context/AgentBuilderContext.js";
+import { buildAgentMentionItems as O, appTypeLabel as v, instructionsToEditorHtml as B, editorDocToInstructions as D } from "../utils/mentionSerialization.js";
+import { MentionPicker as F } from "./MentionPicker.js";
+import { BikEditor as M } from "../../../editor/BikEditor.js";
+const q = () => {
+  const {
+    value: t,
+    patch: i,
+    availableTools: r,
+    availableSubAgents: c,
+    applicationType: a,
+    instructionsResetKey: s
+  } = L(), m = x(null), [T, u] = y(t.instructions.length), d = f(
+    () => O(
+      r,
+      c,
+      v(a)
+    ),
+    [r, c, a]
+  ), b = f(
+    () => B(t.instructions, d),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t.id, s]
+  );
+  C(
+    () => u(t.instructions.length),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [s]
+  );
+  const S = () => {
+    const o = m.current?.getJSON() ?? null;
+    i({ instructions: D(o, r) });
+  };
+  return /* @__PURE__ */ l(I, { children: [
+    /* @__PURE__ */ l(R, { children: [
+      /* @__PURE__ */ n(A, { color: g.content.primary, children: "Instructions" }),
+      /* @__PURE__ */ l(E, { color: g.content.secondary, children: [
+        T,
+        "/",
+        h.instructions
+      ] })
+    ] }),
+    /* @__PURE__ */ n(H, { minHeight: "200px", children: /* @__PURE__ */ n(
+      M,
+      {
+        ref: m,
+        initialContent: b,
+        placeholder: "Write what this agent should do. Type @ to reference a tool or sub-agent.",
+        maxCharacters: h.instructions,
+        minHeight: "140px",
+        maxHeight: "320px",
+        style: { border: "none" },
+        editorStyle: k,
+        mentions: {
+          agents: d,
+          removeTriggerOnDismiss: !0,
+          renderDropdown: (o) => /* @__PURE__ */ n(F, { ...o }),
+          onSelect: (o) => {
+            const p = o.meta?.kind, e = String(o.id);
+            p === "tool" ? t.tools.includes(e) || i({ tools: [...t.tools, e] }) : p === "subagent" && (t.subagents.includes(e) || i({ subagents: [...t.subagents, e] }));
+          }
+        },
+        onChange: (o) => {
+          u(o.characterCount), S();
+        }
+      },
+      `${t.id}:${s}`
+    ) })
+  ] });
+};
+export {
+  q as InstructionsField
+};
+//# sourceMappingURL=InstructionsField.js.map

package/dist/esm/components/agent-builder/components/InstructionsField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstructionsField.js","sources":["../../../../../src/components/agent-builder/components/InstructionsField.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef } from '@src/editor';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\nexport const InstructionsField: React.FC = () => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tinstructionsResetKey,\n\t} = useAgentBuilderContext();\n\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.instructions.length);\n\n\tconst mentionItems = useMemo(\n\t\t() =>\n\t\t\tbuildAgentMentionItems(\n\t\t\t\tavailableTools,\n\t\t\t\tavailableSubAgents,\n\t\t\t\tappTypeLabel(applicationType),\n\t\t\t),\n\t\t[availableTools, availableSubAgents, applicationType],\n\t);\n\n\t// Mount-only initial HTML; recomputed (and the editor remounted via `key`)\n\t// when the agent changes OR `instructionsResetKey` bumps after an external\n\t// edit (e.g. a tool removed from the side list). `mentionItems` (read here)\n\t// rehydrates stored {{tool}}/{{subagent}} tokens into chips.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value.instructions, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[value.id, instructionsResetKey],\n\t);\n\n\t// Keep the counter honest after an external edit remounts the editor.\n\tuseEffect(\n\t\t() => setCount(value.instructions.length),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[instructionsResetKey],\n\t);\n\n\tconst syncFromEditor = () => {\n\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\tpatch({ instructions: editorDocToInstructions(doc, availableTools) });\n\t};\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Instructions</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{count}/{AGENT_CHAR_LIMITS.instructions}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight=\"200px\">\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={`${value.id}:${instructionsResetKey}`}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder=\"Write what this agent should do. Type @ to reference a tool or sub-agent.\"\n\t\t\t\t\tmaxCharacters={AGENT_CHAR_LIMITS.instructions}\n\t\t\t\t\tminHeight=\"140px\"\n\t\t\t\t\tmaxHeight=\"320px\"\n\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\teditorStyle={AGENT_EDITOR_STYLE}\n\t\t\t\t\tmentions={{\n\t\t\t\t\t\tagents: mentionItems,\n\t\t\t\t\t\tremoveTriggerOnDismiss: true,\n\t\t\t\t\t\trenderDropdown: (props) => <MentionPicker {...props} />,\n\t\t\t\t\t\tonSelect: (item) => {\n\t\t\t\t\t\t\tconst kind = (item.meta as unknown as MentionKindMeta | undefined)\n\t\t\t\t\t\t\t\t?.kind;\n\t\t\t\t\t\t\tconst id = String(item.id);\n\t\t\t\t\t\t\tif (kind === 'tool') {\n\t\t\t\t\t\t\t\tif (!value.tools.includes(id)) {\n\t\t\t\t\t\t\t\t\tpatch({ tools: [...value.tools, id] });\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else if (kind === 'subagent') {\n\t\t\t\t\t\t\t\tif (!value.subagents.includes(id)) {\n\t\t\t\t\t\t\t\t\tpatch({ subagents: [...value.subagents, id] });\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}}\n\t\t\t\t\tonChange={(snapshot) => {\n\t\t\t\t\t\tsetCount(snapshot.characterCount);\n\t\t\t\t\t\tsyncFromEditor();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["InstructionsField","value","patch","availableTools","availableSubAgents","applicationType","instructionsResetKey","useAgentBuilderContext","editorRef","useRef","count","setCount","useState","mentionItems","useMemo","buildAgentMentionItems","appTypeLabel","initialHtml","instructionsToEditorHtml","useEffect","syncFromEditor","doc","editorDocToInstructions","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AGENT_CHAR_LIMITS","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","item","kind","id","snapshot"],"mappings":";;;;;;;;;;;AAqBO,MAAMA,IAA8B,MAAM;AAChD,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,EAAA,IACGC,EAAA,GAEEC,IAAYC,EAAqB,IAAI,GACrC,CAACC,GAAOC,CAAQ,IAAIC,EAASX,EAAM,aAAa,MAAM,GAEtDY,IAAeC;AAAA,IACpB,MACCC;AAAA,MACCZ;AAAA,MACAC;AAAA,MACAY,EAAaX,CAAe;AAAA,IAAA;AAAA,IAE9B,CAACF,GAAgBC,GAAoBC,CAAe;AAAA,EAAA,GAO/CY,IAAcH;AAAA,IACnB,MAAMI,EAAyBjB,EAAM,cAAcY,CAAY;AAAA;AAAA,IAE/D,CAACZ,EAAM,IAAIK,CAAoB;AAAA,EAAA;AAIhC,EAAAa;AAAA,IACC,MAAMR,EAASV,EAAM,aAAa,MAAM;AAAA;AAAA,IAExC,CAACK,CAAoB;AAAA,EAAA;AAGtB,QAAMc,IAAiB,MAAM;AAC5B,UAAMC,IAAMb,EAAU,SAAS,QAAA,KAAa;AAC5C,IAAAN,EAAM,EAAE,cAAcoB,EAAwBD,GAAKlB,CAAc,GAAG;AAAA,EACrE;AAEA,2BACEoB,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAS,UAAA,gBAAY;AAAA,MACvD,gBAAAJ,EAACK,GAAA,EAAY,OAAOD,EAAO,QAAQ,WACjC,UAAA;AAAA,QAAAlB;AAAA,QAAM;AAAA,QAAEoB,EAAkB;AAAA,MAAA,EAAA,CAC5B;AAAA,IAAA,GACD;AAAA,IAEA,gBAAAJ,EAACK,GAAA,EAAgB,WAAU,SAC1B,UAAA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEA,KAAKxB;AAAA,QACL,gBAAgBS;AAAA,QAChB,aAAY;AAAA,QACZ,eAAea,EAAkB;AAAA,QACjC,WAAU;AAAA,QACV,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,OAAA;AAAA,QACjB,aAAaG;AAAA,QACb,UAAU;AAAA,UACT,QAAQpB;AAAA,UACR,wBAAwB;AAAA,UACxB,gBAAgB,CAACqB,MAAU,gBAAAR,EAACS,GAAA,EAAe,GAAGD,GAAO;AAAA,UACrD,UAAU,CAACE,MAAS;AACnB,kBAAMC,IAAQD,EAAK,MAChB,MACGE,IAAK,OAAOF,EAAK,EAAE;AACzB,YAAIC,MAAS,SACPpC,EAAM,MAAM,SAASqC,CAAE,KAC3BpC,EAAM,EAAE,OAAO,CAAC,GAAGD,EAAM,OAAOqC,CAAE,GAAG,IAE5BD,MAAS,eACdpC,EAAM,UAAU,SAASqC,CAAE,KAC/BpC,EAAM,EAAE,WAAW,CAAC,GAAGD,EAAM,WAAWqC,CAAE,GAAG;AAAA,UAGhD;AAAA,QAAA;AAAA,QAED,UAAU,CAACC,MAAa;AACvB,UAAA5B,EAAS4B,EAAS,cAAc,GAChCnB,EAAA;AAAA,QACD;AAAA,MAAA;AAAA,MA/BK,GAAGnB,EAAM,EAAE,IAAIK,CAAoB;AAAA,IAAA,EAgCzC,CACD;AAAA,EAAA,GACD;AAEF;"}

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

@@ -0,0 +1,12 @@
+import { MentionDropdownRenderProps } from '../../../editor';
+import { default as React } from 'react';
+/**
+ * `@` reference picker. Drills:
+ *   root → Tools → <source> (Manifest / Shopify / …) → tool
+ *        → Sub-agent → sub-agent
+ * ("Add condition" and "Variables" are intentionally not shown yet.)
+ *
+ * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the
+ * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.
+ */
+export declare const MentionPicker: React.FC<MentionDropdownRenderProps>;

package/dist/esm/components/agent-builder/components/MentionPicker.js

@@ -0,0 +1,154 @@
+import { jsxs as f, jsx as b } from "react/jsx-runtime";
+import L from "../../../assets/icons/chevronLeft.svg.js";
+import P from "../../../assets/icons/chevronRight.svg.js";
+import { useState as w, useMemo as h, useEffect as C, useRef as O } from "react";
+import g from "styled-components";
+import { TitleSmall as T, BodySecondary as j } from "../../TypographyStyle.js";
+import { COLORS as n } from "../../../constants/Theme.js";
+import { toolSourceLabel as B } from "../utils/mentionSerialization.js";
+const M = [
+  { key: "tool", label: "Tools" },
+  { key: "subagent", label: "Sub-agent" }
+], s = (t) => t.meta, E = (t) => s(t)?.plainLabel ?? t.label, Y = ({
+  items: t,
+  onSelect: x,
+  registerKeyHandler: c
+}) => {
+  const [o, m] = w(null), [a, k] = w(null), [v, u] = w(0), d = h(
+    () => t.filter((e) => s(e)?.kind === "tool"),
+    [t]
+  ), A = h(
+    () => t.filter((e) => s(e)?.kind === "subagent"),
+    [t]
+  ), I = h(() => {
+    const e = [];
+    return d.forEach((r) => {
+      const p = s(r)?.source ?? "other";
+      e.includes(p) || e.push(p);
+    }), e;
+  }, [d]), l = o ? o === "subagent" ? { title: "Sub-agent", onBack: () => m(null) } : a ? { title: B(a), onBack: () => k(null) } : { title: "Tools", onBack: () => m(null) } : null, i = h(() => o ? o === "subagent" ? A.map((e) => ({
+    id: String(e.id),
+    label: E(e),
+    drillsIn: !1,
+    onActivate: () => x(e)
+  })) : a ? d.filter((e) => (s(e)?.source ?? "other") === a).map((e) => ({
+    id: String(e.id),
+    label: E(e),
+    drillsIn: !1,
+    onActivate: () => x(e)
+  })) : I.map((e) => ({
+    id: e,
+    label: B(e),
+    drillsIn: !0,
+    onActivate: () => k(e)
+  })) : M.map((e) => ({
+    id: e.key,
+    label: e.label,
+    drillsIn: !0,
+    onActivate: () => {
+      m(e.key), k(null);
+    }
+  })), [o, a, d, A, I, x]);
+  C(() => u(0), [o, a, t]);
+  const S = O({ rows: i, activeIndex: v, header: l });
+  S.current = { rows: i, activeIndex: v, header: l }, C(() => {
+    if (c)
+      return c((e) => {
+        const { rows: r, activeIndex: p, header: $ } = S.current;
+        switch (e.key) {
+          case "ArrowDown":
+            return r.length && u((y) => (y + 1) % r.length), !0;
+          case "ArrowUp":
+            return r.length && u((y) => (y + r.length - 1) % r.length), !0;
+          case "ArrowRight":
+          case "Enter":
+            return r[p]?.onActivate(), !0;
+          case "ArrowLeft":
+            return $ ? ($.onBack(), !0) : !1;
+          default:
+            return !1;
+        }
+      }), () => c(null);
+  }, [c]);
+  const R = o ? i.length && !i[0].drillsIn ? "items" : "sources" : "categories";
+  return /* @__PURE__ */ f(N, { className: `bik-mention-picker bik-mention-picker--${R}`, children: [
+    l && /* @__PURE__ */ f(
+      D,
+      {
+        type: "button",
+        onClick: l.onBack,
+        style: { background: n.surface.subdued },
+        children: [
+          /* @__PURE__ */ b(L, { width: 12, height: 12 }),
+          /* @__PURE__ */ f(T, { children: [
+            " ",
+            l.title
+          ] })
+        ]
+      }
+    ),
+    i.length === 0 ? /* @__PURE__ */ b(G, { children: o === "subagent" ? "No sub-agents available" : "No tools available" }) : i.map((e, r) => /* @__PURE__ */ f(
+      z,
+      {
+        type: "button",
+        $active: r === v,
+        onMouseEnter: () => u(r),
+        onClick: e.onActivate,
+        children: [
+          /* @__PURE__ */ b(j, { color: n.content.primary, children: e.label }),
+          e.drillsIn && /* @__PURE__ */ b(P, { width: 12, height: 12 })
+        ]
+      },
+      e.id
+    ))
+  ] });
+}, N = g.div`
+	display: flex;
+	flex-direction: column;
+	min-width: 240px;
+	max-height: 280px;
+	overflow-y: auto;
+	background: ${n.surface.standard};
+	border: 1px solid ${n.stroke.primary};
+	border-radius: 4px;
+	box-shadow: 0px -2px 8px 0px #0000001f;
+`, z = g.button`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 2px;
+	width: 100%;
+	padding: 8px 10px;
+	height: 48px;
+	border: none;
+	border-bottom: 1px solid ${n.stroke.primary};
+	background: ${(t) => t.$active ? n.surface.subdued : "transparent"};
+	cursor: pointer;
+	text-align: left;
+
+	&:hover {
+		background: ${n.surface.subdued};
+	}
+`, D = g.button`
+	display: flex;
+	align-items: center;
+	padding: 12px 16px;
+	border: none;
+	border-bottom: 1px solid ${n.stroke.primary};
+	background: transparent;
+	cursor: pointer;
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 600;
+	height: 48px;
+	gap: 4px;
+`, G = g.div`
+	padding: 12px 10px;
+	font-family: Inter;
+	font-size: 13px;
+	color: ${n.content.secondary};
+`;
+export {
+  Y as MentionPicker
+};
+//# sourceMappingURL=MentionPicker.js.map

package/dist/esm/components/agent-builder/components/MentionPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\n\ntype Category = 'tool' | 'subagent';\n\nconst CATEGORIES: { key: Category; label: string }[] = [\n\t{ key: 'tool', label: 'Tools' },\n\t{ key: 'subagent', label: 'Sub-agent' },\n];\n\nconst metaOf = (item: MentionItem): MentionKindMeta | undefined =>\n\titem.meta as unknown as MentionKindMeta | undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. */\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/** Drill-in rows show a chevron; leaf (selectable) rows do not. */\n\tdrillsIn: boolean;\n\tonActivate: () => void;\n};\n\n/**\n * `@` reference picker. Drills:\n *   root → Tools → <source> (Manifest / Shopify / …) → tool\n *        → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n *\n * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionDropdownRenderProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\n\t// Title shown above the current view, and whether we can go back a level.\n\tconst header: { title: string; onBack: () => void } | null = !category\n\t\t? null\n\t\t: category === 'subagent'\n\t\t? { title: 'Sub-agent', onBack: () => setCategory(null) }\n\t\t: source\n\t\t? { title: toolSourceLabel(source), onBack: () => setSource(null) }\n\t\t: { title: 'Tools', onBack: () => setCategory(null) };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!category) {\n\t\t\treturn CATEGORIES.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (category === 'subagent') {\n\t\t\treturn subAgents.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t\t}\n\t\tif (!source) {\n\t\t\treturn sources.map((s) => ({\n\t\t\t\tid: s,\n\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\treturn tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t}, [category, source, tools, subAgents, sources, onSelect]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [category, source, items]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tr[i]?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !category\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tstyle={{ background: COLORS.surface.subdued }}\n\t\t\t\t>\n\t\t\t\t\t<ChevronLeft width={12} height={12} />\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{category === 'subagent'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t{row.drillsIn && <ChevronRight width={12} height={12} />}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 280px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["CATEGORIES","metaOf","item","rowLabel","MentionPicker","items","onSelect","registerKeyHandler","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","tools","useMemo","i","subAgents","sources","acc","t","s","header","toolSourceLabel","rows","c","useEffect","navRef","useRef","event","h","p","variant","jsxs","PickerCard","PickerBack","COLORS","jsx","ChevronLeft","TitleSmall","PickerEmpty","row","PickerRow","BodySecondary","ChevronRight","styled"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+interface RichTextFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    maxLength: number;
+    placeholder?: string;
+    minHeight?: string;
+    /** Changing this remounts the editor with fresh content (e.g. agent id). */
+    resetKey?: string;
+    'data-test'?: string;
+}
+/**
+ * A rich (BikEditor-backed) plain-text field — same look/feel/font as the
+ * Instructions editor, but WITHOUT mentions. Content is stored as plain text:
+ * deserialized via `instructionsToEditorHtml` (no mention items → just escaped
+ * paragraphs) and serialized back with `editorDocToInstructions` (no tools →
+ * plain text). Used for Guardrails so both Step-3 inputs match visually.
+ */
+export declare const RichTextField: React.FC<RichTextFieldProps>;
+export {};