@bikdotai/bik-component-library 0.0.853 → 0.0.855

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

@@ -1,2 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),q=require("../../TypographyStyle.js"),x=require("../../../constants/Theme.js"),h=require("../AgentBuilder.styled.js"),G=require("../constants/editorStyle.js"),S=require("../utils/mentionSerialization.js"),y=require("../utils/sourceIcons.js"),I=require("./MentionPicker.js"),J=require("../../../editor/BikEditor.js"),Y=a=>a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\r?\n/g,"<br>"),$=({label:a,value:o,onChange:E,maxLength:c,placeholder:R,minHeight:j="200px",resetKey:d,mentionItems:s,tools:k,onMentionSelect:O,onFocus:H,registerInsert:l,onCreateSubAgent:M,toolActions:B,integrationStatus:L,onConnectIntegration:P,action:A,...D})=>{const u=n.useRef(null),[_,p]=n.useState(o.length),g=n.useRef(o.length),w=n.useCallback(({text:e})=>{if(!e)return!1;const t=u.current,f=t?.getSelectedText().length??0,i=c-(g.current-f);return e.length<=i?!1:(i<=0||t?.insertContent(Y(e.slice(0,i))),!0)},[c]),T=n.useCallback((e,t,f,i)=>{const m=u.current;if(!m)return;const C=s.find(b=>String(b.id)===String(t)&&b.meta?.kind===e),N=f??C?.label??t,z=i??C?.meta?.source;m.insertInlineContent(`${S.buildMentionHtml(String(t),N,e,z)}&nbsp;`)},[s]);n.useEffect(()=>{if(l)return l(T),()=>l(null)},[l,T]);const F=n.useMemo(()=>S.instructionsToEditorHtml(o,s),[d]);return n.useEffect(()=>{p(o.length),g.current=o.length},[d]),r.jsxs(h.FieldBlock,{children:[r.jsxs(h.FieldLabelRow,{children:[r.jsx(q.TitleSmall,{color:x.COLORS.content.primary,children:a}),r.jsxs(q.BodyCaption,{color:x.COLORS.content.secondary,children:[_,"/",c]})]}),r.jsxs(h.AiTextAreaShell,{minHeight:j,"data-test":D["data-test"],children:[r.jsx(J.BikEditor,{ref:u,initialContent:F,placeholder:R,characterLimit:c,characterLimitHard:!0,onPaste:w,minHeight:"120px",maxHeight:"320px",style:{border:"none"},editorStyle:G.AGENT_EDITOR_STYLE,onFocus:H,mentions:{agents:s,removeTriggerOnDismiss:!0,renderChipIcon:e=>y.renderSourceIcon(y.sourceIcon(e??void 0),-6),renderDropdown:e=>r.jsx(I.MentionPicker,{...e,onCreateSubAgent:M,toolActions:B,integrationStatus:L,onConnectIntegration:P}),onSelect:e=>{const t=e.meta?.kind;t&&O?.(t,String(e.id))}},onChange:e=>{p(e.characterCount),g.current=e.characterCount;const t=u.current?.getJSON()??null;E(S.editorDocToInstructions(t,k))}},d),A]})]})};exports.MentionEditor=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),R=require("styled-components"),E=require("../../TypographyStyle.js"),H=require("../../../constants/Theme.js"),U=require("../../add-variableV2/AddDataPill.js"),S=require("../AgentBuilder.styled.js"),W=require("../constants/editorStyle.js"),c=require("../utils/mentionSerialization.js"),O=require("../utils/sourceIcons.js"),X=require("./MentionPicker.js"),Z=require("../../../editor/BikEditor.js"),ee=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},te=ee(R),ne=n=>n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\r?\n/g,"<br>"),re=({label:n,value:s,onChange:P,maxLength:u,placeholder:$,minHeight:v="200px",resetKey:B,mentionItems:l,tools:_,onMentionSelect:A,onFocus:D,registerInsert:d,onCreateSubAgent:y,toolActions:m,integrationStatus:L,onConnectIntegration:F,variablesData:f,addDataButton:V,action:N,...w})=>{const i=r.useRef(null),[I,C]=r.useState(s.length),[T,M]=r.useState(!1),h=(f?.length??0)>0,z=l.length===0&&(m?.length??0)===0&&!y&&h,G=r.useCallback(e=>{const t=c.variableTokenName(e.actualValue);i.current?.insertInlineContent(`${c.buildMentionHtml(t,`{{${t}}}`,"variable")}&nbsp;`)},[]),p=r.useRef(s.length),J=r.useCallback(({text:e})=>{if(!e)return!1;const t=i.current,b=t?.getSelectedText().length??0,a=u-(p.current-b);return e.length<=a?!1:(a<=0||t?.insertContent(ne(e.slice(0,a))),!0)},[u]),q=r.useCallback((e,t,b,a)=>{const x=i.current;if(!x)return;const j=l.find(k=>String(k.id)===String(t)&&k.meta?.kind===e),Y=b??j?.label??t,Q=a??j?.meta?.source;x.insertInlineContent(`${c.buildMentionHtml(String(t),Y,e,Q)}&nbsp;`)},[l]);r.useEffect(()=>{if(d)return d(q),()=>d(null)},[d,q]);const g=`${B??""}:${h?"v1":"v0"}`,K=r.useMemo(()=>c.instructionsToEditorHtml(s,[...l,...c.buildVariableMentionItems(f)]),[g]);return r.useEffect(()=>{C(s.length),p.current=s.length},[g]),o.jsxs(S.FieldBlock,{children:[o.jsxs(S.FieldLabelRow,{children:[o.jsx(E.TitleSmall,{color:H.COLORS.content.primary,children:n}),o.jsxs(E.BodyCaption,{color:H.COLORS.content.secondary,children:[I,"/",u]})]}),o.jsxs(oe,{minHeight:v,focused:T,$atHint:h,style:{position:"relative"},"data-test":w["data-test"],children:[o.jsx(Z.BikEditor,{ref:i,initialContent:K,placeholder:$,characterLimit:u,characterLimitHard:!0,onPaste:J,minHeight:"120px",maxHeight:"320px",style:{border:"none"},editorStyle:W.AGENT_EDITOR_STYLE,onFocus:()=>{M(!0),D?.()},onBlur:()=>M(!1),mentions:{agents:l,removeTriggerOnDismiss:!0,renderChipIcon:e=>O.renderSourceIcon(O.sourceIcon(e??void 0),-6),renderDropdown:e=>o.jsx(X.MentionPicker,{...e,onCreateSubAgent:y,toolActions:m,integrationStatus:L,onConnectIntegration:F,variablesData:f,onSelectVariable:G}),onSelect:e=>{const t=e.meta?.kind;(t==="tool"||t==="subagent")&&A?.(t,String(e.id))}},onChange:e=>{C(e.characterCount),p.current=e.characterCount;const t=i.current?.getJSON()??null;P(c.editorDocToInstructions(t,_))}},g),N,V&&T&&o.jsx(U.AddDataPill,{"data-test":"mention-add-data",label:z?"Add variable":void 0,onOpen:()=>i.current?.actions.openMentionMenu("@")})]})]})},oe=te.default(S.AiTextAreaShell)`
+	${n=>n.$atHint&&R.css`
+			.ProseMirror.ProseMirror-focused p.is-editor-empty:first-child::before {
+				content: 'Enter text, type @ to add variable';
+			}
+		`}
+`;exports.MentionEditor=re;
 //# sourceMappingURL=MentionEditor.js.map

