@bikdotai/bik-component-library 0.0.821-beta.8 → 0.0.821

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

@@ -1,63 +1,71 @@
-import { jsxs as a, Fragment as tt, jsx as o } from "react/jsx-runtime";
-import et from "../../../assets/icons/cross.svg.js";
-import { useState as r, useMemo as nt, useRef as p, useCallback as l } from "react";
-import { TitleRegular as ot, BodySecondary as rt } from "../../TypographyStyle.js";
+import { jsxs as a, Fragment as et, jsx as o } from "react/jsx-runtime";
+import nt from "../../../assets/icons/cross.svg.js";
+import ot, { useState as r, useMemo as rt, useRef as p, useCallback as l } from "react";
+import { TitleRegular as st, BodySecondary as it } from "../../TypographyStyle.js";
 import { COLORS as A } from "../../../constants/Theme.js";
-import { SubAgentScrim as st, SubAgentPanel as it, SubAgentPanelHeader as at, SubAgentPanelHeaderText as lt, SubAgentCloseButton as ct, SubAgentPanelBody as ut, SubAgentPanelFooter as dt } from "../AgentBuilder.styled.js";
+import { SubAgentScrim as at, SubAgentPanel as lt, SubAgentPanelHeader as ct, SubAgentPanelHeaderText as ut, SubAgentCloseButton as dt, SubAgentPanelBody as mt, SubAgentPanelFooter as gt } from "../AgentBuilder.styled.js";
 import { AGENT_CHAR_LIMITS as v } from "../constants/charLimits.js";
