npm - @bikdotai/bik-component-library - Versions diffs - 0.0.852 → 0.0.853 - Mend

@bikdotai/bik-component-library 0.0.852 → 0.0.853

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

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

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

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

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

package/dist/cjs/components/agent-builder/components/RequireVerificationModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),r=require("../AgentBuilder.styled.js"),d=require("../../modals/styledModal.js"),c=require("../../../icons/Informational/Common UI/ShieldOutline.js"),o=require("../../button/Button.js"),u=({open:s,toolLabel:l,onCancel:i,onConfirm:a})=>s?e.jsx(d.StyledModal,{"data-test":"agent-require-verification-modal",open:!0,onClose:i,width:"480px",children:e.jsxs(r.ModalBody,{style:{alignItems:"center",textAlign:"center"},children:[e.jsx("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:48,height:48,borderRadius:"50%",background:t.COLORS.background.brandVeryLight},children:e.jsx(c.default,{size:24,color:t.COLORS.content.brand})}),e.jsx(n.TitleMedium,{color:t.COLORS.content.primary,children:"This will change who can use this agent"}),e.jsxs(n.BodyPrimary,{color:t.COLORS.content.secondary,style:{lineHeight:"24px"},children:["‘",l,"’ always requires customer authentication. Customers will be asked to verify their identity before this agent responds, once you go live."]}),e.jsxs(r.ModalActions,{children:[e.jsx("div",{style:{display:"flex"},children:e.jsx(o.Button,{"data-test":"agent-require-verification-cancel",buttonType:"secondary",size:"medium",matchParentWidth:!0,buttonText:"Cancel",onClick:i})}),e.jsx("div",{style:{display:"flex"},children:e.jsx(o.Button,{"data-test":"agent-require-verification-confirm",buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Add tool",onClick:a})})]})]})}):null;exports.RequireVerificationModal=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),n=require("../AgentBuilder.styled.js"),d=require("../../modals/styledModal.js"),c=require("../../../icons/Informational/eCommerce/ShieldCheck.js"),o=require("../../button/Button.js"),u=({open:s,toolLabel:l,onCancel:i,onConfirm:a})=>s?e.jsx(d.StyledModal,{"data-test":"agent-require-verification-modal",open:!0,onClose:i,width:"480px",children:e.jsxs(n.ModalBody,{style:{alignItems:"center",textAlign:"center"},children:[e.jsx("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:64,height:64,borderRadius:"50%",background:t.COLORS.background.brandVeryLight},children:e.jsx(c.default,{size:32,color:t.COLORS.background.inverseLight})}),e.jsx(r.TitleMedium,{color:t.COLORS.content.primary,children:"This will change who can use this agent"}),e.jsxs(r.BodyPrimary,{color:t.COLORS.content.secondary,style:{lineHeight:"24px"},children:["‘",l,"’ always requires customer authentication. Customers will be asked to verify their identity before this agent responds, once you go live."]}),e.jsxs(n.ModalActions,{children:[e.jsx("div",{style:{display:"flex"},children:e.jsx(o.Button,{"data-test":"agent-require-verification-cancel",buttonType:"secondary",size:"medium",matchParentWidth:!0,buttonText:"Cancel",onClick:i})}),e.jsx("div",{style:{display:"flex"},children:e.jsx(o.Button,{"data-test":"agent-require-verification-confirm",buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Add tool",onClick:a})})]})]})}):null;exports.RequireVerificationModal=u;
 //# sourceMappingURL=RequireVerificationModal.js.map

