@bikdotai/bik-component-library 0.0.823-beta.2 → 0.0.824-beta.0
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.
- package/dist/cjs/components/adbanner/AdBanner.js.map +1 -0
- package/dist/cjs/components/{banner → adbanner}/Banner.styled.js +13 -9
- package/dist/cjs/components/adbanner/Banner.styled.js.map +1 -0
- package/dist/cjs/components/adbanner/BannerInline.js.map +1 -0
- package/dist/cjs/components/adbanner/BannerWithImage.js.map +1 -0
- package/dist/cjs/components/adbanner/CardBanner.js.map +1 -0
- package/dist/cjs/components/adbanner/CardBannerWithImage.js.map +1 -0
- package/dist/cjs/components/adbanner/model.js.map +1 -0
- package/dist/cjs/components/agent-builder/AgentBuilder.js +1 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.js.map +1 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js +97 -66
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/AgentBuilderTopBar.js +1 -1
- package/dist/cjs/components/agent-builder/components/AgentBuilderTopBar.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js +1 -1
- package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/MentionField.js +1 -1
- package/dist/cjs/components/agent-builder/components/MentionField.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/SelectableListSection.js +4 -4
- package/dist/cjs/components/agent-builder/components/SelectableListSection.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/StepRail.js +1 -1
- package/dist/cjs/components/agent-builder/components/StepRail.js.map +1 -1
- package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js +1 -1
- package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step1About.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step1About.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step2WhenItStepsIn.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step2WhenItStepsIn.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step4HandoverRules.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step4HandoverRules.js.map +1 -1
- package/dist/cjs/components/agent-listing/AgentListing.js +1 -1
- package/dist/cjs/components/agent-listing/AgentListing.js.map +1 -1
- package/dist/cjs/components/agent-listing/AgentListing.styled.js +32 -28
- package/dist/cjs/components/agent-listing/AgentListing.styled.js.map +1 -1
- package/dist/cjs/components/agent-listing/AgentListingHeader.js +1 -1
- package/dist/cjs/components/agent-listing/AgentListingHeader.js.map +1 -1
- package/dist/cjs/components/agent-listing/AgentTableRow.js +1 -1
- package/dist/cjs/components/agent-listing/AgentTableRow.js.map +1 -1
- package/dist/cjs/components/template-preview/models/TemplateMeta.js +1 -1
- package/dist/cjs/components/template-preview/models/TemplateMeta.js.map +1 -1
- package/dist/cjs/editor/BikEditor.js +1 -1
- package/dist/cjs/editor/BikEditor.js.map +1 -1
- package/dist/cjs/editor/BikEditor.styles.js +122 -2
- package/dist/cjs/editor/BikEditor.styles.js.map +1 -1
- package/dist/cjs/editor/BikEditor.types.js.map +1 -1
- package/dist/cjs/editor/BikEditor.utils.js +3 -2
- package/dist/cjs/editor/BikEditor.utils.js.map +1 -1
- package/dist/cjs/editor/extensions/buildExtensions.js +3 -1
- package/dist/cjs/editor/extensions/buildExtensions.js.map +1 -1
- package/dist/cjs/editor/extensions/jsonHighlight/JsonHighlightExtension.js +3 -0
- package/dist/cjs/editor/extensions/jsonHighlight/JsonHighlightExtension.js.map +1 -0
- package/dist/cjs/editor/extensions/jsonHighlight/tokenizeJson.js +2 -0
- package/dist/cjs/editor/extensions/jsonHighlight/tokenizeJson.js.map +1 -0
- package/dist/cjs/icons/BIK AI specific/WandSparkles.js +2 -0
- package/dist/cjs/icons/BIK AI specific/WandSparkles.js.map +1 -0
- package/dist/cjs/icons/index.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/adbanner/AdBanner.js.map +1 -0
- package/dist/esm/components/{banner → adbanner}/Banner.styled.js +18 -14
- package/dist/esm/components/adbanner/Banner.styled.js.map +1 -0
- package/dist/esm/components/adbanner/BannerInline.js.map +1 -0
- package/dist/esm/components/adbanner/BannerWithImage.js.map +1 -0
- package/dist/esm/components/adbanner/CardBanner.js.map +1 -0
- package/dist/esm/components/adbanner/CardBannerWithImage.js.map +1 -0
- package/dist/esm/components/adbanner/model.js.map +1 -0
- package/dist/esm/components/agent-builder/AgentBuilder.js +82 -83
- package/dist/esm/components/agent-builder/AgentBuilder.js.map +1 -1
- package/dist/esm/components/agent-builder/AgentBuilder.styled.d.ts +13 -5
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js +141 -102
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/esm/components/agent-builder/components/AgentBuilderTopBar.d.ts +0 -1
- package/dist/esm/components/agent-builder/components/AgentBuilderTopBar.js +33 -46
- package/dist/esm/components/agent-builder/components/AgentBuilderTopBar.js.map +1 -1
- package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js +135 -119
- package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionField.js +44 -45
- package/dist/esm/components/agent-builder/components/MentionField.js.map +1 -1
- package/dist/esm/components/agent-builder/components/SelectableListSection.js +91 -94
- package/dist/esm/components/agent-builder/components/SelectableListSection.js.map +1 -1
- package/dist/esm/components/agent-builder/components/StepRail.js +28 -20
- package/dist/esm/components/agent-builder/components/StepRail.js.map +1 -1
- package/dist/esm/components/agent-builder/context/AgentBuilderContext.d.ts +7 -0
- package/dist/esm/components/agent-builder/context/AgentBuilderContext.js +108 -98
- package/dist/esm/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step1About.js +38 -35
- package/dist/esm/components/agent-builder/steps/Step1About.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.js +118 -122
- package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js +112 -110
- package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step4HandoverRules.js +72 -70
- package/dist/esm/components/agent-builder/steps/Step4HandoverRules.js.map +1 -1
- package/dist/esm/components/agent-listing/AgentListing.js +45 -43
- package/dist/esm/components/agent-listing/AgentListing.js.map +1 -1
- package/dist/esm/components/agent-listing/AgentListing.model.d.ts +7 -0
- package/dist/esm/components/agent-listing/AgentListing.styled.js +28 -24
- package/dist/esm/components/agent-listing/AgentListing.styled.js.map +1 -1
- package/dist/esm/components/agent-listing/AgentListingHeader.d.ts +2 -0
- package/dist/esm/components/agent-listing/AgentListingHeader.js +14 -12
- package/dist/esm/components/agent-listing/AgentListingHeader.js.map +1 -1
- package/dist/esm/components/agent-listing/AgentTableRow.js +102 -57
- package/dist/esm/components/agent-listing/AgentTableRow.js.map +1 -1
- package/dist/esm/components/template-preview/models/TemplateMeta.d.ts +1 -2
- package/dist/esm/components/template-preview/models/TemplateMeta.js +11 -11
- package/dist/esm/components/template-preview/models/TemplateMeta.js.map +1 -1
- package/dist/esm/editor/BikEditor.js +254 -181
- package/dist/esm/editor/BikEditor.js.map +1 -1
- package/dist/esm/editor/BikEditor.styles.d.ts +9 -0
- package/dist/esm/editor/BikEditor.styles.js +128 -6
- package/dist/esm/editor/BikEditor.styles.js.map +1 -1
- package/dist/esm/editor/BikEditor.types.d.ts +76 -0
- package/dist/esm/editor/BikEditor.types.js.map +1 -1
- package/dist/esm/editor/BikEditor.utils.d.ts +15 -1
- package/dist/esm/editor/BikEditor.utils.js +155 -92
- package/dist/esm/editor/BikEditor.utils.js.map +1 -1
- package/dist/esm/editor/extensions/buildExtensions.d.ts +1 -1
- package/dist/esm/editor/extensions/buildExtensions.js +86 -55
- package/dist/esm/editor/extensions/buildExtensions.js.map +1 -1
- package/dist/esm/editor/extensions/jsonHighlight/JsonHighlightExtension.d.ts +14 -0
- package/dist/esm/editor/extensions/jsonHighlight/JsonHighlightExtension.js +64 -0
- package/dist/esm/editor/extensions/jsonHighlight/JsonHighlightExtension.js.map +1 -0
- package/dist/esm/editor/extensions/jsonHighlight/tokenizeJson.d.ts +18 -0
- package/dist/esm/editor/extensions/jsonHighlight/tokenizeJson.js +21 -0
- package/dist/esm/editor/extensions/jsonHighlight/tokenizeJson.js.map +1 -0
- package/dist/esm/editor/index.d.ts +1 -1
- package/dist/esm/icons/BIK AI specific/WandSparkles.d.ts +7 -0
- package/dist/esm/icons/BIK AI specific/WandSparkles.js +39 -0
- package/dist/esm/icons/BIK AI specific/WandSparkles.js.map +1 -0
- package/dist/esm/icons/BIK AI specific/index.d.ts +1 -0
- package/dist/esm/icons/index.d.ts +1 -1
- package/dist/esm/icons/index.js +18 -16
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js +2 -2
- package/package.json +1 -1
- package/dist/cjs/components/banner/AdBanner.js.map +0 -1
- package/dist/cjs/components/banner/Banner.styled.js.map +0 -1
- package/dist/cjs/components/banner/BannerInline.js.map +0 -1
- package/dist/cjs/components/banner/BannerWithImage.js.map +0 -1
- package/dist/cjs/components/banner/CardBanner.js.map +0 -1
- package/dist/cjs/components/banner/CardBannerWithImage.js.map +0 -1
- package/dist/cjs/components/banner/model.js.map +0 -1
- package/dist/esm/components/banner/AdBanner.js.map +0 -1
- package/dist/esm/components/banner/Banner.stories.d.ts +0 -39
- package/dist/esm/components/banner/Banner.styled.js.map +0 -1
- package/dist/esm/components/banner/BannerInline.js.map +0 -1
- package/dist/esm/components/banner/BannerWithImage.js.map +0 -1
- package/dist/esm/components/banner/CardBanner.js.map +0 -1
- package/dist/esm/components/banner/CardBannerWithImage.js.map +0 -1
- package/dist/esm/components/banner/model.js.map +0 -1
- /package/dist/cjs/components/{banner → adbanner}/AdBanner.js +0 -0
- /package/dist/cjs/components/{banner → adbanner}/BannerInline.js +0 -0
- /package/dist/cjs/components/{banner → adbanner}/BannerWithImage.js +0 -0
- /package/dist/cjs/components/{banner → adbanner}/CardBanner.js +0 -0
- /package/dist/cjs/components/{banner → adbanner}/CardBannerWithImage.js +0 -0
- /package/dist/cjs/components/{banner → adbanner}/model.js +0 -0
- /package/dist/esm/components/{banner → adbanner}/AdBanner.d.ts +0 -0
- /package/dist/esm/components/{banner → adbanner}/AdBanner.js +0 -0
- /package/dist/esm/components/{banner → adbanner}/Banner.styled.d.ts +0 -0
- /package/dist/esm/components/{banner → adbanner}/BannerInline.d.ts +0 -0
- /package/dist/esm/components/{banner → adbanner}/BannerInline.js +0 -0
- /package/dist/esm/components/{banner → adbanner}/BannerWithImage.d.ts +0 -0
- /package/dist/esm/components/{banner → adbanner}/BannerWithImage.js +0 -0
- /package/dist/esm/components/{banner → adbanner}/CardBanner.d.ts +0 -0
- /package/dist/esm/components/{banner → adbanner}/CardBanner.js +0 -0
- /package/dist/esm/components/{banner → adbanner}/CardBannerWithImage.d.ts +0 -0
- /package/dist/esm/components/{banner → adbanner}/CardBannerWithImage.js +0 -0
- /package/dist/esm/components/{banner → adbanner}/index.d.ts +0 -0
- /package/dist/esm/components/{banner → adbanner}/model.d.ts +0 -0
- /package/dist/esm/components/{banner → adbanner}/model.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { 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\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: 12px;\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\toverflow-y: auto;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tpadding: 24px;\n\tmin-height: 100%;\n\tbox-sizing: border-box;\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`;\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: 12px;\n\tfont-weight: 600;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.content.brand\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandTint\n\t\t\t: '#F0F0F0'};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.content.primaryInverse\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.content.brand\n\t\t\t: COLORS.content.placeholder};\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\tmargin-bottom: 20px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmargin-bottom: 20px;\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\tmargin-bottom: 16px;\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 ? COLORS.stroke.brand : 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 IntentChip = styled.div.attrs({ className: 'bik-intent-chip' })`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ChipCloseButton = styled.button.attrs({\n\tclassName: 'bik-chip-close-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\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\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 300px;\n\tgap: 24px;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t}\n`;\n\nexport const Step3Main = styled.div.attrs({ className: 'bik-step3-main' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const Step3Side = styled.div.attrs({ className: 'bik-step3-side' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 24px;\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`;\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\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\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\theight: 40px;\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\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\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\tmargin-bottom: 4px;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n`;\n\n// ── Create sub-agent drawer ─────────────────────────────────────────────────\n\nexport const SubAgentScrim = styled.div.attrs({\n\tclassName: 'bik-subagent-scrim',\n})`\n\tposition: fixed;\n\tinset: 0;\n\tbackground: rgba(0, 0, 0, 0.32);\n\tz-index: 1000;\n`;\n\nexport const SubAgentPanel = styled.div.attrs({\n\tclassName: 'bik-subagent-panel',\n})`\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\theight: 100%;\n\twidth: 421px;\n\tmax-width: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: ${COLORS.surface.standard};\n\tbox-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);\n\tz-index: 1001;\n\tbox-sizing: border-box;\n`;\n\nexport const SubAgentPanelHeader = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header',\n})`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentPanelHeaderText = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmin-width: 0;\n`;\n\nexport const SubAgentPanelBody = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-body',\n})`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 20px;\n`;\n\nexport const SubAgentPanelFooter = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-footer',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tmin-height: 48px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentCloseButton = styled.button.attrs({\n\tclassName: 'bik-subagent-close',\n})`\n\t${iconActionButton}\n\tflex-shrink: 0;\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","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","RadioCardText","ChipWrap","IntentChip","ChipCloseButton","AddChipButton","Step3Grid","Step3Main","Step3Side","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowActions","RowActionDivider","RowMenuButton","ModalBody","ModalIcon","ModalActions","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","SubAgentPanelBody","SubAgentPanelFooter","SubAgentCloseButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { 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\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 ? COLORS.stroke.brand : 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 IntentChip = styled.div.attrs({ className: 'bik-intent-chip' })`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ChipCloseButton = styled.button.attrs({\n\tclassName: 'bik-chip-close-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\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`;\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\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\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\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\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\tmargin-bottom: 4px;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n`;\n\n// ── Create sub-agent drawer ─────────────────────────────────────────────────\n\nexport const SubAgentScrim = styled.div.attrs({\n\tclassName: 'bik-subagent-scrim',\n})`\n\tposition: fixed;\n\tinset: 0;\n\tbackground: rgba(0, 0, 0, 0.32);\n\tz-index: 1000;\n`;\n\nexport const SubAgentPanel = styled.div.attrs({\n\tclassName: 'bik-subagent-panel',\n})`\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\theight: 100%;\n\twidth: 421px;\n\tmax-width: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: ${COLORS.surface.standard};\n\tbox-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);\n\tz-index: 1001;\n\tbox-sizing: border-box;\n`;\n\nexport const SubAgentPanelHeader = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header',\n})`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\tpadding: 10px 12px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentPanelHeaderText = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-header-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmin-width: 0;\n`;\n\nexport const SubAgentPanelBody = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-body',\n})`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n`;\n\nexport const SubAgentPanelFooter = styled.div.attrs({\n\tclassName: 'bik-subagent-panel-footer',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tmin-height: 48px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const SubAgentCloseButton = styled.button.attrs({\n\tclassName: 'bik-subagent-close',\n})`\n\t${iconActionButton}\n\tflex-shrink: 0;\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","RadioCardText","ChipWrap","IntentChip","ChipCloseButton","AddChipButton","Step3Root","Step3Grid","Step3Divider","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowActions","RowActionDivider","RowMenuButton","ModalBody","ModalIcon","ModalActions","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","SubAgentPanelBody","SubAgentPanelFooter","SubAgentCloseButton"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../../assets/icons/arrow_left.svg.js"),c=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),t=require("../AgentBuilder.styled.js"),d=require("../../tag/Tag.js"),g=require("../../button/Button.js"),T=({name:n,status:o,onBack:r,onSaveDraft:s,isSaving:l})=>{const i=o==="live";return e.jsxs(t.TopBar,{children:[e.jsxs(t.TopBarSide,{children:[r&&e.jsx(t.BackButton,{"data-test":"agent-builder-back",onClick:r,"aria-label":"Back",children:e.jsx(u.default,{width:20,height:20,color:a.COLORS.content.primary})}),e.jsx(c.TitleRegular,{color:a.COLORS.content.primary,children:n||"Untitled agent"}),e.jsx(d.Tag,{tagText:i?"Live":"Draft",type:i?"positive":"neutral",variant:"regular"})]}),e.jsx(t.TopBarSide,{children:e.jsx(g.Button,{"data-test":"agent-builder-save-draft",buttonType:"secondary",size:"small",buttonText:"Save as draft",isLoading:l,onClick:s})})]})};exports.AgentBuilderTopBar=T;
|
|
2
2
|
//# sourceMappingURL=AgentBuilderTopBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgentBuilderTopBar.js","sources":["../../../../../src/components/agent-builder/components/AgentBuilderTopBar.tsx"],"sourcesContent":["import ArrowLeftIcon from '@src/assets/icons/arrow_left.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { Tag } from '@src/components/tag';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentStatus } from '../AgentBuilder.model';\nimport { BackButton, TopBar, TopBarSide } from '../AgentBuilder.styled';\n\ninterface AgentBuilderTopBarProps {\n\tname: string;\n\tstatus: AgentStatus;\n\tonBack?: () => void;\n\
|
|
1
|
+
{"version":3,"file":"AgentBuilderTopBar.js","sources":["../../../../../src/components/agent-builder/components/AgentBuilderTopBar.tsx"],"sourcesContent":["import ArrowLeftIcon from '@src/assets/icons/arrow_left.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { Tag } from '@src/components/tag';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentStatus } from '../AgentBuilder.model';\nimport { BackButton, TopBar, TopBarSide } from '../AgentBuilder.styled';\n\ninterface AgentBuilderTopBarProps {\n\tname: string;\n\tstatus: AgentStatus;\n\tonBack?: () => void;\n\tonSaveDraft: () => void;\n\tisSaving?: boolean;\n}\n\nexport const AgentBuilderTopBar: React.FC<AgentBuilderTopBarProps> = ({\n\tname,\n\tstatus,\n\tonBack,\n\tonSaveDraft,\n\tisSaving,\n}) => {\n\tconst isLive = status === 'live';\n\treturn (\n\t\t<TopBar>\n\t\t\t<TopBarSide>\n\t\t\t\t{onBack && (\n\t\t\t\t\t<BackButton\n\t\t\t\t\t\tdata-test=\"agent-builder-back\"\n\t\t\t\t\t\tonClick={onBack}\n\t\t\t\t\t\taria-label=\"Back\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowLeftIcon\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</BackButton>\n\t\t\t\t)}\n\t\t\t\t<TitleRegular color={COLORS.content.primary}>\n\t\t\t\t\t{name || 'Untitled agent'}\n\t\t\t\t</TitleRegular>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={isLive ? 'Live' : 'Draft'}\n\t\t\t\t\ttype={isLive ? 'positive' : 'neutral'}\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t/>\n\t\t\t</TopBarSide>\n\n\t\t\t<TopBarSide>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-builder-save-draft\"\n\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\tisLoading={isSaving}\n\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t/>\n\t\t\t</TopBarSide>\n\t\t</TopBar>\n\t);\n};\n"],"names":["AgentBuilderTopBar","name","status","onBack","onSaveDraft","isSaving","isLive","TopBar","jsxs","TopBarSide","jsx","BackButton","ArrowLeftIcon","COLORS","TitleRegular","Tag","Button"],"mappings":"kWAiBaA,EAAwD,CAAC,CACrE,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,CACD,IAAM,CACL,MAAMC,EAASJ,IAAW,OAC1B,cACEK,SAAA,CACA,SAAA,CAAAC,OAACC,EAAAA,WAAA,CACC,SAAA,CAAAN,GACAO,EAAAA,IAACC,EAAAA,WAAA,CACA,YAAU,qBACV,QAASR,EACT,aAAW,OAEX,SAAAO,EAAAA,IAACE,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOC,EAAAA,OAAO,QAAQ,OAAA,CAAA,CACvB,CAAA,QAGDC,EAAAA,aAAA,CAAa,MAAOD,EAAAA,OAAO,QAAQ,QAClC,YAAQ,iBACV,EACAH,EAAAA,IAACK,EAAAA,IAAA,CACA,QAAST,EAAS,OAAS,QAC3B,KAAMA,EAAS,WAAa,UAC5B,QAAQ,SAAA,CAAA,CACT,EACD,QAECG,EAAAA,WAAA,CACA,SAAAC,EAAAA,IAACM,EAAAA,OAAA,CACA,YAAU,2BACV,WAAW,YACX,KAAK,QACL,WAAW,gBACX,UAAWX,EACX,QAASD,CAAA,CAAA,CACV,CACD,CAAA,EACD,CAEF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),oe=require("../../../assets/icons/cross.svg.js"),n=require("react"),E=require("../../TypographyStyle.js"),L=require("../../../utils/arrayUtils.js"),q=require("../../../constants/Theme.js"),u=require("../AgentBuilder.styled.js"),se=require("../constants/charLimits.js"),G=require("../utils/mentionSerialization.js"),c=require("../utils/sourceIcons.js"),U=require("./MentionEditor.js"),re=require("./SelectableListSection.js"),ae=require("../../input/Input.js"),N=require("../../button/Button.js"),ie=require("../../toaster/Toaster.js"),ue=({onClose:h,onSave:H,availableTools:a,onImprove:ce,title:K="Create sub-agent",initial:l,appLabel:v="Manifest",charLimits:p=se.AGENT_CHAR_LIMITS})=>{const[b,F]=n.useState(l?.name??""),[d,y]=n.useState(l?.instructions??""),[g,f]=n.useState(l?.guardrail??""),[x,m]=n.useState(l?.tools??[]),[A,O]=n.useState(!1),[w,_]=n.useState(0),[z,k]=n.useState(0),[le,de]=n.useState(null),C=n.useMemo(()=>G.buildAgentMentionItems(a,[],v),[a,v]),S=n.useRef({}),I=n.useRef("instructions"),$=n.useCallback(e=>{S.current.instructions=e??void 0},[]),W=n.useCallback(e=>{S.current.guardrail=e??void 0},[]),D=n.useCallback(()=>{I.current="instructions"},[]),J=n.useCallback(()=>{I.current="guardrail"},[]),M=n.useCallback((e,t)=>{e==="tool"&&m(s=>L.addUnique(s,t))},[]),Q=n.useCallback(e=>{(S.current[I.current]??S.current.instructions)?.("tool",e)},[]),[T,j]=n.useState(null),R=n.useRef(null),P=n.useRef(0),V=e=>{const t=a.find(r=>r.tool_id===e),s=t?`{{tool:${t.function_key}}}`:null,i=r=>s?r.split(s).join(""):r;R.current={instructions:d,guardrail:g,tools:x},y(r=>i(r)),f(r=>i(r)),m(r=>r.filter(ne=>ne!==e)),_(r=>r+1),k(r=>r+1),P.current+=1,j({id:P.current,message:`Tool "${t?.display_name??"Tool"}" removed`})},X=()=>{const e=R.current;e&&(y(e.instructions),f(e.guardrail),m(e.tools),_(t=>t+1),k(t=>t+1),R.current=null),j(null)},B=b.trim().length>0&&(d.trim().length>0||g.trim().length>0),Y=x.map(e=>{const t=a.find(s=>s.tool_id===e);return t?{id:e,label:t.display_name,icon:c.SOURCE_ICONS[t.source??"manifest"]}:null}).filter(e=>e!==null),Z=a.map(e=>({label:e.display_name,value:e.tool_id,leadingIcon:c.renderSourceIcon(c.SOURCE_ICONS[e.source??"manifest"])??void 0})),ee=(()=>{const e=[],t=new Map;return a.forEach(s=>{const i=s.source??"manifest";t.has(i)||(t.set(i,[]),e.push(i)),t.get(i)?.push({label:s.display_name,value:s.tool_id,leadingIcon:c.renderSourceIcon(c.SOURCE_ICONS[s.source??"manifest"])??void 0})}),e.map(s=>({source:s,label:G.toolSourceLabel(s),options:t.get(s)??[]}))})(),te=async()=>{if(!B||A)return;const e=H({name:b.trim(),instructions:d,guardrail:g,tools:x});if(e&&typeof e.then=="function"){O(!0);try{await e}finally{O(!1)}}};return o.jsxs(o.Fragment,{children:[o.jsx(u.SubAgentScrim,{onClick:h,"data-test":"subagent-scrim"}),o.jsxs(u.SubAgentPanel,{"data-test":"create-subagent-panel",children:[o.jsxs(u.SubAgentPanelHeader,{children:[o.jsxs(u.SubAgentPanelHeaderText,{children:[o.jsx(E.TitleRegular,{color:q.COLORS.content.primary,children:K}),o.jsx(E.BodySecondary,{color:q.COLORS.content.secondary,children:"Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."})]}),o.jsx(u.SubAgentCloseButton,{onClick:h,"aria-label":"Close",children:o.jsx(oe.default,{width:20,height:20,color:q.COLORS.content.secondary})})]}),o.jsxs(u.SubAgentPanelBody,{children:[o.jsx(ae.Input,{"data-test":"subagent-name",labelText:"Agent name",labelTextBold:!0,placeholder:"Enter agent name",value:b,maxCharLimit:p.name,maxCharLimitPosition:"TOP",maxCharStyle:{fontSize:12,lineHeight:"16px"},onChangeText:F}),o.jsx(U.MentionEditor,{"data-test":"subagent-instructions",label:"Instructions",value:d,onChange:y,maxLength:p.instructions,placeholder:"Write the steps in plain English. Type @ to reference a tool.",minHeight:"160px",resetKey:`instr-${w}`,mentionItems:C,tools:a,onMentionSelect:M,onFocus:D,registerInsert:$}),o.jsx(U.MentionEditor,{"data-test":"subagent-guardrail",label:"Guardrails",value:g,onChange:f,maxLength:p.guardrail,placeholder:"e.g. Never discuss competitor pricing. Type @ to reference a tool.",minHeight:"160px",resetKey:`guard-${z}`,mentionItems:C,tools:a,onMentionSelect:M,onFocus:J,registerInsert:W}),o.jsx(re.SelectableListSection,{title:"Tools this agent can use",dataTestPrefix:"subagent-tools",items:Y,addableOptions:Z,sourceGroups:ee,mentionItems:C,emptyText:"No tools added yet.",onAdd:e=>{Q(e),m(t=>L.addUnique(t,e))},onRemove:V})]}),o.jsxs(u.SubAgentPanelFooter,{children:[o.jsx(N.Button,{"data-test":"subagent-save",buttonType:"primary",size:"small",buttonText:"Save",disabled:!B,isLoading:A,onClick:te}),o.jsx(N.Button,{"data-test":"subagent-cancel",buttonType:"tertiaryGray",size:"small",buttonText:"Cancel",onClick:h})]})]}),T&&o.jsx(ie.Toaster,{text:T.message,type:"info",position:"top-right",autoClose:5e3,hideCloseButton:!0,buttonProps:{buttonText:"Undo",showButton:!0,onButtonClick:()=>(X(),{})},onCloseToast:()=>j(null)},T.id)]})};exports.CreateSubAgentPanel=ue;
|
|
2
2
|
//# sourceMappingURL=CreateSubAgentPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { Toaster } from '@src/components/toaster';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { addUnique } from '@src/utils/arrayUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool, SubAgentDraft } from '../AgentBuilder.model';\nimport {\n\tSubAgentCloseButton,\n\tSubAgentPanel,\n\tSubAgentPanelBody,\n\tSubAgentPanelFooter,\n\tSubAgentPanelHeader,\n\tSubAgentPanelHeaderText,\n\tSubAgentScrim,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { buildAgentMentionItems } from '../utils/mentionSerialization';\nimport { renderSourceIcon, SOURCE_ICONS } from '../utils/sourceIcons';\nimport { MentionEditor } from './MentionEditor';\nimport { SelectableItem, SelectableListSection } from './SelectableListSection';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n\t/** Resolved character limits (defaults to {@link AGENT_CHAR_LIMITS}). */\n\tcharLimits?: AgentCharLimits;\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\tappLabel = 'Manifest',\n\tcharLimits = AGENT_CHAR_LIMITS,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents).\n\tconst mentionItems = useMemo(\n\t\t() => buildAgentMentionItems(availableTools, [], appLabel),\n\t\t[availableTools, appLabel],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tif (kind === 'tool') {\n\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback((id: string) => {\n\t\tconst target =\n\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\tinsertersRef.current.instructions;\n\t\ttarget?.('tool', id);\n\t}, []);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\tconst removeTool = (id: string) => {\n\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\tconst token = tool ? `{{tool:${tool.function_key}}}` : null;\n\t\tconst strip = (text: string) => (token ? text.split(token).join('') : text);\n\t\tundoSnapshotRef.current = { instructions, guardrail, tools };\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({\n\t\t\tid: undoIdRef.current,\n\t\t\tmessage: `Tool \"${tool?.display_name ?? 'Tool'}\" removed`,\n\t\t});\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst canSave =\n\t\tname.trim().length > 0 &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool\n\t\t\t\t? {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tlabel: tool.display_name,\n\t\t\t\t\t\ticon: SOURCE_ICONS[tool.source ?? 'manifest'],\n\t\t\t\t }\n\t\t\t\t: null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped. Icon left of\n\t// the name, no description.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => ({\n\t\tlabel: t.display_name,\n\t\tvalue: t.tool_id,\n\t\tleadingIcon:\n\t\t\trenderSourceIcon(SOURCE_ICONS[t.source ?? 'manifest']) ?? undefined,\n\t}));\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t});\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SubAgentScrim onClick={onClose} data-test=\"subagent-scrim\" />\n\t\t\t<SubAgentPanel data-test=\"create-subagent-panel\">\n\t\t\t\t<SubAgentPanelHeader>\n\t\t\t\t\t<SubAgentPanelHeaderText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tEach sub-agent handles one piece of the job. Use @ in the main\n\t\t\t\t\t\t\tinstructions to call them.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</SubAgentPanelHeaderText>\n\t\t\t\t\t<SubAgentCloseButton onClick={onClose} aria-label=\"Close\">\n\t\t\t\t\t\t<CrossIcon\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.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SubAgentCloseButton>\n\t\t\t\t</SubAgentPanelHeader>\n\n\t\t\t\t<SubAgentPanelBody>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\t\tonChangeText={setName}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\t\tvalue={instructions}\n\t\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\t\tplaceholder=\"Write the steps in plain English. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\t\tmaxLength={charLimits.guardrail}\n\t\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\t\titems={toolItems}\n\t\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelBody>\n\n\t\t\t\t<SubAgentPanelFooter>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-save\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\tdisabled={!canSave}\n\t\t\t\t\t\tisLoading={saving}\n\t\t\t\t\t\tonClick={handleSave}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-cancel\"\n\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelFooter>\n\t\t\t</SubAgentPanel>\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","title","initial","appLabel","charLimits","AGENT_CHAR_LIMITS","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","insertersRef","useRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","addToolMention","kind","id","prev","addUnique","insertToolAtCursor","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","tool","t","token","strip","text","k","undoRemove","snap","canSave","toolItems","SOURCE_ICONS","x","toolOptions","renderSourceIcon","handleSave","result","jsxs","Fragment","jsx","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","TitleRegular","COLORS","BodySecondary","SubAgentCloseButton","CrossIcon","SubAgentPanelBody","Input","MentionEditor","SelectableListSection","SubAgentPanelFooter","Button","Toaster"],"mappings":"6oBAuDaA,GAA0D,CAAC,CACvE,QAAAC,EACA,OAAAC,EACA,eAAAC,EACA,UAAAC,GACA,MAAAC,EAAQ,mBACR,QAAAC,EACA,SAAAC,EAAW,WAAA,WACXC,EAAaC,GAAAA,iBACd,IAAM,CACL,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAASN,GAAS,MAAQ,EAAE,EAC9C,CAACO,EAAcC,CAAe,EAAIF,EAAAA,SAASN,GAAS,cAAgB,EAAE,EACtE,CAACS,EAAWC,CAAY,EAAIJ,EAAAA,SAASN,GAAS,WAAa,EAAE,EAC7D,CAACW,EAAOC,CAAQ,EAAIN,EAAAA,SAAmBN,GAAS,OAAS,EAAE,EAC3D,CAACa,EAAQC,CAAS,EAAIR,EAAAA,SAAS,EAAK,EAEpC,CAACS,EAAUC,CAAW,EAAIV,EAAAA,SAAS,CAAC,EACpC,CAACW,EAAUC,CAAW,EAAIZ,EAAAA,SAAS,CAAC,EACpC,CAACa,GAAWC,EAAY,EAAId,EAAAA,SAEhC,IAAI,EAGAe,EAAeC,EAAAA,QACpB,IAAMC,0BAAuB1B,EAAgB,CAAA,EAAII,CAAQ,EACzD,CAACJ,EAAgBI,CAAQ,CAAA,EAKpBuB,EAAeC,EAAAA,OAEnB,EAAE,EACEC,EAAiBD,EAAAA,OAAqC,cAAc,EACpEE,EAAgBC,cAAaC,GAAwB,CAC1DL,EAAa,QAAQ,aAAeK,GAAM,MAC3C,EAAG,CAAA,CAAE,EACCC,EAAgBF,cAAaC,GAAwB,CAC1DL,EAAa,QAAQ,UAAYK,GAAM,MACxC,EAAG,CAAA,CAAE,EACCE,EAAaH,EAAAA,YAAY,IAAM,CACpCF,EAAe,QAAU,cAC1B,EAAG,CAAA,CAAE,EACCM,EAAaJ,EAAAA,YAAY,IAAM,CACpCF,EAAe,QAAU,WAC1B,EAAG,CAAA,CAAE,EACCO,EAAiBL,EAAAA,YACtB,CAACM,EAA2BC,IAAe,CACtCD,IAAS,QACZtB,EAAUwB,GAASC,EAAAA,UAAUD,EAAMD,CAAE,CAAC,CAExC,EACA,CAAA,CAAC,EAEIG,EAAqBV,cAAaO,GAAe,EAErDX,EAAa,QAAQE,EAAe,OAAO,GAC3CF,EAAa,QAAQ,gBACb,OAAQW,CAAE,CACpB,EAAG,CAAA,CAAE,EAGC,CAACI,EAAMC,CAAO,EAAIlC,EAAAA,SACvB,IAAA,EAEKmC,EAAkBhB,EAAAA,OAId,IAAI,EACRiB,EAAYjB,EAAAA,OAAO,CAAC,EAEpBkB,EAAcR,GAAe,CAClC,MAAMS,EAAO/C,EAAe,KAAMgD,GAAMA,EAAE,UAAYV,CAAE,EAClDW,EAAQF,EAAO,UAAUA,EAAK,YAAY,KAAO,KACjDG,EAASC,GAAkBF,EAAQE,EAAK,MAAMF,CAAK,EAAE,KAAK,EAAE,EAAIE,EACtEP,EAAgB,QAAU,CAAE,aAAAlC,EAAc,UAAAE,EAAW,MAAAE,CAAA,EACrDH,EAAiB4B,GAASW,EAAMX,CAAI,CAAC,EACrC1B,EAAc0B,GAASW,EAAMX,CAAI,CAAC,EAClCxB,EAAUwB,GAASA,EAAK,OAAQS,IAAMA,KAAMV,CAAE,CAAC,EAC/CnB,EAAaiC,GAAMA,EAAI,CAAC,EACxB/B,EAAa+B,GAAMA,EAAI,CAAC,EACxBP,EAAU,SAAW,EACrBF,EAAQ,CACP,GAAIE,EAAU,QACd,QAAS,SAASE,GAAM,cAAgB,MAAM,WAAA,CAC9C,CACF,EAEMM,EAAa,IAAM,CACxB,MAAMC,EAAOV,EAAgB,QACzBU,IACH3C,EAAgB2C,EAAK,YAAY,EACjCzC,EAAayC,EAAK,SAAS,EAC3BvC,EAASuC,EAAK,KAAK,EACnBnC,EAAaiC,GAAMA,EAAI,CAAC,EACxB/B,EAAa+B,GAAMA,EAAI,CAAC,EACxBR,EAAgB,QAAU,MAE3BD,EAAQ,IAAI,CACb,EAEMY,EACLhD,EAAK,KAAA,EAAO,OAAS,IACpBG,EAAa,KAAA,EAAO,OAAS,GAAKE,EAAU,KAAA,EAAO,OAAS,GAExD4C,EAA8B1C,EAClC,IAAKwB,GAA8B,CACnC,MAAMS,EAAO/C,EAAe,KAAMgD,GAAMA,EAAE,UAAYV,CAAE,EACxD,OAAOS,EACJ,CACA,GAAAT,EACA,MAAOS,EAAK,aACZ,KAAMU,EAAAA,aAAaV,EAAK,QAAU,UAAU,CAAA,EAE5C,IACJ,CAAC,EACA,OAAQW,GAA2BA,IAAM,IAAI,EAIzCC,EAA8B3D,EAAe,IAAKgD,IAAO,CAC9D,MAAOA,EAAE,aACT,MAAOA,EAAE,QACT,YACCY,EAAAA,iBAAiBH,EAAAA,aAAaT,EAAE,QAAU,UAAU,CAAC,GAAK,MAAA,EAC1D,EAEIa,EAAa,SAAY,CAC9B,GAAI,CAACN,GAAWvC,EACf,OAED,MAAM8C,EAAS/D,EAAO,CACrB,KAAMQ,EAAK,KAAA,EACX,aAAAG,EACA,UAAAE,EACA,MAAAE,CAAA,CACA,EACD,GAAIgD,GAAU,OAAQA,EAAyB,MAAS,WAAY,CACnE7C,EAAU,EAAI,EACd,GAAI,CACH,MAAM6C,CACP,QAAA,CACC7C,EAAU,EAAK,CAChB,CACD,CACD,EAsBA,OACC8C,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,cAAA,CAAc,QAASpE,EAAS,YAAU,iBAAiB,EAC5DiE,EAAAA,KAACI,EAAAA,cAAA,CAAc,YAAU,wBACxB,SAAA,CAAAJ,OAACK,EAAAA,oBAAA,CACA,SAAA,CAAAL,OAACM,EAAAA,wBAAA,CACA,SAAA,CAAAJ,MAACK,EAAAA,aAAA,CAAa,MAAOC,EAAAA,OAAO,QAAQ,QAAU,SAAArE,EAAM,QACnDsE,EAAAA,cAAA,CAAc,MAAOD,EAAAA,OAAO,QAAQ,UAAW,SAAA,2FAAA,CAGhD,CAAA,EACD,EACAN,EAAAA,IAACQ,EAAAA,oBAAA,CAAoB,QAAS3E,EAAS,aAAW,QACjD,SAAAmE,EAAAA,IAACS,GAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOH,EAAAA,OAAO,QAAQ,SAAA,CAAA,CACvB,CACD,CAAA,EACD,SAECI,EAAAA,kBAAA,CACA,SAAA,CAAAV,EAAAA,IAACW,GAAAA,MAAA,CACA,YAAU,gBACV,UAAU,aACV,cAAa,GACb,YAAY,mBACZ,MAAOrE,EACP,aAAcF,EAAW,KACzB,qBAAqB,MACrB,aAAc,CAAE,SAAU,GAAI,WAAY,MAAA,EAC1C,aAAcG,CAAA,CAAA,EAGfyD,EAAAA,IAACY,EAAAA,cAAA,CACA,YAAU,wBACV,MAAM,eACN,MAAOnE,EACP,SAAUC,EACV,UAAWN,EAAW,aACtB,YAAY,gEACZ,UAAU,QACV,SAAU,SAASa,CAAQ,GAC3B,aAAAM,EACA,MAAOxB,EACP,gBAAiBoC,EACjB,QAASF,EACT,eAAgBJ,CAAA,CAAA,EAGjBmC,EAAAA,IAACY,EAAAA,cAAA,CACA,YAAU,qBACV,MAAM,aACN,MAAOjE,EACP,SAAUC,EACV,UAAWR,EAAW,UACtB,YAAY,qEACZ,UAAU,QACV,SAAU,SAASe,CAAQ,GAC3B,aAAAI,EACA,MAAOxB,EACP,gBAAiBoC,EACjB,QAASD,EACT,eAAgBF,CAAA,CAAA,EAGjBgC,EAAAA,IAACa,GAAAA,sBAAA,CACA,MAAM,2BACN,eAAe,iBACf,MAAOtB,EACP,eAAgBG,EAChB,UAAU,sBACV,MAAQrB,GAAO,CACdG,EAAmBH,CAAE,EACrBvB,EAAUwB,GAASC,EAAAA,UAAUD,EAAMD,CAAE,CAAC,CACvC,EACA,SAAUQ,CAAA,CAAA,CACX,EACD,SAECiC,EAAAA,oBAAA,CACA,SAAA,CAAAd,EAAAA,IAACe,EAAAA,OAAA,CACA,YAAU,gBACV,WAAW,UACX,KAAK,QACL,WAAW,OACX,SAAU,CAACzB,EACX,UAAWvC,EACX,QAAS6C,CAAA,CAAA,EAEVI,EAAAA,IAACe,EAAAA,OAAA,CACA,YAAU,kBACV,WAAW,YACX,KAAK,QACL,WAAW,SACX,QAASlF,CAAA,CAAA,CACV,CAAA,CACD,CAAA,EACD,EAEC4C,GACAuB,EAAAA,IAACgB,GAAAA,QAAA,CAEA,KAAMvC,EAAK,QACX,KAAK,OACL,SAAS,YACT,UAAW,IACX,gBAAe,GACf,YAAa,CACZ,WAAY,OACZ,WAAY,GACZ,cAAe,KACdW,EAAA,EACO,CAAA,EACR,EAED,aAAc,IAAMV,EAAQ,IAAI,CAAA,EAd3BD,EAAK,EAAA,CAeX,EAEF,CAEF"}
|
|
1
|
+
{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { Toaster } from '@src/components/toaster';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { addUnique } from '@src/utils/arrayUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool, SubAgentDraft } from '../AgentBuilder.model';\nimport {\n\tSubAgentCloseButton,\n\tSubAgentPanel,\n\tSubAgentPanelBody,\n\tSubAgentPanelFooter,\n\tSubAgentPanelHeader,\n\tSubAgentPanelHeaderText,\n\tSubAgentScrim,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport {\n\tbuildAgentMentionItems,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, SOURCE_ICONS } from '../utils/sourceIcons';\nimport { MentionEditor } from './MentionEditor';\nimport {\n\tSelectableItem,\n\tSelectableListSection,\n\tSourceGroup,\n} from './SelectableListSection';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n\t/** Resolved character limits (defaults to {@link AGENT_CHAR_LIMITS}). */\n\tcharLimits?: AgentCharLimits;\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\tappLabel = 'Manifest',\n\tcharLimits = AGENT_CHAR_LIMITS,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents).\n\tconst mentionItems = useMemo(\n\t\t() => buildAgentMentionItems(availableTools, [], appLabel),\n\t\t[availableTools, appLabel],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tif (kind === 'tool') {\n\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback((id: string) => {\n\t\tconst target =\n\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\tinsertersRef.current.instructions;\n\t\ttarget?.('tool', id);\n\t}, []);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\tconst removeTool = (id: string) => {\n\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\tconst token = tool ? `{{tool:${tool.function_key}}}` : null;\n\t\tconst strip = (text: string) => (token ? text.split(token).join('') : text);\n\t\tundoSnapshotRef.current = { instructions, guardrail, tools };\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({\n\t\t\tid: undoIdRef.current,\n\t\t\tmessage: `Tool \"${tool?.display_name ?? 'Tool'}\" removed`,\n\t\t});\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst canSave =\n\t\tname.trim().length > 0 &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool\n\t\t\t\t? {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tlabel: tool.display_name,\n\t\t\t\t\t\ticon: SOURCE_ICONS[tool.source ?? 'manifest'],\n\t\t\t\t }\n\t\t\t\t: null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped. Icon left of\n\t// the name, no description.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => ({\n\t\tlabel: t.display_name,\n\t\tvalue: t.tool_id,\n\t\tleadingIcon:\n\t\t\trenderSourceIcon(SOURCE_ICONS[t.source ?? 'manifest']) ?? undefined,\n\t}));\n\n\t// Group tools by source (Manifest / Shopify / …) so the empty state shows the\n\t// same per-source buttons as the main builder's side panel.\n\tconst toolSourceGroups: SourceGroup[] = (() => {\n\t\tconst order: string[] = [];\n\t\tconst bySource = new Map<string, SingleOption[]>();\n\t\tavailableTools.forEach((t) => {\n\t\t\tconst src = t.source ?? 'manifest';\n\t\t\tif (!bySource.has(src)) {\n\t\t\t\tbySource.set(src, []);\n\t\t\t\torder.push(src);\n\t\t\t}\n\t\t\tbySource.get(src)?.push({\n\t\t\t\tlabel: t.display_name,\n\t\t\t\tvalue: t.tool_id,\n\t\t\t\tleadingIcon:\n\t\t\t\t\trenderSourceIcon(SOURCE_ICONS[t.source ?? 'manifest']) ?? undefined,\n\t\t\t});\n\t\t});\n\t\treturn order.map((src) => ({\n\t\t\tsource: src,\n\t\t\tlabel: toolSourceLabel(src),\n\t\t\toptions: bySource.get(src) ?? [],\n\t\t}));\n\t})();\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t});\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SubAgentScrim onClick={onClose} data-test=\"subagent-scrim\" />\n\t\t\t<SubAgentPanel data-test=\"create-subagent-panel\">\n\t\t\t\t<SubAgentPanelHeader>\n\t\t\t\t\t<SubAgentPanelHeaderText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tEach sub-agent handles one piece of the job. Use @ in the main\n\t\t\t\t\t\t\tinstructions to call them.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</SubAgentPanelHeaderText>\n\t\t\t\t\t<SubAgentCloseButton onClick={onClose} aria-label=\"Close\">\n\t\t\t\t\t\t<CrossIcon\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.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SubAgentCloseButton>\n\t\t\t\t</SubAgentPanelHeader>\n\n\t\t\t\t<SubAgentPanelBody>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\t\tonChangeText={setName}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\t\tvalue={instructions}\n\t\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\t\tplaceholder=\"Write the steps in plain English. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\t\tmaxLength={charLimits.guardrail}\n\t\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\t\titems={toolItems}\n\t\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\t\tsourceGroups={toolSourceGroups}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelBody>\n\n\t\t\t\t<SubAgentPanelFooter>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-save\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\tdisabled={!canSave}\n\t\t\t\t\t\tisLoading={saving}\n\t\t\t\t\t\tonClick={handleSave}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-cancel\"\n\t\t\t\t\t\tbuttonType=\"tertiaryGray\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelFooter>\n\t\t\t</SubAgentPanel>\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","title","initial","appLabel","charLimits","AGENT_CHAR_LIMITS","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","insertersRef","useRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","addToolMention","kind","id","prev","addUnique","insertToolAtCursor","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","tool","t","token","strip","text","k","undoRemove","snap","canSave","toolItems","SOURCE_ICONS","x","toolOptions","renderSourceIcon","toolSourceGroups","order","bySource","src","toolSourceLabel","handleSave","result","jsxs","Fragment","jsx","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","TitleRegular","COLORS","BodySecondary","SubAgentCloseButton","CrossIcon","SubAgentPanelBody","Input","MentionEditor","SelectableListSection","SubAgentPanelFooter","Button","Toaster"],"mappings":"4oBA8DaA,GAA0D,CAAC,CACvE,QAAAC,EACA,OAAAC,EACA,eAAAC,EACA,UAAAC,GACA,MAAAC,EAAQ,mBACR,QAAAC,EACA,SAAAC,EAAW,WAAA,WACXC,EAAaC,GAAAA,iBACd,IAAM,CACL,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAASN,GAAS,MAAQ,EAAE,EAC9C,CAACO,EAAcC,CAAe,EAAIF,EAAAA,SAASN,GAAS,cAAgB,EAAE,EACtE,CAACS,EAAWC,CAAY,EAAIJ,EAAAA,SAASN,GAAS,WAAa,EAAE,EAC7D,CAACW,EAAOC,CAAQ,EAAIN,EAAAA,SAAmBN,GAAS,OAAS,EAAE,EAC3D,CAACa,EAAQC,CAAS,EAAIR,EAAAA,SAAS,EAAK,EAEpC,CAACS,EAAUC,CAAW,EAAIV,EAAAA,SAAS,CAAC,EACpC,CAACW,EAAUC,CAAW,EAAIZ,EAAAA,SAAS,CAAC,EACpC,CAACa,GAAWC,EAAY,EAAId,EAAAA,SAEhC,IAAI,EAGAe,EAAeC,EAAAA,QACpB,IAAMC,yBAAuB1B,EAAgB,CAAA,EAAII,CAAQ,EACzD,CAACJ,EAAgBI,CAAQ,CAAA,EAKpBuB,EAAeC,EAAAA,OAEnB,EAAE,EACEC,EAAiBD,EAAAA,OAAqC,cAAc,EACpEE,EAAgBC,cAAaC,GAAwB,CAC1DL,EAAa,QAAQ,aAAeK,GAAM,MAC3C,EAAG,CAAA,CAAE,EACCC,EAAgBF,cAAaC,GAAwB,CAC1DL,EAAa,QAAQ,UAAYK,GAAM,MACxC,EAAG,CAAA,CAAE,EACCE,EAAaH,EAAAA,YAAY,IAAM,CACpCF,EAAe,QAAU,cAC1B,EAAG,CAAA,CAAE,EACCM,EAAaJ,EAAAA,YAAY,IAAM,CACpCF,EAAe,QAAU,WAC1B,EAAG,CAAA,CAAE,EACCO,EAAiBL,EAAAA,YACtB,CAACM,EAA2BC,IAAe,CACtCD,IAAS,QACZtB,EAAUwB,GAASC,EAAAA,UAAUD,EAAMD,CAAE,CAAC,CAExC,EACA,CAAA,CAAC,EAEIG,EAAqBV,cAAaO,GAAe,EAErDX,EAAa,QAAQE,EAAe,OAAO,GAC3CF,EAAa,QAAQ,gBACb,OAAQW,CAAE,CACpB,EAAG,CAAA,CAAE,EAGC,CAACI,EAAMC,CAAO,EAAIlC,EAAAA,SACvB,IAAA,EAEKmC,EAAkBhB,EAAAA,OAId,IAAI,EACRiB,EAAYjB,EAAAA,OAAO,CAAC,EAEpBkB,EAAcR,GAAe,CAClC,MAAMS,EAAO/C,EAAe,KAAMgD,GAAMA,EAAE,UAAYV,CAAE,EAClDW,EAAQF,EAAO,UAAUA,EAAK,YAAY,KAAO,KACjDG,EAASC,GAAkBF,EAAQE,EAAK,MAAMF,CAAK,EAAE,KAAK,EAAE,EAAIE,EACtEP,EAAgB,QAAU,CAAE,aAAAlC,EAAc,UAAAE,EAAW,MAAAE,CAAA,EACrDH,EAAiB4B,GAASW,EAAMX,CAAI,CAAC,EACrC1B,EAAc0B,GAASW,EAAMX,CAAI,CAAC,EAClCxB,EAAUwB,GAASA,EAAK,OAAQS,IAAMA,KAAMV,CAAE,CAAC,EAC/CnB,EAAaiC,GAAMA,EAAI,CAAC,EACxB/B,EAAa+B,GAAMA,EAAI,CAAC,EACxBP,EAAU,SAAW,EACrBF,EAAQ,CACP,GAAIE,EAAU,QACd,QAAS,SAASE,GAAM,cAAgB,MAAM,WAAA,CAC9C,CACF,EAEMM,EAAa,IAAM,CACxB,MAAMC,EAAOV,EAAgB,QACzBU,IACH3C,EAAgB2C,EAAK,YAAY,EACjCzC,EAAayC,EAAK,SAAS,EAC3BvC,EAASuC,EAAK,KAAK,EACnBnC,EAAaiC,GAAMA,EAAI,CAAC,EACxB/B,EAAa+B,GAAMA,EAAI,CAAC,EACxBR,EAAgB,QAAU,MAE3BD,EAAQ,IAAI,CACb,EAEMY,EACLhD,EAAK,KAAA,EAAO,OAAS,IACpBG,EAAa,KAAA,EAAO,OAAS,GAAKE,EAAU,KAAA,EAAO,OAAS,GAExD4C,EAA8B1C,EAClC,IAAKwB,GAA8B,CACnC,MAAMS,EAAO/C,EAAe,KAAMgD,GAAMA,EAAE,UAAYV,CAAE,EACxD,OAAOS,EACJ,CACA,GAAAT,EACA,MAAOS,EAAK,aACZ,KAAMU,EAAAA,aAAaV,EAAK,QAAU,UAAU,CAAA,EAE5C,IACJ,CAAC,EACA,OAAQW,GAA2BA,IAAM,IAAI,EAIzCC,EAA8B3D,EAAe,IAAKgD,IAAO,CAC9D,MAAOA,EAAE,aACT,MAAOA,EAAE,QACT,YACCY,EAAAA,iBAAiBH,EAAAA,aAAaT,EAAE,QAAU,UAAU,CAAC,GAAK,MAAA,EAC1D,EAIIa,IAAmC,IAAM,CAC9C,MAAMC,EAAkB,CAAA,EAClBC,MAAe,IACrB,OAAA/D,EAAe,QAASgD,GAAM,CAC7B,MAAMgB,EAAMhB,EAAE,QAAU,WACnBe,EAAS,IAAIC,CAAG,IACpBD,EAAS,IAAIC,EAAK,EAAE,EACpBF,EAAM,KAAKE,CAAG,GAEfD,EAAS,IAAIC,CAAG,GAAG,KAAK,CACvB,MAAOhB,EAAE,aACT,MAAOA,EAAE,QACT,YACCY,EAAAA,iBAAiBH,EAAAA,aAAaT,EAAE,QAAU,UAAU,CAAC,GAAK,MAAA,CAC3D,CACF,CAAC,EACMc,EAAM,IAAKE,IAAS,CAC1B,OAAQA,EACR,MAAOC,EAAAA,gBAAgBD,CAAG,EAC1B,QAASD,EAAS,IAAIC,CAAG,GAAK,CAAA,CAAC,EAC9B,CACH,GAAA,EAEME,GAAa,SAAY,CAC9B,GAAI,CAACX,GAAWvC,EACf,OAED,MAAMmD,EAASpE,EAAO,CACrB,KAAMQ,EAAK,KAAA,EACX,aAAAG,EACA,UAAAE,EACA,MAAAE,CAAA,CACA,EACD,GAAIqD,GAAU,OAAQA,EAAyB,MAAS,WAAY,CACnElD,EAAU,EAAI,EACd,GAAI,CACH,MAAMkD,CACP,QAAA,CACClD,EAAU,EAAK,CAChB,CACD,CACD,EAsBA,OACCmD,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,cAAA,CAAc,QAASzE,EAAS,YAAU,iBAAiB,EAC5DsE,EAAAA,KAACI,EAAAA,cAAA,CAAc,YAAU,wBACxB,SAAA,CAAAJ,OAACK,EAAAA,oBAAA,CACA,SAAA,CAAAL,OAACM,EAAAA,wBAAA,CACA,SAAA,CAAAJ,MAACK,EAAAA,aAAA,CAAa,MAAOC,EAAAA,OAAO,QAAQ,QAAU,SAAA1E,EAAM,QACnD2E,EAAAA,cAAA,CAAc,MAAOD,EAAAA,OAAO,QAAQ,UAAW,SAAA,2FAAA,CAGhD,CAAA,EACD,EACAN,EAAAA,IAACQ,EAAAA,oBAAA,CAAoB,QAAShF,EAAS,aAAW,QACjD,SAAAwE,EAAAA,IAACS,GAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOH,EAAAA,OAAO,QAAQ,SAAA,CAAA,CACvB,CACD,CAAA,EACD,SAECI,EAAAA,kBAAA,CACA,SAAA,CAAAV,EAAAA,IAACW,GAAAA,MAAA,CACA,YAAU,gBACV,UAAU,aACV,cAAa,GACb,YAAY,mBACZ,MAAO1E,EACP,aAAcF,EAAW,KACzB,qBAAqB,MACrB,aAAc,CAAE,SAAU,GAAI,WAAY,MAAA,EAC1C,aAAcG,CAAA,CAAA,EAGf8D,EAAAA,IAACY,EAAAA,cAAA,CACA,YAAU,wBACV,MAAM,eACN,MAAOxE,EACP,SAAUC,EACV,UAAWN,EAAW,aACtB,YAAY,gEACZ,UAAU,QACV,SAAU,SAASa,CAAQ,GAC3B,aAAAM,EACA,MAAOxB,EACP,gBAAiBoC,EACjB,QAASF,EACT,eAAgBJ,CAAA,CAAA,EAGjBwC,EAAAA,IAACY,EAAAA,cAAA,CACA,YAAU,qBACV,MAAM,aACN,MAAOtE,EACP,SAAUC,EACV,UAAWR,EAAW,UACtB,YAAY,qEACZ,UAAU,QACV,SAAU,SAASe,CAAQ,GAC3B,aAAAI,EACA,MAAOxB,EACP,gBAAiBoC,EACjB,QAASD,EACT,eAAgBF,CAAA,CAAA,EAGjBqC,EAAAA,IAACa,GAAAA,sBAAA,CACA,MAAM,2BACN,eAAe,iBACf,MAAO3B,EACP,eAAgBG,EAChB,aAAcE,GACd,aAAArC,EACA,UAAU,sBACV,MAAQc,GAAO,CACdG,EAAmBH,CAAE,EACrBvB,EAAUwB,GAASC,EAAAA,UAAUD,EAAMD,CAAE,CAAC,CACvC,EACA,SAAUQ,CAAA,CAAA,CACX,EACD,SAECsC,EAAAA,oBAAA,CACA,SAAA,CAAAd,EAAAA,IAACe,EAAAA,OAAA,CACA,YAAU,gBACV,WAAW,UACX,KAAK,QACL,WAAW,OACX,SAAU,CAAC9B,EACX,UAAWvC,EACX,QAASkD,EAAA,CAAA,EAEVI,EAAAA,IAACe,EAAAA,OAAA,CACA,YAAU,kBACV,WAAW,eACX,KAAK,QACL,WAAW,SACX,QAASvF,CAAA,CAAA,CACV,CAAA,CACD,CAAA,EACD,EAEC4C,GACA4B,EAAAA,IAACgB,GAAAA,QAAA,CAEA,KAAM5C,EAAK,QACX,KAAK,OACL,SAAS,YACT,UAAW,IACX,gBAAe,GACf,YAAa,CACZ,WAAY,OACZ,WAAY,GACZ,cAAe,KACdW,EAAA,EACO,CAAA,EACR,EAED,aAAc,IAAMV,EAAQ,IAAI,CAAA,EAd3BD,EAAK,EAAA,CAeX,EAEF,CAEF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),o=require("react"),T=require("../context/AgentBuilderContext.js"),c=require("../utils/mentionSerialization.js"),j=require("./MentionEditor.js"),I=({fieldKey:e,label:l,placeholder:b,maxLength:g,minHeight:d,...M})=>{const{value:i,patch:m,addReference:s,availableTools:n,availableSubAgents:r,applicationType:a,mentionResetKey:p,registerMentionField:u,notifyMentionFocus:C,onCreateSubAgent:S,requestCreateSubAgent:A}=T.useAgentBuilderContext(),q=o.useMemo(()=>c.buildAgentMentionItems(n,r,c.appTypeLabel(a)),[n,r,a]),v=o.useCallback(t=>u(e,t),[u,e]),F=o.useCallback((t,x)=>s(t,x),[s]);return R.jsx(j.MentionEditor,{label:l,value:i[e]??"",onChange:t=>m({[e]:t}),maxLength:g,placeholder:b,minHeight:d,resetKey:`${i.id}:${e}:${p}`,mentionItems:q,tools:n,onMentionSelect:F,onFocus:()=>C(e),registerInsert:v,onCreateSubAgent:S?A:void 0,"data-test":M["data-test"]})};exports.MentionField=I;
|
|
2
2
|
//# sourceMappingURL=MentionField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionField.js","sources":["../../../../../src/components/agent-builder/components/MentionField.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { AgentValue } from '../AgentBuilder.model';\nimport {\n\tMentionFieldKey,\n\tuseAgentBuilderContext,\n} from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n} from '../utils/mentionSerialization';\nimport { MentionEditor } from './MentionEditor';\n\ninterface MentionFieldProps {\n\t/** Which AgentValue field this editor reads / writes. */\n\tfieldKey: MentionFieldKey;\n\tlabel: string;\n\tplaceholder?: string;\n\tmaxLength: number;\n\tminHeight?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Context-bound {@link MentionEditor} for the builder's Step-3 Instructions /\n * Guardrails. Both `@` tools and sub-agents are offered; the field registers its\n * insert + focus with the context so side-panel adds drop a chip into whichever\n * field was last focused, and remounts on `mentionResetKey`.\n */\nexport const MentionField: React.FC<MentionFieldProps> = ({\n\tfieldKey,\n\tlabel,\n\tplaceholder,\n\tmaxLength,\n\tminHeight,\n\t...rest\n}) => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tmentionResetKey,\n\t\tregisterMentionField,\n\t\tnotifyMentionFocus,\n\t\tonCreateSubAgent,\n\t\trequestCreateSubAgent,\n\t} = useAgentBuilderContext();\n\n\tconst mentionItems = useMemo(\n\t\t() =>\n\t\t\tbuildAgentMentionItems(\n\t\t\t\tavailableTools,\n\t\t\t\tavailableSubAgents,\n\t\t\t\tappTypeLabel(applicationType),\n\t\t\t),\n\t\t[availableTools, availableSubAgents, applicationType],\n\t);\n\n\tconst registerInsert = useCallback(\n\t\t(fn: Parameters<typeof registerMentionField>[1]) =>\n\t\t\tregisterMentionField(fieldKey, fn),\n\t\t[registerMentionField, fieldKey],\n\t);\n\n\
|
|
1
|
+
{"version":3,"file":"MentionField.js","sources":["../../../../../src/components/agent-builder/components/MentionField.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { AgentValue } from '../AgentBuilder.model';\nimport {\n\tMentionFieldKey,\n\tuseAgentBuilderContext,\n} from '../context/AgentBuilderContext';\nimport {\n\tappTypeLabel,\n\tbuildAgentMentionItems,\n} from '../utils/mentionSerialization';\nimport { MentionEditor } from './MentionEditor';\n\ninterface MentionFieldProps {\n\t/** Which AgentValue field this editor reads / writes. */\n\tfieldKey: MentionFieldKey;\n\tlabel: string;\n\tplaceholder?: string;\n\tmaxLength: number;\n\tminHeight?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Context-bound {@link MentionEditor} for the builder's Step-3 Instructions /\n * Guardrails. Both `@` tools and sub-agents are offered; the field registers its\n * insert + focus with the context so side-panel adds drop a chip into whichever\n * field was last focused, and remounts on `mentionResetKey`.\n */\nexport const MentionField: React.FC<MentionFieldProps> = ({\n\tfieldKey,\n\tlabel,\n\tplaceholder,\n\tmaxLength,\n\tminHeight,\n\t...rest\n}) => {\n\tconst {\n\t\tvalue,\n\t\tpatch,\n\t\taddReference,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tapplicationType,\n\t\tmentionResetKey,\n\t\tregisterMentionField,\n\t\tnotifyMentionFocus,\n\t\tonCreateSubAgent,\n\t\trequestCreateSubAgent,\n\t} = useAgentBuilderContext();\n\n\tconst mentionItems = useMemo(\n\t\t() =>\n\t\t\tbuildAgentMentionItems(\n\t\t\t\tavailableTools,\n\t\t\t\tavailableSubAgents,\n\t\t\t\tappTypeLabel(applicationType),\n\t\t\t),\n\t\t[availableTools, availableSubAgents, applicationType],\n\t);\n\n\tconst registerInsert = useCallback(\n\t\t(fn: Parameters<typeof registerMentionField>[1]) =>\n\t\t\tregisterMentionField(fieldKey, fn),\n\t\t[registerMentionField, fieldKey],\n\t);\n\n\t// Route through the context's ref-backed `addReference`: BikEditor captures\n\t// this handler at mount, so reading `value.tools` here would keep only the last\n\t// pick. `addReference` always appends against the latest lists.\n\tconst onMentionSelect = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => addReference(kind, id),\n\t\t[addReference],\n\t);\n\n\treturn (\n\t\t<MentionEditor\n\t\t\tlabel={label}\n\t\t\tvalue={(value[fieldKey] as string | undefined) ?? ''}\n\t\t\tonChange={(text) => patch({ [fieldKey]: text } as Partial<AgentValue>)}\n\t\t\tmaxLength={maxLength}\n\t\t\tplaceholder={placeholder}\n\t\t\tminHeight={minHeight}\n\t\t\tresetKey={`${value.id}:${fieldKey}:${mentionResetKey}`}\n\t\t\tmentionItems={mentionItems}\n\t\t\ttools={availableTools}\n\t\t\tonMentionSelect={onMentionSelect}\n\t\t\tonFocus={() => notifyMentionFocus(fieldKey)}\n\t\t\tregisterInsert={registerInsert}\n\t\t\tonCreateSubAgent={onCreateSubAgent ? requestCreateSubAgent : undefined}\n\t\t\tdata-test={rest['data-test']}\n\t\t/>\n\t);\n};\n"],"names":["MentionField","fieldKey","label","placeholder","maxLength","minHeight","rest","value","patch","addReference","availableTools","availableSubAgents","applicationType","mentionResetKey","registerMentionField","notifyMentionFocus","onCreateSubAgent","requestCreateSubAgent","useAgentBuilderContext","mentionItems","useMemo","buildAgentMentionItems","appTypeLabel","registerInsert","useCallback","fn","onMentionSelect","kind","id","jsx","MentionEditor","text"],"mappings":"qQA4BaA,EAA4C,CAAC,CACzD,SAAAC,EACA,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,GAAGC,CACJ,IAAM,CACL,KAAM,CACL,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,eAAAC,EACA,mBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,sBAAAC,CAAA,EACGC,yBAAA,EAEEC,EAAeC,EAAAA,QACpB,IACCC,EAAAA,uBACCX,EACAC,EACAW,EAAAA,aAAaV,CAAe,CAAA,EAE9B,CAACF,EAAgBC,EAAoBC,CAAe,CAAA,EAG/CW,EAAiBC,EAAAA,YACrBC,GACAX,EAAqBb,EAAUwB,CAAE,EAClC,CAACX,EAAsBb,CAAQ,CAAA,EAM1ByB,EAAkBF,EAAAA,YACvB,CAACG,EAA2BC,IAAenB,EAAakB,EAAMC,CAAE,EAChE,CAACnB,CAAY,CAAA,EAGd,OACCoB,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAA5B,EACA,MAAQK,EAAMN,CAAQ,GAA4B,GAClD,SAAW8B,GAASvB,EAAM,CAAE,CAACP,CAAQ,EAAG8B,EAA6B,EACrE,UAAA3B,EACA,YAAAD,EACA,UAAAE,EACA,SAAU,GAAGE,EAAM,EAAE,IAAIN,CAAQ,IAAIY,CAAe,GACpD,aAAAM,EACA,MAAOT,EACP,gBAAAgB,EACA,QAAS,IAAMX,EAAmBd,CAAQ,EAC1C,eAAAsB,EACA,iBAAkBP,EAAmBC,EAAwB,OAC7D,YAAWX,EAAK,WAAW,CAAA,CAAA,CAG9B"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),U=require("../../../assets/icons/delete.svg.js"),J=require("../../../assets/icons/edit.svg.js"),E=require("../../../assets/icons/plus.svg.js"),h=require("react"),Q=require("styled-components"),S=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),s=require("../AgentBuilder.styled.js"),R=require("../utils/sourceIcons.js"),X=require("./MentionPicker.js"),D=require("../../dropdown/Dropdown.js"),O=require("../../dropdown/utils.js"),Y=require("../../button/Button.js"),Z=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},g=Z(Q),I="__bik_create_new__",G=({title:l,helper:$,items:u,addableOptions:f,onAdd:j,onRemove:z,dataTestPrefix:r,emptyText:F,createOption:t,onConfigure:x,sourceGroups:w,mentionItems:k})=>{const[a,c]=h.useState(!1),[H,b]=h.useState(null),y=!!w&&w.length>0,v=w?.find(e=>e.source===H),o=k!==void 0,L=h.useRef(null),_=h.useRef(null),[p,m]=h.useState(null);h.useEffect(()=>{if(!o||!a)return;const e=C=>{const A=C.target;!L.current?.contains(A)&&!_.current?.contains(A)&&c(!1)},i=C=>{C.key==="Escape"&&c(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",i),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",i)}},[o,a]);const N=y?o||u.length>0:o||f.length>0||!!t&&u.length>0,V=u.length===0&&!!t&&!y&&!o,W=y&&u.length===0,K=()=>{if(o){m(null),c(e=>!e);return}if(y){b(null),c(e=>!e);return}if(f.length===0&&t){t.onSelect();return}c(e=>!e)},P=()=>u.map(e=>n.jsxs(s.SelectableRow,{"data-test":`${r}-row-${e.id}`,children:[R.renderSourceIcon(e.icon),n.jsx(s.RowText,{children:n.jsx(S.BodySecondary,{numberOfLines:1,color:d.COLORS.content.primary,children:e.label})}),n.jsxs(s.RowActions,{children:[x&&n.jsx(s.RowMenuButton,{"data-test":`${r}-edit-${e.id}`,"aria-label":`Edit ${e.label}`,onClick:()=>x(e.id),children:n.jsx(J.default,{width:16,height:16,color:d.COLORS.content.secondary})}),x&&n.jsx(s.RowActionDivider,{"aria-hidden":!0}),n.jsx(s.RowMenuButton,{"data-test":`${r}-delete-${e.id}`,"aria-label":`Delete ${e.label}`,onClick:()=>z(e.id),children:n.jsx(U.default,{width:16,height:16,color:d.COLORS.content.secondary})})]})]},e.id)),q=t?[...f,{label:t.label,value:I,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})}]:f,B=o?n.jsx(X.MentionPicker,{items:k??[],query:"",activeIndex:0,initialSource:p??void 0,onSelect:e=>{c(!1),j(String(e.id))},onClose:()=>c(!1),onCreateSubAgent:t?()=>{c(!1),t.onSelect()}:void 0},p??"__root__"):null;return n.jsxs(s.SideSection,{children:[n.jsxs(s.SideSectionHeader,{children:[n.jsx(S.TitleSmall,{color:d.COLORS.content.primary,children:l}),N&&n.jsxs(T,{ref:L,children:[n.jsx(s.AddIconButton,{"data-test":`${r}-add`,onClick:K,"aria-label":`Add ${l}`,children:n.jsx(E.default,{width:20,height:20,color:d.COLORS.content.brand})}),o&&a&&p===null&&n.jsx(M,{"data-test":`${r}-picker`,children:B})]})]}),$&&n.jsx(S.BodyCaption,{color:d.COLORS.content.secondary,children:$}),W?n.jsxs(ee,{ref:o?_:void 0,children:[n.jsx(s.SourceButtonRow,{"data-test":`${r}-sources`,children:w?.map(e=>n.jsxs(s.SourceButton,{type:"button","data-test":`${r}-source-${e.source}`,onClick:()=>{if(o){m(e.source),c(!0);return}b(e.source)},children:[R.renderSourceIcon(R.SOURCE_ICONS[e.source],-4),n.jsx(S.BodySecondary,{color:d.COLORS.content.primary,children:e.label})]},e.source))}),o&&a&&p!==null&&n.jsx(M,{$align:"left","data-test":`${r}-picker`,children:B}),!o&&v&&n.jsx(D.Dropdown,{"data-test":`${r}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Search ${v.label} tools`,options:v.options,onSelect:e=>{const i=O.unwrapDropdownValue(e);b(null),c(!1),i&&j(i)}})]}):n.jsxs(n.Fragment,{children:[!o&&a&&q.length>0&&n.jsx(D.Dropdown,{"data-test":`${r}-dropdown`,size:"small",width:"100%",isSearchable:!0,placeHolder:`Select ${l.toLowerCase()}`,options:q,onSelect:e=>{const i=O.unwrapDropdownValue(e);c(!1),i&&(i===I?t?.onSelect():j(i))}}),u.length===0&&!a?n.jsxs(n.Fragment,{children:[n.jsx(S.BodyCaption,{color:d.COLORS.content.placeholder,children:F}),V&&t&&n.jsx(Y.Button,{"data-test":`${r}-create`,buttonType:"secondary",size:"small",matchParentWidth:!0,LeadingIcon:E.default,buttonText:t.label,onClick:t.onSelect})]}):P()]})]})},T=g.default.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
display: flex;
|
|
4
|
-
`,
|
|
4
|
+
`,ee=g.default.div`
|
|
5
5
|
position: relative;
|
|
6
6
|
display: flex;
|
|
7
7
|
flex-direction: column;
|
|
8
8
|
gap: 8px;
|
|
9
|
-
`,
|
|
9
|
+
`,M=g.default.div`
|
|
10
10
|
position: absolute;
|
|
11
11
|
top: calc(100% + 4px);
|
|
12
12
|
${l=>l.$align==="left"?"left: 0;":"right: 0;"}
|
|
13
13
|
z-index: 30;
|
|
14
|
-
`;exports.SelectableListSection=
|
|
14
|
+
`;exports.SelectableListSection=G;
|
|
15
15
|
//# sourceMappingURL=SelectableListSection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { MentionItem } from '@src/editor';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowActionDivider,\n\tRowActions,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n\tSourceButton,\n\tSourceButtonRow,\n} from '../AgentBuilder.styled';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tSourceIcon,\n} from '../utils/sourceIcons';\nimport { MentionPicker } from './MentionPicker';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n\t/** Leading brand glyph (e.g. a tool's source icon). */\n\ticon?: SourceIcon;\n}\n\n/** A tool source for the empty-state picker (Tools): a button → its searchable list. */\nexport interface SourceGroup {\n\tsource: string;\n\tlabel: string;\n\toptions: SingleOption[];\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row shows an edit (Configure) icon next to Delete.\n\t * Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n\t/**\n\t * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a\n\t * button per source; clicking one reveals a searchable dropdown of just that\n\t * source's options. Selecting calls `onAdd`. Takes precedence over the plain\n\t * `addableOptions` dropdown.\n\t */\n\tsourceGroups?: SourceGroup[];\n\t/**\n\t * When provided, the header \"+\" opens the same `@` reference picker used in the\n\t * Instructions editor (a {@link MentionPicker} popover) instead of the inline\n\t * select dropdown. Pass the items for THIS section only (tools OR sub-agents) —\n\t * the picker auto-drills into the single category. Selecting a row calls\n\t * `onAdd(id)`; the picker's \"Create new\" row (sub-agents) calls\n\t * `createOption.onSelect`.\n\t */\n\tmentionItems?: MentionItem[];\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n\tsourceGroups,\n\tmentionItems,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\t// Tools: which source's searchable list is open (null = just show the buttons).\n\tconst [activeSource, setActiveSource] = useState<string | null>(null);\n\tconst hasSourceGroups = !!sourceGroups && sourceGroups.length > 0;\n\tconst activeGroup = sourceGroups?.find((g) => g.source === activeSource);\n\t// When set, \"+\" opens the `@` MentionPicker popover instead of a select input.\n\tconst usePicker = mentionItems !== undefined;\n\tconst pickerWrapRef = useRef<HTMLDivElement>(null);\n\t// Source (Shopify / Manifest) the empty-state button opened the picker into;\n\t// null when \"+\" opened it at the root source list.\n\tconst [pickerSource, setPickerSource] = useState<string | null>(null);\n\n\t// Dismiss the picker popover on outside click / Escape.\n\tuseEffect(() => {\n\t\tif (!usePicker || !adding) {\n\t\t\treturn;\n\t\t}\n\t\tconst onDocMouseDown = (e: MouseEvent) => {\n\t\t\tif (!pickerWrapRef.current?.contains(e.target as Node)) {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener('mousedown', onDocMouseDown);\n\t\tdocument.addEventListener('keydown', onKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', onDocMouseDown);\n\t\t\tdocument.removeEventListener('keydown', onKeyDown);\n\t\t};\n\t}, [usePicker, adding]);\n\n\t// Header \"+\" picks an EXISTING item (and, once some exist, re-creates via the\n\t// dropdown's footer row). With an empty list + a createOption the body shows a\n\t// dedicated \"Create new\" button instead, so the header \"+\" would be redundant.\n\t// With sourceGroups the empty state IS the source buttons, so \"+\" only adds more.\n\tconst showAddButton = hasSourceGroups\n\t\t? items.length > 0\n\t\t: // Picker mode (sub-agents) always shows the header \"+\", even when empty —\n\t\t // the empty state is just the title + helper + \"+\" (create lives in the picker).\n\t\t usePicker ||\n\t\t addableOptions.length > 0 ||\n\t\t (!!createOption && items.length > 0);\n\t// Empty state offers a one-click \"Create new\" (sub-agents) rather than burying\n\t// it behind a single-item dropdown. In picker mode the \"+\" opens the picker\n\t// (with its own \"Create new\" row) instead, so skip the standalone button.\n\tconst showEmptyCreate =\n\t\titems.length === 0 && !!createOption && !hasSourceGroups && !usePicker;\n\t// Source buttons ONLY while no tool is added. Once one exists, adding more uses\n\t// the header \"+\" → all-tools dropdown (the buttons never come back).\n\tconst showSourceButtons = hasSourceGroups && items.length === 0;\n\t// Nothing existing to pick → skip the 1-item dropdown and create directly.\n\tconst handleAddClick = () => {\n\t\tif (usePicker) {\n\t\t\t// Toggle the `@` reference-picker popover (rendered under the \"+\"), opened\n\t\t\t// at the root source list (no pre-drilled source).\n\t\t\tsetPickerSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (hasSourceGroups) {\n\t\t\tsetActiveSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (addableOptions.length === 0 && createOption) {\n\t\t\tcreateOption.onSelect();\n\t\t\treturn;\n\t\t}\n\t\tsetAdding((v) => !v);\n\t};\n\n\tconst renderChipRows = () =>\n\t\titems.map((item) => (\n\t\t\t<SelectableRow\n\t\t\t\tkey={item.id}\n\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t>\n\t\t\t\t{renderSourceIcon(item.icon)}\n\t\t\t\t<RowText>\n\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</RowText>\n\t\t\t\t<RowActions>\n\t\t\t\t\t{onConfigure && (\n\t\t\t\t\t\t// Configurable rows (sub-agents) get an always-visible edit icon.\n\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\tonClick={() => onConfigure(item.id)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t)}\n\t\t\t\t\t{onConfigure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RowMenuButton>\n\t\t\t\t</RowActions>\n\t\t\t</SelectableRow>\n\t\t));\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t ]\n\t\t: addableOptions;\n\n\t// One picker instance reused by the header \"+\" and the empty-state source\n\t// buttons. `key` remounts it so a source button re-drills into its own tools\n\t// (the initial drill-in level is read once, on mount).\n\tconst pickerNode = usePicker ? (\n\t\t<MentionPicker\n\t\t\tkey={pickerSource ?? '__root__'}\n\t\t\titems={mentionItems ?? []}\n\t\t\tquery=\"\"\n\t\t\tactiveIndex={0}\n\t\t\tinitialSource={pickerSource ?? undefined}\n\t\t\tonSelect={(item) => {\n\t\t\t\tsetAdding(false);\n\t\t\t\tonAdd(String(item.id));\n\t\t\t}}\n\t\t\tonClose={() => setAdding(false)}\n\t\t\tonCreateSubAgent={\n\t\t\t\tcreateOption\n\t\t\t\t\t? () => {\n\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\tcreateOption.onSelect();\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t) : null;\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddButtonWrap ref={pickerWrapRef}>\n\t\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\t\tonClick={handleAddClick}\n\t\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t\t</AddIconButton>\n\t\t\t\t\t\t{usePicker && adding && pickerSource === null && (\n\t\t\t\t\t\t\t<PickerPopover data-test={`${dataTestPrefix}-picker`}>\n\t\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AddButtonWrap>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{showSourceButtons ? (\n\t\t\t\t<SourcePickerAnchor ref={usePicker ? pickerWrapRef : undefined}>\n\t\t\t\t\t{/* No tools yet: one button per source (never shown once a tool exists). */}\n\t\t\t\t\t<SourceButtonRow data-test={`${dataTestPrefix}-sources`}>\n\t\t\t\t\t\t{sourceGroups?.map((g) => (\n\t\t\t\t\t\t\t<SourceButton\n\t\t\t\t\t\t\t\tkey={g.source}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-source-${g.source}`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tif (usePicker) {\n\t\t\t\t\t\t\t\t\t\t// Open the `@` picker drilled straight into this source's tools.\n\t\t\t\t\t\t\t\t\t\tsetPickerSource(g.source);\n\t\t\t\t\t\t\t\t\t\tsetAdding(true);\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsetActiveSource(g.source);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderSourceIcon(SOURCE_ICONS[g.source], -4)}\n\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t{g.label}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t</SourceButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</SourceButtonRow>\n\n\t\t\t\t\t{/* Picker mode: clicking a source opens its tools in the `@` picker. */}\n\t\t\t\t\t{usePicker && adding && pickerSource !== null && (\n\t\t\t\t\t\t<PickerPopover $align=\"left\" data-test={`${dataTestPrefix}-picker`}>\n\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Legacy (non-picker) mode: chosen source → its searchable tool list. */}\n\t\t\t\t\t{!usePicker && activeGroup && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Search ${activeGroup.label} tools`}\n\t\t\t\t\t\t\toptions={activeGroup.options}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetActiveSource(null);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SourcePickerAnchor>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{!usePicker && adding && dropdownOptions.length > 0 && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t{emptyText}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{showEmptyCreate && createOption && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-create`}\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\t\t\t\tbuttonText={createOption.label}\n\t\t\t\t\t\t\t\t\tonClick={createOption.onSelect}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\trenderChipRows()\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n\n// Anchors the `@`-picker popover to the header \"+\" button.\nconst AddButtonWrap = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n`;\n\n// Anchors the `@`-picker popover to the empty-state source buttons.\nconst SourcePickerAnchor = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\n// Floating card under the trigger. Aligns to the \"+\" (right) or the source\n// buttons (left) so it stays inside the side panel.\nconst PickerPopover = styled.div<{ $align?: 'left' | 'right' }>`\n\tposition: absolute;\n\ttop: calc(100% + 4px);\n\t${(p) => (p.$align === 'left' ? 'left: 0;' : 'right: 0;')}\n\tz-index: 30;\n`;\n"],"names":["CREATE_OPTION_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","sourceGroups","mentionItems","adding","setAdding","useState","activeSource","setActiveSource","hasSourceGroups","activeGroup","g","usePicker","pickerWrapRef","useRef","pickerSource","setPickerSource","useEffect","onDocMouseDown","e","onKeyDown","showAddButton","showEmptyCreate","showSourceButtons","handleAddClick","v","renderChipRows","item","jsxs","SelectableRow","renderSourceIcon","jsx","RowText","BodySecondary","COLORS","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon","dropdownOptions","pickerNode","MentionPicker","SideSection","SideSectionHeader","TitleSmall","AddButtonWrap","AddIconButton","PlusIcon","PickerPopover","BodyCaption","SourcePickerAnchor","SourceButtonRow","SourceButton","SOURCE_ICONS","Dropdown","opt","unwrapDropdownValue","Fragment","Button","styled","p"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectableListSection.js","sources":["../../../../../src/components/agent-builder/components/SelectableListSection.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { MentionItem } from '@src/editor';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAddIconButton,\n\tRowActionDivider,\n\tRowActions,\n\tRowMenuButton,\n\tRowText,\n\tSelectableRow,\n\tSideSection,\n\tSideSectionHeader,\n\tSourceButton,\n\tSourceButtonRow,\n} from '../AgentBuilder.styled';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tSourceIcon,\n} from '../utils/sourceIcons';\nimport { MentionPicker } from './MentionPicker';\n\nexport interface SelectableItem {\n\tid: string;\n\tlabel: string;\n\t/** Leading brand glyph (e.g. a tool's source icon). */\n\ticon?: SourceIcon;\n}\n\n/** A tool source for the empty-state picker (Tools): a button → its searchable list. */\nexport interface SourceGroup {\n\tsource: string;\n\tlabel: string;\n\toptions: SingleOption[];\n}\n\n/** Sentinel value for the \"create new\" entry in the add dropdown. */\nconst CREATE_OPTION_VALUE = '__bik_create_new__';\n\ninterface SelectableListSectionProps {\n\ttitle: string;\n\thelper?: string;\n\titems: SelectableItem[];\n\t/**\n\t * Options shown in the add dropdown. Pass ALL items (not just unselected\n\t * ones) when re-picking an already-added item is allowed (e.g. to insert its\n\t * mention again) — the chip list still shows each item only once.\n\t */\n\taddableOptions: SingleOption[];\n\tonAdd: (id: string) => void;\n\tonRemove: (id: string) => void;\n\tdataTestPrefix: string;\n\temptyText: string;\n\t/**\n\t * Adds a \"create new\" entry at the top of the add dropdown (e.g. \"Create\n\t * sub-agent\"). Selecting it calls `onSelect` instead of `onAdd`.\n\t */\n\tcreateOption?: { label: string; onSelect: () => void };\n\t/**\n\t * When provided, each row shows an edit (Configure) icon next to Delete.\n\t * Omit for tools (Delete only).\n\t */\n\tonConfigure?: (id: string) => void;\n\t/**\n\t * Tool sources (e.g. Manifest / Shopify). When set, the empty state shows a\n\t * button per source; clicking one reveals a searchable dropdown of just that\n\t * source's options. Selecting calls `onAdd`. Takes precedence over the plain\n\t * `addableOptions` dropdown.\n\t */\n\tsourceGroups?: SourceGroup[];\n\t/**\n\t * When provided, the header \"+\" opens the same `@` reference picker used in the\n\t * Instructions editor (a {@link MentionPicker} popover) instead of the inline\n\t * select dropdown. Pass the items for THIS section only (tools OR sub-agents) —\n\t * the picker auto-drills into the single category. Selecting a row calls\n\t * `onAdd(id)`; the picker's \"Create new\" row (sub-agents) calls\n\t * `createOption.onSelect`.\n\t */\n\tmentionItems?: MentionItem[];\n}\n\nexport const SelectableListSection: React.FC<SelectableListSectionProps> = ({\n\ttitle,\n\thelper,\n\titems,\n\taddableOptions,\n\tonAdd,\n\tonRemove,\n\tdataTestPrefix,\n\temptyText,\n\tcreateOption,\n\tonConfigure,\n\tsourceGroups,\n\tmentionItems,\n}) => {\n\tconst [adding, setAdding] = useState(false);\n\t// Tools: which source's searchable list is open (null = just show the buttons).\n\tconst [activeSource, setActiveSource] = useState<string | null>(null);\n\tconst hasSourceGroups = !!sourceGroups && sourceGroups.length > 0;\n\tconst activeGroup = sourceGroups?.find((g) => g.source === activeSource);\n\t// When set, \"+\" opens the `@` MentionPicker popover instead of a select input.\n\tconst usePicker = mentionItems !== undefined;\n\t// Separate anchors for the header \"+\" popover and the empty-state source-button\n\t// popover — when empty both render at once, so a shared ref would misfire the\n\t// outside-click check (closing the header picker when a source row is clicked).\n\tconst headerPickerRef = useRef<HTMLDivElement>(null);\n\tconst sourcePickerRef = useRef<HTMLDivElement>(null);\n\t// Source (Shopify / Manifest) the empty-state button opened the picker into;\n\t// null when \"+\" opened it at the root source list.\n\tconst [pickerSource, setPickerSource] = useState<string | null>(null);\n\n\t// Dismiss the picker popover on outside click / Escape.\n\tuseEffect(() => {\n\t\tif (!usePicker || !adding) {\n\t\t\treturn;\n\t\t}\n\t\tconst onDocMouseDown = (e: MouseEvent) => {\n\t\t\tconst target = e.target as Node;\n\t\t\tif (\n\t\t\t\t!headerPickerRef.current?.contains(target) &&\n\t\t\t\t!sourcePickerRef.current?.contains(target)\n\t\t\t) {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tsetAdding(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener('mousedown', onDocMouseDown);\n\t\tdocument.addEventListener('keydown', onKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', onDocMouseDown);\n\t\t\tdocument.removeEventListener('keydown', onKeyDown);\n\t\t};\n\t}, [usePicker, adding]);\n\n\t// Header \"+\" picks an EXISTING item (and, once some exist, re-creates via the\n\t// dropdown's footer row). With an empty list + a createOption the body shows a\n\t// dedicated \"Create new\" button instead, so the header \"+\" would be redundant.\n\t// In picker mode the \"+\" always shows (even empty) — for tools it sits next to\n\t// the empty-state source buttons; the create flow lives inside the picker.\n\tconst showAddButton = hasSourceGroups\n\t\t? usePicker || items.length > 0\n\t\t: usePicker ||\n\t\t addableOptions.length > 0 ||\n\t\t (!!createOption && items.length > 0);\n\t// Empty state offers a one-click \"Create new\" (sub-agents) rather than burying\n\t// it behind a single-item dropdown. In picker mode the \"+\" opens the picker\n\t// (with its own \"Create new\" row) instead, so skip the standalone button.\n\tconst showEmptyCreate =\n\t\titems.length === 0 && !!createOption && !hasSourceGroups && !usePicker;\n\t// Source buttons ONLY while no tool is added. Once one exists, adding more uses\n\t// the header \"+\" → all-tools dropdown (the buttons never come back).\n\tconst showSourceButtons = hasSourceGroups && items.length === 0;\n\t// Nothing existing to pick → skip the 1-item dropdown and create directly.\n\tconst handleAddClick = () => {\n\t\tif (usePicker) {\n\t\t\t// Toggle the `@` reference-picker popover (rendered under the \"+\"), opened\n\t\t\t// at the root source list (no pre-drilled source).\n\t\t\tsetPickerSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (hasSourceGroups) {\n\t\t\tsetActiveSource(null);\n\t\t\tsetAdding((v) => !v);\n\t\t\treturn;\n\t\t}\n\t\tif (addableOptions.length === 0 && createOption) {\n\t\t\tcreateOption.onSelect();\n\t\t\treturn;\n\t\t}\n\t\tsetAdding((v) => !v);\n\t};\n\n\tconst renderChipRows = () =>\n\t\titems.map((item) => (\n\t\t\t<SelectableRow\n\t\t\t\tkey={item.id}\n\t\t\t\tdata-test={`${dataTestPrefix}-row-${item.id}`}\n\t\t\t>\n\t\t\t\t{renderSourceIcon(item.icon)}\n\t\t\t\t<RowText>\n\t\t\t\t\t<BodySecondary numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</RowText>\n\t\t\t\t<RowActions>\n\t\t\t\t\t{onConfigure && (\n\t\t\t\t\t\t// Configurable rows (sub-agents) get an always-visible edit icon.\n\t\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-edit-${item.id}`}\n\t\t\t\t\t\t\taria-label={`Edit ${item.label}`}\n\t\t\t\t\t\t\tonClick={() => onConfigure(item.id)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</RowMenuButton>\n\t\t\t\t\t)}\n\t\t\t\t\t{onConfigure && <RowActionDivider aria-hidden />}\n\t\t\t\t\t<RowMenuButton\n\t\t\t\t\t\tdata-test={`${dataTestPrefix}-delete-${item.id}`}\n\t\t\t\t\t\taria-label={`Delete ${item.label}`}\n\t\t\t\t\t\tonClick={() => onRemove(item.id)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RowMenuButton>\n\t\t\t\t</RowActions>\n\t\t\t</SelectableRow>\n\t\t));\n\t// \"Create new\" is a brand-coloured footer row at the BOTTOM of the dropdown,\n\t// separated from the selectable items by a divider.\n\tconst dropdownOptions: SingleOption[] = createOption\n\t\t? [\n\t\t\t\t...addableOptions,\n\t\t\t\t{\n\t\t\t\t\tlabel: createOption.label,\n\t\t\t\t\tvalue: CREATE_OPTION_VALUE,\n\t\t\t\t\tsearchKey: createOption.label,\n\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\tcolor: COLORS.content.brand,\n\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{createOption.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t ]\n\t\t: addableOptions;\n\n\t// One picker instance reused by the header \"+\" and the empty-state source\n\t// buttons. `key` remounts it so a source button re-drills into its own tools\n\t// (the initial drill-in level is read once, on mount).\n\tconst pickerNode = usePicker ? (\n\t\t<MentionPicker\n\t\t\tkey={pickerSource ?? '__root__'}\n\t\t\titems={mentionItems ?? []}\n\t\t\tquery=\"\"\n\t\t\tactiveIndex={0}\n\t\t\tinitialSource={pickerSource ?? undefined}\n\t\t\tonSelect={(item) => {\n\t\t\t\tsetAdding(false);\n\t\t\t\tonAdd(String(item.id));\n\t\t\t}}\n\t\t\tonClose={() => setAdding(false)}\n\t\t\tonCreateSubAgent={\n\t\t\t\tcreateOption\n\t\t\t\t\t? () => {\n\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\tcreateOption.onSelect();\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t) : null;\n\n\treturn (\n\t\t<SideSection>\n\t\t\t<SideSectionHeader>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t\t{showAddButton && (\n\t\t\t\t\t<AddButtonWrap ref={headerPickerRef}>\n\t\t\t\t\t\t<AddIconButton\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-add`}\n\t\t\t\t\t\t\tonClick={handleAddClick}\n\t\t\t\t\t\t\taria-label={`Add ${title}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon width={20} height={20} color={COLORS.content.brand} />\n\t\t\t\t\t\t</AddIconButton>\n\t\t\t\t\t\t{usePicker && adding && pickerSource === null && (\n\t\t\t\t\t\t\t<PickerPopover data-test={`${dataTestPrefix}-picker`}>\n\t\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AddButtonWrap>\n\t\t\t\t)}\n\t\t\t</SideSectionHeader>\n\n\t\t\t{helper && (\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{helper}</BodyCaption>\n\t\t\t)}\n\n\t\t\t{showSourceButtons ? (\n\t\t\t\t<SourcePickerAnchor ref={usePicker ? sourcePickerRef : undefined}>\n\t\t\t\t\t{/* No tools yet: one button per source (never shown once a tool exists). */}\n\t\t\t\t\t<SourceButtonRow data-test={`${dataTestPrefix}-sources`}>\n\t\t\t\t\t\t{sourceGroups?.map((g) => (\n\t\t\t\t\t\t\t<SourceButton\n\t\t\t\t\t\t\t\tkey={g.source}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-source-${g.source}`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tif (usePicker) {\n\t\t\t\t\t\t\t\t\t\t// Open the `@` picker drilled straight into this source's tools.\n\t\t\t\t\t\t\t\t\t\tsetPickerSource(g.source);\n\t\t\t\t\t\t\t\t\t\tsetAdding(true);\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsetActiveSource(g.source);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderSourceIcon(SOURCE_ICONS[g.source], -4)}\n\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t{g.label}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t</SourceButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</SourceButtonRow>\n\n\t\t\t\t\t{/* Picker mode: clicking a source opens its tools in the `@` picker. */}\n\t\t\t\t\t{usePicker && adding && pickerSource !== null && (\n\t\t\t\t\t\t<PickerPopover $align=\"left\" data-test={`${dataTestPrefix}-picker`}>\n\t\t\t\t\t\t\t{pickerNode}\n\t\t\t\t\t\t</PickerPopover>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Legacy (non-picker) mode: chosen source → its searchable tool list. */}\n\t\t\t\t\t{!usePicker && activeGroup && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Search ${activeGroup.label} tools`}\n\t\t\t\t\t\t\toptions={activeGroup.options}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetActiveSource(null);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SourcePickerAnchor>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{!usePicker && adding && dropdownOptions.length > 0 && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-dropdown`}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\tisSearchable\n\t\t\t\t\t\t\tplaceHolder={`Select ${title.toLowerCase()}`}\n\t\t\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\t\t\tsetAdding(false);\n\t\t\t\t\t\t\t\tif (!v) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif (v === CREATE_OPTION_VALUE) {\n\t\t\t\t\t\t\t\t\tcreateOption?.onSelect();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonAdd(v);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{items.length === 0 && !adding ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t{emptyText}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{showEmptyCreate && createOption && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test={`${dataTestPrefix}-create`}\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\t\t\t\tbuttonText={createOption.label}\n\t\t\t\t\t\t\t\t\tonClick={createOption.onSelect}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\trenderChipRows()\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</SideSection>\n\t);\n};\n\n// Anchors the `@`-picker popover to the header \"+\" button.\nconst AddButtonWrap = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n`;\n\n// Anchors the `@`-picker popover to the empty-state source buttons.\nconst SourcePickerAnchor = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\n// Floating card under the trigger. Aligns to the \"+\" (right) or the source\n// buttons (left) so it stays inside the side panel.\nconst PickerPopover = styled.div<{ $align?: 'left' | 'right' }>`\n\tposition: absolute;\n\ttop: calc(100% + 4px);\n\t${(p) => (p.$align === 'left' ? 'left: 0;' : 'right: 0;')}\n\tz-index: 30;\n`;\n"],"names":["CREATE_OPTION_VALUE","SelectableListSection","title","helper","items","addableOptions","onAdd","onRemove","dataTestPrefix","emptyText","createOption","onConfigure","sourceGroups","mentionItems","adding","setAdding","useState","activeSource","setActiveSource","hasSourceGroups","activeGroup","g","usePicker","headerPickerRef","useRef","sourcePickerRef","pickerSource","setPickerSource","useEffect","onDocMouseDown","e","target","onKeyDown","showAddButton","showEmptyCreate","showSourceButtons","handleAddClick","v","renderChipRows","item","jsxs","SelectableRow","renderSourceIcon","jsx","RowText","BodySecondary","COLORS","RowActions","RowMenuButton","EditIcon","RowActionDivider","DeleteIcon","dropdownOptions","pickerNode","MentionPicker","SideSection","SideSectionHeader","TitleSmall","AddButtonWrap","AddIconButton","PlusIcon","PickerPopover","BodyCaption","SourcePickerAnchor","SourceButtonRow","SourceButton","SOURCE_ICONS","Dropdown","opt","unwrapDropdownValue","Fragment","Button","styled","p"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("../../../assets/icons/tick.svg.js"),c=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),i=require("../AgentBuilder.styled.js"),x=require("../constants/steps.js"),m=require("../context/AgentBuilderContext.js"),v=()=>{const{activeStep:l,activeIndex:s,validation:d,goToStep:u,disableStepNavigation:n}=m.useAgentBuilderContext();return t.jsx(i.RailList,{children:x.STEP_DEFINITIONS.map(e=>{const r=e.key===l,o=e.index-1<s&&d[e.key],S=r?"active":o?"complete":"inactive",y=r?c.TitleSmall:c.BodySecondary;return t.jsxs(i.RailItem,{"data-test":`agent-step-${e.key}`,disabled:n,onClick:n?void 0:()=>u(e.key),children:[t.jsx(i.StepBadge,{state:S,children:o?t.jsx(g.default,{width:11,height:8,color:a.COLORS.content.primaryInverse}):e.index}),t.jsx(y,{color:a.COLORS.content.primary,children:e.title})]},e.key)})})};exports.StepRail=v;
|
|
2
2
|
//# sourceMappingURL=StepRail.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepRail.js","sources":["../../../../../src/components/agent-builder/components/StepRail.tsx"],"sourcesContent":["import React from 'react';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { RailItem, RailList, StepBadge } from '../AgentBuilder.styled';\nimport { STEP_DEFINITIONS } from '../constants/steps';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\n\nexport const StepRail: React.FC = () => {\n\tconst {\n\t\tactiveStep,\n\t\tactiveIndex,\n\t\tvalidation,\n\t\tgoToStep,\n\t\tdisableStepNavigation,\n\t} = useAgentBuilderContext();\n\n\treturn (\n\t\t<RailList>\n\t\t\t{STEP_DEFINITIONS.map((step) => {\n\t\t\t\tconst isActive = step.key === activeStep;\n\t\t\t\tconst isComplete = step.index - 1 < activeIndex && validation[step.key];\n\t\t\t\tconst badgeState = isActive\n\t\t\t\t\t? 'active'\n\t\t\t\t\t: isComplete\n\t\t\t\t\t? 'complete'\n\t\t\t\t\t: 'inactive';\n\n\t\t\t\tconst Label = isActive ? TitleSmall : BodySecondary;\n\n\t\t\t\treturn (\n\t\t\t\t\t<RailItem\n\t\t\t\t\t\tkey={step.key}\n\t\t\t\t\t\tdata-test={`agent-step-${step.key}`}\n\t\t\t\t\t\tdisabled={disableStepNavigation}\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\tdisableStepNavigation ? undefined : () => goToStep(step.key)\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StepBadge state={badgeState}>\n\t\t\t\t\t\t\t{isComplete ?
|
|
1
|
+
{"version":3,"file":"StepRail.js","sources":["../../../../../src/components/agent-builder/components/StepRail.tsx"],"sourcesContent":["import TickIcon from '@src/assets/icons/tick.svg';\nimport React from 'react';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { RailItem, RailList, StepBadge } from '../AgentBuilder.styled';\nimport { STEP_DEFINITIONS } from '../constants/steps';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\n\nexport const StepRail: React.FC = () => {\n\tconst {\n\t\tactiveStep,\n\t\tactiveIndex,\n\t\tvalidation,\n\t\tgoToStep,\n\t\tdisableStepNavigation,\n\t} = useAgentBuilderContext();\n\n\treturn (\n\t\t<RailList>\n\t\t\t{STEP_DEFINITIONS.map((step) => {\n\t\t\t\tconst isActive = step.key === activeStep;\n\t\t\t\tconst isComplete = step.index - 1 < activeIndex && validation[step.key];\n\t\t\t\tconst badgeState = isActive\n\t\t\t\t\t? 'active'\n\t\t\t\t\t: isComplete\n\t\t\t\t\t? 'complete'\n\t\t\t\t\t: 'inactive';\n\n\t\t\t\tconst Label = isActive ? TitleSmall : BodySecondary;\n\n\t\t\t\treturn (\n\t\t\t\t\t<RailItem\n\t\t\t\t\t\tkey={step.key}\n\t\t\t\t\t\tdata-test={`agent-step-${step.key}`}\n\t\t\t\t\t\tdisabled={disableStepNavigation}\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\tdisableStepNavigation ? undefined : () => goToStep(step.key)\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StepBadge state={badgeState}>\n\t\t\t\t\t\t\t{isComplete ? (\n\t\t\t\t\t\t\t\t<TickIcon\n\t\t\t\t\t\t\t\t\twidth={11}\n\t\t\t\t\t\t\t\t\theight={8}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tstep.index\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</StepBadge>\n\t\t\t\t\t\t<Label color={COLORS.content.primary}>{step.title}</Label>\n\t\t\t\t\t</RailItem>\n\t\t\t\t);\n\t\t\t})}\n\t\t</RailList>\n\t);\n};\n"],"names":["StepRail","activeStep","activeIndex","validation","goToStep","disableStepNavigation","useAgentBuilderContext","jsx","RailList","STEP_DEFINITIONS","step","isActive","isComplete","badgeState","Label","TitleSmall","BodySecondary","jsxs","RailItem","StepBadge","TickIcon","COLORS"],"mappings":"4WAQaA,EAAqB,IAAM,CACvC,KAAM,CACL,WAAAC,EACA,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,sBAAAC,CAAA,EACGC,yBAAA,EAEJ,OACCC,EAAAA,IAACC,EAAAA,SAAA,CACC,SAAAC,EAAAA,iBAAiB,IAAKC,GAAS,CAC/B,MAAMC,EAAWD,EAAK,MAAQT,EACxBW,EAAaF,EAAK,MAAQ,EAAIR,GAAeC,EAAWO,EAAK,GAAG,EAChEG,EAAaF,EAChB,SACAC,EACA,WACA,WAEGE,EAAQH,EAAWI,EAAAA,WAAaC,EAAAA,cAEtC,OACCC,EAAAA,KAACC,EAAAA,SAAA,CAEA,YAAW,cAAcR,EAAK,GAAG,GACjC,SAAUL,EACV,QACCA,EAAwB,OAAY,IAAMD,EAASM,EAAK,GAAG,EAG5D,SAAA,CAAAH,EAAAA,IAACY,EAAAA,UAAA,CAAU,MAAON,EAChB,SAAAD,EACAL,EAAAA,IAACa,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,EACR,MAAOC,EAAAA,OAAO,QAAQ,cAAA,CAAA,EAGvBX,EAAK,MAEP,QACCI,EAAA,CAAM,MAAOO,EAAAA,OAAO,QAAQ,QAAU,WAAK,KAAA,CAAM,CAAA,CAAA,EAlB7CX,EAAK,GAAA,CAqBb,CAAC,CAAA,CACF,CAEF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ot=require("react/jsx-runtime"),s=require("react"),ct=require("../constants/charLimits.js"),g=require("../constants/steps.js"),ut=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},it=ut(s),O=it.default.createContext(null),lt=()=>{const t=s.useContext(O);if(!t)throw new Error("useAgentBuilderContext must be used within an AgentBuilderProvider");return t},dt=(t,o)=>{const l=t.trigger.mode==="custom_intent"?(t.trigger.custom_intent??"").trim().length>0:t.trigger.intents.length>0;return{about:t.name.trim().length>0&&t.name.length<=o.name&&t.description.length<=o.description,trigger:l,response:t.instructions.trim().length>0||(t.guardrail??"").trim().length>0,handover:!0}},at=({value:t,onChange:o,activeStep:l,onStepChange:p,availableTools:d,availableSubAgents:f,availableIntents:k,availableModels:C,validation:E,applicationType:M,charLimits:P,disableStepNavigation:h=!0,onCreateSubAgent:B,onFetchSubAgent:T,onUpdateSubAgent:y,onImproveSubAgent:A,children:v})=>{const[tt,et]=s.useState("about"),m=l??tt,u=g.getStepIndex(m),j=s.useRef(t);j.current=t;const[q,F]=s.useState(0),S=s.useRef({}),I=s.useRef("instructions"),K=s.useCallback((e,n)=>{n?S.current[e]=n:delete S.current[e]},[]),L=s.useCallback(e=>{I.current=e},[]),$=s.useRef(null),Y=s.useCallback(e=>{$.current=e},[]),w=s.useCallback(()=>{$.current?.()},[]),V=s.useCallback((e,n,c)=>{const a=S.current;(a[I.current]??a.instructions)?.(e,n,c)},[]),[D,x]=s.useState(null),R=s.useRef(null),G=s.useRef(0),i=s.useCallback(e=>{l===void 0&&et(e),p?.(e)},[l,p]),H=s.useCallback(()=>{const e=g.STEP_KEYS[Math.min(u+1,g.STEP_KEYS.length-1)];i(e)},[u,i]),N=s.useCallback(()=>{const e=g.STEP_KEYS[Math.max(u-1,0)];i(e)},[u,i]),U=s.useCallback(e=>o(e),[o]),z=s.useCallback((e,n)=>o({[e]:n}),[o]),J=s.useCallback((e,n)=>{const c=j.current;e==="tool"?c.tools.includes(n)||o({tools:[...c.tools,n]}):c.subagents.includes(n)||o({subagents:[...c.subagents,n]})},[o]),Q=s.useCallback((e,n)=>{const c=e==="tool"?(()=>{const r=d.find(rt=>rt.tool_id===n);return r?`{{tool:${r.function_key}}}`:null})():`{{subagent:${n}}}`,a=r=>c?r.split(c).join(""):r;R.current={tools:t.tools,subagents:t.subagents,instructions:t.instructions,guardrail:t.guardrail};const Z={instructions:a(t.instructions),guardrail:a(t.guardrail??""),...e==="tool"?{tools:t.tools.filter(r=>r!==n)}:{subagents:t.subagents.filter(r=>r!==n)}};o(Z),F(r=>r+1);const nt=e==="tool"?d.find(r=>r.tool_id===n)?.display_name??"Tool":f.find(r=>r.id===n)?.name??"Sub-agent";G.current+=1,x({id:G.current,message:`${e==="tool"?"Tool":"Sub-agent"} "${nt}" removed`})},[d,f,t,o]),W=s.useCallback(()=>{R.current&&(o(R.current),R.current=null,F(e=>e+1)),x(null)},[o]),X=s.useCallback(()=>x(null),[]),b=s.useMemo(()=>({...ct.AGENT_CHAR_LIMITS,...P}),[P]),_=s.useMemo(()=>({...dt(t,b),...E}),[t,b,E]),st=s.useMemo(()=>({value:t,patch:U,updateField:z,addReference:J,removeReference:Q,mentionResetKey:q,insertMention:V,registerMentionField:K,notifyMentionFocus:L,undoToast:D,undoRemoval:W,dismissUndo:X,activeStep:m,activeIndex:u,goToStep:i,goNext:H,goPrev:N,isFirstStep:u===0,isLastStep:u===g.STEP_KEYS.length-1,validation:_,isActiveStepValid:_[m],availableTools:d,availableSubAgents:f,availableIntents:k,availableModels:C,applicationType:M,charLimits:b,disableStepNavigation:h,onCreateSubAgent:B,registerSubAgentCreator:Y,requestCreateSubAgent:w,onFetchSubAgent:T,onUpdateSubAgent:y,onImproveSubAgent:A}),[t,U,z,J,Q,q,V,K,L,D,W,X,m,u,i,H,N,_,d,f,k,C,M,b,h,B,Y,w,T,y,A]);return ot.jsx(O.Provider,{value:st,children:v})};exports.AgentBuilderProvider=at;exports.useAgentBuilderContext=lt;
|
|
2
2
|
//# sourceMappingURL=AgentBuilderContext.js.map
|