npm - @bikdotai/bik-component-library - Versions diffs - 0.0.863-beta.6 → 0.0.863 - Mend

@bikdotai/bik-component-library 0.0.863-beta.6 → 0.0.863

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 (78) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import type React from 'react';\nimport styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\n\n// Shared look for the 24×24 transparent icon buttons (add / row-menu / close).\nconst iconActionButton = css`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\tbackground: transparent;\n\t}\n`;\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tflex: 1;\n\tmin-height: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbox-sizing: border-box;\n`;\n\n// Scrollable step body inside the card; the footer stays pinned below it.\nexport const StepScroll = styled.div.attrs({ className: 'bik-step-scroll' })`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n\tbox-shadow: 0px -2px 12px 0px #0000000a;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. /\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/ Dashed connector line between consecutive step badges (centered on the badge). /\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' \| 'complete' \| 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 10px;\n\tfont-weight: 400;\n\tline-height: 12px;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.base};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.surface.standard\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: COLORS.content.secondary};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const SectionBodyWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tpadding: 16px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? BASE_COLORS.brand['800'] : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\tbackground: ${COLORS.surface.subdued};\n\t\tborder-color: ${COLORS.stroke.primary};\n\t}\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\n// Fills the scroll area so the step header + grow-body chain reaches the footer.\nexport const Step3Root = styled.div.attrs({\n\tclassName: 'bik-agent-step bik-agent-step--response',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 100%;\n`;\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })<{\n\t$grow?: boolean;\n}>`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 1px 360px;\n\t/ Single row that fills the grid's height, so the divider spans the full\n\t height (down to the footer) rather than stopping at the taller column. /\n\tgrid-template-rows: 1fr;\n\tflex: 1;\n\tmin-height: 0;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-rows: auto;\n\t}\n\n\t/ Fill the remaining card height so a full-height child (e.g. the Step 3\n\t column divider) can stretch all the way down to the footer. /\n\t${(p) =>\n\t\tp.$grow &&\n\t\tcss`\n\t\t\tflex: 1;\n\t\t\tmin-height: 0;\n\t\t`}\n`;\n\n// Vertical rule between the main column and the side (tools / sub-agents) column;\n// hidden once the grid collapses to a single column.\nexport const Step3Divider = styled.div.attrs({\n\tclassName: 'bik-step3-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tbackground: ${COLORS.stroke.primary};\n\n\t@media (max-width: 1100px) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\t${iconActionButton}\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n`;\n\n// Empty-state tool-source picker (e.g. Manifest / Shopify buttons).\nexport const SourceButtonRow = styled.div.attrs({\n\tclassName: 'bik-source-button-row',\n})`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n`;\n\nexport const SourceButton = styled.button.attrs({\n\tclassName: 'bik-source-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 6px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\theight: 28px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\t/ Fixed 48px rows regardless of the (variably-sized) leading source icon.\n\t box-sizing pins the height across hosts with differing resets; flex-shrink:0\n\t + min-height stop a height-constrained flex column (the merchant side panel)\n\t from squashing the rows — Storybook has room, so it looked fine there. /\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/ Leading icon (e.g. tool source) keeps its size; the label takes the rest. /\n\t& > svg {\n\t\tflex-shrink: 0;\n\t}\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/ Truncate the label to one line with an ellipsis. /\n\t& > {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n`;\n\n/* Label + trailing verification shield on one row. /\nexport const RowLabel = styled.div.attrs({ className: 'bik-row-label' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmin-width: 0;\n\tflex: 1;\n\n\t/ Shrink the label to its text so the shield sits just after it, rather than\n\t RowText's default flex: 1 filling the row and pushing the shield to the end. /\n\t& .bik-row-text {\n\t\tflex: 0 1 auto;\n\t}\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Per-row actions (always-visible edit / delete icon buttons) ───────────────\n\nexport const RowActions = styled.div.attrs({ className: 'bik-row-actions' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n`;\n\n// Vertical separator between the edit and delete icon buttons.\nexport const RowActionDivider = styled.span.attrs({\n\tclassName: 'bik-row-action-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tmargin: 4px 0;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\t${iconActionButton}\n`;\n\nexport const DraftButtonScope = styled.div.attrs({\n\tclassName: 'bik-draft-button-scope',\n})`\n\tdisplay: flex;\n\tflex: 1;\n\n\tbutton {\n\t\tborder-color: ${BASE_COLORS.brand['800']};\n\t}\n\tbutton .text {\n\t\tcolor: ${BASE_COLORS.brand['800']};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\n/\n The go-live SUCCESS dialog's natural height, which every state of\n * `AgentStateModal` is pinned to so the card doesn't resize as a publish moves\n * loading → error, or loading → success (a different dialog at the same size).\n \n 24 + 24 padding + 64 icon + 8 gap + 28 title (TitleMedium 20/28) + 8 gap\n * + 48 body (BodyPrimary 16/24, two lines at this width) + 24 gap\n * + 40 action row (medium Button: 10px padding + 20px line-height) = 268.\n \n Deliberately NOT on `ModalBody`: DiscardModal and RequireVerificationModal share\n * it and are not part of this sequence.\n /\nexport const AGENT_STATE_MODAL_MIN_HEIGHT = 268;\n\n/* `ModalBody` pinned to the height above. The body itself is NOT centred — that\n * floats the action row in the middle of the card. The hero takes the slack instead\n * (see `AgentStateModalHero`), so the actions stay at the bottom, above the body's\n * own 24px padding. /\nexport const AgentStateModalBody = styled(ModalBody)`\n\tmin-height: ${AGENT_STATE_MODAL_MIN_HEIGHT}px;\n`;\n\n/* Badge + title + message. Grows into whatever height the pinned card has spare and\n * centres itself there, which is what keeps the actions pinned to the bottom. /\nexport const AgentStateModalHero = styled.div`\n\tflex: 1;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n\t/ Every action shares the row equally. Each action MUST be its own flex\n\t wrapper (a plain <div style=\"display:flex\">, or DraftButtonScope) rather\n\t than a bare Button: on hover the Button relocates its padding into an\n\t inner container, and as the flex item itself that changes its resolved\n\t width — the button visibly grows/shrinks. Wrapped, the div is the sized\n\t track (flex:1) and the Button grows to fill it, absorbing the padding\n\t move so the width stays put. /\n\t> {\n\t\tflex: 1;\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). /\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step 1 \"Channels to activate it on\" ────────────────────────────────\n\nexport const ChannelsSectionRoot = styled.div.attrs({\n\tclassName: 'bik-channels-section',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\n/* \"Channel management\" / \"Smart agent handover\" — a text link, not a Button. /\nexport const ChannelsLink = styled.button.attrs({\n\tclassName: 'bik-channels-link',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tcolor: ${COLORS.background.inverseLight};\n\tfont-size: 12px;\n\tline-height: 16px;\n\tfont-weight: 400;\n\twhite-space: nowrap;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t}\n`;\n\n/* One channel's card. /\nexport const ChannelCard = styled.div.attrs({\n\tclassName: 'bik-channel-card',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\twidth: 100%;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\toverflow: hidden;\n`;\n\nexport const ChannelRow = styled.div.attrs({ className: 'bik-channel-row' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 12px;\n\twidth: 100%;\n\t/ 12 + 24 + 12 — every child is pinned to the 24px band so the row can't\n\t drift taller than the design's 48px. /\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n`;\n\nexport const ChannelRowMain = styled.div.attrs({\n\tclassName: 'bik-channel-row-main',\n})`\n\tdisplay: flex;\n\tflex: 1 0 0;\n\tmin-width: 0;\n\talign-items: center;\n\tgap: 8px;\n\theight: 24px;\n`;\n\n/* Label + glyph. Fixed-width so every card's chips start on the same column. /\nexport const ChannelIdentity = styled.div.attrs({\n\tclassName: 'bik-channel-identity',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex: 1 0 0;\n\tmin-width: 0;\n`;\n\n/* Tinted 24×24 square holding the 16px brand glyph. /\nexport const ChannelGlyph = styled.div.attrs({\n\tclassName: 'bik-channel-glyph',\n})<{ tint: string }>`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 4.8px;\n\tbackground: ${(props) => props.tint};\n\toverflow: hidden;\n`;\n\n/* The account chips. Wraps rather than overflowing when a store has many. /\nexport const ChannelChips = styled.div.attrs({\n\tclassName: 'bik-channel-chips',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n\n\t/ Figma's tag-regular is 24px tall, but Tag's \"regular\" variant floors at\n\t 26px — which pushes the 48px row to 50px. Pin the wrapper back to 24\n\t (Tag's own \\`height\\` prop only reaches its inner container). The second\n\t selector catches a Tag sitting inside a ChipTooltipTarget. /\n\t> ,\n\t> span > * {\n\t\tmin-height: 24px;\n\t}\n`;\n\n/*\n Hover target for a chip's tooltip.\n \n Tippy attaches a ref to its child to use as the trigger, but `Tag` is a plain\n * function component with no `forwardRef` — so wrapping a Tag directly gives\n * Tippy no DOM node and the tooltip silently never opens. This span is the node\n * it can hold on to. (`IconButton` wraps its disabled tooltip the same way.)\n /\nexport const ChipTooltipTarget = styled.span.attrs({\n\tclassName: 'bik-chip-tooltip-target',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n`;\n\n/* Scrollable account list inside the picker modal. /\nexport const ChannelPickerList = styled.div.attrs({\n\tclassName: 'bik-channel-picker-list',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\twidth: 100%;\n\tmax-height: 280px;\n\toverflow-y: auto;\n`;\n\nexport const ChannelPickerRow = styled.div.attrs({\n\tclassName: 'bik-channel-picker-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\twidth: 100%;\n\tpadding: 4px;\n\tborder-radius: 4px;\n\tbox-sizing: border-box;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n/\n Glyph + account name inside a picker row. Figma wraps these in their own\n * `px-4` group, so the checkbox sits 12px from the glyph but the glyph sits 8px\n * from the label.\n /\nexport const ChannelPickerAccount = styled.div.attrs({\n\tclassName: 'bik-channel-picker-account',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmin-width: 0;\n\theight: 32px;\n\tpadding: 0 4px;\n`;\n\nexport const ChannelPickerBody = styled.div.attrs({\n\tclassName: 'bik-channel-picker-body',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\twidth: 100%;\n\t/ Figma indents the body 8px inside the modal's own 24px gutter, so the list\n\t sits at 32px while the title stays at 24px. StyledModal's body has no\n\t gutter of its own, so both live here. /\n\tpadding: 0 32px;\n\tbox-sizing: border-box;\n`;\n\n/\n Figma reserves a 24×24 slot for a checkbox (an 18px box inset by 3px), but the\n * library's CheckBox renders the bare 18px box. Without this the checkbox column\n * — and everything after it — sits 3px tight against the design. Passed as\n * CheckBox's `style`, which lands on its container.\n */\nexport const CHECKBOX_SLOT: React.CSSProperties = {\n\twidth: 24,\n\theight: 24,\n\tjustifyContent: 'center',\n};\n"],"names":["iconActionButton","css","COLORS","BuilderRoot","styled","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","StepScroll","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","SectionBodyWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","BASE_COLORS","RadioCardText","ChipWrap","Step3Root","Step3Grid","Step3Divider","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowLabel","RowActions","RowActionDivider","RowMenuButton","DraftButtonScope","ModalBody","ModalIcon","AGENT_STATE_MODAL_MIN_HEIGHT","AgentStateModalBody","AgentStateModalHero","ModalActions","ChannelsSectionRoot","ChannelsLink","ChannelCard","ChannelRow","ChannelRowMain","ChannelIdentity","ChannelGlyph","props","ChannelChips","ChipTooltipTarget","ChannelPickerList","ChannelPickerRow","ChannelPickerAccount","ChannelPickerBody","CHECKBOX_SLOT"],"mappings":"0NAKMA,EAAmBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,gBAaTC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzBC,EAAcC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAM9DF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBG,EAASD,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMvCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAIpCI,EAAaF,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA,EAM/DG,EAAaH,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAa9DF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIzBM,EAAOJ,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,WAAY;AAAA;AAAA;AAAA;AAAA,EAMjDK,EAAOL,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,WAAY;AAAA;AAAA;AAAA,2BAGnCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,eAGjCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBQ,EAAUN,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQrDF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBS,EAAcP,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMxDF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAM7BU,EAAaR,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DS,EAAST,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMzCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAKjCY,EAAaV,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DW,EAAgBX,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,oBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQYY,EAAWZ,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA,EAK1Da,EAAWb,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkC7Dc,EAAYd,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAczDe,GACdA,EAAE,QAAU,WACTjB,EAAAA,OAAO,WAAW,aAClBiB,EAAE,QAAU,SACZjB,SAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,IAAI;AAAA,UAChBiB,GACTA,EAAE,QAAU,WACTjB,EAAAA,OAAO,QAAQ,SACfiB,EAAE,QAAU,SACZjB,SAAO,WAAW,aAClBA,EAAAA,OAAO,QAAQ,SAAS;AAAA,EAKhBkB,EAAoBhB,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAK2BF,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGpCmB,EAAkBjB,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAOYkB,EAAalB,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DmB,EAAgBnB,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQYoB,EAAkBpB,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,IAOIe,GAAOA,EAAE,QAAUjB,EAAAA,OAAO,OAAO,MAAQA,EAAAA,OAAO,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA,eAIpDiB,GAAMA,EAAE,WAAa,OAAO;AAAA,eAC7BjB,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBuB,EAAkBrB,EAAAA,QAAO,SAAS,MAAM,CACpD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQSF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKrBA,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA,EAMxBwB,EAAUtB,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,eAAgB;AAAA;AAAA;AAAA,EAKxDuB,EAAYvB,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASvEe,GAAOA,EAAE,SAAWS,EAAAA,YAAY,MAAM,GAAK,EAAI1B,EAAAA,OAAO,OAAO,OAAQ;AAAA,eAC1DiB,GACdA,EAAE,SAAWjB,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQrDA,EAAAA,OAAO,QAAQ,OAAO;AAAA,kBACpBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAI1B2B,EAAgBzB,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQY0B,EAAW1B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAO1CA,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKqBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EASpC,MAAM6B,EAAY3B,EAAAA,QAAO,IAAI,MAAM,CACzC,UAAW,yCACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMY4B,EAAY5B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkBrEe,GACFA,EAAE,OACFlB,EAAAA;AAAAA;AAAAA;AAAAA,GAGC;AAAA,EAKUgC,EAAe7B,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA,eAGcF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvBgC,EAAc9B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA,EAMhE+B,EAAoB/B,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMYgC,EAAgBhC,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA,GACEJ,CAAgB;AAAA,eACJE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA,EAI7BmC,EAAkBjC,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,uBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMYkC,EAAelC,EAAAA,QAAO,OAAO,MAAM,CAC/C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKoBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,eAE3BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIzBqC,EAAgBnC,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,oBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAYoBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW7BsC,EAAUpC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAexDqC,EAAWrC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcxCA,EAAAA,QAAO,OAAO,MAAM,CAClD,UAAW,uBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYM,MAAMsC,EAAatC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ9DuC,EAAmBvC,EAAAA,QAAO,KAAK,MAAM,CACjD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,eAIcF,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGvB0C,EAAgBxC,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA,GACEJ,CAAgB;AAAA,EAGN6C,EAAmBzC,EAAAA,QAAO,IAAI,MAAM,CAChD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKiBwB,EAAAA,YAAY,MAAM,GAAK,CAAC;AAAA;AAAA;AAAA,WAG/BA,EAAAA,YAAY,MAAM,GAAK,CAAC;AAAA;AAAA,EAMtBkB,EAAY1C,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS5D2C,EAAY3C,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA,EAkB5D4C,EAA+B,IAM/BC,EAAsB7C,EAAAA,QAAO0C,CAAS;AAAA,eACpCE,CAA4B;AAAA,EAK9BE,EAAsB9C,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU7B+C,EAAe/C,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB6BA,EAAAA,QAAO,IAAI,MAAM,CAC9C,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQM,MAAMgD,EAAsBhD,EAAAA,QAAO,IAAI,MAAM,CACnD,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAOYiD,EAAejD,EAAAA,QAAO,OAAO,MAAM,CAC/C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQSF,EAAAA,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY3BoD,GAAclD,EAAAA,QAAO,IAAI,MAAM,CAC3C,UAAW,kBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKcF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAK7BqD,GAAanD,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY9DoD,GAAiBpD,EAAAA,QAAO,IAAI,MAAM,CAC9C,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUYqD,GAAkBrD,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASYsD,GAAetD,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQeuD,GAAUA,EAAM,IAAI;AAAA;AAAA,EAKvBC,GAAexD,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBYyD,GAAoBzD,EAAAA,QAAO,KAAK,MAAM,CAClD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA,EAMY0D,GAAoB1D,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASY2D,GAAmB3D,EAAAA,QAAO,IAAI,MAAM,CAChD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAUeF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EASzB8D,GAAuB5D,EAAAA,QAAO,IAAI,MAAM,CACpD,UAAW,4BACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASY6D,GAAoB7D,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBY8D,GAAqC,CACjD,MAAO,GACP,OAAQ,GACR,eAAgB,QACjB"}
1	+ {"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\n\n// Shared look for the 24×24 transparent icon buttons (add / row-menu / close).\nconst iconActionButton = css`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\tbackground: transparent;\n\t}\n`;\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tflex: 1;\n\tmin-height: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbox-sizing: border-box;\n`;\n\n// Scrollable step body inside the card; the footer stays pinned below it.\nexport const StepScroll = styled.div.attrs({ className: 'bik-step-scroll' })`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n\tbox-shadow: 0px -2px 12px 0px #0000000a;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. /\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/ Dashed connector line between consecutive step badges (centered on the badge). /\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' \| 'complete' \| 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 10px;\n\tfont-weight: 400;\n\tline-height: 12px;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.base};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.surface.standard\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: COLORS.content.secondary};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const SectionBodyWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tpadding: 16px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? BASE_COLORS.brand['800'] : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\n// Fills the scroll area so the step header + grow-body chain reaches the footer.\nexport const Step3Root = styled.div.attrs({\n\tclassName: 'bik-agent-step bik-agent-step--response',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 100%;\n`;\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })<{\n\t$grow?: boolean;\n}>`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 1px 360px;\n\t/ Single row that fills the grid's height, so the divider spans the full\n\t height (down to the footer) rather than stopping at the taller column. /\n\tgrid-template-rows: 1fr;\n\tflex: 1;\n\tmin-height: 0;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-rows: auto;\n\t}\n\n\t/ Fill the remaining card height so a full-height child (e.g. the Step 3\n\t column divider) can stretch all the way down to the footer. /\n\t${(p) =>\n\t\tp.$grow &&\n\t\tcss`\n\t\t\tflex: 1;\n\t\t\tmin-height: 0;\n\t\t`}\n`;\n\n// Vertical rule between the main column and the side (tools / sub-agents) column;\n// hidden once the grid collapses to a single column.\nexport const Step3Divider = styled.div.attrs({\n\tclassName: 'bik-step3-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tbackground: ${COLORS.stroke.primary};\n\n\t@media (max-width: 1100px) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\t${iconActionButton}\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n`;\n\n// Empty-state tool-source picker (e.g. Manifest / Shopify buttons).\nexport const SourceButtonRow = styled.div.attrs({\n\tclassName: 'bik-source-button-row',\n})`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n`;\n\nexport const SourceButton = styled.button.attrs({\n\tclassName: 'bik-source-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 6px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\theight: 28px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\t/ Fixed 48px rows regardless of the (variably-sized) leading source icon.\n\t box-sizing pins the height across hosts with differing resets; flex-shrink:0\n\t + min-height stop a height-constrained flex column (the merchant side panel)\n\t from squashing the rows — Storybook has room, so it looked fine there. /\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/ Leading icon (e.g. tool source) keeps its size; the label takes the rest. /\n\t& > svg {\n\t\tflex-shrink: 0;\n\t}\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/ Truncate the label to one line with an ellipsis. /\n\t& > {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n`;\n\n/* Label + trailing verification shield on one row. /\nexport const RowLabel = styled.div.attrs({ className: 'bik-row-label' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmin-width: 0;\n\tflex: 1;\n\n\t/ Shrink the label to its text so the shield sits just after it, rather than\n\t RowText's default flex: 1 filling the row and pushing the shield to the end. /\n\t& .bik-row-text {\n\t\tflex: 0 1 auto;\n\t}\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Per-row actions (always-visible edit / delete icon buttons) ───────────────\n\nexport const RowActions = styled.div.attrs({ className: 'bik-row-actions' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n`;\n\n// Vertical separator between the edit and delete icon buttons.\nexport const RowActionDivider = styled.span.attrs({\n\tclassName: 'bik-row-action-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tmargin: 4px 0;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\t${iconActionButton}\n`;\n\nexport const DraftButtonScope = styled.div.attrs({\n\tclassName: 'bik-draft-button-scope',\n})`\n\tdisplay: flex;\n\tflex: 1;\n\n\tbutton {\n\t\tborder-color: ${BASE_COLORS.brand['800']};\n\t}\n\tbutton .text {\n\t\tcolor: ${BASE_COLORS.brand['800']};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n\t/ Every action shares the row equally. Each action MUST be its own flex\n\t wrapper (a plain <div style=\"display:flex\">, or DraftButtonScope) rather\n\t than a bare Button: on hover the Button relocates its padding into an\n\t inner container, and as the flex item itself that changes its resolved\n\t width — the button visibly grows/shrinks. Wrapped, the div is the sized\n\t track (flex:1) and the Button grows to fill it, absorbing the padding\n\t move so the width stays put. /\n\t> {\n\t\tflex: 1;\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n"],"names":["iconActionButton","css","COLORS","BuilderRoot","styled","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","StepScroll","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","SectionBodyWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","BASE_COLORS","RadioCardText","ChipWrap","Step3Root","Step3Grid","Step3Divider","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowLabel","RowActions","RowActionDivider","RowMenuButton","DraftButtonScope","ModalBody","ModalIcon","ModalActions"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),te=require("../../../assets/icons/chevronRight.svg.js"),re=require("../../../assets/icons/searchIcon.svg.js"),ne=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),d=require("react"),oe=require("styled-components"),z=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),ie=require("../../variable-picker-v3/model.js"),i=require("../constants/tools.js"),D=require("../utils/mentionSerialization.js"),y=require("../utils/sourceIcons.js"),le=require("../../../icons/Informational/Identity/PuzzlePiece.js"),ae=require("../../variable-picker-v3/VariablePicker.js"),Q=require("../../../icons/Informational/Common UI/Shield.js"),ce=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},f=ce(oe),W={Icon:le.default,w:20,h:20},k=o=>o.meta,E=o=>k(o)?.plainLabel??o.label,se="__bik_create_subagent__",ue=({items:o,onSelect:L,registerKeyHandler:C,onClose:m,onCreateSubAgent:I,initialSource:Y,toolActions:S,integrationStatus:K,onConnectIntegration:V,variablesData:$,onSelectVariable:B})=>{const[X,T]=d.useState(null),[c,v]=d.useState(Y??null),[_,R]=d.useState(-1),[w,F]=d.useState(""),O=d.useMemo(()=>o.filter(e=>k(e)?.kind==="tool"),[o]),A=d.useMemo(()=>o.filter(e=>k(e)?.kind==="subagent"),[o]),P=d.useMemo(()=>{const e=[];return O.forEach(l=>{const b=k(l)?.source??"other";e.includes(b)||e.push(b)}),e},[O]),G=d.useMemo(()=>new Map((S??[]).map(e=>[e.source,e])),[S]),M=d.useMemo(()=>i.CATEGORIES.filter(e=>e.key==="tool"?O.length>0||(S?.length??0)>0:e.key==="variable"?($?.length??0)>0&&!!B:A.length>0||!!I),[O.length,A.length,I,S?.length,$?.length,B]),N=M.length===1?M[0].key:null,u=X??N,p=u?u==="subagent"?{title:"Sub-agent",onBack:N?void 0:()=>T(null)}:u==="variable"?{title:"Variables",onBack:N?void 0:()=>T(null)}:c===i.MORE_INTEGRATIONS_KEY?{title:i.MORE_INTEGRATIONS_LABEL,onBack:()=>v(null),icon:W}:c?{title:D.toolSourceLabel(c),onBack:Y?void 0:()=>v(i.isMoreIntegrationSource(c)?i.MORE_INTEGRATIONS_KEY:null),icon:y.sourceIcon(c)}:{title:"Tools",onBack:N?void 0:()=>T(null)}:null,h=d.useMemo(()=>{if(!u)return M.map(n=>({id:n.key,label:n.label,drillsIn:!0,onActivate:()=>{T(n.key),v(null)}}));if(u==="subagent"){const n=w.trim().toLowerCase(),g=A.filter(x=>!n||E(x).toLowerCase().includes(n)).map(x=>({id:String(x.id),label:E(x),drillsIn:!1,onActivate:()=>L(x)}));return I&&g.push({id:se,label:"Create new",drillsIn:!1,isCreate:!0,onActivate:()=>{m?.(),I()}}),g}if(u==="variable")return[];if(!c||c===i.MORE_INTEGRATIONS_KEY){const n=(S??[]).map(t=>t.source).filter(t=>!P.includes(t)),g=[...P,...n],x=t=>{const s=G.get(t);if((s!==void 0?s.connected:K?.[t])===!1)return{id:t,label:D.toolSourceLabel(t),drillsIn:!1,icon:y.sourceIcon(t)??s?.icon,rightLabel:"Connect",onActivate:()=>{m?.(),s?.onConnect?s.onConnect():V?.(t)}};const J=O.filter(j=>(k(j)?.source??"other")===t);if(J.length+(s?1:0)===1&&!(s===void 0&&i.isIntegrationSource(t))){const j=y.sourceIcon(t)??s?.icon;if(s)return{id:t,label:s.label,drillsIn:!1,icon:j,onActivate:()=>{m?.(),s.onSelect()}};const q=J[0];return{id:String(q.id),label:E(q),drillsIn:!1,icon:j,authRequired:k(q)?.authRequired,onActivate:()=>L(q)}}return{id:t,label:D.toolSourceLabel(t),drillsIn:!0,icon:y.sourceIcon(t)??s?.icon,onActivate:()=>v(t)}};if(c===i.MORE_INTEGRATIONS_KEY)return g.filter(t=>i.isMoreIntegrationSource(t)).sort((t,s)=>i.toolSourceRank(t)-i.toolSourceRank(s)).map(x);const H=g.filter(t=>!i.isMoreIntegrationSource(t)).map(t=>({row:x(t),rank:i.toolSourceRank(t)}));return g.some(t=>i.isMoreIntegrationSource(t))&&H.push({rank:i.MORE_INTEGRATIONS_RANK,row:{id:i.MORE_INTEGRATIONS_KEY,label:i.MORE_INTEGRATIONS_LABEL,drillsIn:!0,icon:W,onActivate:()=>v(i.MORE_INTEGRATIONS_KEY)}}),H.sort((t,s)=>t.rank-s.rank).map(t=>t.row)}const e=w.trim().toLowerCase(),l=O.filter(n=>(k(n)?.source??"other")===c).filter(n=>!e||E(n).toLowerCase().includes(e)).map(n=>({id:String(n.id),label:E(n),drillsIn:!1,authRequired:k(n)?.authRequired,onActivate:()=>L(n)})),b=G.get(c);if(b){const n=c in i.CONFIG_TOOL_SOURCES;l.push({id:`create:${c}`,label:b.label,drillsIn:!1,isCreate:!n,onActivate:()=>{m?.(),b.onSelect()}})}return l},[u,M,c,w,O,A,P,L,m,I,S,G,K,V]);d.useEffect(()=>R(-1),[u,c,w,o]),d.useEffect(()=>F(""),[u,c]);const U=d.useRef({rows:h,activeIndex:_,header:p});U.current={rows:h,activeIndex:_,header:p},d.useEffect(()=>{if(C)return C(e=>{const{rows:l,activeIndex:b,header:n}=U.current;if(!l.length&&e.key!=="ArrowLeft")return!1;switch(e.key){case"ArrowDown":return R(g=>(g+1)%l.length),!0;case"ArrowUp":return R(g=>(g+l.length-1)%l.length),!0;case"ArrowRight":case"Enter":return(l[b]??l[0])?.onActivate(),!0;case"ArrowLeft":return n?.onBack?(n.onBack(),!0):!1;default:return!1}}),()=>C(null)},[C]);const Z=u?h.length&&!h[0].drillsIn?"items":"sources":"categories",ee=u==="tool"&&!!c&&c!==i.MORE_INTEGRATIONS_KEY||u==="subagent";return r.jsxs(de,{className:`bik-mention-picker bik-mention-picker--${Z}`,$fixedHeight:u==="variable",children:[p&&r.jsxs(me,{type:"button",onClick:p.onBack,disabled:!p.onBack,style:{background:a.COLORS.surface.subdued,cursor:p.onBack?"pointer":"default"},children:[p.onBack&&r.jsx(ne.default,{width:20,height:20,color:a.COLORS.content.primary}),p.icon&&y.renderSourceIcon(p.icon),r.jsxs(z.TitleSmall,{children:[" ",p.title]})]}),ee&&r.jsxs(pe,{children:[r.jsx(re.default,{width:20,height:20,color:a.COLORS.content.placeholder}),r.jsx(ge,{autoFocus:!0,value:w,placeholder:"Search","data-test":"mention-picker-search",onChange:e=>F(e.target.value),onKeyDown:e=>{h.length&&(e.key==="ArrowDown"?(e.preventDefault(),R(l=>(l+1)%h.length)):e.key==="ArrowUp"?(e.preventDefault(),R(l=>(l+h.length-1)%h.length)):e.key==="Enter"&&(e.preventDefault(),(h[_]??h[0])?.onActivate()))}})]}),u==="variable"?r.jsx(fe,{children:r.jsx(ae.VariablePicker,{type:ie.PickerType.EMBEDDED,data:$??[],showRecommendedBar:!0,skipDefaultVariableContent:!0,onSelect:e=>{m?.(),B?.(e)}})}):h.length===0?r.jsx(Se,{children:u==="subagent"?null:"No tools available"}):r.jsx(he,{children:h.map((e,l)=>r.jsx(be,{type:"button",$active:l===_,onMouseEnter:()=>R(l),onMouseLeave:()=>R(-1),onClick:e.onActivate,children:e.isCreate?r.jsx(Oe,{children:e.label}):r.jsxs(r.Fragment,{children:[r.jsxs(xe,{children:[y.renderSourceIcon(e.icon),r.jsx(z.BodySecondary,{color:a.COLORS.content.primary,children:e.label}),e.authRequired&&r.jsx(Q.default,{size:14,"aria-label":"Requires customer verification"})]}),e.rightLabel?r.jsx(Re,{children:e.rightLabel}):e.drillsIn&&r.jsx(te.default,{width:12,height:12})]})},e.id))}),h.some(e=>e.authRequired)&&r.jsxs(ke,{children:[r.jsx(Q.default,{size:16}),r.jsx(z.BodyCaption,{color:a.COLORS.content.secondary,children:"Requires customer verification"})]})]})},de=f.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),te=require("../../../assets/icons/chevronRight.svg.js"),re=require("../../../assets/icons/searchIcon.svg.js"),ne=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),d=require("react"),oe=require("styled-components"),z=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),ie=require("../../variable-picker-v3/model.js"),i=require("../constants/tools.js"),D=require("../utils/mentionSerialization.js"),y=require("../utils/sourceIcons.js"),le=require("../../../icons/Informational/Identity/PuzzlePiece.js"),ae=require("../../variable-picker-v3/VariablePicker.js"),Q=require("../../../icons/Informational/Common UI/Shield.js"),ce=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},f=ce(oe),W={Icon:le.default,w:20,h:20},k=o=>o.meta,E=o=>k(o)?.plainLabel??o.label,se="__bik_create_subagent__",ue=({items:o,onSelect:L,registerKeyHandler:C,onClose:m,onCreateSubAgent:I,initialSource:Y,toolActions:S,integrationStatus:K,onConnectIntegration:V,variablesData:$,onSelectVariable:B})=>{const[X,T]=d.useState(null),[c,v]=d.useState(Y??null),[_,R]=d.useState(-1),[w,F]=d.useState(""),O=d.useMemo(()=>o.filter(e=>k(e)?.kind==="tool"),[o]),A=d.useMemo(()=>o.filter(e=>k(e)?.kind==="subagent"),[o]),P=d.useMemo(()=>{const e=[];return O.forEach(l=>{const b=k(l)?.source??"other";e.includes(b)||e.push(b)}),e},[O]),G=d.useMemo(()=>new Map((S??[]).map(e=>[e.source,e])),[S]),M=d.useMemo(()=>i.CATEGORIES.filter(e=>e.key==="tool"?O.length>0||(S?.length??0)>0:e.key==="variable"?($?.length??0)>0&&!!B:A.length>0||!!I),[O.length,A.length,I,S?.length,$?.length,B]),N=M.length===1?M[0].key:null,u=X??N,p=u?u==="subagent"?{title:"Sub-agent",onBack:N?void 0:()=>T(null)}:u==="variable"?{title:"Variables",onBack:N?void 0:()=>T(null)}:c===i.MORE_INTEGRATIONS_KEY?{title:i.MORE_INTEGRATIONS_LABEL,onBack:()=>v(null),icon:W}:c?{title:D.toolSourceLabel(c),onBack:Y?void 0:()=>v(i.isMoreIntegrationSource(c)?i.MORE_INTEGRATIONS_KEY:null),icon:y.sourceIcon(c)}:{title:"Tools",onBack:N?void 0:()=>T(null)}:null,h=d.useMemo(()=>{if(!u)return M.map(n=>({id:n.key,label:n.label,drillsIn:!0,onActivate:()=>{T(n.key),v(null)}}));if(u==="subagent"){const n=w.trim().toLowerCase(),g=A.filter(x=>!n||E(x).toLowerCase().includes(n)).map(x=>({id:String(x.id),label:E(x),drillsIn:!1,onActivate:()=>L(x)}));return I&&g.push({id:se,label:"Create new",drillsIn:!1,isCreate:!0,onActivate:()=>{m?.(),I()}}),g}if(u==="variable")return[];if(!c||c===i.MORE_INTEGRATIONS_KEY){const n=(S??[]).map(t=>t.source).filter(t=>!P.includes(t)),g=[...P,...n],x=t=>{const s=G.get(t);if((s!==void 0?s.connected:K?.[t])===!1)return{id:t,label:D.toolSourceLabel(t),drillsIn:!1,icon:y.sourceIcon(t)??s?.icon,rightLabel:"Connect",onActivate:()=>{m?.(),s?.onConnect?s.onConnect():V?.(t)}};const J=O.filter(j=>(k(j)?.source??"other")===t);if(J.length+(s?1:0)===1&&!(s===void 0&&i.isIntegrationSource(t))){const j=y.sourceIcon(t)??s?.icon;if(s)return{id:t,label:s.label,drillsIn:!1,icon:j,onActivate:()=>{m?.(),s.onSelect()}};const q=J[0];return{id:String(q.id),label:E(q),drillsIn:!1,icon:j,authRequired:k(q)?.authRequired,onActivate:()=>L(q)}}return{id:t,label:D.toolSourceLabel(t),drillsIn:!0,icon:y.sourceIcon(t)??s?.icon,onActivate:()=>v(t)}};if(c===i.MORE_INTEGRATIONS_KEY)return g.filter(t=>i.isMoreIntegrationSource(t)).sort((t,s)=>i.toolSourceRank(t)-i.toolSourceRank(s)).map(x);const H=g.filter(t=>!i.isMoreIntegrationSource(t)).map(t=>({row:x(t),rank:i.toolSourceRank(t)}));return g.some(t=>i.isMoreIntegrationSource(t))&&H.push({rank:i.MORE_INTEGRATIONS_RANK,row:{id:i.MORE_INTEGRATIONS_KEY,label:i.MORE_INTEGRATIONS_LABEL,drillsIn:!0,icon:W,onActivate:()=>v(i.MORE_INTEGRATIONS_KEY)}}),H.sort((t,s)=>t.rank-s.rank).map(t=>t.row)}const e=w.trim().toLowerCase(),l=O.filter(n=>(k(n)?.source??"other")===c).filter(n=>!e||E(n).toLowerCase().includes(e)).map(n=>({id:String(n.id),label:E(n),drillsIn:!1,authRequired:k(n)?.authRequired,onActivate:()=>L(n)})),b=G.get(c);if(b){const n=c in i.CONFIG_TOOL_SOURCES;l.push({id:`create:${c}`,label:b.label,drillsIn:!1,isCreate:!n,onActivate:()=>{m?.(),b.onSelect()}})}return l},[u,M,c,w,O,A,P,L,m,I,S,G,K,V]);d.useEffect(()=>R(-1),[u,c,w,o]),d.useEffect(()=>F(""),[u,c]);const U=d.useRef({rows:h,activeIndex:_,header:p});U.current={rows:h,activeIndex:_,header:p},d.useEffect(()=>{if(C)return C(e=>{const{rows:l,activeIndex:b,header:n}=U.current;if(!l.length&&e.key!=="ArrowLeft")return!1;switch(e.key){case"ArrowDown":return R(g=>(g+1)%l.length),!0;case"ArrowUp":return R(g=>(g+l.length-1)%l.length),!0;case"ArrowRight":case"Enter":return(l[b]??l[0])?.onActivate(),!0;case"ArrowLeft":return n?.onBack?(n.onBack(),!0):!1;default:return!1}}),()=>C(null)},[C]);const Z=u?h.length&&!h[0].drillsIn?"items":"sources":"categories",ee=u==="tool"&&!!c&&c!==i.MORE_INTEGRATIONS_KEY||u==="subagent";return r.jsxs(de,{className:`bik-mention-picker bik-mention-picker--${Z}`,$fixedHeight:u==="variable",children:[p&&r.jsxs(me,{type:"button",onClick:p.onBack,disabled:!p.onBack,style:{background:a.COLORS.surface.subdued,cursor:p.onBack?"pointer":"default"},children:[p.onBack&&r.jsx(ne.default,{width:20,height:20,color:a.COLORS.content.primary}),p.icon&&y.renderSourceIcon(p.icon),r.jsxs(z.TitleSmall,{children:[" ",p.title]})]}),ee&&r.jsxs(pe,{children:[r.jsx(re.default,{width:20,height:20,color:a.COLORS.content.placeholder}),r.jsx(ge,{autoFocus:!0,value:w,placeholder:"Search","data-test":"mention-picker-search",onChange:e=>F(e.target.value),onKeyDown:e=>{h.length&&(e.key==="ArrowDown"?(e.preventDefault(),R(l=>(l+1)%h.length)):e.key==="ArrowUp"?(e.preventDefault(),R(l=>(l+h.length-1)%h.length)):e.key==="Enter"&&(e.preventDefault(),(h[_]??h[0])?.onActivate()))}})]}),u==="variable"?r.jsx(fe,{children:r.jsx(ae.VariablePicker,{type:ie.PickerType.EMBEDDED,data:$??[],showRecommendedBar:!0,skipDefaultVariableContent:!0,onSelect:e=>{m?.(),B?.(e)}})}):h.length===0?r.jsx(Se,{children:u==="subagent"?null:"No tools available"}):r.jsx(he,{children:h.map((e,l)=>r.jsx(be,{type:"button",$active:l===_,onMouseEnter:()=>R(l),onMouseLeave:()=>R(-1),onClick:e.onActivate,children:e.isCreate?r.jsx(Oe,{children:e.label}):r.jsxs(r.Fragment,{children:[r.jsxs(xe,{children:[y.renderSourceIcon(e.icon),r.jsx(z.BodySecondary,{color:a.COLORS.content.primary,children:e.label}),e.authRequired&&r.jsx(Q.default,{size:14,"aria-label":"Requires customer verification"})]}),e.rightLabel?r.jsx(Re,{children:e.rightLabel}):e.drillsIn&&r.jsx(te.default,{width:12,height:12})]})},e.id))}),h.some(e=>e.authRequired)&&r.jsxs(ke,{children:[r.jsx(Q.default,{size:16}),r.jsx(z.BodyCaption,{color:a.COLORS.content.secondary,children:"This tool requires customer verification"})]})]})},de=f.default.div`
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;

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

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

@@ -1,7 +1,7 @@
-"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:"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)}),F=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,T=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:T})]})]}),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:T}),!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&&F.length>0&&n.jsx(K.Dropdown,{"data-test":`${c}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Select ${r.toLowerCase()}`,options:F,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`
+"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"),ce=require("../constants/tools.js"),v=require("../utils/sourceIcons.js"),re=require("./MentionPicker.js"),K=require("../../dropdown/Dropdown.js"),N=require("../../dropdown/utils.js"),se=require("../../button/Button.js"),ie=require("../../states-modal/DeleteConfirmationModal.js"),$=require("../../tooltips/Tooltip.js"),de=require("../../../icons/Informational/Common UI/Shield.js"),ue=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},m=ue(le),J="__bik_create_new__",ae=({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(de.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(re.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(he,{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(fe,{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&&!ce.isIntegrationSource(e.source)?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(se.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(ie.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)})]})},he=m.default.div`
 	position: relative;
 	display: flex;
-`,he=m.default.div`
+`,fe=m.default.div`
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -11,5 +11,5 @@
 	${r=>r.$up?"bottom: calc(100% + 4px);":"top: calc(100% + 4px);"}
 	${r=>r.$align==="left"?"left: 0;":"right: 0;"}
 	z-index: 30;
-`;exports.SelectableListSection=ue;
+`;exports.SelectableListSection=ae;
 //# sourceMappingURL=SelectableListSection.js.map