@bikdotai/bik-component-library 0.0.875-beta.1 → 0.0.875-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigToolPanel.js","sources":["../../../../../src/components/agent-builder/components/ConfigToolPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { Switch } from '@src/components/switch';\nimport { Tag } from '@src/components/tag';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tConfigToolConfig,\n\tConfigToolKey,\n\tParamField,\n\tParamsBlob,\n} from '../AgentBuilder.model';\nimport { FieldBlock } from '../AgentBuilder.styled';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { ToolInstructionsField } from './ToolInstructionsField';\nimport { VariableTriggerArea } from './VariableTriggerArea';\n\n/** Header copy per shared-drawer tool. */\nconst TOOL_COPY: Record<ConfigToolKey, { title: string; subtitle: string }> = {\n\tsend_email: {\n\t\ttitle: 'Send email',\n\t\tsubtitle:\n\t\t\t\"Notify someone by email when this agent can't continue. You pick the recipient, the AI drafts the message.\",\n\t},\n\tsend_slack_message: {\n\t\ttitle: 'Send Slack message',\n\t\tsubtitle:\n\t\t\t'Post a message to a Slack channel. You pick the channel, the AI composes the message from the conversation.',\n\t},\n\tgoogle_sheet_get_data: {\n\t\ttitle: 'Get data from sheet',\n\t\tsubtitle:\n\t\t\t'Look up rows in a Google Sheet. You pick the sheet and describe its columns, the AI writes the query it needs.',\n\t},\n\tgoogle_sheet_add_row: {\n\t\ttitle: 'Add row to sheet',\n\t\tsubtitle:\n\t\t\t'Append a row to a Google Sheet. You pick the sheet and its columns, the AI fills them in from the conversation.',\n\t},\n};\n\ninterface ConfigToolPanelProps {\n\t/** Which tool this drawer configures (drives copy + persistence). */\n\ttoolKey: ConfigToolKey;\n\t/**\n\t * The backend template (`list-catalog` → params) for `toolKey`. The form is\n\t * DYNAMIC: exactly these fields render, in this order, each by its\n\t * `component` kind (KeywordInput | MultilineInput | Switch | fallback input).\n\t */\n\ttemplate: ParamsBlob;\n\tonClose: () => void;\n\t/** Persist the filled template. A pending promise shows the Save loader. */\n\tonSave: (config: ConfigToolConfig) => void | Promise<void>;\n\t/** Seed values when editing an existing tool. */\n\tinitial?: ConfigToolConfig;\n\t/** Optional \"Improve with AI\" for multiline fields. Omit to hide it. */\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/**\n\t * Variable catalog for the `@` trigger. When non-empty, `@` in the email\n\t * tool's Subject / Send To / Reply To / CC opens the variable picker\n\t * directly, and Message Instructions upgrades to the variables-only mention\n\t * editor. Absent → the drawer behaves exactly as before.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n\t/**\n\t * Portal target for the drawer, passed straight to {@link SideModal}\n\t * (default `document.body`). Lets a host render it into its own positioned\n\t * slot rather than as a viewport overlay.\n\t */\n\telement?: Element | DocumentFragment;\n\t/** SideModal stacking order — raise it when opened over another drawer. */\n\tzIndex?: number;\n}\n\ninterface EmailChipsFieldProps {\n\tchips: string[];\n\tonChange: (next: string[]) => void;\n\tplaceholder: string;\n\tnativeID?: string;\n\t/** Optional helper caption shown between the input and the chips. */\n\thint?: React.ReactNode;\n\t/**\n\t * Variable catalog for the `@` trigger. A picked variable is interpolated\n\t * into the entry TEXT at the caret (so values can mix text and variables,\n\t * e.g. `ops-{{variable:store_name}}@acme.com`) — it becomes a chip on\n\t * Enter / comma like any typed value.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n}\n\n/**\n * Email entry field: type an address and press Enter / comma (or blur) to add\n * it. Added emails render as removable chips BELOW the input — not inside it.\n * Backspace on an empty input removes the last chip.\n */\nconst EmailChipsField: React.FC<EmailChipsFieldProps> = ({\n\tchips,\n\tonChange,\n\tplaceholder,\n\tnativeID,\n\thint,\n\tvariablesData,\n}) => {\n\tconst [buffer, setBuffer] = useState('');\n\tconst [entryFocused, setEntryFocused] = useState(false);\n\tconst wrapRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\tconst commit = () => {\n\t\tconst parts = buffer\n\t\t\t.split(',')\n\t\t\t.map((s) => s.trim())\n\t\t\t.filter(Boolean);\n\t\tif (parts.length) {\n\t\t\tonChange([...chips, ...parts.filter((p) => !chips.includes(p))]);\n\t\t}\n\t\tsetBuffer('');\n\t};\n\t// The blur handler defers via setTimeout — read the LATEST commit (with the\n\t// current buffer), not the one captured when the blur fired.\n\tconst commitRef = useRef(commit);\n\tcommitRef.current = commit;\n\t// While the variable panel is open, focus bounces through it (search box,\n\t// rows) — blur must not commit the half-composed entry.\n\tconst panelOpenRef = useRef(false);\n\t// A variable was just picked — the panel-close commit below must not fire\n\t// (onInsert refocuses the entry, so its eventual blur commits instead).\n\tconst insertedRef = useRef(false);\n\n\treturn (\n\t\t<ChipsFieldWrap ref={wrapRef}>\n\t\t\t<VariableTriggerArea\n\t\t\t\taddDataButton\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\tonOpenChange={(open) => {\n\t\t\t\t\tpanelOpenRef.current = open;\n\t\t\t\t\tif (open) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\t// Panel closed (Escape / outside click / pick). If the entry's\n\t\t\t\t\t// blur-commit was skipped while the panel was open and focus is\n\t\t\t\t\t// not coming back, the half-typed entry would be silently lost\n\t\t\t\t\t// on save — commit it now.\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t!insertedRef.current &&\n\t\t\t\t\t\t\t!wrapRef.current?.contains(document.activeElement)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tcommitRef.current();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinsertedRef.current = false;\n\t\t\t\t\t}, 0);\n\t\t\t\t}}\n\t\t\t\tonInsert={(token, caret) => {\n\t\t\t\t\tinsertedRef.current = true;\n\t\t\t\t\tconst at = caret ?? buffer.length;\n\t\t\t\t\tsetBuffer(`${buffer.slice(0, at)}${token}${buffer.slice(at)}`);\n\t\t\t\t\t// Put the caret after the inserted token so typing continues\n\t\t\t\t\t// naturally (e.g. `{{variable:store_name}}|@acme.com`).\n\t\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\t\tconst el = inputRef.current;\n\t\t\t\t\t\tel?.focus();\n\t\t\t\t\t\tel?.setSelectionRange(at + token.length, at + token.length);\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<EmailInputBox\n\t\t\t\t\tid={nativeID}\n\t\t\t\t\tname={nativeID}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t// Focused + empty → the @ hint (only when a catalog makes @ do\n\t\t\t\t\t// anything); otherwise the field's own text.\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tentryFocused && buffer === '' && (variablesData?.length ?? 0) > 0\n\t\t\t\t\t\t\t? 'Enter text, type @ to add variable'\n\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t}\n\t\t\t\t\tvalue={buffer}\n\t\t\t\t\tonChange={(e) => setBuffer(e.target.value)}\n\t\t\t\t\tonFocus={() => setEntryFocused(true)}\n\t\t\t\t\tonBlur={() => {\n\t\t\t\t\t\tsetEntryFocused(false);\n\t\t\t\t\t\t// Focus moving into the variable panel / pill is not \"leaving\n\t\t\t\t\t\t// the field\" — committing then would chip a half-composed value.\n\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t!panelOpenRef.current &&\n\t\t\t\t\t\t\t\t!wrapRef.current?.contains(document.activeElement)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcommitRef.current();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 0);\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === 'Enter' || e.key === ',') {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\tcommit();\n\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\te.key === 'Backspace' &&\n\t\t\t\t\t\t\tbuffer === '' &&\n\t\t\t\t\t\t\tchips.length > 0\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonChange(chips.slice(0, -1));\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</VariableTriggerArea>\n\t\t\t{hint}\n\t\t\t{chips.length > 0 && (\n\t\t\t\t<ChipRow>\n\t\t\t\t\t{chips.map((email, i) => (\n\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\tkey={`${email}-${i}`}\n\t\t\t\t\t\t\t// Variable tokens display as the short {{name}} (values can mix\n\t\t\t\t\t\t\t// text and tokens); the stored value keeps {{variable:<name>}}.\n\t\t\t\t\t\t\ttagText={email.replace(/\\{\\{variable:([^}]+)\\}\\}/g, '{{$1}}')}\n\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\tTrailingIcon={CrossIcon}\n\t\t\t\t\t\t\tonTrailingIconClicked={() =>\n\t\t\t\t\t\t\t\tonChange(chips.filter((_, idx) => idx !== i))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</ChipRow>\n\t\t\t)}\n\t\t</ChipsFieldWrap>\n\t);\n};\n\n/** Field values keyed by param key (the editable part of a {@link ParamsBlob}). */\ntype ParamValues = Record<string, string | boolean | number | object>;\n\nconst seedValues = (\n\ttemplate: ParamsBlob,\n\tinitial?: ConfigToolConfig,\n): ParamValues => {\n\tconst values: ParamValues = {};\n\tObject.keys(template).forEach((key) => {\n\t\tvalues[key] = initial?.params[key]?.value ?? template[key].value;\n\t});\n\treturn values;\n};\n\n/** Chips ↔ the string value KeywordInput fields carry (comma-separated). */\nconst toChips = (value: unknown): string[] =>\n\tString(value ?? '')\n\t\t.split(',')\n\t\t.map((s) => s.trim())\n\t\t.filter(Boolean);\n\n/**\n * Shared right-side drawer for the params-driven configurable tools (email /\n * Slack). Fully backend-driven: it renders the template fields by their\n * `component` kind and returns the same blob with values filled in. KeywordInput\n * renders as multi-value email chips only for `send_email`; every other tool\n * gets a plain single-line input. Mount it fresh per open (key it) so `initial`\n * seeds the state. Built on the shared `SideModal` shell.\n */\nexport const ConfigToolPanel: React.FC<ConfigToolPanelProps> = ({\n\ttoolKey,\n\ttemplate,\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tvariablesData,\n\tzIndex,\n\telement,\n}) => {\n\tconst [values, setValues] = useState<ParamValues>(() =>\n\t\tseedValues(template, initial),\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\tconst fields = Object.values(template);\n\tconst isEmail = toolKey === 'send_email';\n\tconst setValue = (key: string, value: string | boolean | number | object) =>\n\t\tsetValues((prev) => ({ ...prev, [key]: value }));\n\n\tconst canSave = fields.every((f) => {\n\t\tif (f.required && String(values[f.key] ?? '').trim() === '') {\n\t\t\treturn false;\n\t\t}\n\t\t// MultilineInput renders the soft-limit editor (a paste may exceed the\n\t\t// cap, rendered grey) — gate the save so over-limit text can't persist.\n\t\tif (\n\t\t\tf.component === 'MultilineInput' &&\n\t\t\tString(values[f.key] ?? '').length > charLimits.instructions\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t});\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst params: ParamsBlob = {};\n\t\tfields.forEach((f) => {\n\t\t\t// Save the FULL descriptor with only `value` changed — the backend\n\t\t\t// infers each field's type from `component` and reads `required`.\n\t\t\tparams[f.key] = { ...f, value: values[f.key] };\n\t\t});\n\t\tconst config: ConfigToolConfig = {\n\t\t\tid: initial?.id ?? `${toolKey}_${Date.now().toString(36)}`,\n\t\t\ttool_key: toolKey,\n\t\t\tparams,\n\t\t};\n\t\tconst result = onSave(config);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst renderField = (field: ParamField) => {\n\t\tconst testId = `config-tool-${field.key.toLowerCase()}`;\n\t\tswitch (field.component) {\n\t\t\t// Multi-value email chips — only for the email tool. Slack's KeywordInput\n\t\t\t// (channelId) falls through to the plain input below.\n\t\t\tcase 'KeywordInput':\n\t\t\t\tif (!isEmail) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<FieldBlock key={field.key}>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t{field.title}\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t{/* `@` at a word boundary (or the \"+ Add data\" pill) interpolates\n\t\t\t\t\t\t    a variable into the entry TEXT at the caret — mixed values like\n\t\t\t\t\t\t    ops-{{variable:store_name}}@acme.com chip on Enter / comma. */}\n\t\t\t\t\t\t<EmailChipsField\n\t\t\t\t\t\t\tnativeID={testId}\n\t\t\t\t\t\t\tplaceholder={field.hint ?? ''}\n\t\t\t\t\t\t\tchips={toChips(values[field.key])}\n\t\t\t\t\t\t\tonChange={(chips) => setValue(field.key, chips.join(','))}\n\t\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\t\thint={\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\tPress Enter or comma to add multiple emails\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FieldBlock>\n\t\t\t\t);\n\t\t\tcase 'MultilineInput':\n\t\t\t\treturn (\n\t\t\t\t\t<ToolInstructionsField\n\t\t\t\t\t\tkey={field.key}\n\t\t\t\t\t\tdata-test={testId}\n\t\t\t\t\t\tlabel={field.title}\n\t\t\t\t\t\tvalue={String(values[field.key] ?? '')}\n\t\t\t\t\t\tonChange={(text) => setValue(field.key, text)}\n\t\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\t\tplaceholder={field.hint ?? ''}\n\t\t\t\t\t\tonImprove={onImprove}\n\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase 'Switch':\n\t\t\t\treturn (\n\t\t\t\t\t<SwitchRow key={field.key}>\n\t\t\t\t\t\t<SwitchText>\n\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t{field.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t{field.hint && (\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t{field.hint}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</SwitchText>\n\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\tdata-test={testId}\n\t\t\t\t\t\t\tvalue={Boolean(values[field.key])}\n\t\t\t\t\t\t\tonValueChange={async (next) => setValue(field.key, next)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SwitchRow>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t\tconst plainInput = (\n\t\t\t<Input\n\t\t\t\tdata-test={testId}\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText={field.title}\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder={field.hint ?? ''}\n\t\t\t\tvalue={String(values[field.key] ?? '')}\n\t\t\t\tonChangeText={(text) => setValue(field.key, text)}\n\t\t\t/>\n\t\t);\n\t\t// `@` variables only in the email tool's free-text fields (Subject) —\n\t\t// a Slack channel id can't hold a variable.\n\t\tif (!isEmail) {\n\t\t\treturn <React.Fragment key={field.key}>{plainInput}</React.Fragment>;\n\t\t}\n\t\treturn (\n\t\t\t<VariableTriggerArea\n\t\t\t\taddDataButton\n\t\t\t\tkey={field.key}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\tonInsert={(token, caret) => {\n\t\t\t\t\tconst current = String(values[field.key] ?? '');\n\t\t\t\t\tconst at = caret ?? current.length;\n\t\t\t\t\tsetValue(\n\t\t\t\t\t\tfield.key,\n\t\t\t\t\t\t`${current.slice(0, at)}${token}${current.slice(at)}`,\n\t\t\t\t\t);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{plainInput}\n\t\t\t</VariableTriggerArea>\n\t\t);\n\t};\n\n\tconst copy = TOOL_COPY[toolKey];\n\n\treturn (\n\t\t<SideModal\n\t\t\theader={copy.title}\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\telement={element}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText title={copy.title} subtitle={copy.subtitle} />\n\t\t\t}\n\t\t\thideCrossButton={false}\n\t\t\twidth=\"431px\"\n\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\tonClose={onClose}\n\t\t\tsaveButtonProps={{\n\t\t\t\t'data-test': 'config-tool-save',\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tdisabled: !canSave,\n\t\t\t\tisLoading: saving,\n\t\t\t\tonClick: handleSave,\n\t\t\t}}\n\t\t\tcancelButtonProps={{\n\t\t\t\t'data-test': 'config-tool-cancel',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t>\n\t\t\t{fields.map(renderField)}\n\t\t</SideModal>\n\t);\n};\n\nconst ChipsFieldWrap = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nconst EmailInputBox = styled.input`\n\twidth: 100%;\n\tmin-width: 0;\n\tbox-sizing: border-box;\n\theight: 32px;\n\tpadding: 0 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tfont-family: 'Inter', sans-serif;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${COLORS.surface.standard};\n\toutline: none;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.secondary};\n\t}\n\n\t&:focus {\n\t\tborder-color: ${COLORS.stroke.brand};\n\t}\n`;\n\nconst ChipRow = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 6px;\n`;\n\nconst SwitchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 12px;\n`;\n\nconst SwitchText = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmin-width: 0;\n`;\n"],"names":["TOOL_COPY","EmailChipsField","chips","onChange","placeholder","nativeID","hint","variablesData","buffer","setBuffer","useState","entryFocused","setEntryFocused","wrapRef","useRef","inputRef","commit","parts","p","commitRef","panelOpenRef","insertedRef","jsxs","ChipsFieldWrap","jsx","VariableTriggerArea","open","token","caret","at","el","EmailInputBox","e","ChipRow","email","i","Tag","CrossIcon","_","idx","seedValues","template","initial","values","key","toChips","value","s","ConfigToolPanel","toolKey","onClose","onSave","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","element","setValues","saving","setSaving","fields","isEmail","setValue","prev","canSave","f","handleSave","params","config","result","renderField","field","testId","FieldBlock","TitleSmall","COLORS","BodyCaption","ToolInstructionsField","text","SwitchRow","SwitchText","Switch","next","plainInput","Input","current","React","copy","SideModal","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","styled"],"mappings":"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"}
+{"version":3,"file":"ConfigToolPanel.js","sources":["../../../../../src/components/agent-builder/components/ConfigToolPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { Switch } from '@src/components/switch';\nimport { Tag } from '@src/components/tag';\nimport { BodyCaption, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tConfigToolConfig,\n\tConfigToolKey,\n\tParamField,\n\tParamsBlob,\n} from '../AgentBuilder.model';\nimport { FieldBlock } from '../AgentBuilder.styled';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { ToolInstructionsField } from './ToolInstructionsField';\nimport { VariableTriggerArea } from './VariableTriggerArea';\n\n/** Header copy per shared-drawer tool. */\nconst TOOL_COPY: Record<ConfigToolKey, { title: string; subtitle: string }> = {\n\tsend_email: {\n\t\ttitle: 'Send email',\n\t\tsubtitle:\n\t\t\t\"Notify someone by email when this agent can't continue. You pick the recipient, the AI drafts the message.\",\n\t},\n\tsend_slack_message: {\n\t\ttitle: 'Send Slack message',\n\t\tsubtitle:\n\t\t\t'Post a message to a Slack channel. You pick the channel, the AI composes the message from the conversation.',\n\t},\n\tgoogle_sheet_get_data: {\n\t\ttitle: 'Get data from sheet',\n\t\tsubtitle:\n\t\t\t'Look up rows in a Google Sheet. You pick the sheet and describe its columns, the AI writes the query it needs.',\n\t},\n\tgoogle_sheet_add_row: {\n\t\ttitle: 'Add row to sheet',\n\t\tsubtitle:\n\t\t\t'Append a row to a Google Sheet. You pick the sheet and its columns, the AI fills them in from the conversation.',\n\t},\n};\n\ninterface ConfigToolPanelProps {\n\t/** Which tool this drawer configures (drives copy + persistence). */\n\ttoolKey: ConfigToolKey;\n\t/**\n\t * The backend template (`list-catalog` → params) for `toolKey`. The form is\n\t * DYNAMIC: exactly these fields render, in this order, each by its\n\t * `component` kind (KeywordInput | MultilineInput | Switch | fallback input).\n\t */\n\ttemplate: ParamsBlob;\n\tonClose: () => void;\n\t/** Persist the filled template. A pending promise shows the Save loader. */\n\tonSave: (config: ConfigToolConfig) => void | Promise<void>;\n\t/** Seed values when editing an existing tool. */\n\tinitial?: ConfigToolConfig;\n\t/** Optional \"Improve with AI\" for multiline fields. Omit to hide it. */\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/**\n\t * Variable catalog for the `@` trigger. When non-empty, `@` in the email\n\t * tool's Subject / Send To / Reply To / CC opens the variable picker\n\t * directly, and Message Instructions upgrades to the variables-only mention\n\t * editor. Absent → the drawer behaves exactly as before.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n\t/**\n\t * Portal target for the drawer, passed straight to {@link SideModal}\n\t * (default `document.body`). Lets a host render it into its own positioned\n\t * slot rather than as a viewport overlay.\n\t */\n\telement?: Element | DocumentFragment;\n\t/**\n\t * Footer button order, passed straight to {@link SideModal} (default\n\t * `'row'`). Hosts that show this drawer beside their own footer can set\n\t * `'row-reverse'` to line the Cancel / Save order up with it.\n\t */\n\tfooterDirection?: 'row' | 'row-reverse';\n\t/** SideModal stacking order — raise it when opened over another drawer. */\n\tzIndex?: number;\n}\n\ninterface EmailChipsFieldProps {\n\tchips: string[];\n\tonChange: (next: string[]) => void;\n\tplaceholder: string;\n\tnativeID?: string;\n\t/** Optional helper caption shown between the input and the chips. */\n\thint?: React.ReactNode;\n\t/**\n\t * Variable catalog for the `@` trigger. A picked variable is interpolated\n\t * into the entry TEXT at the caret (so values can mix text and variables,\n\t * e.g. `ops-{{variable:store_name}}@acme.com`) — it becomes a chip on\n\t * Enter / comma like any typed value.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n}\n\n/**\n * Email entry field: type an address and press Enter / comma (or blur) to add\n * it. Added emails render as removable chips BELOW the input — not inside it.\n * Backspace on an empty input removes the last chip.\n */\nconst EmailChipsField: React.FC<EmailChipsFieldProps> = ({\n\tchips,\n\tonChange,\n\tplaceholder,\n\tnativeID,\n\thint,\n\tvariablesData,\n}) => {\n\tconst [buffer, setBuffer] = useState('');\n\tconst [entryFocused, setEntryFocused] = useState(false);\n\tconst wrapRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\tconst commit = () => {\n\t\tconst parts = buffer\n\t\t\t.split(',')\n\t\t\t.map((s) => s.trim())\n\t\t\t.filter(Boolean);\n\t\tif (parts.length) {\n\t\t\tonChange([...chips, ...parts.filter((p) => !chips.includes(p))]);\n\t\t}\n\t\tsetBuffer('');\n\t};\n\t// The blur handler defers via setTimeout — read the LATEST commit (with the\n\t// current buffer), not the one captured when the blur fired.\n\tconst commitRef = useRef(commit);\n\tcommitRef.current = commit;\n\t// While the variable panel is open, focus bounces through it (search box,\n\t// rows) — blur must not commit the half-composed entry.\n\tconst panelOpenRef = useRef(false);\n\t// A variable was just picked — the panel-close commit below must not fire\n\t// (onInsert refocuses the entry, so its eventual blur commits instead).\n\tconst insertedRef = useRef(false);\n\n\treturn (\n\t\t<ChipsFieldWrap ref={wrapRef}>\n\t\t\t<VariableTriggerArea\n\t\t\t\taddDataButton\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\tonOpenChange={(open) => {\n\t\t\t\t\tpanelOpenRef.current = open;\n\t\t\t\t\tif (open) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\t// Panel closed (Escape / outside click / pick). If the entry's\n\t\t\t\t\t// blur-commit was skipped while the panel was open and focus is\n\t\t\t\t\t// not coming back, the half-typed entry would be silently lost\n\t\t\t\t\t// on save — commit it now.\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t!insertedRef.current &&\n\t\t\t\t\t\t\t!wrapRef.current?.contains(document.activeElement)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tcommitRef.current();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinsertedRef.current = false;\n\t\t\t\t\t}, 0);\n\t\t\t\t}}\n\t\t\t\tonInsert={(token, caret) => {\n\t\t\t\t\tinsertedRef.current = true;\n\t\t\t\t\tconst at = caret ?? buffer.length;\n\t\t\t\t\tsetBuffer(`${buffer.slice(0, at)}${token}${buffer.slice(at)}`);\n\t\t\t\t\t// Put the caret after the inserted token so typing continues\n\t\t\t\t\t// naturally (e.g. `{{variable:store_name}}|@acme.com`).\n\t\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\t\tconst el = inputRef.current;\n\t\t\t\t\t\tel?.focus();\n\t\t\t\t\t\tel?.setSelectionRange(at + token.length, at + token.length);\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<EmailInputBox\n\t\t\t\t\tid={nativeID}\n\t\t\t\t\tname={nativeID}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t// Focused + empty → the @ hint (only when a catalog makes @ do\n\t\t\t\t\t// anything); otherwise the field's own text.\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tentryFocused && buffer === '' && (variablesData?.length ?? 0) > 0\n\t\t\t\t\t\t\t? 'Enter text, type @ to add variable'\n\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t}\n\t\t\t\t\tvalue={buffer}\n\t\t\t\t\tonChange={(e) => setBuffer(e.target.value)}\n\t\t\t\t\tonFocus={() => setEntryFocused(true)}\n\t\t\t\t\tonBlur={() => {\n\t\t\t\t\t\tsetEntryFocused(false);\n\t\t\t\t\t\t// Focus moving into the variable panel / pill is not \"leaving\n\t\t\t\t\t\t// the field\" — committing then would chip a half-composed value.\n\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t!panelOpenRef.current &&\n\t\t\t\t\t\t\t\t!wrapRef.current?.contains(document.activeElement)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcommitRef.current();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}, 0);\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (e.key === 'Enter' || e.key === ',') {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\tcommit();\n\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\te.key === 'Backspace' &&\n\t\t\t\t\t\t\tbuffer === '' &&\n\t\t\t\t\t\t\tchips.length > 0\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonChange(chips.slice(0, -1));\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</VariableTriggerArea>\n\t\t\t{hint}\n\t\t\t{chips.length > 0 && (\n\t\t\t\t<ChipRow>\n\t\t\t\t\t{chips.map((email, i) => (\n\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\tkey={`${email}-${i}`}\n\t\t\t\t\t\t\t// Variable tokens display as the short {{name}} (values can mix\n\t\t\t\t\t\t\t// text and tokens); the stored value keeps {{variable:<name>}}.\n\t\t\t\t\t\t\ttagText={email.replace(/\\{\\{variable:([^}]+)\\}\\}/g, '{{$1}}')}\n\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\tTrailingIcon={CrossIcon}\n\t\t\t\t\t\t\tonTrailingIconClicked={() =>\n\t\t\t\t\t\t\t\tonChange(chips.filter((_, idx) => idx !== i))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</ChipRow>\n\t\t\t)}\n\t\t</ChipsFieldWrap>\n\t);\n};\n\n/** Field values keyed by param key (the editable part of a {@link ParamsBlob}). */\ntype ParamValues = Record<string, string | boolean | number | object>;\n\nconst seedValues = (\n\ttemplate: ParamsBlob,\n\tinitial?: ConfigToolConfig,\n): ParamValues => {\n\tconst values: ParamValues = {};\n\tObject.keys(template).forEach((key) => {\n\t\tvalues[key] = initial?.params[key]?.value ?? template[key].value;\n\t});\n\treturn values;\n};\n\n/** Chips ↔ the string value KeywordInput fields carry (comma-separated). */\nconst toChips = (value: unknown): string[] =>\n\tString(value ?? '')\n\t\t.split(',')\n\t\t.map((s) => s.trim())\n\t\t.filter(Boolean);\n\n/**\n * Shared right-side drawer for the params-driven configurable tools (email /\n * Slack). Fully backend-driven: it renders the template fields by their\n * `component` kind and returns the same blob with values filled in. KeywordInput\n * renders as multi-value email chips only for `send_email`; every other tool\n * gets a plain single-line input. Mount it fresh per open (key it) so `initial`\n * seeds the state. Built on the shared `SideModal` shell.\n */\nexport const ConfigToolPanel: React.FC<ConfigToolPanelProps> = ({\n\ttoolKey,\n\ttemplate,\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tvariablesData,\n\tzIndex,\n\telement,\n\tfooterDirection,\n}) => {\n\tconst [values, setValues] = useState<ParamValues>(() =>\n\t\tseedValues(template, initial),\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\tconst fields = Object.values(template);\n\tconst isEmail = toolKey === 'send_email';\n\tconst setValue = (key: string, value: string | boolean | number | object) =>\n\t\tsetValues((prev) => ({ ...prev, [key]: value }));\n\n\tconst canSave = fields.every((f) => {\n\t\tif (f.required && String(values[f.key] ?? '').trim() === '') {\n\t\t\treturn false;\n\t\t}\n\t\t// MultilineInput renders the soft-limit editor (a paste may exceed the\n\t\t// cap, rendered grey) — gate the save so over-limit text can't persist.\n\t\tif (\n\t\t\tf.component === 'MultilineInput' &&\n\t\t\tString(values[f.key] ?? '').length > charLimits.instructions\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t});\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst params: ParamsBlob = {};\n\t\tfields.forEach((f) => {\n\t\t\t// Save the FULL descriptor with only `value` changed — the backend\n\t\t\t// infers each field's type from `component` and reads `required`.\n\t\t\tparams[f.key] = { ...f, value: values[f.key] };\n\t\t});\n\t\tconst config: ConfigToolConfig = {\n\t\t\tid: initial?.id ?? `${toolKey}_${Date.now().toString(36)}`,\n\t\t\ttool_key: toolKey,\n\t\t\tparams,\n\t\t};\n\t\tconst result = onSave(config);\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst renderField = (field: ParamField) => {\n\t\tconst testId = `config-tool-${field.key.toLowerCase()}`;\n\t\tswitch (field.component) {\n\t\t\t// Multi-value email chips — only for the email tool. Slack's KeywordInput\n\t\t\t// (channelId) falls through to the plain input below.\n\t\t\tcase 'KeywordInput':\n\t\t\t\tif (!isEmail) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<FieldBlock key={field.key}>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t{field.title}\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t{/* `@` at a word boundary (or the \"+ Add data\" pill) interpolates\n\t\t\t\t\t\t    a variable into the entry TEXT at the caret — mixed values like\n\t\t\t\t\t\t    ops-{{variable:store_name}}@acme.com chip on Enter / comma. */}\n\t\t\t\t\t\t<EmailChipsField\n\t\t\t\t\t\t\tnativeID={testId}\n\t\t\t\t\t\t\tplaceholder={field.hint ?? ''}\n\t\t\t\t\t\t\tchips={toChips(values[field.key])}\n\t\t\t\t\t\t\tonChange={(chips) => setValue(field.key, chips.join(','))}\n\t\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\t\thint={\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\tPress Enter or comma to add multiple emails\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FieldBlock>\n\t\t\t\t);\n\t\t\tcase 'MultilineInput':\n\t\t\t\treturn (\n\t\t\t\t\t<ToolInstructionsField\n\t\t\t\t\t\tkey={field.key}\n\t\t\t\t\t\tdata-test={testId}\n\t\t\t\t\t\tlabel={field.title}\n\t\t\t\t\t\tvalue={String(values[field.key] ?? '')}\n\t\t\t\t\t\tonChange={(text) => setValue(field.key, text)}\n\t\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\t\tplaceholder={field.hint ?? ''}\n\t\t\t\t\t\tonImprove={onImprove}\n\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase 'Switch':\n\t\t\t\treturn (\n\t\t\t\t\t<SwitchRow key={field.key}>\n\t\t\t\t\t\t<SwitchText>\n\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t{field.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t{field.hint && (\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t\t{field.hint}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</SwitchText>\n\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\tdata-test={testId}\n\t\t\t\t\t\t\tvalue={Boolean(values[field.key])}\n\t\t\t\t\t\t\tonValueChange={async (next) => setValue(field.key, next)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SwitchRow>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t\tconst plainInput = (\n\t\t\t<Input\n\t\t\t\tdata-test={testId}\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText={field.title}\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder={field.hint ?? ''}\n\t\t\t\tvalue={String(values[field.key] ?? '')}\n\t\t\t\tonChangeText={(text) => setValue(field.key, text)}\n\t\t\t/>\n\t\t);\n\t\t// `@` variables only in the email tool's free-text fields (Subject) —\n\t\t// a Slack channel id can't hold a variable.\n\t\tif (!isEmail) {\n\t\t\treturn <React.Fragment key={field.key}>{plainInput}</React.Fragment>;\n\t\t}\n\t\treturn (\n\t\t\t<VariableTriggerArea\n\t\t\t\taddDataButton\n\t\t\t\tkey={field.key}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\tonInsert={(token, caret) => {\n\t\t\t\t\tconst current = String(values[field.key] ?? '');\n\t\t\t\t\tconst at = caret ?? current.length;\n\t\t\t\t\tsetValue(\n\t\t\t\t\t\tfield.key,\n\t\t\t\t\t\t`${current.slice(0, at)}${token}${current.slice(at)}`,\n\t\t\t\t\t);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{plainInput}\n\t\t\t</VariableTriggerArea>\n\t\t);\n\t};\n\n\tconst copy = TOOL_COPY[toolKey];\n\n\treturn (\n\t\t<SideModal\n\t\t\theader={copy.title}\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\telement={element}\n\t\t\tfooterDirection={footerDirection}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText title={copy.title} subtitle={copy.subtitle} />\n\t\t\t}\n\t\t\thideCrossButton={false}\n\t\t\twidth=\"431px\"\n\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\tonClose={onClose}\n\t\t\tsaveButtonProps={{\n\t\t\t\t'data-test': 'config-tool-save',\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tdisabled: !canSave,\n\t\t\t\tisLoading: saving,\n\t\t\t\tonClick: handleSave,\n\t\t\t}}\n\t\t\tcancelButtonProps={{\n\t\t\t\t'data-test': 'config-tool-cancel',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t>\n\t\t\t{fields.map(renderField)}\n\t\t</SideModal>\n\t);\n};\n\nconst ChipsFieldWrap = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nconst EmailInputBox = styled.input`\n\twidth: 100%;\n\tmin-width: 0;\n\tbox-sizing: border-box;\n\theight: 32px;\n\tpadding: 0 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tfont-family: 'Inter', sans-serif;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${COLORS.surface.standard};\n\toutline: none;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.secondary};\n\t}\n\n\t&:focus {\n\t\tborder-color: ${COLORS.stroke.brand};\n\t}\n`;\n\nconst ChipRow = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 6px;\n`;\n\nconst SwitchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 12px;\n`;\n\nconst SwitchText = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmin-width: 0;\n`;\n"],"names":["TOOL_COPY","EmailChipsField","chips","onChange","placeholder","nativeID","hint","variablesData","buffer","setBuffer","useState","entryFocused","setEntryFocused","wrapRef","useRef","inputRef","commit","parts","s","p","commitRef","panelOpenRef","insertedRef","jsxs","ChipsFieldWrap","jsx","VariableTriggerArea","open","token","caret","at","el","EmailInputBox","e","ChipRow","email","i","Tag","CrossIcon","_","idx","seedValues","template","initial","values","key","toChips","value","ConfigToolPanel","toolKey","onClose","onSave","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","element","footerDirection","setValues","saving","setSaving","fields","isEmail","setValue","prev","canSave","f","handleSave","params","config","result","renderField","field","testId","FieldBlock","TitleSmall","COLORS","BodyCaption","ToolInstructionsField","text","SwitchRow","SwitchText","Switch","next","plainInput","Input","current","React","copy","SideModal","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","styled"],"mappings":"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"}

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

