@bikdotai/bik-component-library 0.0.839 → 0.0.840-beta.0

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

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

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

@@ -1 +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\tSectionBodyWrap,\n} from '../AgentBuilder.styled';\nimport { AiTextArea } from '../components/AiTextArea';\nimport { StepSectionHeader } from '../components/StepSectionHeader';\nimport { STEP_DEFINITIONS } from '../constants/steps';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\n\nconst STEP = STEP_DEFINITIONS[3];\n\nexport const Step4HandoverRules: React.FC = () => {\n\tconst { value, patch, charLimits } = 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<SectionBodyWrap>\n\t\t\t\t<AiTextArea\n\t\t\t\t\tdata-test=\"handover-when\"\n\t\t\t\t\tlabel=\"Handover when\"\n\t\t\t\t\tvalue={handover.when}\n\t\t\t\t\tonChange={(text) => patch({ handover: { ...handover, when: text } })}\n\t\t\t\t\tmaxLength={charLimits.handoverWhen}\n\t\t\t\t\tplaceholder=\"e.g. Hand over if the customer is angry or requests a human agent.\"\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t/>\n\n\t\t\t\t<FieldBlock>\n\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\tHandover method\n\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t<CardRow>\n\t\t\t\t\t\t<RadioCard\n\t\t\t\t\t\t\tdata-test=\"handover-method-default\"\n\t\t\t\t\t\t\tselected={handover.method === 'default'}\n\t\t\t\t\t\t\tonClick={() => setMethod('default')}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\t\tisActive={handover.method === 'default'}\n\t\t\t\t\t\t\t\tonValueChange={() => setMethod('default')}\n\t\t\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\t\t\tactiveColor={COLORS.content.brand}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\tUse default settings\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\tDefined in Customize &gt; Agent handover\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</RadioCardText>\n\t\t\t\t\t\t</RadioCard>\n\n\t\t\t\t\t\t<RadioCard\n\t\t\t\t\t\t\tdata-test=\"handover-method-specific\"\n\t\t\t\t\t\t\tselected={handover.method === 'specific_channels'}\n\t\t\t\t\t\t\tonClick={() => setMethod('specific_channels')}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\t\tisActive={handover.method === 'specific_channels'}\n\t\t\t\t\t\t\t\tonValueChange={() => setMethod('specific_channels')}\n\t\t\t\t\t\t\t\tskipSelectingOff\n\t\t\t\t\t\t\t\tactiveColor={COLORS.content.brand}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<RadioCardText>\n\t\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\tChoose specific channels\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\tAlways hands over regardless of business hours.\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</RadioCardText>\n\t\t\t\t\t\t</RadioCard>\n\t\t\t\t\t</CardRow>\n\t\t\t\t</FieldBlock>\n\t\t\t</SectionBodyWrap>\n\t\t</div>\n\t);\n};\n"],"names":["STEP","STEP_DEFINITIONS","Step4HandoverRules","value","patch","charLimits","useAgentBuilderContext","handover","setMethod","method","jsxs","jsx","StepSectionHeader","SectionBodyWrap","AiTextArea","text","FieldBlock","TitleSmall","COLORS","CardRow","RadioCard","RadioButton","RadioCardText","BodyCaption"],"mappings":";;;;;;;;;AAiBA,MAAMA,IAAOC,EAAiB,CAAC,GAElBC,IAA+B,MAAM;AACjD,QAAM,EAAE,OAAAC,GAAO,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAA,GAC/B,EAAE,UAAAC,MAAaJ,GAEfK,IAAY,CAACC,MAClBL,EAAM,EAAE,UAAU,EAAE,GAAGG,GAAU,QAAAE,EAAA,GAAU;AAE5C,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,2CACd,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAkB,OAAOZ,EAAK,OAAO,QAAQA,EAAK,QAAQ;AAAA,sBAE1Da,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,aAAU;AAAA,UACV,OAAM;AAAA,UACN,OAAOP,EAAS;AAAA,UAChB,UAAU,CAACQ,MAASX,EAAM,EAAE,UAAU,EAAE,GAAGG,GAAU,MAAMQ,EAAA,GAAQ;AAAA,UACnE,WAAWV,EAAW;AAAA,UACtB,aAAY;AAAA,UACZ,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,wBAGVW,GAAA,EACA,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAS,UAAA,mBAE3C;AAAA,0BACCC,GAAA,EACA,UAAA;AAAA,UAAA,gBAAAT;AAAA,YAACU;AAAA,YAAA;AAAA,cACA,aAAU;AAAA,cACV,UAAUb,EAAS,WAAW;AAAA,cAC9B,SAAS,MAAMC,EAAU,SAAS;AAAA,cAElC,UAAA;AAAA,gBAAA,gBAAAG;AAAA,kBAACU;AAAA,kBAAA;AAAA,oBACA,UAAUd,EAAS,WAAW;AAAA,oBAC9B,eAAe,MAAMC,EAAU,SAAS;AAAA,oBACxC,kBAAgB;AAAA,oBAChB,aAAaU,EAAO,QAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,kCAE5BI,GAAA,EACA,UAAA;AAAA,kBAAA,gBAAAX,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAS,UAAA,wBAE3C;AAAA,oCACCK,GAAA,EAAY,OAAOL,EAAO,QAAQ,WAAW,UAAA,wCAAA,CAE9C;AAAA,gBAAA,EAAA,CACD;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGD,gBAAAR;AAAA,YAACU;AAAA,YAAA;AAAA,cACA,aAAU;AAAA,cACV,UAAUb,EAAS,WAAW;AAAA,cAC9B,SAAS,MAAMC,EAAU,mBAAmB;AAAA,cAE5C,UAAA;AAAA,gBAAA,gBAAAG;AAAA,kBAACU;AAAA,kBAAA;AAAA,oBACA,UAAUd,EAAS,WAAW;AAAA,oBAC9B,eAAe,MAAMC,EAAU,mBAAmB;AAAA,oBAClD,kBAAgB;AAAA,oBAChB,aAAaU,EAAO,QAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,kCAE5BI,GAAA,EACA,UAAA;AAAA,kBAAA,gBAAAX,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAS,UAAA,4BAE3C;AAAA,oCACCK,GAAA,EAAY,OAAOL,EAAO,QAAQ,WAAW,UAAA,kDAAA,CAE9C;AAAA,gBAAA,EAAA,CACD;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACD,EAAA,CACD;AAAA,MAAA,EAAA,CACD;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}
+{"version":3,"file":"Step4HandoverRules.js","sources":["../../../../../src/components/agent-builder/steps/Step4HandoverRules.tsx"],"sourcesContent":["import React from 'react';\nimport { SectionBodyWrap } from '../AgentBuilder.styled';\nimport { AiTextArea } from '../components/AiTextArea';\nimport { StepSectionHeader } from '../components/StepSectionHeader';\nimport { STEP_DEFINITIONS } from '../constants/steps';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\n\nconst STEP = STEP_DEFINITIONS[3];\n\n// The \"Handover method\" radio section was removed: the method is UI-only and the\n// consumer always sends the seeded default ('default'); handover.method stays on\n// the value shape untouched.\nexport const Step4HandoverRules: React.FC = () => {\n\tconst { value, patch, charLimits } = useAgentBuilderContext();\n\tconst { handover } = value;\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<SectionBodyWrap>\n\t\t\t\t<AiTextArea\n\t\t\t\t\tdata-test=\"handover-when\"\n\t\t\t\t\tlabel=\"Handover when\"\n\t\t\t\t\tvalue={handover.when}\n\t\t\t\t\tonChange={(text) => patch({ handover: { ...handover, when: text } })}\n\t\t\t\t\tmaxLength={charLimits.handoverWhen}\n\t\t\t\t\tplaceholder=\"e.g. Hand over if the customer is angry or asks for a human three times. Hand over if the order value exceeds ₹5,000.\"\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t/>\n\t\t\t</SectionBodyWrap>\n\t\t</div>\n\t);\n};\n"],"names":["STEP","STEP_DEFINITIONS","Step4HandoverRules","value","patch","charLimits","useAgentBuilderContext","handover","jsxs","jsx","StepSectionHeader","SectionBodyWrap","AiTextArea","text"],"mappings":";;;;;;AAOA,MAAMA,IAAOC,EAAiB,CAAC,GAKlBC,IAA+B,MAAM;AACjD,QAAM,EAAE,OAAAC,GAAO,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAA,GAC/B,EAAE,UAAAC,MAAaJ;AAErB,SACC,gBAAAK,EAAC,OAAA,EAAI,WAAU,2CACd,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAkB,OAAOV,EAAK,OAAO,QAAQA,EAAK,QAAQ;AAAA,sBAE1DW,GAAA,EACA,UAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,OAAM;AAAA,QACN,OAAOL,EAAS;AAAA,QAChB,UAAU,CAACM,MAAST,EAAM,EAAE,UAAU,EAAE,GAAGG,GAAU,MAAMM,EAAA,GAAQ;AAAA,QACnE,WAAWR,EAAW;AAAA,QACtB,aAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,EACX,CACD;AAAA,EAAA,GACD;AAEF;"}

