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

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

@@ -1 +1 @@
-{"version":3,"file":"GoLiveModal.js","sources":["../../../../../src/components/agent-builder/components/GoLiveModal.tsx"],"sourcesContent":["import ManifestGlass from '@src/assets/icons/ManifestGlass.svg';\nimport SuccessIcon from '@src/assets/icons/successIcon.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ModalActions, ModalBody, ModalIcon } from '../AgentBuilder.styled';\n\nexport type GoLiveModalMode = 'confirm' | 'success' | null;\n\ninterface GoLiveModalProps {\n\tmode: GoLiveModalMode;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tonSaveDraft: () => void;\n\tonGoToDashboard?: () => void;\n\tisPublishing?: boolean;\n}\n\n/**\n * Confirm / success dialog for going live. Uses `StyledModal` as the shell but\n * renders the actions INSIDE the body (not StyledModal's footer) — the footer's\n * `margin-top:auto` detaches from this short, centered hero layout and spills\n * out of the card. Body-level actions stay anchored under the content.\n */\nexport const GoLiveModal: React.FC<GoLiveModalProps> = ({\n\tmode,\n\tonClose,\n\tonConfirm,\n\tonSaveDraft,\n\tonGoToDashboard,\n\tisPublishing,\n}) => {\n\tif (!mode) {\n\t\treturn null;\n\t}\n\n\tconst isSuccess = mode === 'success';\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-go-live-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth={isSuccess ? '400px' : '520px'}\n\t\t>\n\t\t\t<ModalBody>\n\t\t\t\t<ModalIcon>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<SuccessIcon width={64} height={64} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ManifestGlass width={64} height={64} />\n\t\t\t\t\t)}\n\t\t\t\t</ModalIcon>\n\n\t\t\t\t<TitleRegular color={COLORS.content.primary}>\n\t\t\t\t\t{isSuccess ? 'Your agent is live!' : 'Ready to go live?'}\n\t\t\t\t</TitleRegular>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{isSuccess\n\t\t\t\t\t\t? 'You can manage your agents from the AI agent dashboard.'\n\t\t\t\t\t\t: 'This agent will start handling customer conversations immediately. You can pause it at any time.'}\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-go-dashboard\"\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\tbuttonText=\"Go to Agent dashboard\"\n\t\t\t\t\t\t\tonClick={onGoToDashboard ?? onClose}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-save-draft\"\n\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-go-live\"\n\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Go live now\"\n\t\t\t\t\t\t\t\tisLoading={isPublishing}\n\t\t\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["GoLiveModal","mode","onClose","onConfirm","onSaveDraft","onGoToDashboard","isPublishing","isSuccess","jsx","StyledModal","ModalBody","ModalIcon","SuccessIcon","ManifestGlass","TitleRegular","COLORS","BodySecondary","ModalActions","Button","jsxs","Fragment"],"mappings":"saA0BaA,EAA0C,CAAC,CACvD,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,aAAAC,CACD,IAAM,CACL,GAAI,CAACL,EACJ,OAAO,KAGR,MAAMM,EAAYN,IAAS,UAE3B,OACCO,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,sBACV,KAAI,GACJ,QAAAP,EACA,MAAOK,EAAY,QAAU,QAE7B,gBAACG,YAAA,CACA,SAAA,CAAAF,MAACG,EAAAA,UAAA,CACC,SAAAJ,EACAC,EAAAA,IAACI,EAAAA,QAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,QAEnCC,EAAAA,QAAA,CAAc,MAAO,GAAI,OAAQ,GAAI,EAExC,EAEAL,EAAAA,IAACM,EAAAA,cAAa,MAAOC,SAAO,QAAQ,QAClC,SAAAR,EAAY,sBAAwB,mBAAA,CACtC,EACAC,EAAAA,IAACQ,EAAAA,eAAc,MAAOD,SAAO,QAAQ,UACnC,SAAAR,EACE,0DACA,kGAAA,CACJ,EAEAC,EAAAA,IAACS,EAAAA,cACC,SAAAV,EACAC,EAAAA,IAACU,EAAAA,OAAA,CACA,YAAU,qBACV,WAAW,UACX,KAAK,SACL,iBAAgB,GAChB,WAAW,wBACX,QAASb,GAAmBH,CAAA,CAAA,EAG7BiB,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAZ,EAAAA,IAACU,EAAAA,OAAA,CACA,YAAU,2BACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,gBACX,QAASd,CAAA,CAAA,EAEVI,EAAAA,IAACU,EAAAA,OAAA,CACA,YAAU,wBACV,WAAW,UACX,KAAK,SACL,iBAAgB,GAChB,WAAW,cACX,UAAWZ,EACX,QAASH,CAAA,CAAA,CACV,CAAA,CACD,CAAA,CAEF,CAAA,CAAA,CACD,CAAA,CAAA,CAGH"}
+{"version":3,"file":"GoLiveModal.js","sources":["../../../../../src/components/agent-builder/components/GoLiveModal.tsx"],"sourcesContent":["import ManifestGlass from '@src/assets/icons/ManifestGlass.svg';\nimport SuccessIcon from '@src/assets/icons/successIcon.svg';\nimport { ArrowRight } from '@src/icons';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodyPrimary, TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tDraftButtonScope,\n\tModalActions,\n\tModalBody,\n\tModalIcon,\n} from '../AgentBuilder.styled';\n\nexport type GoLiveModalMode = 'confirm' | 'success' | null;\n\ninterface GoLiveModalProps {\n\tmode: GoLiveModalMode;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tonSaveDraft: () => void;\n\tonGoToDashboard?: () => void;\n\tisPublishing?: boolean;\n}\n\n/**\n * Confirm / success dialog for going live. Uses `StyledModal` as the shell but\n * renders the actions INSIDE the body (not StyledModal's footer) — the footer's\n * `margin-top:auto` detaches from this short, centered hero layout and spills\n * out of the card. Body-level actions stay anchored under the content.\n */\nexport const GoLiveModal: React.FC<GoLiveModalProps> = ({\n\tmode,\n\tonClose,\n\tonConfirm,\n\tonSaveDraft,\n\tonGoToDashboard,\n\tisPublishing,\n}) => {\n\tif (!mode) {\n\t\treturn null;\n\t}\n\n\tconst isSuccess = mode === 'success';\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-go-live-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth={isSuccess ? '400px' : '520px'}\n\t\t>\n\t\t\t<ModalBody>\n\t\t\t\t<ModalIcon>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<SuccessIcon width={64} height={64} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ManifestGlass width={64} height={64} />\n\t\t\t\t\t)}\n\t\t\t\t</ModalIcon>\n\n\t\t\t\t<TitleMedium color={COLORS.content.primary}>\n\t\t\t\t\t{isSuccess ? 'Your agent is live!' : 'Ready to go live?'}\n\t\t\t\t</TitleMedium>\n\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t{isSuccess\n\t\t\t\t\t\t? 'You can manage your agents from the AI agent dashboard.'\n\t\t\t\t\t\t: 'This agent will start handling customer conversations immediately. You can pause it at any time.'}\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-go-dashboard\"\n\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Go to Agent dashboard\"\n\t\t\t\t\t\t\t\tTrailingIcon={ArrowRight}\n\t\t\t\t\t\t\t\tonClick={onGoToDashboard ?? onClose}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DraftButtonScope>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-save-draft\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DraftButtonScope>\n\t\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-go-live\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText=\"Go live now\"\n\t\t\t\t\t\t\t\t\tisLoading={isPublishing}\n\t\t\t\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["GoLiveModal","mode","onClose","onConfirm","onSaveDraft","onGoToDashboard","isPublishing","isSuccess","jsx","StyledModal","ModalBody","ModalIcon","SuccessIcon","ManifestGlass","TitleMedium","COLORS","BodyPrimary","ModalActions","Button","ArrowRight","jsxs","Fragment","DraftButtonScope"],"mappings":"qeAgCaA,EAA0C,CAAC,CACvD,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,aAAAC,CACD,IAAM,CACL,GAAI,CAACL,EACJ,OAAO,KAGR,MAAMM,EAAYN,IAAS,UAE3B,OACCO,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,sBACV,KAAI,GACJ,QAAAP,EACA,MAAOK,EAAY,QAAU,QAE7B,gBAACG,YAAA,CACA,SAAA,CAAAF,MAACG,EAAAA,UAAA,CACC,SAAAJ,EACAC,EAAAA,IAACI,EAAAA,QAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,QAEnCC,EAAAA,QAAA,CAAc,MAAO,GAAI,OAAQ,GAAI,EAExC,EAEAL,EAAAA,IAACM,EAAAA,aAAY,MAAOC,SAAO,QAAQ,QACjC,SAAAR,EAAY,sBAAwB,mBAAA,CACtC,EACAC,EAAAA,IAACQ,EAAAA,aAAY,MAAOD,SAAO,QAAQ,UACjC,SAAAR,EACE,0DACA,kGAAA,CACJ,EAEAC,EAAAA,IAACS,EAAAA,cACC,SAAAV,EACAC,EAAAA,IAAC,OAAI,MAAO,CAAE,QAAS,MAAA,EACtB,SAAAA,EAAAA,IAACU,EAAAA,OAAA,CACA,YAAU,qBACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,wBACX,aAAcC,EAAAA,QACd,QAASd,GAAmBH,CAAA,CAAA,CAC7B,CACD,EAEAkB,EAAAA,KAAAC,EAAAA,SAAA,CACC,SAAA,CAAAb,MAACc,EAAAA,iBAAA,CACA,SAAAd,EAAAA,IAACU,EAAAA,OAAA,CACA,YAAU,2BACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,gBACX,QAASd,CAAA,CAAA,EAEX,QACC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAI,EAAAA,IAACU,EAAAA,OAAA,CACA,YAAU,wBACV,WAAW,UACX,KAAK,SACL,iBAAgB,GAChB,WAAW,cACX,UAAWZ,EACX,QAASH,CAAA,CAAA,CACV,CACD,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,CAAA,CACD,CAAA,CAAA,CAGH"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),x=require("../../TypographyStyle.js"),T=require("../../../constants/Theme.js"),u=require("../AgentBuilder.styled.js"),L=require("../constants/editorStyle.js"),d=require("../utils/mentionSerialization.js"),P=require("./MentionPicker.js"),_=require("../../../editor/BikEditor.js"),w=({label:m,value:c,onChange:p,maxLength:a,placeholder:y,minHeight:C="200px",resetKey:s,mentionItems:r,tools:E,onMentionSelect:b,onFocus:j,registerInsert:o,onCreateSubAgent:q,toolActions:k,action:O,...R})=>{const l=i.useRef(null),[M,S]=i.useState(c.length),h=i.useCallback((t,e,H)=>{const f=l.current;if(!f)return;const A=r.find(g=>String(g.id)===String(e)&&g.meta?.kind===t),D=H??A?.label??e;f.insertInlineContent(`${d.buildMentionHtml(String(e),D,t)} `)},[r]);i.useEffect(()=>{if(o)return o(h),()=>o(null)},[o,h]);const B=i.useMemo(()=>d.instructionsToEditorHtml(c,r),[s]);return i.useEffect(()=>S(c.length),[s]),n.jsxs(u.FieldBlock,{children:[n.jsxs(u.FieldLabelRow,{children:[n.jsx(x.TitleSmall,{color:T.COLORS.content.primary,children:m}),n.jsxs(x.BodyCaption,{color:T.COLORS.content.secondary,children:[M,"/",a]})]}),n.jsxs(u.AiTextAreaShell,{minHeight:C,"data-test":R["data-test"],children:[n.jsx(_.BikEditor,{ref:l,initialContent:B,placeholder:y,maxCharacters:a,minHeight:"120px",maxHeight:"320px",style:{border:"none"},editorStyle:L.AGENT_EDITOR_STYLE,onFocus:j,mentions:{agents:r,removeTriggerOnDismiss:!0,renderDropdown:t=>n.jsx(P.MentionPicker,{...t,onCreateSubAgent:q,toolActions:k}),onSelect:t=>{const e=t.meta?.kind;e&&b?.(e,String(t.id))}},onChange:t=>{S(t.characterCount);const e=l.current?.getJSON()??null;p(d.editorDocToInstructions(e,E))}},s),O]})]})};exports.MentionEditor=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),x=require("../../TypographyStyle.js"),T=require("../../../constants/Theme.js"),u=require("../AgentBuilder.styled.js"),D=require("../constants/editorStyle.js"),d=require("../utils/mentionSerialization.js"),P=require("./MentionPicker.js"),_=require("../../../editor/BikEditor.js"),w=({label:m,value:c,onChange:p,maxLength:a,placeholder:y,minHeight:E="200px",resetKey:l,mentionItems:r,tools:b,onMentionSelect:j,onFocus:q,registerInsert:o,onCreateSubAgent:C,toolActions:k,action:O,...R})=>{const s=i.useRef(null),[M,S]=i.useState(c.length),h=i.useCallback((t,e,H)=>{const f=s.current;if(!f)return;const L=r.find(g=>String(g.id)===String(e)&&g.meta?.kind===t),A=H??L?.label??e;f.insertInlineContent(`${d.buildMentionHtml(String(e),A,t)} `)},[r]);i.useEffect(()=>{if(o)return o(h),()=>o(null)},[o,h]);const B=i.useMemo(()=>d.instructionsToEditorHtml(c,r),[l]);return i.useEffect(()=>S(c.length),[l]),n.jsxs(u.FieldBlock,{children:[n.jsxs(u.FieldLabelRow,{children:[n.jsx(x.TitleSmall,{color:T.COLORS.content.primary,children:m}),n.jsxs(x.BodyCaption,{color:T.COLORS.content.secondary,children:[M,"/",a]})]}),n.jsxs(u.AiTextAreaShell,{minHeight:E,"data-test":R["data-test"],children:[n.jsx(_.BikEditor,{ref:s,initialContent:B,placeholder:y,characterLimit:a,minHeight:"120px",maxHeight:"320px",style:{border:"none"},editorStyle:D.AGENT_EDITOR_STYLE,onFocus:q,mentions:{agents:r,removeTriggerOnDismiss:!0,renderDropdown:t=>n.jsx(P.MentionPicker,{...t,onCreateSubAgent:C,toolActions:k}),onSelect:t=>{const e=t.meta?.kind;e&&j?.(e,String(t.id))}},onChange:t=>{S(t.characterCount);const e=s.current?.getJSON()??null;p(d.editorDocToInstructions(e,b))}},l),O]})]})};exports.MentionEditor=w;
 //# 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 } 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 } from '../constants/tools';\nimport {\n\tbuildMentionHtml,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface MentionEditorProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content. */\n\tresetKey?: string | number;\n\t/** Items shown in the `@` picker (tools, and sub-agents where allowed). */\n\tmentionItems: MentionItem[];\n\t/** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */\n\ttools: AgentTool[];\n\t/** Called when an item is picked from the `@` menu (to attach it upstream). */\n\tonMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;\n\tonFocus?: () => void;\n\t/** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */\n\tregisterInsert?: (fn: InsertFn | null) => void;\n\t/**\n\t * When set, the `@` picker's Sub-agent view shows a \"Create new\" row that calls\n\t * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's\n\t * own editors, which can't nest sub-agents).\n\t */\n\tonCreateSubAgent?: () => void;\n\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the `@` picker's\n\t * Tools view. Picking one opens its drawer instead of inserting a mention.\n\t */\n\ttoolActions?: ToolAction[];\n\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\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel) => {\n\t\t\tconst editor = editorRef.current;\n\t\t\tif (!editor) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst item = mentionItems.find(\n\t\t\t\t(m) =>\n\t\t\t\t\tString(m.id) === String(id) &&\n\t\t\t\t\t(m.meta as unknown as MentionKindMeta | undefined)?.kind === kind,\n\t\t\t);\n\t\t\tconst finalLabel = overrideLabel ?? item?.label ?? id;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind)}&nbsp;`,\n\t\t\t);\n\t\t},\n\t\t[mentionItems],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!registerInsert) {\n\t\t\treturn;\n\t\t}\n\t\tregisterInsert(insert);\n\t\treturn () => registerInsert(null);\n\t}, [registerInsert, insert]);\n\n\t// Mount-only initial HTML; recomputed (editor remounted via key) on resetKey.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\tuseEffect(\n\t\t() => setCount(value.length),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{count}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight={minHeight} data-test={rest['data-test']}>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={resetKey}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxCharacters={maxLength}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"320px\"\n\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\teditorStyle={AGENT_EDITOR_STYLE}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tmentions={{\n\t\t\t\t\t\tagents: mentionItems,\n\t\t\t\t\t\tremoveTriggerOnDismiss: true,\n\t\t\t\t\t\trenderDropdown: (props) => (\n\t\t\t\t\t\t\t<MentionPicker\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/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tonSelect: (item) => {\n\t\t\t\t\t\t\tconst kind = (item.meta as unknown as MentionKindMeta | undefined)\n\t\t\t\t\t\t\t\t?.kind;\n\t\t\t\t\t\t\tif (kind) {\n\t\t\t\t\t\t\t\tonMentionSelect?.(kind, String(item.id));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={(snapshot) => {\n\t\t\t\t\t\tsetCount(snapshot.characterCount);\n\t\t\t\t\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t\t\t\t\tonChange(editorDocToInstructions(doc, tools));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{action}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","toolActions","action","rest","editorRef","useRef","count","setCount","useState","insert","useCallback","kind","id","overrideLabel","editor","item","m","finalLabel","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":"+ZAmEaA,EAA8C,CAAC,CAC3D,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,EACA,aAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,GAAGC,CACJ,IAAM,CACL,MAAMC,EAAYC,EAAAA,OAAqB,IAAI,EACrC,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASnB,EAAM,MAAM,EAEzCoB,EAASC,EAAAA,YACd,CAACC,EAAMC,EAAIC,IAAkB,CAC5B,MAAMC,EAASV,EAAU,QACzB,GAAI,CAACU,EACJ,OAED,MAAMC,EAAOpB,EAAa,KACxBqB,GACA,OAAOA,EAAE,EAAE,IAAM,OAAOJ,CAAE,GACzBI,EAAE,MAAiD,OAASL,CAAA,EAEzDM,EAAaJ,GAAiBE,GAAM,OAASH,EACnDE,EAAO,oBACN,GAAGI,EAAAA,iBAAiB,OAAON,CAAE,EAAGK,EAAYN,CAAI,CAAC,QAAA,CAEnD,EACA,CAAChB,CAAY,CAAA,EAGdwB,EAAAA,UAAU,IAAM,CACf,GAAKpB,EAGL,OAAAA,EAAeU,CAAM,EACd,IAAMV,EAAe,IAAI,CACjC,EAAG,CAACA,EAAgBU,CAAM,CAAC,EAG3B,MAAMW,EAAcC,EAAAA,QACnB,IAAMC,EAAAA,yBAAyBjC,EAAOM,CAAY,EAElD,CAACD,CAAQ,CAAA,EAGVyB,OAAAA,EAAAA,UACC,IAAMZ,EAASlB,EAAM,MAAM,EAE3B,CAACK,CAAQ,CAAA,SAIR6B,aAAA,CACA,SAAA,CAAAC,OAACC,EAAAA,cAAA,CACA,SAAA,CAAAC,MAACC,EAAAA,WAAA,CAAW,MAAOC,EAAAA,OAAO,QAAQ,QAAU,SAAAxC,EAAM,EAClDoC,EAAAA,KAACK,EAAAA,YAAA,CAAY,MAAOD,EAAAA,OAAO,QAAQ,UACjC,SAAA,CAAAtB,EAAM,IAAEf,CAAA,CAAA,CACV,CAAA,EACD,SAECuC,EAAAA,gBAAA,CAAgB,UAAArC,EAAsB,YAAWU,EAAK,WAAW,EACjE,SAAA,CAAAuB,EAAAA,IAACK,EAAAA,UAAA,CAEA,IAAK3B,EACL,eAAgBgB,EAChB,YAAA5B,EACA,cAAeD,EACf,UAAU,QACV,UAAU,QACV,MAAO,CAAE,OAAQ,MAAA,EACjB,YAAayC,EAAAA,mBACb,QAAAlC,EACA,SAAU,CACT,OAAQH,EACR,uBAAwB,GACxB,eAAiBsC,GAChBP,EAAAA,IAACQ,EAAAA,cAAA,CACC,GAAGD,EACJ,iBAAAjC,EACA,YAAAC,CAAA,CAAA,EAGF,SAAWc,GAAS,CACnB,MAAMJ,EAAQI,EAAK,MAChB,KACCJ,GACHd,IAAkBc,EAAM,OAAOI,EAAK,EAAE,CAAC,CAEzC,CAAA,EAED,SAAWoB,GAAa,CACvB5B,EAAS4B,EAAS,cAAc,EAChC,MAAMC,EAAMhC,EAAU,SAAS,QAAA,GAAa,KAC5Cd,EAAS+C,EAAAA,wBAAwBD,EAAKxC,CAAK,CAAC,CAC7C,CAAA,EAhCKF,CAAA,EAkCLQ,CAAA,CAAA,CACF,CAAA,EACD,CAEF"}
+{"version":3,"file":"MentionEditor.js","sources":["../../../../../src/components/agent-builder/components/MentionEditor.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef, MentionItem } from '@src/editor';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool } from '../AgentBuilder.model';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport type { ToolAction } from '../constants/tools';\nimport {\n\tbuildMentionHtml,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface MentionEditorProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content. */\n\tresetKey?: string | number;\n\t/** Items shown in the `@` picker (tools, and sub-agents where allowed). */\n\tmentionItems: MentionItem[];\n\t/** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */\n\ttools: AgentTool[];\n\t/** Called when an item is picked from the `@` menu (to attach it upstream). */\n\tonMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;\n\tonFocus?: () => void;\n\t/** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */\n\tregisterInsert?: (fn: InsertFn | null) => void;\n\t/**\n\t * When set, the `@` picker's Sub-agent view shows a \"Create new\" row that calls\n\t * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's\n\t * own editors, which can't nest sub-agents).\n\t */\n\tonCreateSubAgent?: () => void;\n\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the `@` picker's\n\t * Tools view. Picking one opens its drawer instead of inserting a mention.\n\t */\n\ttoolActions?: ToolAction[];\n\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\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel) => {\n\t\t\tconst editor = editorRef.current;\n\t\t\tif (!editor) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst item = mentionItems.find(\n\t\t\t\t(m) =>\n\t\t\t\t\tString(m.id) === String(id) &&\n\t\t\t\t\t(m.meta as unknown as MentionKindMeta | undefined)?.kind === kind,\n\t\t\t);\n\t\t\tconst finalLabel = overrideLabel ?? item?.label ?? id;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind)}&nbsp;`,\n\t\t\t);\n\t\t},\n\t\t[mentionItems],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!registerInsert) {\n\t\t\treturn;\n\t\t}\n\t\tregisterInsert(insert);\n\t\treturn () => registerInsert(null);\n\t}, [registerInsert, insert]);\n\n\t// Mount-only initial HTML; recomputed (editor remounted via key) on resetKey.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\tuseEffect(\n\t\t() => setCount(value.length),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{count}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight={minHeight} data-test={rest['data-test']}>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={resetKey}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t// Soft limit: blocks typing past the cap but lets a paste through\n\t\t\t\t\t// (overflow rendered grey) instead of rejecting the whole paste.\n\t\t\t\t\tcharacterLimit={maxLength}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"320px\"\n\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\teditorStyle={AGENT_EDITOR_STYLE}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tmentions={{\n\t\t\t\t\t\tagents: mentionItems,\n\t\t\t\t\t\tremoveTriggerOnDismiss: true,\n\t\t\t\t\t\trenderDropdown: (props) => (\n\t\t\t\t\t\t\t<MentionPicker\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\tonCreateSubAgent={onCreateSubAgent}\n\t\t\t\t\t\t\t\ttoolActions={toolActions}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tonSelect: (item) => {\n\t\t\t\t\t\t\tconst kind = (item.meta as unknown as MentionKindMeta | undefined)\n\t\t\t\t\t\t\t\t?.kind;\n\t\t\t\t\t\t\tif (kind) {\n\t\t\t\t\t\t\t\tonMentionSelect?.(kind, String(item.id));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={(snapshot) => {\n\t\t\t\t\t\tsetCount(snapshot.characterCount);\n\t\t\t\t\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t\t\t\t\tonChange(editorDocToInstructions(doc, tools));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{action}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","toolActions","action","rest","editorRef","useRef","count","setCount","useState","insert","useCallback","kind","id","overrideLabel","editor","item","m","finalLabel","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":"+ZAmEaA,EAA8C,CAAC,CAC3D,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,EACA,aAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,GAAGC,CACJ,IAAM,CACL,MAAMC,EAAYC,EAAAA,OAAqB,IAAI,EACrC,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASnB,EAAM,MAAM,EAEzCoB,EAASC,EAAAA,YACd,CAACC,EAAMC,EAAIC,IAAkB,CAC5B,MAAMC,EAASV,EAAU,QACzB,GAAI,CAACU,EACJ,OAED,MAAMC,EAAOpB,EAAa,KACxBqB,GACA,OAAOA,EAAE,EAAE,IAAM,OAAOJ,CAAE,GACzBI,EAAE,MAAiD,OAASL,CAAA,EAEzDM,EAAaJ,GAAiBE,GAAM,OAASH,EACnDE,EAAO,oBACN,GAAGI,EAAAA,iBAAiB,OAAON,CAAE,EAAGK,EAAYN,CAAI,CAAC,QAAA,CAEnD,EACA,CAAChB,CAAY,CAAA,EAGdwB,EAAAA,UAAU,IAAM,CACf,GAAKpB,EAGL,OAAAA,EAAeU,CAAM,EACd,IAAMV,EAAe,IAAI,CACjC,EAAG,CAACA,EAAgBU,CAAM,CAAC,EAG3B,MAAMW,EAAcC,EAAAA,QACnB,IAAMC,EAAAA,yBAAyBjC,EAAOM,CAAY,EAElD,CAACD,CAAQ,CAAA,EAGVyB,OAAAA,EAAAA,UACC,IAAMZ,EAASlB,EAAM,MAAM,EAE3B,CAACK,CAAQ,CAAA,SAIR6B,aAAA,CACA,SAAA,CAAAC,OAACC,EAAAA,cAAA,CACA,SAAA,CAAAC,MAACC,EAAAA,WAAA,CAAW,MAAOC,EAAAA,OAAO,QAAQ,QAAU,SAAAxC,EAAM,EAClDoC,EAAAA,KAACK,EAAAA,YAAA,CAAY,MAAOD,EAAAA,OAAO,QAAQ,UACjC,SAAA,CAAAtB,EAAM,IAAEf,CAAA,CAAA,CACV,CAAA,EACD,SAECuC,EAAAA,gBAAA,CAAgB,UAAArC,EAAsB,YAAWU,EAAK,WAAW,EACjE,SAAA,CAAAuB,EAAAA,IAACK,EAAAA,UAAA,CAEA,IAAK3B,EACL,eAAgBgB,EAChB,YAAA5B,EAGA,eAAgBD,EAChB,UAAU,QACV,UAAU,QACV,MAAO,CAAE,OAAQ,MAAA,EACjB,YAAayC,EAAAA,mBACb,QAAAlC,EACA,SAAU,CACT,OAAQH,EACR,uBAAwB,GACxB,eAAiBsC,GAChBP,EAAAA,IAACQ,EAAAA,cAAA,CACC,GAAGD,EACJ,iBAAAjC,EACA,YAAAC,CAAA,CAAA,EAGF,SAAWc,GAAS,CACnB,MAAMJ,EAAQI,EAAK,MAChB,KACCJ,GACHd,IAAkBc,EAAM,OAAOI,EAAK,EAAE,CAAC,CAEzC,CAAA,EAED,SAAWoB,GAAa,CACvB5B,EAAS4B,EAAS,cAAc,EAChC,MAAMC,EAAMhC,EAAU,SAAS,QAAA,GAAa,KAC5Cd,EAAS+C,EAAAA,wBAAwBD,EAAKxC,CAAK,CAAC,CAC7C,CAAA,EAlCKF,CAAA,EAoCLQ,CAAA,CAAA,CACF,CAAA,EACD,CAEF"}

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

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),F=require("../../../assets/icons/chevronRight.svg.js"),G=require("../../../assets/icons/searchIcon.svg.js"),J=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),c=require("react"),Q=require("styled-components"),P=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),L=require("../constants/tools.js"),_=require("../utils/mentionSerialization.js"),m=require("../utils/sourceIcons.js"),V=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},p=V(Q),S=o=>o.meta,I=o=>S(o)?.plainLabel??o.label,W="__bik_create_subagent__",X=({items:o,onSelect:j,registerKeyHandler:O,onClose:v,onCreateSubAgent:k,initialSource:D,toolActions:g})=>{const[z,$]=c.useState(null),[l,A]=c.useState(D??null),[C,b]=c.useState(0),[y,M]=c.useState(""),x=c.useMemo(()=>o.filter(e=>S(e)?.kind==="tool"),[o]),w=c.useMemo(()=>o.filter(e=>S(e)?.kind==="subagent"),[o]),E=c.useMemo(()=>{const e=[];return x.forEach(r=>{const h=S(r)?.source??"other";e.includes(h)||e.push(h)}),e},[x]),q=c.useMemo(()=>new Map((g??[]).map(e=>[e.source,e])),[g]),R=c.useMemo(()=>L.CATEGORIES.filter(e=>e.key==="tool"?x.length>0||(g?.length??0)>0:w.length>0||!!k),[x.length,w.length,k,g?.length]),B=R.length===1?R[0].key:null,u=z??B,f=u?u==="subagent"?{title:"Sub-agent",onBack:B?void 0:()=>$(null)}:l?{title:_.toolSourceLabel(l),onBack:()=>A(null),icon:m.sourceIcon(l)}:{title:"Tools",onBack:B?void 0:()=>$(null)}:null,d=c.useMemo(()=>{if(!u)return R.map(t=>({id:t.key,label:t.label,drillsIn:!0,onActivate:()=>{$(t.key),A(null)}}));if(u==="subagent"){const t=y.trim().toLowerCase(),n=w.filter(s=>!t||I(s).toLowerCase().includes(t)).map(s=>({id:String(s.id),label:I(s),drillsIn:!1,onActivate:()=>j(s)}));return k&&n.push({id:W,label:"Create new",drillsIn:!1,isCreate:!0,onActivate:()=>{v?.(),k()}}),n}if(!l){const t=(g??[]).map(n=>n.source).filter(n=>!E.includes(n));return[...E,...t].sort((n,s)=>L.toolSourceRank(n)-L.toolSourceRank(s)).map(n=>{const s=q.get(n);return s?.connected===!1?{id:n,label:_.toolSourceLabel(n),drillsIn:!1,icon:m.sourceIcon(n)??s.icon,rightLabel:"Connect",onActivate:()=>{v?.(),s.onConnect?.()}}:{id:n,label:_.toolSourceLabel(n),drillsIn:!0,icon:m.sourceIcon(n)??s?.icon,onActivate:()=>A(n)}})}const e=y.trim().toLowerCase(),r=x.filter(t=>(S(t)?.source??"other")===l).filter(t=>!e||I(t).toLowerCase().includes(e)).map(t=>({id:String(t.id),label:I(t),drillsIn:!1,onActivate:()=>j(t)})),h=q.get(l);if(h){const t=l in L.CONFIG_TOOL_SOURCES;r.push({id:`create:${l}`,label:h.label,drillsIn:!1,isCreate:!t,onActivate:()=>{v?.(),h.onSelect()}})}return r},[u,R,l,y,x,w,E,j,v,k,g,q]);c.useEffect(()=>b(0),[u,l,y,o]),c.useEffect(()=>M(""),[u,l]);const T=c.useRef({rows:d,activeIndex:C,header:f});T.current={rows:d,activeIndex:C,header:f},c.useEffect(()=>{if(O)return O(e=>{const{rows:r,activeIndex:h,header:t}=T.current;switch(e.key){case"ArrowDown":return r.length&&b(n=>(n+1)%r.length),!0;case"ArrowUp":return r.length&&b(n=>(n+r.length-1)%r.length),!0;case"ArrowRight":case"Enter":return r[h]?.onActivate(),!0;case"ArrowLeft":return t?.onBack?(t.onBack(),!0):!1;default:return!1}}),()=>O(null)},[O]);const N=u?d.length&&!d[0].drillsIn?"items":"sources":"categories",U=u==="tool"&&!!l||u==="subagent";return a.jsxs(Y,{className:`bik-mention-picker bik-mention-picker--${N}`,children:[f&&a.jsxs(oe,{type:"button",onClick:f.onBack,disabled:!f.onBack,style:{background:i.COLORS.surface.subdued,cursor:f.onBack?"pointer":"default"},children:[f.onBack&&a.jsx(J.default,{width:20,height:20,color:i.COLORS.content.primary}),f.icon&&m.renderSourceIcon(f.icon),a.jsxs(P.TitleSmall,{children:[" ",f.title]})]}),U&&a.jsxs(Z,{children:[a.jsx(G.default,{width:20,height:20,color:i.COLORS.content.placeholder}),a.jsx(K,{autoFocus:!0,value:y,placeholder:"Search","data-test":"mention-picker-search",onChange:e=>M(e.target.value),onKeyDown:e=>{d.length&&(e.key==="ArrowDown"?(e.preventDefault(),b(r=>(r+1)%d.length)):e.key==="ArrowUp"?(e.preventDefault(),b(r=>(r+d.length-1)%d.length)):e.key==="Enter"&&(e.preventDefault(),d[C]?.onActivate()))}})]}),d.length===0?a.jsx(re,{children:u==="subagent"?"No sub-agents available":"No tools available"}):d.map((e,r)=>a.jsx(H,{type:"button",$active:r===C,onMouseEnter:()=>b(r),onClick:e.onActivate,children:e.isCreate?a.jsx(ne,{children:e.label}):a.jsxs(a.Fragment,{children:[a.jsxs(ee,{children:[m.renderSourceIcon(e.icon),a.jsx(P.BodySecondary,{color:i.COLORS.content.primary,children:e.label})]}),e.rightLabel?a.jsx(te,{children:e.rightLabel}):e.drillsIn&&a.jsx(F.default,{width:12,height:12})]})},e.id))]})},Y=p.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),Q=require("../../../assets/icons/chevronRight.svg.js"),V=require("../../../assets/icons/searchIcon.svg.js"),W=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),c=require("react"),X=require("styled-components"),U=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),$=require("../constants/tools.js"),T=require("../utils/mentionSerialization.js"),k=require("../utils/sourceIcons.js"),Y=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},p=Y(X),y=r=>r.meta,O=r=>y(r)?.plainLabel??r.label,Z="__bik_create_subagent__",K=({items:r,onSelect:w,registerKeyHandler:C,onClose:m,onCreateSubAgent:v,initialSource:P,toolActions:x})=>{const[F,A]=c.useState(null),[s,E]=c.useState(P??null),[L,g]=c.useState(-1),[S,D]=c.useState(""),b=c.useMemo(()=>r.filter(e=>y(e)?.kind==="tool"),[r]),R=c.useMemo(()=>r.filter(e=>y(e)?.kind==="subagent"),[r]),q=c.useMemo(()=>{const e=[];return b.forEach(o=>{const h=y(o)?.source??"other";e.includes(h)||e.push(h)}),e},[b]),B=c.useMemo(()=>new Map((x??[]).map(e=>[e.source,e])),[x]),I=c.useMemo(()=>$.CATEGORIES.filter(e=>e.key==="tool"?b.length>0||(x?.length??0)>0:R.length>0||!!v),[b.length,R.length,v,x?.length]),M=I.length===1?I[0].key:null,d=F??M,f=d?d==="subagent"?{title:"Sub-agent",onBack:M?void 0:()=>A(null)}:s?{title:T.toolSourceLabel(s),onBack:P?void 0:()=>E(null),icon:k.sourceIcon(s)}:{title:"Tools",onBack:M?void 0:()=>A(null)}:null,u=c.useMemo(()=>{if(!d)return I.map(n=>({id:n.key,label:n.label,drillsIn:!0,onActivate:()=>{A(n.key),E(null)}}));if(d==="subagent"){const n=S.trim().toLowerCase(),t=R.filter(i=>!n||O(i).toLowerCase().includes(n)).map(i=>({id:String(i.id),label:O(i),drillsIn:!1,onActivate:()=>w(i)}));return v&&t.push({id:Z,label:"Create new",drillsIn:!1,isCreate:!0,onActivate:()=>{m?.(),v()}}),t}if(!s){const n=(x??[]).map(t=>t.source).filter(t=>!q.includes(t));return[...q,...n].sort((t,i)=>$.toolSourceRank(t)-$.toolSourceRank(i)).map(t=>{const i=B.get(t);if(i?.connected===!1)return{id:t,label:T.toolSourceLabel(t),drillsIn:!1,icon:k.sourceIcon(t)??i.icon,rightLabel:"Connect",onActivate:()=>{m?.(),i.onConnect?.()}};const N=b.filter(j=>(y(j)?.source??"other")===t);if(N.length+(i?1:0)===1){const j=k.sourceIcon(t)??i?.icon;if(i)return{id:t,label:i.label,drillsIn:!1,icon:j,onActivate:()=>{m?.(),i.onSelect()}};const _=N[0];return{id:String(_.id),label:O(_),drillsIn:!1,icon:j,onActivate:()=>w(_)}}return{id:t,label:T.toolSourceLabel(t),drillsIn:!0,icon:k.sourceIcon(t)??i?.icon,onActivate:()=>E(t)}})}const e=S.trim().toLowerCase(),o=b.filter(n=>(y(n)?.source??"other")===s).filter(n=>!e||O(n).toLowerCase().includes(e)).map(n=>({id:String(n.id),label:O(n),drillsIn:!1,onActivate:()=>w(n)})),h=B.get(s);if(h){const n=s in $.CONFIG_TOOL_SOURCES;o.push({id:`create:${s}`,label:h.label,drillsIn:!1,isCreate:!n,onActivate:()=>{m?.(),h.onSelect()}})}return o},[d,I,s,S,b,R,q,w,m,v,x,B]);c.useEffect(()=>g(-1),[d,s,S,r]),c.useEffect(()=>D(""),[d,s]);const z=c.useRef({rows:u,activeIndex:L,header:f});z.current={rows:u,activeIndex:L,header:f},c.useEffect(()=>{if(C)return C(e=>{const{rows:o,activeIndex:h,header:n}=z.current;switch(e.key){case"ArrowDown":return o.length&&g(t=>(t+1)%o.length),!0;case"ArrowUp":return o.length&&g(t=>(t+o.length-1)%o.length),!0;case"ArrowRight":case"Enter":return(o[h]??o[0])?.onActivate(),!0;case"ArrowLeft":return n?.onBack?(n.onBack(),!0):!1;default:return!1}}),()=>C(null)},[C]);const G=d?u.length&&!u[0].drillsIn?"items":"sources":"categories",J=d==="tool"&&!!s||d==="subagent";return a.jsxs(H,{className:`bik-mention-picker bik-mention-picker--${G}`,children:[f&&a.jsxs(ae,{type:"button",onClick:f.onBack,disabled:!f.onBack,style:{background:l.COLORS.surface.subdued,cursor:f.onBack?"pointer":"default"},children:[f.onBack&&a.jsx(W.default,{width:20,height:20,color:l.COLORS.content.primary}),f.icon&&k.renderSourceIcon(f.icon),a.jsxs(U.TitleSmall,{children:[" ",f.title]})]}),J&&a.jsxs(ee,{children:[a.jsx(V.default,{width:20,height:20,color:l.COLORS.content.placeholder}),a.jsx(te,{autoFocus:!0,value:S,placeholder:"Search","data-test":"mention-picker-search",onChange:e=>D(e.target.value),onKeyDown:e=>{u.length&&(e.key==="ArrowDown"?(e.preventDefault(),g(o=>(o+1)%u.length)):e.key==="ArrowUp"?(e.preventDefault(),g(o=>(o+u.length-1)%u.length)):e.key==="Enter"&&(e.preventDefault(),(u[L]??u[0])?.onActivate()))}})]}),u.length===0?a.jsx(le,{children:d==="subagent"?null:"No tools available"}):u.map((e,o)=>a.jsx(ne,{type:"button",$active:o===L,onMouseEnter:()=>g(o),onMouseLeave:()=>g(-1),onClick:e.onActivate,children:e.isCreate?a.jsx(ie,{children:e.label}):a.jsxs(a.Fragment,{children:[a.jsxs(oe,{children:[k.renderSourceIcon(e.icon),a.jsx(U.BodySecondary,{color:l.COLORS.content.primary,children:e.label})]}),e.rightLabel?a.jsx(re,{children:e.rightLabel}):e.drillsIn&&a.jsx(Q.default,{width:12,height:12})]})},e.id))]})},H=p.default.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
 	max-height: 301px;
 	overflow-y: auto;
