@bikdotai/bik-component-library 0.0.866 → 0.0.867
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/agent-builder/AgentBuilder.js +1 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.js.map +1 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js +151 -29
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/ChannelSelectModal.js +2 -0
- package/dist/cjs/components/agent-builder/components/ChannelSelectModal.js.map +1 -0
- package/dist/cjs/components/agent-builder/components/ChannelsSection.js +2 -0
- package/dist/cjs/components/agent-builder/components/ChannelsSection.js.map +1 -0
- package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js +5 -5
- package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.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 +2 -2
- package/dist/cjs/components/agent-builder/components/MentionEditor.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/MentionField.js +1 -1
- package/dist/cjs/components/agent-builder/components/MentionField.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/MentionPicker.js +13 -13
- package/dist/cjs/components/agent-builder/components/MentionPicker.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/SelectableListSection.js +3 -3
- package/dist/cjs/components/agent-builder/components/SelectableListSection.js.map +1 -1
- package/dist/cjs/components/agent-builder/constants/channels.js +2 -0
- package/dist/cjs/components/agent-builder/constants/channels.js.map +1 -0
- package/dist/cjs/components/agent-builder/constants/steps.js +1 -1
- package/dist/cjs/components/agent-builder/constants/steps.js.map +1 -1
- package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js +1 -1
- package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step1About.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step1About.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step2WhenItStepsIn.js +2 -2
- package/dist/cjs/components/agent-builder/steps/Step2WhenItStepsIn.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step4HandoverRules.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step4HandoverRules.js.map +1 -1
- package/dist/cjs/components/agent-builder/utils/mentionSerialization.js +2 -2
- package/dist/cjs/components/agent-builder/utils/mentionSerialization.js.map +1 -1
- package/dist/cjs/components/agent-builder/utils/sourceIcons.js +1 -1
- package/dist/cjs/components/agent-builder/utils/sourceIcons.js.map +1 -1
- package/dist/cjs/icons/Social/Channels/ManifestGlass.js +2 -0
- package/dist/cjs/icons/Social/Channels/ManifestGlass.js.map +1 -0
- package/dist/cjs/icons/Social/Channels/ShipStation.js +2 -0
- package/dist/cjs/icons/Social/Channels/ShipStation.js.map +1 -0
- package/dist/cjs/icons/Social/Channels/Skio.js +2 -0
- package/dist/cjs/icons/Social/Channels/Skio.js.map +1 -0
- package/dist/cjs/icons/index.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/agent-builder/AgentBuilder.js +103 -97
- package/dist/esm/components/agent-builder/AgentBuilder.js.map +1 -1
- package/dist/esm/components/agent-builder/AgentBuilder.model.d.ts +76 -0
- package/dist/esm/components/agent-builder/AgentBuilder.styled.d.ts +68 -0
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js +224 -59
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/esm/components/agent-builder/components/ChannelSelectModal.d.ts +26 -0
- package/dist/esm/components/agent-builder/components/ChannelSelectModal.js +121 -0
- package/dist/esm/components/agent-builder/components/ChannelSelectModal.js.map +1 -0
- package/dist/esm/components/agent-builder/components/ChannelsSection.d.ts +10 -0
- package/dist/esm/components/agent-builder/components/ChannelsSection.js +183 -0
- package/dist/esm/components/agent-builder/components/ChannelsSection.js.map +1 -0
- package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js +135 -132
- package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
- package/dist/esm/components/agent-builder/components/GoLiveModal.js +12 -12
- package/dist/esm/components/agent-builder/components/GoLiveModal.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionEditor.d.ts +2 -0
- package/dist/esm/components/agent-builder/components/MentionEditor.js +47 -45
- package/dist/esm/components/agent-builder/components/MentionEditor.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionField.js +52 -51
- package/dist/esm/components/agent-builder/components/MentionField.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionPicker.d.ts +5 -0
- package/dist/esm/components/agent-builder/components/MentionPicker.js +134 -132
- package/dist/esm/components/agent-builder/components/MentionPicker.js.map +1 -1
- package/dist/esm/components/agent-builder/components/SelectableListSection.d.ts +2 -0
- package/dist/esm/components/agent-builder/components/SelectableListSection.js +48 -46
- package/dist/esm/components/agent-builder/components/SelectableListSection.js.map +1 -1
- package/dist/esm/components/agent-builder/constants/channels.d.ts +56 -0
- package/dist/esm/components/agent-builder/constants/channels.js +41 -0
- package/dist/esm/components/agent-builder/constants/channels.js.map +1 -0
- package/dist/esm/components/agent-builder/constants/steps.d.ts +31 -1
- package/dist/esm/components/agent-builder/constants/steps.js +15 -6
- package/dist/esm/components/agent-builder/constants/steps.js.map +1 -1
- package/dist/esm/components/agent-builder/context/AgentBuilderContext.d.ts +13 -1
- package/dist/esm/components/agent-builder/context/AgentBuilderContext.js +157 -148
- package/dist/esm/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
- package/dist/esm/components/agent-builder/index.d.ts +5 -2
- package/dist/esm/components/agent-builder/steps/Step1About.js +15 -13
- package/dist/esm/components/agent-builder/steps/Step1About.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.js +55 -48
- package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js +158 -157
- package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step4HandoverRules.d.ts +11 -0
- package/dist/esm/components/agent-builder/steps/Step4HandoverRules.js +127 -23
- package/dist/esm/components/agent-builder/steps/Step4HandoverRules.js.map +1 -1
- package/dist/esm/components/agent-builder/utils/mentionSerialization.d.ts +10 -3
- package/dist/esm/components/agent-builder/utils/mentionSerialization.js +31 -23
- package/dist/esm/components/agent-builder/utils/mentionSerialization.js.map +1 -1
- package/dist/esm/components/agent-builder/utils/sourceIcons.d.ts +7 -5
- package/dist/esm/components/agent-builder/utils/sourceIcons.js +26 -26
- package/dist/esm/components/agent-builder/utils/sourceIcons.js.map +1 -1
- package/dist/esm/icons/Social/Channels/ManifestGlass.d.ts +6 -0
- package/dist/esm/icons/Social/Channels/ManifestGlass.js +252 -0
- package/dist/esm/icons/Social/Channels/ManifestGlass.js.map +1 -0
- package/dist/esm/icons/Social/Channels/ShipStation.d.ts +6 -0
- package/dist/esm/icons/Social/Channels/ShipStation.js +31 -0
- package/dist/esm/icons/Social/Channels/ShipStation.js.map +1 -0
- package/dist/esm/icons/Social/Channels/Skio.d.ts +6 -0
- package/dist/{cjs/assets/icons/Skio.svg.js → esm/icons/Social/Channels/Skio.js} +31 -2
- package/dist/esm/icons/Social/Channels/Skio.js.map +1 -0
- package/dist/esm/icons/Social/Channels/index.d.ts +3 -0
- package/dist/esm/icons/index.d.ts +25 -25
- package/dist/esm/icons/index.js +330 -324
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/index.js +671 -663
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/assets/icons/BigCommerce.svg.js +0 -2
- package/dist/cjs/assets/icons/BigCommerce.svg.js.map +0 -1
- package/dist/cjs/assets/icons/Gorgias.svg.js +0 -2
- package/dist/cjs/assets/icons/Gorgias.svg.js.map +0 -1
- package/dist/cjs/assets/icons/ManifestGlass.svg.js +0 -2
- package/dist/cjs/assets/icons/ManifestGlass.svg.js.map +0 -1
- package/dist/cjs/assets/icons/ShipStation.svg.js +0 -2
- package/dist/cjs/assets/icons/ShipStation.svg.js.map +0 -1
- package/dist/cjs/assets/icons/Shopify.svg.js +0 -2
- package/dist/cjs/assets/icons/Shopify.svg.js.map +0 -1
- package/dist/cjs/assets/icons/Skio.svg.js.map +0 -1
- package/dist/esm/assets/icons/BigCommerce.svg.js +0 -6
- package/dist/esm/assets/icons/BigCommerce.svg.js.map +0 -1
- package/dist/esm/assets/icons/Gorgias.svg.js +0 -6
- package/dist/esm/assets/icons/Gorgias.svg.js.map +0 -1
- package/dist/esm/assets/icons/ManifestGlass.svg.js +0 -6
- package/dist/esm/assets/icons/ManifestGlass.svg.js.map +0 -1
- package/dist/esm/assets/icons/ShipStation.svg.js +0 -6
- package/dist/esm/assets/icons/ShipStation.svg.js.map +0 -1
- package/dist/esm/assets/icons/Shopify.svg.js +0 -6
- package/dist/esm/assets/icons/Shopify.svg.js.map +0 -1
- package/dist/esm/assets/icons/Skio.svg.js +0 -6
- package/dist/esm/assets/icons/Skio.svg.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),Se=require("../../constants/Theme.js"),s=require("./AgentBuilder.styled.js"),he=require("./components/AgentBuilderFooter.js"),ve=require("./components/AgentBuilderTopBar.js"),be=require("./components/DiscardModal.js"),fe=require("./components/GoLiveModal.js"),Ce=require("./components/StepRail.js"),pe=require("./components/UndoToast.js"),k=require("./context/AgentBuilderContext.js"),Ae=require("./steps/Step1About.js"),je=require("./steps/Step2WhenItStepsIn.js"),me=require("./steps/Step3HowItResponds.js"),xe=require("./steps/Step4HandoverRules.js"),Le=require("../spinner/Spinner.js"),ye=()=>{const{activeStep:u}=k.useAgentBuilderContext();switch(u){case"about":return t.jsx(Ae.Step1About,{});case"trigger":return t.jsx(je.Step2WhenItStepsIn,{});case"response":return t.jsx(me.Step3HowItResponds,{});case"handover":return t.jsx(xe.Step4HandoverRules,{});default:return null}},q=u=>{const{config:I,onChange:v,onStepChange:d,onDiscard:b,onSaveDraft:i,onPublish:f,onBack:g,onTestAgent:S,onGoToDashboard:h,onCreateSubAgent:r,onFetchSubAgent:M,onUpdateSubAgent:R,onImproveSubAgent:w,onImproveToolInstructions:G,onConnectIntegration:P,onManageChannels:H,onSmartAgentHandover:F,...O}=u,{value:l,activeStep:U,availableTools:N,availableSubAgents:W,availableIntents:z=[],availableModels:E=[],configToolTemplates:_,integrationStatus:$,variablesData:J,validation:K,applicationType:Q,availableChannels:V,charLimits:X,isSaving:C,isPublishing:p,isLoading:Y,footerHint:Z="Changes don’t affect customers until you go live",disableStepNavigation:ee,debugLog:A}=I,[j,o]=a.useState(null),[m,x]=a.useState(!1),[ne,L]=a.useState(!1),[te,c]=a.useState(!1),[y,T]=a.useState(!1),n=a.useCallback((e,...ge)=>{A&&console.log(`[AgentBuilder] ${e}`,...ge)},[A]),ae=a.useCallback(e=>{n("onChange",e),v(e)},[n,v]),oe=a.useCallback(e=>{n("onStepChange",e),d?.(e)},[n,d]),se=a.useCallback(()=>(n("onSaveDraft"),i()),[n,i]),ie=a.useCallback(()=>(n("onPublish"),f()),[n,f]),re=a.useCallback(()=>{n("onBack"),c(!0)},[n]),le=a.useCallback(()=>{n("onDiscardAndLeave"),c(!1),b()},[n,b]),D=a.useCallback(async()=>{n("onSaveDraftAndLeave");const e=i();if(c(!1),e&&typeof e.then=="function"){T(!0);try{await e}finally{T(!1)}}g?.()},[n,i,g]),ce=a.useCallback(async()=>{n("onTestAgent");const e=S?.();if(e&&typeof e.then=="function"){L(!0);try{await e}finally{L(!1)}}},[n,S]),B=a.useCallback(()=>{n("onGoToDashboard"),h?.()},[n,h]),ue=a.useCallback(e=>(n("onCreateSubAgent",e),r?r(e):Promise.reject(new Error("onCreateSubAgent not provided"))),[n,r]),de=async()=>{n("onGoLiveConfirm");const e=ie();if(e&&typeof e.then=="function"){o(null),x(!0);try{await e,o("success")}finally{x(!1)}}else o("success")};return t.jsx(k.AgentBuilderProvider,{value:l,onChange:ae,activeStep:U,onStepChange:d?oe:void 0,availableTools:N,availableSubAgents:W,availableIntents:z,availableModels:E,configToolTemplates:_,integrationStatus:$,onConnectIntegration:P,variablesData:J,validation:K,applicationType:Q,availableChannels:V,onManageChannels:H,onSmartAgentHandover:F,charLimits:X,disableStepNavigation:ee,onCreateSubAgent:r?ue:void 0,onFetchSubAgent:M,onUpdateSubAgent:R,onImproveSubAgent:w,onImproveToolInstructions:G,children:t.jsxs(s.BuilderRoot,{"data-test":O["data-test"]??"agent-builder",children:[t.jsx(ve.AgentBuilderTopBar,{name:l.name,status:l.status,onBack:g?re:void 0,onSaveDraft:D,isSaving:C||y}),t.jsxs(s.Main,{children:[t.jsx(s.Rail,{children:t.jsx(Ce.StepRail,{})}),t.jsx(s.Content,{children:Y?t.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%"},children:t.jsx(Le.Spinner,{size:"large",color:Se.COLORS.stroke.brand})}):t.jsxs(s.ContentCard,{children:[t.jsx(s.StepScroll,{children:t.jsx(ye,{})}),t.jsx(he.AgentBuilderFooter,{footerHint:Z,onTestAgent:S?ce:void 0,isTesting:ne,onGoLive:()=>{n("onGoLive"),o("confirm")},isPublishing:p||m})]})})]}),t.jsx(fe.GoLiveModal,{mode:j,onClose:()=>{const e=j==="success";o(null),e&&B()},onConfirm:de,onSaveDraft:()=>{o(null),se()},onGoToDashboard:h?B:void 0,isPublishing:p||m}),t.jsx(be.DiscardModal,{open:te,onClose:()=>c(!1),onDiscard:le,onSaveDraft:D,disableSaveDraft:!l.name.trim(),isSaving:C||y}),t.jsx(pe.UndoToast,{})]})})};q.displayName="AgentBuilder";exports.AgentBuilder=q;
|
|
2
2
|
//# sourceMappingURL=AgentBuilder.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgentBuilder.js","sources":["../../../../src/components/agent-builder/AgentBuilder.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Spinner } from '@src/components/spinner';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAgentBuilderProps,\n\tAgentValue,\n\tSubAgentDraft,\n} from './AgentBuilder.model';\nimport {\n\tBuilderRoot,\n\tContent,\n\tContentCard,\n\tMain,\n\tRail,\n\tStepScroll,\n} from './AgentBuilder.styled';\nimport { AgentBuilderFooter } from './components/AgentBuilderFooter';\nimport { AgentBuilderTopBar } from './components/AgentBuilderTopBar';\nimport { DiscardModal } from './components/DiscardModal';\nimport { GoLiveModal, GoLiveModalMode } from './components/GoLiveModal';\nimport { StepRail } from './components/StepRail';\nimport { UndoToast } from './components/UndoToast';\nimport {\n\tAgentBuilderProvider,\n\tuseAgentBuilderContext,\n} from './context/AgentBuilderContext';\nimport { Step1About } from './steps/Step1About';\nimport { Step2WhenItStepsIn } from './steps/Step2WhenItStepsIn';\nimport { Step3HowItResponds } from './steps/Step3HowItResponds';\nimport { Step4HandoverRules } from './steps/Step4HandoverRules';\n\nconst StepContent: React.FC = () => {\n\tconst { activeStep } = useAgentBuilderContext();\n\tswitch (activeStep) {\n\t\tcase 'about':\n\t\t\treturn <Step1About />;\n\t\tcase 'trigger':\n\t\t\treturn <Step2WhenItStepsIn />;\n\t\tcase 'response':\n\t\t\treturn <Step3HowItResponds />;\n\t\tcase 'handover':\n\t\t\treturn <Step4HandoverRules />;\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\n\n/**\n * 4-step creation/edit wizard body for an AI agent. Presentational and\n * controlled — the consumer owns the `value`, persistence and routing.\n *\n * @example\n * <AgentBuilder\n * value={agent}\n * onChange={(patch) => setAgent({ ...agent, ...patch })}\n * availableTools={tools}\n * availableSubAgents={subAgents}\n * onDiscard={() => router.back()}\n * onSaveDraft={saveDraft}\n * onPublish={publish}\n * />\n */\nexport const AgentBuilder: React.FC<AgentBuilderProps> = (props) => {\n\tconst {\n\t\tconfig,\n\t\tonChange,\n\t\tonStepChange,\n\t\tonDiscard,\n\t\tonSaveDraft,\n\t\tonPublish,\n\t\tonBack,\n\t\tonTestAgent,\n\t\tonGoToDashboard,\n\t\tonCreateSubAgent,\n\t\tonFetchSubAgent,\n\t\tonUpdateSubAgent,\n\t\tonImproveSubAgent,\n\t\tonImproveToolInstructions,\n\t\tonConnectIntegration,\n\t\t...rest\n\t} = props;\n\tconst {\n\t\tvalue,\n\t\tactiveStep,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tavailableIntents = [],\n\t\tavailableModels = [],\n\t\tconfigToolTemplates,\n\t\tintegrationStatus,\n\t\tvariablesData,\n\t\tvalidation,\n\t\tapplicationType,\n\t\tcharLimits,\n\t\tisSaving,\n\t\tisPublishing,\n\t\tisLoading,\n\t\tfooterHint = 'Changes don’t affect customers until you go live',\n\t\tdisableStepNavigation,\n\t\tdebugLog,\n\t} = config;\n\n\tconst [modalMode, setModalMode] = useState<GoLiveModalMode>(null);\n\tconst [publishingLocal, setPublishingLocal] = useState(false);\n\t// True while onTestAgent's async work (e.g. save-as-draft before the test\n\t// modal opens) is in flight — loads + disables the Test agent button.\n\tconst [testingLocal, setTestingLocal] = useState(false);\n\t// Back was pressed → confirm leaving (save draft / discard) before navigating.\n\tconst [showLeaveConfirm, setShowLeaveConfirm] = useState(false);\n\tconst [savingAndLeaving, setSavingAndLeaving] = useState(false);\n\n\t// Gated debug logging: each handler logs at its start only when `debugLog`.\n\tconst logAction = useCallback(\n\t\t(action: string, ...args: unknown[]) => {\n\t\t\tif (debugLog) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.log(`[AgentBuilder] ${action}`, ...args);\n\t\t\t}\n\t\t},\n\t\t[debugLog],\n\t);\n\n\tconst handleChange = useCallback(\n\t\t(patch: Partial<AgentValue>) => {\n\t\t\tlogAction('onChange', patch);\n\t\t\tonChange(patch);\n\t\t},\n\t\t[logAction, onChange],\n\t);\n\tconst handleStepChange = useCallback(\n\t\t(step: Parameters<NonNullable<typeof onStepChange>>[0]) => {\n\t\t\tlogAction('onStepChange', step);\n\t\t\tonStepChange?.(step);\n\t\t},\n\t\t[logAction, onStepChange],\n\t);\n\tconst handleSaveDraft = useCallback(() => {\n\t\tlogAction('onSaveDraft');\n\t\treturn onSaveDraft();\n\t}, [logAction, onSaveDraft]);\n\tconst handlePublish = useCallback(() => {\n\t\tlogAction('onPublish');\n\t\treturn onPublish();\n\t}, [logAction, onPublish]);\n\t// Back opens the \"Save as draft?\" confirmation rather than leaving directly.\n\tconst handleBack = useCallback(() => {\n\t\tlogAction('onBack');\n\t\tsetShowLeaveConfirm(true);\n\t}, [logAction]);\n\n\t// Modal \"Discard\" defers to the parent's discard handler (same as the top bar).\n\tconst handleDiscardAndLeave = useCallback(() => {\n\t\tlogAction('onDiscardAndLeave');\n\t\tsetShowLeaveConfirm(false);\n\t\tonDiscard();\n\t}, [logAction, onDiscard]);\n\n\tconst handleSaveDraftAndLeave = useCallback(async () => {\n\t\tlogAction('onSaveDraftAndLeave');\n\t\tconst result = onSaveDraft();\n\t\t// Closed up front for the same reason as go-live: the caller's saving dialog\n\t\t// would otherwise stack a second overlay on top of this one.\n\t\tsetShowLeaveConfirm(false);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSavingAndLeaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSavingAndLeaving(false);\n\t\t\t}\n\t\t}\n\t\tonBack?.();\n\t}, [logAction, onSaveDraft, onBack]);\n\tconst handleTestAgent = useCallback(async () => {\n\t\tlogAction('onTestAgent');\n\t\tconst result = onTestAgent?.();\n\t\t// A new agent saves as draft before the test modal opens — that's slow, so\n\t\t// disable + load the button until it settles (prevents double-triggering).\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetTestingLocal(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetTestingLocal(false);\n\t\t\t}\n\t\t}\n\t}, [logAction, onTestAgent]);\n\tconst handleGoToDashboard = useCallback(() => {\n\t\tlogAction('onGoToDashboard');\n\t\tonGoToDashboard?.();\n\t}, [logAction, onGoToDashboard]);\n\tconst handleCreateSubAgent = useCallback(\n\t\t(draft: SubAgentDraft) => {\n\t\t\tlogAction('onCreateSubAgent', draft);\n\t\t\treturn onCreateSubAgent\n\t\t\t\t? onCreateSubAgent(draft)\n\t\t\t\t: Promise.reject(new Error('onCreateSubAgent not provided'));\n\t\t},\n\t\t[logAction, onCreateSubAgent],\n\t);\n\n\tconst handleConfirmGoLive = async () => {\n\t\tlogAction('onGoLiveConfirm');\n\t\tconst result = handlePublish();\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\t// Close before handing the screen to the caller's in-flight dialog: two\n\t\t\t// modals at once means two stacked overlays and this one's cross showing\n\t\t\t// through. The footer's Go live button keeps spinning via `isPublishing`,\n\t\t\t// so a caller with no dialog of its own still shows progress.\n\t\t\tsetModalMode(null);\n\t\t\tsetPublishingLocal(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t\tsetModalMode('success');\n\t\t\t} finally {\n\t\t\t\tsetPublishingLocal(false);\n\t\t\t}\n\t\t} else {\n\t\t\tsetModalMode('success');\n\t\t}\n\t};\n\n\treturn (\n\t\t<AgentBuilderProvider\n\t\t\tvalue={value}\n\t\t\tonChange={handleChange}\n\t\t\tactiveStep={activeStep}\n\t\t\tonStepChange={onStepChange ? handleStepChange : undefined}\n\t\t\tavailableTools={availableTools}\n\t\t\tavailableSubAgents={availableSubAgents}\n\t\t\tavailableIntents={availableIntents}\n\t\t\tavailableModels={availableModels}\n\t\t\tconfigToolTemplates={configToolTemplates}\n\t\t\tintegrationStatus={integrationStatus}\n\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\tvariablesData={variablesData}\n\t\t\tvalidation={validation}\n\t\t\tapplicationType={applicationType}\n\t\t\tcharLimits={charLimits}\n\t\t\tdisableStepNavigation={disableStepNavigation}\n\t\t\tonCreateSubAgent={onCreateSubAgent ? handleCreateSubAgent : undefined}\n\t\t\tonFetchSubAgent={onFetchSubAgent}\n\t\t\tonUpdateSubAgent={onUpdateSubAgent}\n\t\t\tonImproveSubAgent={onImproveSubAgent}\n\t\t\tonImproveToolInstructions={onImproveToolInstructions}\n\t\t>\n\t\t\t<BuilderRoot data-test={rest['data-test'] ?? 'agent-builder'}>\n\t\t\t\t<AgentBuilderTopBar\n\t\t\t\t\tname={value.name}\n\t\t\t\t\tstatus={value.status}\n\t\t\t\t\tonBack={onBack ? handleBack : undefined}\n\t\t\t\t\tonSaveDraft={handleSaveDraftAndLeave}\n\t\t\t\t\tisSaving={isSaving || savingAndLeaving}\n\t\t\t\t/>\n\n\t\t\t\t<Main>\n\t\t\t\t\t<Rail>\n\t\t\t\t\t\t<StepRail />\n\t\t\t\t\t</Rail>\n\t\t\t\t\t<Content>\n\t\t\t\t\t\t{isLoading ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Spinner size=\"large\" color={COLORS.stroke.brand} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ContentCard>\n\t\t\t\t\t\t\t\t<StepScroll>\n\t\t\t\t\t\t\t\t\t<StepContent />\n\t\t\t\t\t\t\t\t</StepScroll>\n\t\t\t\t\t\t\t\t<AgentBuilderFooter\n\t\t\t\t\t\t\t\t\tfooterHint={footerHint}\n\t\t\t\t\t\t\t\t\tonTestAgent={onTestAgent ? handleTestAgent : undefined}\n\t\t\t\t\t\t\t\t\tisTesting={testingLocal}\n\t\t\t\t\t\t\t\t\tonGoLive={() => {\n\t\t\t\t\t\t\t\t\t\tlogAction('onGoLive');\n\t\t\t\t\t\t\t\t\t\tsetModalMode('confirm');\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tisPublishing={isPublishing || publishingLocal}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ContentCard>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Content>\n\t\t\t\t</Main>\n\n\t\t\t\t<GoLiveModal\n\t\t\t\t\tmode={modalMode}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tconst wasSuccess = modalMode === 'success';\n\t\t\t\t\t\tsetModalMode(null);\n\t\t\t\t\t\tif (wasSuccess) {\n\t\t\t\t\t\t\thandleGoToDashboard();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonConfirm={handleConfirmGoLive}\n\t\t\t\t\tonSaveDraft={() => {\n\t\t\t\t\t\tsetModalMode(null);\n\t\t\t\t\t\thandleSaveDraft();\n\t\t\t\t\t}}\n\t\t\t\t\tonGoToDashboard={onGoToDashboard ? handleGoToDashboard : undefined}\n\t\t\t\t\tisPublishing={isPublishing || publishingLocal}\n\t\t\t\t/>\n\n\t\t\t\t<DiscardModal\n\t\t\t\t\topen={showLeaveConfirm}\n\t\t\t\t\tonClose={() => setShowLeaveConfirm(false)}\n\t\t\t\t\tonDiscard={handleDiscardAndLeave}\n\t\t\t\t\tonSaveDraft={handleSaveDraftAndLeave}\n\t\t\t\t\tdisableSaveDraft={!value.name.trim()}\n\t\t\t\t\tisSaving={isSaving || savingAndLeaving}\n\t\t\t\t/>\n\n\t\t\t\t<UndoToast />\n\t\t\t</BuilderRoot>\n\t\t</AgentBuilderProvider>\n\t);\n};\n\nAgentBuilder.displayName = 'AgentBuilder';\n"],"names":["StepContent","activeStep","useAgentBuilderContext","Step1About","Step2WhenItStepsIn","Step3HowItResponds","Step4HandoverRules","AgentBuilder","props","config","onChange","onStepChange","onDiscard","onSaveDraft","onPublish","onBack","onTestAgent","onGoToDashboard","onCreateSubAgent","onFetchSubAgent","onUpdateSubAgent","onImproveSubAgent","onImproveToolInstructions","onConnectIntegration","rest","value","availableTools","availableSubAgents","availableIntents","availableModels","configToolTemplates","integrationStatus","variablesData","validation","applicationType","charLimits","isSaving","isPublishing","isLoading","footerHint","disableStepNavigation","debugLog","modalMode","setModalMode","useState","publishingLocal","setPublishingLocal","testingLocal","setTestingLocal","showLeaveConfirm","setShowLeaveConfirm","savingAndLeaving","setSavingAndLeaving","logAction","useCallback","action","args","handleChange","patch","handleStepChange","step","handleSaveDraft","handlePublish","handleBack","handleDiscardAndLeave","handleSaveDraftAndLeave","result","handleTestAgent","handleGoToDashboard","handleCreateSubAgent","draft","handleConfirmGoLive","jsx","AgentBuilderProvider","BuilderRoot","AgentBuilderTopBar","Main","Rail","StepRail","Content","Spinner","COLORS","ContentCard","StepScroll","AgentBuilderFooter","GoLiveModal","wasSuccess","DiscardModal","UndoToast"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AgentBuilder.js","sources":["../../../../src/components/agent-builder/AgentBuilder.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Spinner } from '@src/components/spinner';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAgentBuilderProps,\n\tAgentValue,\n\tSubAgentDraft,\n} from './AgentBuilder.model';\nimport {\n\tBuilderRoot,\n\tContent,\n\tContentCard,\n\tMain,\n\tRail,\n\tStepScroll,\n} from './AgentBuilder.styled';\nimport { AgentBuilderFooter } from './components/AgentBuilderFooter';\nimport { AgentBuilderTopBar } from './components/AgentBuilderTopBar';\nimport { DiscardModal } from './components/DiscardModal';\nimport { GoLiveModal, GoLiveModalMode } from './components/GoLiveModal';\nimport { StepRail } from './components/StepRail';\nimport { UndoToast } from './components/UndoToast';\nimport {\n\tAgentBuilderProvider,\n\tuseAgentBuilderContext,\n} from './context/AgentBuilderContext';\nimport { Step1About } from './steps/Step1About';\nimport { Step2WhenItStepsIn } from './steps/Step2WhenItStepsIn';\nimport { Step3HowItResponds } from './steps/Step3HowItResponds';\nimport { Step4HandoverRules } from './steps/Step4HandoverRules';\n\nconst StepContent: React.FC = () => {\n\tconst { activeStep } = useAgentBuilderContext();\n\tswitch (activeStep) {\n\t\tcase 'about':\n\t\t\treturn <Step1About />;\n\t\tcase 'trigger':\n\t\t\treturn <Step2WhenItStepsIn />;\n\t\tcase 'response':\n\t\t\treturn <Step3HowItResponds />;\n\t\tcase 'handover':\n\t\t\treturn <Step4HandoverRules />;\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\n\n/**\n * 4-step creation/edit wizard body for an AI agent. Presentational and\n * controlled — the consumer owns the `value`, persistence and routing.\n *\n * @example\n * <AgentBuilder\n * value={agent}\n * onChange={(patch) => setAgent({ ...agent, ...patch })}\n * availableTools={tools}\n * availableSubAgents={subAgents}\n * onDiscard={() => router.back()}\n * onSaveDraft={saveDraft}\n * onPublish={publish}\n * />\n */\nexport const AgentBuilder: React.FC<AgentBuilderProps> = (props) => {\n\tconst {\n\t\tconfig,\n\t\tonChange,\n\t\tonStepChange,\n\t\tonDiscard,\n\t\tonSaveDraft,\n\t\tonPublish,\n\t\tonBack,\n\t\tonTestAgent,\n\t\tonGoToDashboard,\n\t\tonCreateSubAgent,\n\t\tonFetchSubAgent,\n\t\tonUpdateSubAgent,\n\t\tonImproveSubAgent,\n\t\tonImproveToolInstructions,\n\t\tonConnectIntegration,\n\t\tonManageChannels,\n\t\tonSmartAgentHandover,\n\t\t...rest\n\t} = props;\n\tconst {\n\t\tvalue,\n\t\tactiveStep,\n\t\tavailableTools,\n\t\tavailableSubAgents,\n\t\tavailableIntents = [],\n\t\tavailableModels = [],\n\t\tconfigToolTemplates,\n\t\tintegrationStatus,\n\t\tvariablesData,\n\t\tvalidation,\n\t\tapplicationType,\n\t\tavailableChannels,\n\t\tcharLimits,\n\t\tisSaving,\n\t\tisPublishing,\n\t\tisLoading,\n\t\tfooterHint = 'Changes don’t affect customers until you go live',\n\t\tdisableStepNavigation,\n\t\tdebugLog,\n\t} = config;\n\n\tconst [modalMode, setModalMode] = useState<GoLiveModalMode>(null);\n\tconst [publishingLocal, setPublishingLocal] = useState(false);\n\t// True while onTestAgent's async work (e.g. save-as-draft before the test\n\t// modal opens) is in flight — loads + disables the Test agent button.\n\tconst [testingLocal, setTestingLocal] = useState(false);\n\t// Back was pressed → confirm leaving (save draft / discard) before navigating.\n\tconst [showLeaveConfirm, setShowLeaveConfirm] = useState(false);\n\tconst [savingAndLeaving, setSavingAndLeaving] = useState(false);\n\n\t// Gated debug logging: each handler logs at its start only when `debugLog`.\n\tconst logAction = useCallback(\n\t\t(action: string, ...args: unknown[]) => {\n\t\t\tif (debugLog) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.log(`[AgentBuilder] ${action}`, ...args);\n\t\t\t}\n\t\t},\n\t\t[debugLog],\n\t);\n\n\tconst handleChange = useCallback(\n\t\t(patch: Partial<AgentValue>) => {\n\t\t\tlogAction('onChange', patch);\n\t\t\tonChange(patch);\n\t\t},\n\t\t[logAction, onChange],\n\t);\n\tconst handleStepChange = useCallback(\n\t\t(step: Parameters<NonNullable<typeof onStepChange>>[0]) => {\n\t\t\tlogAction('onStepChange', step);\n\t\t\tonStepChange?.(step);\n\t\t},\n\t\t[logAction, onStepChange],\n\t);\n\tconst handleSaveDraft = useCallback(() => {\n\t\tlogAction('onSaveDraft');\n\t\treturn onSaveDraft();\n\t}, [logAction, onSaveDraft]);\n\tconst handlePublish = useCallback(() => {\n\t\tlogAction('onPublish');\n\t\treturn onPublish();\n\t}, [logAction, onPublish]);\n\t// Back opens the \"Save as draft?\" confirmation rather than leaving directly.\n\tconst handleBack = useCallback(() => {\n\t\tlogAction('onBack');\n\t\tsetShowLeaveConfirm(true);\n\t}, [logAction]);\n\n\t// Modal \"Discard\" defers to the parent's discard handler (same as the top bar).\n\tconst handleDiscardAndLeave = useCallback(() => {\n\t\tlogAction('onDiscardAndLeave');\n\t\tsetShowLeaveConfirm(false);\n\t\tonDiscard();\n\t}, [logAction, onDiscard]);\n\n\tconst handleSaveDraftAndLeave = useCallback(async () => {\n\t\tlogAction('onSaveDraftAndLeave');\n\t\tconst result = onSaveDraft();\n\t\t// Closed up front for the same reason as go-live: the caller's saving dialog\n\t\t// would otherwise stack a second overlay on top of this one.\n\t\tsetShowLeaveConfirm(false);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSavingAndLeaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSavingAndLeaving(false);\n\t\t\t}\n\t\t}\n\t\tonBack?.();\n\t}, [logAction, onSaveDraft, onBack]);\n\tconst handleTestAgent = useCallback(async () => {\n\t\tlogAction('onTestAgent');\n\t\tconst result = onTestAgent?.();\n\t\t// A new agent saves as draft before the test modal opens — that's slow, so\n\t\t// disable + load the button until it settles (prevents double-triggering).\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetTestingLocal(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetTestingLocal(false);\n\t\t\t}\n\t\t}\n\t}, [logAction, onTestAgent]);\n\tconst handleGoToDashboard = useCallback(() => {\n\t\tlogAction('onGoToDashboard');\n\t\tonGoToDashboard?.();\n\t}, [logAction, onGoToDashboard]);\n\tconst handleCreateSubAgent = useCallback(\n\t\t(draft: SubAgentDraft) => {\n\t\t\tlogAction('onCreateSubAgent', draft);\n\t\t\treturn onCreateSubAgent\n\t\t\t\t? onCreateSubAgent(draft)\n\t\t\t\t: Promise.reject(new Error('onCreateSubAgent not provided'));\n\t\t},\n\t\t[logAction, onCreateSubAgent],\n\t);\n\n\tconst handleConfirmGoLive = async () => {\n\t\tlogAction('onGoLiveConfirm');\n\t\tconst result = handlePublish();\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\t// Close before handing the screen to the caller's in-flight dialog: two\n\t\t\t// modals at once means two stacked overlays and this one's cross showing\n\t\t\t// through. The footer's Go live button keeps spinning via `isPublishing`,\n\t\t\t// so a caller with no dialog of its own still shows progress.\n\t\t\tsetModalMode(null);\n\t\t\tsetPublishingLocal(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t\tsetModalMode('success');\n\t\t\t} finally {\n\t\t\t\tsetPublishingLocal(false);\n\t\t\t}\n\t\t} else {\n\t\t\tsetModalMode('success');\n\t\t}\n\t};\n\n\treturn (\n\t\t<AgentBuilderProvider\n\t\t\tvalue={value}\n\t\t\tonChange={handleChange}\n\t\t\tactiveStep={activeStep}\n\t\t\tonStepChange={onStepChange ? handleStepChange : undefined}\n\t\t\tavailableTools={availableTools}\n\t\t\tavailableSubAgents={availableSubAgents}\n\t\t\tavailableIntents={availableIntents}\n\t\t\tavailableModels={availableModels}\n\t\t\tconfigToolTemplates={configToolTemplates}\n\t\t\tintegrationStatus={integrationStatus}\n\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\tvariablesData={variablesData}\n\t\t\tvalidation={validation}\n\t\t\tapplicationType={applicationType}\n\t\t\tavailableChannels={availableChannels}\n\t\t\tonManageChannels={onManageChannels}\n\t\t\tonSmartAgentHandover={onSmartAgentHandover}\n\t\t\tcharLimits={charLimits}\n\t\t\tdisableStepNavigation={disableStepNavigation}\n\t\t\tonCreateSubAgent={onCreateSubAgent ? handleCreateSubAgent : undefined}\n\t\t\tonFetchSubAgent={onFetchSubAgent}\n\t\t\tonUpdateSubAgent={onUpdateSubAgent}\n\t\t\tonImproveSubAgent={onImproveSubAgent}\n\t\t\tonImproveToolInstructions={onImproveToolInstructions}\n\t\t>\n\t\t\t<BuilderRoot data-test={rest['data-test'] ?? 'agent-builder'}>\n\t\t\t\t<AgentBuilderTopBar\n\t\t\t\t\tname={value.name}\n\t\t\t\t\tstatus={value.status}\n\t\t\t\t\tonBack={onBack ? handleBack : undefined}\n\t\t\t\t\tonSaveDraft={handleSaveDraftAndLeave}\n\t\t\t\t\tisSaving={isSaving || savingAndLeaving}\n\t\t\t\t/>\n\n\t\t\t\t<Main>\n\t\t\t\t\t<Rail>\n\t\t\t\t\t\t<StepRail />\n\t\t\t\t\t</Rail>\n\t\t\t\t\t<Content>\n\t\t\t\t\t\t{isLoading ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Spinner size=\"large\" color={COLORS.stroke.brand} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ContentCard>\n\t\t\t\t\t\t\t\t<StepScroll>\n\t\t\t\t\t\t\t\t\t<StepContent />\n\t\t\t\t\t\t\t\t</StepScroll>\n\t\t\t\t\t\t\t\t<AgentBuilderFooter\n\t\t\t\t\t\t\t\t\tfooterHint={footerHint}\n\t\t\t\t\t\t\t\t\tonTestAgent={onTestAgent ? handleTestAgent : undefined}\n\t\t\t\t\t\t\t\t\tisTesting={testingLocal}\n\t\t\t\t\t\t\t\t\tonGoLive={() => {\n\t\t\t\t\t\t\t\t\t\tlogAction('onGoLive');\n\t\t\t\t\t\t\t\t\t\tsetModalMode('confirm');\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tisPublishing={isPublishing || publishingLocal}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ContentCard>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Content>\n\t\t\t\t</Main>\n\n\t\t\t\t<GoLiveModal\n\t\t\t\t\tmode={modalMode}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tconst wasSuccess = modalMode === 'success';\n\t\t\t\t\t\tsetModalMode(null);\n\t\t\t\t\t\tif (wasSuccess) {\n\t\t\t\t\t\t\thandleGoToDashboard();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonConfirm={handleConfirmGoLive}\n\t\t\t\t\tonSaveDraft={() => {\n\t\t\t\t\t\tsetModalMode(null);\n\t\t\t\t\t\thandleSaveDraft();\n\t\t\t\t\t}}\n\t\t\t\t\tonGoToDashboard={onGoToDashboard ? handleGoToDashboard : undefined}\n\t\t\t\t\tisPublishing={isPublishing || publishingLocal}\n\t\t\t\t/>\n\n\t\t\t\t<DiscardModal\n\t\t\t\t\topen={showLeaveConfirm}\n\t\t\t\t\tonClose={() => setShowLeaveConfirm(false)}\n\t\t\t\t\tonDiscard={handleDiscardAndLeave}\n\t\t\t\t\tonSaveDraft={handleSaveDraftAndLeave}\n\t\t\t\t\tdisableSaveDraft={!value.name.trim()}\n\t\t\t\t\tisSaving={isSaving || savingAndLeaving}\n\t\t\t\t/>\n\n\t\t\t\t<UndoToast />\n\t\t\t</BuilderRoot>\n\t\t</AgentBuilderProvider>\n\t);\n};\n\nAgentBuilder.displayName = 'AgentBuilder';\n"],"names":["StepContent","activeStep","useAgentBuilderContext","Step1About","Step2WhenItStepsIn","Step3HowItResponds","Step4HandoverRules","AgentBuilder","props","config","onChange","onStepChange","onDiscard","onSaveDraft","onPublish","onBack","onTestAgent","onGoToDashboard","onCreateSubAgent","onFetchSubAgent","onUpdateSubAgent","onImproveSubAgent","onImproveToolInstructions","onConnectIntegration","onManageChannels","onSmartAgentHandover","rest","value","availableTools","availableSubAgents","availableIntents","availableModels","configToolTemplates","integrationStatus","variablesData","validation","applicationType","availableChannels","charLimits","isSaving","isPublishing","isLoading","footerHint","disableStepNavigation","debugLog","modalMode","setModalMode","useState","publishingLocal","setPublishingLocal","testingLocal","setTestingLocal","showLeaveConfirm","setShowLeaveConfirm","savingAndLeaving","setSavingAndLeaving","logAction","useCallback","action","args","handleChange","patch","handleStepChange","step","handleSaveDraft","handlePublish","handleBack","handleDiscardAndLeave","handleSaveDraftAndLeave","result","handleTestAgent","handleGoToDashboard","handleCreateSubAgent","draft","handleConfirmGoLive","jsx","AgentBuilderProvider","BuilderRoot","AgentBuilderTopBar","Main","Rail","StepRail","Content","Spinner","COLORS","ContentCard","StepScroll","AgentBuilderFooter","GoLiveModal","wasSuccess","DiscardModal","UndoToast"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("../../constants/Theme.js"),r=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},e=r(i),n=i.css`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
opacity: 0.5;
|
|
20
20
|
background: transparent;
|
|
21
21
|
}
|
|
22
|
-
`,
|
|
22
|
+
`,l=e.default.div.attrs({className:"bik-builder-root"})`
|
|
23
23
|
display: flex;
|
|
24
24
|
flex-direction: column;
|
|
25
25
|
height: 100%;
|
|
26
26
|
width: 100%;
|
|
27
27
|
min-height: 0;
|
|
28
28
|
background: ${t.COLORS.surface.standard};
|
|
29
|
-
`,
|
|
29
|
+
`,d=e.default.div.attrs({className:"bik-top-bar"})`
|
|
30
30
|
display: flex;
|
|
31
31
|
align-items: center;
|
|
32
32
|
justify-content: space-between;
|
|
@@ -53,18 +53,18 @@
|
|
|
53
53
|
&:hover {
|
|
54
54
|
background: ${t.COLORS.surface.subdued};
|
|
55
55
|
}
|
|
56
|
-
`,
|
|
56
|
+
`,h=e.default.div.attrs({className:"bik-main"})`
|
|
57
57
|
display: flex;
|
|
58
58
|
flex: 1;
|
|
59
59
|
min-height: 0;
|
|
60
|
-
`,
|
|
60
|
+
`,x=e.default.div.attrs({className:"bik-rail"})`
|
|
61
61
|
width: 234px;
|
|
62
62
|
flex-shrink: 0;
|
|
63
63
|
border-right: 1px solid ${t.COLORS.stroke.primary};
|
|
64
64
|
padding: 16px;
|
|
65
65
|
overflow-y: auto;
|
|
66
66
|
background: ${t.COLORS.surface.standard};
|
|
67
|
-
`,
|
|
67
|
+
`,u=e.default.div.attrs({className:"bik-content"})`
|
|
68
68
|
flex: 1;
|
|
69
69
|
min-width: 0;
|
|
70
70
|
min-height: 0;
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
flex-direction: column;
|
|
74
74
|
padding: 16px;
|
|
75
75
|
background: ${t.COLORS.surface.standard};
|
|
76
|
-
`,
|
|
76
|
+
`,f=e.default.div.attrs({className:"bik-content-card"})`
|
|
77
77
|
flex: 1;
|
|
78
78
|
min-height: 0;
|
|
79
79
|
display: flex;
|
|
@@ -82,11 +82,11 @@
|
|
|
82
82
|
border: 1px solid ${t.COLORS.stroke.primary};
|
|
83
83
|
border-radius: 8px;
|
|
84
84
|
box-sizing: border-box;
|
|
85
|
-
`,
|
|
85
|
+
`,g=e.default.div.attrs({className:"bik-step-scroll"})`
|
|
86
86
|
flex: 1;
|
|
87
87
|
min-height: 0;
|
|
88
88
|
overflow-y: auto;
|
|
89
|
-
`,
|
|
89
|
+
`,b=e.default.div.attrs({className:"bik-footer"})`
|
|
90
90
|
display: flex;
|
|
91
91
|
align-items: center;
|
|
92
92
|
justify-content: space-between;
|
|
@@ -158,16 +158,16 @@
|
|
|
158
158
|
gap: 4px;
|
|
159
159
|
padding: 16px;
|
|
160
160
|
border-bottom: 1px solid ${t.COLORS.stroke.primary};
|
|
161
|
-
`,
|
|
161
|
+
`,C=e.default.div.attrs({className:"bik-section-header-wrap"})`
|
|
162
162
|
display: flex;
|
|
163
163
|
flex-direction: column;
|
|
164
164
|
gap: 16px;
|
|
165
165
|
padding: 16px;
|
|
166
|
-
`,
|
|
166
|
+
`,O=e.default.div.attrs({className:"bik-field-block"})`
|
|
167
167
|
display: flex;
|
|
168
168
|
flex-direction: column;
|
|
169
169
|
gap: 8px;
|
|
170
|
-
`,
|
|
170
|
+
`,R=e.default.div.attrs({className:"bik-field-label-row"})`
|
|
171
171
|
display: flex;
|
|
172
172
|
align-items: center;
|
|
173
173
|
justify-content: space-between;
|
|
@@ -212,11 +212,17 @@
|
|
|
212
212
|
cursor: pointer;
|
|
213
213
|
text-align: left;
|
|
214
214
|
width: 100%;
|
|
215
|
-
|
|
215
|
+
|
|
216
|
+
&:disabled {
|
|
217
|
+
cursor: not-allowed;
|
|
218
|
+
background: ${t.COLORS.surface.subdued};
|
|
219
|
+
border-color: ${t.COLORS.stroke.primary};
|
|
220
|
+
}
|
|
221
|
+
`,T=e.default.div.attrs({className:"bik-radio-card-text"})`
|
|
216
222
|
display: flex;
|
|
217
223
|
flex-direction: column;
|
|
218
224
|
gap: 4px;
|
|
219
|
-
`,
|
|
225
|
+
`,A=e.default.div.attrs({className:"bik-chip-wrap"})`
|
|
220
226
|
display: flex;
|
|
221
227
|
flex-wrap: wrap;
|
|
222
228
|
align-items: center;
|
|
@@ -271,10 +277,10 @@
|
|
|
271
277
|
align-items: center;
|
|
272
278
|
justify-content: space-between;
|
|
273
279
|
`,F=e.default.button.attrs({className:"bik-add-icon-button"})`
|
|
274
|
-
${
|
|
280
|
+
${n}
|
|
275
281
|
background: ${t.COLORS.surface.standard};
|
|
276
282
|
border: 1px solid ${t.COLORS.stroke.primary};
|
|
277
|
-
`,
|
|
283
|
+
`,z=e.default.div.attrs({className:"bik-source-button-row"})`
|
|
278
284
|
display: flex;
|
|
279
285
|
flex-wrap: wrap;
|
|
280
286
|
gap: 8px;
|
|
@@ -292,7 +298,7 @@
|
|
|
292
298
|
&:hover {
|
|
293
299
|
background: ${t.COLORS.surface.subdued};
|
|
294
300
|
}
|
|
295
|
-
`,
|
|
301
|
+
`,D=e.default.div.attrs({className:"bik-selectable-row"})`
|
|
296
302
|
display: flex;
|
|
297
303
|
align-items: center;
|
|
298
304
|
gap: 8px;
|
|
@@ -313,7 +319,7 @@
|
|
|
313
319
|
& > svg {
|
|
314
320
|
flex-shrink: 0;
|
|
315
321
|
}
|
|
316
|
-
`,
|
|
322
|
+
`,P=e.default.div.attrs({className:"bik-row-text"})`
|
|
317
323
|
flex: 1;
|
|
318
324
|
min-width: 0;
|
|
319
325
|
overflow: hidden;
|
|
@@ -345,19 +351,19 @@
|
|
|
345
351
|
background: transparent;
|
|
346
352
|
padding: 0;
|
|
347
353
|
cursor: pointer;
|
|
348
|
-
`;const
|
|
354
|
+
`;const W=e.default.div.attrs({className:"bik-row-actions"})`
|
|
349
355
|
display: flex;
|
|
350
356
|
align-items: center;
|
|
351
357
|
gap: 4px;
|
|
352
358
|
flex-shrink: 0;
|
|
353
|
-
`,
|
|
359
|
+
`,q=e.default.span.attrs({className:"bik-row-action-divider"})`
|
|
354
360
|
width: 1px;
|
|
355
361
|
align-self: stretch;
|
|
356
362
|
margin: 4px 0;
|
|
357
363
|
background: ${t.COLORS.stroke.primary};
|
|
358
|
-
`,
|
|
359
|
-
${
|
|
360
|
-
`,
|
|
364
|
+
`,K=e.default.button.attrs({className:"bik-row-menu-button"})`
|
|
365
|
+
${n}
|
|
366
|
+
`,X=e.default.div.attrs({className:"bik-draft-button-scope"})`
|
|
361
367
|
display: flex;
|
|
362
368
|
flex: 1;
|
|
363
369
|
|
|
@@ -367,20 +373,20 @@
|
|
|
367
373
|
button .text {
|
|
368
374
|
color: ${t.BASE_COLORS.brand[800]};
|
|
369
375
|
}
|
|
370
|
-
`,
|
|
376
|
+
`,o=e.default.div.attrs({className:"bik-modal-body"})`
|
|
371
377
|
padding: 24px;
|
|
372
378
|
display: flex;
|
|
373
379
|
flex-direction: column;
|
|
374
380
|
align-items: center;
|
|
375
381
|
gap: 16px;
|
|
376
382
|
text-align: center;
|
|
377
|
-
`,
|
|
383
|
+
`,U=e.default.div.attrs({className:"bik-modal-icon"})`
|
|
378
384
|
display: flex;
|
|
379
385
|
align-items: center;
|
|
380
386
|
justify-content: center;
|
|
381
|
-
`,s=268,
|
|
387
|
+
`,s=268,J=e.default(o)`
|
|
382
388
|
min-height: ${s}px;
|
|
383
|
-
`,
|
|
389
|
+
`,Q=e.default.div`
|
|
384
390
|
flex: 1;
|
|
385
391
|
width: 100%;
|
|
386
392
|
display: flex;
|
|
@@ -388,7 +394,7 @@
|
|
|
388
394
|
justify-content: center;
|
|
389
395
|
align-items: center;
|
|
390
396
|
gap: 8px;
|
|
391
|
-
`,
|
|
397
|
+
`,V=e.default.div.attrs({className:"bik-modal-actions"})`
|
|
392
398
|
display: flex;
|
|
393
399
|
gap: 12px;
|
|
394
400
|
width: 100%;
|
|
@@ -406,5 +412,121 @@
|
|
|
406
412
|
display: flex;
|
|
407
413
|
align-items: center;
|
|
408
414
|
gap: 8px;
|
|
409
|
-
`;
|
|
415
|
+
`;const Y=e.default.div.attrs({className:"bik-channels-section"})`
|
|
416
|
+
display: flex;
|
|
417
|
+
flex-direction: column;
|
|
418
|
+
gap: 8px;
|
|
419
|
+
`,Z=e.default.button.attrs({className:"bik-channels-link"})`
|
|
420
|
+
display: flex;
|
|
421
|
+
align-items: center;
|
|
422
|
+
gap: 4px;
|
|
423
|
+
border: none;
|
|
424
|
+
background: transparent;
|
|
425
|
+
padding: 0;
|
|
426
|
+
cursor: pointer;
|
|
427
|
+
color: ${t.COLORS.background.inverseLight};
|
|
428
|
+
font-size: 12px;
|
|
429
|
+
line-height: 16px;
|
|
430
|
+
font-weight: 400;
|
|
431
|
+
white-space: nowrap;
|
|
432
|
+
|
|
433
|
+
&:hover {
|
|
434
|
+
text-decoration: underline;
|
|
435
|
+
}
|
|
436
|
+
`,ee=e.default.div.attrs({className:"bik-channel-card"})`
|
|
437
|
+
display: flex;
|
|
438
|
+
flex-direction: column;
|
|
439
|
+
align-items: flex-start;
|
|
440
|
+
width: 100%;
|
|
441
|
+
background: ${t.COLORS.surface.standard};
|
|
442
|
+
border: 1px solid ${t.COLORS.stroke.primary};
|
|
443
|
+
border-radius: 4px;
|
|
444
|
+
overflow: hidden;
|
|
445
|
+
`,te=e.default.div.attrs({className:"bik-channel-row"})`
|
|
446
|
+
display: flex;
|
|
447
|
+
align-items: center;
|
|
448
|
+
gap: 8px;
|
|
449
|
+
padding: 12px;
|
|
450
|
+
width: 100%;
|
|
451
|
+
/* 12 + 24 + 12 — every child is pinned to the 24px band so the row can't
|
|
452
|
+
drift taller than the design's 48px. */
|
|
453
|
+
min-height: 48px;
|
|
454
|
+
box-sizing: border-box;
|
|
455
|
+
`,ae=e.default.div.attrs({className:"bik-channel-row-main"})`
|
|
456
|
+
display: flex;
|
|
457
|
+
flex: 1 0 0;
|
|
458
|
+
min-width: 0;
|
|
459
|
+
align-items: center;
|
|
460
|
+
gap: 8px;
|
|
461
|
+
height: 24px;
|
|
462
|
+
`,ie=e.default.div.attrs({className:"bik-channel-identity"})`
|
|
463
|
+
display: flex;
|
|
464
|
+
align-items: center;
|
|
465
|
+
gap: 4px;
|
|
466
|
+
flex: 1 0 0;
|
|
467
|
+
min-width: 0;
|
|
468
|
+
`,ne=e.default.div.attrs({className:"bik-channel-glyph"})`
|
|
469
|
+
display: flex;
|
|
470
|
+
align-items: center;
|
|
471
|
+
justify-content: center;
|
|
472
|
+
flex-shrink: 0;
|
|
473
|
+
width: 24px;
|
|
474
|
+
height: 24px;
|
|
475
|
+
border-radius: 4.8px;
|
|
476
|
+
background: ${a=>a.tint};
|
|
477
|
+
overflow: hidden;
|
|
478
|
+
`,oe=e.default.div.attrs({className:"bik-channel-chips"})`
|
|
479
|
+
display: flex;
|
|
480
|
+
align-items: center;
|
|
481
|
+
gap: 4px;
|
|
482
|
+
flex-shrink: 0;
|
|
483
|
+
|
|
484
|
+
/* Figma's tag-regular is 24px tall, but Tag's "regular" variant floors at
|
|
485
|
+
26px — which pushes the 48px row to 50px. Pin the wrapper back to 24
|
|
486
|
+
(Tag's own \`height\` prop only reaches its inner container). The second
|
|
487
|
+
selector catches a Tag sitting inside a ChipTooltipTarget. */
|
|
488
|
+
> *,
|
|
489
|
+
> span > * {
|
|
490
|
+
min-height: 24px;
|
|
491
|
+
}
|
|
492
|
+
`,se=e.default.span.attrs({className:"bik-chip-tooltip-target"})`
|
|
493
|
+
display: inline-flex;
|
|
494
|
+
align-items: center;
|
|
495
|
+
`,re=e.default.div.attrs({className:"bik-channel-picker-list"})`
|
|
496
|
+
display: flex;
|
|
497
|
+
flex-direction: column;
|
|
498
|
+
gap: 4px;
|
|
499
|
+
width: 100%;
|
|
500
|
+
max-height: 280px;
|
|
501
|
+
overflow-y: auto;
|
|
502
|
+
`,le=e.default.div.attrs({className:"bik-channel-picker-row"})`
|
|
503
|
+
display: flex;
|
|
504
|
+
align-items: center;
|
|
505
|
+
gap: 8px;
|
|
506
|
+
width: 100%;
|
|
507
|
+
padding: 4px;
|
|
508
|
+
border-radius: 4px;
|
|
509
|
+
box-sizing: border-box;
|
|
510
|
+
|
|
511
|
+
&:hover {
|
|
512
|
+
background: ${t.COLORS.surface.subdued};
|
|
513
|
+
}
|
|
514
|
+
`,de=e.default.div.attrs({className:"bik-channel-picker-account"})`
|
|
515
|
+
display: flex;
|
|
516
|
+
align-items: center;
|
|
517
|
+
gap: 8px;
|
|
518
|
+
min-width: 0;
|
|
519
|
+
height: 32px;
|
|
520
|
+
padding: 0 4px;
|
|
521
|
+
`,ce=e.default.div.attrs({className:"bik-channel-picker-body"})`
|
|
522
|
+
display: flex;
|
|
523
|
+
flex-direction: column;
|
|
524
|
+
gap: 8px;
|
|
525
|
+
width: 100%;
|
|
526
|
+
/* Figma indents the body 8px inside the modal's own 24px gutter, so the list
|
|
527
|
+
sits at 32px while the title stays at 24px. StyledModal's body has no
|
|
528
|
+
gutter of its own, so both live here. */
|
|
529
|
+
padding: 0 32px;
|
|
530
|
+
box-sizing: border-box;
|
|
531
|
+
`,pe={width:24,height:24,justifyContent:"center"};exports.AGENT_STATE_MODAL_MIN_HEIGHT=s;exports.AddIconButton=F;exports.AgentStateModalBody=J;exports.AgentStateModalHero=Q;exports.AiTextAreaInput=L;exports.AiTextAreaShell=N;exports.BackButton=p;exports.BuilderRoot=l;exports.CHECKBOX_SLOT=pe;exports.CardRow=B;exports.ChannelCard=ee;exports.ChannelChips=oe;exports.ChannelGlyph=ne;exports.ChannelIdentity=ie;exports.ChannelPickerAccount=de;exports.ChannelPickerBody=ce;exports.ChannelPickerList=re;exports.ChannelPickerRow=le;exports.ChannelRow=te;exports.ChannelRowMain=ae;exports.ChannelsLink=Z;exports.ChannelsSectionRoot=Y;exports.ChipTooltipTarget=se;exports.ChipWrap=A;exports.Content=u;exports.ContentCard=f;exports.DraftButtonScope=X;exports.FieldBlock=O;exports.FieldLabelRow=R;exports.Footer=b;exports.FooterActions=k;exports.FooterHint=m;exports.Main=h;exports.ModalActions=V;exports.ModalBody=o;exports.ModalIcon=U;exports.RadioCard=$;exports.RadioCardText=T;exports.Rail=x;exports.RailItem=y;exports.RailList=w;exports.RowActionDivider=q;exports.RowActions=W;exports.RowLabel=G;exports.RowMenuButton=K;exports.RowText=P;exports.SectionBodyWrap=C;exports.SectionHeaderWrap=v;exports.SelectableRow=D;exports.SideSection=j;exports.SideSectionHeader=H;exports.SourceButton=E;exports.SourceButtonRow=z;exports.Step3Divider=_;exports.Step3Grid=I;exports.Step3Root=M;exports.StepBadge=S;exports.StepScroll=g;exports.TopBar=d;exports.TopBarSide=c;
|
|
410
532
|
//# sourceMappingURL=AgentBuilder.styled.js.map
|
|
@@ -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`;\n\n/**\n * The go-live SUCCESS dialog's natural height, which every state of\n * `AgentStateModal` is pinned to so the card doesn't resize as a publish moves\n * loading → error, or loading → success (a different dialog at the same size).\n *\n * 24 + 24 padding + 64 icon + 8 gap + 28 title (TitleMedium 20/28) + 8 gap\n * + 48 body (BodyPrimary 16/24, two lines at this width) + 24 gap\n * + 40 action row (medium Button: 10px padding + 20px line-height) = 268.\n *\n * Deliberately NOT on `ModalBody`: DiscardModal and RequireVerificationModal share\n * it and are not part of this sequence.\n */\nexport const AGENT_STATE_MODAL_MIN_HEIGHT = 268;\n\n/** `ModalBody` pinned to the height above. The body itself is NOT centred — that\n * floats the action row in the middle of the card. The hero takes the slack instead\n * (see `AgentStateModalHero`), so the actions stay at the bottom, above the body's\n * own 24px padding. */\nexport const AgentStateModalBody = styled(ModalBody)`\n\tmin-height: ${AGENT_STATE_MODAL_MIN_HEIGHT}px;\n`;\n\n/** Badge + title + message. Grows into whatever height the pinned card has spare and\n * centres itself there, which is what keeps the actions pinned to the bottom. */\nexport const AgentStateModalHero = styled.div`\n\tflex: 1;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n\t/* Every action shares the row equally. Each action MUST be its own flex\n\t wrapper (a plain <div style=\"display:flex\">, or DraftButtonScope) rather\n\t than a bare Button: on hover the Button relocates its padding into an\n\t inner container, and as the flex item itself that changes its resolved\n\t width — the button visibly grows/shrinks. Wrapped, the div is the sized\n\t track (flex:1) and the Button grows to fill it, absorbing the padding\n\t move so the width stays put. */\n\t> * {\n\t\tflex: 1;\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n"],"names":["iconActionButton","css","COLORS","BuilderRoot","styled","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","StepScroll","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","SectionBodyWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","BASE_COLORS","RadioCardText","ChipWrap","Step3Root","Step3Grid","Step3Divider","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowLabel","RowActions","RowActionDivider","RowMenuButton","DraftButtonScope","ModalBody","ModalIcon","AGENT_STATE_MODAL_MIN_HEIGHT","AgentStateModalBody","AgentStateModalHero","ModalActions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import type React from 'react';\nimport styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\n\n// Shared look for the 24×24 transparent icon buttons (add / row-menu / close).\nconst iconActionButton = css`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\tbackground: transparent;\n\t}\n`;\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tflex: 1;\n\tmin-height: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbox-sizing: border-box;\n`;\n\n// Scrollable step body inside the card; the footer stays pinned below it.\nexport const StepScroll = styled.div.attrs({ className: 'bik-step-scroll' })`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n\tbox-shadow: 0px -2px 12px 0px #0000000a;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. */\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/* Dashed connector line between consecutive step badges (centered on the badge). */\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' | 'complete' | 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 10px;\n\tfont-weight: 400;\n\tline-height: 12px;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.base};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.surface.standard\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: COLORS.content.secondary};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const SectionBodyWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tpadding: 16px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? BASE_COLORS.brand['800'] : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\tbackground: ${COLORS.surface.subdued};\n\t\tborder-color: ${COLORS.stroke.primary};\n\t}\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\n// Fills the scroll area so the step header + grow-body chain reaches the footer.\nexport const Step3Root = styled.div.attrs({\n\tclassName: 'bik-agent-step bik-agent-step--response',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 100%;\n`;\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })<{\n\t$grow?: boolean;\n}>`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 1px 360px;\n\t/* Single row that fills the grid's height, so the divider spans the full\n\t height (down to the footer) rather than stopping at the taller column. */\n\tgrid-template-rows: 1fr;\n\tflex: 1;\n\tmin-height: 0;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-rows: auto;\n\t}\n\n\t/* Fill the remaining card height so a full-height child (e.g. the Step 3\n\t column divider) can stretch all the way down to the footer. */\n\t${(p) =>\n\t\tp.$grow &&\n\t\tcss`\n\t\t\tflex: 1;\n\t\t\tmin-height: 0;\n\t\t`}\n`;\n\n// Vertical rule between the main column and the side (tools / sub-agents) column;\n// hidden once the grid collapses to a single column.\nexport const Step3Divider = styled.div.attrs({\n\tclassName: 'bik-step3-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tbackground: ${COLORS.stroke.primary};\n\n\t@media (max-width: 1100px) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\t${iconActionButton}\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n`;\n\n// Empty-state tool-source picker (e.g. Manifest / Shopify buttons).\nexport const SourceButtonRow = styled.div.attrs({\n\tclassName: 'bik-source-button-row',\n})`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n`;\n\nexport const SourceButton = styled.button.attrs({\n\tclassName: 'bik-source-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 6px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\theight: 28px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\t/* Fixed 48px rows regardless of the (variably-sized) leading source icon.\n\t box-sizing pins the height across hosts with differing resets; flex-shrink:0\n\t + min-height stop a height-constrained flex column (the merchant side panel)\n\t from squashing the rows — Storybook has room, so it looked fine there. */\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Leading icon (e.g. tool source) keeps its size; the label takes the rest. */\n\t& > svg {\n\t\tflex-shrink: 0;\n\t}\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Truncate the label to one line with an ellipsis. */\n\t& > * {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n`;\n\n/* Label + trailing verification shield on one row. */\nexport const RowLabel = styled.div.attrs({ className: 'bik-row-label' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmin-width: 0;\n\tflex: 1;\n\n\t/* Shrink the label to its text so the shield sits just after it, rather than\n\t RowText's default flex: 1 filling the row and pushing the shield to the end. */\n\t& .bik-row-text {\n\t\tflex: 0 1 auto;\n\t}\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Per-row actions (always-visible edit / delete icon buttons) ───────────────\n\nexport const RowActions = styled.div.attrs({ className: 'bik-row-actions' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n`;\n\n// Vertical separator between the edit and delete icon buttons.\nexport const RowActionDivider = styled.span.attrs({\n\tclassName: 'bik-row-action-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tmargin: 4px 0;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\t${iconActionButton}\n`;\n\nexport const DraftButtonScope = styled.div.attrs({\n\tclassName: 'bik-draft-button-scope',\n})`\n\tdisplay: flex;\n\tflex: 1;\n\n\tbutton {\n\t\tborder-color: ${BASE_COLORS.brand['800']};\n\t}\n\tbutton .text {\n\t\tcolor: ${BASE_COLORS.brand['800']};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\n/**\n * The go-live SUCCESS dialog's natural height, which every state of\n * `AgentStateModal` is pinned to so the card doesn't resize as a publish moves\n * loading → error, or loading → success (a different dialog at the same size).\n *\n * 24 + 24 padding + 64 icon + 8 gap + 28 title (TitleMedium 20/28) + 8 gap\n * + 48 body (BodyPrimary 16/24, two lines at this width) + 24 gap\n * + 40 action row (medium Button: 10px padding + 20px line-height) = 268.\n *\n * Deliberately NOT on `ModalBody`: DiscardModal and RequireVerificationModal share\n * it and are not part of this sequence.\n */\nexport const AGENT_STATE_MODAL_MIN_HEIGHT = 268;\n\n/** `ModalBody` pinned to the height above. The body itself is NOT centred — that\n * floats the action row in the middle of the card. The hero takes the slack instead\n * (see `AgentStateModalHero`), so the actions stay at the bottom, above the body's\n * own 24px padding. */\nexport const AgentStateModalBody = styled(ModalBody)`\n\tmin-height: ${AGENT_STATE_MODAL_MIN_HEIGHT}px;\n`;\n\n/** Badge + title + message. Grows into whatever height the pinned card has spare and\n * centres itself there, which is what keeps the actions pinned to the bottom. */\nexport const AgentStateModalHero = styled.div`\n\tflex: 1;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n\t/* Every action shares the row equally. Each action MUST be its own flex\n\t wrapper (a plain <div style=\"display:flex\">, or DraftButtonScope) rather\n\t than a bare Button: on hover the Button relocates its padding into an\n\t inner container, and as the flex item itself that changes its resolved\n\t width — the button visibly grows/shrinks. Wrapped, the div is the sized\n\t track (flex:1) and the Button grows to fill it, absorbing the padding\n\t move so the width stays put. */\n\t> * {\n\t\tflex: 1;\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step 1 \"Channels to activate it on\" ────────────────────────────────\n\nexport const ChannelsSectionRoot = styled.div.attrs({\n\tclassName: 'bik-channels-section',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\n/** \"Channel management\" / \"Smart agent handover\" — a text link, not a Button. */\nexport const ChannelsLink = styled.button.attrs({\n\tclassName: 'bik-channels-link',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tcolor: ${COLORS.background.inverseLight};\n\tfont-size: 12px;\n\tline-height: 16px;\n\tfont-weight: 400;\n\twhite-space: nowrap;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t}\n`;\n\n/** One channel's card. */\nexport const ChannelCard = styled.div.attrs({\n\tclassName: 'bik-channel-card',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\twidth: 100%;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\toverflow: hidden;\n`;\n\nexport const ChannelRow = styled.div.attrs({ className: 'bik-channel-row' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 12px;\n\twidth: 100%;\n\t/* 12 + 24 + 12 — every child is pinned to the 24px band so the row can't\n\t drift taller than the design's 48px. */\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n`;\n\nexport const ChannelRowMain = styled.div.attrs({\n\tclassName: 'bik-channel-row-main',\n})`\n\tdisplay: flex;\n\tflex: 1 0 0;\n\tmin-width: 0;\n\talign-items: center;\n\tgap: 8px;\n\theight: 24px;\n`;\n\n/** Label + glyph. Fixed-width so every card's chips start on the same column. */\nexport const ChannelIdentity = styled.div.attrs({\n\tclassName: 'bik-channel-identity',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex: 1 0 0;\n\tmin-width: 0;\n`;\n\n/** Tinted 24×24 square holding the 16px brand glyph. */\nexport const ChannelGlyph = styled.div.attrs({\n\tclassName: 'bik-channel-glyph',\n})<{ tint: string }>`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 4.8px;\n\tbackground: ${(props) => props.tint};\n\toverflow: hidden;\n`;\n\n/** The account chips. Wraps rather than overflowing when a store has many. */\nexport const ChannelChips = styled.div.attrs({\n\tclassName: 'bik-channel-chips',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n\n\t/* Figma's tag-regular is 24px tall, but Tag's \"regular\" variant floors at\n\t 26px — which pushes the 48px row to 50px. Pin the wrapper back to 24\n\t (Tag's own \\`height\\` prop only reaches its inner container). The second\n\t selector catches a Tag sitting inside a ChipTooltipTarget. */\n\t> *,\n\t> span > * {\n\t\tmin-height: 24px;\n\t}\n`;\n\n/**\n * Hover target for a chip's tooltip.\n *\n * Tippy attaches a ref to its child to use as the trigger, but `Tag` is a plain\n * function component with no `forwardRef` — so wrapping a Tag directly gives\n * Tippy no DOM node and the tooltip silently never opens. This span is the node\n * it can hold on to. (`IconButton` wraps its disabled tooltip the same way.)\n */\nexport const ChipTooltipTarget = styled.span.attrs({\n\tclassName: 'bik-chip-tooltip-target',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n`;\n\n/** Scrollable account list inside the picker modal. */\nexport const ChannelPickerList = styled.div.attrs({\n\tclassName: 'bik-channel-picker-list',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\twidth: 100%;\n\tmax-height: 280px;\n\toverflow-y: auto;\n`;\n\nexport const ChannelPickerRow = styled.div.attrs({\n\tclassName: 'bik-channel-picker-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\twidth: 100%;\n\tpadding: 4px;\n\tborder-radius: 4px;\n\tbox-sizing: border-box;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n/**\n * Glyph + account name inside a picker row. Figma wraps these in their own\n * `px-4` group, so the checkbox sits 12px from the glyph but the glyph sits 8px\n * from the label.\n */\nexport const ChannelPickerAccount = styled.div.attrs({\n\tclassName: 'bik-channel-picker-account',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmin-width: 0;\n\theight: 32px;\n\tpadding: 0 4px;\n`;\n\nexport const ChannelPickerBody = styled.div.attrs({\n\tclassName: 'bik-channel-picker-body',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\twidth: 100%;\n\t/* Figma indents the body 8px inside the modal's own 24px gutter, so the list\n\t sits at 32px while the title stays at 24px. StyledModal's body has no\n\t gutter of its own, so both live here. */\n\tpadding: 0 32px;\n\tbox-sizing: border-box;\n`;\n\n/**\n * Figma reserves a 24×24 slot for a checkbox (an 18px box inset by 3px), but the\n * library's CheckBox renders the bare 18px box. Without this the checkbox column\n * — and everything after it — sits 3px tight against the design. Passed as\n * CheckBox's `style`, which lands on its container.\n */\nexport const CHECKBOX_SLOT: React.CSSProperties = {\n\twidth: 24,\n\theight: 24,\n\tjustifyContent: 'center',\n};\n"],"names":["iconActionButton","css","COLORS","BuilderRoot","styled","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","StepScroll","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","SectionBodyWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","BASE_COLORS","RadioCardText","ChipWrap","Step3Root","Step3Grid","Step3Divider","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowLabel","RowActions","RowActionDivider","RowMenuButton","DraftButtonScope","ModalBody","ModalIcon","AGENT_STATE_MODAL_MIN_HEIGHT","AgentStateModalBody","AgentStateModalHero","ModalActions","ChannelsSectionRoot","ChannelsLink","ChannelCard","ChannelRow","ChannelRowMain","ChannelIdentity","ChannelGlyph","props","ChannelChips","ChipTooltipTarget","ChannelPickerList","ChannelPickerRow","ChannelPickerAccount","ChannelPickerBody","CHECKBOX_SLOT"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../assets/icons/RedirectToNew.svg.js"),x=require("react"),i=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),a=require("../AgentBuilder.styled.js"),g=require("../constants/channels.js"),f=require("../../modals/styledModal.js"),T=require("../../checkBox/CheckBox.js"),k=require("../../tag/Tag.js"),p=({channel:n,selectedIds:c,onClose:s,onApply:S,onManageChannels:d})=>{const[h,u]=x.useState(c);if(x.useEffect(()=>{n&&u(c)},[n]),!n)return null;const{Icon:y,tint:m,accountsNoun:o}=g.channelPresentation(n.type,n.label),C=t=>u(l=>l.includes(t)?l.filter(b=>b!==t):[...l,t]);return e.jsx(f.StyledModal,{"data-test":"agent-channel-select-modal",open:!0,onClose:s,width:"640px",headingTitle:"Select channels to activate",headingSubtitle:`Select the ${o} on which you need this agent enabled on.`,modalHeaderStyles:{padding:"24px",boxSizing:"border-box"},modalBodyStyles:{boxSizing:"border-box"},footerContainerStyle:{padding:"20px 24px",boxSizing:"border-box"},footerLeftCustomElement:d?e.jsxs(a.ChannelsLink,{"data-test":"agent-channel-management-link",type:"button",onClick:d,style:{fontSize:14,lineHeight:"20px",fontWeight:600},children:["Channel management",e.jsx(j.default,{width:16,height:16})]}):void 0,secondaryButton:{"data-test":"agent-channel-cancel",buttonType:"tertiaryGray",size:"small",buttonText:"Cancel",onClick:s},primaryButton:{"data-test":"agent-channel-apply",buttonType:"primary",size:"small",buttonText:"Apply",onClick:()=>S(h)},children:e.jsxs(a.ChannelPickerBody,{children:[e.jsx(i.BodySecondary,{color:r.COLORS.content.secondary,children:`Select from available ${o}`}),e.jsxs(a.ChannelPickerList,{children:[n.accounts.map(t=>{const l=g.isAccountDisconnected(t);return e.jsxs(a.ChannelPickerRow,{"data-test":`agent-channel-account-${t.channelId}`,children:[e.jsx(T.CheckBox,{isChecked:h.includes(t.channelId),ariaLabel:t.channelName,value:t.channelId,onValueChange:()=>C(t.channelId),style:a.CHECKBOX_SLOT}),e.jsxs(a.ChannelPickerAccount,{children:[e.jsx(a.ChannelGlyph,{tint:m,children:y&&e.jsx(y,{size:16})}),e.jsx(i.TitleSmall,{color:r.COLORS.content.primary,children:t.channelName}),l&&e.jsx(k.Tag,{tagText:"Disconnected",type:"negative",variant:"regular",height:20,padding:"2px 8px"})]})]},t.channelId)}),n.accounts.length===0&&e.jsx(i.BodySecondary,{color:r.COLORS.content.placeholder,children:`No ${o} are connected to this store yet.`})]})]})})};p.displayName="ChannelSelectModal";exports.ChannelSelectModal=p;
|
|
2
|
+
//# sourceMappingURL=ChannelSelectModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChannelSelectModal.js","sources":["../../../../../src/components/agent-builder/components/ChannelSelectModal.tsx"],"sourcesContent":["import RedirectIcon from '@src/assets/icons/RedirectToNew.svg';\nimport React, { useEffect, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { StyledModal } from '@src/components/modals';\nimport { Tag } from '@src/components/tag';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { AgentChannel } from '../AgentBuilder.model';\nimport {\n\tChannelGlyph,\n\tChannelPickerAccount,\n\tChannelPickerBody,\n\tChannelPickerList,\n\tChannelPickerRow,\n\tChannelsLink,\n\tCHECKBOX_SLOT,\n} from '../AgentBuilder.styled';\nimport {\n\tchannelPresentation,\n\tisAccountDisconnected,\n} from '../constants/channels';\n\ninterface ChannelSelectModalProps {\n\t/** The channel being edited. `null` closes the modal. */\n\tchannel: AgentChannel | null;\n\t/** Currently activated backend channel ids for this channel. */\n\tselectedIds: string[];\n\tonClose: () => void;\n\t/** Apply — commits the draft selection as backend channel ids. */\n\tonApply: (channelIds: string[]) => void;\n\t/** Footer \"Channel management\" link. Omit to hide it. */\n\tonManageChannels?: () => void;\n}\n\n/**\n * Per-channel account picker, opened from a channel row's edit button.\n *\n * The selection is a LOCAL draft until Apply — the design gives the merchant a\n * Cancel, so toggling here must not reach the agent value until they commit.\n *\n * A disconnected account stays selectable and stays selected: the merchant may\n * be mid-reconnect, and quietly removing it from their agent would hide the\n * problem rather than surface it. It's labelled instead, and the row it came\n * from carries the alert.\n */\nexport const ChannelSelectModal: React.FC<ChannelSelectModalProps> = ({\n\tchannel,\n\tselectedIds,\n\tonClose,\n\tonApply,\n\tonManageChannels,\n}) => {\n\tconst [draft, setDraft] = useState<string[]>(selectedIds);\n\n\t// Re-seed whenever the modal opens (or reopens for a different channel), so a\n\t// cancelled edit doesn't leak into the next one.\n\tuseEffect(() => {\n\t\tif (channel) {\n\t\t\tsetDraft(selectedIds);\n\t\t}\n\t\t// `selectedIds` is intentionally read only at open time — the draft owns it\n\t\t// from then until Apply.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [channel]);\n\n\tif (!channel) {\n\t\treturn null;\n\t}\n\n\tconst { Icon, tint, accountsNoun } = channelPresentation(\n\t\tchannel.type,\n\t\tchannel.label,\n\t);\n\n\tconst toggle = (channelId: string) =>\n\t\tsetDraft((prev) =>\n\t\t\tprev.includes(channelId)\n\t\t\t\t? prev.filter((id) => id !== channelId)\n\t\t\t\t: [...prev, channelId],\n\t\t);\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-channel-select-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"640px\"\n\t\t\theadingTitle=\"Select channels to activate\"\n\t\t\theadingSubtitle={`Select the ${accountsNoun} on which you need this agent enabled on.`}\n\t\t\t// This repo has no global `box-sizing: border-box`, so StyledModal's\n\t\t\t// `width: 100%` + 24px side padding resolves to 688px inside its 640px\n\t\t\t// `overflow: hidden` wrapper — clipping the right 48px, and with it the\n\t\t\t// primary button. Border-box on each section is the fix that doesn't\n\t\t\t// touch the shared modal.\n\t\t\tmodalHeaderStyles={{ padding: '24px', boxSizing: 'border-box' }}\n\t\t\tmodalBodyStyles={{ boxSizing: 'border-box' }}\n\t\t\tfooterContainerStyle={{ padding: '20px 24px', boxSizing: 'border-box' }}\n\t\t\tfooterLeftCustomElement={\n\t\t\t\tonManageChannels ? (\n\t\t\t\t\t<ChannelsLink\n\t\t\t\t\t\tdata-test=\"agent-channel-management-link\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={onManageChannels}\n\t\t\t\t\t\tstyle={{ fontSize: 14, lineHeight: '20px', fontWeight: 600 }}\n\t\t\t\t\t>\n\t\t\t\t\t\tChannel management\n\t\t\t\t\t\t<RedirectIcon width={16} height={16} />\n\t\t\t\t\t</ChannelsLink>\n\t\t\t\t) : undefined\n\t\t\t}\n\t\t\tsecondaryButton={{\n\t\t\t\t'data-test': 'agent-channel-cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t\tprimaryButton={{\n\t\t\t\t'data-test': 'agent-channel-apply',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Apply',\n\t\t\t\tonClick: () => onApply(draft),\n\t\t\t}}\n\t\t>\n\t\t\t<ChannelPickerBody>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{`Select from available ${accountsNoun}`}\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ChannelPickerList>\n\t\t\t\t\t{channel.accounts.map((account) => {\n\t\t\t\t\t\tconst disconnected = isAccountDisconnected(account);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ChannelPickerRow\n\t\t\t\t\t\t\t\tkey={account.channelId}\n\t\t\t\t\t\t\t\tdata-test={`agent-channel-account-${account.channelId}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CheckBox\n\t\t\t\t\t\t\t\t\tisChecked={draft.includes(account.channelId)}\n\t\t\t\t\t\t\t\t\tariaLabel={account.channelName}\n\t\t\t\t\t\t\t\t\tvalue={account.channelId}\n\t\t\t\t\t\t\t\t\tonValueChange={() => toggle(account.channelId)}\n\t\t\t\t\t\t\t\t\tstyle={CHECKBOX_SLOT}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<ChannelPickerAccount>\n\t\t\t\t\t\t\t\t\t<ChannelGlyph tint={tint}>\n\t\t\t\t\t\t\t\t\t\t{Icon && <Icon size={16} />}\n\t\t\t\t\t\t\t\t\t</ChannelGlyph>\n\t\t\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{account.channelName}\n\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t{disconnected && (\n\t\t\t\t\t\t\t\t\t\t// NOT `size=\"small\"`: that renders through BodyTiny, which\n\t\t\t\t\t\t\t\t\t\t// is 10px AND has no font-family, so it falls back to the\n\t\t\t\t\t\t\t\t\t\t// browser serif. The default reads as 12px Inter — Figma's\n\t\t\t\t\t\t\t\t\t\t// body-caption, same as every other chip.\n\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\ttagText=\"Disconnected\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"negative\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\t\tpadding=\"2px 8px\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</ChannelPickerAccount>\n\t\t\t\t\t\t\t</ChannelPickerRow>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\n\t\t\t\t\t{channel.accounts.length === 0 && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t{`No ${accountsNoun} are connected to this store yet.`}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</ChannelPickerList>\n\t\t\t</ChannelPickerBody>\n\t\t</StyledModal>\n\t);\n};\n\nChannelSelectModal.displayName = 'ChannelSelectModal';\n\nexport type { ChannelSelectModalProps };\n"],"names":["ChannelSelectModal","channel","selectedIds","onClose","onApply","onManageChannels","draft","setDraft","useState","useEffect","Icon","tint","accountsNoun","channelPresentation","toggle","channelId","prev","id","jsx","StyledModal","jsxs","ChannelsLink","RedirectIcon","ChannelPickerBody","BodySecondary","COLORS","ChannelPickerList","account","disconnected","isAccountDisconnected","ChannelPickerRow","CheckBox","CHECKBOX_SLOT","ChannelPickerAccount","ChannelGlyph","TitleSmall","Tag"],"mappings":"2cA6CaA,EAAwD,CAAC,CACrE,QAAAC,EACA,YAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAmBN,CAAW,EAaxD,GATAO,EAAAA,UAAU,IAAM,CACXR,GACHM,EAASL,CAAW,CAKtB,EAAG,CAACD,CAAO,CAAC,EAER,CAACA,EACJ,OAAO,KAGR,KAAM,CAAE,KAAAS,EAAM,KAAAC,EAAM,aAAAC,CAAA,EAAiBC,EAAAA,oBACpCZ,EAAQ,KACRA,EAAQ,KAAA,EAGHa,EAAUC,GACfR,EAAUS,GACTA,EAAK,SAASD,CAAS,EACpBC,EAAK,OAAQC,GAAOA,IAAOF,CAAS,EACpC,CAAC,GAAGC,EAAMD,CAAS,CAAA,EAGxB,OACCG,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,6BACV,KAAI,GACJ,QAAAhB,EACA,MAAM,QACN,aAAa,8BACb,gBAAiB,cAAcS,CAAY,4CAM3C,kBAAmB,CAAE,QAAS,OAAQ,UAAW,YAAA,EACjD,gBAAiB,CAAE,UAAW,YAAA,EAC9B,qBAAsB,CAAE,QAAS,YAAa,UAAW,YAAA,EACzD,wBACCP,EACCe,EAAAA,KAACC,EAAAA,aAAA,CACA,YAAU,gCACV,KAAK,SACL,QAAShB,EACT,MAAO,CAAE,SAAU,GAAI,WAAY,OAAQ,WAAY,GAAA,EACvD,SAAA,CAAA,qBAEAa,EAAAA,IAACI,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CAAA,CAAA,EAEnC,OAEL,gBAAiB,CAChB,YAAa,uBACb,WAAY,eACZ,KAAM,QACN,WAAY,SACZ,QAASnB,CAAA,EAEV,cAAe,CACd,YAAa,sBACb,WAAY,UACZ,KAAM,QACN,WAAY,QACZ,QAAS,IAAMC,EAAQE,CAAK,CAAA,EAG7B,gBAACiB,oBAAA,CACA,SAAA,CAAAL,EAAAA,IAACM,EAAAA,eAAc,MAAOC,EAAAA,OAAO,QAAQ,UACnC,SAAA,yBAAyBb,CAAY,EAAA,CACvC,SAECc,EAAAA,kBAAA,CACC,SAAA,CAAAzB,EAAQ,SAAS,IAAK0B,GAAY,CAClC,MAAMC,EAAeC,EAAAA,sBAAsBF,CAAO,EAClD,OACCP,EAAAA,KAACU,EAAAA,iBAAA,CAEA,YAAW,yBAAyBH,EAAQ,SAAS,GAErD,SAAA,CAAAT,EAAAA,IAACa,EAAAA,SAAA,CACA,UAAWzB,EAAM,SAASqB,EAAQ,SAAS,EAC3C,UAAWA,EAAQ,YACnB,MAAOA,EAAQ,UACf,cAAe,IAAMb,EAAOa,EAAQ,SAAS,EAC7C,MAAOK,EAAAA,aAAA,CAAA,SAEPC,EAAAA,qBAAA,CACA,SAAA,CAAAf,EAAAA,IAACgB,EAAAA,cAAa,KAAAvB,EACZ,SAAAD,SAASA,EAAA,CAAK,KAAM,GAAI,CAAA,CAC1B,QACCyB,EAAAA,WAAA,CAAW,MAAOV,EAAAA,OAAO,QAAQ,QAChC,WAAQ,YACV,EACCG,GAKAV,EAAAA,IAACkB,EAAAA,IAAA,CACA,QAAQ,eACR,KAAK,WACL,QAAQ,UACR,OAAQ,GACR,QAAQ,SAAA,CAAA,CACT,CAAA,CAEF,CAAA,CAAA,EA9BKT,EAAQ,SAAA,CAiChB,CAAC,EAEA1B,EAAQ,SAAS,SAAW,GAC5BiB,EAAAA,IAACM,EAAAA,cAAA,CAAc,MAAOC,EAAAA,OAAO,QAAQ,YACnC,SAAA,MAAMb,CAAY,mCAAA,CACpB,CAAA,CAAA,CAEF,CAAA,CAAA,CACD,CAAA,CAAA,CAGH,EAEAZ,EAAmB,YAAc"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("../../../assets/icons/edit.svg.js"),B=require("../../../assets/icons/errorInfo.svg.js"),T=require("react"),f=require("../../TypographyStyle.js"),b=require("../../../constants/Theme.js"),a=require("../AgentBuilder.styled.js"),u=require("../constants/channels.js"),M=require("../context/AgentBuilderContext.js"),$=require("./ChannelSelectModal.js"),O=require("../../checkBox/CheckBox.js"),m=require("../../tooltips/Tooltip.js"),x=require("../../tag/Tag.js"),R=require("../../icon-button/IconButton.js"),S=3,w=n=>[...n.filter(u.isAccountDisconnected),...n.filter(i=>!u.isAccountDisconnected(i))],I=()=>{const{value:n,updateField:i,availableChannels:c,onManageChannels:g}=M.useAgentBuilderContext(),[s,r]=T.useState(null),p=T.useMemo(()=>{const t=new Map;return(n.channels??[]).forEach(o=>t.set(o.type,o.channelIds)),t},[n.channels]);if(!c||c.length===0)return null;const C=(t,o)=>{const d=(n.channels??[]).filter(y=>y.type!==t);i("channels",o.length>0?[...d,{type:t,channelIds:o}]:d)},l=c.find(t=>t.type===s)??null;return e.jsxs(a.ChannelsSectionRoot,{children:[e.jsx(f.TitleSmall,{color:b.COLORS.content.primary,children:"Channels to activate it on"}),c.map(t=>e.jsx(L,{channel:t,selectedIds:p.get(t.type)??[],onSelectionChange:o=>C(t.type,o),onEdit:()=>r(t.type)},String(t.type))),e.jsx($.ChannelSelectModal,{channel:l,selectedIds:l?p.get(l.type)??[]:[],onClose:()=>r(null),onApply:t=>{l&&C(l.type,t),r(null)},onManageChannels:g&&l?()=>g(l.type):void 0})]})};I.displayName="ChannelsSection";const L=({channel:n,selectedIds:i,onSelectionChange:c,onEdit:g})=>{const{label:s,Icon:r,tint:p,accountsNoun:C}=u.channelPresentation(n.type,n.label),l=n.accounts.length===0,t=u.selectedAccounts(n,i),o=!l&&t.length===n.accounts.length,d=t.length>0&&!o,y=w(t.length>0?t:n.accounts),q=y.slice(0,S),j=y.slice(S),v=()=>c(o?[]:n.accounts.map(h=>h.channelId));return e.jsx(a.ChannelCard,{"data-test":`agent-channel-${n.type}`,role:"group","aria-label":s,children:e.jsxs(a.ChannelRow,{children:[e.jsxs(a.ChannelRowMain,{children:[e.jsx(O.CheckBox,{isChecked:o||d,isPartiallyChecked:d,isDisabled:l,ariaLabel:s,onValueChange:v,style:a.CHECKBOX_SLOT}),e.jsxs(a.ChannelIdentity,{children:[e.jsx(a.ChannelGlyph,{tint:p,children:r&&e.jsx(r,{size:16})}),e.jsx(f.TitleSmall,{color:b.COLORS.content.primary,children:s})]}),e.jsx(a.ChannelChips,{children:l?e.jsx(m.Tooltip,{body:`No ${C} are connected to this store yet. Connect one from channel management to activate this agent on ${s}.`,placement:"top",children:e.jsx(a.ChipTooltipTarget,{children:e.jsx(x.Tag,{tagText:"Disabled",type:"neutral",variant:"regular",height:24,cursor:"default"})})}):e.jsxs(e.Fragment,{children:[q.map(h=>e.jsx(N,{account:h,channelLabel:s},h.channelId)),j.length>0&&e.jsx(m.Tooltip,{body:j.map(h=>h.channelName).join(", "),placement:"top",children:e.jsx(a.ChipTooltipTarget,{children:e.jsx(x.Tag,{tagText:`+${j.length}`,type:"purple",variant:"regular",height:24,cursor:"default"})})})]})})]}),e.jsx(R.IconButton,{"data-test":`agent-channel-${n.type}-edit`,"aria-label":`Edit ${s} channels`,Icon:A.default,size:"xs",iconPadding:4,disabled:l,onClick:g})]})})},N=({account:n,channelLabel:i})=>u.isAccountDisconnected(n)?e.jsx(m.Tooltip,{body:`${n.channelName} is disconnected. This agent won't run on it until you reconnect it from ${i} channel management.`,placement:"top",children:e.jsx(a.ChipTooltipTarget,{children:e.jsx(x.Tag,{tagText:n.channelName,type:"negative",variant:"regular",height:24,LeadingIcon:B.default,leadingIconId:`channel-error-${n.channelId}`,cursor:"default"})})}):e.jsx(x.Tag,{tagText:n.channelName,type:"purple",variant:"regular",height:24});exports.ChannelsSection=I;
|
|
2
|
+
//# sourceMappingURL=ChannelsSection.js.map
|