@bikdotai/bik-component-library 0.0.848 → 0.0.849-beta.1

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

@@ -1,112 +1,127 @@
-import { jsxs as i, jsx as d } from "react/jsx-runtime";
-import { useRef as w, useState as F, useCallback as N, useEffect as p, useMemo as _ } from "react";
-import { TitleSmall as G, BodyCaption as J } from "../../TypographyStyle.js";
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { useRef as F, useState as _, useCallback as b, useEffect as S, useMemo as G } from "react";
+import { TitleSmall as J, BodyCaption as P } from "../../TypographyStyle.js";
 import { COLORS as h } from "../../../constants/Theme.js";
-import { FieldBlock as P, FieldLabelRow as Y, AiTextAreaShell as $ } from "../AgentBuilder.styled.js";
-import { AGENT_EDITOR_STYLE as q } from "../constants/editorStyle.js";
-import { buildMentionHtml as z, instructionsToEditorHtml as Q, editorDocToInstructions as U } from "../utils/mentionSerialization.js";
-import { MentionPicker as V } from "./MentionPicker.js";
-import { BikEditor as W } from "../../../editor/BikEditor.js";
-const it = ({
-  label: S,
-  value: e,
-  onChange: g,
-  maxLength: a,
-  placeholder: C,
-  minHeight: T = "200px",
-  resetKey: l,
-  mentionItems: n,
-  tools: b,
-  onMentionSelect: x,
-  onFocus: E,
-  registerInsert: r,
-  onCreateSubAgent: k,
-  toolActions: H,
-  integrationStatus: O,
-  onConnectIntegration: R,
-  action: D,
-  ...L
+import { FieldBlock as Y, FieldLabelRow as q, AiTextAreaShell as z } from "../AgentBuilder.styled.js";
+import { AGENT_EDITOR_STYLE as Q } from "../constants/editorStyle.js";
+import { variableTokenName as U, buildMentionHtml as g, instructionsToEditorHtml as W, buildVariableMentionItems as X, editorDocToInstructions as Z } from "../utils/mentionSerialization.js";
+import { MentionPicker as v } from "./MentionPicker.js";
+import { BikEditor as I } from "../../../editor/BikEditor.js";
+const at = ({
+  label: C,
+  value: l,
+  onChange: T,
+  maxLength: s,
+  placeholder: k,
+  minHeight: x = "200px",
+  resetKey: c,
+  mentionItems: o,
+  tools: E,
+  onMentionSelect: H,
+  onFocus: M,
+  registerInsert: e,
+  onCreateSubAgent: O,
+  toolActions: R,
+  integrationStatus: y,
+  onConnectIntegration: L,
+  variablesData: d,
+  action: N,
+  ...V
 }) => {
-  const c = w(null), [M, m] = F(e.length), s = N(
-    (t, o, A) => {
-      const f = c.current;
+  const i = F(null), [A, m] = _(l.length), B = b((t) => {
+    const n = U(t.actualValue);
+    i.current?.insertInlineContent(
+      `${g(
+        n,
+        `Variable: ${t.displayName}`,
+        "variable"
+      )} `
+    );
+  }, []), u = b(
+    (t, n, $) => {
+      const f = i.current;
       if (!f)
         return;
-      const B = n.find(
-        (u) => String(u.id) === String(o) && u.meta?.kind === t
-      ), j = A ?? B?.label ?? o;
+      const j = o.find(
+        (p) => String(p.id) === String(n) && p.meta?.kind === t
+      ), w = $ ?? j?.label ?? n;
       f.insertInlineContent(
-        `${z(String(o), j, t)} `
+        `${g(String(n), w, t)} `
       );
     },
-    [n]
+    [o]
   );
-  p(() => {
-    if (r)
-      return r(s), () => r(null);
-  }, [r, s]);
-  const y = _(
-    () => Q(e, n),
+  S(() => {
+    if (e)
+      return e(u), () => e(null);
+  }, [e, u]);
+  const D = G(
+    () => W(l, [
+      ...o,
+      ...X(d)
+    ]),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [l]
+    [c]
   );
-  return p(
-    () => m(e.length),
+  return S(
+    () => m(l.length),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [l]
-  ), /* @__PURE__ */ i(P, { children: [
-    /* @__PURE__ */ i(Y, { children: [
-      /* @__PURE__ */ d(G, { color: h.content.primary, children: S }),
-      /* @__PURE__ */ i(J, { color: h.content.secondary, children: [
-        M,
+    [c]
+  ), /* @__PURE__ */ r(Y, { children: [
+    /* @__PURE__ */ r(q, { children: [
+      /* @__PURE__ */ a(J, { color: h.content.primary, children: C }),
+      /* @__PURE__ */ r(P, { color: h.content.secondary, children: [
+        A,
         "/",
-        a
+        s
       ] })
     ] }),
-    /* @__PURE__ */ i($, { minHeight: T, "data-test": L["data-test"], children: [
-      /* @__PURE__ */ d(
-        W,
+    /* @__PURE__ */ r(z, { minHeight: x, "data-test": V["data-test"], children: [
+      /* @__PURE__ */ a(
+        I,
         {
-          ref: c,
-          initialContent: y,
-          placeholder: C,
-          characterLimit: a,
+          ref: i,
+          initialContent: D,
+          placeholder: k,
+          characterLimit: s,
           minHeight: "120px",
           maxHeight: "320px",
           style: { border: "none" },
-          editorStyle: q,
-          onFocus: E,
+          editorStyle: Q,
+          onFocus: M,
           mentions: {
-            agents: n,
+            agents: o,
             removeTriggerOnDismiss: !0,
-            renderDropdown: (t) => /* @__PURE__ */ d(
-              V,
+            renderDropdown: (t) => /* @__PURE__ */ a(
+              v,
               {
                 ...t,
-                onCreateSubAgent: k,
-                toolActions: H,
-                integrationStatus: O,
-                onConnectIntegration: R
+                onCreateSubAgent: O,
+                toolActions: R,
+                integrationStatus: y,
+                onConnectIntegration: L,
+                variablesData: d,
+                onSelectVariable: B
               }
             ),
             onSelect: (t) => {
-              const o = t.meta?.kind;
-              o && x?.(o, String(t.id));
+              const n = t.meta?.kind;
+              (n === "tool" || n === "subagent") && H?.(n, String(t.id));
             }
           },
           onChange: (t) => {
             m(t.characterCount);
-            const o = c.current?.getJSON() ?? null;
-            g(U(o, b));
+            const n = i.current?.getJSON() ?? null;
+            T(Z(n, E));
           }
         },
-        l
+        c
       ),
-      D
+      N
     ] })
   ] });
 };
 export {
-  it as MentionEditor
+  at 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 type { ToolAction, ToolSource } from '../constants/tools';\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/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the `@` picker's\n\t * Tools view. Picking one opens its drawer instead of inserting a mention.\n\t */\n\ttoolActions?: ToolAction[];\n\tintegrationStatus?: Partial<Record<ToolSource, boolean>>;\n\tonConnectIntegration?: (source: ToolSource) => 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\ttoolActions,\n\tintegrationStatus,\n\tonConnectIntegration,\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\t// Soft limit: blocks typing past the cap but lets a paste through\n\t\t\t\t\t// (overflow rendered grey) instead of rejecting the whole paste.\n\t\t\t\t\tcharacterLimit={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\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\tonCreateSubAgent={onCreateSubAgent}\n\t\t\t\t\t\t\t\ttoolActions={toolActions}\n\t\t\t\t\t\t\t\tintegrationStatus={integrationStatus}\n\t\t\t\t\t\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\t\t\t\t\t/>\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","toolActions","integrationStatus","onConnectIntegration","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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"}
+{"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 type {\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport { AgentTool } from '../AgentBuilder.model';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport type { ToolAction, ToolSource } from '../constants/tools';\nimport {\n\tbuildMentionHtml,\n\tbuildVariableMentionItems,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n\tvariableTokenName,\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/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the `@` picker's\n\t * Tools view. Picking one opens its drawer instead of inserting a mention.\n\t */\n\ttoolActions?: ToolAction[];\n\tintegrationStatus?: Partial<Record<ToolSource, boolean>>;\n\tonConnectIntegration?: (source: ToolSource) => void;\n\t/**\n\t * Variable catalog for the `@` picker's \"Variables\" view. Picking one inserts\n\t * a `Variable: <name>` mention chip at the cursor, persisted as the bare\n\t * `{{actualValue}}` token. Omit to hide the category.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\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\ttoolActions,\n\tintegrationStatus,\n\tonConnectIntegration,\n\tvariablesData,\n\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\n\t// The picker dismissed itself already (stripping the \"@\" + query) — drop a\n\t// `Variable: <name>` mention chip at the cursor, same shape as tool /\n\t// sub-agent chips. `editorDocToInstructions` serializes it back to the bare\n\t// `{{name}}` token (no kind prefix).\n\tconst onSelectVariable = useCallback((variable: VariableV3) => {\n\t\tconst name = variableTokenName(variable.actualValue);\n\t\teditorRef.current?.insertInlineContent(\n\t\t\t`${buildMentionHtml(\n\t\t\t\tname,\n\t\t\t\t`Variable: ${variable.displayName}`,\n\t\t\t\t'variable',\n\t\t\t)}&nbsp;`,\n\t\t);\n\t}, []);\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\t// Variable items are merged in so stored `{{name}}` tokens rehydrate as chips.\n\tconst initialHtml = useMemo(\n\t\t() =>\n\t\t\tinstructionsToEditorHtml(value, [\n\t\t\t\t...mentionItems,\n\t\t\t\t...buildVariableMentionItems(variablesData),\n\t\t\t]),\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\t// Soft limit: blocks typing past the cap but lets a paste through\n\t\t\t\t\t// (overflow rendered grey) instead of rejecting the whole paste.\n\t\t\t\t\tcharacterLimit={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\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\tonCreateSubAgent={onCreateSubAgent}\n\t\t\t\t\t\t\t\ttoolActions={toolActions}\n\t\t\t\t\t\t\t\tintegrationStatus={integrationStatus}\n\t\t\t\t\t\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\t\t\tonSelectVariable={onSelectVariable}\n\t\t\t\t\t\t\t/>\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\t// Variables never come through this path (they use the embedded\n\t\t\t\t\t\t\t// picker's onSelectVariable) and have nothing to attach upstream.\n\t\t\t\t\t\t\tif (kind === 'tool' || kind === 'subagent') {\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","toolActions","integrationStatus","onConnectIntegration","variablesData","action","rest","editorRef","useRef","count","setCount","useState","onSelectVariable","useCallback","variable","name","variableTokenName","buildMentionHtml","insert","kind","id","overrideLabel","editor","item","m","finalLabel","useEffect","initialHtml","useMemo","instructionsToEditorHtml","buildVariableMentionItems","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":"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"}

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

@@ -1,13 +1,13 @@
-import { jsx as R } from "react/jsx-runtime";
+import { jsx as j } from "react/jsx-runtime";
 import { useMemo as p, useCallback as g } from "react";
-import { useAgentBuilderContext as j } from "../context/AgentBuilderContext.js";
-import { buildAgentMentionItems as k, appTypeLabel as B, buildCustomToolMentionItems as E } from "../utils/mentionSerialization.js";
+import { useAgentBuilderContext as k } from "../context/AgentBuilderContext.js";
+import { buildAgentMentionItems as B, appTypeLabel as D, buildCustomToolMentionItems as E } from "../utils/mentionSerialization.js";
 import { buildToolActions as L } from "../utils/toolActions.js";
 import { MentionEditor as w } from "./MentionEditor.js";
-const N = ({
+const O = ({
   fieldKey: o,
-  label: T,
-  placeholder: b,
+  label: b,
+  placeholder: T,
   maxLength: A,
   minHeight: d,
   ...C
@@ -21,19 +21,20 @@ const N = ({
     applicationType: l,
     mentionResetKey: f,
     registerMentionField: c,
-    notifyMentionFocus: S,
-    onCreateSubAgent: v,
+    notifyMentionFocus: v,
+    onCreateSubAgent: S,
     requestCreateSubAgent: I,
     requestToolAction: m,
     configToolTemplates: u,
     integrationStatus: s,
-    onConnectIntegration: i
-  } = j(), F = p(
+    onConnectIntegration: i,
+    variablesData: F
+  } = k(), x = p(
     () => [
-      ...k(
+      ...B(
         n,
         a,
-        B(l)
+        D(l)
       ),
       ...E(t.configTools, t.restApiTools)
     ],
@@ -44,7 +45,7 @@ const N = ({
       t.configTools,
       t.restApiTools
     ]
-  ), x = p(
+  ), $ = p(
     () => L(
       u,
       m,
@@ -57,37 +58,38 @@ const N = ({
       s,
       i
     ]
-  ), $ = g(
+  ), h = g(
     (e) => c(o, e),
     [c, o]
-  ), h = g(
-    (e, q) => r(e, q),
+  ), q = g(
+    (e, R) => r(e, R),
     [r]
   );
-  return /* @__PURE__ */ R(
+  return /* @__PURE__ */ j(
     w,
     {
-      label: T,
+      label: b,
       value: t[o] ?? "",
       onChange: (e) => M({ [o]: e }),
       maxLength: A,
-      placeholder: b,
+      placeholder: T,
       minHeight: d,
       resetKey: `${t.id}:${o}:${f}`,
-      mentionItems: F,
+      mentionItems: x,
       tools: n,
-      onMentionSelect: h,
-      onFocus: () => S(o),
-      registerInsert: $,
-      onCreateSubAgent: v ? I : void 0,
-      toolActions: x,
+      onMentionSelect: q,
+      onFocus: () => v(o),
+      registerInsert: h,
+      onCreateSubAgent: S ? I : void 0,
+      toolActions: $,
       integrationStatus: s,
       onConnectIntegration: i,
+      variablesData: F,
       "data-test": C["data-test"]
     }
   );
 };
 export {
-  N as MentionField
+  O as MentionField
 };
 //# sourceMappingURL=MentionField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MentionField.js","sources":["../../../../../src/components/agent-builder/components/MentionField.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { AgentValue } from '../AgentBuilder.model';\nimport { ToolAction } from '../constants/tools';\nimport {\n\tMentionFieldKey,\n\tuseAgentBuilderContext,\n} from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n\tbuildCustomToolMentionItems,\n} from '../utils/mentionSerialization';\nimport { buildToolActions } from '../utils/toolActions';\nimport { MentionEditor } from './MentionEditor';\n\ninterface MentionFieldProps {\n\t/** Which AgentValue field this editor reads / writes. */\n\tfieldKey: MentionFieldKey;\n\tlabel: string;\n\tplaceholder?: string;\n\tmaxLength: number;\n\tminHeight?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Context-bound {@link MentionEditor} for the builder's Step-3 Instructions /\n * Guardrails. Both `@` tools and sub-agents are offered; the field registers its\n * insert + focus with the context so side-panel adds drop a chip into whichever\n * field was last focused, and remounts on `mentionResetKey`.\n */\nexport const MentionField: React.FC<MentionFieldProps> = ({\n\tfieldKey,\n\tlabel,\n\tplaceholder,\n\tmaxLength,\n\tminHeight,\n\t...rest\n}) => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\taddReference,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tmentionResetKey,\n\t\tregisterMentionField,\n\t\tnotifyMentionFocus,\n\t\tonCreateSubAgent,\n\t\trequestCreateSubAgent,\n\t\trequestToolAction,\n\t\tconfigToolTemplates,\n\t\tintegrationStatus,\n\t\tonConnectIntegration,\n\t} = useAgentBuilderContext();\n\n\t// Catalog tools + sub-agents, PLUS the inline custom tools (Rest API / email /\n\t// Slack) so their `{{tool:<id>}}` tokens rehydrate as chips on remount — they\n\t// live on the value, not in `availableTools`.\n\tconst mentionItems = useMemo(\n\t\t() => [\n\t\t\t...buildAgentMentionItems(\n\t\t\t\tavailableTools,\n\t\t\t\tavailableSubAgents,\n\t\t\t\tappTypeLabel(applicationType),\n\t\t\t),\n\t\t\t...buildCustomToolMentionItems(value.configTools, value.restApiTools),\n\t\t],\n\t\t[\n\t\t\tavailableTools,\n\t\t\tavailableSubAgents,\n\t\t\tapplicationType,\n\t\t\tvalue.configTools,\n\t\t\tvalue.restApiTools,\n\t\t],\n\t);\n\n\t// Built-in tool actions (Rest API / email / Slack) shown in the `@` picker's\n\t// Tools view — picking one opens its drawer (Step 3) instead of inserting text.\n\t// The shared email / Slack forms are backend-driven: each is offered only when\n\t// its template was provided.\n\tconst toolActions = useMemo<ToolAction[]>(\n\t\t() =>\n\t\t\tbuildToolActions(\n\t\t\t\tconfigToolTemplates,\n\t\t\t\trequestToolAction,\n\t\t\t\tintegrationStatus,\n\t\t\t\tonConnectIntegration,\n\t\t\t),\n\t\t[\n\t\t\trequestToolAction,\n\t\t\tconfigToolTemplates,\n\t\t\tintegrationStatus,\n\t\t\tonConnectIntegration,\n\t\t],\n\t);\n\n\tconst registerInsert = useCallback(\n\t\t(fn: Parameters<typeof registerMentionField>[1]) =>\n\t\t\tregisterMentionField(fieldKey, fn),\n\t\t[registerMentionField, fieldKey],\n\t);\n\n\t// Route through the context's ref-backed `addReference`: BikEditor captures\n\t// this handler at mount, so reading `value.tools` here would keep only the last\n\t// pick. `addReference` always appends against the latest lists.\n\tconst onMentionSelect = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => addReference(kind, id),\n\t\t[addReference],\n\t);\n\n\treturn (\n\t\t<MentionEditor\n\t\t\tlabel={label}\n\t\t\tvalue={(value[fieldKey] as string | undefined) ?? ''}\n\t\t\tonChange={(text) => patch({ [fieldKey]: text } as Partial<AgentValue>)}\n\t\t\tmaxLength={maxLength}\n\t\t\tplaceholder={placeholder}\n\t\t\tminHeight={minHeight}\n\t\t\tresetKey={`${value.id}:${fieldKey}:${mentionResetKey}`}\n\t\t\tmentionItems={mentionItems}\n\t\t\ttools={availableTools}\n\t\t\tonMentionSelect={onMentionSelect}\n\t\t\tonFocus={() => notifyMentionFocus(fieldKey)}\n\t\t\tregisterInsert={registerInsert}\n\t\t\tonCreateSubAgent={onCreateSubAgent ? requestCreateSubAgent : undefined}\n\t\t\ttoolActions={toolActions}\n\t\t\tintegrationStatus={integrationStatus}\n\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\tdata-test={rest['data-test']}\n\t\t/>\n\t);\n};\n"],"names":["MentionField","fieldKey","label","placeholder","maxLength","minHeight","rest","value","patch","addReference","availableTools","availableSubAgents","applicationType","mentionResetKey","registerMentionField","notifyMentionFocus","onCreateSubAgent","requestCreateSubAgent","requestToolAction","configToolTemplates","integrationStatus","onConnectIntegration","useAgentBuilderContext","mentionItems","useMemo","buildAgentMentionItems","appTypeLabel","buildCustomToolMentionItems","toolActions","buildToolActions","registerInsert","useCallback","fn","onMentionSelect","kind","id","jsx","MentionEditor","text"],"mappings":";;;;;;AA+BO,MAAMA,IAA4C,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,sBAAAC;AAAA,EAAA,IACGC,EAAA,GAKEC,IAAeC;AAAA,IACpB,MAAM;AAAA,MACL,GAAGC;AAAA,QACFf;AAAA,QACAC;AAAA,QACAe,EAAad,CAAe;AAAA,MAAA;AAAA,MAE7B,GAAGe,EAA4BpB,EAAM,aAAaA,EAAM,YAAY;AAAA,IAAA;AAAA,IAErE;AAAA,MACCG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAL,EAAM;AAAA,MACNA,EAAM;AAAA,IAAA;AAAA,EACP,GAOKqB,IAAcJ;AAAA,IACnB,MACCK;AAAA,MACCV;AAAA,MACAD;AAAA,MACAE;AAAA,MACAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACCH;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACD,GAGKS,IAAiBC;AAAA,IACtB,CAACC,MACAlB,EAAqBb,GAAU+B,CAAE;AAAA,IAClC,CAAClB,GAAsBb,CAAQ;AAAA,EAAA,GAM1BgC,IAAkBF;AAAA,IACvB,CAACG,GAA2BC,MAAe1B,EAAayB,GAAMC,CAAE;AAAA,IAChE,CAAC1B,CAAY;AAAA,EAAA;AAGd,SACC,gBAAA2B;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAAnC;AAAA,MACA,OAAQK,EAAMN,CAAQ,KAA4B;AAAA,MAClD,UAAU,CAACqC,MAAS9B,EAAM,EAAE,CAACP,CAAQ,GAAGqC,GAA6B;AAAA,MACrE,WAAAlC;AAAA,MACA,aAAAD;AAAA,MACA,WAAAE;AAAA,MACA,UAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe;AAAA,MACpD,cAAAU;AAAA,MACA,OAAOb;AAAA,MACP,iBAAAuB;AAAA,MACA,SAAS,MAAMlB,EAAmBd,CAAQ;AAAA,MAC1C,gBAAA6B;AAAA,MACA,kBAAkBd,IAAmBC,IAAwB;AAAA,MAC7D,aAAAW;AAAA,MACA,mBAAAR;AAAA,MACA,sBAAAC;AAAA,MACA,aAAWf,EAAK,WAAW;AAAA,IAAA;AAAA,EAAA;AAG9B;"}
+{"version":3,"file":"MentionField.js","sources":["../../../../../src/components/agent-builder/components/MentionField.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { AgentValue } from '../AgentBuilder.model';\nimport { ToolAction } from '../constants/tools';\nimport {\n\tMentionFieldKey,\n\tuseAgentBuilderContext,\n} from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n\tbuildCustomToolMentionItems,\n} from '../utils/mentionSerialization';\nimport { buildToolActions } from '../utils/toolActions';\nimport { MentionEditor } from './MentionEditor';\n\ninterface MentionFieldProps {\n\t/** Which AgentValue field this editor reads / writes. */\n\tfieldKey: MentionFieldKey;\n\tlabel: string;\n\tplaceholder?: string;\n\tmaxLength: number;\n\tminHeight?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Context-bound {@link MentionEditor} for the builder's Step-3 Instructions /\n * Guardrails. Both `@` tools and sub-agents are offered; the field registers its\n * insert + focus with the context so side-panel adds drop a chip into whichever\n * field was last focused, and remounts on `mentionResetKey`.\n */\nexport const MentionField: React.FC<MentionFieldProps> = ({\n\tfieldKey,\n\tlabel,\n\tplaceholder,\n\tmaxLength,\n\tminHeight,\n\t...rest\n}) => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\taddReference,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tmentionResetKey,\n\t\tregisterMentionField,\n\t\tnotifyMentionFocus,\n\t\tonCreateSubAgent,\n\t\trequestCreateSubAgent,\n\t\trequestToolAction,\n\t\tconfigToolTemplates,\n\t\tintegrationStatus,\n\t\tonConnectIntegration,\n\t\tvariablesData,\n\t} = useAgentBuilderContext();\n\n\t// Catalog tools + sub-agents, PLUS the inline custom tools (Rest API / email /\n\t// Slack) so their `{{tool:<id>}}` tokens rehydrate as chips on remount — they\n\t// live on the value, not in `availableTools`.\n\tconst mentionItems = useMemo(\n\t\t() => [\n\t\t\t...buildAgentMentionItems(\n\t\t\t\tavailableTools,\n\t\t\t\tavailableSubAgents,\n\t\t\t\tappTypeLabel(applicationType),\n\t\t\t),\n\t\t\t...buildCustomToolMentionItems(value.configTools, value.restApiTools),\n\t\t],\n\t\t[\n\t\t\tavailableTools,\n\t\t\tavailableSubAgents,\n\t\t\tapplicationType,\n\t\t\tvalue.configTools,\n\t\t\tvalue.restApiTools,\n\t\t],\n\t);\n\n\t// Built-in tool actions (Rest API / email / Slack) shown in the `@` picker's\n\t// Tools view — picking one opens its drawer (Step 3) instead of inserting text.\n\t// The shared email / Slack forms are backend-driven: each is offered only when\n\t// its template was provided.\n\tconst toolActions = useMemo<ToolAction[]>(\n\t\t() =>\n\t\t\tbuildToolActions(\n\t\t\t\tconfigToolTemplates,\n\t\t\t\trequestToolAction,\n\t\t\t\tintegrationStatus,\n\t\t\t\tonConnectIntegration,\n\t\t\t),\n\t\t[\n\t\t\trequestToolAction,\n\t\t\tconfigToolTemplates,\n\t\t\tintegrationStatus,\n\t\t\tonConnectIntegration,\n\t\t],\n\t);\n\n\tconst registerInsert = useCallback(\n\t\t(fn: Parameters<typeof registerMentionField>[1]) =>\n\t\t\tregisterMentionField(fieldKey, fn),\n\t\t[registerMentionField, fieldKey],\n\t);\n\n\t// Route through the context's ref-backed `addReference`: BikEditor captures\n\t// this handler at mount, so reading `value.tools` here would keep only the last\n\t// pick. `addReference` always appends against the latest lists.\n\tconst onMentionSelect = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => addReference(kind, id),\n\t\t[addReference],\n\t);\n\n\treturn (\n\t\t<MentionEditor\n\t\t\tlabel={label}\n\t\t\tvalue={(value[fieldKey] as string | undefined) ?? ''}\n\t\t\tonChange={(text) => patch({ [fieldKey]: text } as Partial<AgentValue>)}\n\t\t\tmaxLength={maxLength}\n\t\t\tplaceholder={placeholder}\n\t\t\tminHeight={minHeight}\n\t\t\tresetKey={`${value.id}:${fieldKey}:${mentionResetKey}`}\n\t\t\tmentionItems={mentionItems}\n\t\t\ttools={availableTools}\n\t\t\tonMentionSelect={onMentionSelect}\n\t\t\tonFocus={() => notifyMentionFocus(fieldKey)}\n\t\t\tregisterInsert={registerInsert}\n\t\t\tonCreateSubAgent={onCreateSubAgent ? requestCreateSubAgent : undefined}\n\t\t\ttoolActions={toolActions}\n\t\t\tintegrationStatus={integrationStatus}\n\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\tvariablesData={variablesData}\n\t\t\tdata-test={rest['data-test']}\n\t\t/>\n\t);\n};\n"],"names":["MentionField","fieldKey","label","placeholder","maxLength","minHeight","rest","value","patch","addReference","availableTools","availableSubAgents","applicationType","mentionResetKey","registerMentionField","notifyMentionFocus","onCreateSubAgent","requestCreateSubAgent","requestToolAction","configToolTemplates","integrationStatus","onConnectIntegration","variablesData","useAgentBuilderContext","mentionItems","useMemo","buildAgentMentionItems","appTypeLabel","buildCustomToolMentionItems","toolActions","buildToolActions","registerInsert","useCallback","fn","onMentionSelect","kind","id","jsx","MentionEditor","text"],"mappings":";;;;;;AA+BO,MAAMA,IAA4C,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACGC,EAAA,GAKEC,IAAeC;AAAA,IACpB,MAAM;AAAA,MACL,GAAGC;AAAA,QACFhB;AAAA,QACAC;AAAA,QACAgB,EAAaf,CAAe;AAAA,MAAA;AAAA,MAE7B,GAAGgB,EAA4BrB,EAAM,aAAaA,EAAM,YAAY;AAAA,IAAA;AAAA,IAErE;AAAA,MACCG;AAAA,MACAC;AAAA,MACAC;AAAA,MACAL,EAAM;AAAA,MACNA,EAAM;AAAA,IAAA;AAAA,EACP,GAOKsB,IAAcJ;AAAA,IACnB,MACCK;AAAA,MACCX;AAAA,MACAD;AAAA,MACAE;AAAA,MACAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACCH;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACD,GAGKU,IAAiBC;AAAA,IACtB,CAACC,MACAnB,EAAqBb,GAAUgC,CAAE;AAAA,IAClC,CAACnB,GAAsBb,CAAQ;AAAA,EAAA,GAM1BiC,IAAkBF;AAAA,IACvB,CAACG,GAA2BC,MAAe3B,EAAa0B,GAAMC,CAAE;AAAA,IAChE,CAAC3B,CAAY;AAAA,EAAA;AAGd,SACC,gBAAA4B;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAApC;AAAA,MACA,OAAQK,EAAMN,CAAQ,KAA4B;AAAA,MAClD,UAAU,CAACsC,MAAS/B,EAAM,EAAE,CAACP,CAAQ,GAAGsC,GAA6B;AAAA,MACrE,WAAAnC;AAAA,MACA,aAAAD;AAAA,MACA,WAAAE;AAAA,MACA,UAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe;AAAA,MACpD,cAAAW;AAAA,MACA,OAAOd;AAAA,MACP,iBAAAwB;AAAA,MACA,SAAS,MAAMnB,EAAmBd,CAAQ;AAAA,MAC1C,gBAAA8B;AAAA,MACA,kBAAkBf,IAAmBC,IAAwB;AAAA,MAC7D,aAAAY;AAAA,MACA,mBAAAT;AAAA,MACA,sBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,aAAWhB,EAAK,WAAW;AAAA,IAAA;AAAA,EAAA;AAG9B;"}

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

@@ -1,5 +1,6 @@
 import { MentionDropdownRenderProps } from '../../../editor';
 import { default as React } from 'react';
+import { VariableListInterfaceV3, VariableV3 } from '../../variable-picker-v3/model';
 import { ToolAction, ToolSource } from '../constants/tools';
 type MentionPickerProps = MentionDropdownRenderProps & {
     /** Opens the create-sub-agent drawer (shows a "Create new" row in the Sub-agent view). */
@@ -23,12 +24,24 @@ type MentionPickerProps = MentionDropdownRenderProps & {
     integrationStatus?: Partial<Record<ToolSource, boolean>>;
     /** Open the connect flow for an unconnected source (used by the Connect row). */
     onConnectIntegration?: (source: ToolSource) => void;
+    /**
+     * Variable catalog for the "Variables" view (the shared VariablePicker's
+     * `data`). Omitted / empty → the Variables category is not offered.
+     */
+    variablesData?: VariableListInterfaceV3[];
+    /**
+     * A variable was picked from the Variables view. The picker dismisses itself
+     * (stripping the typed `@`) BEFORE calling this — the handler inserts a
+     * `Variable: <name>` mention chip (see MentionEditor).
+     */
+    onSelectVariable?: (variable: VariableV3) => void;
 };
 /**
  * `@` reference picker. Drills:
  *   root → Tools → <source> (Manifest / Shopify / …) → tool
  *        → Sub-agent → sub-agent
- * ("Add condition" and "Variables" are intentionally not shown yet.)
+ *        → Variables → shared VariablePicker (embedded)
+ * ("Add condition" is intentionally not shown yet.)
  *
  * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the
  * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.