-	background: ${i.COLORS.surface.standard};
-	border: 1px solid ${i.COLORS.stroke.primary};
+	background: ${l.COLORS.surface.standard};
+	border: 1px solid ${l.COLORS.stroke.primary};
 	border-radius: 4px;
 	box-shadow: 0px -2px 8px 0px #0000001f;
-`,Z=p.default.div`
+`,ee=p.default.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 12px;
-	border-bottom: 1px solid ${i.COLORS.stroke.primary};
-`,K=p.default.input`
+	border-bottom: 1px solid ${l.COLORS.stroke.primary};
+`,te=p.default.input`
 	flex: 1;
 	min-width: 0;
 	border: none;
@@ -22,12 +22,12 @@
 	background: transparent;
 	font-family: Inter;
 	font-size: 14px;
-	color: ${i.COLORS.content.primary};
+	color: ${l.COLORS.content.primary};
 
 	&::placeholder {
-		color: ${i.COLORS.content.placeholder};
+		color: ${l.COLORS.content.placeholder};
 	}
-`,H=p.default.button`
+`,ne=p.default.button`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -36,39 +36,39 @@
 	padding: 8px 10px;
 	height: 48px;
 	border: none;
-	border-bottom: 1px solid ${i.COLORS.stroke.primary};
-	background: ${o=>o.$active?i.COLORS.surface.subdued:"transparent"};
+	border-bottom: 1px solid ${l.COLORS.stroke.primary};
+	background: ${r=>r.$active?l.COLORS.surface.subdued:"transparent"};
 	cursor: pointer;
 	text-align: left;
 
 	&:hover {
-		background: ${i.COLORS.surface.subdued};
+		background: ${l.COLORS.surface.hovered};
 	}
-`,ee=p.default.div`
+`,oe=p.default.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
-`,te=p.default.span`
+`,re=p.default.span`
 	flex-shrink: 0;
