@bikdotai/bik-component-library 0.0.852-beta.9 → 0.0.853-beta.0

package/dist/esm/components/agent-builder/AgentBuilder.js.map

@@ -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\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// 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\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\tsetShowLeaveConfirm(false);\n\t\tonBack?.();\n\t}, [logAction, onSaveDraft, onBack]);\n\tconst handleTestAgent = useCallback(() => {\n\t\tlogAction('onTestAgent');\n\t\tonTestAgent?.();\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\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\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\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","validation","applicationType","charLimits","isSaving","isPublishing","isLoading","footerHint","disableStepNavigation","debugLog","modalMode","setModalMode","useState","publishingLocal","setPublishingLocal","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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"}
+{"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// 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\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\tsetShowLeaveConfirm(false);\n\t\tonBack?.();\n\t}, [logAction, onSaveDraft, onBack]);\n\tconst handleTestAgent = useCallback(() => {\n\t\tlogAction('onTestAgent');\n\t\tonTestAgent?.();\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\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\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","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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"}

package/dist/esm/components/agent-builder/AgentBuilder.model.d.ts

@@ -1,5 +1,6 @@
 import { AgentConfig, AgentHandoverConfig, AgentToolDoc, IntentOption, ModelOption, StepKey, StepValidation, SubAgentRef, Trigger } from '@bikdotai/bik-models/ai-agents';
 import { ApplicationType } from '@bikdotai/bik-models/growth';
+import { VariableListInterfaceV3 } from '../variable-picker-v3/model';
 import { AgentCharLimits } from './constants/charLimits';
 import { ConfigToolKey, ToolSource } from './constants/tools';
 /**
@@ -232,6 +233,13 @@ export interface AgentBuilderConfig {
      * {@link AgentBuilderProps.onConnectIntegration}.
      */
     integrationStatus?: Partial<Record<ToolSource, boolean>>;
+    /**
+     * Variable catalog for the `@` picker's "Variables" view (the shared
+     * VariablePicker's `data` shape). Picking a variable inserts its
+     * `{{actualValue}}` token into the instructions / guardrails at the cursor.
+     * Omit (or pass empty) to hide the Variables category entirely.
+     */
+    variablesData?: VariableListInterfaceV3[];
     /** Host application context the merchant runs in (e.g. ApplicationType.MANIFEST). */
     applicationType?: ApplicationType;
     /** Optional consumer-supplied validity; merged over the builder's derived validity. */