@@ -45,6 +45,12 @@ interface CreateSubAgentPanelProps {
      * slot rather than as a viewport overlay.
      */
     element?: Element | DocumentFragment;
+    /**
+     * Footer button order, passed straight to {@link SideModal} (default
+     * `'row'`). Hosts that show this drawer beside their own footer can set
+     * `'row-reverse'` to line the Cancel / Save order up with it.
+     */
+    footerDirection?: 'row' | 'row-reverse';
     /** Variable catalog for the editors' `@` picker "Variables" view. */
     variablesData?: VariableListInterfaceV3[];
 }

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

@@ -1,26 +1,26 @@
-import { jsxs as pe, Fragment as ze, jsx as c } from "react/jsx-runtime";
-import { useState as i, useRef as C, useMemo as He, useCallback as a } from "react";
-import $e from "styled-components";
+import { jsxs as pe, Fragment as He, jsx as c } from "react/jsx-runtime";
+import { useState as i, useRef as C, useMemo as $e, useCallback as a } from "react";
+import Fe from "styled-components";
 import { addUnique as fe } from "../../../utils/arrayUtils.js";
 import { COLORS as Q } from "../../../constants/Theme.js";
-import { AGENT_CHAR_LIMITS as Fe } from "../constants/charLimits.js";
-import { CONFIG_TOOL_SOURCES as Ye, ToolSource as g, CONFIG_TOOL_SOURCE_BY_KEY as je, INTEGRATIONS_LABEL as We, INTEGRATIONS_KEY as qe } from "../constants/tools.js";
-import { buildAgentMentionItems as Xe, buildCustomToolMentionItems as Ze, restApiMentionItem as Je, configToolMentionItem as Qe, restApiToolName as Ve, configToolName as et, toolSourceLabel as tt } from "../utils/mentionSerialization.js";
-import { partitionSources as ot } from "../utils/sourceGrouping.js";
+import { AGENT_CHAR_LIMITS as Ye } from "../constants/charLimits.js";
+import { CONFIG_TOOL_SOURCES as je, ToolSource as g, CONFIG_TOOL_SOURCE_BY_KEY as We, INTEGRATIONS_LABEL as qe, INTEGRATIONS_KEY as Xe } from "../constants/tools.js";
+import { buildAgentMentionItems as Ze, buildCustomToolMentionItems as Je, restApiMentionItem as Qe, configToolMentionItem as Ve, restApiToolName as et, configToolName as tt, toolSourceLabel as ot } from "../utils/mentionSerialization.js";
+import { partitionSources as nt } from "../utils/sourceGrouping.js";
 import { sourceIcon as V, SOURCE_ICONS as ge, renderSourceIcon as he } from "../utils/sourceIcons.js";