-	color: ${i.COLORS.content.brand};
+	color: ${l.COLORS.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
 	white-space: nowrap;
-`,ne=p.default.div`
+`,ie=p.default.div`
 	width: 100%;
 	text-align: center;
-	color: ${i.COLORS.content.brand};
+	color: ${l.COLORS.content.brand};
 	font-family: Inter;
 	font-size: 14px;
 	font-weight: 600;
-`,oe=p.default.button`
+`,ae=p.default.button`
 	display: flex;
 	align-items: center;
 	padding: 12px 16px;
 	border: none;
-	border-bottom: 1px solid ${i.COLORS.stroke.primary};
+	border-bottom: 1px solid ${l.COLORS.stroke.primary};
 	background: transparent;
 	cursor: pointer;
 	font-family: Inter;
@@ -76,10 +76,10 @@
 	font-weight: 600;
 	height: 48px;
 	gap: 4px;
-`,re=p.default.div`
+`,le=p.default.div`
 	padding: 12px 10px;
 	font-family: Inter;
 	font-size: 13px;
-	color: ${i.COLORS.content.secondary};
-`;exports.MentionPicker=X;
+	color: ${l.COLORS.content.secondary};
+`;exports.MentionPicker=K;
 //# 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 SvgArrowLeft from '@src/icons/Arrows/Normal arrows/ArrowLeft';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tCATEGORIES,\n\tCONFIG_TOOL_SOURCES,\n\ttoolSourceRank,\n} from '../constants/tools';\nimport type { Category, ToolAction } from '../constants/tools';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, sourceIcon, SourceIcon } from '../utils/sourceIcons';\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\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};\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}) => {\n\tconst [category, setCategory] = useState<Category | null>(null);\n\tconst [source, setSource] = useState<string | null>(initialSource ?? null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\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\n\t\t? {\n\t\t\t\ttitle: toolSourceLabel(source),\n\t\t\t\tonBack: () => setSource(null),\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) {\n\t\t\t// One drill-in row per source: the real sources (from instances) plus any\n\t\t\t// action source (Rest API / email / Slack) with no instances yet, so it\n\t\t\t// still appears for first-time 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\t// Fixed source order (manifest → shopify → rest_api → email → slack →\n\t\t\t// rest) so adding/updating a tool never reshuffles the picker rows.\n\t\t\treturn [...sources, ...actionOnly]\n\t\t\t\t.sort((a, b) => toolSourceRank(a) - toolSourceRank(b))\n\t\t\t\t.map((s) => {\n\t\t\t\t\tconst action = actionBySource.get(s);\n\t\t\t\t\t// Integration not connected → a \"Connect\" row (no drill-in / no\n\t\t\t\t\t// instances / no \"Create new\"); clicking dismisses the picker and\n\t\t\t\t\t// runs the consumer's connect flow.\n\t\t\t\t\tif (action?.connected === false) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: s,\n\t\t\t\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\t\ticon: sourceIcon(s) ?? action.icon,\n\t\t\t\t\t\t\trightLabel: 'Connect',\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.onConnect?.();\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\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: true,\n\t\t\t\t\t\ticon: sourceIcon(s) ?? action?.icon,\n\t\t\t\t\t\tonActivate: () => setSource(s),\n\t\t\t\t\t};\n\t\t\t\t});\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\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]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [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\tr[i]?.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' && !!source) || activeCategory === '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\trows[activeIndex]?.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'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t{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</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</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\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\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\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// 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\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":["metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","initialSource","toolActions","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","toolSourceLabel","sourceIcon","rows","sq","leaves","actionOnly","b","toolSourceRank","action","q","isConfigTool","CONFIG_TOOL_SOURCES","useEffect","navRef","useRef","event","h","p","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","jsx","SvgArrowLeft","renderSourceIcon","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","PickerEmpty","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","RightActionText","ChevronRight","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 SvgArrowLeft from '@src/icons/Arrows/Normal arrows/ArrowLeft';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tCATEGORIES,\n\tCONFIG_TOOL_SOURCES,\n\ttoolSourceRank,\n} from '../constants/tools';\nimport type { Category, ToolAction } from '../constants/tools';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, sourceIcon, SourceIcon } from '../utils/sourceIcons';\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\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};\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}) => {\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\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. In the @-drill flow\n\t\t\t\t// (no initialSource) back returns to the source chooser.\n\t\t\t\tonBack: initialSource ? undefined : () => setSource(null),\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) {\n\t\t\t// One drill-in row per source: the real sources (from instances) plus any\n\t\t\t// action source (Rest API / email / Slack) with no instances yet, so it\n\t\t\t// still appears for first-time 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\t// Fixed source order (manifest → shopify → rest_api → email → slack →\n\t\t\t// rest) so adding/updating a tool never reshuffles the picker rows.\n\t\t\treturn [...sources, ...actionOnly]\n\t\t\t\t.sort((a, b) => toolSourceRank(a) - toolSourceRank(b))\n\t\t\t\t.map((s) => {\n\t\t\t\t\tconst action = actionBySource.get(s);\n\t\t\t\t\t// Integration not connected → a \"Connect\" row (no drill-in / no\n\t\t\t\t\t// instances / no \"Create new\"); clicking dismisses the picker and\n\t\t\t\t\t// runs the consumer's connect flow.\n\t\t\t\t\tif (action?.connected === false) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: s,\n\t\t\t\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\t\ticon: sourceIcon(s) ?? action.icon,\n\t\t\t\t\t\t\trightLabel: 'Connect',\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.onConnect?.();\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\t// A source whose drill-in view would hold exactly one leaf is\n\t\t\t\t\t// pointless to drill into — surface that single leaf right here at\n\t\t\t\t\t// the source level (its function name + the same source icon).\n\t\t\t\t\t// Covers \"no Rest API added yet\" (→ open the create modal directly)\n\t\t\t\t\t// and a config tool's single capability (Slack → \"Send Slack\n\t\t\t\t\t// message\", email → \"Send Email\").\n\t\t\t\t\tconst instances = tools.filter(\n\t\t\t\t\t\t(t) => (metaOf(t)?.source ?? 'other') === s,\n\t\t\t\t\t);\n\t\t\t\t\tif (instances.length + (action ? 1 : 0) === 1) {\n\t\t\t\t\t\tconst icon = sourceIcon(s) ?? action?.icon;\n\t\t\t\t\t\tif (action) {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tid: s,\n\t\t\t\t\t\t\t\tlabel: action.label,\n\t\t\t\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\t\t\t\ticon,\n\t\t\t\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\t\t\t\taction.onSelect();\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\tconst only = instances[0];\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: String(only.id),\n\t\t\t\t\t\t\tlabel: rowLabel(only),\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: () => onSelect(only),\n\t\t\t\t\t\t};\n\t\t\t\t\t}\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: true,\n\t\t\t\t\t\ticon: sourceIcon(s) ?? action?.icon,\n\t\t\t\t\t\tonActivate: () => setSource(s),\n\t\t\t\t\t};\n\t\t\t\t});\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\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]);\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' && !!source) || activeCategory === '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</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</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\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\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// 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\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":["metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","initialSource","toolActions","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","toolSourceLabel","sourceIcon","rows","sq","leaves","actionOnly","b","toolSourceRank","action","instances","icon","only","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","PickerEmpty","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","RightActionText","ChevronRight","styled"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RestApiToolPanel.js","sources":["../../../../../src/components/agent-builder/components/RestApiToolPanel.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { BikEditor } from '@src/editor';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tRestApiHeader,\n\tRestApiMethod,\n\tRestApiToolConfig,\n} from '../AgentBuilder.model';\nimport { FieldBlock } from '../AgentBuilder.styled';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { ToolInstructionsField } from './ToolInstructionsField';\n\ninterface RestApiToolPanelProps {\n\tonClose: () => void;\n\t/** Persist the config. A pending promise shows the Save loader. */\n\tonSave: (config: RestApiToolConfig) => void | Promise<void>;\n\t/** Seed values when editing an existing tool. */\n\tinitial?: RestApiToolConfig;\n\t/** Optional \"Improve with AI\" for the instructions field. Omit to hide it. */\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/** SideModal stacking order — raise it when opened over another drawer. */\n\tzIndex?: number;\n}\n\nconst METHODS: RestApiMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst METHOD_OPTIONS: SingleOption[] = METHODS.map((m) => ({\n\tlabel: m,\n\tvalue: m,\n}));\n\n/**\n * Right-side drawer to configure a \"Rest API\" tool: the endpoint the agent can\n * call, plus a JSON request-body template and a sample response. Mount it fresh\n * per open (key it) so `initial` seeds the state. Built on the shared `SideModal`\n * shell and the BikEditor JSON body mode for the Request / Response editors.\n */\nexport const RestApiToolPanel: React.FC<RestApiToolPanelProps> = ({\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tzIndex,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [url, setUrl] = useState(initial?.url ?? '');\n\tconst [method, setMethod] = useState<RestApiMethod>(\n\t\tinitial?.method ?? 'POST',\n\t);\n\tconst [headers, setHeaders] = useState<RestApiHeader[]>(\n\t\tinitial?.headers ?? [{ key: '', value: '' }],\n\t);\n\tconst [requestBody, setRequestBody] = useState(initial?.requestBody ?? '');\n\tconst [responseSample, setResponseSample] = useState(\n\t\tinitial?.responseSample ?? '',\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\tconst patchHeader = (i: number, patch: Partial<RestApiHeader>) =>\n\t\tsetHeaders((prev) =>\n\t\t\tprev.map((h, idx) => (idx === i ? { ...h, ...patch } : h)),\n\t\t);\n\tconst addHeader = () =>\n\t\tsetHeaders((prev) => [...prev, { key: '', value: '' }]);\n\tconst removeHeader = (i: number) =>\n\t\tsetHeaders((prev) => prev.filter((_, idx) => idx !== i));\n\n\tconst canSave = name.trim().length > 0 && url.trim().length > 0;\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst config: RestApiToolConfig = {\n\t\t\tid: initial?.id ?? `restapi_${Date.now().toString(36)}`,\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\turl: url.trim(),\n\t\t\tmethod,\n\t\t\t// Drop fully-empty header rows.\n\t\t\theaders: headers.filter((h) => h.key.trim() || h.value.trim()),\n\t\t\trequestBody,\n\t\t\tresponseSample,\n\t\t};\n\t\tconst result = onSave(config);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<SideModal\n\t\t\theader=\"Rest API\"\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText\n\t\t\t\t\ttitle=\"Rest API\"\n\t\t\t\t\tsubtitle=\"Connect to any API endpoint. Configure the request, then test it with a sample response.\"\n\t\t\t\t/>\n\t\t\t}\n\t\t\twidth=\"431px\"\n\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\tonClose={onClose}\n\t\t\tsaveButtonProps={{\n\t\t\t\t'data-test': 'restapi-save',\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tdisabled: !canSave,\n\t\t\t\tisLoading: saving,\n\t\t\t\tonClick: handleSave,\n\t\t\t}}\n\t\t\tcancelButtonProps={{\n\t\t\t\t'data-test': 'restapi-cancel',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tdata-test=\"restapi-name\"\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText=\"Name\"\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder=\"Enter name\"\n\t\t\t\tvalue={name}\n\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\tonChangeText={setName}\n\t\t\t/>\n\n\t\t\t<ToolInstructionsField\n\t\t\t\tdata-test=\"restapi-instructions\"\n\t\t\t\tlabel=\"Instructions\"\n\t\t\t\tvalue={instructions}\n\t\t\t\tonChange={setInstructions}\n\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\tplaceholder=\"Describe how should the LLM generate the rest API\"\n\t\t\t\tonImprove={onImprove}\n\t\t\t/>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<Input\n\t\t\t\t\tdata-test=\"restapi-url\"\n\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\tlabelText=\"Request URL\"\n\t\t\t\t\tlabelTextBold\n\t\t\t\t\tplaceholder=\"https://\"\n\t\t\t\t\ttype=\"url\"\n\t\t\t\t\tvalue={url}\n\t\t\t\t\tonChangeText={setUrl}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>HTTP method</TitleSmall>\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"restapi-method\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\toptions={METHOD_OPTIONS}\n\t\t\t\t\tdefaultOptions={[{ label: method, value: method }]}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\tsetMethod(v as RestApiMethod);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Headers</TitleSmall>\n\t\t\t\t{headers.map((h, i) => (\n\t\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\t\t<HeaderRow key={i} data-test={`restapi-header-${i}`}>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Accept\"\n\t\t\t\t\t\t\tvalue={h.key}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { key: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Value\"\n\t\t\t\t\t\t\tvalue={h.value}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { value: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<IconBtn\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Remove header\"\n\t\t\t\t\t\t\tdata-test={`restapi-header-remove-${i}`}\n\t\t\t\t\t\t\tonClick={() => removeHeader(i)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</IconBtn>\n\t\t\t\t\t</HeaderRow>\n\t\t\t\t))}\n\t\t\t\t<AddHeaderRow>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"restapi-add-header\"\n\t\t\t\t\t\tbuttonType=\"dashRegular\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\tbuttonText=\"Add header\"\n\t\t\t\t\t\tonClick={addHeader}\n\t\t\t\t\t/>\n\t\t\t\t</AddHeaderRow>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Request </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tinitialContent={requestBody}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setRequestBody(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Response </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tinitialContent={responseSample}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setResponseSample(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\t\t</SideModal>\n\t);\n};\n\nconst HeaderRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nconst AddHeaderRow = styled.div`\n\tdisplay: flex;\n`;\n\nconst IconBtn = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 32px;\n\theight: 32px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\n\t&:hover {\n\t\tborder-color: ${COLORS.content.secondary};\n\t}\n`;\n\nexport const JsonFieldBox = {\n\tborderRadius: '4px',\n\toverflow: 'hidden',\n};\n"],"names":["METHODS","METHOD_OPTIONS","m","RestApiToolPanel","onClose","onSave","initial","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","name","setName","useState","instructions","setInstructions","url","setUrl","method","setMethod","headers","setHeaders","requestBody","setRequestBody","responseSample","setResponseSample","saving","setSaving","patchHeader","i","patch","prev","h","idx","addHeader","removeHeader","_","canSave","handleSave","config","result","jsxs","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","Input","ToolInstructionsField","FieldBlock","TitleSmall","COLORS","Dropdown","opt","v","unwrapDropdownValue","HeaderRow","IconBtn","DeleteIcon","AddHeaderRow","Button","PlusIcon","BikEditor","JsonFieldBox","c","styled"],"mappings":"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"}
+{"version":3,"file":"RestApiToolPanel.js","sources":["../../../../../src/components/agent-builder/components/RestApiToolPanel.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { BikEditor } from '@src/editor';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tRestApiHeader,\n\tRestApiMethod,\n\tRestApiToolConfig,\n} from '../AgentBuilder.model';\nimport { FieldBlock } from '../AgentBuilder.styled';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { ToolInstructionsField } from './ToolInstructionsField';\n\ninterface RestApiToolPanelProps {\n\tonClose: () => void;\n\t/** Persist the config. A pending promise shows the Save loader. */\n\tonSave: (config: RestApiToolConfig) => void | Promise<void>;\n\t/** Seed values when editing an existing tool. */\n\tinitial?: RestApiToolConfig;\n\t/** Optional \"Improve with AI\" for the instructions field. Omit to hide it. */\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/** SideModal stacking order — raise it when opened over another drawer. */\n\tzIndex?: number;\n\t/** Names of the OTHER tools — a new tool can't reuse one of these. */\n\texistingNames?: string[];\n}\n\nconst METHODS: RestApiMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst METHOD_OPTIONS: SingleOption[] = METHODS.map((m) => ({\n\tlabel: m,\n\tvalue: m,\n}));\n\n/**\n * Right-side drawer to configure a \"Rest API\" tool: the endpoint the agent can\n * call, plus a JSON request-body template and a sample response. Mount it fresh\n * per open (key it) so `initial` seeds the state. Built on the shared `SideModal`\n * shell and the BikEditor JSON body mode for the Request / Response editors.\n */\nexport const RestApiToolPanel: React.FC<RestApiToolPanelProps> = ({\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tzIndex,\n\texistingNames = [],\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\t// New tools start with the scheme pre-filled so the user only types the host.\n\tconst [url, setUrl] = useState(initial?.url ?? 'https://');\n\tconst [method, setMethod] = useState<RestApiMethod>(\n\t\tinitial?.method ?? 'POST',\n\t);\n\tconst [headers, setHeaders] = useState<RestApiHeader[]>(\n\t\tinitial?.headers ?? [{ key: '', value: '' }],\n\t);\n\tconst [requestBody, setRequestBody] = useState(initial?.requestBody ?? '');\n\tconst [responseSample, setResponseSample] = useState(\n\t\tinitial?.responseSample ?? '',\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\tconst patchHeader = (i: number, patch: Partial<RestApiHeader>) =>\n\t\tsetHeaders((prev) =>\n\t\t\tprev.map((h, idx) => (idx === i ? { ...h, ...patch } : h)),\n\t\t);\n\tconst addHeader = () =>\n\t\tsetHeaders((prev) => [...prev, { key: '', value: '' }]);\n\tconst removeHeader = (i: number) =>\n\t\tsetHeaders((prev) => prev.filter((_, idx) => idx !== i));\n\n\tconst nameTrimmed = name.trim();\n\t// Case-insensitive: two tools can't share a name (the LLM references them by it).\n\tconst isDuplicateName =\n\t\tnameTrimmed.length > 0 &&\n\t\texistingNames.some(\n\t\t\t(n) => n.trim().toLowerCase() === nameTrimmed.toLowerCase(),\n\t\t);\n\tconst canSave =\n\t\tnameTrimmed.length > 0 && url.trim().length > 0 && !isDuplicateName;\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst config: RestApiToolConfig = {\n\t\t\tid: initial?.id ?? `restapi_${Date.now().toString(36)}`,\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\turl: url.trim(),\n\t\t\tmethod,\n\t\t\t// Drop fully-empty header rows.\n\t\t\theaders: headers.filter((h) => h.key.trim() || h.value.trim()),\n\t\t\trequestBody,\n\t\t\tresponseSample,\n\t\t};\n\t\tconst result = onSave(config);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<SideModal\n\t\t\theader=\"Rest API\"\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText\n\t\t\t\t\ttitle=\"Rest API\"\n\t\t\t\t\tsubtitle=\"Connect to any API endpoint. Define the request and a sample response for the agent to reference.\"\n\t\t\t\t/>\n\t\t\t}\n\t\t\twidth=\"431px\"\n\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\tonClose={onClose}\n\t\t\tsaveButtonProps={{\n\t\t\t\t'data-test': 'restapi-save',\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tdisabled: !canSave,\n\t\t\t\tisLoading: saving,\n\t\t\t\tonClick: handleSave,\n\t\t\t}}\n\t\t\tcancelButtonProps={{\n\t\t\t\t'data-test': 'restapi-cancel',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tdata-test=\"restapi-name\"\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText=\"Name\"\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder=\"Enter action name\"\n\t\t\t\tvalue={name}\n\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\tstate={isDuplicateName ? 'invalid' : undefined}\n\t\t\t\terrorMessage={\n\t\t\t\t\tisDuplicateName ? 'A tool with this name already exists' : undefined\n\t\t\t\t}\n\t\t\t\tonChangeText={setName}\n\t\t\t/>\n\n\t\t\t<ToolInstructionsField\n\t\t\t\tdata-test=\"restapi-instructions\"\n\t\t\t\tlabel=\"Instructions\"\n\t\t\t\tvalue={instructions}\n\t\t\t\tonChange={setInstructions}\n\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\tplaceholder=\"Describe how should the LLM generate the rest API\"\n\t\t\t\tonImprove={onImprove}\n\t\t\t/>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<Input\n\t\t\t\t\tdata-test=\"restapi-url\"\n\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\tlabelText=\"Request URL\"\n\t\t\t\t\tlabelTextBold\n\t\t\t\t\tplaceholder=\"https://\"\n\t\t\t\t\ttype=\"url\"\n\t\t\t\t\tvalue={url}\n\t\t\t\t\tonChangeText={setUrl}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>HTTP method</TitleSmall>\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"restapi-method\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tdropdownWidth=\"399px\"\n\t\t\t\t\toptions={METHOD_OPTIONS}\n\t\t\t\t\tdefaultOptions={[{ label: method, value: method }]}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\tsetMethod(v as RestApiMethod);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Headers</TitleSmall>\n\t\t\t\t{headers.map((h, i) => (\n\t\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\t\t<HeaderRow key={i} data-test={`restapi-header-${i}`}>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Enter name\"\n\t\t\t\t\t\t\tvalue={h.key}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { key: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Enter value\"\n\t\t\t\t\t\t\tvalue={h.value}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { value: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<IconBtn\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Remove header\"\n\t\t\t\t\t\t\tdata-test={`restapi-header-remove-${i}`}\n\t\t\t\t\t\t\tonClick={() => removeHeader(i)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</IconBtn>\n\t\t\t\t\t</HeaderRow>\n\t\t\t\t))}\n\t\t\t\t<AddHeaderRow>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"restapi-add-header\"\n\t\t\t\t\t\tbuttonType=\"dashRegular\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\tbuttonText=\"Add header\"\n\t\t\t\t\t\tonClick={addHeader}\n\t\t\t\t\t/>\n\t\t\t\t</AddHeaderRow>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Request </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tinitialContent={requestBody}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setRequestBody(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Response </TitleSmall>\n\t\t\t\t<BikEditor\n\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\tinitialContent={responseSample}\n\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\tonChange={(c) => setResponseSample(c.text)}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\t\t</SideModal>\n\t);\n};\n\nconst HeaderRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nconst AddHeaderRow = styled.div`\n\tdisplay: flex;\n`;\n\nconst IconBtn = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 32px;\n\theight: 32px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\n\t&:hover {\n\t\tborder-color: ${COLORS.content.secondary};\n\t}\n`;\n\nexport const JsonFieldBox = {\n\tborderRadius: '4px',\n\toverflow: 'hidden',\n};\n"],"names":["METHODS","METHOD_OPTIONS","m","RestApiToolPanel","onClose","onSave","initial","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","existingNames","name","setName","useState","instructions","setInstructions","url","setUrl","method","setMethod","headers","setHeaders","requestBody","setRequestBody","responseSample","setResponseSample","saving","setSaving","patchHeader","i","patch","prev","h","idx","addHeader","removeHeader","_","nameTrimmed","isDuplicateName","n","canSave","handleSave","config","result","jsxs","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","Input","ToolInstructionsField","FieldBlock","TitleSmall","COLORS","Dropdown","opt","v","unwrapDropdownValue","HeaderRow","IconBtn","DeleteIcon","AddHeaderRow","Button","PlusIcon","BikEditor","JsonFieldBox","c","styled"],"mappings":"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"}

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

@@ -1,15 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),Z=require("../../../assets/icons/delete.svg.js"),G=require("../../../assets/icons/edit.svg.js"),H=require("../../../assets/icons/plus.svg.js"),u=require("react"),T=require("styled-components"),S=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),s=require("../AgentBuilder.styled.js"),C=require("../utils/sourceIcons.js"),ee=require("./MentionPicker.js"),F=require("../../dropdown/Dropdown.js"),N=require("../../dropdown/utils.js"),ne=require("../../button/Button.js"),oe=require("../../states-modal/DeleteConfirmationModal.js"),te=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},k=te(T),V="__bik_create_new__",le=({title:i,helper:L,items:a,addableOptions:y,onAdd:g,onRemove:m,dataTestPrefix:t,emptyText:K,createOption:o,onConfigure:_,sourceGroups:p,mentionItems:B,actionSources:w,confirmDelete:f})=>{const[h,c]=u.useState(!1),[q,b]=u.useState(null),[U,v]=u.useState(null),j=!!p&&p.length>0,$=p?.find(e=>e.source===U),l=B!==void 0,A=u.useRef(null),D=u.useRef(null),[x,I]=u.useState(null);u.useEffect(()=>{if(!l||!h)return;const e=R=>{const z=R.target;!A.current?.contains(z)&&!D.current?.contains(z)&&c(!1)},r=R=>{R.key==="Escape"&&c(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",r),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",r)}},[l,h]);const P=j?l||a.length>0:l||y.length>0||!!o&&a.length>0,J=a.length===0&&!!o&&!j&&!l,E=!!w&&w.length>0,Q=(j||E)&&a.length===0,X=()=>{if(l){I(null),c(e=>!e);return}if(j){v(null),c(e=>!e);return}if(y.length===0&&o){o.onSelect();return}c(e=>!e)},Y=()=>a.map(e=>{const r=e.onConfigure??(_?()=>_(e.id):void 0);return n.jsxs(s.SelectableRow,{"data-test":`${t}-row-${e.id}`,children:[C.renderSourceIcon(e.icon),n.jsx(s.RowText,{children:n.jsx(S.BodySecondary,{numberOfLines:1,color:d.COLORS.content.primary,children:e.label})}),n.jsxs(s.RowActions,{children:[r&&n.jsx(s.RowMenuButton,{"data-test":`${t}-edit-${e.id}`,"aria-label":`Edit ${e.label}`,onClick:r,children:n.jsx(G.default,{width:16,height:16,color:d.COLORS.content.secondary})}),r&&n.jsx(s.RowActionDivider,{"aria-hidden":!0}),n.jsx(s.RowMenuButton,{"data-test":`${t}-delete-${e.id}`,"aria-label":`Delete ${e.label}`,onClick:()=>f?b(e.id):m(e.id),children:n.jsx(Z.default,{width:16,height:16,color:d.COLORS.content.secondary})})]})]},e.id)}),O=o?[...y,{label:o.label,value:V,searchKey:o.label,customComponent:n.jsx("div",{style:{width:"100%",textAlign:"center",color:d.COLORS.content.brand,fontFamily:"Inter",fontSize:14,fontWeight:600},children:o.label})}]:y,M=l?n.jsx(ee.MentionPicker,{items:B??[],query:"",activeIndex:0,initialSource:x??void 0,onSelect:e=>{c(!1),g(String(e.id))},onClose:()=>c(!1),onCreateSubAgent:o?()=>{c(!1),o.onSelect()}:void 0,toolActions:E?w?.map(e=>({...e,onSelect:()=>{c(!1),e.onSelect()}})):void 0},x??"__root__"):null;return n.jsxs(s.SideSection,{children:[n.jsxs(s.SideSectionHeader,{children:[n.jsx(S.TitleSmall,{color:d.COLORS.content.primary,children:i}),P&&n.jsxs(re,{ref:A,children:[n.jsx(s.AddIconButton,{"data-test":`${t}-add`,onClick:X,"aria-label":`Add ${i}`,children:n.jsx(H.default,{width:20,height:20,color:d.COLORS.content.brand})}),l&&h&&x===null&&n.jsx(W,{"data-test":`${t}-picker`,children:M})]})]}),L&&n.jsx(S.BodyCaption,{color:d.COLORS.content.secondary,children:L}),Q?n.jsxs(ce,{ref:l?D:void 0,children:[n.jsxs(s.SourceButtonRow,{"data-test":`${t}-sources`,children:[p?.map(e=>n.jsxs(s.SourceButton,{type:"button","data-test":`${t}-source-${e.source}`,onClick:()=>{if(l){I(e.source),c(!0);return}v(e.source)},children:[C.renderSourceIcon(C.SOURCE_ICONS[e.source],-4),n.jsx(S.BodySecondary,{color:d.COLORS.content.primary,children:e.label})]},e.source)),w?.map(e=>n.jsxs(s.SourceButton,{type:"button","data-test":`${t}-action-${e.source}`,onClick:e.onSelect,children:[C.renderSourceIcon(e.icon,-4),n.jsx(S.BodySecondary,{color:d.COLORS.content.primary,children:e.label})]},e.source))]}),l&&h&&x!==null&&n.jsx(W,{$align:"left","data-test":`${t}-picker`,children:M}),!l&&$&&n.jsx(F.Dropdown,{"data-test":`${t}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Search ${$.label} tools`,options:$.options,onSelect:e=>{const r=N.unwrapDropdownValue(e);v(null),c(!1),r&&g(r)}})]}):n.jsxs(n.Fragment,{children:[!l&&h&&O.length>0&&n.jsx(F.Dropdown,{"data-test":`${t}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Select ${i.toLowerCase()}`,options:O,onSelect:e=>{const r=N.unwrapDropdownValue(e);c(!1),r&&(r===V?o?.onSelect():g(r))}}),a.length===0&&!h?n.jsxs(n.Fragment,{children:[n.jsx(S.BodyCaption,{color:d.COLORS.content.placeholder,children:K}),J&&o&&n.jsx(ne.Button,{"data-test":`${t}-create`,buttonType:"secondary",size:"small",matchParentWidth:!0,LeadingIcon:H.default,buttonText:o.label,onClick:o.onSelect})]}):Y()]}),f&&q&&n.jsx(oe.DeleteConfirmationModal,{"data-test":`${t}-delete-confirm`,header:`Delete this ${f.noun}?`,subHeader:`Deleting this ${f.noun} will also remove it from your instructions, wherever it's referenced.`,confirmationText:"Delete",zIndex:f.zIndex,onDeleteConfirmed:()=>{m(q),b(null)},onCancelClicked:()=>b(null)})]})},re=k.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),oe=require("../../../assets/icons/delete.svg.js"),te=require("../../../assets/icons/edit.svg.js"),W=require("../../../assets/icons/plus.svg.js"),u=require("react"),le=require("styled-components"),p=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),i=require("../AgentBuilder.styled.js"),g=require("../utils/sourceIcons.js"),re=require("./MentionPicker.js"),K=require("../../dropdown/Dropdown.js"),T=require("../../dropdown/utils.js"),ce=require("../../button/Button.js"),se=require("../../states-modal/DeleteConfirmationModal.js"),k=require("../../tooltips/Tooltip.js"),ie=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},m=ie(le),P="__bik_create_new__",de=({title:l,helper:L,items:h,addableOptions:y,onAdd:b,onRemove:_,dataTestPrefix:r,emptyText:J,createOption:t,onConfigure:q,sourceGroups:j,mentionItems:B,actionSources:x,confirmDelete:f,pickerOpensUp:D})=>{const[S,c]=u.useState(!1),[A,$]=u.useState(null),[I,E]=u.useState(null),[Q,v]=u.useState(null),C=!!j&&j.length>0,R=j?.find(e=>e.source===Q),s=B!==void 0,O=u.useRef(null),M=u.useRef(null),[w,z]=u.useState(null);u.useEffect(()=>{if(!s||!S)return;const e=a=>{const V=a.target;!O.current?.contains(V)&&!M.current?.contains(V)&&c(!1)},o=a=>{a.key==="Escape"&&c(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",o),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",o)}},[s,S]);const X=C?s||h.length>0:s||y.length>0||!!t&&h.length>0,Y=h.length===0&&!!t&&!C&&!s,H=!!x&&x.length>0,Z=(C||H)&&h.length===0,G=()=>{if(s){z(null),c(e=>!e);return}if(C){v(null),c(e=>!e);return}if(y.length===0&&t){t.onSelect();return}c(e=>!e)},ee=(e,o)=>{if(I)return;const a=o();a&&typeof a.then=="function"&&(E(e),a.finally(()=>E(null)))},ne=()=>h.map(e=>{const o=e.onConfigure??(q?()=>q(e.id):void 0);return n.jsxs(i.SelectableRow,{"data-test":`${r}-row-${e.id}`,children:[g.renderSourceIcon(e.icon),n.jsx(k.Tooltip,{body:e.label,placement:"top",children:n.jsx(i.RowText,{children:n.jsx(p.BodySecondary,{numberOfLines:1,color:d.COLORS.content.primary,children:e.label})})}),n.jsxs(i.RowActions,{children:[o&&n.jsx(k.Tooltip,{body:"Edit",placement:"top",children:n.jsx(i.RowMenuButton,{"data-test":`${r}-edit-${e.id}`,"aria-label":`Edit ${e.label}`,disabled:I!==null,onClick:()=>ee(e.id,o),children:n.jsx(te.default,{width:16,height:16,color:d.COLORS.content.secondary})})}),o&&n.jsx(i.RowActionDivider,{"aria-hidden":!0}),n.jsx(k.Tooltip,{body:"Delete",placement:"top",children:n.jsx(i.RowMenuButton,{"data-test":`${r}-delete-${e.id}`,"aria-label":`Delete ${e.label}`,onClick:()=>f?$(e.id):_(e.id),children:n.jsx(oe.default,{width:16,height:16,color:d.COLORS.content.secondary})})})]})]},e.id)}),F=t?[...y,{label:t.label,value:P,searchKey:t.label,customComponent:n.jsx("div",{style:{width:"100%",textAlign:"center",color:d.COLORS.content.brand,fontFamily:"Inter",fontSize:14,fontWeight:600},children:t.label})}]:y,N=s?n.jsx(re.MentionPicker,{items:B??[],query:"",activeIndex:0,initialSource:w??void 0,onSelect:e=>{c(!1),b(String(e.id))},onClose:()=>c(!1),onCreateSubAgent:t?()=>{c(!1),t.onSelect()}:void 0,toolActions:H?x?.map(e=>({...e,onSelect:()=>{c(!1),e.onSelect()}})):void 0},w??"__root__"):null;return n.jsxs(i.SideSection,{children:[n.jsxs(i.SideSectionHeader,{children:[n.jsx(p.TitleSmall,{color:d.COLORS.content.primary,children:l}),X&&n.jsxs(ue,{ref:O,children:[n.jsx(i.AddIconButton,{"data-test":`${r}-add`,onClick:G,"aria-label":`Add ${l}`,children:n.jsx(W.default,{width:16,height:16,color:d.COLORS.content.primary})}),s&&S&&w===null&&n.jsx(U,{$up:D,"data-test":`${r}-picker`,children:N})]})]}),L&&n.jsx(p.BodyCaption,{color:d.COLORS.content.secondary,children:L}),Z?n.jsxs(ae,{ref:s?M:void 0,children:[n.jsxs(i.SourceButtonRow,{"data-test":`${r}-sources`,children:[j?.map(e=>n.jsxs(i.SourceButton,{type:"button","data-test":`${r}-source-${e.source}`,onClick:()=>{if(s){z(e.source),c(!0);return}v(e.source)},children:[g.renderSourceIcon(g.SOURCE_ICONS[e.source],-4),n.jsx(p.BodyCaption,{color:d.COLORS.content.primary,children:e.label})]},e.source)),x?.map(e=>n.jsxs(i.SourceButton,{type:"button","data-test":`${r}-action-${e.source}`,onClick:()=>{c(!1),e.onSelect()},children:[g.renderSourceIcon(e.icon,-4),n.jsx(p.BodyCaption,{color:d.COLORS.content.primary,children:e.label})]},e.source))]}),s&&S&&w!==null&&n.jsx(U,{$align:"left",$up:D,"data-test":`${r}-picker`,children:N}),!s&&R&&n.jsx(K.Dropdown,{"data-test":`${r}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Search ${R.label} tools`,options:R.options,onSelect:e=>{const o=T.unwrapDropdownValue(e);v(null),c(!1),o&&b(o)}})]}):n.jsxs(n.Fragment,{children:[!s&&S&&F.length>0&&n.jsx(K.Dropdown,{"data-test":`${r}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Select ${l.toLowerCase()}`,options:F,onSelect:e=>{const o=T.unwrapDropdownValue(e);c(!1),o&&(o===P?t?.onSelect():b(o))}}),h.length===0&&!S?n.jsxs(n.Fragment,{children:[n.jsx(p.BodyCaption,{color:d.COLORS.content.placeholder,children:J}),Y&&t&&n.jsx(ce.Button,{"data-test":`${r}-create`,buttonType:"secondary",size:"small",matchParentWidth:!0,LeadingIcon:W.default,buttonText:t.label,onClick:t.onSelect})]}):ne()]}),f&&A&&n.jsx(se.DeleteConfirmationModal,{"data-test":`${r}-delete-confirm`,header:`Delete this ${f.noun}?`,subHeader:`Deleting this ${f.noun} will also remove it from your instructions, wherever it's referenced.`,confirmationText:"Delete",zIndex:f.zIndex,onDeleteConfirmed:()=>{_(A),$(null)},onCancelClicked:()=>$(null)})]})},ue=m.default.div`
 	position: relative;
 	display: flex;
-`,ce=k.default.div`
+`,ae=m.default.div`
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`,W=k.default.div`
+`,U=m.default.div`
 	position: absolute;
-	top: calc(100% + 4px);
-	${i=>i.$align==="left"?"left: 0;":"right: 0;"}
+	${l=>l.$up?"bottom: calc(100% + 4px);":"top: calc(100% + 4px);"}
+	${l=>l.$align==="left"?"left: 0;":"right: 0;"}
 	z-index: 30;
-`;exports.SelectableListSection=le;
+`;exports.SelectableListSection=de;
 //# sourceMappingURL=SelectableListSection.js.map