package/dist/esm/components/agent-builder/utils/mentionSerialization.js

@@ -1,8 +1,8 @@
-import { TOOL_SOURCE_LABELS as m, ToolSource as l } from "../constants/tools.js";
-const g = (e, t = "Manifest") => e ? m[e] ?? e : t, L = (e) => {
+import { TOOL_SOURCE_LABELS as u, ToolSource as r } from "../constants/tools.js";
+const g = (e, t = "Manifest") => e ? u[e] ?? e : t, E = (e) => {
   const t = e ? String(e) : "";
   return t === "BIK" ? "BIK" : t === "BSP" ? "BSP" : "Manifest";
-}, E = (e, t, n = "Manifest") => [
+}, I = (e, t, n = "Manifest") => [
   ...e.map(
     (o) => ({
       id: o.tool_id,
@@ -21,24 +21,24 @@ const g = (e, t = "Manifest") => e ? m[e] ?? e : t, L = (e) => {
       meta: { kind: "subagent", plainLabel: o.name }
     })
   )
-], b = (e) => e.tool_key === "send_slack_message" ? String(e.params.channelId?.value ?? "").trim() || "Send Slack message" : String(e.params.sendTo?.value ?? "").split(",").map((t) => t.trim()).filter(Boolean)[0] || "Handover to email", k = (e) => e.name || "Rest API", S = (e) => {
+], b = (e) => e.tool_key === "send_slack_message" ? String(e.params.channelId?.value ?? "").trim() || "Send Slack message" : String(e.params.sendTo?.value ?? "").split(",").map((t) => t.trim()).filter(Boolean)[0] || "Send Email", k = (e) => e.name || "Rest API", S = (e) => {
   const t = k(e);
   return {
     id: e.id,
-    label: `${m[l.RestApi]} : ${t}`,
-    meta: { kind: "tool", plainLabel: t, source: l.RestApi }
+    label: `${u[r.RestApi]} : ${t}`,
+    meta: { kind: "tool", plainLabel: t, source: r.RestApi }
   };
-}, f = (e) => {
-  const t = e.tool_key === "send_slack_message" ? l.Slack : l.EmailHandover, n = b(e);
+}, $ = (e) => {
+  const t = e.tool_key === "send_slack_message" ? r.Slack : r.EmailHandover, n = b(e);
   return {
     id: e.id,
-    label: `${m[t]} : ${n}`,
+    label: `${u[t]} : ${n}`,
     meta: { kind: "tool", plainLabel: n, source: t }
   };
 }, y = (e = [], t = []) => [
   ...t.map(S),
-  ...e.map(f)
-], i = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), r = (e) => i(e).replace(/"/g, "&quot;"), u = (e, t, n) => `<span data-type="mentionAgent" class="bik-mention bik-mention--agent" data-id="${r(e)}" data-label="${r(t)}" data-kind="${r(n)}">${i(t)}</span>`, A = (e, t, n) => u(e, t, n), $ = (e) => {
+  ...e.map($)
+], i = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), l = (e) => i(e).replace(/"/g, "&quot;"), d = (e, t, n) => `<span data-type="mentionAgent" class="bik-mention bik-mention--agent" data-id="${l(e)}" data-label="${l(t)}" data-kind="${l(n)}">${i(t)}</span>`, A = (e, t, n) => d(e, t, n), f = (e) => {
   const t = /* @__PURE__ */ new Map();
   for (const n of e) {
     const o = n.meta;
@@ -54,7 +54,7 @@ const g = (e, t = "Manifest") => e ? m[e] ?? e : t, L = (e) => {
     const s = t.get(a[1]);
     if (s) {
       const p = s.meta.kind;
-      n += u(String(s.id), s.label, p);
+      n += d(String(s.id), s.label, p);
     } else
       n += i(a[0]);
     o = c.lastIndex;
@@ -63,9 +63,9 @@ const g = (e, t = "Manifest") => e ? m[e] ?? e : t, L = (e) => {
 }, M = (e, t = []) => {
   if (!e)
     return "";
-  const n = $(t);
+  const n = f(t);
   return e.split(/\n{2,}/).map((o) => `<p>${T(o, n)}</p>`).join("");
-}, _ = (e, t, n) => (t ?? (n.has(e) ? "tool" : "subagent")) === "tool" ? `{{tool:${e}}}` : `{{subagent:${e}}}`, d = (e, t) => {
+}, L = (e, t, n) => (t ?? (n.has(e) ? "tool" : "subagent")) === "tool" ? `{{tool:${e}}}` : `{{subagent:${e}}}`, m = (e, t) => {
   switch (e.type) {
     case "text":
       return e.text ?? "";
@@ -75,7 +75,7 @@ const g = (e, t = "Manifest") => e ? m[e] ?? e : t, L = (e) => {
       if (n == null)
         return "";
       const o = e.attrs?.kind;
-      return _(
+      return L(
         String(n),
         o == null ? null : String(o),
         t
@@ -86,30 +86,42 @@ const g = (e, t = "Manifest") => e ? m[e] ?? e : t, L = (e) => {
     case "hardBreak":
       return `
 `;
+    case "orderedList":
+    case "bulletList": {
+      const n = e.type === "orderedList";
+      return (e.content ?? []).map(
+        (o, a) => `${n ? `${a + 1}.` : "-"} ${m(
+          o,
+          t
+        ).replace(/\n+$/, "")}`
+      ).join(`
+`) + `
+`;
+    }
     default: {
-      const n = (e.content ?? []).map((a) => d(a, t)).join("");
+      const n = (e.content ?? []).map((a) => m(a, t)).join("");
       return ["paragraph", "heading", "listItem", "blockquote"].includes(e.type) ? `${n}
 ` : n;
     }
   }
-}, v = (e, t) => {
+}, B = (e, t) => {
   if (!e)
     return "";
   const n = new Set(t.map((o) => o.tool_id));
-  return d(e, n).replace(
+  return m(e, n).replace(
     /\n+$/,
     ""
   );
 };
 export {
-  m as TOOL_SOURCE_LABELS,
-  L as appTypeLabel,
-  E as buildAgentMentionItems,
+  u as TOOL_SOURCE_LABELS,
+  E as appTypeLabel,
+  I as buildAgentMentionItems,
   y as buildCustomToolMentionItems,
   A as buildMentionHtml,
-  f as configToolMentionItem,
+  $ as configToolMentionItem,
   b as configToolName,
-  v as editorDocToInstructions,
+  B as editorDocToInstructions,
   M as instructionsToEditorHtml,
   S as restApiMentionItem,
   k as restApiToolName,

package/dist/esm/components/agent-builder/utils/mentionSerialization.js.map

@@ -1 +1 @@
-{"version":3,"file":"mentionSerialization.js","sources":["../../../../../src/components/agent-builder/utils/mentionSerialization.ts"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth';\nimport { MentionItem } from '@src/editor';\nimport {\n\tAgentTool,\n\tConfigToolConfig,\n\tRestApiToolConfig,\n\tSubAgentRef,\n} from '../AgentBuilder.model';\nimport { TOOL_SOURCE_LABELS, ToolSource } from '../constants/tools';\n\n/**\n * Serialization helpers between the BikEditor document and the firebase\n * `instructions` string.\n *\n * Firebase stores `instructions` as PLAIN TEXT with inline reference tokens:\n *   - `{{subagent:<agentId>}}` — hand-off to another agent\n *   - `{{tool:<tool_id>}}`     — an action the agent can call\n *   - `{{<variableName>}}`     — a template variable\n *\n * In the editor those references are inserted via the `@` mention menu (which we\n * populate with BOTH tools and sub-agents). Mention nodes keep their `id` in the\n * ProseMirror doc JSON (the rendered HTML drops it), so we serialize from the doc\n * JSON — not from HTML.\n */\n\nexport interface MentionKindMeta {\n\t/** Distinguishes a tool reference from a sub-agent reference. */\n\tkind: 'tool' | 'subagent';\n\t/** Plain item name (no prefix) shown in the picker dropdown rows. */\n\tplainLabel?: string;\n\t/** For tools: the source bucket (manifest / shopify / …) the picker groups by. */\n\tsource?: string;\n}\n\n// Source labels moved to constants/tools.ts; re-exported for existing importers.\nexport { TOOL_SOURCE_LABELS };\n\n/** Human label for a tool source; falls back to the host-app label, then the raw key. */\nexport const toolSourceLabel = (\n\tsource: string | undefined,\n\tfallback = 'Manifest',\n): string => {\n\tif (!source) {\n\t\treturn fallback;\n\t}\n\treturn TOOL_SOURCE_LABELS[source as ToolSource] ?? source;\n};\n\n/** Human label for the host application, used as the tool-chip prefix. */\nexport const appTypeLabel = (applicationType?: ApplicationType): string => {\n\tconst key = applicationType ? String(applicationType) : '';\n\tif (key === 'BIK') {\n\t\treturn 'BIK';\n\t}\n\tif (key === 'BSP') {\n\t\treturn 'BSP';\n\t}\n\treturn 'Manifest';\n};\n\n/**\n * Build the combined `@` mention list from the available tools + sub-agents.\n *\n * The `label` is the CHIP text shown once inserted — tools read\n * `\"<App> : <tool name>\"` (e.g. \"Manifest : Look up order\"), sub-agents read\n * `\"sub-agent: <name>\"`. `meta.plainLabel` is the un-prefixed name for the\n * picker rows, and `meta.kind` drives the `{{tool}}` / `{{subagent}}` colour.\n */\nexport const buildAgentMentionItems = (\n\ttools: AgentTool[],\n\tsubAgents: SubAgentRef[],\n\tappLabel = 'Manifest',\n): MentionItem[] => [\n\t...tools.map(\n\t\t(t): MentionItem => ({\n\t\t\tid: t.tool_id,\n\t\t\tlabel: `${toolSourceLabel(t.source, appLabel)} : ${t.display_name}`,\n\t\t\tmeta: {\n\t\t\t\tkind: 'tool',\n\t\t\t\tplainLabel: t.display_name,\n\t\t\t\tsource: t.source,\n\t\t\t},\n\t\t}),\n\t),\n\t...subAgents.map(\n\t\t(s): MentionItem => ({\n\t\t\tid: s.id,\n\t\t\tlabel: `sub-agent: ${s.name}`,\n\t\t\tmeta: { kind: 'subagent', plainLabel: s.name },\n\t\t}),\n\t),\n];\n\n/** Display name for a shared config tool: first recipient / channel, else generic. */\nexport const configToolName = (t: ConfigToolConfig): string => {\n\tif (t.tool_key === 'send_slack_message') {\n\t\treturn (\n\t\t\tString(t.params['channelId']?.value ?? '').trim() || 'Send Slack message'\n\t\t);\n\t}\n\treturn (\n\t\tString(t.params['sendTo']?.value ?? '')\n\t\t\t.split(',')\n\t\t\t.map((s) => s.trim())\n\t\t\t.filter(Boolean)[0] || 'Handover to email'\n\t);\n};\n\n/** Display name for a Rest API tool row / chip. */\nexport const restApiToolName = (t: RestApiToolConfig): string =>\n\tt.name || 'Rest API';\n\n/** The `@`-mention chip item for a Rest API tool (kind 'tool', restapi source). */\nexport const restApiMentionItem = (t: RestApiToolConfig): MentionItem => {\n\tconst name = restApiToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[ToolSource.RestApi]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source: ToolSource.RestApi },\n\t};\n};\n\n/** The `@`-mention chip item for a shared config tool (email / Slack). */\nexport const configToolMentionItem = (t: ConfigToolConfig): MentionItem => {\n\tconst source =\n\t\tt.tool_key === 'send_slack_message'\n\t\t\t? ToolSource.Slack\n\t\t\t: ToolSource.EmailHandover;\n\tconst name = configToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[source]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source },\n\t};\n};\n\n/**\n * Mention items for the inline-configured custom tools (Rest API + email / Slack)\n * so their `{{tool:<id>}}` tokens rehydrate as chips — they live on the agent\n * value, not in the catalog `availableTools`. Merge alongside\n * {@link buildAgentMentionItems} in the editor's mention list.\n */\nexport const buildCustomToolMentionItems = (\n\tconfigTools: ConfigToolConfig[] = [],\n\trestApiTools: RestApiToolConfig[] = [],\n): MentionItem[] => [\n\t...restApiTools.map(restApiMentionItem),\n\t...configTools.map(configToolMentionItem),\n];\n\nconst escapeHtml = (raw: string): string =>\n\traw.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n\nconst escapeAttr = (raw: string): string =>\n\tescapeHtml(raw).replace(/\"/g, '&quot;');\n\n/**\n * The HTML for a single mention chip. Must round-trip through the TipTap mention\n * extension's `parseHTML` (`span[data-type=\"mentionAgent\"]`, reading\n * `data-id`/`data-label`/`data-kind`) — see MentionExtension.ts. `normalizeHtml`\n * is taught to keep `data-type=\"mention…\"` spans so this survives to the parser.\n */\nconst mentionSpanHtml = (id: string, label: string, kind: string): string =>\n\t`<span data-type=\"mentionAgent\" class=\"bik-mention bik-mention--agent\"` +\n\t` data-id=\"${escapeAttr(id)}\" data-label=\"${escapeAttr(label)}\"` +\n\t` data-kind=\"${escapeAttr(kind)}\">${escapeHtml(label)}</span>`;\n\n/**\n * Public: HTML for one mention chip, for inserting at the cursor (e.g. when a\n * tool / sub-agent is added from the Step-3 side panel). Round-trips through the\n * same parser path as the rehydrated chips.\n */\nexport const buildMentionHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: 'tool' | 'subagent',\n): string => mentionSpanHtml(id, label, kind);\n\n/** `{{tool:<id>}}` / `{{subagent:<id>}}` → the mention item that produced them. */\nconst buildTokenLookup = (\n\tmentionItems: MentionItem[],\n): Map<string, MentionItem> => {\n\tconst byToken = new Map<string, MentionItem>();\n\tfor (const item of mentionItems) {\n\t\tconst meta = item.meta as unknown as MentionKindMeta | undefined;\n\t\t// Both tools and sub-agents are keyed by their id (a tool's id is its tool_id).\n\t\tif (meta?.kind === 'tool') {\n\t\t\tbyToken.set(`tool:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'subagent') {\n\t\t\tbyToken.set(`subagent:${String(item.id)}`, item);\n\t\t}\n\t}\n\treturn byToken;\n};\n\n// Matches the reference tokens we render as chips. Other `{{var}}` tokens fall\n// through untouched (left as literal text for the variable decoration).\nconst REFERENCE_TOKEN = /\\{\\{(tool:[^}]+|subagent:[^}]+)\\}\\}/g;\n\n/** Escape plain text, swapping recognised reference tokens for mention spans. */\nconst inlineToHtml = (\n\tsegment: string,\n\tbyToken: Map<string, MentionItem>,\n): string => {\n\tlet out = '';\n\tlet lastIndex = 0;\n\tREFERENCE_TOKEN.lastIndex = 0;\n\tlet match: RegExpExecArray | null;\n\twhile ((match = REFERENCE_TOKEN.exec(segment)) !== null) {\n\t\tout += escapeHtml(segment.slice(lastIndex, match.index));\n\t\tconst item = byToken.get(match[1]);\n\t\tif (item) {\n\t\t\tconst kind = (item.meta as unknown as MentionKindMeta).kind;\n\t\t\tout += mentionSpanHtml(String(item.id), item.label, kind);\n\t\t} else {\n\t\t\t// Tool/sub-agent no longer in the available list → keep the raw token.\n\t\t\tout += escapeHtml(match[0]);\n\t\t}\n\t\tlastIndex = REFERENCE_TOKEN.lastIndex;\n\t}\n\tout += escapeHtml(segment.slice(lastIndex));\n\treturn out.replace(/\\n/g, '<br>');\n};\n\n/**\n * Convert the stored instructions string into HTML for `BikEditor.initialContent`.\n * `{{tool:KEY}}` / `{{subagent:ID}}` tokens are rehydrated into mention chips\n * (resolved via `mentionItems`); any other `{{…}}` token is left as literal text\n * for the editor's variable decoration. Newlines become paragraph / line breaks.\n */\nexport const instructionsToEditorHtml = (\n\ttext: string,\n\tmentionItems: MentionItem[] = [],\n): string => {\n\tif (!text) {\n\t\treturn '';\n\t}\n\tconst byToken = buildTokenLookup(mentionItems);\n\treturn text\n\t\t.split(/\\n{2,}/)\n\t\t.map((para) => `<p>${inlineToHtml(para, byToken)}</p>`)\n\t\t.join('');\n};\n\ninterface ProseMirrorNode {\n\ttype: string;\n\ttext?: string;\n\tattrs?: Record<string, unknown>;\n\tcontent?: ProseMirrorNode[];\n}\n\n/**\n * The token for a mention node. Both tools and sub-agents store their id in the\n * node, so the token value is just that id — the kind only picks the prefix. The\n * node's `kind` attr is authoritative; `toolIds` is a fallback for older content\n * saved before the kind attr existed.\n */\nconst resolveMentionToken = (\n\tid: string,\n\tkind: string | null,\n\ttoolIds: Set<string>,\n): string => {\n\tconst resolved = kind ?? (toolIds.has(id) ? 'tool' : 'subagent');\n\treturn resolved === 'tool' ? `{{tool:${id}}}` : `{{subagent:${id}}}`;\n};\n\nconst nodeToText = (node: ProseMirrorNode, toolIds: Set<string>): string => {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn node.text ?? '';\n\t\tcase 'mentionAgent':\n\t\tcase 'mentionTeam': {\n\t\t\tconst id = node.attrs?.['id'];\n\t\t\tif (id == null) {\n\t\t\t\treturn '';\n\t\t\t}\n\t\t\tconst kind = node.attrs?.['kind'];\n\t\t\treturn resolveMentionToken(\n\t\t\t\tString(id),\n\t\t\t\tkind == null ? null : String(kind),\n\t\t\t\ttoolIds,\n\t\t\t);\n\t\t}\n\t\tcase 'variable':\n\t\t\treturn `{{${String(node.attrs?.['variableName'] ?? '')}}}`;\n\t\tcase 'hardBreak':\n\t\t\treturn '\\n';\n\t\tdefault: {\n\t\t\tconst inner = (node.content ?? [])\n\t\t\t\t.map((child) => nodeToText(child, toolIds))\n\t\t\t\t.join('');\n\t\t\t// Block nodes terminate with a newline so paragraphs stay separated.\n\t\t\tconst BLOCK_NODES = ['paragraph', 'heading', 'listItem', 'blockquote'];\n\t\t\treturn BLOCK_NODES.includes(node.type) ? `${inner}\\n` : inner;\n\t\t}\n\t}\n};\n\n/**\n * Convert a BikEditor document (from `ref.getJSON()`) into the firebase\n * instructions string, replacing mention nodes with `{{subagent:<id>}}` /\n * `{{tool:<tool_id>}}` tokens.\n */\nexport const editorDocToInstructions = (\n\tdoc: Record<string, unknown> | null,\n\ttools: AgentTool[],\n): string => {\n\tif (!doc) {\n\t\treturn '';\n\t}\n\tconst toolIds = new Set(tools.map((t) => t.tool_id));\n\treturn nodeToText(doc as unknown as ProseMirrorNode, toolIds).replace(\n\t\t/\\n+$/,\n\t\t'',\n\t);\n};\n"],"names":["toolSourceLabel","source","fallback","TOOL_SOURCE_LABELS","appTypeLabel","applicationType","key","buildAgentMentionItems","tools","subAgents","appLabel","t","s","configToolName","restApiToolName","restApiMentionItem","name","ToolSource","configToolMentionItem","buildCustomToolMentionItems","configTools","restApiTools","escapeHtml","raw","escapeAttr","mentionSpanHtml","id","label","kind","buildMentionHtml","buildTokenLookup","mentionItems","byToken","item","meta","REFERENCE_TOKEN","inlineToHtml","segment","out","lastIndex","match","instructionsToEditorHtml","text","para","resolveMentionToken","toolIds","nodeToText","node","inner","child","editorDocToInstructions","doc"],"mappings":"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"}
+{"version":3,"file":"mentionSerialization.js","sources":["../../../../../src/components/agent-builder/utils/mentionSerialization.ts"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth';\nimport { MentionItem } from '@src/editor';\nimport {\n\tAgentTool,\n\tConfigToolConfig,\n\tRestApiToolConfig,\n\tSubAgentRef,\n} from '../AgentBuilder.model';\nimport { TOOL_SOURCE_LABELS, ToolSource } from '../constants/tools';\n\n/**\n * Serialization helpers between the BikEditor document and the firebase\n * `instructions` string.\n *\n * Firebase stores `instructions` as PLAIN TEXT with inline reference tokens:\n *   - `{{subagent:<agentId>}}` — hand-off to another agent\n *   - `{{tool:<tool_id>}}`     — an action the agent can call\n *   - `{{<variableName>}}`     — a template variable\n *\n * In the editor those references are inserted via the `@` mention menu (which we\n * populate with BOTH tools and sub-agents). Mention nodes keep their `id` in the\n * ProseMirror doc JSON (the rendered HTML drops it), so we serialize from the doc\n * JSON — not from HTML.\n */\n\nexport interface MentionKindMeta {\n\t/** Distinguishes a tool reference from a sub-agent reference. */\n\tkind: 'tool' | 'subagent';\n\t/** Plain item name (no prefix) shown in the picker dropdown rows. */\n\tplainLabel?: string;\n\t/** For tools: the source bucket (manifest / shopify / …) the picker groups by. */\n\tsource?: string;\n}\n\n// Source labels moved to constants/tools.ts; re-exported for existing importers.\nexport { TOOL_SOURCE_LABELS };\n\n/** Human label for a tool source; falls back to the host-app label, then the raw key. */\nexport const toolSourceLabel = (\n\tsource: string | undefined,\n\tfallback = 'Manifest',\n): string => {\n\tif (!source) {\n\t\treturn fallback;\n\t}\n\treturn TOOL_SOURCE_LABELS[source as ToolSource] ?? source;\n};\n\n/** Human label for the host application, used as the tool-chip prefix. */\nexport const appTypeLabel = (applicationType?: ApplicationType): string => {\n\tconst key = applicationType ? String(applicationType) : '';\n\tif (key === 'BIK') {\n\t\treturn 'BIK';\n\t}\n\tif (key === 'BSP') {\n\t\treturn 'BSP';\n\t}\n\treturn 'Manifest';\n};\n\n/**\n * Build the combined `@` mention list from the available tools + sub-agents.\n *\n * The `label` is the CHIP text shown once inserted — tools read\n * `\"<App> : <tool name>\"` (e.g. \"Manifest : Look up order\"), sub-agents read\n * `\"sub-agent: <name>\"`. `meta.plainLabel` is the un-prefixed name for the\n * picker rows, and `meta.kind` drives the `{{tool}}` / `{{subagent}}` colour.\n */\nexport const buildAgentMentionItems = (\n\ttools: AgentTool[],\n\tsubAgents: SubAgentRef[],\n\tappLabel = 'Manifest',\n): MentionItem[] => [\n\t...tools.map(\n\t\t(t): MentionItem => ({\n\t\t\tid: t.tool_id,\n\t\t\tlabel: `${toolSourceLabel(t.source, appLabel)} : ${t.display_name}`,\n\t\t\tmeta: {\n\t\t\t\tkind: 'tool',\n\t\t\t\tplainLabel: t.display_name,\n\t\t\t\tsource: t.source,\n\t\t\t},\n\t\t}),\n\t),\n\t...subAgents.map(\n\t\t(s): MentionItem => ({\n\t\t\tid: s.id,\n\t\t\tlabel: `sub-agent: ${s.name}`,\n\t\t\tmeta: { kind: 'subagent', plainLabel: s.name },\n\t\t}),\n\t),\n];\n\n/** Display name for a shared config tool: first recipient / channel, else generic. */\nexport const configToolName = (t: ConfigToolConfig): string => {\n\tif (t.tool_key === 'send_slack_message') {\n\t\treturn (\n\t\t\tString(t.params['channelId']?.value ?? '').trim() || 'Send Slack message'\n\t\t);\n\t}\n\treturn (\n\t\tString(t.params['sendTo']?.value ?? '')\n\t\t\t.split(',')\n\t\t\t.map((s) => s.trim())\n\t\t\t.filter(Boolean)[0] || 'Send Email'\n\t);\n};\n\n/** Display name for a Rest API tool row / chip. */\nexport const restApiToolName = (t: RestApiToolConfig): string =>\n\tt.name || 'Rest API';\n\n/** The `@`-mention chip item for a Rest API tool (kind 'tool', restapi source). */\nexport const restApiMentionItem = (t: RestApiToolConfig): MentionItem => {\n\tconst name = restApiToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[ToolSource.RestApi]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source: ToolSource.RestApi },\n\t};\n};\n\n/** The `@`-mention chip item for a shared config tool (email / Slack). */\nexport const configToolMentionItem = (t: ConfigToolConfig): MentionItem => {\n\tconst source =\n\t\tt.tool_key === 'send_slack_message'\n\t\t\t? ToolSource.Slack\n\t\t\t: ToolSource.EmailHandover;\n\tconst name = configToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[source]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source },\n\t};\n};\n\n/**\n * Mention items for the inline-configured custom tools (Rest API + email / Slack)\n * so their `{{tool:<id>}}` tokens rehydrate as chips — they live on the agent\n * value, not in the catalog `availableTools`. Merge alongside\n * {@link buildAgentMentionItems} in the editor's mention list.\n */\nexport const buildCustomToolMentionItems = (\n\tconfigTools: ConfigToolConfig[] = [],\n\trestApiTools: RestApiToolConfig[] = [],\n): MentionItem[] => [\n\t...restApiTools.map(restApiMentionItem),\n\t...configTools.map(configToolMentionItem),\n];\n\nconst escapeHtml = (raw: string): string =>\n\traw.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n\nconst escapeAttr = (raw: string): string =>\n\tescapeHtml(raw).replace(/\"/g, '&quot;');\n\n/**\n * The HTML for a single mention chip. Must round-trip through the TipTap mention\n * extension's `parseHTML` (`span[data-type=\"mentionAgent\"]`, reading\n * `data-id`/`data-label`/`data-kind`) — see MentionExtension.ts. `normalizeHtml`\n * is taught to keep `data-type=\"mention…\"` spans so this survives to the parser.\n */\nconst mentionSpanHtml = (id: string, label: string, kind: string): string =>\n\t`<span data-type=\"mentionAgent\" class=\"bik-mention bik-mention--agent\"` +\n\t` data-id=\"${escapeAttr(id)}\" data-label=\"${escapeAttr(label)}\"` +\n\t` data-kind=\"${escapeAttr(kind)}\">${escapeHtml(label)}</span>`;\n\n/**\n * Public: HTML for one mention chip, for inserting at the cursor (e.g. when a\n * tool / sub-agent is added from the Step-3 side panel). Round-trips through the\n * same parser path as the rehydrated chips.\n */\nexport const buildMentionHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: 'tool' | 'subagent',\n): string => mentionSpanHtml(id, label, kind);\n\n/** `{{tool:<id>}}` / `{{subagent:<id>}}` → the mention item that produced them. */\nconst buildTokenLookup = (\n\tmentionItems: MentionItem[],\n): Map<string, MentionItem> => {\n\tconst byToken = new Map<string, MentionItem>();\n\tfor (const item of mentionItems) {\n\t\tconst meta = item.meta as unknown as MentionKindMeta | undefined;\n\t\t// Both tools and sub-agents are keyed by their id (a tool's id is its tool_id).\n\t\tif (meta?.kind === 'tool') {\n\t\t\tbyToken.set(`tool:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'subagent') {\n\t\t\tbyToken.set(`subagent:${String(item.id)}`, item);\n\t\t}\n\t}\n\treturn byToken;\n};\n\n// Matches the reference tokens we render as chips. Other `{{var}}` tokens fall\n// through untouched (left as literal text for the variable decoration).\nconst REFERENCE_TOKEN = /\\{\\{(tool:[^}]+|subagent:[^}]+)\\}\\}/g;\n\n/** Escape plain text, swapping recognised reference tokens for mention spans. */\nconst inlineToHtml = (\n\tsegment: string,\n\tbyToken: Map<string, MentionItem>,\n): string => {\n\tlet out = '';\n\tlet lastIndex = 0;\n\tREFERENCE_TOKEN.lastIndex = 0;\n\tlet match: RegExpExecArray | null;\n\twhile ((match = REFERENCE_TOKEN.exec(segment)) !== null) {\n\t\tout += escapeHtml(segment.slice(lastIndex, match.index));\n\t\tconst item = byToken.get(match[1]);\n\t\tif (item) {\n\t\t\tconst kind = (item.meta as unknown as MentionKindMeta).kind;\n\t\t\tout += mentionSpanHtml(String(item.id), item.label, kind);\n\t\t} else {\n\t\t\t// Tool/sub-agent no longer in the available list → keep the raw token.\n\t\t\tout += escapeHtml(match[0]);\n\t\t}\n\t\tlastIndex = REFERENCE_TOKEN.lastIndex;\n\t}\n\tout += escapeHtml(segment.slice(lastIndex));\n\treturn out.replace(/\\n/g, '<br>');\n};\n\n/**\n * Convert the stored instructions string into HTML for `BikEditor.initialContent`.\n * `{{tool:KEY}}` / `{{subagent:ID}}` tokens are rehydrated into mention chips\n * (resolved via `mentionItems`); any other `{{…}}` token is left as literal text\n * for the editor's variable decoration. Newlines become paragraph / line breaks.\n */\nexport const instructionsToEditorHtml = (\n\ttext: string,\n\tmentionItems: MentionItem[] = [],\n): string => {\n\tif (!text) {\n\t\treturn '';\n\t}\n\tconst byToken = buildTokenLookup(mentionItems);\n\treturn text\n\t\t.split(/\\n{2,}/)\n\t\t.map((para) => `<p>${inlineToHtml(para, byToken)}</p>`)\n\t\t.join('');\n};\n\ninterface ProseMirrorNode {\n\ttype: string;\n\ttext?: string;\n\tattrs?: Record<string, unknown>;\n\tcontent?: ProseMirrorNode[];\n}\n\n/**\n * The token for a mention node. Both tools and sub-agents store their id in the\n * node, so the token value is just that id — the kind only picks the prefix. The\n * node's `kind` attr is authoritative; `toolIds` is a fallback for older content\n * saved before the kind attr existed.\n */\nconst resolveMentionToken = (\n\tid: string,\n\tkind: string | null,\n\ttoolIds: Set<string>,\n): string => {\n\tconst resolved = kind ?? (toolIds.has(id) ? 'tool' : 'subagent');\n\treturn resolved === 'tool' ? `{{tool:${id}}}` : `{{subagent:${id}}}`;\n};\n\nconst nodeToText = (node: ProseMirrorNode, toolIds: Set<string>): string => {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn node.text ?? '';\n\t\tcase 'mentionAgent':\n\t\tcase 'mentionTeam': {\n\t\t\tconst id = node.attrs?.['id'];\n\t\t\tif (id == null) {\n\t\t\t\treturn '';\n\t\t\t}\n\t\t\tconst kind = node.attrs?.['kind'];\n\t\t\treturn resolveMentionToken(\n\t\t\t\tString(id),\n\t\t\t\tkind == null ? null : String(kind),\n\t\t\t\ttoolIds,\n\t\t\t);\n\t\t}\n\t\tcase 'variable':\n\t\t\treturn `{{${String(node.attrs?.['variableName'] ?? '')}}}`;\n\t\tcase 'hardBreak':\n\t\t\treturn '\\n';\n\t\tcase 'orderedList':\n\t\tcase 'bulletList': {\n\t\t\t// Flattening to plain text otherwise drops the list markers, so a\n\t\t\t// numbered / bulleted list looks \"removed\" after publish. Emit an\n\t\t\t// ordinal (\"1. \") / bullet (\"- \") prefix per item to preserve it.\n\t\t\tconst ordered = node.type === 'orderedList';\n\t\t\treturn (\n\t\t\t\t(node.content ?? [])\n\t\t\t\t\t.map(\n\t\t\t\t\t\t(item, i) =>\n\t\t\t\t\t\t\t`${ordered ? `${i + 1}.` : '-'} ${nodeToText(\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\ttoolIds,\n\t\t\t\t\t\t\t).replace(/\\n+$/, '')}`,\n\t\t\t\t\t)\n\t\t\t\t\t.join('\\n') + '\\n'\n\t\t\t);\n\t\t}\n\t\tdefault: {\n\t\t\tconst inner = (node.content ?? [])\n\t\t\t\t.map((child) => nodeToText(child, toolIds))\n\t\t\t\t.join('');\n\t\t\t// Block nodes terminate with a newline so paragraphs stay separated.\n\t\t\tconst BLOCK_NODES = ['paragraph', 'heading', 'listItem', 'blockquote'];\n\t\t\treturn BLOCK_NODES.includes(node.type) ? `${inner}\\n` : inner;\n\t\t}\n\t}\n};\n\n/**\n * Convert a BikEditor document (from `ref.getJSON()`) into the firebase\n * instructions string, replacing mention nodes with `{{subagent:<id>}}` /\n * `{{tool:<tool_id>}}` tokens.\n */\nexport const editorDocToInstructions = (\n\tdoc: Record<string, unknown> | null,\n\ttools: AgentTool[],\n): string => {\n\tif (!doc) {\n\t\treturn '';\n\t}\n\tconst toolIds = new Set(tools.map((t) => t.tool_id));\n\treturn nodeToText(doc as unknown as ProseMirrorNode, toolIds).replace(\n\t\t/\\n+$/,\n\t\t'',\n\t);\n};\n"],"names":["toolSourceLabel","source","fallback","TOOL_SOURCE_LABELS","appTypeLabel","applicationType","key","buildAgentMentionItems","tools","subAgents","appLabel","t","s","configToolName","restApiToolName","restApiMentionItem","name","ToolSource","configToolMentionItem","buildCustomToolMentionItems","configTools","restApiTools","escapeHtml","raw","escapeAttr","mentionSpanHtml","id","label","kind","buildMentionHtml","buildTokenLookup","mentionItems","byToken","item","meta","REFERENCE_TOKEN","inlineToHtml","segment","out","lastIndex","match","instructionsToEditorHtml","text","para","resolveMentionToken","toolIds","nodeToText","node","ordered","i","inner","child","editorDocToInstructions","doc"],"mappings":"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"}

package/dist/esm/components/agent-listing/AgentListing.js

@@ -1,33 +1,34 @@
 import { jsxs as z, jsx as i, Fragment as Q } from "react/jsx-runtime";
-import { useState as D, useCallback as n } from "react";
+import { useState as T, useCallback as n } from "react";
 import { TablePagination as U } from "../TablePagination/TablePagination.js";
 import { ZeroState as W } from "../zeroState/ZeroState.js";
 import { Page as X, Body as Y, EmptyHolder as _ } from "./AgentListing.styled.js";
 import { AgentListingFilters as ee } from "./AgentListingFilters.js";
 import { AgentListingHeader as te } from "./AgentListingHeader.js";
 import { AgentTable as ne } from "./AgentTable.js";
-import { DeleteAgentModal as oe } from "./DeleteAgentModal.js";
-import { unwrapDropdownValue as ie } from "../dropdown/utils.js";
-const ae = ({
-  config: L,
-  onSearchChange: f,
-  onSearchSubmit: r,
+import { AgentTableShimmer as oe } from "./AgentTableShimmer.js";
+import { DeleteAgentModal as ie } from "./DeleteAgentModal.js";
+import { unwrapDropdownValue as ae } from "../dropdown/utils.js";
+const re = ({
+  config: D,
+  onSearchChange: u,
+  onSearchSubmit: l,
   onFilterChange: g,
   onSortChange: d,
-  onNewAgent: A,
-  onBrowseTemplates: c,
-  onRunAgent: S,
-  onEditAgent: b,
-  onDeleteAgent: s,
-  onRowClick: m,
-  ...R
+  onNewAgent: f,
+  onBrowseTemplates: m,
+  onRunAgent: A,
+  onEditAgent: S,
+  onDeleteAgent: r,
+  onRowClick: c,
+  ...L
 }) => {
-  const [a, h] = D(
+  const [a, h] = T(
     null
-  ), [C, N] = D(!1), {
-    agents: w,
-    isLoading: p,
-    searchValue: T,
+  ), [b, w] = T(!1), {
+    agents: C,
+    isLoading: N,
+    searchValue: R,
     searchPlaceholder: v = "Search",
     filterOptions: x,
     filterPlaceholder: B = "Filters",
@@ -36,99 +37,103 @@ const ae = ({
     title: I = "AI Agents",
     headerActions: O,
     pagination: o,
-    emptyState: u,
+    emptyState: p,
     debugLog: y
-  } = L, k = !p && w.length === 0, t = n(
-    (e, ...l) => {
-      y && console.log(`[AgentListing] ${e}`, ...l);
+  } = D, k = !N && C.length === 0, t = n(
+    (e, ...s) => {
+      y && console.log(`[AgentListing] ${e}`, ...s);
     },
     [y]
   ), j = n(
     (e) => {
-      t("onSearchChange", e), f(e);
+      t("onSearchChange", e), u(e);
     },
-    [t, f]
+    [t, u]
   ), H = n(
     (e) => {
-      t("onSearchSubmit", e), r?.(e);
+      t("onSearchSubmit", e), l?.(e);
     },
-    [t, r]
-  ), V = n(
+    [t, l]
+  ), M = n(
     (e) => {
       t("onFilterChange", e), g?.(e);
     },
     [t, g]
-  ), q = n(
+  ), V = n(
     (e) => {
       t("onSortChange", e), d?.(e);
     },
     [t, d]
   ), P = n(() => {
-    t("onNewAgent"), A();
-  }, [t, A]), M = n(() => {
-    t("onBrowseTemplates"), c?.();
-  }, [t, c]), Z = n(
+    t("onNewAgent"), f();
+  }, [t, f]), q = n(() => {
+    t("onBrowseTemplates"), m?.();
+  }, [t, m]), Z = n(
     (e) => {
-      t("onRunAgent", e.id), S(e);
+      t("onRunAgent", e.id), A(e);
     },
-    [t, S]
+    [t, A]
   ), $ = n(
     (e) => {
-      t("onEditAgent", e.id), b(e);
+      t("onEditAgent", e.id), S(e);
     },
-    [t, b]
+    [t, S]
   ), G = n(
     (e) => {
-      t("onRowClick", e.id), m?.(e);
+      t("onRowClick", e.id), c?.(e);
     },
-    [t, m]
+    [t, c]
   ), J = n(
     (e) => {
       t("onDeleteAgent", e.id), h(e);
     },
     [t]
   ), K = n(async () => {
-    if (!(!a || !s)) {
-      N(!0);
+    if (!(!a || !r)) {
+      w(!0);
       try {
-        await s(a), h(null);
+        await r(a), h(null);
       } finally {
-        N(!1);
+        w(!1);
       }
     }
-  }, [a, s]);
-  return /* @__PURE__ */ z(X, { "data-test": R["data-test"] ?? "agent-listing", children: [
+  }, [a, r]);
+  return /* @__PURE__ */ z(X, { "data-test": L["data-test"] ?? "agent-listing", children: [
     /* @__PURE__ */ i(
       te,
       {
         title: I,
         onNewAgent: P,
-        onBrowseTemplates: c ? M : void 0,
+        onBrowseTemplates: m ? q : void 0,
         headerActions: O
       }
     ),
     /* @__PURE__ */ i(
       ee,
       {
-        searchValue: T,
+        searchValue: R,
         onSearchChange: j,
-        onSearchSubmit: r ? H : void 0,
+        onSearchSubmit: l ? H : void 0,
         searchPlaceholder: v,
         filterOptions: x,
-        onFilterChange: g ? V : void 0,
+        onFilterChange: g ? M : void 0,
         filterPlaceholder: B,
         sortOptions: E,
         selectedSort: F,
-        onSortChange: d ? q : void 0
+        onSortChange: d ? V : void 0
       }
     ),
-    /* @__PURE__ */ i(Y, { children: p || k ? /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i(Y, { children: N ? (
+      // Table-shaped shimmer: refetches (page/page-size/sort/search) load in
+      // place instead of collapsing to a spinner. Keep the page
+      // height by matching the current page size.
+      /* @__PURE__ */ i(oe, { rows: Math.min(o?.pageSize ?? 5, 10) })
+    ) : k ? /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
       W,
       {
-        isLoading: p,
-        title: u?.title ?? "No agents yet",
-        subTitle: u?.subTitle ?? "Create your first AI agent to start automating conversations.",
-        actionButton: u?.actionButton ?? {
+        title: p?.title ?? "No agents yet",
+        subTitle: p?.subTitle ?? "Create your first AI agent to start automating conversations.",
+        actionButton: p?.actionButton ?? {
           buttonText: "New AI agent",
           buttonType: "primary",
           size: "small",
@@ -139,11 +144,11 @@ const ae = ({
       /* @__PURE__ */ i(
         ne,
         {
-          agents: w,
+          agents: C,
           onRunAgent: Z,
           onEditAgent: $,
-          onDeleteAgent: s ? J : void 0,
-          onRowClick: m ? G : void 0
+          onDeleteAgent: r ? J : void 0,
+          onRowClick: c ? G : void 0
         }
       ),
       o && o.totalRows > 0 && /* @__PURE__ */ i(
@@ -155,25 +160,25 @@ const ae = ({
           hidePageSizeOptions: o.hidePageSizeOptions,
           updatePageNumber: o.onPageChange,
           updatePageSize: (e) => {
-            const l = Number(ie(e));
-            Number.isNaN(l) || o.onPageSizeChange(l);
+            const s = Number(ae(e));
+            Number.isNaN(s) || o.onPageSizeChange(s);
           }
         }
       )
     ] }) }),
     a && /* @__PURE__ */ i(
-      oe,
+      ie,
       {
         agentName: a.name,
-        isDeleting: C,
-        onClose: () => C ? void 0 : h(null),
+        isDeleting: b,
+        onClose: () => b ? void 0 : h(null),
         onConfirm: K
       }
     )
   ] });
 };
-ae.displayName = "AgentListing";
+re.displayName = "AgentListing";
 export {
-  ae as AgentListing
+  re as AgentListing
 };
 //# sourceMappingURL=AgentListing.js.map