-import { buildToolActions as nt } from "../utils/toolActions.js";
-import { ConfigToolPanel as st } from "./ConfigToolPanel.js";
-import { DRAWER_BODY_STYLE as rt, DRAWER_HEADER_STYLE as it, DrawerHeaderText as lt } from "./DrawerHeaderText.js";
+import { buildToolActions as st } from "../utils/toolActions.js";
+import { ConfigToolPanel as rt } from "./ConfigToolPanel.js";
+import { DRAWER_BODY_STYLE as it, DRAWER_HEADER_STYLE as lt, DrawerHeaderText as at } from "./DrawerHeaderText.js";
 import { MentionEditor as ye } from "./MentionEditor.js";
-import { RestApiToolPanel as at } from "./RestApiToolPanel.js";
-import { SelectableListSection as ct } from "./SelectableListSection.js";
-import { SideModal as ut } from "../../side-modal/SideModal.js";
-import { Input as dt } from "../../input/Input.js";
-import { Toaster as mt } from "../../toaster/Toaster.js";
-const pt = 1e3, ee = 1002, Te = (w, h) => {
+import { RestApiToolPanel as ct } from "./RestApiToolPanel.js";
+import { SelectableListSection as ut } from "./SelectableListSection.js";
+import { SideModal as dt } from "../../side-modal/SideModal.js";
+import { Input as mt } from "../../input/Input.js";
+import { Toaster as pt } from "../../toaster/Toaster.js";
+const ft = 1e3, ee = 1002, Te = (w, h) => {
   const r = w ?? [];
   return r.some((u) => u.id === h.id) ? r.map((u) => u.id === h.id ? h : u) : [...r, h];
-}, Ie = $e.button`
+}, Ie = Fe.button`
 	align-self: flex-start;
 	border: 1px solid ${Q.stroke.primary};
 	color: ${Q.content.primary};
@@ -36,7 +36,7 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
 		cursor: default;
 		opacity: 0.6;
 	}