package/dist/esm/components/agent-builder/components/ConfigToolPanel.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { VariableListInterfaceV3 } from '../../variable-picker-v3/model';
 import { ConfigToolConfig, ConfigToolKey, ParamsBlob } from '../AgentBuilder.model';
 import { AgentCharLimits } from '../constants/charLimits';
 interface ConfigToolPanelProps {
@@ -18,6 +19,13 @@ interface ConfigToolPanelProps {
     /** Optional "Improve with AI" for multiline fields. Omit to hide it. */
     onImprove?: (text: string) => Promise<string>;
     charLimits?: AgentCharLimits;
+    /**
+     * Variable catalog for the `@` trigger. When non-empty, `@` in the email
+     * tool's Subject / Send To / Reply To / CC opens the variable picker
+     * directly, and Message Instructions upgrades to the variables-only mention
+     * editor. Absent → the drawer behaves exactly as before.
+     */
+    variablesData?: VariableListInterfaceV3[];
     /** SideModal stacking order — raise it when opened over another drawer. */
     zIndex?: number;
 }

package/dist/esm/components/agent-builder/components/ConfigToolPanel.js

@@ -1,18 +1,19 @@
-import { jsx as r, jsxs as k } from "react/jsx-runtime";
-import $ from "../../../assets/icons/cross.svg.js";
-import { useState as w } from "react";
-import u from "styled-components";
-import { TitleSmall as C, BodyCaption as E } from "../../TypographyStyle.js";
-import { COLORS as i } from "../../../constants/Theme.js";
-import { FieldBlock as D } from "../AgentBuilder.styled.js";
-import { AGENT_CHAR_LIMITS as O } from "../constants/charLimits.js";
-import { DRAWER_BODY_STYLE as R, DRAWER_HEADER_STYLE as L, DrawerHeaderText as A } from "./DrawerHeaderText.js";
-import { ToolInstructionsField as j } from "./ToolInstructionsField.js";
-import { SideModal as P } from "../../side-modal/SideModal.js";
-import { Switch as Y } from "../../switch/Switch.js";
-import { Input as F } from "../../input/Input.js";
-import { Tag as z } from "../../tag/Tag.js";
-const V = {
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import L from "../../../assets/icons/cross.svg.js";
+import j, { useState as R, useRef as T } from "react";
+import w from "styled-components";
+import { TitleSmall as O, BodyCaption as F } from "../../TypographyStyle.js";
+import { COLORS as u } from "../../../constants/Theme.js";
+import { FieldBlock as P } from "../AgentBuilder.styled.js";
+import { AGENT_CHAR_LIMITS as Y } from "../constants/charLimits.js";
+import { DRAWER_BODY_STYLE as V, DRAWER_HEADER_STYLE as z, DrawerHeaderText as M } from "./DrawerHeaderText.js";
+import { ToolInstructionsField as H } from "./ToolInstructionsField.js";
+import { VariableTriggerArea as A } from "./VariableTriggerArea.js";
+import { SideModal as W } from "../../side-modal/SideModal.js";
+import { Switch as q } from "../../switch/Switch.js";
+import { Input as G } from "../../input/Input.js";
+import { Tag as N } from "../../tag/Tag.js";
+const J = {
   send_email: {
     title: "Send email",
     subtitle: "Notify someone by email when this agent can't continue. You pick the recipient, the AI drafts the message."
@@ -21,222 +22,267 @@ const V = {
     title: "Send Slack message",
     subtitle: "Post a message to a Slack channel. You pick the channel, the AI composes the message from the conversation."
   }
-}, H = ({
+}, K = ({
   chips: n,
-  onChange: a,
-  placeholder: c,
-  nativeID: p,
-  hint: d
+  onChange: s,
+  placeholder: h,
+  nativeID: y,
+  hint: C,
+  variablesData: E
 }) => {
-  const [m, h] = w(""), y = () => {
-    const e = m.split(",").map((s) => s.trim()).filter(Boolean);
-    e.length && a([...n, ...e.filter((s) => !n.includes(s))]), h("");
-  };
-  return /* @__PURE__ */ k(G, { children: [
+  const [i, g] = R(""), [$, a] = R(!1), v = T(null), S = T(null), x = () => {
+    const t = i.split(",").map((c) => c.trim()).filter(Boolean);
+    t.length && s([...n, ...t.filter((c) => !n.includes(c))]), g("");
+  }, f = T(x);
+  f.current = x;
+  const b = T(!1), l = T(!1);
+  return /* @__PURE__ */ I(X, { ref: v, children: [
     /* @__PURE__ */ r(
-      N,
+      A,
       {
-        id: p,
-        type: "text",
-        placeholder: c,
-        value: m,
-        onChange: (e) => h(e.target.value),
-        onBlur: y,
-        onKeyDown: (e) => {
-          e.key === "Enter" || e.key === "," ? (e.preventDefault(), y()) : e.key === "Backspace" && m === "" && n.length > 0 && a(n.slice(0, -1));
-        }
+        addDataButton: !0,
+        variablesData: E,
+        onOpenChange: (t) => {
+          b.current = t, !t && setTimeout(() => {
+            !l.current && !v.current?.contains(document.activeElement) && f.current(), l.current = !1;
+          }, 0);
+        },
+        onInsert: (t, c) => {
+          l.current = !0;
+          const k = c ?? i.length;
+          g(`${i.slice(0, k)}${t}${i.slice(k)}`), requestAnimationFrame(() => {
+            const p = S.current;
+            p?.focus(), p?.setSelectionRange(k + t.length, k + t.length);
+          });
+        },
+        children: /* @__PURE__ */ r(
+          Z,
+          {
+            id: y,
+            ref: S,
+            type: "text",
+            placeholder: $ && i === "" && (E?.length ?? 0) > 0 ? "Enter text, type @ to add variable" : h,
+            value: i,
+            onChange: (t) => g(t.target.value),
+            onFocus: () => a(!0),
+            onBlur: () => {
+              a(!1), setTimeout(() => {
+                !b.current && !v.current?.contains(document.activeElement) && f.current();
+              }, 0);
+            },
+            onKeyDown: (t) => {
+              t.key === "Enter" || t.key === "," ? (t.preventDefault(), x()) : t.key === "Backspace" && i === "" && n.length > 0 && s(n.slice(0, -1));
+            }
+          }
+        )
       }
     ),
-    d,
-    n.length > 0 && /* @__PURE__ */ r(q, { children: n.map((e, s) => /* @__PURE__ */ r(
-      z,
+    C,
+    n.length > 0 && /* @__PURE__ */ r(ee, { children: n.map((t, c) => /* @__PURE__ */ r(
+      N,
       {
-        tagText: e,
+        tagText: t.replace(/\{\{variable:([^}]+)\}\}/g, "{{$1}}"),
         theme: "light",
         type: "neutral",
         variant: "regular",
-        TrailingIcon: $,
-        onTrailingIconClicked: () => a(n.filter((x, g) => g !== s))
+        TrailingIcon: L,
+        onTrailingIconClicked: () => s(n.filter((k, p) => p !== c))
       },
-      `${e}-${s}`
+      `${t}-${c}`
     )) })
   ] });
-}, M = (n, a) => {
-  const c = {};
-  return Object.keys(n).forEach((p) => {
-    c[p] = a?.params[p]?.value ?? n[p].value;
-  }), c;
-}, W = (n) => String(n ?? "").split(",").map((a) => a.trim()).filter(Boolean), pt = ({
+}, Q = (n, s) => {
+  const h = {};
+  return Object.keys(n).forEach((y) => {
+    h[y] = s?.params[y]?.value ?? n[y].value;
+  }), h;
+}, U = (n) => String(n ?? "").split(",").map((s) => s.trim()).filter(Boolean), ke = ({
   toolKey: n,
-  template: a,
-  onClose: c,
-  onSave: p,
-  initial: d,
-  onImprove: m,
-  charLimits: h = O,
-  zIndex: y
+  template: s,
+  onClose: h,
+  onSave: y,
+  initial: C,
+  onImprove: E,
+  charLimits: i = Y,
+  variablesData: g,
+  zIndex: $
 }) => {
-  const [e, s] = w(
-    () => M(a, d)
-  ), [x, g] = w(!1), v = Object.values(a), B = n === "send_email", f = (t, l) => s((o) => ({ ...o, [t]: l })), T = v.every(
-    (t) => !t.required || String(e[t.key] ?? "").trim() !== ""
-  ), I = async () => {
-    if (!T || x)
+  const [a, v] = R(
+    () => Q(s, C)
+  ), [S, x] = R(!1), f = Object.values(s), b = n === "send_email", l = (e, m) => v((d) => ({ ...d, [e]: m })), t = f.every((e) => !(e.required && String(a[e.key] ?? "").trim() === "" || e.component === "MultilineInput" && String(a[e.key] ?? "").length > i.instructions)), c = async () => {
+    if (!t || S)
       return;
-    const t = {};
-    v.forEach((S) => {
-      t[S.key] = { ...S, value: e[S.key] };
+    const e = {};
+    f.forEach((o) => {
+      e[o.key] = { ...o, value: a[o.key] };
     });
-    const l = {
-      id: d?.id ?? `${n}_${Date.now().toString(36)}`,
+    const m = {
+      id: C?.id ?? `${n}_${Date.now().toString(36)}`,
       tool_key: n,
-      params: t
-    }, o = p(l);
-    if (o && typeof o.then == "function") {
-      g(!0);
+      params: e
+    }, d = y(m);
+    if (d && typeof d.then == "function") {
+      x(!0);
       try {
-        await o;
+        await d;
       } finally {
-        g(!1);
+        x(!1);
       }
     }
-  }, _ = (t) => {
-    const l = `config-tool-${t.key.toLowerCase()}`;
-    switch (t.component) {
+  }, k = (e) => {
+    const m = `config-tool-${e.key.toLowerCase()}`;
+    switch (e.component) {
       // Multi-value email chips — only for the email tool. Slack's KeywordInput
       // (channelId) falls through to the plain input below.
       case "KeywordInput":
-        if (!B)
+        if (!b)
           break;
-        return /* @__PURE__ */ k(D, { children: [
-          /* @__PURE__ */ r(C, { color: i.content.primary, children: t.title }),
+        return /* @__PURE__ */ I(P, { children: [
+          /* @__PURE__ */ r(O, { color: u.content.primary, children: e.title }),
           /* @__PURE__ */ r(
-            H,
+            K,
             {
-              nativeID: l,
-              placeholder: t.hint ?? "",
-              chips: W(e[t.key]),
-              onChange: (o) => f(t.key, o.join(",")),
-              hint: /* @__PURE__ */ r(E, { color: i.content.secondary, children: "Press Enter or comma to add multiple emails" })
+              nativeID: m,
+              placeholder: e.hint ?? "",
+              chips: U(a[e.key]),
+              onChange: (o) => l(e.key, o.join(",")),
+              variablesData: g,
+              hint: /* @__PURE__ */ r(F, { color: u.content.secondary, children: "Press Enter or comma to add multiple emails" })
             }
           )
-        ] }, t.key);
+        ] }, e.key);
       case "MultilineInput":
         return /* @__PURE__ */ r(
-          j,
+          H,
           {
-            "data-test": l,
-            label: t.title,
-            value: String(e[t.key] ?? ""),
-            onChange: (o) => f(t.key, o),
-            maxLength: h.instructions,
-            placeholder: t.hint ?? "",
-            onImprove: m
+            "data-test": m,
+            label: e.title,
+            value: String(a[e.key] ?? ""),
+            onChange: (o) => l(e.key, o),
+            maxLength: i.instructions,
+            placeholder: e.hint ?? "",
+            onImprove: E,
+            variablesData: g
           },
-          t.key
+          e.key
         );
       case "Switch":
-        return /* @__PURE__ */ k(J, { children: [
-          /* @__PURE__ */ k(K, { children: [
-            /* @__PURE__ */ r(C, { color: i.content.primary, children: t.title }),
-            t.hint && /* @__PURE__ */ r(E, { color: i.content.secondary, children: t.hint })
+        return /* @__PURE__ */ I(te, { children: [
+          /* @__PURE__ */ I(ne, { children: [
+            /* @__PURE__ */ r(O, { color: u.content.primary, children: e.title }),
+            e.hint && /* @__PURE__ */ r(F, { color: u.content.secondary, children: e.hint })
           ] }),
           /* @__PURE__ */ r(
-            Y,
+            q,
             {
-              "data-test": l,
-              value: !!e[t.key],
-              onValueChange: async (o) => f(t.key, o)
+              "data-test": m,
+              value: !!a[e.key],
+              onValueChange: async (o) => l(e.key, o)
             }
           )
-        ] }, t.key);
+        ] }, e.key);
     }
-    return /* @__PURE__ */ r(
-      F,
+    const d = /* @__PURE__ */ r(
+      G,
       {
-        "data-test": l,
+        "data-test": m,
         variant: "small",
-        labelText: t.title,
+        labelText: e.title,
         labelTextBold: !0,
-        placeholder: t.hint ?? "",
-        value: String(e[t.key] ?? ""),
-        onChangeText: (o) => f(t.key, o)
-      },
-      t.key
+        placeholder: e.hint ?? "",
+        value: String(a[e.key] ?? ""),
+        onChangeText: (o) => l(e.key, o)
+      }
     );
-  }, b = V[n];
+    return b ? /* @__PURE__ */ r(
+      A,
+      {
+        addDataButton: !0,
+        variablesData: g,
+        onInsert: (o, D) => {
+          const B = String(a[e.key] ?? ""), _ = D ?? B.length;
+          l(
+            e.key,
+            `${B.slice(0, _)}${o}${B.slice(_)}`
+          );
+        },
+        children: d
+      },
+      e.key
+    ) : /* @__PURE__ */ r(j.Fragment, { children: d }, e.key);
+  }, p = J[n];
   return /* @__PURE__ */ r(
-    P,
+    W,
     {
-      header: b.title,
+      header: p.title,
       closeOnEscapeKey: !1,
-      zIndex: y,
-      headerCustomComponent: /* @__PURE__ */ r(A, { title: b.title, subtitle: b.subtitle }),
+      zIndex: $,
+      headerCustomComponent: /* @__PURE__ */ r(M, { title: p.title, subtitle: p.subtitle }),
       hideCrossButton: !1,
       width: "431px",
-      headerStyle: L,
-      bodyStyle: R,
-      onClose: c,
+      headerStyle: z,
+      bodyStyle: V,
+      onClose: h,
       saveButtonProps: {
         "data-test": "config-tool-save",
         buttonText: "Save",
         buttonType: "primary",
         size: "small",
-        disabled: !T,
-        isLoading: x,
-        onClick: I
+        disabled: !t,
+        isLoading: S,
+        onClick: c
       },
       cancelButtonProps: {
         "data-test": "config-tool-cancel",
         buttonText: "Cancel",
         buttonType: "tertiaryGray",
         size: "small",
-        onClick: c
+        onClick: h
       },
-      children: v.map(_)
+      children: f.map(k)
     }
   );
-}, G = u.div`
+}, X = w.div`
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-`, N = u.input`
+`, Z = w.input`
 	width: 100%;
 	min-width: 0;
 	box-sizing: border-box;
 	height: 32px;
 	padding: 0 8px;
-	border: 1px solid ${i.stroke.primary};
+	border: 1px solid ${u.stroke.primary};
 	border-radius: 4px;
 	font-family: 'Inter', sans-serif;
 	font-size: 14px;
-	color: ${i.content.primary};
-	background: ${i.surface.standard};
+	color: ${u.content.primary};
+	background: ${u.surface.standard};
 	outline: none;
 
 	&::placeholder {
-		color: ${i.content.secondary};
+		color: ${u.content.secondary};
 	}
 
 	&:focus {
-		border-color: ${i.stroke.brand};
+		border-color: ${u.stroke.brand};
 	}
-`, q = u.div`
+`, ee = w.div`
 	display: flex;
 	flex-wrap: wrap;
 	gap: 6px;
-`, J = u.div`
+`, te = w.div`
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: 12px;
-`, K = u.div`
+`, ne = w.div`
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 0;
 `;
 export {
-  pt as ConfigToolPanel
+  ke as ConfigToolPanel
 };
 //# sourceMappingURL=ConfigToolPanel.js.map