package/dist/cjs/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, PasteData } 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 { renderSourceIcon, sourceIcon } from '../utils/sourceIcons';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (\n\tkind: 'tool' | 'subagent',\n\tid: string,\n\tlabel?: string,\n\tsource?: string,\n) => void;\n\n// Insert-safe HTML for a plain-text run: escape entities so pasted text is never\n// interpreted as markup, and keep line breaks (mirrors the plain-paste pipeline).\nconst plainTextToHtml = (text: string): string =>\n\ttext\n\t\t.replace(/&/g, '&amp;')\n\t\t.replace(/</g, '&lt;')\n\t\t.replace(/>/g, '&gt;')\n\t\t.replace(/\\r?\\n/g, '<br>');\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\t// Live character count for the paste handler (BikEditor captures onPaste once\n\t// at mount, so it can't read the `count` state without going stale).\n\tconst countRef = useRef(value.length);\n\n\t// On paste, insert only the characters that still fit under the limit instead\n\t// of letting the paste overflow. Pastes that fit fall through to the editor's\n\t// normal (break-preserving) plain-paste pipeline.\n\tconst handlePaste = useCallback(\n\t\t({ text }: PasteData): boolean | void => {\n\t\t\tif (!text) {\n\t\t\t\treturn false; // non-text (e.g. images) → default handling\n\t\t\t}\n\t\t\tconst editor = editorRef.current;\n\t\t\tconst selectionLength = editor?.getSelectedText().length ?? 0;\n\t\t\tconst room = maxLength - (countRef.current - selectionLength);\n\t\t\tif (text.length <= room) {\n\t\t\t\treturn false; // fits → let the default plain-paste pipeline run\n\t\t\t}\n\t\t\tif (room <= 0) {\n\t\t\t\treturn true; // already full → drop the paste\n\t\t\t}\n\t\t\teditor?.insertContent(plainTextToHtml(text.slice(0, room)));\n\t\t\treturn true;\n\t\t},\n\t\t[maxLength],\n\t);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel, overrideSource) => {\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\t// Prefer the caller-supplied source: a JUST-created custom tool (Rest API /\n\t\t\t// email / Slack) isn't in `mentionItems` yet, so the lookup would miss and\n\t\t\t// the chip would render without its icon until reload.\n\t\t\tconst source =\n\t\t\t\toverrideSource ??\n\t\t\t\t(item?.meta as unknown as MentionKindMeta | undefined)?.source;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind, source)}&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() => {\n\t\t\tsetCount(value.length);\n\t\t\tcountRef.current = value.length;\n\t\t},\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// Hard limit: nothing may push the content past the cap. Typing,\n\t\t\t\t\t// Enter and drop past it are rejected; a paste is truncated to fill\n\t\t\t\t\t// the remaining room (`onPaste` pre-trims; the hard filter trims any\n\t\t\t\t\t// residue). Content loaded over the cap is kept and can only shrink.\n\t\t\t\t\t// Same metric as the shown count.\n\t\t\t\t\tcharacterLimit={maxLength}\n\t\t\t\t\tcharacterLimitHard\n\t\t\t\t\tonPaste={handlePaste}\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\t// Tool chips lead with their source glyph (manifest / shopify / …);\n\t\t\t\t\t\t// sub-agent chips have no source, so no icon.\n\t\t\t\t\t\trenderChipIcon: (source) =>\n\t\t\t\t\t\t\trenderSourceIcon(sourceIcon(source ?? undefined), -6),\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\tcountRef.current = 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":["plainTextToHtml","text","MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","toolActions","integrationStatus","onConnectIntegration","action","rest","editorRef","useRef","count","setCount","useState","countRef","handlePaste","useCallback","editor","selectionLength","room","insert","kind","id","overrideLabel","overrideSource","item","m","finalLabel","source","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","renderSourceIcon","sourceIcon","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, PasteData } from '@src/editor';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AddDataPill } from '../../add-variableV2/AddDataPill';\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 { renderSourceIcon, sourceIcon } from '../utils/sourceIcons';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (\n\tkind: 'tool' | 'subagent',\n\tid: string,\n\tlabel?: string,\n\tsource?: string,\n) => void;\n\n// Insert-safe HTML for a plain-text run: escape entities so pasted text is never\n// interpreted as markup, and keep line breaks (mirrors the plain-paste pipeline).\nconst plainTextToHtml = (text: string): string =>\n\ttext\n\t\t.replace(/&/g, '&amp;')\n\t\t.replace(/</g, '&lt;')\n\t\t.replace(/>/g, '&gt;')\n\t\t.replace(/\\r?\\n/g, '<br>');\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 `{{<name>}}` mention chip (rendered as the purple raw token) at the\n\t * cursor, persisted as `{{variable:<name>}}`. Omit to hide the category.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n\t/**\n\t * Show a floating \"+ Add data\" pill at the field's bottom-right while it is\n\t * focused. Clicking it opens the same `@` reference menu at the cursor.\n\t */\n\taddDataButton?: boolean;\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\taddDataButton,\n\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\tconst [focused, setFocused] = useState(false);\n\n\tconst hasVariables = (variablesData?.length ?? 0) > 0;\n\t// No tools / sub-agents on offer → `@` lands directly on the variable list,\n\t// so the affordance reads \"Add variable\" rather than the generic \"Add data\".\n\tconst variablesOnly =\n\t\tmentionItems.length === 0 &&\n\t\t(toolActions?.length ?? 0) === 0 &&\n\t\t!onCreateSubAgent &&\n\t\thasVariables;\n\n\t// The picker dismissed itself already (stripping the \"@\" + query) — drop a\n\t// mention chip at the cursor whose text is the raw token (`{{<name>}}`,\n\t// rendered purple by the editor). `editorDocToInstructions` serializes it\n\t// back to a `{{variable:<name>}}` token.\n\tconst onSelectVariable = useCallback((variable: VariableV3) => {\n\t\tconst name = variableTokenName(variable.actualValue);\n\t\teditorRef.current?.insertInlineContent(\n\t\t\t`${buildMentionHtml(name, `{{${name}}}`, 'variable')}&nbsp;`,\n\t\t);\n\t}, []);\n\t// Live character count for the paste handler (BikEditor captures onPaste once\n\t// at mount, so it can't read the `count` state without going stale).\n\tconst countRef = useRef(value.length);\n\n\t// On paste, insert only the characters that still fit under the limit instead\n\t// of letting the paste overflow. Pastes that fit fall through to the editor's\n\t// normal (break-preserving) plain-paste pipeline.\n\tconst handlePaste = useCallback(\n\t\t({ text }: PasteData): boolean | void => {\n\t\t\tif (!text) {\n\t\t\t\treturn false; // non-text (e.g. images) → default handling\n\t\t\t}\n\t\t\tconst editor = editorRef.current;\n\t\t\tconst selectionLength = editor?.getSelectedText().length ?? 0;\n\t\t\tconst room = maxLength - (countRef.current - selectionLength);\n\t\t\tif (text.length <= room) {\n\t\t\t\treturn false; // fits → let the default plain-paste pipeline run\n\t\t\t}\n\t\t\tif (room <= 0) {\n\t\t\t\treturn true; // already full → drop the paste\n\t\t\t}\n\t\t\teditor?.insertContent(plainTextToHtml(text.slice(0, room)));\n\t\t\treturn true;\n\t\t},\n\t\t[maxLength],\n\t);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel, overrideSource) => {\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\t// Prefer the caller-supplied source: a JUST-created custom tool (Rest API /\n\t\t\t// email / Slack) isn't in `mentionItems` yet, so the lookup would miss and\n\t\t\t// the chip would render without its icon until reload.\n\t\t\tconst source =\n\t\t\t\toverrideSource ??\n\t\t\t\t(item?.meta as unknown as MentionKindMeta | undefined)?.source;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind, source)}&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// Initial HTML, re-derived (editor remounted via editorKey) on resetKey AND\n\t// when the variable catalog first arrives — a consumer may fetch it async,\n\t// and without the re-seed, stored `{{variable:…}}` tokens stay literal text\n\t// instead of chips. `value` is kept current by onChange, so the remount\n\t// re-seeds from the latest content.\n\tconst editorKey = `${resetKey ?? ''}:${hasVariables ? 'v1' : 'v0'}`;\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[editorKey],\n\t);\n\n\tuseEffect(\n\t\t() => {\n\t\t\tsetCount(value.length);\n\t\t\tcountRef.current = value.length;\n\t\t},\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[editorKey],\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<MentionShell\n\t\t\t\tminHeight={minHeight}\n\t\t\t\tfocused={focused}\n\t\t\t\t$atHint={hasVariables}\n\t\t\t\t// Anchors the floating pill to the shell's corner.\n\t\t\t\tstyle={{ position: 'relative' }}\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={editorKey}\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// Hard limit: nothing may push the content past the cap. Typing,\n\t\t\t\t\t// Enter and drop past it are rejected; a paste is truncated to fill\n\t\t\t\t\t// the remaining room (`onPaste` pre-trims; the hard filter trims any\n\t\t\t\t\t// residue). Content loaded over the cap is kept and can only shrink.\n\t\t\t\t\t// Same metric as the shown count.\n\t\t\t\t\tcharacterLimit={maxLength}\n\t\t\t\t\tcharacterLimitHard\n\t\t\t\t\tonPaste={handlePaste}\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={() => {\n\t\t\t\t\t\tsetFocused(true);\n\t\t\t\t\t\tonFocus?.();\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={() => setFocused(false)}\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\t// Tool chips lead with their source glyph (manifest / shopify / …);\n\t\t\t\t\t\t// sub-agent chips have no source, so no icon.\n\t\t\t\t\t\trenderChipIcon: (source) =>\n\t\t\t\t\t\t\trenderSourceIcon(sourceIcon(source ?? undefined), -6),\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\tcountRef.current = 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\t{addDataButton && focused && (\n\t\t\t\t\t<AddDataPill\n\t\t\t\t\t\tdata-test=\"mention-add-data\"\n\t\t\t\t\t\tlabel={variablesOnly ? 'Add variable' : undefined}\n\t\t\t\t\t\tonOpen={() => editorRef.current?.actions.openMentionMenu('@')}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</MentionShell>\n\t\t</FieldBlock>\n\t);\n};\n\n// While the (empty) editor is focused, the placeholder switches to the `@`\n// hint — but only when a variable catalog is actually on offer; a field\n// without one keeps its own placeholder (the hint would promise a Variables\n// category the picker doesn't show).\nconst MentionShell = styled(AiTextAreaShell)<{ $atHint: boolean }>`\n\t${(p) =>\n\t\tp.$atHint &&\n\t\tcss`\n\t\t\t.ProseMirror.ProseMirror-focused p.is-editor-empty:first-child::before {\n\t\t\t\tcontent: 'Enter text, type @ to add variable';\n\t\t\t}\n\t\t`}\n`;\n"],"names":["plainTextToHtml","text","MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","toolActions","integrationStatus","onConnectIntegration","variablesData","addDataButton","action","rest","editorRef","useRef","count","setCount","useState","focused","setFocused","hasVariables","variablesOnly","onSelectVariable","useCallback","variable","name","variableTokenName","buildMentionHtml","countRef","handlePaste","editor","selectionLength","room","insert","kind","id","overrideLabel","overrideSource","item","m","finalLabel","source","useEffect","editorKey","initialHtml","useMemo","instructionsToEditorHtml","buildVariableMentionItems","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","MentionShell","BikEditor","AGENT_EDITOR_STYLE","renderSourceIcon","sourceIcon","props","MentionPicker","snapshot","doc","editorDocToInstructions","AddDataPill","styled","AiTextAreaShell","p","css"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),n=require("react"),k=require("../context/AgentBuilderContext.js"),a=require("../utils/mentionSerialization.js"),y=require("../utils/toolActions.js"),B=require("./MentionEditor.js"),E=({fieldKey:e,label:d,placeholder:T,maxLength:m,minHeight:M,...p})=>{const{value:t,patch:C,addReference:l,availableTools:i,availableSubAgents:u,applicationType:c,mentionResetKey:S,registerMentionField:g,notifyMentionFocus:q,onCreateSubAgent:v,requestCreateSubAgent:F,requestToolAction:b,configToolTemplates:A,integrationStatus:s,onConnectIntegration:r}=k.useAgentBuilderContext(),I=n.useMemo(()=>[...a.buildAgentMentionItems(i,u,a.appTypeLabel(c)),...a.buildCustomToolMentionItems(t.configTools,t.restApiTools)],[i,u,c,t.configTools,t.restApiTools]),x=n.useMemo(()=>y.buildToolActions(A,b,s,r),[b,A,s,r]),R=n.useCallback(o=>g(e,o),[g,e]),$=n.useCallback((o,j)=>l(o,j),[l]);return h.jsx(B.MentionEditor,{label:d,value:t[e]??"",onChange:o=>C({[e]:o}),maxLength:m,placeholder:T,minHeight:M,resetKey:`${t.id}:${e}:${S}`,mentionItems:I,tools:i,onMentionSelect:$,onFocus:()=>q(e),registerInsert:R,onCreateSubAgent:v?F:void 0,toolActions:x,integrationStatus:s,onConnectIntegration:r,"data-test":p["data-test"]})};exports.MentionField=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),n=require("react"),k=require("../context/AgentBuilderContext.js"),r=require("../utils/mentionSerialization.js"),y=require("../utils/toolActions.js"),D=require("./MentionEditor.js"),E=({fieldKey:e,label:A,placeholder:T,maxLength:m,minHeight:M,...p})=>{const{value:t,patch:C,addReference:l,availableTools:i,availableSubAgents:u,applicationType:c,mentionResetKey:S,registerMentionField:g,notifyMentionFocus:q,onCreateSubAgent:v,requestCreateSubAgent:F,requestToolAction:b,configToolTemplates:d,integrationStatus:s,onConnectIntegration:a,variablesData:I}=k.useAgentBuilderContext(),x=n.useMemo(()=>[...r.buildAgentMentionItems(i,u,r.appTypeLabel(c)),...r.buildCustomToolMentionItems(t.configTools,t.restApiTools)],[i,u,c,t.configTools,t.restApiTools]),R=n.useMemo(()=>y.buildToolActions(d,b,s,a),[b,d,s,a]),$=n.useCallback(o=>g(e,o),[g,e]),j=n.useCallback((o,B)=>l(o,B),[l]);return h.jsx(D.MentionEditor,{label:A,value:t[e]??"",onChange:o=>C({[e]:o}),maxLength:m,placeholder:T,minHeight:M,resetKey:`${t.id}:${e}:${S}`,mentionItems:x,tools:i,onMentionSelect:j,onFocus:()=>q(e),registerInsert:$,onCreateSubAgent:v?F:void 0,toolActions:R,integrationStatus:s,onConnectIntegration:a,variablesData:I,addDataButton:!0,"data-test":p["data-test"]})};exports.MentionField=E;
 //# sourceMappingURL=MentionField.js.map

package/dist/cjs/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":"0SA+BaA,EAA4C,CAAC,CACzD,SAAAC,EACA,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,GAAGC,CACJ,IAAM,CACL,KAAM,CACL,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,eAAAC,EACA,mBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,sBAAAC,EACA,kBAAAC,EACA,oBAAAC,EACA,kBAAAC,EACA,qBAAAC,CAAA,EACGC,yBAAA,EAKEC,EAAeC,EAAAA,QACpB,IAAM,CACL,GAAGC,EAAAA,uBACFf,EACAC,EACAe,EAAAA,aAAad,CAAe,CAAA,EAE7B,GAAGe,8BAA4BpB,EAAM,YAAaA,EAAM,YAAY,CAAA,EAErE,CACCG,EACAC,EACAC,EACAL,EAAM,YACNA,EAAM,YAAA,CACP,EAOKqB,EAAcJ,EAAAA,QACnB,IACCK,EAAAA,iBACCV,EACAD,EACAE,EACAC,CAAA,EAEF,CACCH,EACAC,EACAC,EACAC,CAAA,CACD,EAGKS,EAAiBC,EAAAA,YACrBC,GACAlB,EAAqBb,EAAU+B,CAAE,EAClC,CAAClB,EAAsBb,CAAQ,CAAA,EAM1BgC,EAAkBF,EAAAA,YACvB,CAACG,EAA2BC,IAAe1B,EAAayB,EAAMC,CAAE,EAChE,CAAC1B,CAAY,CAAA,EAGd,OACC2B,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAAnC,EACA,MAAQK,EAAMN,CAAQ,GAA4B,GAClD,SAAWqC,GAAS9B,EAAM,CAAE,CAACP,CAAQ,EAAGqC,EAA6B,EACrE,UAAAlC,EACA,YAAAD,EACA,UAAAE,EACA,SAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe,GACpD,aAAAU,EACA,MAAOb,EACP,gBAAAuB,EACA,QAAS,IAAMlB,EAAmBd,CAAQ,EAC1C,eAAA6B,EACA,iBAAkBd,EAAmBC,EAAwB,OAAA,YAC7DW,EACA,kBAAAR,EACA,qBAAAC,EACA,YAAWf,EAAK,WAAW,CAAA,CAAA,CAG9B"}
+{"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\t// Step-3 fields get the floating \"+ Add data\" pill (same as typing @).\n\t\t\taddDataButton\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":"0SA+BaA,EAA4C,CAAC,CACzD,SAAAC,EACA,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,GAAGC,CACJ,IAAM,CACL,KAAM,CACL,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,eAAAC,EACA,mBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,sBAAAC,EACA,kBAAAC,EACA,oBAAAC,EACA,kBAAAC,EACA,qBAAAC,EACA,cAAAC,CAAA,EACGC,yBAAA,EAKEC,EAAeC,EAAAA,QACpB,IAAM,CACL,GAAGC,EAAAA,uBACFhB,EACAC,EACAgB,EAAAA,aAAaf,CAAe,CAAA,EAE7B,GAAGgB,8BAA4BrB,EAAM,YAAaA,EAAM,YAAY,CAAA,EAErE,CACCG,EACAC,EACAC,EACAL,EAAM,YACNA,EAAM,YAAA,CACP,EAOKsB,EAAcJ,EAAAA,QACnB,IACCK,EAAAA,iBACCX,EACAD,EACAE,EACAC,CAAA,EAEF,CACCH,EACAC,EACAC,EACAC,CAAA,CACD,EAGKU,EAAiBC,EAAAA,YACrBC,GACAnB,EAAqBb,EAAUgC,CAAE,EAClC,CAACnB,EAAsBb,CAAQ,CAAA,EAM1BiC,EAAkBF,EAAAA,YACvB,CAACG,EAA2BC,IAAe3B,EAAa0B,EAAMC,CAAE,EAChE,CAAC3B,CAAY,CAAA,EAGd,OACC4B,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAApC,EACA,MAAQK,EAAMN,CAAQ,GAA4B,GAClD,SAAWsC,GAAS/B,EAAM,CAAE,CAACP,CAAQ,EAAGsC,EAA6B,EACrE,UAAAnC,EACA,YAAAD,EACA,UAAAE,EACA,SAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe,GACpD,aAAAW,EACA,MAAOd,EACP,gBAAAwB,EACA,QAAS,IAAMnB,EAAmBd,CAAQ,EAC1C,eAAA8B,EACA,iBAAkBf,EAAmBC,EAAwB,OAAA,YAC7DY,EACA,kBAAAT,EACA,qBAAAC,EACA,cAAAC,EAEA,cAAa,GACb,YAAWhB,EAAK,WAAW,CAAA,CAAA,CAG9B"}

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