-`, Mt = ({
+`, Kt = ({
   onClose: w,
   onSave: h,
   availableTools: r,
@@ -49,27 +49,28 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
   initial: T,
   existingNames: be = [],
   appLabel: I = "Manifest",
-  charLimits: A = Fe,
+  charLimits: A = Ye,
   variablesData: E,
-  element: Ce
+  element: Ce,
+  footerDirection: Se
 }) => {
-  const [D, Se] = i(T?.name ?? ""), [v, O] = i(T?.instructions ?? ""), [x, k] = i(T?.guardrail ?? ""), [L, N] = i(T?.tools ?? []), [p, P] = i(
+  const [D, Ae] = i(T?.name ?? ""), [v, O] = i(T?.instructions ?? ""), [x, k] = i(T?.guardrail ?? ""), [L, N] = i(T?.tools ?? []), [p, P] = i(
     T?.configTools ?? []
   ), [d, U] = i(
     T?.restApiTools ?? []
-  ), [l, b] = i(null), M = C(0), [se, re] = i(!1), [Ae, z] = i(0), [ve, H] = i(0), [R, ie] = i(null), $ = He(
+  ), [l, b] = i(null), M = C(0), [se, re] = i(!1), [ve, z] = i(0), [xe, H] = i(0), [R, ie] = i(null), $ = $e(
     () => [
-      ...Xe(r, [], I),
-      ...Ze(p, d)
+      ...Ze(r, [], I),
+      ...Je(p, d)
     ],
     [r, I, p, d]
-  ), K = C({}), F = C("instructions"), xe = a((e) => {
+  ), K = C({}), F = C("instructions"), Re = a((e) => {
     K.current.instructions = e ?? void 0;
-  }, []), Re = a((e) => {
+  }, []), _e = a((e) => {
     K.current.guardrail = e ?? void 0;
-  }, []), _e = a(() => {
-    F.current = "instructions";
   }, []), we = a(() => {
+    F.current = "instructions";
+  }, []), Ee = a(() => {
     F.current = "guardrail";
   }, []), le = C(/* @__PURE__ */ new Set());
   le.current = new Set(
@@ -101,35 +102,35 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
       });
     },
     []
-  ), Ee = a(
+  ), Oe = a(
     (e, t) => {
-      const o = t ?? Ye[e]?.[0];
+      const o = t ?? je[e]?.[0];
       o ? j(o) : Y();
     },
     [j, Y]
-  ), Oe = a(
+  ), ke = a(
     (e) => {
       const t = !d.some((o) => o.id === e.id);
       U((o) => Te(o, e)), t && _(
         e.id,
-        Je(e).label,
+        Qe(e).label,
         g.RestApi
       ), b(null);
     },
     [d, _]
-  ), ke = a(
+  ), Ne = a(
     (e) => {
       const t = !p.some((o) => o.id === e.id);
       P((o) => Te(o, e)), t && _(
         e.id,
-        Qe(e).label,
-        je[e.tool_key]
+        Ve(e).label,
+        We[e.tool_key]
       ), b(null);
     },
     [p, _]
   ), [W, q] = i(
     null
-  ), X = C(null), ce = C(0), Ne = (e) => {
+  ), X = C(null), ce = C(0), Me = (e) => {
     const t = r.find((n) => n.tool_id === e)?.display_name ?? d.find((n) => n.id === e)?.name ?? "Tool", o = `{{tool:${e}}}`, m = (n) => n.split(o).join("");
     X.current = {
       instructions: v,
@@ -138,12 +139,12 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
       configTools: p,
       restApiTools: d
     }, O((n) => m(n)), k((n) => m(n)), N((n) => n.filter((f) => f !== e)), P((n) => n.filter((f) => f.id !== e)), U((n) => n.filter((f) => f.id !== e)), z((n) => n + 1), H((n) => n + 1), ce.current += 1, q({ id: ce.current, message: `Tool "${t}" removed` });
-  }, Me = () => {
+  }, Ke = () => {
     const e = X.current;
     e && (O(e.instructions), k(e.guardrail), N(e.tools), P(e.configTools), U(e.restApiTools), z((t) => t + 1), H((t) => t + 1), X.current = null), q(null);
   }, Z = D.trim(), J = Z.length > 0 && be.some(
     (e) => e.trim().toLowerCase() === Z.toLowerCase()
-  ), ue = Z.length > 0 && !J && (v.trim().length > 0 || x.trim().length > 0), Ke = L.map((e) => {
+  ), ue = Z.length > 0 && !J && (v.trim().length > 0 || x.trim().length > 0), Be = L.map((e) => {
     const t = r.find((o) => o.tool_id === e);
     return t ? {
       id: e,
@@ -153,30 +154,30 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
       // the main builder's Step 3 tool rows.
       authRequired: t.auth_required
     } : null;
-  }).filter((e) => e !== null), Be = d.map((e) => ({
+  }).filter((e) => e !== null), Ge = d.map((e) => ({
     id: e.id,
-    label: Ve(e),
+    label: et(e),
     icon: ge[g.RestApi],
     onConfigure: () => Y(e)
-  })), Ge = p.map((e) => ({
+  })), De = p.map((e) => ({
     id: e.id,
-    label: et(e),
+    label: tt(e),
     icon: ge[e.tool_key === "send_slack_message" ? g.Slack : g.EmailHandover],
     onConfigure: () => j(e.tool_key, e)
-  })), De = [
-    ...Ke,
+  })), Le = [
     ...Be,
-    ...Ge
-  ], B = nt(
+    ...Ge,
+    ...De
+  ], B = st(
     oe,
-    Ee,
+    Oe,
     y,
     S
-  ), de = l?.kind === "config" && l.toolKey ? oe?.[l.toolKey] : void 0, Le = r.map((e) => ({
+  ), de = l?.kind === "config" && l.toolKey ? oe?.[l.toolKey] : void 0, Pe = r.map((e) => ({
     label: e.display_name,
     value: e.tool_id,
     leadingIcon: he(V(e.source ?? g.Manifest)) ?? void 0
-  })), Pe = (() => {
+  })), Ue = (() => {
     const e = [], t = /* @__PURE__ */ new Map();
     r.forEach((s) => {
       const G = s.source ?? g.Manifest;
@@ -186,12 +187,12 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
         leadingIcon: he(V(s.source ?? g.Manifest)) ?? void 0
       });
     });
-    const { outside: o, inside: m } = ot(
+    const { outside: o, inside: m } = nt(
       [...e, ...B.map((s) => s.source)],
       y
     ), n = new Set(o), f = e.filter((s) => n.has(s)).map((s) => ({
       source: s,
-      label: tt(s, I),
+      label: ot(s, I),
       options: t.get(s) ?? [],
       // Reachable only when connected or ungated, so no connect flow needed —
       // kept for the picker's own gating, which reads these groups.
@@ -199,13 +200,13 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
       onConnect: () => S?.(s)
     }));
     return m.length > 0 && f.push({
-      source: qe,
-      label: We,
+      source: Xe,
+      label: qe,
       // No options of its own: clicking opens the picker at the umbrella,
       // where each unconnected source offers "Connect".
       options: []
     }), f;
-  })(), Ue = async () => {
+  })(), ze = async () => {
     if (!ue || se)
       return;
     const e = h({
@@ -235,24 +236,25 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
       }
     }
   };
