@bikdotai/bik-component-library 0.0.850-beta.2 → 0.0.850-beta.4
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/assets/icons/ShipStation.svg.js +1 -1
- package/dist/cjs/assets/icons/ShipStation.svg.js.map +1 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js +0 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/DiscardModal.js +1 -1
- package/dist/cjs/components/agent-builder/components/DiscardModal.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/GoLiveModal.js +1 -1
- package/dist/cjs/components/agent-builder/components/GoLiveModal.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/MentionEditor.js +1 -1
- package/dist/cjs/components/agent-builder/components/MentionEditor.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/MentionPicker.js +32 -24
- package/dist/cjs/components/agent-builder/components/MentionPicker.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/AiAgentsEmptyState.js +2 -0
- package/dist/cjs/components/agent-listing/AiAgentsEmptyState.js.map +1 -0
- package/dist/cjs/editor/BikEditor.js +1 -1
- package/dist/cjs/editor/BikEditor.js.map +1 -1
- package/dist/cjs/editor/BikEditor.styles.js +17 -12
- package/dist/cjs/editor/BikEditor.styles.js.map +1 -1
- package/dist/cjs/editor/BikEditor.types.js.map +1 -1
- package/dist/cjs/editor/extensions/buildExtensions.js +2 -2
- package/dist/cjs/editor/extensions/buildExtensions.js.map +1 -1
- package/dist/cjs/editor/extensions/characterLimit/CharacterLimitExtension.js +3 -3
- package/dist/cjs/editor/extensions/characterLimit/CharacterLimitExtension.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/esm/assets/icons/ShipStation.svg.js +2 -2
- package/dist/esm/assets/icons/ShipStation.svg.js.map +1 -1
- package/dist/esm/assets/icons/index.d.ts +1 -0
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js +4 -5
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/esm/components/agent-builder/components/DiscardModal.js +57 -49
- package/dist/esm/components/agent-builder/components/DiscardModal.js.map +1 -1
- package/dist/esm/components/agent-builder/components/GoLiveModal.js +26 -22
- package/dist/esm/components/agent-builder/components/GoLiveModal.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionEditor.js +24 -23
- package/dist/esm/components/agent-builder/components/MentionEditor.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionPicker.js +81 -73
- package/dist/esm/components/agent-builder/components/MentionPicker.js.map +1 -1
- package/dist/esm/components/agent-listing/AgentListing.js +68 -74
- package/dist/esm/components/agent-listing/AgentListing.js.map +1 -1
- package/dist/esm/components/agent-listing/AiAgentsEmptyState.d.ts +22 -0
- package/dist/esm/components/agent-listing/AiAgentsEmptyState.js +22 -0
- package/dist/esm/components/agent-listing/AiAgentsEmptyState.js.map +1 -0
- package/dist/esm/editor/BikEditor.js +70 -68
- package/dist/esm/editor/BikEditor.js.map +1 -1
- package/dist/esm/editor/BikEditor.styles.js +20 -15
- package/dist/esm/editor/BikEditor.styles.js.map +1 -1
- package/dist/esm/editor/BikEditor.types.d.ts +10 -0
- package/dist/esm/editor/BikEditor.types.js.map +1 -1
- package/dist/esm/editor/extensions/buildExtensions.d.ts +6 -0
- package/dist/esm/editor/extensions/buildExtensions.js +20 -15
- package/dist/esm/editor/extensions/buildExtensions.js.map +1 -1
- package/dist/esm/editor/extensions/characterLimit/CharacterLimitExtension.d.ts +20 -3
- package/dist/esm/editor/extensions/characterLimit/CharacterLimitExtension.js +40 -25
- package/dist/esm/editor/extensions/characterLimit/CharacterLimitExtension.js.map +1 -1
- package/dist/esm/index.js +761 -759
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react");function o(e){if(e&&typeof e=="object"&&"default"in e)return e;const A=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(A,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return A.default=e,Object.freeze(A)}const n=o(a),u=e=>n.createElement("svg",{viewBox:"0 0 101 97",fill:"none",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",...e},n.createElement("image",{width:101,height:97,xlinkHref:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABhCAYAAADP7W/ZAAAEuElEQVR42u2d3W3bMBDH85A+pI0dN7Ak562dIIXlFH1sJmhWqDdwNogniDuBM4I6gVfwBu0G7QStLrQQxfCHRB6PJ+lPgEBRwAF5P/GOH38eT05QUOqWfhpPL8fDfzY1/+13WNBD6aWjmS0U+i0s6AVKsrSHEi1hQS/uK1nbQrlI49+wIHM5uxle2wIp6tlNdAtLKnFdLy4sgQvjKm8+Rx9cgWC0MJbTL6cX/TT6xQXF/K3LQWeNyeS2nriAcLsxrj6KlPN09EBfJLkdlw77AFJaTGYuI4b6Rn08n8QPjQBSdHwwjv7YrKTJ73O6rEOuzCbG9NJ4Rn0r/o5qMGUg250nOMeGu4ERr3zD2DVqjsExsS2e7mufSjD7gOwwwCpfXT/mC8E5VfPvOCt/eaHqZmRvt29J/1elfarAVAXShaoCDIAoAwMgysAAiDIwAKIMDIAoA0MrYDqXgKHrn+V43W/rTYYfNawpyvX9OPpLx720uNP20VB7yGbeXdi7yfBOS6fzBd6i/BWSAXI4T3raJyjYCLEdsr0z0E9Hnw6N6H4aZaFHifDxbHQbqqP5ZONrjY8nmEsTlzWRy5CMLRQ3aC/KNmD20qu5PJwAh2lSLszECPcOSsYbsk2QbRYTZP12rI6rqgfHXq5UdQISCsrcV9yQ8Mc+4w3ZphVQXOOGvQ7gat4mKAu+0ZH8FFlkCcWbgO4rzrTGDRc4HC4tWKB3mRIXWyNa9Qau8YZsI95o28VjqLhhuxZziTfiakwbbe+zKCFg3JCON6IuzEYB34arCDbuTGS02Gp7uwpFRLtsO+PqKhSvbmyjEMwas42tCEoBhnXEcGh7uw7lRbs8vGaAwbMTDCivr2JUngAYAbPRz3KflQDKXuF7ZnTL8XTPYqlFR6MNgLJdAQVQAAVQAAVQAAVQAAVQAAVQAAVQAAVQAAVQAAVQwkIhUdxgPKLt+wW3oh5Q9l18ShZk816a3FVqBKeUE1CYdW8cVwcAxZPuzUUtCOGER8G3rdK+2xIjAQW+jSvrKhSxfkO2WkO5IqmdthM8M+ieAhRbqRXZSLyhLronl0ysUoXa6JI5PMhlKFdtmNYspSTRpWxNLv0LcmnITJGjJZMgTc2DM5R3hiP9bivu0bsmlw4VNzpxj1463mwyhf/APfoK/th3vOGIG62/Ry8ZbyTStgd7bkowYc6Kw6XRGkmuzclaHAhtPUvnz7KNN77ihrrUUi5vLrq6tF46uq8+bX/9goPsRyScvEHiKQ2XeCP13MexNgouGuNZyM4ecmnmsZmw+S23Rsu9dyDUaW0pcM0+U/KoMZE12crrJiwFrtAuoYnVuxsLFeCbDUVgbw9g9CaLBhiNz60DjDIgAKMUCMAoBVIHjMkbSU/0JXPSzxoNLT2x8axdXoc26POzGnn7qE1F+zYpOrIqShZVQI6BqZpRNdQzG/RR5CCOLvCoD/vapxLILjB1X3DYgrOSOBKw0WXRvlp55KgGUgZjVJRuW9c+MmtznaEXovdGAGnC6Wawo9p2geFzZW2Qz6oonI+zNTEvsl4wDPFFXNvbhdGCUaIz6K8dgvsaFlQ2E4Pr8hZXRrPGKEu6Ut5Oht9oSmtT6bdN7PN/YyHwpPYJugAAAAAASUVORK5CYII="}));exports.default=u;
|
|
2
2
|
//# sourceMappingURL=ShipStation.svg.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShipStation.svg.js","sources":["../../../../src/assets/icons/ShipStation.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgShipStation = (props) => /* @__PURE__ */ React.createElement(\"svg\", { viewBox: \"0 0 101 97\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", xmlnsXlink: \"http://www.w3.org/1999/xlink\", ...props }, /* @__PURE__ */ React.createElement(\"image\", { width: 101, height: 97, xlinkHref: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABhCAYAAADP7W/
|
|
1
|
+
{"version":3,"file":"ShipStation.svg.js","sources":["../../../../src/assets/icons/ShipStation.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgShipStation = (props) => /* @__PURE__ */ React.createElement(\"svg\", { viewBox: \"0 0 101 97\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", xmlnsXlink: \"http://www.w3.org/1999/xlink\", ...props }, /* @__PURE__ */ React.createElement(\"image\", { width: 101, height: 97, xlinkHref: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABhCAYAAADP7W/ZAAAEuElEQVR42u2d3W3bMBDH85A+pI0dN7Ak562dIIXlFH1sJmhWqDdwNogniDuBM4I6gVfwBu0G7QStLrQQxfCHRB6PJ+lPgEBRwAF5P/GOH38eT05QUOqWfhpPL8fDfzY1/+13WNBD6aWjmS0U+i0s6AVKsrSHEi1hQS/uK1nbQrlI49+wIHM5uxle2wIp6tlNdAtLKnFdLy4sgQvjKm8+Rx9cgWC0MJbTL6cX/TT6xQXF/K3LQWeNyeS2nriAcLsxrj6KlPN09EBfJLkdlw77AFJaTGYuI4b6Rn08n8QPjQBSdHwwjv7YrKTJ73O6rEOuzCbG9NJ4Rn0r/o5qMGUg250nOMeGu4ERr3zD2DVqjsExsS2e7mufSjD7gOwwwCpfXT/mC8E5VfPvOCt/eaHqZmRvt29J/1elfarAVAXShaoCDIAoAwMgysAAiDIwAKIMDIAoA0MrYDqXgKHrn+V43W/rTYYfNawpyvX9OPpLx720uNP20VB7yGbeXdi7yfBOS6fzBd6i/BWSAXI4T3raJyjYCLEdsr0z0E9Hnw6N6H4aZaFHifDxbHQbqqP5ZONrjY8nmEsTlzWRy5CMLRQ3aC/KNmD20qu5PJwAh2lSLszECPcOSsYbsk2QbRYTZP12rI6rqgfHXq5UdQISCsrcV9yQ8Mc+4w3ZphVQXOOGvQ7gat4mKAu+0ZH8FFlkCcWbgO4rzrTGDRc4HC4tWKB3mRIXWyNa9Qau8YZsI95o28VjqLhhuxZziTfiakwbbe+zKCFg3JCON6IuzEYB34arCDbuTGS02Gp7uwpFRLtsO+PqKhSvbmyjEMwas42tCEoBhnXEcGh7uw7lRbs8vGaAwbMTDCivr2JUngAYAbPRz3KflQDKXuF7ZnTL8XTPYqlFR6MNgLJdAQVQAAVQAAVQAAVQAAVQAAVQAAVQAAVQAAVQAAVQwkIhUdxgPKLt+wW3oh5Q9l18ShZk816a3FVqBKeUE1CYdW8cVwcAxZPuzUUtCOGER8G3rdK+2xIjAQW+jSvrKhSxfkO2WkO5IqmdthM8M+ieAhRbqRXZSLyhLronl0ysUoXa6JI5PMhlKFdtmNYspSTRpWxNLv0LcmnITJGjJZMgTc2DM5R3hiP9bivu0bsmlw4VNzpxj1463mwyhf/APfoK/th3vOGIG62/Ry8ZbyTStgd7bkowYc6Kw6XRGkmuzclaHAhtPUvnz7KNN77ihrrUUi5vLrq6tF46uq8+bX/9goPsRyScvEHiKQ2XeCP13MexNgouGuNZyM4ecmnmsZmw+S23Rsu9dyDUaW0pcM0+U/KoMZE12crrJiwFrtAuoYnVuxsLFeCbDUVgbw9g9CaLBhiNz60DjDIgAKMUCMAoBVIHjMkbSU/0JXPSzxoNLT2x8axdXoc26POzGnn7qE1F+zYpOrIqShZVQI6BqZpRNdQzG/RR5CCOLvCoD/vapxLILjB1X3DYgrOSOBKw0WXRvlp55KgGUgZjVJRuW9c+MmtznaEXovdGAGnC6Wawo9p2geFzZW2Qz6oonI+zNTEvsl4wDPFFXNvbhdGCUaIz6K8dgvsaFlQ2E4Pr8hZXRrPGKEu6Ut5Oht9oSmtT6bdN7PN/YyHwpPYJugAAAAAASUVORK5CYII=\" }));\nexport default SvgShipStation;\n"],"names":["SvgShipStation","props","React"],"mappings":"gdACMA,EAAkBC,GAA0BC,EAAM,cAAc,MAAO,CAAE,QAAS,aAAc,KAAM,OAAQ,MAAO,6BAA8B,WAAY,+BAAgC,GAAGD,CAAK,EAAoBC,EAAM,cAAc,QAAS,CAAE,MAAO,IAAK,OAAQ,GAAI,UAAW,grDAAgrD,CAAE,CAAC"}
|
|
@@ -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 { BASE_COLORS, COLORS } from '@src/constants/Theme';\n\n// Shared look for the 24×24 transparent icon buttons (add / row-menu / close).\nconst iconActionButton = css`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\tbackground: transparent;\n\t}\n`;\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tflex: 1;\n\tmin-height: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbox-sizing: border-box;\n`;\n\n// Scrollable step body inside the card; the footer stays pinned below it.\nexport const StepScroll = styled.div.attrs({ className: 'bik-step-scroll' })`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n\tbox-shadow: 0px -2px 12px 0px #0000000a;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. */\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/* Dashed connector line between consecutive step badges (centered on the badge). */\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' | 'complete' | 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 10px;\n\tfont-weight: 400;\n\tline-height: 12px;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.base};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.surface.standard\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: COLORS.content.secondary};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const SectionBodyWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tpadding: 16px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? BASE_COLORS.brand['800'] : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\n// Fills the scroll area so the step header + grow-body chain reaches the footer.\nexport const Step3Root = styled.div.attrs({\n\tclassName: 'bik-agent-step bik-agent-step--response',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 100%;\n`;\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })<{\n\t$grow?: boolean;\n}>`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 1px 360px;\n\t/* Single row that fills the grid's height, so the divider spans the full\n\t height (down to the footer) rather than stopping at the taller column. */\n\tgrid-template-rows: 1fr;\n\tflex: 1;\n\tmin-height: 0;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-rows: auto;\n\t}\n\n\t/* Fill the remaining card height so a full-height child (e.g. the Step 3\n\t column divider) can stretch all the way down to the footer. */\n\t${(p) =>\n\t\tp.$grow &&\n\t\tcss`\n\t\t\tflex: 1;\n\t\t\tmin-height: 0;\n\t\t`}\n`;\n\n// Vertical rule between the main column and the side (tools / sub-agents) column;\n// hidden once the grid collapses to a single column.\nexport const Step3Divider = styled.div.attrs({\n\tclassName: 'bik-step3-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tbackground: ${COLORS.stroke.primary};\n\n\t@media (max-width: 1100px) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\t${iconActionButton}\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n`;\n\n// Empty-state tool-source picker (e.g. Manifest / Shopify buttons).\nexport const SourceButtonRow = styled.div.attrs({\n\tclassName: 'bik-source-button-row',\n})`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n`;\n\nexport const SourceButton = styled.button.attrs({\n\tclassName: 'bik-source-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 6px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\theight: 28px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\t/* Fixed 48px rows regardless of the (variably-sized) leading source icon.\n\t box-sizing pins the height across hosts with differing resets; flex-shrink:0\n\t + min-height stop a height-constrained flex column (the merchant side panel)\n\t from squashing the rows — Storybook has room, so it looked fine there. */\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Leading icon (e.g. tool source) keeps its size; the label takes the rest. */\n\t& > svg {\n\t\tflex-shrink: 0;\n\t}\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Truncate the label to one line with an ellipsis. */\n\t& > * {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n`;\n\n/* Label + trailing verification shield on one row. */\nexport const RowLabel = styled.div.attrs({ className: 'bik-row-label' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmin-width: 0;\n\tflex: 1;\n\n\t/* Shrink the label to its text so the shield sits just after it, rather than\n\t RowText's default flex: 1 filling the row and pushing the shield to the end. */\n\t& .bik-row-text {\n\t\tflex: 0 1 auto;\n\t}\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Per-row actions (always-visible edit / delete icon buttons) ───────────────\n\nexport const RowActions = styled.div.attrs({ className: 'bik-row-actions' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n`;\n\n// Vertical separator between the edit and delete icon buttons.\nexport const RowActionDivider = styled.span.attrs({\n\tclassName: 'bik-row-action-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tmargin: 4px 0;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\t${iconActionButton}\n`;\n\nexport const DraftButtonScope = styled.div.attrs({\n\tclassName: 'bik-draft-button-scope',\n})`\n\tdisplay: flex;\n\tflex: 1;\n\n\tbutton {\n\t\tborder-color: ${BASE_COLORS.brand['800']};\n\t}\n\tbutton .text {\n\t\tcolor: ${BASE_COLORS.brand['800']};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\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\t/* Every action shares the row equally. Each action MUST be its own flex\n\t wrapper (a plain <div style=\"display:flex\">, or DraftButtonScope) rather\n\t than a bare Button: on hover the Button relocates its padding into an\n\t inner container, and as the flex item itself that changes its resolved\n\t width — the button visibly grows/shrinks. Wrapped, the div is the sized\n\t track (flex:1) and the Button grows to fill it, absorbing the padding\n\t move so the width stays put. */\n\t> * {\n\t\tflex: 1;\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n"],"names":["iconActionButton","css","COLORS","BuilderRoot","styled","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","StepScroll","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","SectionBodyWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","BASE_COLORS","RadioCardText","ChipWrap","Step3Root","Step3Grid","Step3Divider","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowLabel","RowActions","RowActionDivider","RowMenuButton","DraftButtonScope","ModalBody","ModalIcon","ModalActions"],"mappings":"0NAIMA,EAAmBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,gBAaTC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzBC,EAAcC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAM9DF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBG,EAASD,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMvCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAIpCI,EAAaF,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA,EAM/DG,EAAaH,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAa9DF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIzBM,EAAOJ,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,WAAY;AAAA;AAAA;AAAA;AAAA,EAMjDK,EAAOL,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,WAAY;AAAA;AAAA;AAAA,2BAGnCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,eAGjCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBQ,EAAUN,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQrDF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBS,EAAcP,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMxDF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAM7BU,EAAaR,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DS,EAAST,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMzCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAKjCY,EAAaV,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DW,EAAgBX,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,oBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQYY,EAAWZ,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA,EAK1Da,EAAWb,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkC7Dc,EAAYd,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAczDe,GACdA,EAAE,QAAU,WACTjB,EAAAA,OAAO,WAAW,aAClBiB,EAAE,QAAU,SACZjB,SAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,IAAI;AAAA,UAChBiB,GACTA,EAAE,QAAU,WACTjB,EAAAA,OAAO,QAAQ,SACfiB,EAAE,QAAU,SACZjB,SAAO,WAAW,aAClBA,EAAAA,OAAO,QAAQ,SAAS;AAAA,EAKhBkB,EAAoBhB,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAK2BF,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGpCmB,EAAkBjB,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAOYkB,EAAalB,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DmB,EAAgBnB,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQYoB,EAAkBpB,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,IAOIe,GAAOA,EAAE,QAAUjB,EAAAA,OAAO,OAAO,MAAQA,EAAAA,OAAO,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA,eAIpDiB,GAAMA,EAAE,WAAa,OAAO;AAAA,eAC7BjB,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBuB,EAAkBrB,EAAAA,QAAO,SAAS,MAAM,CACpD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQSF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKrBA,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA,EAMxBwB,EAAUtB,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,eAAgB;AAAA;AAAA;AAAA,EAKxDuB,EAAYvB,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASvEe,GAAOA,EAAE,SAAWS,EAAAA,YAAY,MAAM,GAAK,EAAI1B,EAAAA,OAAO,OAAO,OAAQ;AAAA,eAC1DiB,GACdA,EAAE,SAAWjB,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAOxD2B,EAAgBzB,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQY0B,EAAW1B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAO1CA,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKqBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EASpC,MAAM6B,EAAY3B,EAAAA,QAAO,IAAI,MAAM,CACzC,UAAW,yCACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMY4B,EAAY5B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkBrEe,GACFA,EAAE,OACFlB,EAAAA;AAAAA;AAAAA;AAAAA,GAGC;AAAA,EAKUgC,EAAe7B,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA,eAGcF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvBgC,EAAc9B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA,EAMhE+B,EAAoB/B,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMYgC,EAAgBhC,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA,GACEJ,CAAgB;AAAA,eACJE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA,EAI7BmC,EAAkBjC,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,uBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMYkC,EAAelC,EAAAA,QAAO,OAAO,MAAM,CAC/C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKoBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,eAE3BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIzBqC,EAAgBnC,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,oBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAYoBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW7BsC,EAAUpC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAexDqC,EAAWrC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcxCA,EAAAA,QAAO,OAAO,MAAM,CAClD,UAAW,uBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYM,MAAMsC,EAAatC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ9DuC,EAAmBvC,EAAAA,QAAO,KAAK,MAAM,CACjD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,eAIcF,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGvB0C,EAAgBxC,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA,GACEJ,CAAgB;AAAA,EAGN6C,EAAmBzC,EAAAA,QAAO,IAAI,MAAM,CAChD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKiBwB,EAAAA,YAAY,MAAM,GAAK,CAAC;AAAA;AAAA;AAAA,WAG/BA,EAAAA,YAAY,MAAM,GAAK,CAAC;AAAA;AAAA,EAMtBkB,EAAY1C,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS5D2C,EAAY3C,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5D4C,EAAe5C,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB6BA,EAAAA,QAAO,IAAI,MAAM,CAC9C,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA"}
|
|
1
|
+
{"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\n\n// Shared look for the 24×24 transparent icon buttons (add / row-menu / close).\nconst iconActionButton = css`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\tbackground: transparent;\n\t}\n`;\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tflex: 1;\n\tmin-height: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbox-sizing: border-box;\n`;\n\n// Scrollable step body inside the card; the footer stays pinned below it.\nexport const StepScroll = styled.div.attrs({ className: 'bik-step-scroll' })`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n\tbox-shadow: 0px -2px 12px 0px #0000000a;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. */\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/* Dashed connector line between consecutive step badges (centered on the badge). */\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' | 'complete' | 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 10px;\n\tfont-weight: 400;\n\tline-height: 12px;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.base};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.surface.standard\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: COLORS.content.secondary};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const SectionBodyWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tpadding: 16px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? BASE_COLORS.brand['800'] : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\n// Fills the scroll area so the step header + grow-body chain reaches the footer.\nexport const Step3Root = styled.div.attrs({\n\tclassName: 'bik-agent-step bik-agent-step--response',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 100%;\n`;\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })<{\n\t$grow?: boolean;\n}>`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 1px 360px;\n\t/* Single row that fills the grid's height, so the divider spans the full\n\t height (down to the footer) rather than stopping at the taller column. */\n\tgrid-template-rows: 1fr;\n\tflex: 1;\n\tmin-height: 0;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-rows: auto;\n\t}\n\n\t/* Fill the remaining card height so a full-height child (e.g. the Step 3\n\t column divider) can stretch all the way down to the footer. */\n\t${(p) =>\n\t\tp.$grow &&\n\t\tcss`\n\t\t\tflex: 1;\n\t\t\tmin-height: 0;\n\t\t`}\n`;\n\n// Vertical rule between the main column and the side (tools / sub-agents) column;\n// hidden once the grid collapses to a single column.\nexport const Step3Divider = styled.div.attrs({\n\tclassName: 'bik-step3-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tbackground: ${COLORS.stroke.primary};\n\n\t@media (max-width: 1100px) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\t${iconActionButton}\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n`;\n\n// Empty-state tool-source picker (e.g. Manifest / Shopify buttons).\nexport const SourceButtonRow = styled.div.attrs({\n\tclassName: 'bik-source-button-row',\n})`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n`;\n\nexport const SourceButton = styled.button.attrs({\n\tclassName: 'bik-source-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 6px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\theight: 28px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\t/* Fixed 48px rows regardless of the (variably-sized) leading source icon.\n\t box-sizing pins the height across hosts with differing resets; flex-shrink:0\n\t + min-height stop a height-constrained flex column (the merchant side panel)\n\t from squashing the rows — Storybook has room, so it looked fine there. */\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Leading icon (e.g. tool source) keeps its size; the label takes the rest. */\n\t& > svg {\n\t\tflex-shrink: 0;\n\t}\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Truncate the label to one line with an ellipsis. */\n\t& > * {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n`;\n\n/* Label + trailing verification shield on one row. */\nexport const RowLabel = styled.div.attrs({ className: 'bik-row-label' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmin-width: 0;\n\tflex: 1;\n\n\t/* Shrink the label to its text so the shield sits just after it, rather than\n\t RowText's default flex: 1 filling the row and pushing the shield to the end. */\n\t& .bik-row-text {\n\t\tflex: 0 1 auto;\n\t}\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Per-row actions (always-visible edit / delete icon buttons) ───────────────\n\nexport const RowActions = styled.div.attrs({ className: 'bik-row-actions' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n`;\n\n// Vertical separator between the edit and delete icon buttons.\nexport const RowActionDivider = styled.span.attrs({\n\tclassName: 'bik-row-action-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tmargin: 4px 0;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\t${iconActionButton}\n`;\n\nexport const DraftButtonScope = styled.div.attrs({\n\tclassName: 'bik-draft-button-scope',\n})`\n\tdisplay: flex;\n\tflex: 1;\n\n\tbutton {\n\t\tborder-color: ${BASE_COLORS.brand['800']};\n\t}\n\tbutton .text {\n\t\tcolor: ${BASE_COLORS.brand['800']};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n\t/* Every action shares the row equally. Each action MUST be its own flex\n\t wrapper (a plain <div style=\"display:flex\">, or DraftButtonScope) rather\n\t than a bare Button: on hover the Button relocates its padding into an\n\t inner container, and as the flex item itself that changes its resolved\n\t width — the button visibly grows/shrinks. Wrapped, the div is the sized\n\t track (flex:1) and the Button grows to fill it, absorbing the padding\n\t move so the width stays put. */\n\t> * {\n\t\tflex: 1;\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n"],"names":["iconActionButton","css","COLORS","BuilderRoot","styled","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","StepScroll","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","SectionBodyWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","BASE_COLORS","RadioCardText","ChipWrap","Step3Root","Step3Grid","Step3Divider","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowLabel","RowActions","RowActionDivider","RowMenuButton","DraftButtonScope","ModalBody","ModalIcon","ModalActions"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),i=require("../AgentBuilder.styled.js"),u=require("../../modals/styledModal.js"),r=require("../../button/Button.js"),y=({open:s,onClose:d,onDiscard:n,onSaveDraft:l,isSaving:o,disableSaveDraft:c})=>s?e.jsx(u.StyledModal,{"data-test":"agent-discard-modal",open:!0,onClose:d,width:"530px",children:e.jsxs(i.ModalBody,{style:{alignItems:"flex-start",textAlign:"left",gap:"32px"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[e.jsx(t.TitleMedium,{color:a.COLORS.content.primary,children:"You have unsaved changes"}),e.jsx(t.BodyPrimary,{color:a.COLORS.content.secondary,style:{lineHeight:"24px"},children:"Leaving now will discard your recent changes. You can save them and come back to this later."})]}),e.jsxs(i.ModalActions,{children:[e.jsx("div",{style:{display:"flex"},children:e.jsx(r.Button,{"data-test":"agent-discard-leave",buttonType:"secondary",size:"medium",matchParentWidth:!0,buttonText:"Discard",onClick:n})}),e.jsx("div",{style:{display:"flex"},children:e.jsx(r.Button,{"data-test":"agent-discard-save-draft",buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Save as draft",disabled:c,isLoading:o,onClick:l})})]})]})}):null;exports.DiscardModal=y;
|
|
2
2
|
//# sourceMappingURL=DiscardModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DiscardModal.js","sources":["../../../../../src/components/agent-builder/components/DiscardModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodyPrimary, TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ModalActions, ModalBody } from '../AgentBuilder.styled';\n\ninterface DiscardModalProps {\n\topen: boolean;\n\t/** Dismiss the dialog and stay on the builder (X / outside click). */\n\tonClose: () => void;\n\t/** Leave without saving. */\n\tonDiscard: () => void;\n\t/** Save the draft, then leave. */\n\tonSaveDraft: () => void;\n\tisSaving?: boolean;\n\t/** Block \"Save as draft\" (e.g. the agent has no name yet). */\n\tdisableSaveDraft?: boolean;\n}\n\n/**\n * \"You have unsaved changes\" confirmation shown when the user tries to leave the\n * builder (Back). Actions live inside the body (see GoLiveModal for why we avoid\n * StyledModal's footer). Content is left-aligned per design.\n */\nexport const DiscardModal: React.FC<DiscardModalProps> = ({\n\topen,\n\tonClose,\n\tonDiscard,\n\tonSaveDraft,\n\tisSaving,\n\tdisableSaveDraft,\n}) => {\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-discard-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"530px\"\n\t\t>\n\t\t\t<ModalBody
|
|
1
|
+
{"version":3,"file":"DiscardModal.js","sources":["../../../../../src/components/agent-builder/components/DiscardModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodyPrimary, TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ModalActions, ModalBody } from '../AgentBuilder.styled';\n\ninterface DiscardModalProps {\n\topen: boolean;\n\t/** Dismiss the dialog and stay on the builder (X / outside click). */\n\tonClose: () => void;\n\t/** Leave without saving. */\n\tonDiscard: () => void;\n\t/** Save the draft, then leave. */\n\tonSaveDraft: () => void;\n\tisSaving?: boolean;\n\t/** Block \"Save as draft\" (e.g. the agent has no name yet). */\n\tdisableSaveDraft?: boolean;\n}\n\n/**\n * \"You have unsaved changes\" confirmation shown when the user tries to leave the\n * builder (Back). Actions live inside the body (see GoLiveModal for why we avoid\n * StyledModal's footer). Content is left-aligned per design.\n */\nexport const DiscardModal: React.FC<DiscardModalProps> = ({\n\topen,\n\tonClose,\n\tonDiscard,\n\tonSaveDraft,\n\tisSaving,\n\tdisableSaveDraft,\n}) => {\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-discard-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"530px\"\n\t\t>\n\t\t\t<ModalBody\n\t\t\t\tstyle={{ alignItems: 'flex-start', textAlign: 'left', gap: '32px' }}\n\t\t\t>\n\t\t\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n\t\t\t\t\t<TitleMedium color={COLORS.content.primary}>\n\t\t\t\t\t\tYou have unsaved changes\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\tstyle={{ lineHeight: '24px' }}\n\t\t\t\t\t>\n\t\t\t\t\t\tLeaving now will discard your recent changes. You can save them and\n\t\t\t\t\t\tcome back to this later.\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-discard-leave\"\n\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\tbuttonText=\"Discard\"\n\t\t\t\t\t\t\tonClick={onDiscard}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test=\"agent-discard-save-draft\"\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\t\t\tdisabled={disableSaveDraft}\n\t\t\t\t\t\t\tisLoading={isSaving}\n\t\t\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["DiscardModal","open","onClose","onDiscard","onSaveDraft","isSaving","disableSaveDraft","jsx","StyledModal","jsxs","ModalBody","TitleMedium","COLORS","BodyPrimary","ModalActions","Button"],"mappings":"wTAyBaA,EAA4C,CAAC,CACzD,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,YAAAC,EACA,SAAAC,EACA,iBAAAC,CACD,IACML,EAKJM,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,sBACV,KAAI,GACJ,QAAAN,EACA,MAAM,QAEN,SAAAO,EAAAA,KAACC,EAAAA,UAAA,CACA,MAAO,CAAE,WAAY,aAAc,UAAW,OAAQ,IAAK,MAAA,EAE3D,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,KAAA,EAC5D,SAAA,CAAAF,MAACI,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,QAAS,SAAA,2BAE5C,EACAL,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAOD,EAAAA,OAAO,QAAQ,UACtB,MAAO,CAAE,WAAY,MAAA,EACrB,SAAA,8FAAA,CAAA,CAGD,EACD,SAECE,EAAAA,aAAA,CACA,SAAA,CAAAP,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAA,EAAAA,IAACQ,EAAAA,OAAA,CACA,YAAU,sBACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,UACX,QAASZ,CAAA,CAAA,EAEX,QACC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAI,EAAAA,IAACQ,EAAAA,OAAA,CACA,YAAU,2BACV,WAAW,UACX,KAAK,SACL,iBAAgB,GAChB,WAAW,gBACX,SAAUT,EACV,UAAWD,EACX,QAASD,CAAA,CAAA,CACV,CACD,CAAA,CAAA,CACD,CAAA,CAAA,CAAA,CACD,CAAA,EAlDM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../../assets/icons/ManifestGlass.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../../assets/icons/ManifestGlass.svg.js"),x=require("../../../assets/icons/successIcon.svg.js"),a=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),i=require("../AgentBuilder.styled.js"),y=require("../../modals/styledModal.js"),n=require("../../button/Button.js"),g=require("../../../icons/Arrows/Normal arrows/ArrowRight.js"),m=({mode:o,onClose:s,onConfirm:d,onSaveDraft:l,onGoToDashboard:c,isPublishing:u})=>{if(!o)return null;const t=o==="success";return e.jsx(y.StyledModal,{"data-test":"agent-go-live-modal",open:!0,onClose:s,width:t?"400px":"520px",children:e.jsxs(i.ModalBody,{style:{gap:"24px"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[e.jsx(i.ModalIcon,{children:t?e.jsx(x.default,{width:64,height:64}):e.jsx(h.default,{width:64,height:64})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[e.jsx(a.TitleMedium,{color:r.COLORS.content.primary,children:t?"Your agent is live!":"Ready to go live?"}),e.jsx(a.BodyPrimary,{color:r.COLORS.content.secondary,children:t?"You can manage your agents from the AI agent dashboard.":"This agent will start handling customer conversations immediately. You can pause it at any time."})]})]}),e.jsx(i.ModalActions,{children:t?e.jsx("div",{style:{display:"flex"},children:e.jsx(n.Button,{"data-test":"agent-go-dashboard",buttonType:"secondary",size:"medium",matchParentWidth:!0,buttonText:"Go to Agent dashboard",TrailingIcon:g.default,onClick:c??s})}):e.jsxs(e.Fragment,{children:[e.jsx(i.DraftButtonScope,{children:e.jsx(n.Button,{"data-test":"agent-confirm-save-draft",buttonType:"secondary",size:"medium",matchParentWidth:!0,buttonText:"Save as draft",onClick:l})}),e.jsx("div",{style:{display:"flex"},children:e.jsx(n.Button,{"data-test":"agent-confirm-go-live",buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:"Go live now",isLoading:u,onClick:d})})]})})]})})};exports.GoLiveModal=m;
|
|
2
2
|
//# sourceMappingURL=GoLiveModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GoLiveModal.js","sources":["../../../../../src/components/agent-builder/components/GoLiveModal.tsx"],"sourcesContent":["import ManifestGlass from '@src/assets/icons/ManifestGlass.svg';\nimport SuccessIcon from '@src/assets/icons/successIcon.svg';\nimport { ArrowRight } from '@src/icons';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodyPrimary, TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tDraftButtonScope,\n\tModalActions,\n\tModalBody,\n\tModalIcon,\n} from '../AgentBuilder.styled';\n\nexport type GoLiveModalMode = 'confirm' | 'success' | null;\n\ninterface GoLiveModalProps {\n\tmode: GoLiveModalMode;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tonSaveDraft: () => void;\n\tonGoToDashboard?: () => void;\n\tisPublishing?: boolean;\n}\n\n/**\n * Confirm / success dialog for going live. Uses `StyledModal` as the shell but\n * renders the actions INSIDE the body (not StyledModal's footer) — the footer's\n * `margin-top:auto` detaches from this short, centered hero layout and spills\n * out of the card. Body-level actions stay anchored under the content.\n */\nexport const GoLiveModal: React.FC<GoLiveModalProps> = ({\n\tmode,\n\tonClose,\n\tonConfirm,\n\tonSaveDraft,\n\tonGoToDashboard,\n\tisPublishing,\n}) => {\n\tif (!mode) {\n\t\treturn null;\n\t}\n\n\tconst isSuccess = mode === 'success';\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-go-live-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth={isSuccess ? '400px' : '520px'}\n\t\t>\n\t\t\t<ModalBody>\n\t\t\t\t<ModalIcon>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<SuccessIcon width={64} height={64} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ManifestGlass width={64} height={64} />\n\t\t\t\t\t)}\n\t\t\t\t</ModalIcon>\n\n\t\t\t\t<TitleMedium color={COLORS.content.primary}>\n\t\t\t\t\t{isSuccess ? 'Your agent is live!' : 'Ready to go live?'}\n\t\t\t\t</TitleMedium>\n\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t{isSuccess\n\t\t\t\t\t\t? 'You can manage your agents from the AI agent dashboard.'\n\t\t\t\t\t\t: 'This agent will start handling customer conversations immediately. You can pause it at any time.'}\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-go-dashboard\"\n\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Go to Agent dashboard\"\n\t\t\t\t\t\t\t\tTrailingIcon={ArrowRight}\n\t\t\t\t\t\t\t\tonClick={onGoToDashboard ?? onClose}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DraftButtonScope>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-save-draft\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DraftButtonScope>\n\t\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-go-live\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText=\"Go live now\"\n\t\t\t\t\t\t\t\t\tisLoading={isPublishing}\n\t\t\t\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["GoLiveModal","mode","onClose","onConfirm","onSaveDraft","onGoToDashboard","isPublishing","isSuccess","jsx","StyledModal","ModalBody","ModalIcon","SuccessIcon","ManifestGlass","TitleMedium","COLORS","BodyPrimary","ModalActions","Button","ArrowRight","
|
|
1
|
+
{"version":3,"file":"GoLiveModal.js","sources":["../../../../../src/components/agent-builder/components/GoLiveModal.tsx"],"sourcesContent":["import ManifestGlass from '@src/assets/icons/ManifestGlass.svg';\nimport SuccessIcon from '@src/assets/icons/successIcon.svg';\nimport { ArrowRight } from '@src/icons';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodyPrimary, TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tDraftButtonScope,\n\tModalActions,\n\tModalBody,\n\tModalIcon,\n} from '../AgentBuilder.styled';\n\nexport type GoLiveModalMode = 'confirm' | 'success' | null;\n\ninterface GoLiveModalProps {\n\tmode: GoLiveModalMode;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tonSaveDraft: () => void;\n\tonGoToDashboard?: () => void;\n\tisPublishing?: boolean;\n}\n\n/**\n * Confirm / success dialog for going live. Uses `StyledModal` as the shell but\n * renders the actions INSIDE the body (not StyledModal's footer) — the footer's\n * `margin-top:auto` detaches from this short, centered hero layout and spills\n * out of the card. Body-level actions stay anchored under the content.\n */\nexport const GoLiveModal: React.FC<GoLiveModalProps> = ({\n\tmode,\n\tonClose,\n\tonConfirm,\n\tonSaveDraft,\n\tonGoToDashboard,\n\tisPublishing,\n}) => {\n\tif (!mode) {\n\t\treturn null;\n\t}\n\n\tconst isSuccess = mode === 'success';\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-go-live-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth={isSuccess ? '400px' : '520px'}\n\t\t>\n\t\t\t<ModalBody style={{ gap: '24px' }}>\n\t\t\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n\t\t\t\t\t<ModalIcon>\n\t\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t\t<SuccessIcon width={64} height={64} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ManifestGlass width={64} height={64} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ModalIcon>\n\n\t\t\t\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n\t\t\t\t\t\t<TitleMedium color={COLORS.content.primary}>\n\t\t\t\t\t\t\t{isSuccess ? 'Your agent is live!' : 'Ready to go live?'}\n\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t{isSuccess\n\t\t\t\t\t\t\t\t? 'You can manage your agents from the AI agent dashboard.'\n\t\t\t\t\t\t\t\t: 'This agent will start handling customer conversations immediately. You can pause it at any time.'}\n\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<ModalActions>\n\t\t\t\t\t{isSuccess ? (\n\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test=\"agent-go-dashboard\"\n\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Go to Agent dashboard\"\n\t\t\t\t\t\t\t\tTrailingIcon={ArrowRight}\n\t\t\t\t\t\t\t\tonClick={onGoToDashboard ?? onClose}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DraftButtonScope>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-save-draft\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText=\"Save as draft\"\n\t\t\t\t\t\t\t\t\tonClick={onSaveDraft}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DraftButtonScope>\n\t\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test=\"agent-confirm-go-live\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText=\"Go live now\"\n\t\t\t\t\t\t\t\t\tisLoading={isPublishing}\n\t\t\t\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</ModalActions>\n\t\t\t</ModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["GoLiveModal","mode","onClose","onConfirm","onSaveDraft","onGoToDashboard","isPublishing","isSuccess","jsx","StyledModal","ModalBody","jsxs","ModalIcon","SuccessIcon","ManifestGlass","TitleMedium","COLORS","BodyPrimary","ModalActions","Button","ArrowRight","Fragment","DraftButtonScope"],"mappings":"qeAgCaA,EAA0C,CAAC,CACvD,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,aAAAC,CACD,IAAM,CACL,GAAI,CAACL,EACJ,OAAO,KAGR,MAAMM,EAAYN,IAAS,UAE3B,OACCO,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,sBACV,KAAI,GACJ,QAAAP,EACA,MAAOK,EAAY,QAAU,QAE7B,gBAACG,EAAAA,UAAA,CAAU,MAAO,CAAE,IAAK,QACxB,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,KAAA,EAC5D,SAAA,CAAAH,MAACI,EAAAA,UAAA,CACC,SAAAL,EACAC,EAAAA,IAACK,EAAAA,QAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,QAEnCC,EAAAA,QAAA,CAAc,MAAO,GAAI,OAAQ,GAAI,EAExC,EAEAH,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,KAAA,EAC5D,SAAA,CAAAH,EAAAA,IAACO,EAAAA,aAAY,MAAOC,SAAO,QAAQ,QACjC,SAAAT,EAAY,sBAAwB,mBAAA,CACtC,EACAC,EAAAA,IAACS,EAAAA,aAAY,MAAOD,SAAO,QAAQ,UACjC,SAAAT,EACE,0DACA,kGAAA,CACJ,CAAA,CAAA,CACD,CAAA,EACD,EAEAC,EAAAA,IAACU,EAAAA,cACC,SAAAX,EACAC,EAAAA,IAAC,OAAI,MAAO,CAAE,QAAS,MAAA,EACtB,SAAAA,EAAAA,IAACW,EAAAA,OAAA,CACA,YAAU,qBACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,wBACX,aAAcC,EAAAA,QACd,QAASf,GAAmBH,CAAA,CAAA,CAC7B,CACD,EAEAS,EAAAA,KAAAU,EAAAA,SAAA,CACC,SAAA,CAAAb,MAACc,EAAAA,iBAAA,CACA,SAAAd,EAAAA,IAACW,EAAAA,OAAA,CACA,YAAU,2BACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,gBACX,QAASf,CAAA,CAAA,EAEX,QACC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAI,EAAAA,IAACW,EAAAA,OAAA,CACA,YAAU,wBACV,WAAW,UACX,KAAK,SACL,iBAAgB,GAChB,WAAW,cACX,UAAWb,EACX,QAASH,CAAA,CAAA,CACV,CACD,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,CAAA,CACD,CAAA,CAAA,CAGH"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),q=require("../../TypographyStyle.js"),x=require("../../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),q=require("../../TypographyStyle.js"),x=require("../../../constants/Theme.js"),h=require("../AgentBuilder.styled.js"),G=require("../constants/editorStyle.js"),S=require("../utils/mentionSerialization.js"),y=require("../utils/sourceIcons.js"),I=require("./MentionPicker.js"),J=require("../../../editor/BikEditor.js"),Y=a=>a.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/\r?\n/g,"<br>"),$=({label:a,value:o,onChange:E,maxLength:c,placeholder:R,minHeight:j="200px",resetKey:d,mentionItems:s,tools:k,onMentionSelect:O,onFocus:H,registerInsert:l,onCreateSubAgent:M,toolActions:B,integrationStatus:L,onConnectIntegration:P,action:A,...D})=>{const u=n.useRef(null),[_,p]=n.useState(o.length),g=n.useRef(o.length),w=n.useCallback(({text:e})=>{if(!e)return!1;const t=u.current,f=t?.getSelectedText().length??0,i=c-(g.current-f);return e.length<=i?!1:(i<=0||t?.insertContent(Y(e.slice(0,i))),!0)},[c]),T=n.useCallback((e,t,f,i)=>{const m=u.current;if(!m)return;const C=s.find(b=>String(b.id)===String(t)&&b.meta?.kind===e),N=f??C?.label??t,z=i??C?.meta?.source;m.insertInlineContent(`${S.buildMentionHtml(String(t),N,e,z)} `)},[s]);n.useEffect(()=>{if(l)return l(T),()=>l(null)},[l,T]);const F=n.useMemo(()=>S.instructionsToEditorHtml(o,s),[d]);return n.useEffect(()=>{p(o.length),g.current=o.length},[d]),r.jsxs(h.FieldBlock,{children:[r.jsxs(h.FieldLabelRow,{children:[r.jsx(q.TitleSmall,{color:x.COLORS.content.primary,children:a}),r.jsxs(q.BodyCaption,{color:x.COLORS.content.secondary,children:[_,"/",c]})]}),r.jsxs(h.AiTextAreaShell,{minHeight:j,"data-test":D["data-test"],children:[r.jsx(J.BikEditor,{ref:u,initialContent:F,placeholder:R,characterLimit:c,characterLimitHard:!0,onPaste:w,minHeight:"120px",maxHeight:"320px",style:{border:"none"},editorStyle:G.AGENT_EDITOR_STYLE,onFocus:H,mentions:{agents:s,removeTriggerOnDismiss:!0,renderChipIcon:e=>y.renderSourceIcon(y.sourceIcon(e??void 0),-6),renderDropdown:e=>r.jsx(I.MentionPicker,{...e,onCreateSubAgent:M,toolActions:B,integrationStatus:L,onConnectIntegration:P}),onSelect:e=>{const t=e.meta?.kind;t&&O?.(t,String(e.id))}},onChange:e=>{p(e.characterCount),g.current=e.characterCount;const t=u.current?.getJSON()??null;E(S.editorDocToInstructions(t,k))}},d),A]})]})};exports.MentionEditor=$;
|
|
2
2
|
//# sourceMappingURL=MentionEditor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionEditor.js","sources":["../../../../../src/components/agent-builder/components/MentionEditor.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef, MentionItem, PasteData } from '@src/editor';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool } from '../AgentBuilder.model';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport type { ToolAction, ToolSource } from '../constants/tools';\nimport {\n\tbuildMentionHtml,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, sourceIcon } from '../utils/sourceIcons';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (\n\tkind: 'tool' | 'subagent',\n\tid: string,\n\tlabel?: string,\n\tsource?: string,\n) => void;\n\n// Insert-safe HTML for a plain-text run: escape entities so pasted text is never\n// interpreted as markup, and keep line breaks (mirrors the plain-paste pipeline).\nconst plainTextToHtml = (text: string): string =>\n\ttext\n\t\t.replace(/&/g, '&')\n\t\t.replace(/</g, '<')\n\t\t.replace(/>/g, '>')\n\t\t.replace(/\\r?\\n/g, '<br>');\n\ninterface MentionEditorProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content. */\n\tresetKey?: string | number;\n\t/** Items shown in the `@` picker (tools, and sub-agents where allowed). */\n\tmentionItems: MentionItem[];\n\t/** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */\n\ttools: AgentTool[];\n\t/** Called when an item is picked from the `@` menu (to attach it upstream). */\n\tonMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;\n\tonFocus?: () => void;\n\t/** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */\n\tregisterInsert?: (fn: InsertFn | null) => void;\n\t/**\n\t * When set, the `@` picker's Sub-agent view shows a \"Create new\" row that calls\n\t * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's\n\t * own editors, which can't nest sub-agents).\n\t */\n\tonCreateSubAgent?: () => void;\n\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the `@` picker's\n\t * Tools view. Picking one opens its drawer instead of inserting a mention.\n\t */\n\ttoolActions?: ToolAction[];\n\tintegrationStatus?: Partial<Record<ToolSource, boolean>>;\n\tonConnectIntegration?: (source: ToolSource) => void;\n\t/** Optional action(s) rendered inside the shell, below the editor. */\n\taction?: React.ReactNode;\n\t'data-test'?: string;\n}\n\n/**\n * Presentational BikEditor field with `@` mentions. Stores firebase token text\n * (`{{tool:KEY}}` / `{{subagent:ID}}`). Context-free — both the builder's\n * Step-3 fields and the create-sub-agent drawer compose it.\n */\nexport const MentionEditor: React.FC<MentionEditorProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '200px',\n\tresetKey,\n\tmentionItems,\n\ttools,\n\tonMentionSelect,\n\tonFocus,\n\tregisterInsert,\n\tonCreateSubAgent,\n\ttoolActions,\n\tintegrationStatus,\n\tonConnectIntegration,\n\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\t// Live character count for the paste handler (BikEditor captures onPaste once\n\t// at mount, so it can't read the `count` state without going stale).\n\tconst countRef = useRef(value.length);\n\n\t// On paste, insert only the characters that still fit under the limit instead\n\t// of letting the paste overflow. Pastes that fit fall through to the editor's\n\t// normal (break-preserving) plain-paste pipeline.\n\tconst handlePaste = useCallback(\n\t\t({ text }: PasteData): boolean | void => {\n\t\t\tif (!text) {\n\t\t\t\treturn false; // non-text (e.g. images) → default handling\n\t\t\t}\n\t\t\tconst editor = editorRef.current;\n\t\t\tconst selectionLength = editor?.getSelectedText().length ?? 0;\n\t\t\tconst room = maxLength - (countRef.current - selectionLength);\n\t\t\tif (text.length <= room) {\n\t\t\t\treturn false; // fits → let the default plain-paste pipeline run\n\t\t\t}\n\t\t\tif (room <= 0) {\n\t\t\t\treturn true; // already full → drop the paste\n\t\t\t}\n\t\t\teditor?.insertContent(plainTextToHtml(text.slice(0, room)));\n\t\t\treturn true;\n\t\t},\n\t\t[maxLength],\n\t);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel, overrideSource) => {\n\t\t\tconst editor = editorRef.current;\n\t\t\tif (!editor) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst item = mentionItems.find(\n\t\t\t\t(m) =>\n\t\t\t\t\tString(m.id) === String(id) &&\n\t\t\t\t\t(m.meta as unknown as MentionKindMeta | undefined)?.kind === kind,\n\t\t\t);\n\t\t\tconst finalLabel = overrideLabel ?? item?.label ?? id;\n\t\t\t// Prefer the caller-supplied source: a JUST-created custom tool (Rest API /\n\t\t\t// email / Slack) isn't in `mentionItems` yet, so the lookup would miss and\n\t\t\t// the chip would render without its icon until reload.\n\t\t\tconst source =\n\t\t\t\toverrideSource ??\n\t\t\t\t(item?.meta as unknown as MentionKindMeta | undefined)?.source;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind, source)} `,\n\t\t\t);\n\t\t},\n\t\t[mentionItems],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!registerInsert) {\n\t\t\treturn;\n\t\t}\n\t\tregisterInsert(insert);\n\t\treturn () => registerInsert(null);\n\t}, [registerInsert, insert]);\n\n\t// Mount-only initial HTML; recomputed (editor remounted via key) on resetKey.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\tuseEffect(\n\t\t() => {\n\t\t\tsetCount(value.length);\n\t\t\tcountRef.current = value.length;\n\t\t},\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{count}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight={minHeight} data-test={rest['data-test']}>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={resetKey}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t// Soft limit: blocks typing past the cap; `onPaste` truncates a\n\t\t\t\t\t// paste to what still fits, and any residual overflow renders grey.\n\t\t\t\t\tcharacterLimit={maxLength}\n\t\t\t\t\tonPaste={handlePaste}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"320px\"\n\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\teditorStyle={AGENT_EDITOR_STYLE}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tmentions={{\n\t\t\t\t\t\tagents: mentionItems,\n\t\t\t\t\t\tremoveTriggerOnDismiss: true,\n\t\t\t\t\t\t// Tool chips lead with their source glyph (manifest / shopify / …);\n\t\t\t\t\t\t// sub-agent chips have no source, so no icon.\n\t\t\t\t\t\trenderChipIcon: (source) =>\n\t\t\t\t\t\t\trenderSourceIcon(sourceIcon(source ?? undefined), -6),\n\t\t\t\t\t\trenderDropdown: (props) => (\n\t\t\t\t\t\t\t<MentionPicker\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\tonCreateSubAgent={onCreateSubAgent}\n\t\t\t\t\t\t\t\ttoolActions={toolActions}\n\t\t\t\t\t\t\t\tintegrationStatus={integrationStatus}\n\t\t\t\t\t\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tonSelect: (item) => {\n\t\t\t\t\t\t\tconst kind = (item.meta as unknown as MentionKindMeta | undefined)\n\t\t\t\t\t\t\t\t?.kind;\n\t\t\t\t\t\t\tif (kind) {\n\t\t\t\t\t\t\t\tonMentionSelect?.(kind, String(item.id));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={(snapshot) => {\n\t\t\t\t\t\tsetCount(snapshot.characterCount);\n\t\t\t\t\t\tcountRef.current = snapshot.characterCount;\n\t\t\t\t\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t\t\t\t\tonChange(editorDocToInstructions(doc, tools));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{action}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["plainTextToHtml","text","MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","toolActions","integrationStatus","onConnectIntegration","action","rest","editorRef","useRef","count","setCount","useState","countRef","handlePaste","useCallback","editor","selectionLength","room","insert","kind","id","overrideLabel","overrideSource","item","m","finalLabel","source","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","renderSourceIcon","sourceIcon","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MentionEditor.js","sources":["../../../../../src/components/agent-builder/components/MentionEditor.tsx"],"sourcesContent":["import { BikEditor, BikEditorRef, MentionItem, PasteData } from '@src/editor';\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool } from '../AgentBuilder.model';\nimport {\n\tAiTextAreaShell,\n\tFieldBlock,\n\tFieldLabelRow,\n} from '../AgentBuilder.styled';\nimport { AGENT_EDITOR_STYLE } from '../constants/editorStyle';\nimport type { ToolAction, ToolSource } from '../constants/tools';\nimport {\n\tbuildMentionHtml,\n\teditorDocToInstructions,\n\tinstructionsToEditorHtml,\n\tMentionKindMeta,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, sourceIcon } from '../utils/sourceIcons';\nimport { MentionPicker } from './MentionPicker';\n\ntype InsertFn = (\n\tkind: 'tool' | 'subagent',\n\tid: string,\n\tlabel?: string,\n\tsource?: string,\n) => void;\n\n// Insert-safe HTML for a plain-text run: escape entities so pasted text is never\n// interpreted as markup, and keep line breaks (mirrors the plain-paste pipeline).\nconst plainTextToHtml = (text: string): string =>\n\ttext\n\t\t.replace(/&/g, '&')\n\t\t.replace(/</g, '<')\n\t\t.replace(/>/g, '>')\n\t\t.replace(/\\r?\\n/g, '<br>');\n\ninterface MentionEditorProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (text: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** Changing this remounts the editor with fresh content. */\n\tresetKey?: string | number;\n\t/** Items shown in the `@` picker (tools, and sub-agents where allowed). */\n\tmentionItems: MentionItem[];\n\t/** Tools used to serialise mention nodes back to `{{tool:KEY}}`. */\n\ttools: AgentTool[];\n\t/** Called when an item is picked from the `@` menu (to attach it upstream). */\n\tonMentionSelect?: (kind: 'tool' | 'subagent', id: string) => void;\n\tonFocus?: () => void;\n\t/** Receives an insert-at-cursor fn (and null on unmount) for side-panel adds. */\n\tregisterInsert?: (fn: InsertFn | null) => void;\n\t/**\n\t * When set, the `@` picker's Sub-agent view shows a \"Create new\" row that calls\n\t * this (opens the create-sub-agent drawer). Omit to hide it (e.g. the drawer's\n\t * own editors, which can't nest sub-agents).\n\t */\n\tonCreateSubAgent?: () => void;\n\t/**\n\t * Built-in tool actions (Rest API / Handover to email) shown in the `@` picker's\n\t * Tools view. Picking one opens its drawer instead of inserting a mention.\n\t */\n\ttoolActions?: ToolAction[];\n\tintegrationStatus?: Partial<Record<ToolSource, boolean>>;\n\tonConnectIntegration?: (source: ToolSource) => void;\n\t/** Optional action(s) rendered inside the shell, below the editor. */\n\taction?: React.ReactNode;\n\t'data-test'?: string;\n}\n\n/**\n * Presentational BikEditor field with `@` mentions. Stores firebase token text\n * (`{{tool:KEY}}` / `{{subagent:ID}}`). Context-free — both the builder's\n * Step-3 fields and the create-sub-agent drawer compose it.\n */\nexport const MentionEditor: React.FC<MentionEditorProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '200px',\n\tresetKey,\n\tmentionItems,\n\ttools,\n\tonMentionSelect,\n\tonFocus,\n\tregisterInsert,\n\tonCreateSubAgent,\n\ttoolActions,\n\tintegrationStatus,\n\tonConnectIntegration,\n\taction,\n\t...rest\n}) => {\n\tconst editorRef = useRef<BikEditorRef>(null);\n\tconst [count, setCount] = useState(value.length);\n\t// Live character count for the paste handler (BikEditor captures onPaste once\n\t// at mount, so it can't read the `count` state without going stale).\n\tconst countRef = useRef(value.length);\n\n\t// On paste, insert only the characters that still fit under the limit instead\n\t// of letting the paste overflow. Pastes that fit fall through to the editor's\n\t// normal (break-preserving) plain-paste pipeline.\n\tconst handlePaste = useCallback(\n\t\t({ text }: PasteData): boolean | void => {\n\t\t\tif (!text) {\n\t\t\t\treturn false; // non-text (e.g. images) → default handling\n\t\t\t}\n\t\t\tconst editor = editorRef.current;\n\t\t\tconst selectionLength = editor?.getSelectedText().length ?? 0;\n\t\t\tconst room = maxLength - (countRef.current - selectionLength);\n\t\t\tif (text.length <= room) {\n\t\t\t\treturn false; // fits → let the default plain-paste pipeline run\n\t\t\t}\n\t\t\tif (room <= 0) {\n\t\t\t\treturn true; // already full → drop the paste\n\t\t\t}\n\t\t\teditor?.insertContent(plainTextToHtml(text.slice(0, room)));\n\t\t\treturn true;\n\t\t},\n\t\t[maxLength],\n\t);\n\n\tconst insert = useCallback<InsertFn>(\n\t\t(kind, id, overrideLabel, overrideSource) => {\n\t\t\tconst editor = editorRef.current;\n\t\t\tif (!editor) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst item = mentionItems.find(\n\t\t\t\t(m) =>\n\t\t\t\t\tString(m.id) === String(id) &&\n\t\t\t\t\t(m.meta as unknown as MentionKindMeta | undefined)?.kind === kind,\n\t\t\t);\n\t\t\tconst finalLabel = overrideLabel ?? item?.label ?? id;\n\t\t\t// Prefer the caller-supplied source: a JUST-created custom tool (Rest API /\n\t\t\t// email / Slack) isn't in `mentionItems` yet, so the lookup would miss and\n\t\t\t// the chip would render without its icon until reload.\n\t\t\tconst source =\n\t\t\t\toverrideSource ??\n\t\t\t\t(item?.meta as unknown as MentionKindMeta | undefined)?.source;\n\t\t\teditor.insertInlineContent(\n\t\t\t\t`${buildMentionHtml(String(id), finalLabel, kind, source)} `,\n\t\t\t);\n\t\t},\n\t\t[mentionItems],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!registerInsert) {\n\t\t\treturn;\n\t\t}\n\t\tregisterInsert(insert);\n\t\treturn () => registerInsert(null);\n\t}, [registerInsert, insert]);\n\n\t// Mount-only initial HTML; recomputed (editor remounted via key) on resetKey.\n\tconst initialHtml = useMemo(\n\t\t() => instructionsToEditorHtml(value, mentionItems),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\tuseEffect(\n\t\t() => {\n\t\t\tsetCount(value.length);\n\t\t\tcountRef.current = value.length;\n\t\t},\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[resetKey],\n\t);\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<FieldLabelRow>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t{count}/{maxLength}\n\t\t\t\t</BodyCaption>\n\t\t\t</FieldLabelRow>\n\n\t\t\t<AiTextAreaShell minHeight={minHeight} data-test={rest['data-test']}>\n\t\t\t\t<BikEditor\n\t\t\t\t\tkey={resetKey}\n\t\t\t\t\tref={editorRef}\n\t\t\t\t\tinitialContent={initialHtml}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t// Hard limit: nothing may push the content past the cap. Typing,\n\t\t\t\t\t// Enter and drop past it are rejected; a paste is truncated to fill\n\t\t\t\t\t// the remaining room (`onPaste` pre-trims; the hard filter trims any\n\t\t\t\t\t// residue). Content loaded over the cap is kept and can only shrink.\n\t\t\t\t\t// Same metric as the shown count.\n\t\t\t\t\tcharacterLimit={maxLength}\n\t\t\t\t\tcharacterLimitHard\n\t\t\t\t\tonPaste={handlePaste}\n\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\tmaxHeight=\"320px\"\n\t\t\t\t\tstyle={{ border: 'none' }}\n\t\t\t\t\teditorStyle={AGENT_EDITOR_STYLE}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tmentions={{\n\t\t\t\t\t\tagents: mentionItems,\n\t\t\t\t\t\tremoveTriggerOnDismiss: true,\n\t\t\t\t\t\t// Tool chips lead with their source glyph (manifest / shopify / …);\n\t\t\t\t\t\t// sub-agent chips have no source, so no icon.\n\t\t\t\t\t\trenderChipIcon: (source) =>\n\t\t\t\t\t\t\trenderSourceIcon(sourceIcon(source ?? undefined), -6),\n\t\t\t\t\t\trenderDropdown: (props) => (\n\t\t\t\t\t\t\t<MentionPicker\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\tonCreateSubAgent={onCreateSubAgent}\n\t\t\t\t\t\t\t\ttoolActions={toolActions}\n\t\t\t\t\t\t\t\tintegrationStatus={integrationStatus}\n\t\t\t\t\t\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tonSelect: (item) => {\n\t\t\t\t\t\t\tconst kind = (item.meta as unknown as MentionKindMeta | undefined)\n\t\t\t\t\t\t\t\t?.kind;\n\t\t\t\t\t\t\tif (kind) {\n\t\t\t\t\t\t\t\tonMentionSelect?.(kind, String(item.id));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={(snapshot) => {\n\t\t\t\t\t\tsetCount(snapshot.characterCount);\n\t\t\t\t\t\tcountRef.current = snapshot.characterCount;\n\t\t\t\t\t\tconst doc = editorRef.current?.getJSON() ?? null;\n\t\t\t\t\t\tonChange(editorDocToInstructions(doc, tools));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{action}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n"],"names":["plainTextToHtml","text","MentionEditor","label","value","onChange","maxLength","placeholder","minHeight","resetKey","mentionItems","tools","onMentionSelect","onFocus","registerInsert","onCreateSubAgent","toolActions","integrationStatus","onConnectIntegration","action","rest","editorRef","useRef","count","setCount","useState","countRef","handlePaste","useCallback","editor","selectionLength","room","insert","kind","id","overrideLabel","overrideSource","item","m","finalLabel","source","buildMentionHtml","useEffect","initialHtml","useMemo","instructionsToEditorHtml","FieldBlock","jsxs","FieldLabelRow","jsx","TitleSmall","COLORS","BodyCaption","AiTextAreaShell","BikEditor","AGENT_EDITOR_STYLE","renderSourceIcon","sourceIcon","props","MentionPicker","snapshot","doc","editorDocToInstructions"],"mappings":"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"}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),ee=require("../../../assets/icons/chevronRight.svg.js"),te=require("../../../assets/icons/searchIcon.svg.js"),ne=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),ee=require("../../../assets/icons/chevronRight.svg.js"),te=require("../../../assets/icons/searchIcon.svg.js"),ne=require("../../../icons/Arrows/Normal arrows/ArrowLeft.js"),s=require("react"),oe=require("styled-components"),N=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),g=require("../constants/tools.js"),G=require("../utils/mentionSerialization.js"),v=require("../utils/sourceIcons.js"),Y=require("../../../icons/Informational/Common UI/Shield.js"),re=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},p=re(oe),k=i=>i.meta,C=i=>k(i)?.plainLabel??i.label,ie="__bik_create_subagent__",le=({items:i,onSelect:L,registerKeyHandler:j,onClose:O,onCreateSubAgent:R,initialSource:U,toolActions:S,integrationStatus:F,onConnectIntegration:J})=>{const[Z,E]=s.useState(null),[u,q]=s.useState(U??null),[w,M]=s.useState(null),[A,m]=s.useState(-1),[I,Q]=s.useState(""),y=s.useMemo(()=>i.filter(e=>k(e)?.kind==="tool"),[i]),_=s.useMemo(()=>i.filter(e=>k(e)?.kind==="subagent"),[i]),P=s.useMemo(()=>{const e=[];return y.forEach(r=>{const x=k(r)?.source??"other";e.includes(x)||e.push(x)}),e},[y]),z=s.useMemo(()=>new Map((S??[]).map(e=>[e.source,e])),[S]),$=s.useMemo(()=>g.CATEGORIES.filter(e=>e.key==="tool"?y.length>0||(S?.length??0)>0:_.length>0||!!R),[y.length,_.length,R,S?.length]),D=$.length===1?$[0].key:null,d=Z??D,f=d?d==="subagent"?{title:"Sub-agent",onBack:D?void 0:()=>E(null)}:u?{title:G.toolSourceLabel(u),onBack:U?void 0:()=>q(null),icon:v.sourceIcon(u)}:w==="integrations"?{title:"Integrations",onBack:()=>M(null)}:{title:"Tools",onBack:D?void 0:()=>E(null)}:null,c=s.useMemo(()=>{if(!d)return $.map(n=>({id:n.key,label:n.label,drillsIn:!0,onActivate:()=>{E(n.key),q(null),M(null)}}));if(d==="subagent"){const n=I.trim().toLowerCase(),h=_.filter(b=>!n||C(b).toLowerCase().includes(n)).map(b=>({id:String(b.id),label:C(b),drillsIn:!1,onActivate:()=>L(b)}));return R&&h.push({id:ie,label:"Create new",drillsIn:!1,isCreate:!0,onActivate:()=>{O?.(),R()}}),h}if(!u){const n=(S??[]).map(t=>t.source).filter(t=>!P.includes(t)),h=[...P,...n],b=t=>{const a=z.get(t);if((a!==void 0?a.connected:F?.[t])===!1)return{id:t,label:G.toolSourceLabel(t),drillsIn:!1,icon:v.sourceIcon(t)??a?.icon,rightLabel:"Connect",onActivate:()=>{O?.(),a?.onConnect?a.onConnect():J?.(t)}};const X=y.filter(T=>(k(T)?.source??"other")===t);if(X.length+(a?1:0)===1){const T=v.sourceIcon(t)??a?.icon;if(a)return{id:t,label:a.label,drillsIn:!1,icon:T,onActivate:()=>{O?.(),a.onSelect()}};const B=X[0];return{id:String(B.id),label:C(B),drillsIn:!1,icon:T,authRequired:k(B)?.authRequired,onActivate:()=>L(B)}}return{id:t,label:G.toolSourceLabel(t),drillsIn:!0,icon:v.sourceIcon(t)??a?.icon,onActivate:()=>q(t)}};if(w==="integrations")return h.filter(g.isIntegrationSource).sort((t,a)=>g.toolSourceRank(t)-g.toolSourceRank(a)).map(b);const W=h.filter(t=>!g.isIntegrationSource(t)).map(t=>({rank:g.toolSourceRank(t),row:b(t)}));return h.some(g.isIntegrationSource)&&W.push({rank:g.INTEGRATIONS_RANK,row:{id:"__integrations__",label:"Integrations",drillsIn:!0,onActivate:()=>{M("integrations"),q(null)}}}),W.sort((t,a)=>t.rank-a.rank).map(t=>t.row)}const e=I.trim().toLowerCase(),r=y.filter(n=>(k(n)?.source??"other")===u).filter(n=>!e||C(n).toLowerCase().includes(e)).map(n=>({id:String(n.id),label:C(n),drillsIn:!1,authRequired:k(n)?.authRequired,onActivate:()=>L(n)})),x=z.get(u);if(x){const n=u in g.CONFIG_TOOL_SOURCES;r.push({id:`create:${u}`,label:x.label,drillsIn:!1,isCreate:!n,onActivate:()=>{O?.(),x.onSelect()}})}return r},[d,$,u,w,I,y,_,P,L,O,R,S,z,F,J]);s.useEffect(()=>m(-1),[d,u,w,I,i]),s.useEffect(()=>Q(""),[d,u,w]);const V=s.useRef({rows:c,activeIndex:A,header:f});V.current={rows:c,activeIndex:A,header:f},s.useEffect(()=>{if(j)return j(e=>{const{rows:r,activeIndex:x,header:n}=V.current;switch(e.key){case"ArrowDown":return r.length&&m(h=>(h+1)%r.length),!0;case"ArrowUp":return r.length&&m(h=>(h+r.length-1)%r.length),!0;case"ArrowRight":case"Enter":return(r[x]??r[0])?.onActivate(),!0;case"ArrowLeft":return n?.onBack?(n.onBack(),!0):!1;default:return!1}}),()=>j(null)},[j]);const K=d?c.length&&!c[0].drillsIn?"items":"sources":"categories",H=d==="tool"&&!!u||d==="subagent";return o.jsxs(ae,{className:`bik-mention-picker bik-mention-picker--${K}`,children:[f&&o.jsxs(ge,{type:"button",onClick:f.onBack,disabled:!f.onBack,style:{background:l.COLORS.surface.subdued,cursor:f.onBack?"pointer":"default"},children:[f.onBack&&o.jsx(ne.default,{width:20,height:20,color:l.COLORS.content.primary}),f.icon&&v.renderSourceIcon(f.icon),o.jsxs(N.TitleSmall,{children:[" ",f.title]})]}),H&&o.jsxs(se,{children:[o.jsx(te.default,{width:20,height:20,color:l.COLORS.content.placeholder}),o.jsx(ce,{autoFocus:!0,value:I,placeholder:"Search","data-test":"mention-picker-search",onChange:e=>Q(e.target.value),onKeyDown:e=>{c.length&&(e.key==="ArrowDown"?(e.preventDefault(),m(r=>(r+1)%c.length)):e.key==="ArrowUp"?(e.preventDefault(),m(r=>(r+c.length-1)%c.length)):e.key==="Enter"&&(e.preventDefault(),(c[A]??c[0])?.onActivate()))}})]}),c.length===0?o.jsx(xe,{children:d==="subagent"?null:"No tools available"}):c.map((e,r)=>o.jsx(ue,{type:"button",$active:r===A,onMouseEnter:()=>m(r),onMouseLeave:()=>m(-1),onClick:e.onActivate,children:e.isCreate?o.jsx(pe,{children:e.label}):o.jsxs(o.Fragment,{children:[o.jsxs(de,{children:[v.renderSourceIcon(e.icon),o.jsx(N.BodySecondary,{color:l.COLORS.content.primary,children:e.label}),e.authRequired&&o.jsx(Y.default,{size:14,"aria-label":"This tool requires customer verification"})]}),e.rightLabel?o.jsx(he,{children:e.rightLabel}):e.drillsIn&&o.jsx(ee.default,{width:12,height:12})]})},e.id)),c.some(e=>e.authRequired)&&o.jsxs(fe,{children:[o.jsx(Y.default,{size:14}),o.jsx(N.BodyCaption,{color:l.COLORS.content.secondary,children:"This tool requires customer verification"})]})]})},ae=p.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
min-width: 240px;
|
|
5
5
|
max-height: 301px;
|
|
6
6
|
overflow-y: auto;
|
|
7
|
-
background: ${
|
|
8
|
-
border: 1px solid ${
|
|
7
|
+
background: ${l.COLORS.surface.standard};
|
|
8
|
+
border: 1px solid ${l.COLORS.stroke.primary};
|
|
9
9
|
border-radius: 4px;
|
|
10
10
|
box-shadow: 0px -2px 8px 0px #0000001f;
|
|
11
|
-
`,
|
|
11
|
+
`,se=p.default.div`
|
|
12
12
|
display: flex;
|
|
13
13
|
align-items: center;
|
|
14
14
|
gap: 8px;
|
|
15
15
|
padding: 10px 12px;
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
flex-shrink: 0;
|
|
17
|
+
border-bottom: 1px solid ${l.COLORS.stroke.primary};
|
|
18
|
+
`,ce=p.default.input`
|
|
18
19
|
flex: 1;
|
|
19
20
|
min-width: 0;
|
|
20
21
|
border: none;
|
|
@@ -22,12 +23,12 @@
|
|
|
22
23
|
background: transparent;
|
|
23
24
|
font-family: Inter;
|
|
24
25
|
font-size: 14px;
|
|
25
|
-
color: ${
|
|
26
|
+
color: ${l.COLORS.content.primary};
|
|
26
27
|
|
|
27
28
|
&::placeholder {
|
|
28
|
-
color: ${
|
|
29
|
+
color: ${l.COLORS.content.placeholder};
|
|
29
30
|
}
|
|
30
|
-
`,ue=
|
|
31
|
+
`,ue=p.default.button`
|
|
31
32
|
display: flex;
|
|
32
33
|
justify-content: space-between;
|
|
33
34
|
align-items: center;
|
|
@@ -35,57 +36,64 @@
|
|
|
35
36
|
width: 100%;
|
|
36
37
|
padding: 8px 10px;
|
|
37
38
|
height: 48px;
|
|
39
|
+
/* The card is a flex column with a max-height; without these a long list
|
|
40
|
+
compresses its rows below 48px (why only the short first step looked right)
|
|
41
|
+
instead of scrolling. Pin the row so the card scrolls instead. */
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
flex-shrink: 0;
|
|
38
44
|
border: none;
|
|
39
|
-
border-bottom: 1px solid ${
|
|
40
|
-
background: ${i=>i.$active?
|
|
45
|
+
border-bottom: 1px solid ${l.COLORS.stroke.primary};
|
|
46
|
+
background: ${i=>i.$active?l.COLORS.surface.subdued:"transparent"};
|
|
41
47
|
cursor: pointer;
|
|
42
48
|
text-align: left;
|
|
43
49
|
|
|
44
50
|
&:hover {
|
|
45
|
-
background: ${
|
|
51
|
+
background: ${l.COLORS.surface.hovered};
|
|
46
52
|
}
|
|
47
|
-
`,de=
|
|
53
|
+
`,de=p.default.div`
|
|
48
54
|
display: flex;
|
|
49
55
|
align-items: center;
|
|
50
56
|
gap: 12px;
|
|
51
57
|
min-width: 0;
|
|
52
|
-
`,fe=
|
|
58
|
+
`,fe=p.default.div`
|
|
53
59
|
display: flex;
|
|
54
60
|
align-items: center;
|
|
55
61
|
gap: 6px;
|
|
56
62
|
padding: 8px 12px;
|
|
57
|
-
border-top: 1px solid ${
|
|
58
|
-
`,
|
|
63
|
+
border-top: 1px solid ${l.COLORS.stroke.primary};
|
|
64
|
+
`,he=p.default.span`
|
|
59
65
|
flex-shrink: 0;
|
|
60
|
-
color: ${
|
|
66
|
+
color: ${l.COLORS.content.brand};
|
|
61
67
|
font-family: Inter;
|
|
62
68
|
font-size: 14px;
|
|
63
69
|
font-weight: 600;
|
|
64
70
|
white-space: nowrap;
|
|
65
|
-
`,
|
|
71
|
+
`,pe=p.default.div`
|
|
66
72
|
width: 100%;
|
|
67
73
|
text-align: center;
|
|
68
|
-
color: ${
|
|
74
|
+
color: ${l.COLORS.content.brand};
|
|
69
75
|
font-family: Inter;
|
|
70
76
|
font-size: 14px;
|
|
71
77
|
font-weight: 600;
|
|
72
|
-
`,ge=
|
|
78
|
+
`,ge=p.default.button`
|
|
73
79
|
display: flex;
|
|
74
80
|
align-items: center;
|
|
75
81
|
padding: 12px 16px;
|
|
76
82
|
border: none;
|
|
77
|
-
border-bottom: 1px solid ${
|
|
83
|
+
border-bottom: 1px solid ${l.COLORS.stroke.primary};
|
|
78
84
|
background: transparent;
|
|
79
85
|
cursor: pointer;
|
|
80
86
|
font-family: Inter;
|
|
81
87
|
font-size: 12px;
|
|
82
88
|
font-weight: 600;
|
|
83
89
|
height: 48px;
|
|
90
|
+
box-sizing: border-box;
|
|
91
|
+
flex-shrink: 0;
|
|
84
92
|
gap: 4px;
|
|
85
|
-
`,xe=
|
|
93
|
+
`,xe=p.default.div`
|
|
86
94
|
padding: 12px 10px;
|
|
87
95
|
font-family: Inter;
|
|
88
96
|
font-size: 13px;
|
|
89
|
-
color: ${
|
|
90
|
-
`;exports.MentionPicker=
|
|
97
|
+
color: ${l.COLORS.content.secondary};
|
|
98
|
+
`;exports.MentionPicker=le;
|
|
91
99
|
//# sourceMappingURL=MentionPicker.js.map
|