@@ -1,21 +1,48 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),H=require("../../../assets/icons/chevronRight.svg.js"),ee=require("../../../assets/icons/searchIcon.svg.js"),te=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),u=require("react"),ne=require("styled-components"),G=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),r=require("../constants/tools.js"),P=require("../utils/mentionSerialization.js"),I=require("../utils/sourceIcons.js"),oe=require("../../../icons/Informational/Identity/PuzzlePiece.js"),Q=require("../../../icons/Informational/Common UI/Shield.js"),re=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},g=re(ne),V={Icon:oe.default,w:20,h:20},O=l=>l.meta,w=l=>O(l)?.plainLabel??l.label,ie="__bik_create_subagent__",le=({items:l,onSelect:L,registerKeyHandler:C,onClose:m,onCreateSubAgent:y,initialSource:z,toolActions:k,integrationStatus:D,onConnectIntegration:Y})=>{const[W,j]=u.useState(null),[c,v]=u.useState(z??null),[T,R]=u.useState(-1),[E,K]=u.useState(""),S=u.useMemo(()=>l.filter(e=>O(e)?.kind==="tool"),[l]),_=u.useMemo(()=>l.filter(e=>O(e)?.kind==="subagent"),[l]),q=u.useMemo(()=>{const e=[];return S.forEach(i=>{const x=O(i)?.source??"other";e.includes(x)||e.push(x)}),e},[S]),$=u.useMemo(()=>new Map((k??[]).map(e=>[e.source,e])),[k]),A=u.useMemo(()=>r.CATEGORIES.filter(e=>e.key==="tool"?S.length>0||(k?.length??0)>0:_.length>0||!!y),[S.length,_.length,y,k?.length]),B=A.length===1?A[0].key:null,f=W??B,h=f?f==="subagent"?{title:"Sub-agent",onBack:B?void 0:()=>j(null)}:c===r.MORE_INTEGRATIONS_KEY?{title:r.MORE_INTEGRATIONS_LABEL,onBack:()=>v(null),icon:V}:c?{title:P.toolSourceLabel(c),onBack:z?void 0:()=>v(r.isMoreIntegrationSource(c)?r.MORE_INTEGRATIONS_KEY:null),icon:I.sourceIcon(c)}:{title:"Tools",onBack:B?void 0:()=>j(null)}:null,d=u.useMemo(()=>{if(!f)return A.map(n=>({id:n.key,label:n.label,drillsIn:!0,onActivate:()=>{j(n.key),v(null)}}));if(f==="subagent"){const n=E.trim().toLowerCase(),p=_.filter(b=>!n||w(b).toLowerCase().includes(n)).map(b=>({id:String(b.id),label:w(b),drillsIn:!1,onActivate:()=>L(b)}));return y&&p.push({id:ie,label:"Create new",drillsIn:!1,isCreate:!0,onActivate:()=>{m?.(),y()}}),p}if(!c||c===r.MORE_INTEGRATIONS_KEY){const n=(k??[]).map(t=>t.source).filter(t=>!q.includes(t)),p=[...q,...n],b=t=>{const s=$.get(t);if((s!==void 0?s.connected:D?.[t])===!1)return{id:t,label:P.toolSourceLabel(t),drillsIn:!1,icon:I.sourceIcon(t)??s?.icon,rightLabel:"Connect",onActivate:()=>{m?.(),s?.onConnect?s.onConnect():Y?.(t)}};const J=S.filter(M=>(O(M)?.source??"other")===t);if(J.length+(s?1:0)===1&&!(s===void 0&&r.isIntegrationSource(t))){const M=I.sourceIcon(t)??s?.icon;if(s)return{id:t,label:s.label,drillsIn:!1,icon:M,onActivate:()=>{m?.(),s.onSelect()}};const N=J[0];return{id:String(N.id),label:w(N),drillsIn:!1,icon:M,authRequired:O(N)?.authRequired,onActivate:()=>L(N)}}return{id:t,label:P.toolSourceLabel(t),drillsIn:!0,icon:I.sourceIcon(t)??s?.icon,onActivate:()=>v(t)}};if(c===r.MORE_INTEGRATIONS_KEY)return p.filter(t=>r.isMoreIntegrationSource(t)).sort((t,s)=>r.toolSourceRank(t)-r.toolSourceRank(s)).map(b);const F=p.filter(t=>!r.isMoreIntegrationSource(t)).map(t=>({row:b(t),rank:r.toolSourceRank(t)}));return p.some(t=>r.isMoreIntegrationSource(t))&&F.push({rank:r.MORE_INTEGRATIONS_RANK,row:{id:r.MORE_INTEGRATIONS_KEY,label:r.MORE_INTEGRATIONS_LABEL,drillsIn:!0,icon:V,onActivate:()=>v(r.MORE_INTEGRATIONS_KEY)}}),F.sort((t,s)=>t.rank-s.rank).map(t=>t.row)}const e=E.trim().toLowerCase(),i=S.filter(n=>(O(n)?.source??"other")===c).filter(n=>!e||w(n).toLowerCase().includes(e)).map(n=>({id:String(n.id),label:w(n),drillsIn:!1,authRequired:O(n)?.authRequired,onActivate:()=>L(n)})),x=$.get(c);if(x){const n=c in r.CONFIG_TOOL_SOURCES;i.push({id:`create:${c}`,label:x.label,drillsIn:!1,isCreate:!n,onActivate:()=>{m?.(),x.onSelect()}})}return i},[f,A,c,E,S,_,q,L,m,y,k,$,D,Y]);u.useEffect(()=>R(-1),[f,c,E,l]),u.useEffect(()=>K(""),[f,c]);const U=u.useRef({rows:d,activeIndex:T,header:h});U.current={rows:d,activeIndex:T,header:h},u.useEffect(()=>{if(C)return C(e=>{const{rows:i,activeIndex:x,header:n}=U.current;switch(e.key){case"ArrowDown":return i.length&&R(p=>(p+1)%i.length),!0;case"ArrowUp":return i.length&&R(p=>(p+i.length-1)%i.length),!0;case"ArrowRight":case"Enter":return(i[x]??i[0])?.onActivate(),!0;case"ArrowLeft":return n?.onBack?(n.onBack(),!0):!1;default:return!1}}),()=>C(null)},[C]);const X=f?d.length&&!d[0].drillsIn?"items":"sources":"categories",Z=f==="tool"&&!!c&&c!==r.MORE_INTEGRATIONS_KEY||f==="subagent";return o.jsxs(ae,{className:`bik-mention-picker bik-mention-picker--${X}`,children:[h&&o.jsxs(ge,{type:"button",onClick:h.onBack,disabled:!h.onBack,style:{background:a.COLORS.surface.subdued,cursor:h.onBack?"pointer":"default"},children:[h.onBack&&o.jsx(te.default,{width:20,height:20,color:a.COLORS.content.primary}),h.icon&&I.renderSourceIcon(h.icon),o.jsxs(G.TitleSmall,{children:[" ",h.title]})]}),Z&&o.jsxs(ce,{children:[o.jsx(ee.default,{width:20,height:20,color:a.COLORS.content.placeholder}),o.jsx(se,{autoFocus:!0,value:E,placeholder:"Search","data-test":"mention-picker-search",onChange:e=>K(e.target.value),onKeyDown:e=>{d.length&&(e.key==="ArrowDown"?(e.preventDefault(),R(i=>(i+1)%d.length)):e.key==="ArrowUp"?(e.preventDefault(),R(i=>(i+d.length-1)%d.length)):e.key==="Enter"&&(e.preventDefault(),(d[T]??d[0])?.onActivate()))}})]}),d.length===0?o.jsx(xe,{children:f==="subagent"?null:"No tools available"}):d.map((e,i)=>o.jsx(ue,{type:"button",$active:i===T,onMouseEnter:()=>R(i),onMouseLeave:()=>R(-1),onClick:e.onActivate,children:e.isCreate?o.jsx(pe,{children:e.label}):o.jsxs(o.Fragment,{children:[o.jsxs(de,{children:[I.renderSourceIcon(e.icon),o.jsx(G.BodySecondary,{color:a.COLORS.content.primary,children:e.label}),e.authRequired&&o.jsx(Q.default,{size:16,"aria-label":"This tool requires customer verification"})]}),e.rightLabel?o.jsx(he,{children:e.rightLabel}):e.drillsIn&&o.jsx(H.default,{width:12,height:12})]})},e.id)),d.some(e=>e.authRequired)&&o.jsxs(fe,{children:[o.jsx(Q.default,{size:16}),o.jsx(G.BodyCaption,{color:a.COLORS.content.secondary,children:"This tool requires customer verification"})]})]})},ae=g.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),te=require("../../../assets/icons/chevronRight.svg.js"),re=require("../../../assets/icons/searchIcon.svg.js"),ne=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),d=require("react"),oe=require("styled-components"),z=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),ie=require("../../variable-picker-v3/model.js"),i=require("../constants/tools.js"),D=require("../utils/mentionSerialization.js"),y=require("../utils/sourceIcons.js"),le=require("../../../icons/Informational/Identity/PuzzlePiece.js"),ae=require("../../variable-picker-v3/VariablePicker.js"),Q=require("../../../icons/Informational/Common UI/Shield.js"),ce=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},f=ce(oe),W={Icon:le.default,w:20,h:20},k=o=>o.meta,E=o=>k(o)?.plainLabel??o.label,se="__bik_create_subagent__",ue=({items:o,onSelect:L,registerKeyHandler:C,onClose:m,onCreateSubAgent:I,initialSource:Y,toolActions:S,integrationStatus:K,onConnectIntegration:V,variablesData:$,onSelectVariable:B})=>{const[X,T]=d.useState(null),[c,v]=d.useState(Y??null),[_,R]=d.useState(-1),[w,F]=d.useState(""),O=d.useMemo(()=>o.filter(e=>k(e)?.kind==="tool"),[o]),A=d.useMemo(()=>o.filter(e=>k(e)?.kind==="subagent"),[o]),P=d.useMemo(()=>{const e=[];return O.forEach(l=>{const b=k(l)?.source??"other";e.includes(b)||e.push(b)}),e},[O]),G=d.useMemo(()=>new Map((S??[]).map(e=>[e.source,e])),[S]),M=d.useMemo(()=>i.CATEGORIES.filter(e=>e.key==="tool"?O.length>0||(S?.length??0)>0:e.key==="variable"?($?.length??0)>0&&!!B:A.length>0||!!I),[O.length,A.length,I,S?.length,$?.length,B]),N=M.length===1?M[0].key:null,u=X??N,p=u?u==="subagent"?{title:"Sub-agent",onBack:N?void 0:()=>T(null)}:u==="variable"?{title:"Variables",onBack:N?void 0:()=>T(null)}:c===i.MORE_INTEGRATIONS_KEY?{title:i.MORE_INTEGRATIONS_LABEL,onBack:()=>v(null),icon:W}:c?{title:D.toolSourceLabel(c),onBack:Y?void 0:()=>v(i.isMoreIntegrationSource(c)?i.MORE_INTEGRATIONS_KEY:null),icon:y.sourceIcon(c)}:{title:"Tools",onBack:N?void 0:()=>T(null)}:null,h=d.useMemo(()=>{if(!u)return M.map(n=>({id:n.key,label:n.label,drillsIn:!0,onActivate:()=>{T(n.key),v(null)}}));if(u==="subagent"){const n=w.trim().toLowerCase(),g=A.filter(x=>!n||E(x).toLowerCase().includes(n)).map(x=>({id:String(x.id),label:E(x),drillsIn:!1,onActivate:()=>L(x)}));return I&&g.push({id:se,label:"Create new",drillsIn:!1,isCreate:!0,onActivate:()=>{m?.(),I()}}),g}if(u==="variable")return[];if(!c||c===i.MORE_INTEGRATIONS_KEY){const n=(S??[]).map(t=>t.source).filter(t=>!P.includes(t)),g=[...P,...n],x=t=>{const s=G.get(t);if((s!==void 0?s.connected:K?.[t])===!1)return{id:t,label:D.toolSourceLabel(t),drillsIn:!1,icon:y.sourceIcon(t)??s?.icon,rightLabel:"Connect",onActivate:()=>{m?.(),s?.onConnect?s.onConnect():V?.(t)}};const J=O.filter(j=>(k(j)?.source??"other")===t);if(J.length+(s?1:0)===1&&!(s===void 0&&i.isIntegrationSource(t))){const j=y.sourceIcon(t)??s?.icon;if(s)return{id:t,label:s.label,drillsIn:!1,icon:j,onActivate:()=>{m?.(),s.onSelect()}};const q=J[0];return{id:String(q.id),label:E(q),drillsIn:!1,icon:j,authRequired:k(q)?.authRequired,onActivate:()=>L(q)}}return{id:t,label:D.toolSourceLabel(t),drillsIn:!0,icon:y.sourceIcon(t)??s?.icon,onActivate:()=>v(t)}};if(c===i.MORE_INTEGRATIONS_KEY)return g.filter(t=>i.isMoreIntegrationSource(t)).sort((t,s)=>i.toolSourceRank(t)-i.toolSourceRank(s)).map(x);const H=g.filter(t=>!i.isMoreIntegrationSource(t)).map(t=>({row:x(t),rank:i.toolSourceRank(t)}));return g.some(t=>i.isMoreIntegrationSource(t))&&H.push({rank:i.MORE_INTEGRATIONS_RANK,row:{id:i.MORE_INTEGRATIONS_KEY,label:i.MORE_INTEGRATIONS_LABEL,drillsIn:!0,icon:W,onActivate:()=>v(i.MORE_INTEGRATIONS_KEY)}}),H.sort((t,s)=>t.rank-s.rank).map(t=>t.row)}const e=w.trim().toLowerCase(),l=O.filter(n=>(k(n)?.source??"other")===c).filter(n=>!e||E(n).toLowerCase().includes(e)).map(n=>({id:String(n.id),label:E(n),drillsIn:!1,authRequired:k(n)?.authRequired,onActivate:()=>L(n)})),b=G.get(c);if(b){const n=c in i.CONFIG_TOOL_SOURCES;l.push({id:`create:${c}`,label:b.label,drillsIn:!1,isCreate:!n,onActivate:()=>{m?.(),b.onSelect()}})}return l},[u,M,c,w,O,A,P,L,m,I,S,G,K,V]);d.useEffect(()=>R(-1),[u,c,w,o]),d.useEffect(()=>F(""),[u,c]);const U=d.useRef({rows:h,activeIndex:_,header:p});U.current={rows:h,activeIndex:_,header:p},d.useEffect(()=>{if(C)return C(e=>{const{rows:l,activeIndex:b,header:n}=U.current;if(!l.length&&e.key!=="ArrowLeft")return!1;switch(e.key){case"ArrowDown":return R(g=>(g+1)%l.length),!0;case"ArrowUp":return R(g=>(g+l.length-1)%l.length),!0;case"ArrowRight":case"Enter":return(l[b]??l[0])?.onActivate(),!0;case"ArrowLeft":return n?.onBack?(n.onBack(),!0):!1;default:return!1}}),()=>C(null)},[C]);const Z=u?h.length&&!h[0].drillsIn?"items":"sources":"categories",ee=u==="tool"&&!!c&&c!==i.MORE_INTEGRATIONS_KEY||u==="subagent";return r.jsxs(de,{className:`bik-mention-picker bik-mention-picker--${Z}`,$fixedHeight:u==="variable",children:[p&&r.jsxs(me,{type:"button",onClick:p.onBack,disabled:!p.onBack,style:{background:a.COLORS.surface.subdued,cursor:p.onBack?"pointer":"default"},children:[p.onBack&&r.jsx(ne.default,{width:20,height:20,color:a.COLORS.content.primary}),p.icon&&y.renderSourceIcon(p.icon),r.jsxs(z.TitleSmall,{children:[" ",p.title]})]}),ee&&r.jsxs(pe,{children:[r.jsx(re.default,{width:20,height:20,color:a.COLORS.content.placeholder}),r.jsx(ge,{autoFocus:!0,value:w,placeholder:"Search","data-test":"mention-picker-search",onChange:e=>F(e.target.value),onKeyDown:e=>{h.length&&(e.key==="ArrowDown"?(e.preventDefault(),R(l=>(l+1)%h.length)):e.key==="ArrowUp"?(e.preventDefault(),R(l=>(l+h.length-1)%h.length)):e.key==="Enter"&&(e.preventDefault(),(h[_]??h[0])?.onActivate()))}})]}),u==="variable"?r.jsx(fe,{children:r.jsx(ae.VariablePicker,{type:ie.PickerType.EMBEDDED,data:$??[],showRecommendedBar:!0,skipDefaultVariableContent:!0,onSelect:e=>{m?.(),B?.(e)}})}):h.length===0?r.jsx(Se,{children:u==="subagent"?null:"No tools available"}):r.jsx(he,{children:h.map((e,l)=>r.jsx(be,{type:"button",$active:l===_,onMouseEnter:()=>R(l),onMouseLeave:()=>R(-1),onClick:e.onActivate,children:e.isCreate?r.jsx(Oe,{children:e.label}):r.jsxs(r.Fragment,{children:[r.jsxs(xe,{children:[y.renderSourceIcon(e.icon),r.jsx(z.BodySecondary,{color:a.COLORS.content.primary,children:e.label}),e.authRequired&&r.jsx(Q.default,{size:14,"aria-label":"Requires customer verification"})]}),e.rightLabel?r.jsx(Re,{children:e.rightLabel}):e.drillsIn&&r.jsx(te.default,{width:12,height:12})]})},e.id))}),h.some(e=>e.authRequired)&&r.jsxs(ke,{children:[r.jsx(Q.default,{size:16}),r.jsx(z.BodyCaption,{color:a.COLORS.content.secondary,children:"This tool requires customer verification"})]})]})},de=f.default.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
-	max-height: 301px;
-	overflow-y: auto;
+	/* Variables view is 45px taller: that is what the embedded picker's "Only
+	   Recommended" bar costs, so the variable list keeps the room it had before
+	   the bar was turned on (VariablePicker's calculateHeight subtracts it). */
+	${o=>o.$fixedHeight?"height: 346px;":"max-height: 301px;"}
+	overflow: hidden;
 	background: ${a.COLORS.surface.standard};
 	border: 1px solid ${a.COLORS.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`,ce=g.default.div`
+`,he=f.default.div`
+	flex: 1 1 auto;
+	min-height: 0;
+	overflow-y: auto;
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+`,fe=f.default.div`
+	flex: 1 1 auto;
+	min-height: 0;
+
+	> div {
+		height: 100%;
+	}
+
+	* {
+		scrollbar-width: none;
+	}
+
+	*::-webkit-scrollbar {
+		display: none;
+	}
+`,pe=f.default.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
 	flex-shrink: 0;
 	border-bottom: 1px solid ${a.COLORS.stroke.primary};
-`,se=g.default.input`
+`,ge=f.default.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -28,7 +55,7 @@
 	&::placeholder {
 		color: ${a.COLORS.content.placeholder};
 	}
-`,ue=g.default.button`
+`,be=f.default.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -43,39 +70,39 @@
 	flex-shrink: 0;
 	border: none;
 	border-bottom: 1px solid ${a.COLORS.stroke.primary};
-	background: ${l=>l.$active?a.COLORS.surface.subdued:"transparent"};
+	background: ${o=>o.$active?a.COLORS.surface.subdued:"transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
 		background: ${a.COLORS.surface.hovered};
 	}
-`,de=g.default.div`
+`,xe=f.default.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`,fe=g.default.div`
+`,ke=f.default.div`
 	display: flex;
 	align-items: center;
 	gap: 6px;
 	padding: 8px 12px;
 	border-top: 1px solid ${a.COLORS.stroke.primary};
-`,he=g.default.span`
+`,Re=f.default.span`
 	flex-shrink: 0;
 	color: ${a.COLORS.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
 	white-space: nowrap;
-`,pe=g.default.div`
+`,Oe=f.default.div`
 	width: 100%;
 	text-align: center;
 	color: ${a.COLORS.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`,ge=g.default.button`
+`,me=f.default.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
@@ -90,10 +117,10 @@
 	box-sizing: border-box;
 	flex-shrink: 0;
 	gap: 4px;
-`,xe=g.default.div`
+`,Se=f.default.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
 	color: ${a.COLORS.content.secondary};
-`;exports.MentionPicker=le;
+`;exports.MentionPicker=ue;
 //# sourceMappingURL=MentionPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["// import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport SearchIcon from '@src/assets/icons/searchIcon.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport { PuzzlePiece, Shield } from '@src/icons';\nimport SvgArrowLeft from '@src/icons/Arrows/Normal arrows/ArrowLeft';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tCATEGORIES,\n\tCONFIG_TOOL_SOURCES,\n\tisIntegrationSource,\n\tisMoreIntegrationSource,\n\tMORE_INTEGRATIONS_KEY,\n\tMORE_INTEGRATIONS_LABEL,\n\tMORE_INTEGRATIONS_RANK,\n\ttoolSourceRank,\n} from '../constants/tools';\nimport type {\n\tCategory,\n\tIconComp,\n\tToolAction,\n\tToolSource,\n} from '../constants/tools';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, sourceIcon, SourceIcon } from '../utils/sourceIcons';\n\n// Icon for the synthetic \"More Integrations\" umbrella row (not a real source, so\n// it isn't in SOURCE_ICONS).\nconst MORE_INTEGRATIONS_ICON: SourceIcon = {\n\tIcon: PuzzlePiece as IconComp,\n\tw: 20,\n\th: 20,\n};\n\nconst metaOf = (item: MentionItem): MentionKindMeta | undefined =>\n\titem.meta as unknown as MentionKindMeta | undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. */\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/** Drill-in rows show a chevron; leaf (selectable) rows do not. */\n\tdrillsIn: boolean;\n\t/** Leading brand glyph (source rows only). */\n\ticon?: SourceIcon;\n\t/** Brand-coloured \"Create new\" action row (not a selectable item). */\n\tisCreate?: boolean;\n\t/**\n\t * Brand-coloured right-aligned action text (e.g. \"Connect\") shown in place of\n\t * the drill-in chevron — used for an unconnected integration source.\n\t */\n\trightLabel?: string;\n\t/** Tool leaf touches customer-private data → shows a shield glyph. */\n\tauthRequired?: boolean;\n\tonActivate: () => void;\n};\n\n/** Sentinel id for the sub-agent \"Create new\" row. */\nconst CREATE_SUBAGENT_ID = '__bik_create_subagent__';\n\ntype MentionPickerProps = MentionDropdownRenderProps & {\n\t/** Opens the create-sub-agent drawer (shows a \"Create new\" row in the Sub-agent view). */\n\tonCreateSubAgent?: () => void;\n\t/**\n\t * Open already drilled into this tool source (e.g. `'shopify'`) — its tool list\n\t * is shown immediately. */\n\tinitialSource?: string;\n\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the Tools view.\n\t * Picking one opens its config drawer (via `onSelect`) and dismisses the picker\n\t * — it never inserts a mention into the text.\n\t */\n\ttoolActions?: ToolAction[];\n\t/**\n\t * Per-source integration connection state. A source whose value is `false`\n\t * renders a \"Connect\" row (like an unconnected action) instead of drilling in —\n\t * so native source groups (Shopify / BigCommerce / ShipStation) show \"Connect\"\n\t * consistently with the config actions (Slack).\n\t */\n\tintegrationStatus?: Partial<Record<ToolSource, boolean>>;\n\t/** Open the connect flow for an unconnected source (used by the Connect row). */\n\tonConnectIntegration?: (source: ToolSource) => void;\n};\n\n/**\n * `@` reference picker. Drills:\n *   root → Tools → <source> (Manifest / Shopify / …) → tool\n *        → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n *\n * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionPickerProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n\tonClose,\n\tonCreateSubAgent,\n\tinitialSource,\n\ttoolActions,\n\tintegrationStatus,\n\tonConnectIntegration,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(initialSource ?? null);\n\t// -1 = nothing highlighted; rows highlight only on hover / arrow keys\n\t// (a default highlight reads as a stuck hover state).\n\tconst [activeIndex, setActiveIndex] = useState(-1);\n\t// Search box shown inside a source's tool list (Manifest / Shopify); filters\n\t// that source's tools by name.\n\tconst [search, setSearch] = useState('');\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\t// The built-in \"create\" action per source (Rest API / email / Slack). A source\n\t// with an action drills into [its instances + a \"Create new\" row] — like the\n\t// Sub-agent category — instead of showing a duplicate flat \"create\" row.\n\tconst actionBySource = useMemo(\n\t\t() =>\n\t\t\tnew Map<string, ToolAction>(\n\t\t\t\t(toolActions ?? []).map((a) => [a.source, a]),\n\t\t\t),\n\t\t[toolActions],\n\t);\n\n\t// Show a category when it has items — and ALWAYS show Sub-agent when creating\n\t// one is possible, so an agent with no sub-agents yet still gets the root\n\t// \"Tools / Sub-agent\" choice (with a \"Create new\" inside). When only one is\n\t// available (e.g. the sub-agent drawer offers tools only) the selector is skipped.\n\tconst availableCategories = useMemo(\n\t\t() =>\n\t\t\tCATEGORIES.filter((c) =>\n\t\t\t\tc.key === 'tool'\n\t\t\t\t\t? tools.length > 0 || (toolActions?.length ?? 0) > 0\n\t\t\t\t\t: subAgents.length > 0 || !!onCreateSubAgent,\n\t\t\t),\n\t\t[tools.length, subAgents.length, onCreateSubAgent, toolActions?.length],\n\t);\n\tconst soleCategory =\n\t\tavailableCategories.length === 1 ? availableCategories[0].key : null;\n\tconst activeCategory = category ?? soleCategory;\n\n\t// Title shown above the current view. `onBack` is omitted at a root level (a\n\t// sole category has nowhere to go back to) — the header then shows as a plain\n\t// title. When `onBack` is set the header leads with a back arrow, followed by\n\t// the source icon in a source detail view: `[← back][icon][title]`.\n\tconst header: {\n\t\ttitle: string;\n\t\tonBack?: () => void;\n\t\ticon?: SourceIcon;\n\t} | null = !activeCategory\n\t\t? null\n\t\t: activeCategory === 'subagent'\n\t\t? // Always titled — with a back arrow only when the category chooser is above.\n\t\t  {\n\t\t\t\ttitle: 'Sub-agent',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t  }\n\t\t: source === MORE_INTEGRATIONS_KEY\n\t\t? {\n\t\t\t\ttitle: MORE_INTEGRATIONS_LABEL,\n\t\t\t\tonBack: () => setSource(null),\n\t\t\t\ticon: MORE_INTEGRATIONS_ICON,\n\t\t  }\n\t\t: source\n\t\t? {\n\t\t\t\ttitle: toolSourceLabel(source),\n\t\t\t\t// Deep-linked to a source (opened from a right-panel source button):\n\t\t\t\t// that source IS the root, so no back arrow. Otherwise back returns to\n\t\t\t\t// the \"More Integrations\" umbrella for a vendor that lives under it,\n\t\t\t\t// else to the source chooser.\n\t\t\t\tonBack: initialSource\n\t\t\t\t\t? undefined\n\t\t\t\t\t: () =>\n\t\t\t\t\t\t\tsetSource(\n\t\t\t\t\t\t\t\tisMoreIntegrationSource(source) ? MORE_INTEGRATIONS_KEY : null,\n\t\t\t\t\t\t\t),\n\t\t\t\ticon: sourceIcon(source),\n\t\t  }\n\t\t: // Always titled — matches the Sub-agent header; back arrow only when the\n\t\t  // category chooser is above (i.e. not the sole category).\n\t\t  {\n\t\t\t\ttitle: 'Tools',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t  };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!activeCategory) {\n\t\t\treturn availableCategories.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (activeCategory === 'subagent') {\n\t\t\tconst sq = search.trim().toLowerCase();\n\t\t\tconst leaves: PickerRowModel[] = subAgents\n\t\t\t\t.filter((item) => !sq || rowLabel(item).toLowerCase().includes(sq))\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tid: String(item.id),\n\t\t\t\t\tlabel: rowLabel(item),\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t\t}));\n\t\t\t// \"Create new\" opens the drawer — first dismiss the menu (strips the \"@\").\n\t\t\tif (onCreateSubAgent) {\n\t\t\t\tleaves.push({\n\t\t\t\t\tid: CREATE_SUBAGENT_ID,\n\t\t\t\t\tlabel: 'Create new',\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tisCreate: true,\n\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\tonCreateSubAgent();\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn leaves;\n\t\t}\n\t\tif (!source || source === MORE_INTEGRATIONS_KEY) {\n\t\t\t// The real sources (from instances) plus any action source (Rest API /\n\t\t\t// email / Slack) with no instances yet, so it still appears for first-time\n\t\t\t// creation. Deduped — no more twin rows.\n\t\t\tconst actionOnly = (toolActions ?? [])\n\t\t\t\t.map((a) => a.source)\n\t\t\t\t.filter((s) => !sources.includes(s));\n\t\t\tconst combined = [...sources, ...actionOnly];\n\n\t\t\t// One row per source: Connect (unconnected) / a single collapsed leaf\n\t\t\t// (action sources) / a drill-in group (integrations + multi-tool sources).\n\t\t\tconst buildSourceRow = (s: string): PickerRowModel => {\n\t\t\t\tconst action = actionBySource.get(s);\n\t\t\t\t// Not connected → a \"Connect\" row (no drill-in / no instances / no\n\t\t\t\t// \"Create new\"); clicking dismisses the picker and runs the connect\n\t\t\t\t// flow. Applies to config actions (their own `connected`) AND native\n\t\t\t\t// source groups (via `integrationStatus`), so both look consistent.\n\t\t\t\tconst connected =\n\t\t\t\t\taction !== undefined\n\t\t\t\t\t\t? action.connected\n\t\t\t\t\t\t: integrationStatus?.[s as ToolSource];\n\t\t\t\tif (connected === false) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: s,\n\t\t\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\ticon: sourceIcon(s) ?? action?.icon,\n\t\t\t\t\t\trightLabel: 'Connect',\n\t\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\t\tif (action?.onConnect) {\n\t\t\t\t\t\t\t\taction.onConnect();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonConnectIntegration?.(s as ToolSource);\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}\n\t\t\t\t// A source whose drill-in view would hold exactly one leaf is normally\n\t\t\t\t// surfaced as that single leaf right here (its function name + the same\n\t\t\t\t// source icon). Covers \"no Rest API added yet\" (→ open the create modal\n\t\t\t\t// directly) and a config tool's single capability (Slack → \"Send Slack\n\t\t\t\t// message\", email → \"Send email\"). EXCEPTION: external integrations\n\t\t\t\t// (Shopify / BigCommerce / ShipStation / Skio / Gorgias) always stay a\n\t\t\t\t// drill-in group even with a single tool, so the vendor reads as its own\n\t\t\t\t// discoverable, connectable unit.\n\t\t\t\tconst instances = tools.filter(\n\t\t\t\t\t(t) => (metaOf(t)?.source ?? 'other') === s,\n\t\t\t\t);\n\t\t\t\tconst collapseSingleLeaf =\n\t\t\t\t\tinstances.length + (action ? 1 : 0) === 1 &&\n\t\t\t\t\t!(action === undefined && isIntegrationSource(s));\n\t\t\t\tif (collapseSingleLeaf) {\n\t\t\t\t\tconst icon = sourceIcon(s) ?? action?.icon;\n\t\t\t\t\tif (action) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: s,\n\t\t\t\t\t\t\tlabel: action.label,\n\t\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\t\ticon,\n\t\t\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\t\t\taction.onSelect();\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\tconst only = instances[0];\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: String(only.id),\n\t\t\t\t\t\tlabel: rowLabel(only),\n\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\ticon,\n\t\t\t\t\t\tauthRequired: metaOf(only)?.authRequired,\n\t\t\t\t\t\tonActivate: () => onSelect(only),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tid: s,\n\t\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\t\tdrillsIn: true,\n\t\t\t\t\ticon: sourceIcon(s) ?? action?.icon,\n\t\t\t\t\tonActivate: () => setSource(s),\n\t\t\t\t};\n\t\t\t};\n\n\t\t\t// Umbrella view: one row per vendor integration that lives under\n\t\t\t// \"More Integrations\" (ShipStation / BigCommerce / …).\n\t\t\tif (source === MORE_INTEGRATIONS_KEY) {\n\t\t\t\treturn combined\n\t\t\t\t\t.filter((s) => isMoreIntegrationSource(s))\n\t\t\t\t\t.sort((a, b) => toolSourceRank(a) - toolSourceRank(b))\n\t\t\t\t\t.map(buildSourceRow);\n\t\t\t}\n\n\t\t\t// Root chooser: Manifest / Shopify / the action sources each keep their\n\t\t\t// own top-level row; the vendor integrations collapse into ONE\n\t\t\t// \"More Integrations\" umbrella row (shown only when any exist). Fixed rank\n\t\t\t// order so adding / updating a tool never reshuffles the picker.\n\t\t\tconst rootRows: { row: PickerRowModel; rank: number }[] = combined\n\t\t\t\t.filter((s) => !isMoreIntegrationSource(s))\n\t\t\t\t.map((s) => ({ row: buildSourceRow(s), rank: toolSourceRank(s) }));\n\t\t\tif (combined.some((s) => isMoreIntegrationSource(s))) {\n\t\t\t\trootRows.push({\n\t\t\t\t\trank: MORE_INTEGRATIONS_RANK,\n\t\t\t\t\trow: {\n\t\t\t\t\t\tid: MORE_INTEGRATIONS_KEY,\n\t\t\t\t\t\tlabel: MORE_INTEGRATIONS_LABEL,\n\t\t\t\t\t\tdrillsIn: true,\n\t\t\t\t\t\ticon: MORE_INTEGRATIONS_ICON,\n\t\t\t\t\t\tonActivate: () => setSource(MORE_INTEGRATIONS_KEY),\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn rootRows.sort((a, b) => a.rank - b.rank).map((e) => e.row);\n\t\t}\n\t\tconst q = search.trim().toLowerCase();\n\t\tconst leaves: PickerRowModel[] = tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.filter((t) => !q || rowLabel(t).toLowerCase().includes(q))\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tauthRequired: metaOf(item)?.authRequired,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t\t// A configurable source's add row, below any existing instances, opening\n\t\t// its drawer. Config tools (Slack / email) are a single fixed capability →\n\t\t// render like a normal tool leaf (label only, no icon — matching the tool\n\t\t// rows). Rest API instances are user-created, so its \"add\" stays a\n\t\t// brand-coloured create row.\n\t\tconst action = actionBySource.get(source);\n\t\tif (action) {\n\t\t\tconst isConfigTool = source in CONFIG_TOOL_SOURCES;\n\t\t\tleaves.push({\n\t\t\t\tid: `create:${source}`,\n\t\t\t\tlabel: action.label,\n\t\t\t\tdrillsIn: false,\n\t\t\t\tisCreate: !isConfigTool,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tonClose?.();\n\t\t\t\t\taction.onSelect();\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t\treturn leaves;\n\t}, [\n\t\tactiveCategory,\n\t\tavailableCategories,\n\t\tsource,\n\t\tsearch,\n\t\ttools,\n\t\tsubAgents,\n\t\tsources,\n\t\tonSelect,\n\t\tonClose,\n\t\tonCreateSubAgent,\n\t\ttoolActions,\n\t\tactionBySource,\n\t\tintegrationStatus,\n\t\tonConnectIntegration,\n\t]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(-1), [activeCategory, source, search, items]);\n\t// Clear the search box when leaving a source view.\n\tuseEffect(() => setSearch(''), [activeCategory, source]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\t// Nothing highlighted yet → treat the first row as the target so\n\t\t\t\t\t// the editor's @-flow (type, then Enter) still works.\n\t\t\t\t\t(r[i] ?? r[0])?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h?.onBack) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !activeCategory\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\t// Search lives inside a source's tool list (Manifest / Shopify) and in the\n\t// sub-agent list.\n\tconst showSearch =\n\t\t(activeCategory === 'tool' &&\n\t\t\t!!source &&\n\t\t\tsource !== MORE_INTEGRATIONS_KEY) ||\n\t\tactiveCategory === 'subagent';\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tdisabled={!header.onBack}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: COLORS.surface.subdued,\n\t\t\t\t\t\tcursor: header.onBack ? 'pointer' : 'default',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{header.onBack && (\n\t\t\t\t\t\t<SvgArrowLeft\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{header.icon && renderSourceIcon(header.icon)}\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{showSearch && (\n\t\t\t\t<PickerSearchRow>\n\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t/>\n\t\t\t\t\t<PickerSearchInput\n\t\t\t\t\t\t// Focus on open so the user can type immediately (appears only\n\t\t\t\t\t\t// after they drill into a source).\n\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\tdata-test=\"mention-picker-search\"\n\t\t\t\t\t\tonChange={(e) => setSearch(e.target.value)}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tif (!rows.length) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + rows.length - 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t(rows[activeIndex] ?? rows[0])?.onActivate();\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</PickerSearchRow>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{activeCategory === 'subagent' ? null : 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonMouseLeave={() => setActiveIndex(-1)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.isCreate ? (\n\t\t\t\t\t\t\t<CreateRowText>{row.label}</CreateRowText>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<PickerRowMain>\n\t\t\t\t\t\t\t\t\t{renderSourceIcon(row.icon)}\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t{row.authRequired && (\n\t\t\t\t\t\t\t\t\t\t<Shield\n\t\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\t\taria-label=\"This tool requires customer verification\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</PickerRowMain>\n\t\t\t\t\t\t\t\t{row.rightLabel ? (\n\t\t\t\t\t\t\t\t\t<RightActionText>{row.rightLabel}</RightActionText>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\trow.drillsIn && <ChevronRight width={12} height={12} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t\t{rows.some((row) => row.authRequired) && (\n\t\t\t\t<PickerLegend>\n\t\t\t\t\t<Shield size={16} />\n\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\tThis tool requires customer verification\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</PickerLegend>\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 301px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\n// Search box at the top of a source's tool list (Manifest / Shopify).\nconst PickerSearchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 10px 12px;\n\tflex-shrink: 0;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nconst PickerSearchInput = styled.input`\n\tflex: 1;\n\tmin-width: 0;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\t/* The card is a flex column with a max-height; without these a long list\n\t   compresses its rows below 48px (why only the short first step looked right)\n\t   instead of scrolling. Pin the row so the card scrolls instead. */\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.hovered};\n\t}\n`;\n\n// Left cluster: leading source glyph + label (chevron stays right via PickerRow).\nconst PickerRowMain = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\tmin-width: 0;\n`;\n\n// Footer legend, shown when the list holds any auth-required tool.\nconst PickerLegend = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 8px 12px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n`;\n\n// Right-aligned brand action text (e.g. \"Connect\") in place of the chevron.\nconst RightActionText = styled.span`\n\tflex-shrink: 0;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n`;\n\n// \"Create new\" — centered brand text, no icon (matches the side-panel dropdown).\nconst CreateRowText = styled.div`\n\twidth: 100%;\n\ttext-align: center;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["MORE_INTEGRATIONS_ICON","PuzzlePiece","metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","initialSource","toolActions","integrationStatus","onConnectIntegration","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","search","setSearch","tools","useMemo","i","subAgents","sources","acc","t","s","actionBySource","a","availableCategories","CATEGORIES","c","soleCategory","activeCategory","header","MORE_INTEGRATIONS_KEY","MORE_INTEGRATIONS_LABEL","toolSourceLabel","isMoreIntegrationSource","sourceIcon","rows","sq","leaves","actionOnly","combined","buildSourceRow","action","instances","isIntegrationSource","icon","only","b","toolSourceRank","rootRows","MORE_INTEGRATIONS_RANK","e","q","isConfigTool","CONFIG_TOOL_SOURCES","useEffect","navRef","useRef","event","r","h","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","jsx","SvgArrowLeft","renderSourceIcon","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","p","PickerEmpty","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","Shield","RightActionText","ChevronRight","PickerLegend","BodyCaption","styled"],"mappings":"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"}
+{"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["// import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport SearchIcon from '@src/assets/icons/searchIcon.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport { PuzzlePiece, Shield } from '@src/icons';\nimport SvgArrowLeft from '@src/icons/Arrows/Normal arrows/ArrowLeft';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { VariablePicker } from '../../variable-picker-v3';\nimport { PickerType } from '../../variable-picker-v3/model';\nimport type {\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport {\n\tCATEGORIES,\n\tCONFIG_TOOL_SOURCES,\n\tisIntegrationSource,\n\tisMoreIntegrationSource,\n\tMORE_INTEGRATIONS_KEY,\n\tMORE_INTEGRATIONS_LABEL,\n\tMORE_INTEGRATIONS_RANK,\n\ttoolSourceRank,\n} from '../constants/tools';\nimport type {\n\tCategory,\n\tIconComp,\n\tToolAction,\n\tToolSource,\n} from '../constants/tools';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, sourceIcon, SourceIcon } from '../utils/sourceIcons';\n\n// Icon for the synthetic \"More Integrations\" umbrella row (not a real source, so\n// it isn't in SOURCE_ICONS).\nconst MORE_INTEGRATIONS_ICON: SourceIcon = {\n\tIcon: PuzzlePiece as IconComp,\n\tw: 20,\n\th: 20,\n};\n\nconst metaOf = (item: MentionItem): MentionKindMeta | undefined =>\n\titem.meta as unknown as MentionKindMeta | undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. */\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/** Drill-in rows show a chevron; leaf (selectable) rows do not. */\n\tdrillsIn: boolean;\n\t/** Leading brand glyph (source rows only). */\n\ticon?: SourceIcon;\n\t/** Brand-coloured \"Create new\" action row (not a selectable item). */\n\tisCreate?: boolean;\n\t/**\n\t * Brand-coloured right-aligned action text (e.g. \"Connect\") shown in place of\n\t * the drill-in chevron — used for an unconnected integration source.\n\t */\n\trightLabel?: string;\n\t/** Tool leaf touches customer-private data → shows a shield glyph. */\n\tauthRequired?: boolean;\n\tonActivate: () => void;\n};\n\n/** Sentinel id for the sub-agent \"Create new\" row. */\nconst CREATE_SUBAGENT_ID = '__bik_create_subagent__';\n\ntype MentionPickerProps = MentionDropdownRenderProps & {\n\t/** Opens the create-sub-agent drawer (shows a \"Create new\" row in the Sub-agent view). */\n\tonCreateSubAgent?: () => void;\n\t/**\n\t * Open already drilled into this tool source (e.g. `'shopify'`) — its tool list\n\t * is shown immediately. */\n\tinitialSource?: string;\n\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the Tools view.\n\t * Picking one opens its config drawer (via `onSelect`) and dismisses the picker\n\t * — it never inserts a mention into the text.\n\t */\n\ttoolActions?: ToolAction[];\n\t/**\n\t * Per-source integration connection state. A source whose value is `false`\n\t * renders a \"Connect\" row (like an unconnected action) instead of drilling in —\n\t * so native source groups (Shopify / BigCommerce / ShipStation) show \"Connect\"\n\t * consistently with the config actions (Slack).\n\t */\n\tintegrationStatus?: Partial<Record<ToolSource, boolean>>;\n\t/** Open the connect flow for an unconnected source (used by the Connect row). */\n\tonConnectIntegration?: (source: ToolSource) => void;\n\t/**\n\t * Variable catalog for the \"Variables\" view (the shared VariablePicker's\n\t * `data`). Omitted / empty → the Variables category is not offered.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n\t/**\n\t * A variable was picked from the Variables view. The picker dismisses itself\n\t * (stripping the typed `@`) BEFORE calling this — the handler inserts a\n\t * `Variable: <name>` mention chip (see MentionEditor).\n\t */\n\tonSelectVariable?: (variable: VariableV3) => void;\n};\n\n/**\n * `@` reference picker. Drills:\n *   root → Tools → <source> (Manifest / Shopify / …) → tool\n *        → Sub-agent → sub-agent\n *        → Variables → shared VariablePicker (embedded)\n * (\"Add condition\" is intentionally not shown yet.)\n *\n * Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionPickerProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n\tonClose,\n\tonCreateSubAgent,\n\tinitialSource,\n\ttoolActions,\n\tintegrationStatus,\n\tonConnectIntegration,\n\tvariablesData,\n\tonSelectVariable,\n}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(initialSource ?? null);\n\t// -1 = nothing highlighted; rows highlight only on hover / arrow keys\n\t// (a default highlight reads as a stuck hover state).\n\tconst [activeIndex, setActiveIndex] = useState(-1);\n\t// Search box shown inside a source's tool list (Manifest / Shopify); filters\n\t// that source's tools by name.\n\tconst [search, setSearch] = useState('');\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\t// The built-in \"create\" action per source (Rest API / email / Slack). A source\n\t// with an action drills into [its instances + a \"Create new\" row] — like the\n\t// Sub-agent category — instead of showing a duplicate flat \"create\" row.\n\tconst actionBySource = useMemo(\n\t\t() =>\n\t\t\tnew Map<string, ToolAction>(\n\t\t\t\t(toolActions ?? []).map((a) => [a.source, a]),\n\t\t\t),\n\t\t[toolActions],\n\t);\n\n\t// Show a category when it has items — and ALWAYS show Sub-agent when creating\n\t// one is possible, so an agent with no sub-agents yet still gets the root\n\t// \"Tools / Sub-agent\" choice (with a \"Create new\" inside). When only one is\n\t// available (e.g. the sub-agent drawer offers tools only) the selector is skipped.\n\tconst availableCategories = useMemo(\n\t\t() =>\n\t\t\tCATEGORIES.filter((c) => {\n\t\t\t\tif (c.key === 'tool') {\n\t\t\t\t\treturn tools.length > 0 || (toolActions?.length ?? 0) > 0;\n\t\t\t\t}\n\t\t\t\tif (c.key === 'variable') {\n\t\t\t\t\treturn (variablesData?.length ?? 0) > 0 && !!onSelectVariable;\n\t\t\t\t}\n\t\t\t\treturn subAgents.length > 0 || !!onCreateSubAgent;\n\t\t\t}),\n\t\t[\n\t\t\ttools.length,\n\t\t\tsubAgents.length,\n\t\t\tonCreateSubAgent,\n\t\t\ttoolActions?.length,\n\t\t\tvariablesData?.length,\n\t\t\tonSelectVariable,\n\t\t],\n\t);\n\tconst soleCategory =\n\t\tavailableCategories.length === 1 ? availableCategories[0].key : null;\n\tconst activeCategory = category ?? soleCategory;\n\n\t// Title shown above the current view. `onBack` is omitted at a root level (a\n\t// sole category has nowhere to go back to) — the header then shows as a plain\n\t// title. When `onBack` is set the header leads with a back arrow, followed by\n\t// the source icon in a source detail view: `[← back][icon][title]`.\n\tconst header: {\n\t\ttitle: string;\n\t\tonBack?: () => void;\n\t\ticon?: SourceIcon;\n\t} | null = !activeCategory\n\t\t? null\n\t\t: activeCategory === 'subagent'\n\t\t? // Always titled — with a back arrow only when the category chooser is above.\n\t\t  {\n\t\t\t\ttitle: 'Sub-agent',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t  }\n\t\t: activeCategory === 'variable'\n\t\t? {\n\t\t\t\ttitle: 'Variables',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t  }\n\t\t: source === MORE_INTEGRATIONS_KEY\n\t\t? {\n\t\t\t\ttitle: MORE_INTEGRATIONS_LABEL,\n\t\t\t\tonBack: () => setSource(null),\n\t\t\t\ticon: MORE_INTEGRATIONS_ICON,\n\t\t  }\n\t\t: source\n\t\t? {\n\t\t\t\ttitle: toolSourceLabel(source),\n\t\t\t\t// Deep-linked to a source (opened from a right-panel source button):\n\t\t\t\t// that source IS the root, so no back arrow. Otherwise back returns to\n\t\t\t\t// the \"More Integrations\" umbrella for a vendor that lives under it,\n\t\t\t\t// else to the source chooser.\n\t\t\t\tonBack: initialSource\n\t\t\t\t\t? undefined\n\t\t\t\t\t: () =>\n\t\t\t\t\t\t\tsetSource(\n\t\t\t\t\t\t\t\tisMoreIntegrationSource(source) ? MORE_INTEGRATIONS_KEY : null,\n\t\t\t\t\t\t\t),\n\t\t\t\ticon: sourceIcon(source),\n\t\t  }\n\t\t: // Always titled — matches the Sub-agent header; back arrow only when the\n\t\t  // category chooser is above (i.e. not the sole category).\n\t\t  {\n\t\t\t\ttitle: 'Tools',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t  };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!activeCategory) {\n\t\t\treturn availableCategories.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (activeCategory === 'subagent') {\n\t\t\tconst sq = search.trim().toLowerCase();\n\t\t\tconst leaves: PickerRowModel[] = subAgents\n\t\t\t\t.filter((item) => !sq || rowLabel(item).toLowerCase().includes(sq))\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tid: String(item.id),\n\t\t\t\t\tlabel: rowLabel(item),\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t\t}));\n\t\t\t// \"Create new\" opens the drawer — first dismiss the menu (strips the \"@\").\n\t\t\tif (onCreateSubAgent) {\n\t\t\t\tleaves.push({\n\t\t\t\t\tid: CREATE_SUBAGENT_ID,\n\t\t\t\t\tlabel: 'Create new',\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tisCreate: true,\n\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\tonCreateSubAgent();\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn leaves;\n\t\t}\n\t\tif (activeCategory === 'variable') {\n\t\t\t// The embedded VariablePicker owns this view (its own search + rows) —\n\t\t\t// no navigable PickerRow list of our own.\n\t\t\treturn [];\n\t\t}\n\t\tif (!source || source === MORE_INTEGRATIONS_KEY) {\n\t\t\t// The real sources (from instances) plus any action source (Rest API /\n\t\t\t// email / Slack) with no instances yet, so it still appears for first-time\n\t\t\t// creation. Deduped — no more twin rows.\n\t\t\tconst actionOnly = (toolActions ?? [])\n\t\t\t\t.map((a) => a.source)\n\t\t\t\t.filter((s) => !sources.includes(s));\n\t\t\tconst combined = [...sources, ...actionOnly];\n\n\t\t\t// One row per source: Connect (unconnected) / a single collapsed leaf\n\t\t\t// (action sources) / a drill-in group (integrations + multi-tool sources).\n\t\t\tconst buildSourceRow = (s: string): PickerRowModel => {\n\t\t\t\tconst action = actionBySource.get(s);\n\t\t\t\t// Not connected → a \"Connect\" row (no drill-in / no instances / no\n\t\t\t\t// \"Create new\"); clicking dismisses the picker and runs the connect\n\t\t\t\t// flow. Applies to config actions (their own `connected`) AND native\n\t\t\t\t// source groups (via `integrationStatus`), so both look consistent.\n\t\t\t\tconst connected =\n\t\t\t\t\taction !== undefined\n\t\t\t\t\t\t? action.connected\n\t\t\t\t\t\t: integrationStatus?.[s as ToolSource];\n\t\t\t\tif (connected === false) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: s,\n\t\t\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\ticon: sourceIcon(s) ?? action?.icon,\n\t\t\t\t\t\trightLabel: 'Connect',\n\t\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\t\tif (action?.onConnect) {\n\t\t\t\t\t\t\t\taction.onConnect();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonConnectIntegration?.(s as ToolSource);\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}\n\t\t\t\t// A source whose drill-in view would hold exactly one leaf is normally\n\t\t\t\t// surfaced as that single leaf right here (its function name + the same\n\t\t\t\t// source icon). Covers \"no Rest API added yet\" (→ open the create modal\n\t\t\t\t// directly) and a config tool's single capability (Slack → \"Send Slack\n\t\t\t\t// message\", email → \"Send email\"). EXCEPTION: external integrations\n\t\t\t\t// (Shopify / BigCommerce / ShipStation / Skio / Gorgias) always stay a\n\t\t\t\t// drill-in group even with a single tool, so the vendor reads as its own\n\t\t\t\t// discoverable, connectable unit.\n\t\t\t\tconst instances = tools.filter(\n\t\t\t\t\t(t) => (metaOf(t)?.source ?? 'other') === s,\n\t\t\t\t);\n\t\t\t\tconst collapseSingleLeaf =\n\t\t\t\t\tinstances.length + (action ? 1 : 0) === 1 &&\n\t\t\t\t\t!(action === undefined && isIntegrationSource(s));\n\t\t\t\tif (collapseSingleLeaf) {\n\t\t\t\t\tconst icon = sourceIcon(s) ?? action?.icon;\n\t\t\t\t\tif (action) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: s,\n\t\t\t\t\t\t\tlabel: action.label,\n\t\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\t\ticon,\n\t\t\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\t\t\taction.onSelect();\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\tconst only = instances[0];\n\t\t\t\t\treturn {\n\t\t\t\t\t\tid: String(only.id),\n\t\t\t\t\t\tlabel: rowLabel(only),\n\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\ticon,\n\t\t\t\t\t\tauthRequired: metaOf(only)?.authRequired,\n\t\t\t\t\t\tonActivate: () => onSelect(only),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\tid: s,\n\t\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\t\tdrillsIn: true,\n\t\t\t\t\ticon: sourceIcon(s) ?? action?.icon,\n\t\t\t\t\tonActivate: () => setSource(s),\n\t\t\t\t};\n\t\t\t};\n\n\t\t\t// Umbrella view: one row per vendor integration that lives under\n\t\t\t// \"More Integrations\" (ShipStation / BigCommerce / …).\n\t\t\tif (source === MORE_INTEGRATIONS_KEY) {\n\t\t\t\treturn combined\n\t\t\t\t\t.filter((s) => isMoreIntegrationSource(s))\n\t\t\t\t\t.sort((a, b) => toolSourceRank(a) - toolSourceRank(b))\n\t\t\t\t\t.map(buildSourceRow);\n\t\t\t}\n\n\t\t\t// Root chooser: Manifest / Shopify / the action sources each keep their\n\t\t\t// own top-level row; the vendor integrations collapse into ONE\n\t\t\t// \"More Integrations\" umbrella row (shown only when any exist). Fixed rank\n\t\t\t// order so adding / updating a tool never reshuffles the picker.\n\t\t\tconst rootRows: { row: PickerRowModel; rank: number }[] = combined\n\t\t\t\t.filter((s) => !isMoreIntegrationSource(s))\n\t\t\t\t.map((s) => ({ row: buildSourceRow(s), rank: toolSourceRank(s) }));\n\t\t\tif (combined.some((s) => isMoreIntegrationSource(s))) {\n\t\t\t\trootRows.push({\n\t\t\t\t\trank: MORE_INTEGRATIONS_RANK,\n\t\t\t\t\trow: {\n\t\t\t\t\t\tid: MORE_INTEGRATIONS_KEY,\n\t\t\t\t\t\tlabel: MORE_INTEGRATIONS_LABEL,\n\t\t\t\t\t\tdrillsIn: true,\n\t\t\t\t\t\ticon: MORE_INTEGRATIONS_ICON,\n\t\t\t\t\t\tonActivate: () => setSource(MORE_INTEGRATIONS_KEY),\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn rootRows.sort((a, b) => a.rank - b.rank).map((e) => e.row);\n\t\t}\n\t\tconst q = search.trim().toLowerCase();\n\t\tconst leaves: PickerRowModel[] = tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.filter((t) => !q || rowLabel(t).toLowerCase().includes(q))\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tauthRequired: metaOf(item)?.authRequired,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t\t// A configurable source's add row, below any existing instances, opening\n\t\t// its drawer. Config tools (Slack / email) are a single fixed capability →\n\t\t// render like a normal tool leaf (label only, no icon — matching the tool\n\t\t// rows). Rest API instances are user-created, so its \"add\" stays a\n\t\t// brand-coloured create row.\n\t\tconst action = actionBySource.get(source);\n\t\tif (action) {\n\t\t\tconst isConfigTool = source in CONFIG_TOOL_SOURCES;\n\t\t\tleaves.push({\n\t\t\t\tid: `create:${source}`,\n\t\t\t\tlabel: action.label,\n\t\t\t\tdrillsIn: false,\n\t\t\t\tisCreate: !isConfigTool,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tonClose?.();\n\t\t\t\t\taction.onSelect();\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t\treturn leaves;\n\t}, [\n\t\tactiveCategory,\n\t\tavailableCategories,\n\t\tsource,\n\t\tsearch,\n\t\ttools,\n\t\tsubAgents,\n\t\tsources,\n\t\tonSelect,\n\t\tonClose,\n\t\tonCreateSubAgent,\n\t\ttoolActions,\n\t\tactionBySource,\n\t\tintegrationStatus,\n\t\tonConnectIntegration,\n\t]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(-1), [activeCategory, source, search, items]);\n\t// Clear the search box when leaving a source view.\n\tuseEffect(() => setSearch(''), [activeCategory, source]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\t// The Variables view has no navigable rows of its own (the embedded\n\t\t\t// VariablePicker owns that surface) — swallowing arrows / Enter there\n\t\t\t// would freeze the keyboard for nothing. Let those keys fall through\n\t\t\t// to the editor; ArrowLeft still navigates back below.\n\t\t\tif (!r.length && event.key !== 'ArrowLeft') {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tsetActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tsetActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\t// Nothing highlighted yet → treat the first row as the target so\n\t\t\t\t\t// the editor's @-flow (type, then Enter) still works.\n\t\t\t\t\t(r[i] ?? r[0])?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h?.onBack) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !activeCategory\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\t// Search lives inside a source's tool list (Manifest / Shopify) and in the\n\t// sub-agent list.\n\tconst showSearch =\n\t\t(activeCategory === 'tool' &&\n\t\t\t!!source &&\n\t\t\tsource !== MORE_INTEGRATIONS_KEY) ||\n\t\tactiveCategory === 'subagent';\n\n\treturn (\n\t\t<PickerCard\n\t\t\tclassName={`bik-mention-picker bik-mention-picker--${variant}`}\n\t\t\t// Variables view: a definite height so the embedded VariablePicker's\n\t\t\t// internal list scroll (below its fixed search bar) can resolve.\n\t\t\t$fixedHeight={activeCategory === 'variable'}\n\t\t>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tdisabled={!header.onBack}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: COLORS.surface.subdued,\n\t\t\t\t\t\tcursor: header.onBack ? 'pointer' : 'default',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{header.onBack && (\n\t\t\t\t\t\t<SvgArrowLeft\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{header.icon && renderSourceIcon(header.icon)}\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{showSearch && (\n\t\t\t\t<PickerSearchRow>\n\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t/>\n\t\t\t\t\t<PickerSearchInput\n\t\t\t\t\t\t// Focus on open so the user can type immediately (appears only\n\t\t\t\t\t\t// after they drill into a source).\n\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\tdata-test=\"mention-picker-search\"\n\t\t\t\t\t\tonChange={(e) => setSearch(e.target.value)}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tif (!rows.length) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + rows.length - 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t(rows[activeIndex] ?? rows[0])?.onActivate();\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</PickerSearchRow>\n\t\t\t)}\n\t\t\t{activeCategory === 'variable' ? (\n\t\t\t\t// Shared variable catalog, embedded as this drill-in view. The fill\n\t\t\t\t// wrapper hands it the remaining card height, so ITS search bar stays\n\t\t\t\t// fixed and only the variable list below scrolls. Selecting a\n\t\t\t\t// variable dismisses the menu FIRST (strips the typed \"@\" + query),\n\t\t\t\t// then hands the variable up to insert its `{{token}}` at the cursor.\n\t\t\t\t<VariableFill>\n\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\tdata={variablesData ?? []}\n\t\t\t\t\t\t// \"Only Recommended\" bar shown and ON to start, same as the\n\t\t\t\t\t\t// dashboard's pickers — the catalog is long and most of it is\n\t\t\t\t\t\t// irrelevant to a given agent field. Merchants flip it off to\n\t\t\t\t\t\t// reach the full list. (The prop drives both the bar and the\n\t\t\t\t\t\t// initial filter state; see VariablePicker's mount effect.)\n\t\t\t\t\t\tshowRecommendedBar\n\t\t\t\t\t\t// Insert the reference token directly — the \"set up a default\n\t\t\t\t\t\t// value\" flow doesn't apply in the agent builder.\n\t\t\t\t\t\tskipDefaultVariableContent\n\t\t\t\t\t\tonSelect={(variable: VariableV3) => {\n\t\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\t\tonSelectVariable?.(variable);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</VariableFill>\n\t\t\t) : rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{activeCategory === 'subagent' ? null : 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\t<PickerScroll>\n\t\t\t\t\t{rows.map((row, i) => (\n\t\t\t\t\t\t<PickerRow\n\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\t\tonMouseLeave={() => setActiveIndex(-1)}\n\t\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{row.isCreate ? (\n\t\t\t\t\t\t\t\t<CreateRowText>{row.label}</CreateRowText>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<PickerRowMain>\n\t\t\t\t\t\t\t\t\t\t{renderSourceIcon(row.icon)}\n\t\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t{row.authRequired && (\n\t\t\t\t\t\t\t\t\t\t\t<Shield\n\t\t\t\t\t\t\t\t\t\t\t\tsize={14}\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Requires customer verification\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</PickerRowMain>\n\t\t\t\t\t\t\t\t\t{row.rightLabel ? (\n\t\t\t\t\t\t\t\t\t\t<RightActionText>{row.rightLabel}</RightActionText>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\trow.drillsIn && <ChevronRight width={12} height={12} />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</PickerRow>\n\t\t\t\t\t))}\n\t\t\t\t</PickerScroll>\n\t\t\t)}\n\t\t\t{rows.some((row) => row.authRequired) && (\n\t\t\t\t<PickerLegend>\n\t\t\t\t\t<Shield size={16} />\n\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\tThis tool requires customer verification\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</PickerLegend>\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\n// The card itself never scrolls — the header / search stay fixed and only the\n// list area (PickerScroll, or the embedded VariablePicker's own list) does.\nconst PickerCard = styled.div<{ $fixedHeight?: boolean }>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\t/* Variables view is 45px taller: that is what the embedded picker's \"Only\n\t   Recommended\" bar costs, so the variable list keeps the room it had before\n\t   the bar was turned on (VariablePicker's calculateHeight subtracts it). */\n\t${(p) => (p.$fixedHeight ? 'height: 346px;' : 'max-height: 301px;')}\n\toverflow: hidden;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\n// Scrollable row list below the fixed header / search (scrollbar hidden —\n// the fixed header already signals there's more below).\nconst PickerScroll = styled.div`\n\tflex: 1 1 auto;\n\tmin-height: 0;\n\toverflow-y: auto;\n\tscrollbar-width: none;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\n// Hands the embedded VariablePicker the card's remaining height (its Content\n// sizes itself with percentages, so the chain must be definite). Its internal\n// list scrollbar is hidden to match PickerScroll.\nconst VariableFill = styled.div`\n\tflex: 1 1 auto;\n\tmin-height: 0;\n\n\t> div {\n\t\theight: 100%;\n\t}\n\n\t* {\n\t\tscrollbar-width: none;\n\t}\n\n\t*::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\n// Search box at the top of a source's tool list (Manifest / Shopify).\nconst PickerSearchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 10px 12px;\n\tflex-shrink: 0;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nconst PickerSearchInput = styled.input`\n\tflex: 1;\n\tmin-width: 0;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\t/* The card is a flex column with a max-height; without these a long list\n\t   compresses its rows below 48px (why only the short first step looked right)\n\t   instead of scrolling. Pin the row so the card scrolls instead. */\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.hovered};\n\t}\n`;\n\n// Left cluster: leading source glyph + label (chevron stays right via PickerRow).\nconst PickerRowMain = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\tmin-width: 0;\n`;\n\n// Footer legend, shown when the list holds any auth-required tool.\nconst PickerLegend = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 8px 12px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n`;\n\n// Right-aligned brand action text (e.g. \"Connect\") in place of the chevron.\nconst RightActionText = styled.span`\n\tflex-shrink: 0;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n`;\n\n// \"Create new\" — centered brand text, no icon (matches the side-panel dropdown).\nconst CreateRowText = styled.div`\n\twidth: 100%;\n\ttext-align: center;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["MORE_INTEGRATIONS_ICON","PuzzlePiece","metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","initialSource","toolActions","integrationStatus","onConnectIntegration","variablesData","onSelectVariable","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","search","setSearch","tools","useMemo","i","subAgents","sources","acc","t","s","actionBySource","a","availableCategories","CATEGORIES","c","soleCategory","activeCategory","header","MORE_INTEGRATIONS_KEY","MORE_INTEGRATIONS_LABEL","toolSourceLabel","isMoreIntegrationSource","sourceIcon","rows","sq","leaves","actionOnly","combined","buildSourceRow","action","instances","isIntegrationSource","icon","only","b","toolSourceRank","rootRows","MORE_INTEGRATIONS_RANK","e","q","isConfigTool","CONFIG_TOOL_SOURCES","useEffect","navRef","useRef","event","r","h","p","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","jsx","SvgArrowLeft","renderSourceIcon","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","VariableFill","VariablePicker","PickerType","variable","PickerEmpty","PickerScroll","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","Shield","RightActionText","ChevronRight","PickerLegend","BodyCaption","styled"],"mappings":"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"}

package/dist/cjs/components/agent-builder/components/RestApiToolPanel.js

@@ -1,10 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),Y=require("../../../assets/icons/delete.svg.js"),V=require("../../../assets/icons/plus.svg.js"),o=require("react"),K=require("styled-components"),p=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),d=require("../AgentBuilder.styled.js"),Q=require("../constants/charLimits.js"),f=require("./DrawerHeaderText.js"),X=require("./ToolInstructionsField.js"),Z=require("../../side-modal/SideModal.js"),h=require("../../input/Input.js"),ee=require("../../dropdown/Dropdown.js"),te=require("../../dropdown/utils.js"),se=require("../../button/Button.js"),I=require("../../../editor/BikEditor.js"),re=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},R=re(K),ae=["GET","POST","PUT","PATCH","DELETE"],ne=ae.map(r=>({label:r,value:r})),k=r=>{if(!/^https?:\/\//i.test(r))return!1;let i;try{i=new URL(r).hostname}catch{return!1}return i.includes(".")&&!i.startsWith(".")&&!i.endsWith(".")},oe=({onClose:r,onSave:i,initial:n,onImprove:D,charLimits:j=Q.AGENT_CHAR_LIMITS,zIndex:A,existingNames:P=[]})=>{const[m,_]=o.useState(n?.name??""),[C,M]=o.useState(n?.instructions??""),[x,F]=o.useState(n?.url??"https://"),[y,N]=o.useState(n?.method??"POST"),[b,T]=o.useState(n?.headers??[{key:"",value:""}]),[O,U]=o.useState(n?.requestBody??""),[L,W]=o.useState(n?.responseSample??""),[q,B]=o.useState(!1),H=(t,s)=>T(a=>a.map((u,G)=>G===t?{...u,...s}:u)),$=()=>T(t=>[...t,{key:"",value:""}]),z=t=>T(s=>s.filter((a,u)=>u!==t)),S=m.trim(),v=S.length>0&&P.some(t=>t.trim().toLowerCase()===S.toLowerCase()),c=x.trim(),w=c.length>0&&c!=="https://"&&!k(c),E=S.length>0&&k(c)&&!v,J=async()=>{if(!E||q)return;const t={id:n?.id??`restapi_${Date.now().toString(36)}`,name:m.trim(),instructions:C,url:x.trim(),method:y,headers:b.filter(a=>a.key.trim()||a.value.trim()),requestBody:O,responseSample:L},s=i(t);if(s&&typeof s.then=="function"){B(!0);try{await s}finally{B(!1)}}};return e.jsxs(Z.SideModal,{header:"Rest API",closeOnEscapeKey:!1,zIndex:A,headerCustomComponent:e.jsx(f.DrawerHeaderText,{title:"Rest API",subtitle:"Connect to any API endpoint. Define the request and a sample response for the agent to reference."}),width:"431px",headerStyle:f.DRAWER_HEADER_STYLE,bodyStyle:f.DRAWER_BODY_STYLE,onClose:r,saveButtonProps:{"data-test":"restapi-save",buttonText:"Save",buttonType:"primary",size:"small",disabled:!E,isLoading:q,onClick:J},cancelButtonProps:{"data-test":"restapi-cancel",buttonText:"Cancel",buttonType:"tertiaryGray",size:"small",onClick:r},children:[e.jsx(h.Input,{"data-test":"restapi-name",variant:"small",labelText:"Name",labelTextBold:!0,placeholder:"Enter action name",value:m,maxCharLimit:j.name,state:v?"invalid":void 0,errorMessage:v?"A tool with this name already exists":void 0,onChangeText:_}),e.jsx(X.ToolInstructionsField,{"data-test":"restapi-instructions",label:"Instructions",value:C,onChange:M,maxLength:j.instructions,placeholder:"Describe how should the LLM generate the rest API",onImprove:D}),e.jsx(d.FieldBlock,{children:e.jsx(h.Input,{"data-test":"restapi-url",variant:"small",labelText:"Request URL",labelTextBold:!0,placeholder:"https://",type:"url",value:x,state:w?"invalid":void 0,errorMessage:w?"Enter a valid URL (including https://)":void 0,onChangeText:F})}),e.jsxs(d.FieldBlock,{children:[e.jsx(p.TitleSmall,{color:l.COLORS.content.primary,children:"HTTP method"}),e.jsx(ee.Dropdown,{"data-test":"restapi-method",size:"small",width:"100%",dropdownWidth:"399px",options:ne,defaultOptions:[{label:y,value:y}],onSelect:t=>{const s=te.unwrapDropdownValue(t);s&&N(s)}})]}),e.jsxs(d.FieldBlock,{children:[e.jsx(p.TitleSmall,{color:l.COLORS.content.primary,children:"Headers"}),b.map((t,s)=>e.jsxs(le,{"data-test":`restapi-header-${s}`,children:[e.jsx(h.Input,{variant:"small",hideInputHeader:!0,placeholder:"Enter name",value:t.key,onChangeText:a=>H(s,{key:a})}),e.jsx(h.Input,{variant:"small",hideInputHeader:!0,placeholder:"Enter value",value:t.value,onChangeText:a=>H(s,{value:a})}),e.jsx(de,{type:"button","aria-label":"Remove header","data-test":`restapi-header-remove-${s}`,onClick:()=>z(s),children:e.jsx(Y.default,{width:16,height:16,color:l.COLORS.content.secondary})})]},s)),e.jsx(ie,{children:e.jsx(se.Button,{"data-test":"restapi-add-header",buttonType:"dashRegular",size:"small",LeadingIcon:V.default,buttonText:"Add header",onClick:$})})]}),e.jsxs(d.FieldBlock,{children:[e.jsx(p.TitleSmall,{color:l.COLORS.content.primary,children:"Request "}),e.jsx(I.BikEditor,{features:{jsonMode:!0},initialContent:O,style:g,placeholder:"Type or paste JSON here",onChange:t=>U(t.text),minHeight:"120px",maxHeight:"240px"})]}),e.jsxs(d.FieldBlock,{children:[e.jsx(p.TitleSmall,{color:l.COLORS.content.primary,children:"Response "}),e.jsx(I.BikEditor,{features:{jsonMode:!0},style:g,initialContent:L,placeholder:"Type or paste JSON here",onChange:t=>W(t.text),minHeight:"120px",maxHeight:"240px"})]})]})},le=R.default.div`
-	display: flex;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),X=require("../../../assets/icons/delete.svg.js"),Z=require("../../../assets/icons/plus.svg.js"),a=require("react"),ee=require("styled-components"),u=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),p=require("../AgentBuilder.styled.js"),te=require("../constants/charLimits.js"),C=require("./DrawerHeaderText.js"),re=require("./ToolInstructionsField.js"),A=require("./VariableInlineField.js"),se=require("../../side-modal/SideModal.js"),_=require("../../input/Input.js"),ne=require("../../dropdown/Dropdown.js"),ae=require("../../dropdown/utils.js"),oe=require("../../button/Button.js"),D=require("../../../editor/BikEditor.js"),le=s=>s&&typeof s=="object"&&"default"in s?s:{default:s},j=le(ee),ie=["GET","POST","PUT","PATCH","DELETE"],de=ie.map(s=>({label:s,value:s})),ce=s=>{if(!/^https?:\/\//i.test(s))return!1;let i;try{i=new URL(s).hostname}catch{return!1}return i.includes(".")&&!i.startsWith(".")&&!i.endsWith(".")},ue=({onClose:s,onSave:i,initial:o,onImprove:P,charLimits:m=te.AGENT_CHAR_LIMITS,zIndex:F,existingNames:M=[],variablesData:x})=>{const[y,U]=a.useState(o?.name??""),[S,N]=a.useState(o?.instructions??""),[f,V]=a.useState(o?.url??"https://"),[T,W]=a.useState(o?.method??"POST"),[O,g]=a.useState(o?.headers??[{key:"",value:""}]),[q,z]=a.useState(o?.requestBody??""),[L,J]=a.useState(o?.responseSample??""),[I,k]=a.useState(!1),d=a.useRef((o?.headers??[{key:"",value:""}]).map((t,r)=>r)),B=a.useRef(d.current.length),H=(t,r)=>g(n=>n.map((h,Q)=>Q===t?{...h,...r}:h)),$=()=>{d.current=[...d.current,B.current],B.current+=1,g(t=>[...t,{key:"",value:""}])},G=t=>{d.current=d.current.filter((r,n)=>n!==t),g(r=>r.filter((n,h)=>h!==t))},R=y.trim(),v=R.length>0&&M.some(t=>t.trim().toLowerCase()===R.toLowerCase()),c=f.trim(),w=c.includes("{{variable:")?/^https?:\/\/./.test(c):ce(c),Y=c.length>0&&c!=="https://"&&!w,E=R.length>0&&w&&!v&&S.length<=m.instructions,K=async()=>{if(!E||I)return;const t={id:o?.id??`restapi_${Date.now().toString(36)}`,name:y.trim(),instructions:S,url:f.trim(),method:T,headers:O.filter(n=>n.key.trim()||n.value.trim()),requestBody:q,responseSample:L},r=i(t);if(r&&typeof r.then=="function"){k(!0);try{await r}finally{k(!1)}}};return e.jsxs(se.SideModal,{header:"Rest API",closeOnEscapeKey:!1,zIndex:F,headerCustomComponent:e.jsx(C.DrawerHeaderText,{title:"Rest API",subtitle:"Connect to any API endpoint. Define the request and a sample response for the agent to reference."}),width:"431px",headerStyle:C.DRAWER_HEADER_STYLE,bodyStyle:C.DRAWER_BODY_STYLE,onClose:s,saveButtonProps:{"data-test":"restapi-save",buttonText:"Save",buttonType:"primary",size:"small",disabled:!E,isLoading:I,onClick:K},cancelButtonProps:{"data-test":"restapi-cancel",buttonText:"Cancel",buttonType:"tertiaryGray",size:"small",onClick:s},children:[e.jsx(_.Input,{"data-test":"restapi-name",variant:"small",labelText:"Name",labelTextBold:!0,placeholder:"Enter action name",value:y,maxCharLimit:m.name,state:v?"invalid":void 0,errorMessage:v?"A tool with this name already exists":void 0,onChangeText:U}),e.jsx(re.ToolInstructionsField,{"data-test":"restapi-instructions",label:"Instructions",value:S,onChange:N,maxLength:m.instructions,placeholder:"Describe how should the LLM generate the rest API",onImprove:P,variablesData:x}),e.jsxs(p.FieldBlock,{children:[e.jsx(A.VariableInlineField,{"data-test":"restapi-url",label:"Request URL",placeholder:"https://",value:f,onChange:V,variablesData:x}),Y&&e.jsx(u.BodyCaption,{color:l.COLORS.content.negative,children:"Enter a valid URL (including https://)"})]}),e.jsxs(p.FieldBlock,{children:[e.jsx(u.TitleSmall,{color:l.COLORS.content.primary,children:"HTTP method"}),e.jsx(ne.Dropdown,{"data-test":"restapi-method",size:"small",width:"100%",dropdownWidth:"399px",options:de,defaultOptions:[{label:T,value:T}],onSelect:t=>{const r=ae.unwrapDropdownValue(t);r&&W(r)}})]}),e.jsxs(p.FieldBlock,{children:[e.jsx(u.TitleSmall,{color:l.COLORS.content.primary,children:"Headers"}),O.map((t,r)=>e.jsxs(pe,{"data-test":`restapi-header-${r}`,children:[e.jsx(_.Input,{variant:"small",hideInputHeader:!0,placeholder:"Enter name",value:t.key,onChangeText:n=>H(r,{key:n})}),e.jsx(A.VariableInlineField,{placeholder:"Enter value",value:t.value,onChange:n=>H(r,{value:n}),variablesData:x}),e.jsx(me,{type:"button","aria-label":"Remove header","data-test":`restapi-header-remove-${r}`,onClick:()=>G(r),children:e.jsx(X.default,{width:16,height:16,color:l.COLORS.content.secondary})})]},d.current[r])),e.jsx(he,{children:e.jsx(oe.Button,{"data-test":"restapi-add-header",buttonType:"dashRegular",size:"small",LeadingIcon:Z.default,buttonText:"Add header",onClick:$})})]}),e.jsxs(p.FieldBlock,{children:[e.jsx(u.TitleSmall,{color:l.COLORS.content.primary,children:"Request "}),e.jsx(D.BikEditor,{features:{jsonMode:!0},initialContent:q,style:b,placeholder:"Type or paste JSON here",onChange:t=>z(t.text),minHeight:"120px",maxHeight:"240px"})]}),e.jsxs(p.FieldBlock,{children:[e.jsx(u.TitleSmall,{color:l.COLORS.content.primary,children:"Response "}),e.jsx(D.BikEditor,{features:{jsonMode:!0},style:b,initialContent:L,placeholder:"Type or paste JSON here",onChange:t=>J(t.text),minHeight:"120px",maxHeight:"240px"})]})]})},pe=j.default.div`
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 32px;
 	align-items: center;
 	gap: 8px;
-`,ie=R.default.div`
+`,he=j.default.div`
 	display: flex;
-`,de=R.default.button`
+`,me=j.default.button`
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -19,5 +20,5 @@
 	&:hover {
 		border-color: ${l.COLORS.content.secondary};
 	}
-`,g={borderRadius:"4px",overflow:"hidden"};exports.JsonFieldBox=g;exports.RestApiToolPanel=oe;
+`,b={borderRadius:"4px",overflow:"hidden"};exports.JsonFieldBox=b;exports.RestApiToolPanel=ue;
 //# sourceMappingURL=RestApiToolPanel.js.map