package/dist/cjs/components/agent-builder/components/RequireVerificationModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RequireVerificationModal.js","sources":["../../../../../src/components/agent-builder/components/RequireVerificationModal.tsx"],"sourcesContent":["import { ~~ShieldOutline~~ } 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 { ModalActions, ModalBody } from '../AgentBuilder.styled';\n\ninterface RequireVerificationModalProps {\n\topen: boolean;\n\t/** Name of the tool being added (shown in the copy). /\n\ttoolLabel: string;\n\t/* Dismiss without adding the tool (X / outside click / Cancel). /\n\tonCancel: () => void;\n\t/* Turn on customer verification and add the tool. /\n\tonConfirm: () => void;\n}\n\n/\n Shown when the merchant attaches a tool that touches customer-private data\n * (`auth_required`) while customer verification is off. Verification is mandatory\n * for such tools — confirming (\"Add tool\") turns it on and adds the tool;\n * cancelling skips the add. Centred layout per Figma (node 1165-21717).\n */\nexport const RequireVerificationModal: React.FC<\n\tRequireVerificationModalProps\n> = ({ open, toolLabel, onCancel, onConfirm }) => {\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-require-verification-modal\"\n\t\t\topen\n\t\t\tonClose={onCancel}\n\t\t\twidth=\"480px\"\n\t\t>\n\t\t\t<ModalBody style={{ alignItems: 'center', textAlign: 'center' }}>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\twidth: 48,\n\t\t\t\t\t\theight: 48,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tbackground: COLORS.background.brandVeryLight,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<~~ShieldOutline~~ size={24} color={COLORS.~~content~~.~~brand~~} />\n\t\t\t\t</span>\n\t\t\t\t<TitleMedium color={COLORS.content.primary}>\n\t\t\t\t\tThis will change who can use this agent\n\t\t\t\t</TitleMedium>\n\t\t\t\t<BodyPrimary\n\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\tstyle={{ lineHeight: '24px' }}\n\t\t\t\t>\n\t\t\t\t\t‘{toolLabel}’ always requires customer authentication. Customers will\n\t\t\t\t\tbe asked to verify their identity before this agent responds, once you\n\t\t\t\t\tgo live.\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-require-verification-cancel\"\n\t\t\t\t\t\t\tbuttonType=\"secondary\"\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=\"Cancel\"\n\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-require-verification-confirm\"\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=\"Add tool\"\n\t\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["RequireVerificationModal","open","toolLabel","onCancel","onConfirm","jsx","StyledModal","jsxs","ModalBody","COLORS","~~ShieldOutline~~","TitleMedium","BodyPrimary","ModalActions","Button"],"mappings":"~~6XAwBaA~~,EAET,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,SAAAC,EAAU,UAAAC,KAC5BH,EAKJI,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,mCACV,KAAI,GACJ,QAASH,EACT,MAAM,QAEN,SAAAI,EAAAA,KAACC,aAAU,MAAO,CAAE,WAAY,SAAU,UAAW,UACpD,SAAA,CAAAH,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,MAAO,GACP,OAAQ,GACR,aAAc,MACd,WAAYI,EAAAA,OAAO,WAAW,cAAA,EAG/B,eAACC,EAAAA,QAAA,~~CAAc~~,KAAM,GAAI,MAAOD,EAAAA,OAAO,~~QAAQ~~,~~KAAA~~,~~CAAO~~,CAAA,CAAA,~~QAEtDE~~,EAAAA,YAAA,CAAY,MAAOF,EAAAA,OAAO,QAAQ,QAAS,SAAA,0CAE5C,EACAF,EAAAA,KAACK,EAAAA,YAAA,CACA,MAAOH,EAAAA,OAAO,QAAQ,UACtB,MAAO,CAAE,WAAY,MAAA,EACrB,SAAA,CAAA,IACEP,EAAU,2IAAA,CAAA,CAAA,SAKZW,EAAAA,aAAA,CACA,SAAA,CAAAR,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAA,EAAAA,IAACS,EAAAA,OAAA,CACA,YAAU,oCACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,SACX,QAASX,CAAA,CAAA,EAEX,QACC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAE,EAAAA,IAACS,EAAAA,OAAA,CACA,YAAU,qCACV,WAAW,UACX,KAAK,SACL,iBAAgB,GAChB,WAAW,WACX,QAASV,CAAA,CAAA,CACV,CACD,CAAA,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAAA,EA1DM"}
1	+ {"version":3,"file":"RequireVerificationModal.js","sources":["../../../../../src/components/agent-builder/components/RequireVerificationModal.tsx"],"sourcesContent":["import { ShieldCheck } 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 { ModalActions, ModalBody } from '../AgentBuilder.styled';\n\ninterface RequireVerificationModalProps {\n\topen: boolean;\n\t/** Name of the tool being added (shown in the copy). /\n\ttoolLabel: string;\n\t/* Dismiss without adding the tool (X / outside click / Cancel). /\n\tonCancel: () => void;\n\t/* Turn on customer verification and add the tool. /\n\tonConfirm: () => void;\n}\n\n/\n Shown when the merchant attaches a tool that touches customer-private data\n * (`auth_required`) while customer verification is off. Verification is mandatory\n * for such tools — confirming (\"Add tool\") turns it on and adds the tool;\n * cancelling skips the add. Centred layout per Figma (node 1165-21717).\n */\nexport const RequireVerificationModal: React.FC<\n\tRequireVerificationModalProps\n> = ({ open, toolLabel, onCancel, onConfirm }) => {\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-require-verification-modal\"\n\t\t\topen\n\t\t\tonClose={onCancel}\n\t\t\twidth=\"480px\"\n\t\t>\n\t\t\t<ModalBody style={{ alignItems: 'center', textAlign: 'center' }}>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\twidth: 64,\n\t\t\t\t\t\theight: 64,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tbackground: COLORS.background.brandVeryLight,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ShieldCheck size={32} color={COLORS.background.inverseLight} />\n\t\t\t\t</span>\n\t\t\t\t<TitleMedium color={COLORS.content.primary}>\n\t\t\t\t\tThis will change who can use this agent\n\t\t\t\t</TitleMedium>\n\t\t\t\t<BodyPrimary\n\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\tstyle={{ lineHeight: '24px' }}\n\t\t\t\t>\n\t\t\t\t\t‘{toolLabel}’ always requires customer authentication. Customers will\n\t\t\t\t\tbe asked to verify their identity before this agent responds, once you\n\t\t\t\t\tgo live.\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-require-verification-cancel\"\n\t\t\t\t\t\t\tbuttonType=\"secondary\"\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=\"Cancel\"\n\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-require-verification-confirm\"\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=\"Add tool\"\n\t\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["RequireVerificationModal","open","toolLabel","onCancel","onConfirm","jsx","StyledModal","jsxs","ModalBody","COLORS","ShieldCheck","TitleMedium","BodyPrimary","ModalActions","Button"],"mappings":"2XAwBaA,EAET,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,SAAAC,EAAU,UAAAC,KAC5BH,EAKJI,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,mCACV,KAAI,GACJ,QAASH,EACT,MAAM,QAEN,SAAAI,EAAAA,KAACC,aAAU,MAAO,CAAE,WAAY,SAAU,UAAW,UACpD,SAAA,CAAAH,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,MAAO,GACP,OAAQ,GACR,aAAc,MACd,WAAYI,EAAAA,OAAO,WAAW,cAAA,EAG/B,eAACC,EAAAA,QAAA,CAAY,KAAM,GAAI,MAAOD,EAAAA,OAAO,WAAW,YAAA,CAAc,CAAA,CAAA,QAE9DE,EAAAA,YAAA,CAAY,MAAOF,EAAAA,OAAO,QAAQ,QAAS,SAAA,0CAE5C,EACAF,EAAAA,KAACK,EAAAA,YAAA,CACA,MAAOH,EAAAA,OAAO,QAAQ,UACtB,MAAO,CAAE,WAAY,MAAA,EACrB,SAAA,CAAA,IACEP,EAAU,2IAAA,CAAA,CAAA,SAKZW,EAAAA,aAAA,CACA,SAAA,CAAAR,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAA,EAAAA,IAACS,EAAAA,OAAA,CACA,YAAU,oCACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,SACX,QAASX,CAAA,CAAA,EAEX,QACC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAE,EAAAA,IAACS,EAAAA,OAAA,CACA,YAAU,qCACV,WAAW,UACX,KAAK,SACL,iBAAgB,GAChB,WAAW,WACX,QAASV,CAAA,CAAA,CACV,CACD,CAAA,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAAA,EA1DM"}

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

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

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

	@@ -1 +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\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// A callable endpoint needs an http(s) scheme AND a host — this rejects the\n// pre-filled bare \"https://\" (and any scheme-only / malformed value).\nconst isValidHttpUrl = (value: string): boolean => {\n\ttry {\n\t\tconst parsed = new URL(value);\n\t\treturn (\n\t\t\t(parsed.protocol === 'http:' \|\| parsed.protocol === 'https:') &&\n\t\t\tparsed.hostname.length > 0\n\t\t);\n\t} catch {\n\t\treturn false;\n\t}\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 urlTrimmed = url.trim();\n\t// Save needs a real endpoint, but don't flash the error while the field still\n\t// holds its pristine \"https://\" seed — only once the user has typed past it.\n\tconst isUrlInvalid =\n\t\turlTrimmed.length > 0 &&\n\t\turlTrimmed !== 'https://' &&\n\t\t!isValidHttpUrl(urlTrimmed);\n\tconst canSave =\n\t\tnameTrimmed.length > 0 && isValidHttpUrl(urlTrimmed) && !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\tstate={isUrlInvalid ? 'invalid' : undefined}\n\t\t\t\t\terrorMessage={\n\t\t\t\t\t\tisUrlInvalid ? 'Enter a valid URL (including https://)' : undefined\n\t\t\t\t\t}\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","isValidHttpUrl","value","parsed","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","urlTrimmed","isUrlInvalid","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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"}
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\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// A callable endpoint needs an explicit http(s):// scheme AND a real, dotted\n// host. `new URL` alone is too lenient — it accepts single-label hosts\n// (\"https://abc\"), a one-slash scheme (\"https:/abc.com\"), and dangling-dot\n// hosts (\"https://.com\" / \"https://abc.\"). Require the `://` prefix on the raw\n// value plus a hostname that is either dotted (example.com) or an IPv4.\nconst isValidHttpUrl = (value: string): boolean => {\n\tif (!/^https?:\\/\\//i.test(value)) {\n\t\treturn false;\n\t}\n\tlet host: string;\n\ttry {\n\t\thost = new URL(value).hostname;\n\t} catch {\n\t\treturn false;\n\t}\n\treturn host.includes('.') && !host.startsWith('.') && !host.endsWith('.');\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 urlTrimmed = url.trim();\n\t// Save needs a real endpoint, but don't flash the error while the field still\n\t// holds its pristine \"https://\" seed — only once the user has typed past it.\n\tconst isUrlInvalid =\n\t\turlTrimmed.length > 0 &&\n\t\turlTrimmed !== 'https://' &&\n\t\t!isValidHttpUrl(urlTrimmed);\n\tconst canSave =\n\t\tnameTrimmed.length > 0 && isValidHttpUrl(urlTrimmed) && !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\tstate={isUrlInvalid ? 'invalid' : undefined}\n\t\t\t\t\terrorMessage={\n\t\t\t\t\t\tisUrlInvalid ? 'Enter a valid URL (including https://)' : undefined\n\t\t\t\t\t}\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","isValidHttpUrl","value","host","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","urlTrimmed","isUrlInvalid","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 CHANGED Viewed

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