-import { buildAgentMentionItems as mt } from "../utils/mentionSerialization.js";
-import { MentionEditor as _ } from "./MentionEditor.js";
-import { SelectableListSection as gt } from "./SelectableListSection.js";
-import { Input as pt } from "../../input/Input.js";
-import { Button as E } from "../../button/Button.js";
-import { Toaster as ht } from "../../toaster/Toaster.js";
-const Nt = ({
+import { buildAgentMentionItems as pt } from "../utils/mentionSerialization.js";
+import { SOURCE_ICONS as H } from "../utils/sourceIcons.js";
+import { MentionEditor as K } from "./MentionEditor.js";
+import { SelectableListSection as ht } from "./SelectableListSection.js";
+import { Input as ft } from "../../input/Input.js";
+import { Button as w } from "../../button/Button.js";
+import { Toaster as bt } from "../../toaster/Toaster.js";
+const Gt = ({
   onClose: h,
   onSave: F,
   availableTools: i,
-  onImprove: ft,
-  title: O = "Create sub-agent",
+  onImprove: yt,
+  title: N = "Create sub-agent",
   initial: c,
-  appLabel: P = "Manifest"
+  appLabel: R = "Manifest"
 }) => {
-  const [f, j] = r(c?.name ?? ""), [u, b] = r(c?.instructions ?? ""), [d, y] = r(c?.guardrail ?? ""), [S, m] = r(c?.tools ?? []), [R, k] = r(!1), [$, B] = r(0), [w, M] = r(0), [bt, yt] = r(null), L = nt(
-    () => mt(i, [], P),
-    [i, P]
+  const [f, j] = r(c?.name ?? ""), [u, b] = r(c?.instructions ?? ""), [d, y] = r(c?.guardrail ?? ""), [S, m] = r(c?.tools ?? []), [_, P] = r(!1), [U, k] = r(0), [$, B] = r(0), [St, Ct] = r(null), M = rt(
+    () => pt(i, [], R),
+    [i, R]
   ), g = p({}), C = p("instructions"), z = l((t) => {
     g.current.instructions = t ?? void 0;
-  }, []), U = l((t) => {
+  }, []), W = l((t) => {
     g.current.guardrail = t ?? void 0;
-  }, []), W = l(() => {
-    C.current = "instructions";
   }, []), q = l(() => {
+    C.current = "instructions";
+  }, []), D = l(() => {
     C.current = "guardrail";
-  }, []), N = l(
+  }, []), E = l(
     (t, e) => {
       t === "tool" && m((s) => s.includes(e) ? s : [...s, e]);
     },
     []
-  ), D = l((t) => {
+  ), J = l((t) => {
     (g.current[C.current] ?? g.current.instructions)?.("tool", t);
   }, []), [x, T] = r(
     null
-  ), I = p(null), G = p(0), J = (t) => {
-    const e = i.find((n) => n.tool_id === t), s = e ? `{{tool:${e.function_key}}}` : null, K = (n) => s ? n.split(s).join("") : n;
-    I.current = { instructions: u, guardrail: d, tools: S }, b((n) => K(n)), y((n) => K(n)), m((n) => n.filter((Z) => Z !== t)), B((n) => n + 1), M((n) => n + 1), G.current += 1, T({
-      id: G.current,
-      message: `Tool "${e?.displayName ?? "Tool"}" removed`
+  ), I = p(null), L = p(0), Q = (t) => {
+    const e = i.find((n) => n.tool_id === t), s = e ? `{{tool:${e.function_key}}}` : null, G = (n) => s ? n.split(s).join("") : n;
+    I.current = { instructions: u, guardrail: d, tools: S }, b((n) => G(n)), y((n) => G(n)), m((n) => n.filter((tt) => tt !== t)), k((n) => n + 1), B((n) => n + 1), L.current += 1, T({
+      id: L.current,
+      message: `Tool "${e?.display_name ?? "Tool"}" removed`
     });
-  }, Q = () => {
+  }, V = () => {
     const t = I.current;
-    t && (b(t.instructions), y(t.guardrail), m(t.tools), B((e) => e + 1), M((e) => e + 1), I.current = null), T(null);
-  }, H = f.trim().length > 0 && (u.trim().length > 0 || d.trim().length > 0), V = S.map((t) => {
+    t && (b(t.instructions), y(t.guardrail), m(t.tools), k((e) => e + 1), B((e) => e + 1), I.current = null), T(null);
+  }, O = f.trim().length > 0 && (u.trim().length > 0 || d.trim().length > 0), X = S.map((t) => {
     const e = i.find((s) => s.tool_id === t);
-    return e ? { id: t, label: e.displayName } : null;
-  }).filter((t) => t !== null), X = i.map((t) => ({
-    label: t.displayName,
-    value: t.tool_id,
-    subText: t.description
-  })), Y = async () => {
-    if (!H || R)
+    return e ? {
+      id: t,
+      label: e.display_name,
+      icon: H[e.source ?? "manifest"]
+    } : null;
+  }).filter((t) => t !== null), Y = i.map((t) => {
+    const e = H[t.source ?? "manifest"];
+    return {
+      label: t.display_name,
+      value: t.tool_id,
+      leadingIcon: e ? ot.createElement(e.Icon, { width: e.w, height: e.h }) : void 0
+    };
+  }), Z = async () => {
+    if (!O || _)
       return;
     const t = F({
       name: f.trim(),
@@ -66,24 +74,24 @@ const Nt = ({
       tools: S
     });
     if (t && typeof t.then == "function") {
-      k(!0);
+      P(!0);
       try {
         await t;
       } finally {
-        k(!1);
+        P(!1);
       }
     }
   };
-  return /* @__PURE__ */ a(tt, { children: [
-    /* @__PURE__ */ o(st, { onClick: h, "data-test": "subagent-scrim" }),
-    /* @__PURE__ */ a(it, { "data-test": "create-subagent-panel", children: [
-      /* @__PURE__ */ a(at, { children: [
-        /* @__PURE__ */ a(lt, { children: [
-          /* @__PURE__ */ o(ot, { color: A.content.primary, children: O }),
-          /* @__PURE__ */ o(rt, { color: A.content.secondary, children: "Each sub-agent handles one piece of the job. Use @ in the main instructions to call them." })
+  return /* @__PURE__ */ a(et, { children: [
+    /* @__PURE__ */ o(at, { onClick: h, "data-test": "subagent-scrim" }),
+    /* @__PURE__ */ a(lt, { "data-test": "create-subagent-panel", children: [
+      /* @__PURE__ */ a(ct, { children: [
+        /* @__PURE__ */ a(ut, { children: [
+          /* @__PURE__ */ o(st, { color: A.content.primary, children: N }),
+          /* @__PURE__ */ o(it, { color: A.content.secondary, children: "Each sub-agent handles one piece of the job. Use @ in the main instructions to call them." })
         ] }),
-        /* @__PURE__ */ o(ct, { onClick: h, "aria-label": "Close", children: /* @__PURE__ */ o(
-          et,
+        /* @__PURE__ */ o(dt, { onClick: h, "aria-label": "Close", children: /* @__PURE__ */ o(
+          nt,
           {
             width: 20,
             height: 20,
@@ -91,9 +99,9 @@ const Nt = ({
           }
         ) })
       ] }),
-      /* @__PURE__ */ a(ut, { children: [
+      /* @__PURE__ */ a(mt, { children: [
         /* @__PURE__ */ o(
-          pt,
+          ft,
           {
             "data-test": "subagent-name",
             labelText: "Agent name",
@@ -107,7 +115,7 @@ const Nt = ({
           }
         ),
         /* @__PURE__ */ o(
-          _,
+          K,
           {
             "data-test": "subagent-instructions",
             label: "Instructions",
@@ -116,16 +124,16 @@ const Nt = ({
             maxLength: v.instructions,
             placeholder: "Write the steps in plain English. Type @ to reference a tool.",
             minHeight: "160px",
-            resetKey: `instr-${$}`,
-            mentionItems: L,
+            resetKey: `instr-${U}`,
+            mentionItems: M,
             tools: i,
-            onMentionSelect: N,
-            onFocus: W,
+            onMentionSelect: E,
+            onFocus: q,
             registerInsert: z
           }
         ),
         /* @__PURE__ */ o(
-          _,
+          K,
           {
             "data-test": "subagent-guardrail",
             label: "Guardrails",
@@ -134,44 +142,44 @@ const Nt = ({
             maxLength: v.guardrail,
             placeholder: "e.g. Never discuss competitor pricing. Type @ to reference a tool.",
             minHeight: "160px",
-            resetKey: `guard-${w}`,
-            mentionItems: L,
+            resetKey: `guard-${$}`,
+            mentionItems: M,
             tools: i,
-            onMentionSelect: N,
-            onFocus: q,
-            registerInsert: U
+            onMentionSelect: E,
+            onFocus: D,
+            registerInsert: W
           }
         ),
         /* @__PURE__ */ o(
-          gt,
+          ht,
           {
             title: "Tools this agent can use",
             dataTestPrefix: "subagent-tools",
-            items: V,
-            addableOptions: X,
+            items: X,
+            addableOptions: Y,
             emptyText: "No tools added yet.",
             onAdd: (t) => {
-              D(t), m((e) => e.includes(t) ? e : [...e, t]);
+              J(t), m((e) => e.includes(t) ? e : [...e, t]);
             },
-            onRemove: J
+            onRemove: Q
           }
         )
       ] }),
-      /* @__PURE__ */ a(dt, { children: [
+      /* @__PURE__ */ a(gt, { children: [
         /* @__PURE__ */ o(
-          E,
+          w,
           {
             "data-test": "subagent-save",
             buttonType: "primary",
             size: "small",
             buttonText: "Save",
-            disabled: !H,
-            isLoading: R,
-            onClick: Y
+            disabled: !O,
+            isLoading: _,
+            onClick: Z
           }
         ),
         /* @__PURE__ */ o(
-          E,
+          w,
           {
             "data-test": "subagent-cancel",
             buttonType: "secondary",
@@ -183,7 +191,7 @@ const Nt = ({
       ] })
     ] }),
     x && /* @__PURE__ */ o(
-      ht,
+      bt,
       {
         text: x.message,
         type: "info",
@@ -193,7 +201,7 @@ const Nt = ({
         buttonProps: {
           buttonText: "Undo",
           showButton: !0,
-          onButtonClick: () => (Q(), {})
+          onButtonClick: () => (V(), {})
         },
         onCloseToast: () => T(null)
       },
@@ -202,6 +210,6 @@ const Nt = ({
   ] });
 };
 export {
-  Nt as CreateSubAgentPanel
+  Gt as CreateSubAgentPanel
 };
 //# sourceMappingURL=CreateSubAgentPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { Toaster } from '@src/components/toaster';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool, SubAgentDraft } from '../AgentBuilder.model';\nimport {\n\tFieldActionRow,\n\tSubAgentCloseButton,\n\tSubAgentPanel,\n\tSubAgentPanelBody,\n\tSubAgentPanelFooter,\n\tSubAgentPanelHeader,\n\tSubAgentPanelHeaderText,\n\tSubAgentScrim,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport { buildAgentMentionItems } from '../utils/mentionSerialization';\nimport { MentionEditor } from './MentionEditor';\nimport { SelectableItem, SelectableListSection } from './SelectableListSection';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\tappLabel = 'Manifest',\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents).\n\tconst mentionItems = useMemo(\n\t\t() => buildAgentMentionItems(availableTools, [], appLabel),\n\t\t[availableTools, appLabel],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tif (kind === 'tool') {\n\t\t\t\tsetTools((prev) => (prev.includes(id) ? prev : [...prev, id]));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback((id: string) => {\n\t\tconst target =\n\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\tinsertersRef.current.instructions;\n\t\ttarget?.('tool', id);\n\t}, []);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\tconst removeTool = (id: string) => {\n\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\tconst token = tool ? `{{tool:${tool.function_key}}}` : null;\n\t\tconst strip = (text: string) => (token ? text.split(token).join('') : text);\n\t\tundoSnapshotRef.current = { instructions, guardrail, tools };\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({\n\t\t\tid: undoIdRef.current,\n\t\t\tmessage: `Tool \"${tool?.displayName ?? 'Tool'}\" removed`,\n\t\t});\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst canSave =\n\t\tname.trim().length > 0 &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool ? { id, label: tool.displayName } : null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => ({\n\t\tlabel: t.displayName,\n\t\tvalue: t.tool_id,\n\t\tsubText: t.description,\n\t}));\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t});\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SubAgentScrim onClick={onClose} data-test=\"subagent-scrim\" />\n\t\t\t<SubAgentPanel data-test=\"create-subagent-panel\">\n\t\t\t\t<SubAgentPanelHeader>\n\t\t\t\t\t<SubAgentPanelHeaderText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tEach sub-agent handles one piece of the job. Use @ in the main\n\t\t\t\t\t\t\tinstructions to call them.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</SubAgentPanelHeaderText>\n\t\t\t\t\t<SubAgentCloseButton onClick={onClose} aria-label=\"Close\">\n\t\t\t\t\t\t<CrossIcon\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.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SubAgentCloseButton>\n\t\t\t\t</SubAgentPanelHeader>\n\n\t\t\t\t<SubAgentPanelBody>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tmaxCharLimit={AGENT_CHAR_LIMITS.name}\n\t\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\t\tonChangeText={setName}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\t\tvalue={instructions}\n\t\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.instructions}\n\t\t\t\t\t\tplaceholder=\"Write the steps in plain English. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.guardrail}\n\t\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\t\titems={toolItems}\n\t\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\t\tsetTools((prev) => (prev.includes(id) ? prev : [...prev, id]));\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelBody>\n\n\t\t\t\t<SubAgentPanelFooter>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-save\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\tdisabled={!canSave}\n\t\t\t\t\t\tisLoading={saving}\n\t\t\t\t\t\tonClick={handleSave}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-cancel\"\n\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelFooter>\n\t\t\t</SubAgentPanel>\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","title","initial","appLabel","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","insertersRef","useRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","addToolMention","kind","id","prev","insertToolAtCursor","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","tool","t","token","strip","text","k","undoRemove","snap","canSave","toolItems","x","toolOptions","handleSave","result","jsxs","Fragment","jsx","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","TitleRegular","COLORS","BodySecondary","SubAgentCloseButton","CrossIcon","SubAgentPanelBody","Input","AGENT_CHAR_LIMITS","MentionEditor","SelectableListSection","SubAgentPanelFooter","Button","Toaster"],"mappings":"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"}
+{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { Toaster } from '@src/components/toaster';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool, SubAgentDraft } from '../AgentBuilder.model';\nimport {\n\tSubAgentCloseButton,\n\tSubAgentPanel,\n\tSubAgentPanelBody,\n\tSubAgentPanelFooter,\n\tSubAgentPanelHeader,\n\tSubAgentPanelHeaderText,\n\tSubAgentScrim,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport { buildAgentMentionItems } from '../utils/mentionSerialization';\nimport { SOURCE_ICONS } from '../utils/sourceIcons';\nimport { MentionEditor } from './MentionEditor';\nimport { SelectableItem, SelectableListSection } from './SelectableListSection';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\tappLabel = 'Manifest',\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents).\n\tconst mentionItems = useMemo(\n\t\t() => buildAgentMentionItems(availableTools, [], appLabel),\n\t\t[availableTools, appLabel],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tif (kind === 'tool') {\n\t\t\t\tsetTools((prev) => (prev.includes(id) ? prev : [...prev, id]));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback((id: string) => {\n\t\tconst target =\n\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\tinsertersRef.current.instructions;\n\t\ttarget?.('tool', id);\n\t}, []);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\tconst removeTool = (id: string) => {\n\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\tconst token = tool ? `{{tool:${tool.function_key}}}` : null;\n\t\tconst strip = (text: string) => (token ? text.split(token).join('') : text);\n\t\tundoSnapshotRef.current = { instructions, guardrail, tools };\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({\n\t\t\tid: undoIdRef.current,\n\t\t\tmessage: `Tool \"${tool?.display_name ?? 'Tool'}\" removed`,\n\t\t});\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst canSave =\n\t\tname.trim().length > 0 &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool\n\t\t\t\t? {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tlabel: tool.display_name,\n\t\t\t\t\t\ticon: SOURCE_ICONS[tool.source ?? 'manifest'],\n\t\t\t\t  }\n\t\t\t\t: null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped. Icon left of\n\t// the name, no description.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => {\n\t\tconst ic = SOURCE_ICONS[t.source ?? 'manifest'];\n\t\treturn {\n\t\t\tlabel: t.display_name,\n\t\t\tvalue: t.tool_id,\n\t\t\tleadingIcon: ic\n\t\t\t\t? React.createElement(ic.Icon, { width: ic.w, height: ic.h })\n\t\t\t\t: undefined,\n\t\t};\n\t});\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t});\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SubAgentScrim onClick={onClose} data-test=\"subagent-scrim\" />\n\t\t\t<SubAgentPanel data-test=\"create-subagent-panel\">\n\t\t\t\t<SubAgentPanelHeader>\n\t\t\t\t\t<SubAgentPanelHeaderText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tEach sub-agent handles one piece of the job. Use @ in the main\n\t\t\t\t\t\t\tinstructions to call them.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</SubAgentPanelHeaderText>\n\t\t\t\t\t<SubAgentCloseButton onClick={onClose} aria-label=\"Close\">\n\t\t\t\t\t\t<CrossIcon\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.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SubAgentCloseButton>\n\t\t\t\t</SubAgentPanelHeader>\n\n\t\t\t\t<SubAgentPanelBody>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tmaxCharLimit={AGENT_CHAR_LIMITS.name}\n\t\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\t\tonChangeText={setName}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\t\tvalue={instructions}\n\t\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.instructions}\n\t\t\t\t\t\tplaceholder=\"Write the steps in plain English. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\t\tmaxLength={AGENT_CHAR_LIMITS.guardrail}\n\t\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\t\titems={toolItems}\n\t\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\t\tsetTools((prev) => (prev.includes(id) ? prev : [...prev, id]));\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelBody>\n\n\t\t\t\t<SubAgentPanelFooter>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-save\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\tdisabled={!canSave}\n\t\t\t\t\t\tisLoading={saving}\n\t\t\t\t\t\tonClick={handleSave}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-cancel\"\n\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelFooter>\n\t\t\t</SubAgentPanel>\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","title","initial","appLabel","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","insertersRef","useRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","addToolMention","kind","id","prev","insertToolAtCursor","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","tool","t","token","strip","text","k","undoRemove","snap","canSave","toolItems","SOURCE_ICONS","x","toolOptions","ic","React","handleSave","result","jsxs","Fragment","jsx","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","TitleRegular","COLORS","BodySecondary","SubAgentCloseButton","CrossIcon","SubAgentPanelBody","Input","AGENT_CHAR_LIMITS","MentionEditor","SelectableListSection","SubAgentPanelFooter","Button","Toaster"],"mappings":"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"}

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

@@ -1 +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;"}
+{"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>\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,MAE7B,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/MentionEditor.d.ts

@@ -20,6 +20,12 @@ interface MentionEditorProps {
     onFocus?: () => void;
     /** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */
     registerInsert?: (fn: InsertFn | null) => void;
+    /**
+     * When set, the `@` picker's Sub-agent view shows a "Create new" row that calls
+     * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's
+     * own editors, which can't nest sub-agents).
+     */
+    onCreateSubAgent?: () => void;
     /** Optional action(s) rendered inside the shell, below the editor. */
     action?: React.ReactNode;
     'data-test'?: string;

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

@@ -1,13 +1,13 @@
 import { jsxs as i, jsx as d } from "react/jsx-runtime";
-import { useRef as A, useState as B, useCallback as L, useEffect as p, useMemo as j } from "react";
-import { TitleSmall as w, BodyCaption as F } from "../../TypographyStyle.js";
+import { useRef as B, useState as L, useCallback as j, useEffect as p, useMemo as w } from "react";
+import { TitleSmall as F, BodyCaption as N } from "../../TypographyStyle.js";
 import { COLORS as h } from "../../../constants/Theme.js";
-import { FieldBlock as N, FieldLabelRow as _, AiTextAreaShell as G } from "../AgentBuilder.styled.js";
-import { AGENT_EDITOR_STYLE as J } from "../constants/editorStyle.js";
-import { buildMentionHtml as P, instructionsToEditorHtml as Y, editorDocToInstructions as $ } from "../utils/mentionSerialization.js";
-import { MentionPicker as q } from "./MentionPicker.js";
-import { BikEditor as z } from "../../../editor/BikEditor.js";
-const tt = ({
+import { FieldBlock as _, FieldLabelRow as G, AiTextAreaShell as J } from "../AgentBuilder.styled.js";
+import { AGENT_EDITOR_STYLE as P } from "../constants/editorStyle.js";
+import { buildMentionHtml as Y, instructionsToEditorHtml as $, editorDocToInstructions as q } from "../utils/mentionSerialization.js";
+import { MentionPicker as z } from "./MentionPicker.js";
+import { BikEditor as Q } from "../../../editor/BikEditor.js";
+const ot = ({
   label: S,
   value: e,
   onChange: g,
@@ -20,19 +20,20 @@ const tt = ({
   onMentionSelect: b,
   onFocus: E,
   registerInsert: r,
-  action: k,
-  ...H
+  onCreateSubAgent: k,
+  action: H,
+  ...O
 }) => {
-  const c = A(null), [O, s] = B(e.length), m = L(
-    (t, o, D) => {
+  const c = B(null), [R, s] = L(e.length), m = j(
+    (t, o, M) => {
       const f = c.current;
       if (!f)
         return;
-      const M = n.find(
+      const y = n.find(
         (u) => String(u.id) === String(o) && u.meta?.kind === t
-      ), y = D ?? M?.label ?? o;
+      ), A = M ?? y?.label ?? o;
       f.insertInlineContent(
-        `${P(String(o), y, t)} `
+        `${Y(String(o), A, t)} `
       );
     },
     [n]
@@ -41,8 +42,8 @@ const tt = ({
     if (r)
       return r(m), () => r(null);
   }, [r, m]);
-  const R = j(
-    () => Y(e, n),
+  const D = w(
+    () => $(e, n),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [l]
   );
@@ -50,32 +51,32 @@ const tt = ({
     () => s(e.length),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [l]
-  ), /* @__PURE__ */ i(N, { children: [
-    /* @__PURE__ */ i(_, { children: [
-      /* @__PURE__ */ d(w, { color: h.content.primary, children: S }),
-      /* @__PURE__ */ i(F, { color: h.content.secondary, children: [
-        O,
+  ), /* @__PURE__ */ i(_, { children: [
+    /* @__PURE__ */ i(G, { children: [
+      /* @__PURE__ */ d(F, { color: h.content.primary, children: S }),
+      /* @__PURE__ */ i(N, { color: h.content.secondary, children: [
+        R,
         "/",
         a
       ] })
     ] }),
-    /* @__PURE__ */ i(G, { minHeight: x, "data-test": H["data-test"], children: [
+    /* @__PURE__ */ i(J, { minHeight: x, "data-test": O["data-test"], children: [
       /* @__PURE__ */ d(
-        z,
+        Q,
         {
           ref: c,
-          initialContent: R,
+          initialContent: D,
           placeholder: C,
           maxCharacters: a,
           minHeight: "120px",
           maxHeight: "320px",
           style: { border: "none" },
-          editorStyle: J,
+          editorStyle: P,
           onFocus: E,
           mentions: {
             agents: n,
             removeTriggerOnDismiss: !0,
-            renderDropdown: (t) => /* @__PURE__ */ d(q, { ...t }),
+            renderDropdown: (t) => /* @__PURE__ */ d(z, { ...t, onCreateSubAgent: k }),
             onSelect: (t) => {
               const o = t.meta?.kind;
               o && b?.(o, String(t.id));
@@ -84,16 +85,16 @@ const tt = ({
           onChange: (t) => {
             s(t.characterCount);
             const o = c.current?.getJSON() ?? null;
-            g($(o, T));
+            g(q(o, T));
           }
         },
         l
       ),
-      k
+      H
     ] })
   ] });
 };
 export {
-  tt as MentionEditor
+  ot as MentionEditor
 };
 //# sourceMappingURL=MentionEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MentionEditor.js","sources":["../../../../../src/components/agent-builder/components/MentionEditor.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef, MentionItem } from '@src/editor';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool } from '../AgentBuilder.model';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport {\n\tbuildMentionHtml,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface MentionEditorProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content. */\n\tresetKey?: string | number;\n\t/** Items shown in the `@` picker (tools, and sub-agents where allowed). */\n\tmentionItems: MentionItem[];\n\t/** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */\n\ttools: AgentTool[];\n\t/** Called when an item is picked from the `@` menu (to attach it upstream). */\n\tonMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;\n\tonFocus?: () => void;\n\t/** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */\n\tregisterInsert?: (fn: InsertFn | null) => void;\n\t/** Optional action(s) rendered inside the shell, below the editor. */\n\taction?: React.ReactNode;\n\t'data-test'?: string;\n}\n\n/**\n * Presentational BikEditor field with `@` mentions. Stores firebase token text\n * (`{{tool:KEY}}` / `{{subagent:ID}}`). Context-free — both the builder's\n * Step-3 fields and the create-sub-agent drawer compose it.\n */\nexport const MentionEditor: React.FC<MentionEditorProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '200px',\n\tresetKey,\n\tmentionItems,\n\ttools,\n\tonMentionSelect,\n\tonFocus,\n\tregisterInsert,\n\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel) => {\n\t\t\tconst editor = editorRef.current;\n\t\t\tif (!editor) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst item = mentionItems.find(\n\t\t\t\t(m) =>\n\t\t\t\t\tString(m.id) === String(id) &&\n\t\t\t\t\t(m.meta as unknown as MentionKindMeta | undefined)?.kind === kind,\n\t\t\t);\n\t\t\tconst finalLabel = overrideLabel ?? item?.label ?? id;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind)}&nbsp;`,\n\t\t\t);\n\t\t},\n\t\t[mentionItems],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!registerInsert) {\n\t\t\treturn;\n\t\t}\n\t\tregisterInsert(insert);\n\t\treturn () => registerInsert(null);\n\t}, [registerInsert, insert]);\n\n\t// Mount-only initial HTML; recomputed (editor remounted via key) on resetKey.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\tuseEffect(\n\t\t() => setCount(value.length),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\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{count}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight={minHeight} data-test={rest['data-test']}>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={resetKey}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxCharacters={maxLength}\n\t\t\t\t\tminHeight=\"120px\"\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\tonFocus={onFocus}\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\tif (kind) {\n\t\t\t\t\t\t\t\tonMentionSelect?.(kind, String(item.id));\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\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t\t\t\t\tonChange(editorDocToInstructions(doc, tools));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{action}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","action","rest","editorRef","useRef","count","setCount","useState","insert","useCallback","kind","id","overrideLabel","editor","item","m","finalLabel","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":";;;;;;;;;AAuDO,MAAMA,KAA8C,CAAC;AAAA,EAC3D,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAMC,IAAYC,EAAqB,IAAI,GACrC,CAACC,GAAOC,CAAQ,IAAIC,EAASjB,EAAM,MAAM,GAEzCkB,IAASC;AAAA,IACd,CAACC,GAAMC,GAAIC,MAAkB;AAC5B,YAAMC,IAASV,EAAU;AACzB,UAAI,CAACU;AACJ;AAED,YAAMC,IAAOlB,EAAa;AAAA,QACzB,CAACmB,MACA,OAAOA,EAAE,EAAE,MAAM,OAAOJ,CAAE,KACzBI,EAAE,MAAiD,SAASL;AAAA,MAAA,GAEzDM,IAAaJ,KAAiBE,GAAM,SAASH;AACnD,MAAAE,EAAO;AAAA,QACN,GAAGI,EAAiB,OAAON,CAAE,GAAGK,GAAYN,CAAI,CAAC;AAAA,MAAA;AAAA,IAEnD;AAAA,IACA,CAACd,CAAY;AAAA,EAAA;AAGd,EAAAsB,EAAU,MAAM;AACf,QAAKlB;AAGL,aAAAA,EAAeQ,CAAM,GACd,MAAMR,EAAe,IAAI;AAAA,EACjC,GAAG,CAACA,GAAgBQ,CAAM,CAAC;AAG3B,QAAMW,IAAcC;AAAA,IACnB,MAAMC,EAAyB/B,GAAOM,CAAY;AAAA;AAAA,IAElD,CAACD,CAAQ;AAAA,EAAA;AAGV,SAAAuB;AAAA,IACC,MAAMZ,EAAShB,EAAM,MAAM;AAAA;AAAA,IAE3B,CAACK,CAAQ;AAAA,EAAA,qBAIR2B,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAtC,GAAM;AAAA,MAClD,gBAAAkC,EAACK,GAAA,EAAY,OAAOD,EAAO,QAAQ,WACjC,UAAA;AAAA,QAAAtB;AAAA,QAAM;AAAA,QAAEb;AAAA,MAAA,EAAA,CACV;AAAA,IAAA,GACD;AAAA,sBAECqC,GAAA,EAAgB,WAAAnC,GAAsB,aAAWQ,EAAK,WAAW,GACjE,UAAA;AAAA,MAAA,gBAAAuB;AAAA,QAACK;AAAA,QAAA;AAAA,UAEA,KAAK3B;AAAA,UACL,gBAAgBgB;AAAA,UAChB,aAAA1B;AAAA,UACA,eAAeD;AAAA,UACf,WAAU;AAAA,UACV,WAAU;AAAA,UACV,OAAO,EAAE,QAAQ,OAAA;AAAA,UACjB,aAAauC;AAAA,UACb,SAAAhC;AAAA,UACA,UAAU;AAAA,YACT,QAAQH;AAAA,YACR,wBAAwB;AAAA,YACxB,gBAAgB,CAACoC,MAAU,gBAAAP,EAACQ,GAAA,EAAe,GAAGD,GAAO;AAAA,YACrD,UAAU,CAAClB,MAAS;AACnB,oBAAMJ,IAAQI,EAAK,MAChB;AACH,cAAIJ,KACHZ,IAAkBY,GAAM,OAAOI,EAAK,EAAE,CAAC;AAAA,YAEzC;AAAA,UAAA;AAAA,UAED,UAAU,CAACoB,MAAa;AACvB,YAAA5B,EAAS4B,EAAS,cAAc;AAChC,kBAAMC,IAAMhC,EAAU,SAAS,QAAA,KAAa;AAC5C,YAAAZ,EAAS6C,EAAwBD,GAAKtC,CAAK,CAAC;AAAA,UAC7C;AAAA,QAAA;AAAA,QA1BKF;AAAA,MAAA;AAAA,MA4BLM;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACD;AAEF;"}
+{"version":3,"file":"MentionEditor.js","sources":["../../../../../src/components/agent-builder/components/MentionEditor.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef, MentionItem } from '@src/editor';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool } from '../AgentBuilder.model';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport {\n\tbuildMentionHtml,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface MentionEditorProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content. */\n\tresetKey?: string | number;\n\t/** Items shown in the `@` picker (tools, and sub-agents where allowed). */\n\tmentionItems: MentionItem[];\n\t/** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */\n\ttools: AgentTool[];\n\t/** Called when an item is picked from the `@` menu (to attach it upstream). */\n\tonMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;\n\tonFocus?: () => void;\n\t/** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */\n\tregisterInsert?: (fn: InsertFn | null) => void;\n\t/**\n\t * When set, the `@` picker's Sub-agent view shows a \"Create new\" row that calls\n\t * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's\n\t * own editors, which can't nest sub-agents).\n\t */\n\tonCreateSubAgent?: () => void;\n\t/** Optional action(s) rendered inside the shell, below the editor. */\n\taction?: React.ReactNode;\n\t'data-test'?: string;\n}\n\n/**\n * Presentational BikEditor field with `@` mentions. Stores firebase token text\n * (`{{tool:KEY}}` / `{{subagent:ID}}`). Context-free — both the builder's\n * Step-3 fields and the create-sub-agent drawer compose it.\n */\nexport const MentionEditor: React.FC<MentionEditorProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '200px',\n\tresetKey,\n\tmentionItems,\n\ttools,\n\tonMentionSelect,\n\tonFocus,\n\tregisterInsert,\n\tonCreateSubAgent,\n\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel) => {\n\t\t\tconst editor = editorRef.current;\n\t\t\tif (!editor) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst item = mentionItems.find(\n\t\t\t\t(m) =>\n\t\t\t\t\tString(m.id) === String(id) &&\n\t\t\t\t\t(m.meta as unknown as MentionKindMeta | undefined)?.kind === kind,\n\t\t\t);\n\t\t\tconst finalLabel = overrideLabel ?? item?.label ?? id;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind)}&nbsp;`,\n\t\t\t);\n\t\t},\n\t\t[mentionItems],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!registerInsert) {\n\t\t\treturn;\n\t\t}\n\t\tregisterInsert(insert);\n\t\treturn () => registerInsert(null);\n\t}, [registerInsert, insert]);\n\n\t// Mount-only initial HTML; recomputed (editor remounted via key) on resetKey.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\tuseEffect(\n\t\t() => setCount(value.length),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\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{count}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight={minHeight} data-test={rest['data-test']}>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={resetKey}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxCharacters={maxLength}\n\t\t\t\t\tminHeight=\"120px\"\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\tonFocus={onFocus}\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) => (\n\t\t\t\t\t\t\t<MentionPicker {...props} onCreateSubAgent={onCreateSubAgent} />\n\t\t\t\t\t\t),\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\tif (kind) {\n\t\t\t\t\t\t\t\tonMentionSelect?.(kind, String(item.id));\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\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t\t\t\t\tonChange(editorDocToInstructions(doc, tools));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{action}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","action","rest","editorRef","useRef","count","setCount","useState","insert","useCallback","kind","id","overrideLabel","editor","item","m","finalLabel","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":"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"}