-  return /* @__PURE__ */ pe(ze, { children: [
+  return /* @__PURE__ */ pe(He, { children: [
     /* @__PURE__ */ pe(
-      ut,
+      dt,
       {
         header: ne,
         closeOnEscapeKey: !1,
-        zIndex: pt,
+        zIndex: ft,
         element: Ce,
+        footerDirection: Se,
         headerCustomComponent: /* @__PURE__ */ c(
-          lt,
+          at,
           {
             title: ne,
             subtitle: "Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."
           }
         ),
         width: "421px",
-        headerStyle: it,
-        bodyStyle: rt,
+        headerStyle: lt,
+        bodyStyle: it,
         onClose: w,
         saveButtonProps: {
           "data-test": "subagent-save",
@@ -261,7 +263,7 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
           size: "small",
           disabled: !ue,
           isLoading: se,
-          onClick: Ue
+          onClick: ze
         },
         cancelButtonProps: {
           "data-test": "subagent-cancel",
@@ -272,7 +274,7 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
         },
         children: [
           /* @__PURE__ */ c(
-            dt,
+            mt,
             {
               "data-test": "subagent-name",
               labelText: "Agent name",
@@ -284,7 +286,7 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
               maxCharStyle: { fontSize: 12, lineHeight: "16px" },
               state: J ? "invalid" : void 0,
               errorMessage: J ? "A sub-agent with this name already exists" : void 0,
-              onChangeText: Se
+              onChangeText: Ae
             }
           ),
           /* @__PURE__ */ c(
@@ -297,7 +299,7 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
               maxLength: A.instructions,
               placeholder: "Write the steps in plain English. The agent will follow them exactly. The more specific you are, the better it performs.",
               minHeight: "160px",
-              resetKey: `instr-${Ae}`,
+              resetKey: `instr-${ve}`,
               mentionItems: $,
               tools: r,
               toolActions: B,
@@ -307,8 +309,8 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
               appLabel: I,
               onConnectIntegration: S,
               onMentionSelect: ae,
-              onFocus: _e,
-              registerInsert: xe,
+              onFocus: we,
+              registerInsert: Re,
               action: u ? /* @__PURE__ */ c(
                 Ie,
                 {
@@ -331,7 +333,7 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
               maxLength: A.guardrail,
               placeholder: "e.g. Never discuss competitor pricing. Always stay within the cancellation policy. Do not process refunds above ₹10,000 without human approval.",
               minHeight: "160px",
-              resetKey: `guard-${ve}`,
+              resetKey: `guard-${xe}`,
               mentionItems: $,
               tools: r,
               toolActions: B,
@@ -341,8 +343,8 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
               appLabel: I,
               onConnectIntegration: S,
               onMentionSelect: ae,
-              onFocus: we,
-              registerInsert: Re,
+              onFocus: Ee,
+              registerInsert: _e,
               action: u ? /* @__PURE__ */ c(
                 Ie,
                 {
@@ -356,13 +358,13 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
             }
           ),
           /* @__PURE__ */ c(
-            ct,
+            ut,
             {
               title: "Tools this agent can use",
               dataTestPrefix: "subagent-tools",
-              items: De,
-              addableOptions: Le,
-              sourceGroups: Pe,
+              items: Le,
+              addableOptions: Pe,
+              sourceGroups: Ue,
               integrationStatus: y,
               onConnectIntegration: (e) => S?.(e),
               mentionItems: $,
@@ -373,7 +375,7 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
               onAdd: (e) => {
                 _(e), N((t) => fe(t, e));
               },
-              onRemove: Ne,
+              onRemove: Me,
               confirmDelete: { noun: "tool", zIndex: ee + 1 }
             }
           )
@@ -381,20 +383,20 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
       }
     ),
     l?.kind === "restapi" && /* @__PURE__ */ c(
-      at,
+      ct,
       {
         initial: l.initialRest,
         charLimits: A,
         variablesData: E,
         onImprove: te,
         onClose: () => b(null),
-        onSave: Oe,
+        onSave: ke,
         zIndex: ee
       },
       l.key
     ),
     l?.kind === "config" && l.toolKey && de && /* @__PURE__ */ c(
-      st,
+      rt,
       {
         toolKey: l.toolKey,
         template: de,
@@ -403,13 +405,13 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
         variablesData: E,
         onImprove: te,
         onClose: () => b(null),
-        onSave: ke,
+        onSave: Ne,
         zIndex: ee
       },
       l.key
     ),
     W && /* @__PURE__ */ c(
-      mt,
+      pt,
       {
         text: W.message,
         type: "info",
@@ -419,7 +421,7 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
         buttonProps: {
           buttonText: "Undo",
           showButton: !0,
-          onButtonClick: () => (Me(), {})
+          onButtonClick: () => (Ke(), {})
         },
         onCloseToast: () => q(null)
       },
@@ -428,6 +430,6 @@ const pt = 1e3, ee = 1002, Te = (w, h) => {
   ] });
 };
 export {
-  Mt as CreateSubAgentPanel
+  Kt as CreateSubAgentPanel
 };
 //# sourceMappingURL=CreateSubAgentPanel.js.map