npm - @bikdotai/bik-component-library - Versions diffs - 0.0.849-beta.4 → 0.0.849-beta.5 - Mend

@bikdotai/bik-component-library 0.0.849-beta.4 → 0.0.849-beta.5

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.

Files changed (47) hide show

package/dist/esm/components/agent-builder/components/RestApiToolPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RestApiToolPanel.js","sources":["../../../../../src/components/agent-builder/components/RestApiToolPanel.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { BikEditor, BikEditorRef } from '@src/editor';\nimport React, { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tRestApiHeader,\n\tRestApiMethod,\n\tRestApiToolConfig,\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\ninterface RestApiToolPanelProps {\n\tonClose: () => void;\n\t/** Persist the config. A pending promise shows the Save loader. /\n\tonSave: (config: RestApiToolConfig) => void \| Promise<void>;\n\t/* Seed values when editing an existing tool. /\n\tinitial?: RestApiToolConfig;\n\t/* Optional \"Improve with AI\" for the instructions field. Omit to hide it. /\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/* SideModal stacking order — raise it when opened over another drawer. /\n\tzIndex?: number;\n\t/* Names of the OTHER tools — a new tool can't reuse one of these. /\n\texistingNames?: string[];\n\t/\n\t Variable catalog for the `@` trigger. When non-empty, `@` opens the\n\t * variable picker directly in Instructions / Request URL / header values /\n\t * Request / Response. Absent → the drawer behaves exactly as before.\n\t /\n\tvariablesData?: VariableListInterfaceV3[];\n}\n\nconst METHODS: RestApiMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst METHOD_OPTIONS: SingleOption[] = METHODS.map((m) => ({\n\tlabel: m,\n\tvalue: m,\n}));\n\n/\n Keep the Request / Response bodies valid JSON: wrap the picked token in\n * quotes (`\"email\": \"{{variable:customer.email}}\"`) — unless the `@` was typed\n * inside a string literal already (odd number of unescaped `\"` before it, e.g.\n * `\"Bearer @`), where the bare token interpolates into the existing string.\n /\nexport const jsonQuoteToken = (\n\ttoken: string,\n\tctx: { textBefore: string },\n): string => {\n\tconst quotes = ctx.textBefore.match(/(?<!\\\\)\"/g)?.length ?? 0;\n\treturn quotes % 2 === 1 ? token : `\"${token}\"`;\n};\n\n/\n Right-side drawer to configure a \"Rest API\" tool: the endpoint the agent can\n * call, plus a JSON request-body template and a sample response. Mount it fresh\n * per open (key it) so `initial` seeds the state. Built on the shared `SideModal`\n * shell and the BikEditor JSON body mode for the Request / Response editors.\n */\nexport const RestApiToolPanel: React.FC<RestApiToolPanelProps> = ({\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tzIndex,\n\texistingNames = [],\n\tvariablesData,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\t// `@`-picked variables insert into the JSON editors at their own cursor.\n\tconst requestEditorRef = useRef<BikEditorRef>(null);\n\tconst responseEditorRef = useRef<BikEditorRef>(null);\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\t// New tools start with the scheme pre-filled so the user only types the host.\n\tconst [url, setUrl] = useState(initial?.url ?? 'https://');\n\tconst [method, setMethod] = useState<RestApiMethod>(\n\t\tinitial?.method ?? 'POST',\n\t);\n\tconst [headers, setHeaders] = useState<RestApiHeader[]>(\n\t\tinitial?.headers ?? [{ key: '', value: '' }],\n\t);\n\tconst [requestBody, setRequestBody] = useState(initial?.requestBody ?? '');\n\tconst [responseSample, setResponseSample] = useState(\n\t\tinitial?.responseSample ?? '',\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\tconst patchHeader = (i: number, patch: Partial<RestApiHeader>) =>\n\t\tsetHeaders((prev) =>\n\t\t\tprev.map((h, idx) => (idx === i ? { ...h, ...patch } : h)),\n\t\t);\n\tconst addHeader = () =>\n\t\tsetHeaders((prev) => [...prev, { key: '', value: '' }]);\n\tconst removeHeader = (i: number) =>\n\t\tsetHeaders((prev) => prev.filter((_, idx) => idx !== i));\n\n\tconst nameTrimmed = name.trim();\n\t// Case-insensitive: two tools can't share a name (the LLM references them by it).\n\tconst isDuplicateName =\n\t\tnameTrimmed.length > 0 &&\n\t\texistingNames.some(\n\t\t\t(n) => n.trim().toLowerCase() === nameTrimmed.toLowerCase(),\n\t\t);\n\tconst canSave =\n\t\tnameTrimmed.length > 0 && url.trim().length > 0 && !isDuplicateName;\n\n\tconst handleSave = async () => {\n\t\tif (!canSave \|\| saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst config: RestApiToolConfig = {\n\t\t\tid: initial?.id ?? `restapi_${Date.now().toString(36)}`,\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\turl: url.trim(),\n\t\t\tmethod,\n\t\t\t// Drop fully-empty header rows.\n\t\t\theaders: headers.filter((h) => h.key.trim() \|\| h.value.trim()),\n\t\t\trequestBody,\n\t\t\tresponseSample,\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\treturn (\n\t\t<SideModal\n\t\t\theader=\"Rest API\"\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText\n\t\t\t\t\ttitle=\"Rest API\"\n\t\t\t\t\tsubtitle=\"Connect to any API endpoint. Define the request and a sample response for the agent to reference.\"\n\t\t\t\t/>\n\t\t\t}\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': 'restapi-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': 'restapi-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<Input\n\t\t\t\tdata-test=\"restapi-name\"\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText=\"Name\"\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder=\"Enter action name\"\n\t\t\t\tvalue={name}\n\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\tstate={isDuplicateName ? 'invalid' : undefined}\n\t\t\t\terrorMessage={\n\t\t\t\t\tisDuplicateName ? 'A tool with this name already exists' : undefined\n\t\t\t\t}\n\t\t\t\tonChangeText={setName}\n\t\t\t/>\n\n\t\t\t<ToolInstructionsField\n\t\t\t\tdata-test=\"restapi-instructions\"\n\t\t\t\tlabel=\"Instructions\"\n\t\t\t\tvalue={instructions}\n\t\t\t\tonChange={setInstructions}\n\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\tplaceholder=\"Describe how should the LLM generate the rest API\"\n\t\t\t\tonImprove={onImprove}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t/>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<VariableTriggerArea\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\tonInsert={(token, caret) =>\n\t\t\t\t\t\tsetUrl((u) => {\n\t\t\t\t\t\t\tconst at = caret ?? u.length;\n\t\t\t\t\t\t\treturn `${u.slice(0, at)}${token}${u.slice(at)}`;\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"restapi-url\"\n\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\tlabelText=\"Request URL\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"https://\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChangeText={setUrl}\n\t\t\t\t\t/>\n\t\t\t\t</VariableTriggerArea>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>HTTP method</TitleSmall>\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"restapi-method\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tdropdownWidth=\"399px\"\n\t\t\t\t\toptions={METHOD_OPTIONS}\n\t\t\t\t\tdefaultOptions={[{ label: method, value: method }]}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\tsetMethod(v as RestApiMethod);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Headers</TitleSmall>\n\t\t\t\t{headers.map((h, i) => (\n\t\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\t\t<HeaderRow key={i} data-test={`restapi-header-${i}`}>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Enter name\"\n\t\t\t\t\t\t\tvalue={h.key}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { key: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VariableTriggerArea\n\t\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\t\tonInsert={(token, caret) => {\n\t\t\t\t\t\t\t\tconst at = caret ?? h.value.length;\n\t\t\t\t\t\t\t\tpatchHeader(i, {\n\t\t\t\t\t\t\t\t\tvalue: `${h.value.slice(0, at)}${token}${h.value.slice(at)}`,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\t\tplaceholder=\"Enter value\"\n\t\t\t\t\t\t\t\tvalue={h.value}\n\t\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { value: v })}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VariableTriggerArea>\n\t\t\t\t\t\t<IconBtn\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Remove header\"\n\t\t\t\t\t\t\tdata-test={`restapi-header-remove-${i}`}\n\t\t\t\t\t\t\tonClick={() => removeHeader(i)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</IconBtn>\n\t\t\t\t\t</HeaderRow>\n\t\t\t\t))}\n\t\t\t\t<AddHeaderRow>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"restapi-add-header\"\n\t\t\t\t\t\tbuttonType=\"dashRegular\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\tbuttonText=\"Add header\"\n\t\t\t\t\t\tonClick={addHeader}\n\t\t\t\t\t/>\n\t\t\t\t</AddHeaderRow>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Request </TitleSmall>\n\t\t\t\t<VariableTriggerArea\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\ttransformToken={jsonQuoteToken}\n\t\t\t\t\tonInsert={(token) =>\n\t\t\t\t\t\trequestEditorRef.current?.insertInlineContent(token)\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<BikEditor\n\t\t\t\t\t\tref={requestEditorRef}\n\t\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\t\tinitialContent={requestBody}\n\t\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\t\tonChange={(c) => setRequestBody(c.text)}\n\t\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t\t/>\n\t\t\t\t</VariableTriggerArea>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Response </TitleSmall>\n\t\t\t\t<VariableTriggerArea\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\ttransformToken={jsonQuoteToken}\n\t\t\t\t\tonInsert={(token) =>\n\t\t\t\t\t\tresponseEditorRef.current?.insertInlineContent(token)\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<BikEditor\n\t\t\t\t\t\tref={responseEditorRef}\n\t\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\t\tinitialContent={responseSample}\n\t\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\t\tonChange={(c) => setResponseSample(c.text)}\n\t\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t\t/>\n\t\t\t\t</VariableTriggerArea>\n\t\t\t</FieldBlock>\n\t\t</SideModal>\n\t);\n};\n\nconst HeaderRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nconst AddHeaderRow = styled.div`\n\tdisplay: flex;\n`;\n\nconst IconBtn = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 32px;\n\theight: 32px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\n\t&:hover {\n\t\tborder-color: ${COLORS.content.secondary};\n\t}\n`;\n\nexport const JsonFieldBox = {\n\tborderRadius: '4px',\n\toverflow: 'hidden',\n};\n"],"names":["METHODS","METHOD_OPTIONS","m","jsonQuoteToken","token","ctx","RestApiToolPanel","onClose","onSave","initial","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","existingNames","variablesData","name","setName","useState","requestEditorRef","useRef","responseEditorRef","instructions","setInstructions","url","setUrl","method","setMethod","headers","setHeaders","requestBody","setRequestBody","responseSample","setResponseSample","saving","setSaving","patchHeader","i","patch","prev","h","idx","addHeader","removeHeader","_","nameTrimmed","isDuplicateName","n","canSave","jsxs","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","config","result","Input","ToolInstructionsField","FieldBlock","VariableTriggerArea","caret","u","at","TitleSmall","COLORS","Dropdown","opt","v","unwrapDropdownValue","HeaderRow","IconBtn","DeleteIcon","AddHeaderRow","Button","PlusIcon","BikEditor","JsonFieldBox","c","styled"],"mappings":"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"}
1	+ {"version":3,"file":"RestApiToolPanel.js","sources":["../../../../../src/components/agent-builder/components/RestApiToolPanel.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport { BikEditor, BikEditorRef } from '@src/editor';\nimport React, { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Dropdown, unwrapDropdownValue } from '@src/components/dropdown';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tRestApiHeader,\n\tRestApiMethod,\n\tRestApiToolConfig,\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\ninterface RestApiToolPanelProps {\n\tonClose: () => void;\n\t/** Persist the config. A pending promise shows the Save loader. /\n\tonSave: (config: RestApiToolConfig) => void \| Promise<void>;\n\t/* Seed values when editing an existing tool. /\n\tinitial?: RestApiToolConfig;\n\t/* Optional \"Improve with AI\" for the instructions field. Omit to hide it. /\n\tonImprove?: (text: string) => Promise<string>;\n\tcharLimits?: AgentCharLimits;\n\t/* SideModal stacking order — raise it when opened over another drawer. /\n\tzIndex?: number;\n\t/* Names of the OTHER tools — a new tool can't reuse one of these. /\n\texistingNames?: string[];\n\t/\n\t Variable catalog for the `@` trigger. When non-empty, `@` opens the\n\t * variable picker directly in Instructions / Request URL / header values /\n\t * Request / Response. Absent → the drawer behaves exactly as before.\n\t /\n\tvariablesData?: VariableListInterfaceV3[];\n}\n\nconst METHODS: RestApiMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];\nconst METHOD_OPTIONS: SingleOption[] = METHODS.map((m) => ({\n\tlabel: m,\n\tvalue: m,\n}));\n\n/\n Keep the Request / Response bodies valid JSON: wrap the picked token in\n * quotes (`\"email\": \"{{variable:customer.email}}\"`) — unless the `@` was typed\n * inside a string literal already (odd number of unescaped `\"` before it, e.g.\n * `\"Bearer @`), where the bare token interpolates into the existing string.\n /\nexport const jsonQuoteToken = (\n\ttoken: string,\n\tctx: { textBefore: string },\n): string => {\n\tconst quotes = ctx.textBefore.match(/(?<!\\\\)\"/g)?.length ?? 0;\n\treturn quotes % 2 === 1 ? token : `\"${token}\"`;\n};\n\n/\n Right-side drawer to configure a \"Rest API\" tool: the endpoint the agent can\n * call, plus a JSON request-body template and a sample response. Mount it fresh\n * per open (key it) so `initial` seeds the state. Built on the shared `SideModal`\n * shell and the BikEditor JSON body mode for the Request / Response editors.\n */\nexport const RestApiToolPanel: React.FC<RestApiToolPanelProps> = ({\n\tonClose,\n\tonSave,\n\tinitial,\n\tonImprove,\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tzIndex,\n\texistingNames = [],\n\tvariablesData,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\t// `@`-picked variables insert into the JSON editors at their own cursor.\n\tconst requestEditorRef = useRef<BikEditorRef>(null);\n\tconst responseEditorRef = useRef<BikEditorRef>(null);\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\t// New tools start with the scheme pre-filled so the user only types the host.\n\tconst [url, setUrl] = useState(initial?.url ?? 'https://');\n\tconst [method, setMethod] = useState<RestApiMethod>(\n\t\tinitial?.method ?? 'POST',\n\t);\n\tconst [headers, setHeaders] = useState<RestApiHeader[]>(\n\t\tinitial?.headers ?? [{ key: '', value: '' }],\n\t);\n\tconst [requestBody, setRequestBody] = useState(initial?.requestBody ?? '');\n\tconst [responseSample, setResponseSample] = useState(\n\t\tinitial?.responseSample ?? '',\n\t);\n\tconst [saving, setSaving] = useState(false);\n\n\tconst patchHeader = (i: number, patch: Partial<RestApiHeader>) =>\n\t\tsetHeaders((prev) =>\n\t\t\tprev.map((h, idx) => (idx === i ? { ...h, ...patch } : h)),\n\t\t);\n\tconst addHeader = () =>\n\t\tsetHeaders((prev) => [...prev, { key: '', value: '' }]);\n\tconst removeHeader = (i: number) =>\n\t\tsetHeaders((prev) => prev.filter((_, idx) => idx !== i));\n\n\tconst nameTrimmed = name.trim();\n\t// Case-insensitive: two tools can't share a name (the LLM references them by it).\n\tconst isDuplicateName =\n\t\tnameTrimmed.length > 0 &&\n\t\texistingNames.some(\n\t\t\t(n) => n.trim().toLowerCase() === nameTrimmed.toLowerCase(),\n\t\t);\n\tconst canSave =\n\t\tnameTrimmed.length > 0 && url.trim().length > 0 && !isDuplicateName;\n\n\tconst handleSave = async () => {\n\t\tif (!canSave \|\| saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst config: RestApiToolConfig = {\n\t\t\tid: initial?.id ?? `restapi_${Date.now().toString(36)}`,\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\turl: url.trim(),\n\t\t\tmethod,\n\t\t\t// Drop fully-empty header rows.\n\t\t\theaders: headers.filter((h) => h.key.trim() \|\| h.value.trim()),\n\t\t\trequestBody,\n\t\t\tresponseSample,\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\treturn (\n\t\t<SideModal\n\t\t\theader=\"Rest API\"\n\t\t\tcloseOnEscapeKey={false}\n\t\t\tzIndex={zIndex}\n\t\t\theaderCustomComponent={\n\t\t\t\t<DrawerHeaderText\n\t\t\t\t\ttitle=\"Rest API\"\n\t\t\t\t\tsubtitle=\"Connect to any API endpoint. Define the request and a sample response for the agent to reference.\"\n\t\t\t\t/>\n\t\t\t}\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': 'restapi-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': 'restapi-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<Input\n\t\t\t\tdata-test=\"restapi-name\"\n\t\t\t\tvariant=\"small\"\n\t\t\t\tlabelText=\"Name\"\n\t\t\t\tlabelTextBold\n\t\t\t\tplaceholder=\"Enter action name\"\n\t\t\t\tvalue={name}\n\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\tstate={isDuplicateName ? 'invalid' : undefined}\n\t\t\t\terrorMessage={\n\t\t\t\t\tisDuplicateName ? 'A tool with this name already exists' : undefined\n\t\t\t\t}\n\t\t\t\tonChangeText={setName}\n\t\t\t/>\n\n\t\t\t<ToolInstructionsField\n\t\t\t\tdata-test=\"restapi-instructions\"\n\t\t\t\tlabel=\"Instructions\"\n\t\t\t\tvalue={instructions}\n\t\t\t\tonChange={setInstructions}\n\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\tplaceholder=\"Describe how should the LLM generate the rest API\"\n\t\t\t\tonImprove={onImprove}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t/>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<VariableTriggerArea\n\t\t\t\t\taddDataButton\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\tonInsert={(token, caret) =>\n\t\t\t\t\t\tsetUrl((u) => {\n\t\t\t\t\t\t\tconst at = caret ?? u.length;\n\t\t\t\t\t\t\treturn `${u.slice(0, at)}${token}${u.slice(at)}`;\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"restapi-url\"\n\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\tlabelText=\"Request URL\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"https://\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChangeText={setUrl}\n\t\t\t\t\t/>\n\t\t\t\t</VariableTriggerArea>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>HTTP method</TitleSmall>\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"restapi-method\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tdropdownWidth=\"399px\"\n\t\t\t\t\toptions={METHOD_OPTIONS}\n\t\t\t\t\tdefaultOptions={[{ label: method, value: method }]}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst v = unwrapDropdownValue(opt);\n\t\t\t\t\t\tif (v) {\n\t\t\t\t\t\t\tsetMethod(v as RestApiMethod);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Headers</TitleSmall>\n\t\t\t\t{headers.map((h, i) => (\n\t\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\t\t<HeaderRow key={i} data-test={`restapi-header-${i}`}>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\tplaceholder=\"Enter name\"\n\t\t\t\t\t\t\tvalue={h.key}\n\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { key: v })}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VariableTriggerArea\n\t\t\t\t\t\t\taddDataButton\n\t\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\t\tonInsert={(token, caret) => {\n\t\t\t\t\t\t\t\tconst at = caret ?? h.value.length;\n\t\t\t\t\t\t\t\tpatchHeader(i, {\n\t\t\t\t\t\t\t\t\tvalue: `${h.value.slice(0, at)}${token}${h.value.slice(at)}`,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\t\thideInputHeader\n\t\t\t\t\t\t\t\tplaceholder=\"Enter value\"\n\t\t\t\t\t\t\t\tvalue={h.value}\n\t\t\t\t\t\t\t\tonChangeText={(v) => patchHeader(i, { value: v })}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VariableTriggerArea>\n\t\t\t\t\t\t<IconBtn\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"Remove header\"\n\t\t\t\t\t\t\tdata-test={`restapi-header-remove-${i}`}\n\t\t\t\t\t\t\tonClick={() => removeHeader(i)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</IconBtn>\n\t\t\t\t\t</HeaderRow>\n\t\t\t\t))}\n\t\t\t\t<AddHeaderRow>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"restapi-add-header\"\n\t\t\t\t\t\tbuttonType=\"dashRegular\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\t\t\tbuttonText=\"Add header\"\n\t\t\t\t\t\tonClick={addHeader}\n\t\t\t\t\t/>\n\t\t\t\t</AddHeaderRow>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Request </TitleSmall>\n\t\t\t\t<VariableTriggerArea\n\t\t\t\t\taddDataButton\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\ttransformToken={jsonQuoteToken}\n\t\t\t\t\tonInsert={(token) =>\n\t\t\t\t\t\trequestEditorRef.current?.insertInlineContent(token)\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<BikEditor\n\t\t\t\t\t\tref={requestEditorRef}\n\t\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\t\tinitialContent={requestBody}\n\t\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\t\tonChange={(c) => setRequestBody(c.text)}\n\t\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t\t/>\n\t\t\t\t</VariableTriggerArea>\n\t\t\t</FieldBlock>\n\n\t\t\t<FieldBlock>\n\t\t\t\t<TitleSmall color={COLORS.content.primary}>Response </TitleSmall>\n\t\t\t\t<VariableTriggerArea\n\t\t\t\t\taddDataButton\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\ttransformToken={jsonQuoteToken}\n\t\t\t\t\tonInsert={(token) =>\n\t\t\t\t\t\tresponseEditorRef.current?.insertInlineContent(token)\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<BikEditor\n\t\t\t\t\t\tref={responseEditorRef}\n\t\t\t\t\t\tfeatures={{ jsonMode: true }}\n\t\t\t\t\t\tstyle={JsonFieldBox}\n\t\t\t\t\t\tinitialContent={responseSample}\n\t\t\t\t\t\tplaceholder=\"Type or paste JSON here\"\n\t\t\t\t\t\tonChange={(c) => setResponseSample(c.text)}\n\t\t\t\t\t\tminHeight=\"120px\"\n\t\t\t\t\t\tmaxHeight=\"240px\"\n\t\t\t\t\t/>\n\t\t\t\t</VariableTriggerArea>\n\t\t\t</FieldBlock>\n\t\t</SideModal>\n\t);\n};\n\nconst HeaderRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nconst AddHeaderRow = styled.div`\n\tdisplay: flex;\n`;\n\nconst IconBtn = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 32px;\n\theight: 32px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\n\t&:hover {\n\t\tborder-color: ${COLORS.content.secondary};\n\t}\n`;\n\nexport const JsonFieldBox = {\n\tborderRadius: '4px',\n\toverflow: 'hidden',\n};\n"],"names":["METHODS","METHOD_OPTIONS","m","jsonQuoteToken","token","ctx","RestApiToolPanel","onClose","onSave","initial","onImprove","charLimits","AGENT_CHAR_LIMITS","zIndex","existingNames","variablesData","name","setName","useState","requestEditorRef","useRef","responseEditorRef","instructions","setInstructions","url","setUrl","method","setMethod","headers","setHeaders","requestBody","setRequestBody","responseSample","setResponseSample","saving","setSaving","patchHeader","i","patch","prev","h","idx","addHeader","removeHeader","_","nameTrimmed","isDuplicateName","n","canSave","jsxs","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","config","result","Input","ToolInstructionsField","FieldBlock","VariableTriggerArea","caret","u","at","TitleSmall","COLORS","Dropdown","opt","v","unwrapDropdownValue","HeaderRow","IconBtn","DeleteIcon","AddHeaderRow","Button","PlusIcon","BikEditor","JsonFieldBox","c","styled"],"mappings":"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"}

package/dist/esm/components/agent-builder/components/ToolInstructionsField.js CHANGED Viewed

@@ -1,24 +1,24 @@
 import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { useState as m } from "react";
+import { useState as a } from "react";
 import T from "styled-components";
 import { TitleSmall as v } from "../../TypographyStyle.js";
 import { COLORS as w } from "../../../constants/Theme.js";
-import { FieldBlock as E, AiTextAreaShell as F, AiTextAreaInput as k } from "../AgentBuilder.styled.js";
-import { MentionEditor as B } from "./MentionEditor.js";
+import { FieldBlock as B, AiTextAreaShell as E, AiTextAreaInput as F } from "../AgentBuilder.styled.js";
+import { MentionEditor as k } from "./MentionEditor.js";
 import { Button as b } from "../../button/Button.js";
 import j from "../../../icons/BIK AI specific/WandSparkles.js";
 const q = ({
-  label: l,
+  label: m,
   value: t,
   onChange: e,
-  maxLength: a,
-  placeholder: c,
-  minHeight: d = "120px",
+  maxLength: l,
+  placeholder: d,
+  minHeight: c = "120px",
   onImprove: i,
   variablesData: p,
   ...r
 }) => {
-  const [x, f] = m(!1), [n, u] = m(!1), [I, A] = m(0), h = (p?.length ?? 0) > 0, S = async () => {
+  const [x, f] = a(!1), [n, u] = a(!1), [I, A] = a(0), h = (p?.length ?? 0) > 0, S = async () => {
     if (!(!i || n || t.trim().length === 0)) {
       u(!0);
       try {
@@ -41,31 +41,32 @@ const q = ({
     }
   ) }) : void 0;
   return h ? /* @__PURE__ */ o(
-    B,
+    k,
     {
       "data-test": r["data-test"],
-      label: l,
+      label: m,
       value: t,
       onChange: e,
-      maxLength: a,
-      placeholder: c,
-      minHeight: d,
+      maxLength: l,
+      placeholder: d,
+      minHeight: c,
       resetKey: `improve-${I}`,
       mentionItems: [],
       tools: [],
       variablesData: p,
+      addDataButton: !0,
       action: y
     }
-  ) : /* @__PURE__ */ g(E, { children: [
-    /* @__PURE__ */ o(v, { color: w.content.primary, children: l }),
-    /* @__PURE__ */ g(F, { focused: x, minHeight: d, children: [
+  ) : /* @__PURE__ */ g(B, { children: [
+    /* @__PURE__ */ o(v, { color: w.content.primary, children: m }),
+    /* @__PURE__ */ g(E, { focused: x, minHeight: c, children: [
       /* @__PURE__ */ o(
-        k,
+        F,
         {
           "data-test": r["data-test"],
           value: t,
-          placeholder: c,
-          maxLength: a,
+          placeholder: d,
+          maxLength: l,
           onFocus: () => f(!0),
           onBlur: () => f(!1),
           onChange: (s) => e(s.target.value)

package/dist/esm/components/agent-builder/components/ToolInstructionsField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolInstructionsField.js","sources":["../../../../../src/components/agent-builder/components/ToolInstructionsField.tsx"],"sourcesContent":["import { WandSparkles } from '@src/icons';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tAiTextAreaInput,\n\tAiTextAreaShell,\n\tFieldBlock,\n} from '../AgentBuilder.styled';\nimport { MentionEditor } from './MentionEditor';\n\ninterface ToolInstructionsFieldProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** \"Improve with AI\" — resolves with rewritten text. Omit to hide the button. /\n\tonImprove?: (text: string) => Promise<string>;\n\t/\n\t Variable catalog. When non-empty the field upgrades from a plain textarea\n\t * to a variables-only `@` mention editor: typing `@` opens the variable\n\t * categories directly (Variables is the sole category, so the picker skips\n\t * the Tools / Sub-agent root), and picks render as chips persisted as\n\t * `{{variable:<name>}}` tokens.\n\t /\n\tvariablesData?: VariableListInterfaceV3[];\n\t'data-test'?: string;\n}\n\n/\n A labelled multiline field with an inline \"Improve with AI\" action pinned to\n * the bottom-left of the box (Figma: Rest API / Handover-to-email drawers). The\n * button is hidden when `onImprove` is omitted.\n */\nexport const ToolInstructionsField: React.FC<ToolInstructionsFieldProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '120px',\n\tonImprove,\n\tvariablesData,\n\t...rest\n}) => {\n\tconst [focused, setFocused] = useState(false);\n\tconst [improving, setImproving] = useState(false);\n\t// Bumped when \"Improve with AI\" replaces the text externally — the mention\n\t// editor only reads `value` on (re)mount, so it must be remounted.\n\tconst [editorEpoch, setEditorEpoch] = useState(0);\n\n\tconst withVariables = (variablesData?.length ?? 0) > 0;\n\n\tconst handleImprove = async () => {\n\t\tif (!onImprove \|\| improving \|\| value.trim().length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(true);\n\t\ttry {\n\t\t\tonChange(await onImprove(value));\n\t\t\tif (withVariables) {\n\t\t\t\tsetEditorEpoch((e) => e + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(false);\n\t\t}\n\t};\n\n\tconst improveAction = onImprove ? (\n\t\t<ImproveRow>\n\t\t\t<Button\n\t\t\t\tdata-test={`${rest['data-test'] ?? 'tool'}-improve`}\n\t\t\t\tbuttonType=\"ai\"\n\t\t\t\tsize=\"small\"\n\t\t\t\tLeadingIcon={WandSparkles}\n\t\t\t\tbuttonText=\"Improve with AI\"\n\t\t\t\tisLoading={improving}\n\t\t\t\tdisabled={improving \|\| value.trim().length === 0}\n\t\t\t\tonClick={handleImprove}\n\t\t\t/>\n\t\t</ImproveRow>\n\t) : undefined;\n\n\t// Variables enabled → the mention-editor variant. `mentionItems` / tool\n\t// hooks stay empty so Variables is the picker's ONLY category and `@` lands\n\t// straight in the variable list.\n\tif (withVariables) {\n\t\treturn (\n\t\t\t<MentionEditor\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tlabel={label}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={onChange}\n\t\t\t\tmaxLength={maxLength}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tminHeight={minHeight}\n\t\t\t\tresetKey={`improve-${editorEpoch}`}\n\t\t\t\tmentionItems={[]}\n\t\t\t\ttools={[]}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\taction={improveAction}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t<AiTextAreaShell focused={focused} minHeight={minHeight}>\n\t\t\t\t<AiTextAreaInput\n\t\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tonFocus={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\n\t\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\t/>\n\t\t\t\t{improveAction}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n\nconst ImproveRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n`;\n"],"names":["ToolInstructionsField","label","value","onChange","maxLength","placeholder","minHeight","onImprove","variablesData","rest","focused","setFocused","useState","improving","setImproving","editorEpoch","setEditorEpoch","withVariables","handleImprove","e","improveAction","jsx","ImproveRow","Button","WandSparkles","MentionEditor","FieldBlock","TitleSmall","COLORS","jsxs","AiTextAreaShell","AiTextAreaInput","styled"],"mappings":";;;;;;;;;AAuCO,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAG1C,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,KAAiBT,GAAe,UAAU,KAAK,GAE/CU,IAAgB,YAAY;AACjC,QAAI,GAACX,KAAaM,KAAaX,EAAM,KAAA,EAAO,WAAW,IAGvD;AAAA,MAAAY,EAAa,EAAI;AACjB,UAAI;AACH,QAAAX,EAAS,MAAMI,EAAUL,CAAK,CAAC,GAC3Be,KACHD,EAAe,CAACG,MAAMA,IAAI,CAAC;AAAA,MAE7B,UAAA;AACC,QAAAL,EAAa,EAAK;AAAA,MACnB;AAAA;AAAA,EACD,GAEMM,IAAgBb,IACrB,gBAAAc,EAACC,GAAA,EACA,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,aAAW,GAAGd,EAAK,WAAW,KAAK,MAAM;AAAA,MACzC,YAAW;AAAA,MACX,MAAK;AAAA,MACL,aAAae;AAAAA,MACb,YAAW;AAAA,MACX,WAAWX;AAAA,MACX,UAAUA,KAAaX,EAAM,KAAA,EAAO,WAAW;AAAA,MAC/C,SAASgB;AAAA,IAAA;AAAA,EAAA,GAEX,IACG;AAKJ,SAAID,IAEF,gBAAAI;AAAA,IAACI;AAAA,IAAA;AAAA,MACA,aAAWhB,EAAK,WAAW;AAAA,MAC3B,OAAAR;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAU,WAAWS,CAAW;AAAA,MAChC,cAAc,CAAA;AAAA,MACd,OAAO,CAAA;AAAA,MACP,eAAAP;AAAA,~~MACA~~,QAAQY;AAAA,IAAA;AAAA,EAAA,sBAMTM,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAA3B,GAAM;AAAA,IAClD,gBAAA4B,EAACC,GAAA,EAAgB,SAAApB,GAAkB,WAAAJ,GAClC,UAAA;AAAA,MAAA,gBAAAe;AAAA,QAACU;AAAA,QAAA;AAAA,UACA,aAAWtB,EAAK,WAAW;AAAA,UAC3B,OAAAP;AAAA,UACA,aAAAG;AAAA,UACA,WAAAD;AAAA,UACA,SAAS,MAAMO,EAAW,EAAI;AAAA,UAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,UAC9B,UAAU,CAACQ,MAAMhB,EAASgB,EAAE,OAAO,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAExCC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACD;AAEF,GAEME,IAAaU,EAAO;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"ToolInstructionsField.js","sources":["../../../../../src/components/agent-builder/components/ToolInstructionsField.tsx"],"sourcesContent":["import { WandSparkles } from '@src/icons';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tAiTextAreaInput,\n\tAiTextAreaShell,\n\tFieldBlock,\n} from '../AgentBuilder.styled';\nimport { MentionEditor } from './MentionEditor';\n\ninterface ToolInstructionsFieldProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** \"Improve with AI\" — resolves with rewritten text. Omit to hide the button. /\n\tonImprove?: (text: string) => Promise<string>;\n\t/\n\t Variable catalog. When non-empty the field upgrades from a plain textarea\n\t * to a variables-only `@` mention editor: typing `@` opens the variable\n\t * categories directly (Variables is the sole category, so the picker skips\n\t * the Tools / Sub-agent root), and picks render as chips persisted as\n\t * `{{variable:<name>}}` tokens.\n\t /\n\tvariablesData?: VariableListInterfaceV3[];\n\t'data-test'?: string;\n}\n\n/\n A labelled multiline field with an inline \"Improve with AI\" action pinned to\n * the bottom-left of the box (Figma: Rest API / Handover-to-email drawers). The\n * button is hidden when `onImprove` is omitted.\n */\nexport const ToolInstructionsField: React.FC<ToolInstructionsFieldProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '120px',\n\tonImprove,\n\tvariablesData,\n\t...rest\n}) => {\n\tconst [focused, setFocused] = useState(false);\n\tconst [improving, setImproving] = useState(false);\n\t// Bumped when \"Improve with AI\" replaces the text externally — the mention\n\t// editor only reads `value` on (re)mount, so it must be remounted.\n\tconst [editorEpoch, setEditorEpoch] = useState(0);\n\n\tconst withVariables = (variablesData?.length ?? 0) > 0;\n\n\tconst handleImprove = async () => {\n\t\tif (!onImprove \|\| improving \|\| value.trim().length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(true);\n\t\ttry {\n\t\t\tonChange(await onImprove(value));\n\t\t\tif (withVariables) {\n\t\t\t\tsetEditorEpoch((e) => e + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(false);\n\t\t}\n\t};\n\n\tconst improveAction = onImprove ? (\n\t\t<ImproveRow>\n\t\t\t<Button\n\t\t\t\tdata-test={`${rest['data-test'] ?? 'tool'}-improve`}\n\t\t\t\tbuttonType=\"ai\"\n\t\t\t\tsize=\"small\"\n\t\t\t\tLeadingIcon={WandSparkles}\n\t\t\t\tbuttonText=\"Improve with AI\"\n\t\t\t\tisLoading={improving}\n\t\t\t\tdisabled={improving \|\| value.trim().length === 0}\n\t\t\t\tonClick={handleImprove}\n\t\t\t/>\n\t\t</ImproveRow>\n\t) : undefined;\n\n\t// Variables enabled → the mention-editor variant. `mentionItems` / tool\n\t// hooks stay empty so Variables is the picker's ONLY category and `@` lands\n\t// straight in the variable list.\n\tif (withVariables) {\n\t\treturn (\n\t\t\t<MentionEditor\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tlabel={label}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={onChange}\n\t\t\t\tmaxLength={maxLength}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tminHeight={minHeight}\n\t\t\t\tresetKey={`improve-${editorEpoch}`}\n\t\t\t\tmentionItems={[]}\n\t\t\t\ttools={[]}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\t// Drawers get the same focused-field \"+ Add data\" affordance as the\n\t\t\t\t// main Step-3 editors.\n\t\t\t\taddDataButton\n\t\t\t\taction={improveAction}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t<AiTextAreaShell focused={focused} minHeight={minHeight}>\n\t\t\t\t<AiTextAreaInput\n\t\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tonFocus={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\n\t\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\t/>\n\t\t\t\t{improveAction}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n\nconst ImproveRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n`;\n"],"names":["ToolInstructionsField","label","value","onChange","maxLength","placeholder","minHeight","onImprove","variablesData","rest","focused","setFocused","useState","improving","setImproving","editorEpoch","setEditorEpoch","withVariables","handleImprove","e","improveAction","jsx","ImproveRow","Button","WandSparkles","MentionEditor","FieldBlock","TitleSmall","COLORS","jsxs","AiTextAreaShell","AiTextAreaInput","styled"],"mappings":";;;;;;;;;AAuCO,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAG1C,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,KAAiBT,GAAe,UAAU,KAAK,GAE/CU,IAAgB,YAAY;AACjC,QAAI,GAACX,KAAaM,KAAaX,EAAM,KAAA,EAAO,WAAW,IAGvD;AAAA,MAAAY,EAAa,EAAI;AACjB,UAAI;AACH,QAAAX,EAAS,MAAMI,EAAUL,CAAK,CAAC,GAC3Be,KACHD,EAAe,CAACG,MAAMA,IAAI,CAAC;AAAA,MAE7B,UAAA;AACC,QAAAL,EAAa,EAAK;AAAA,MACnB;AAAA;AAAA,EACD,GAEMM,IAAgBb,IACrB,gBAAAc,EAACC,GAAA,EACA,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,aAAW,GAAGd,EAAK,WAAW,KAAK,MAAM;AAAA,MACzC,YAAW;AAAA,MACX,MAAK;AAAA,MACL,aAAae;AAAAA,MACb,YAAW;AAAA,MACX,WAAWX;AAAA,MACX,UAAUA,KAAaX,EAAM,KAAA,EAAO,WAAW;AAAA,MAC/C,SAASgB;AAAA,IAAA;AAAA,EAAA,GAEX,IACG;AAKJ,SAAID,IAEF,gBAAAI;AAAA,IAACI;AAAA,IAAA;AAAA,MACA,aAAWhB,EAAK,WAAW;AAAA,MAC3B,OAAAR;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAU,WAAWS,CAAW;AAAA,MAChC,cAAc,CAAA;AAAA,MACd,OAAO,CAAA;AAAA,MACP,eAAAP;AAAA,MAGA,eAAa;AAAA,MACb,QAAQY;AAAA,IAAA;AAAA,EAAA,sBAMTM,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAA3B,GAAM;AAAA,IAClD,gBAAA4B,EAACC,GAAA,EAAgB,SAAApB,GAAkB,WAAAJ,GAClC,UAAA;AAAA,MAAA,gBAAAe;AAAA,QAACU;AAAA,QAAA;AAAA,UACA,aAAWtB,EAAK,WAAW;AAAA,UAC3B,OAAAP;AAAA,UACA,aAAAG;AAAA,UACA,WAAAD;AAAA,UACA,SAAS,MAAMO,EAAW,EAAI;AAAA,UAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,UAC9B,UAAU,CAACQ,MAAMhB,EAASgB,EAAE,OAAO,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAExCC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACD;AAEF,GAEME,IAAaU,EAAO;AAAA;AAAA;AAAA;"}

package/dist/esm/components/agent-builder/components/VariableTriggerArea.d.ts CHANGED Viewed

@@ -20,6 +20,12 @@ interface VariableTriggerAreaProps {
     transformToken?: (token: string, ctx: {
         textBefore: string;
     }) => string;
+    /**
+     * Show the floating "+ Add data" pill while the wrapped field is focused.
+     * Clicking it opens this same variable panel at the field's caret — the
+     * button equivalent of typing `@`.
+     */
+    addDataButton?: boolean;
     children: React.ReactNode;
 }
 /**

package/dist/esm/components/agent-builder/components/VariableTriggerArea.js CHANGED Viewed

@@ -1,94 +1,126 @@
-import { jsxs as x, jsx as f } from "react/jsx-runtime";
-import { useRef as b, useState as h, useCallback as w, useEffect as k } from "react";
-import m from "styled-components";
-import { PickerType as B } from "../../variable-picker-v3/model.js";
-import { variableTokenName as y } from "../utils/mentionSerialization.js";
-import { VariablePicker as E } from "../../variable-picker-v3/VariablePicker.js";
-const T = (e) => `{{variable:${y(e.actualValue)}}}`, d = /[\s,;:/?&=(){}[\]"'<>]/, R = (e) => {
-  if (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) {
-    const t = e.selectionStart ?? e.value.length, i = t === 0 ? " " : e.value[t - 1] ?? " ";
+import { jsxs as E, jsx as p } from "react/jsx-runtime";
+import { useRef as v, useState as b, useCallback as T, useEffect as $ } from "react";
+import B from "styled-components";
+import { COLORS as h } from "../../../constants/Theme.js";
+import { PickerType as F } from "../../variable-picker-v3/model.js";
+import { variableTokenName as L } from "../utils/mentionSerialization.js";
+import { AddDataPill as C } from "./AddDataPill.js";
+import { VariablePicker as O } from "../../variable-picker-v3/VariablePicker.js";
+const A = (t) => `{{variable:${L(t.actualValue)}}}`, w = /[\s,;:/?&=(){}[\]"'<>]/, k = (t) => {
+  if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) {
+    const n = t.selectionStart ?? t.value.length, d = n === 0 ? " " : t.value[n - 1] ?? " ";
     return {
-      ok: d.test(i),
-      caret: t,
-      textBefore: e.value.slice(0, t)
+      ok: w.test(d),
+      caret: n,
+      textBefore: t.value.slice(0, n)
     };
   }
-  const l = window.getSelection(), c = l?.anchorNode?.textContent ?? "", s = l?.anchorOffset ?? 0, a = s === 0 ? " " : c[s - 1] ?? " ";
+  const l = window.getSelection(), c = l?.anchorNode?.textContent ?? "", i = l?.anchorOffset ?? 0, u = i === 0 ? " " : c[i - 1] ?? " ";
   return {
-    ok: d.test(a),
+    ok: w.test(u),
     caret: null,
-    textBefore: c.slice(0, s)
+    textBefore: c.slice(0, i)
   };
-}, N = ({
-  variablesData: e,
+}, z = ({
+  variablesData: t,
   onInsert: l,
   transformToken: c,
-  children: s
+  addDataButton: i,
+  children: u
 }) => {
-  const a = b(null), [t, i] = h(null), u = (e?.length ?? 0) > 0, p = w(
-    (o) => {
-      if (!u || o.key !== "@")
-        return;
-      const r = R(o.target);
-      if (!r.ok)
+  const n = v(null), [d, m] = b(!1), g = v(null), [r, a] = b(null), f = (t?.length ?? 0) > 0, x = () => {
+    const e = n.current?.getBoundingClientRect();
+    return {
+      above: !!e && window.innerHeight - e.bottom < 340,
+      alignRight: !!e && window.innerWidth - e.left < 360
+    };
+  }, y = T(
+    (e) => {
+      if (!f || e.key !== "@")
         return;
-      o.preventDefault(), o.stopPropagation();
-      const n = a.current?.getBoundingClientRect(), g = !!n && window.innerHeight - n.bottom < 340, v = !!n && window.innerWidth - n.left < 360;
-      i({
-        caret: r.caret,
-        textBefore: r.textBefore,
-        above: g,
-        alignRight: v
-      });
+      const o = k(e.target);
+      o.ok && (e.preventDefault(), e.stopPropagation(), a({
+        caret: o.caret,
+        textBefore: o.textBefore,
+        ...x()
+      }));
     },
-    [u]
-  );
-  return k(() => {
-    if (!t)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [f]
+  ), R = () => {
+    const e = k(g.current);
+    a({
+      caret: e.caret,
+      textBefore: e.textBefore,
+      ...x()
+    });
+  };
+  return $(() => {
+    if (!r)
       return;
-    const o = (n) => {
-      n.key === "Escape" && (n.stopPropagation(), i(null));
-    }, r = (n) => {
-      a.current?.contains(n.target) || i(null);
+    const e = (s) => {
+      s.key === "Escape" && (s.stopPropagation(), a(null));
+    }, o = (s) => {
+      n.current?.contains(s.target) || a(null);
     };
-    return document.addEventListener("keydown", o, !0), document.addEventListener("mousedown", r), () => {
-      document.removeEventListener("keydown", o, !0), document.removeEventListener("mousedown", r);
+    return document.addEventListener("keydown", e, !0), document.addEventListener("mousedown", o), () => {
+      document.removeEventListener("keydown", e, !0), document.removeEventListener("mousedown", o);
     };
-  }, [t]), /* @__PURE__ */ x(L, { ref: a, onKeyDownCapture: p, children: [
-    s,
-    t && /* @__PURE__ */ f(
-      $,
-      {
-        $above: t.above,
-        $right: t.alignRight,
-        "data-test": "variable-trigger-panel",
-        children: /* @__PURE__ */ f(
-          E,
+  }, [r]), /* @__PURE__ */ E(
+    P,
+    {
+      ref: n,
+      onKeyDownCapture: y,
+      onFocus: (e) => {
+        e.target.closest?.(
+          '[data-test="variable-trigger-panel"]'
+        ) || (g.current = e.target, m(!0));
+      },
+      onBlur: () => m(!1),
+      children: [
+        u,
+        i && f && (d || r) && /* @__PURE__ */ p(C, { onOpen: R }),
+        r && /* @__PURE__ */ p(
+          S,
           {
-            type: B.FLOATER,
-            data: e ?? [],
-            showRecommendedBar: !1,
-            onClose: () => i(null),
-            onSelect: (o) => {
-              i(null);
-              const r = T(o), n = c ? c(r, { textBefore: t.textBefore }) : r;
-              l(n, t.caret);
-            }
+            $above: r.above,
+            $right: r.alignRight,
+            "data-test": "variable-trigger-panel",
+            children: /* @__PURE__ */ p(
+              O,
+              {
+                type: F.FLOATER,
+                data: t ?? [],
+                showRecommendedBar: !1,
+                onClose: () => a(null),
+                onSelect: (e) => {
+                  a(null);
+                  const o = A(e), s = c ? c(o, { textBefore: r.textBefore }) : o;
+                  l(s, r.caret);
+                }
+              }
+            )
           }
         )
-      }
-    )
-  ] });
-}, L = m.div`
+      ]
+    }
+  );
+}, P = B.div`
 	position: relative;
-`, $ = m.div`
+`, S = B.div`
 	position: absolute;
 	z-index: 1000;
-	${(e) => e.$right ? "right: 0;" : "left: 0;"}
-	${(e) => e.$above ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
+	width: 344px;
+	background: ${h.surface.standard};
+	border: 1px solid ${h.stroke.primary};
+	border-radius: 4px;
+	box-shadow: 0px -2px 8px 0px #0000001f;
+	overflow: hidden;
+	${(t) => t.$right ? "right: 0;" : "left: 0;"}
+	${(t) => t.$above ? "bottom: calc(100% + 4px);" : "top: calc(100% + 4px);"}
 `;
 export {
-  N as VariableTriggerArea,
-  T as variableToken
+  z as VariableTriggerArea,
+  A as variableToken
 };
 //# sourceMappingURL=VariableTriggerArea.js.map

package/dist/esm/components/agent-builder/components/VariableTriggerArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VariableTriggerArea.js","sources":["../../../../../src/components/agent-builder/components/VariableTriggerArea.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { VariablePicker } from '../../variable-picker-v3';\nimport { PickerType } from '../../variable-picker-v3/model';\nimport type {\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport { variableTokenName } from '../utils/mentionSerialization';\n\n/** The persisted form of a picked variable (`{{variable:<name>}}`). /\nexport const variableToken = (variable: VariableV3): string =>\n\t`{{variable:${variableTokenName(variable.actualValue)}}}`;\n\n/\n Boundary test for the `@` trigger: an `@` typed at the start of the field or\n * after a separator opens the picker. The separator set covers URL and JSON\n * delimiters too (`https://@`, `Bearer=@`, `\"@`, `[@`) — an email address's `@`\n * always follows a letter / digit / dot, so `john@acme.com` still types\n * through untouched. Returns the caret index for input / textarea targets\n * (where the caller can splice the token in), null for contenteditable ones.\n /\nconst BOUNDARY = /[\\s,;:/?&=(){}[\\]\"'<>]/;\n\nconst triggerContext = (\n\ttarget: EventTarget \| null,\n): { ok: boolean; caret: number \| null; textBefore: string } => {\n\tif (\n\t\ttarget instanceof HTMLInputElement \|\|\n\t\ttarget instanceof HTMLTextAreaElement\n\t) {\n\t\tconst caret = target.selectionStart ?? target.value.length;\n\t\tconst prev = caret === 0 ? ' ' : target.value[caret - 1] ?? ' ';\n\t\treturn {\n\t\t\tok: BOUNDARY.test(prev),\n\t\t\tcaret,\n\t\t\ttextBefore: target.value.slice(0, caret),\n\t\t};\n\t}\n\t// Rich editor (ProseMirror contenteditable): read the character before the\n\t// selection. `textBefore` is only the current text-node fragment (fine for\n\t// the token transforms, which just look at nearby characters).\n\tconst sel = window.getSelection();\n\tconst text = sel?.anchorNode?.textContent ?? '';\n\tconst offset = sel?.anchorOffset ?? 0;\n\tconst prev = offset === 0 ? ' ' : text[offset - 1] ?? ' ';\n\treturn {\n\t\tok: BOUNDARY.test(prev),\n\t\tcaret: null,\n\t\ttextBefore: text.slice(0, offset),\n\t};\n};\n\ninterface VariableTriggerAreaProps {\n\t/* Variable catalog. Absent / empty → the wrapper is inert (children only). /\n\tvariablesData?: VariableListInterfaceV3[];\n\t/\n\t Insert `token` into the wrapped field. `caret` is the character index the\n\t * `@` was typed at (input / textarea targets — splice the token in there);\n\t * null for rich-editor targets (insert at the editor's own cursor).\n\t /\n\tonInsert: (token: string, caret: number \| null) => void;\n\t/\n\t Rewrite the token before it's handed to `onInsert` — e.g. the Rest API\n\t * JSON editors wrap it in quotes. `textBefore` is the text preceding the\n\t * `@` (for input targets the whole value up to the caret; for rich-editor\n\t * targets just the current text-node fragment).\n\t /\n\ttransformToken?: (token: string, ctx: { textBefore: string }) => string;\n\tchildren: React.ReactNode;\n}\n\n/\n Wraps any plain field (input / textarea / chips entry / BikEditor) and opens\n * the shared {@link VariablePicker} as a floating panel when `@` is typed at a\n * word boundary. The `@` keystroke itself is swallowed (never reaches the\n * field); picking a variable calls `onInsert` with the `{{variable:<name>}}`\n * token, and Escape / click-outside / the panel's ✕ just closes the panel.\n \n Purely presentational wrapper — it renders a `position: relative` block, so\n * the wrapped field must be happy inside a plain block container.\n */\nexport const VariableTriggerArea: React.FC<VariableTriggerAreaProps> = ({\n\tvariablesData,\n\tonInsert,\n\ttransformToken,\n\tchildren,\n}) => {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\t// Non-null while the panel is open: where to put the token when picked, and\n\t// which way the panel flips to stay on screen (above when there's no room\n\t// below, right-aligned when the field sits too close to the right edge —\n\t// e.g. header-value inputs in the Rest API drawer).\n\tconst [trigger, setTrigger] = useState<{\n\t\tcaret: number \| null;\n\t\ttextBefore: string;\n\t\tabove: boolean;\n\t\talignRight: boolean;\n\t} \| null>(null);\n\n\tconst enabled = (variablesData?.length ?? 0) > 0;\n\n\tconst onKeyDownCapture = useCallback(\n\t\t(e: React.KeyboardEvent) => {\n\t\t\tif (!enabled \|\| e.key !== '@') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst ctx = triggerContext(e.target);\n\t\t\tif (!ctx.ok) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Swallow the `@` so the field's value stays untouched while picking.\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tconst rect = containerRef.current?.getBoundingClientRect();\n\t\t\tconst above = !!rect && window.innerHeight - rect.bottom < 340;\n\t\t\t// Panel is ~344px wide, anchored to the field's left edge — flip to the\n\t\t\t// right edge when that would spill past the viewport (avoids the drawer\n\t\t\t// growing a horizontal scrollbar).\n\t\t\tconst alignRight = !!rect && window.innerWidth - rect.left < 360;\n\t\t\tsetTrigger({\n\t\t\t\tcaret: ctx.caret,\n\t\t\t\ttextBefore: ctx.textBefore,\n\t\t\t\tabove,\n\t\t\t\talignRight,\n\t\t\t});\n\t\t},\n\t\t[enabled],\n\t);\n\n\t// Escape / click-outside dismiss, active only while open.\n\tuseEffect(() => {\n\t\tif (!trigger) {\n\t\t\treturn;\n\t\t}\n\t\tconst onKey = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\te.stopPropagation();\n\t\t\t\tsetTrigger(null);\n\t\t\t}\n\t\t};\n\t\tconst onDown = (e: MouseEvent) => {\n\t\t\tif (!containerRef.current?.contains(e.target as Node)) {\n\t\t\t\tsetTrigger(null);\n\t\t\t}\n\t\t};\n\t\t// Capture phase so an Escape meant for the panel never also closes the\n\t\t// drawer underneath.\n\t\tdocument.addEventListener('keydown', onKey, true);\n\t\tdocument.addEventListener('mousedown', onDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', onKey, true);\n\t\t\tdocument.removeEventListener('mousedown', onDown);\n\t\t};\n\t}, [trigger]);\n\n\treturn (\n\t\t<TriggerWrap ref={containerRef} onKeyDownCapture={onKeyDownCapture}>\n\t\t\t{children}\n\t\t\t{trigger && (\n\t\t\t\t<FloaterBox\n\t\t\t\t\t$above={trigger.above}\n\t\t\t\t\t$right={trigger.alignRight}\n\t\t\t\t\tdata-test=\"variable-trigger-panel\"\n\t\t\t\t>\n\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\ttype={PickerType.FLOATER}\n\t\t\t\t\t\tdata={variablesData ?? []}\n\t\t\t\t\t\tshowRecommendedBar={false}\n\t\t\t\t\t\tonClose={() => setTrigger(null)}\n\t\t\t\t\t\tonSelect={(variable: VariableV3) => {\n\t\t\t\t\t\t\tsetTrigger(null);\n\t\t\t\t\t\t\tconst raw = variableToken(variable);\n\t\t\t\t\t\t\tconst token = transformToken\n\t\t\t\t\t\t\t\t? transformToken(raw, { textBefore: trigger.textBefore })\n\t\t\t\t\t\t\t\t: raw;\n\t\t\t\t\t\t\tonInsert(token, trigger.caret);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</FloaterBox>\n\t\t\t)}\n\t\t</TriggerWrap>\n\t);\n};\n\nconst TriggerWrap = styled.div`\n\tposition: relative;\n`;\n\n// Floats under (or over) the wrapped field; VariablePicker brings its own card\n// styling. High z-index: these fields live inside side-modal drawers.\nconst FloaterBox = styled.div<{ $above: boolean; $right: boolean }>`\n\tposition: absolute;\n\tz-index: 1000;\n\t${(p) => (p.$right ? 'right: 0;' : 'left: 0;')}\n\t${(p) => (p.$above ? 'bottom: calc(100% + 4px);' : 'top: calc(100% + 4px);')}\n`;\n"],"names":["variableToken","variable","variableTokenName","BOUNDARY","triggerContext","target","caret","prev","sel","text","offset","VariableTriggerArea","variablesData","onInsert","transformToken","children","containerRef","useRef","trigger","setTrigger","useState","enabled","onKeyDownCapture","useCallback","e","ctx","rect","above","alignRight","useEffect","onKey","onDown","jsxs","TriggerWrap","jsx","FloaterBox","VariablePicker","PickerType","raw","token","styled","p"],"mappings":"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"}
1	+ {"version":3,"file":"VariableTriggerArea.js","sources":["../../../../../src/components/agent-builder/components/VariableTriggerArea.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { VariablePicker } from '../../variable-picker-v3';\nimport { PickerType } from '../../variable-picker-v3/model';\nimport type {\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport { variableTokenName } from '../utils/mentionSerialization';\nimport { AddDataPill } from './AddDataPill';\n\n/** The persisted form of a picked variable (`{{variable:<name>}}`). /\nexport const variableToken = (variable: VariableV3): string =>\n\t`{{variable:${variableTokenName(variable.actualValue)}}}`;\n\n/\n Boundary test for the `@` trigger: an `@` typed at the start of the field or\n * after a separator opens the picker. The separator set covers URL and JSON\n * delimiters too (`https://@`, `Bearer=@`, `\"@`, `[@`) — an email address's `@`\n * always follows a letter / digit / dot, so `john@acme.com` still types\n * through untouched. Returns the caret index for input / textarea targets\n * (where the caller can splice the token in), null for contenteditable ones.\n /\nconst BOUNDARY = /[\\s,;:/?&=(){}[\\]\"'<>]/;\n\nconst triggerContext = (\n\ttarget: EventTarget \| null,\n): { ok: boolean; caret: number \| null; textBefore: string } => {\n\tif (\n\t\ttarget instanceof HTMLInputElement \|\|\n\t\ttarget instanceof HTMLTextAreaElement\n\t) {\n\t\tconst caret = target.selectionStart ?? target.value.length;\n\t\tconst prev = caret === 0 ? ' ' : target.value[caret - 1] ?? ' ';\n\t\treturn {\n\t\t\tok: BOUNDARY.test(prev),\n\t\t\tcaret,\n\t\t\ttextBefore: target.value.slice(0, caret),\n\t\t};\n\t}\n\t// Rich editor (ProseMirror contenteditable): read the character before the\n\t// selection. `textBefore` is only the current text-node fragment (fine for\n\t// the token transforms, which just look at nearby characters).\n\tconst sel = window.getSelection();\n\tconst text = sel?.anchorNode?.textContent ?? '';\n\tconst offset = sel?.anchorOffset ?? 0;\n\tconst prev = offset === 0 ? ' ' : text[offset - 1] ?? ' ';\n\treturn {\n\t\tok: BOUNDARY.test(prev),\n\t\tcaret: null,\n\t\ttextBefore: text.slice(0, offset),\n\t};\n};\n\ninterface VariableTriggerAreaProps {\n\t/* Variable catalog. Absent / empty → the wrapper is inert (children only). /\n\tvariablesData?: VariableListInterfaceV3[];\n\t/\n\t Insert `token` into the wrapped field. `caret` is the character index the\n\t * `@` was typed at (input / textarea targets — splice the token in there);\n\t * null for rich-editor targets (insert at the editor's own cursor).\n\t /\n\tonInsert: (token: string, caret: number \| null) => void;\n\t/\n\t Rewrite the token before it's handed to `onInsert` — e.g. the Rest API\n\t * JSON editors wrap it in quotes. `textBefore` is the text preceding the\n\t * `@` (for input targets the whole value up to the caret; for rich-editor\n\t * targets just the current text-node fragment).\n\t /\n\ttransformToken?: (token: string, ctx: { textBefore: string }) => string;\n\t/\n\t Show the floating \"+ Add data\" pill while the wrapped field is focused.\n\t * Clicking it opens this same variable panel at the field's caret — the\n\t * button equivalent of typing `@`.\n\t /\n\taddDataButton?: boolean;\n\tchildren: React.ReactNode;\n}\n\n/\n Wraps any plain field (input / textarea / chips entry / BikEditor) and opens\n * the shared {@link VariablePicker} as a floating panel when `@` is typed at a\n * word boundary. The `@` keystroke itself is swallowed (never reaches the\n * field); picking a variable calls `onInsert` with the `{{variable:<name>}}`\n * token, and Escape / click-outside / the panel's ✕ just closes the panel.\n \n Purely presentational wrapper — it renders a `position: relative` block, so\n * the wrapped field must be happy inside a plain block container.\n */\nexport const VariableTriggerArea: React.FC<VariableTriggerAreaProps> = ({\n\tvariablesData,\n\tonInsert,\n\ttransformToken,\n\taddDataButton,\n\tchildren,\n}) => {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\t// Whether the wrapped field (any focusable inside) currently has focus, and\n\t// the element that had it — the pill inserts at that element's caret.\n\tconst [fieldFocused, setFieldFocused] = useState(false);\n\tconst lastFocusedRef = useRef<EventTarget \| null>(null);\n\t// Non-null while the panel is open: where to put the token when picked, and\n\t// which way the panel flips to stay on screen (above when there's no room\n\t// below, right-aligned when the field sits too close to the right edge —\n\t// e.g. header-value inputs in the Rest API drawer).\n\tconst [trigger, setTrigger] = useState<{\n\t\tcaret: number \| null;\n\t\ttextBefore: string;\n\t\tabove: boolean;\n\t\talignRight: boolean;\n\t} \| null>(null);\n\n\tconst enabled = (variablesData?.length ?? 0) > 0;\n\n\t// Panel is ~344px wide / ~340px tall, anchored to the field's left edge —\n\t// flip above / right-align when it would spill past the viewport (avoids\n\t// the drawer growing scrollbars).\n\tconst placement = () => {\n\t\tconst rect = containerRef.current?.getBoundingClientRect();\n\t\treturn {\n\t\t\tabove: !!rect && window.innerHeight - rect.bottom < 340,\n\t\t\talignRight: !!rect && window.innerWidth - rect.left < 360,\n\t\t};\n\t};\n\n\tconst onKeyDownCapture = useCallback(\n\t\t(e: React.KeyboardEvent) => {\n\t\t\tif (!enabled \|\| e.key !== '@') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst ctx = triggerContext(e.target);\n\t\t\tif (!ctx.ok) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Swallow the `@` so the field's value stays untouched while picking.\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tsetTrigger({\n\t\t\t\tcaret: ctx.caret,\n\t\t\t\ttextBefore: ctx.textBefore,\n\t\t\t\t...placement(),\n\t\t\t});\n\t\t},\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[enabled],\n\t);\n\n\t// The pill's click — same panel, anchored at the focused field's caret (no\n\t// boundary rule: an explicit button click is always intentional).\n\tconst openFromButton = () => {\n\t\tconst ctx = triggerContext(lastFocusedRef.current);\n\t\tsetTrigger({\n\t\t\tcaret: ctx.caret,\n\t\t\ttextBefore: ctx.textBefore,\n\t\t\t...placement(),\n\t\t});\n\t};\n\n\t// Escape / click-outside dismiss, active only while open.\n\tuseEffect(() => {\n\t\tif (!trigger) {\n\t\t\treturn;\n\t\t}\n\t\tconst onKey = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\te.stopPropagation();\n\t\t\t\tsetTrigger(null);\n\t\t\t}\n\t\t};\n\t\tconst onDown = (e: MouseEvent) => {\n\t\t\tif (!containerRef.current?.contains(e.target as Node)) {\n\t\t\t\tsetTrigger(null);\n\t\t\t}\n\t\t};\n\t\t// Capture phase so an Escape meant for the panel never also closes the\n\t\t// drawer underneath.\n\t\tdocument.addEventListener('keydown', onKey, true);\n\t\tdocument.addEventListener('mousedown', onDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', onKey, true);\n\t\t\tdocument.removeEventListener('mousedown', onDown);\n\t\t};\n\t}, [trigger]);\n\n\treturn (\n\t\t<TriggerWrap\n\t\t\tref={containerRef}\n\t\t\tonKeyDownCapture={onKeyDownCapture}\n\t\t\t// React's focus/blur bubble — this tracks any focusable child (the\n\t\t\t// input, a chips entry, the ProseMirror contenteditable).\n\t\t\tonFocus={(e) => {\n\t\t\t\t// Focus landing inside the floating panel (its search box) is not\n\t\t\t\t// the field — inserting at \"its caret\" would target the wrong input.\n\t\t\t\tif (\n\t\t\t\t\t(e.target as HTMLElement).closest?.(\n\t\t\t\t\t\t'[data-test=\"variable-trigger-panel\"]',\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlastFocusedRef.current = e.target;\n\t\t\t\tsetFieldFocused(true);\n\t\t\t}}\n\t\t\tonBlur={() => setFieldFocused(false)}\n\t\t>\n\t\t\t{children}\n\t\t\t{addDataButton && enabled && (fieldFocused \|\| trigger) && (\n\t\t\t\t<AddDataPill onOpen={openFromButton} />\n\t\t\t)}\n\t\t\t{trigger && (\n\t\t\t\t<FloaterBox\n\t\t\t\t\t$above={trigger.above}\n\t\t\t\t\t$right={trigger.alignRight}\n\t\t\t\t\tdata-test=\"variable-trigger-panel\"\n\t\t\t\t>\n\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\ttype={PickerType.FLOATER}\n\t\t\t\t\t\tdata={variablesData ?? []}\n\t\t\t\t\t\tshowRecommendedBar={false}\n\t\t\t\t\t\tonClose={() => setTrigger(null)}\n\t\t\t\t\t\tonSelect={(variable: VariableV3) => {\n\t\t\t\t\t\t\tsetTrigger(null);\n\t\t\t\t\t\t\tconst raw = variableToken(variable);\n\t\t\t\t\t\t\tconst token = transformToken\n\t\t\t\t\t\t\t\t? transformToken(raw, { textBefore: trigger.textBefore })\n\t\t\t\t\t\t\t\t: raw;\n\t\t\t\t\t\t\tonInsert(token, trigger.caret);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</FloaterBox>\n\t\t\t)}\n\t\t</TriggerWrap>\n\t);\n};\n\nconst TriggerWrap = styled.div`\n\tposition: relative;\n`;\n\n// Floats under (or over) the wrapped field. The picker is EMBEDDED (no close\n// cross — Escape / click-outside dismiss instead, matching the Instructions /\n// Guardrails @ menu), so this box provides the card chrome the mention picker\n// normally would. High z-index: these fields live inside side-modal drawers.\nconst FloaterBox = styled.div<{ $above: boolean; $right: boolean }>`\n\tposition: absolute;\n\tz-index: 1000;\n\twidth: 344px;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n\toverflow: hidden;\n\t${(p) => (p.$right ? 'right: 0;' : 'left: 0;')}\n\t${(p) => (p.$above ? 'bottom: calc(100% + 4px);' : 'top: calc(100% + 4px);')}\n`;\n"],"names":["variableToken","variable","variableTokenName","BOUNDARY","triggerContext","target","caret","prev","sel","text","offset","VariableTriggerArea","variablesData","onInsert","transformToken","addDataButton","children","containerRef","useRef","fieldFocused","setFieldFocused","useState","lastFocusedRef","trigger","setTrigger","enabled","placement","rect","onKeyDownCapture","useCallback","ctx","openFromButton","useEffect","onKey","e","onDown","jsxs","TriggerWrap","jsx","AddDataPill","FloaterBox","VariablePicker","PickerType","raw","token","styled","COLORS","p"],"mappings":";;;;;;;;AAaO,MAAMA,IAAgB,CAACC,MAC7B,cAAcC,EAAkBD,EAAS,WAAW,CAAC,MAUhDE,IAAW,0BAEXC,IAAiB,CACtBC,MAC+D;AAC/D,MACCA,aAAkB,oBAClBA,aAAkB,qBACjB;AACD,UAAMC,IAAQD,EAAO,kBAAkBA,EAAO,MAAM,QAC9CE,IAAOD,MAAU,IAAI,MAAMD,EAAO,MAAMC,IAAQ,CAAC,KAAK;AAC5D,WAAO;AAAA,MACN,IAAIH,EAAS,KAAKI,CAAI;AAAA,MACtB,OAAAD;AAAA,MACA,YAAYD,EAAO,MAAM,MAAM,GAAGC,CAAK;AAAA,IAAA;AAAA,EAEzC;AAIA,QAAME,IAAM,OAAO,aAAA,GACbC,IAAOD,GAAK,YAAY,eAAe,IACvCE,IAASF,GAAK,gBAAgB,GAC9BD,IAAOG,MAAW,IAAI,MAAMD,EAAKC,IAAS,CAAC,KAAK;AACtD,SAAO;AAAA,IACN,IAAIP,EAAS,KAAKI,CAAI;AAAA,IACtB,OAAO;AAAA,IACP,YAAYE,EAAK,MAAM,GAAGC,CAAM;AAAA,EAAA;AAElC,GAqCaC,IAA0D,CAAC;AAAA,EACvE,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACD,MAAM;AACL,QAAMC,IAAeC,EAAuB,IAAI,GAG1C,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChDC,IAAiBJ,EAA2B,IAAI,GAKhD,CAACK,GAASC,CAAU,IAAIH,EAKpB,IAAI,GAERI,KAAWb,GAAe,UAAU,KAAK,GAKzCc,IAAY,MAAM;AACvB,UAAMC,IAAOV,EAAa,SAAS,sBAAA;AACnC,WAAO;AAAA,MACN,OAAO,CAAC,CAACU,KAAQ,OAAO,cAAcA,EAAK,SAAS;AAAA,MACpD,YAAY,CAAC,CAACA,KAAQ,OAAO,aAAaA,EAAK,OAAO;AAAA,IAAA;AAAA,EAExD,GAEMC,IAAmBC;AAAA,IACxB,CAAC,MAA2B;AAC3B,UAAI,CAACJ,KAAW,EAAE,QAAQ;AACzB;AAED,YAAMK,IAAM1B,EAAe,EAAE,MAAM;AACnC,MAAK0B,EAAI,OAIT,EAAE,eAAA,GACF,EAAE,gBAAA,GACFN,EAAW;AAAA,QACV,OAAOM,EAAI;AAAA,QACX,YAAYA,EAAI;AAAA,QAChB,GAAGJ,EAAA;AAAA,MAAU,CACb;AAAA,IACF;AAAA;AAAA,IAEA,CAACD,CAAO;AAAA,EAAA,GAKHM,IAAiB,MAAM;AAC5B,UAAMD,IAAM1B,EAAekB,EAAe,OAAO;AACjD,IAAAE,EAAW;AAAA,MACV,OAAOM,EAAI;AAAA,MACX,YAAYA,EAAI;AAAA,MAChB,GAAGJ,EAAA;AAAA,IAAU,CACb;AAAA,EACF;AAGA,SAAAM,EAAU,MAAM;AACf,QAAI,CAACT;AACJ;AAED,UAAMU,IAAQ,CAACC,MAAqB;AACnC,MAAIA,EAAE,QAAQ,aACbA,EAAE,gBAAA,GACFV,EAAW,IAAI;AAAA,IAEjB,GACMW,IAAS,CAACD,MAAkB;AACjC,MAAKjB,EAAa,SAAS,SAASiB,EAAE,MAAc,KACnDV,EAAW,IAAI;AAAA,IAEjB;AAGA,oBAAS,iBAAiB,WAAWS,GAAO,EAAI,GAChD,SAAS,iBAAiB,aAAaE,CAAM,GACtC,MAAM;AACZ,eAAS,oBAAoB,WAAWF,GAAO,EAAI,GACnD,SAAS,oBAAoB,aAAaE,CAAM;AAAA,IACjD;AAAA,EACD,GAAG,CAACZ,CAAO,CAAC,GAGX,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAKpB;AAAA,MACL,kBAAAW;AAAA,MAGA,SAAS,CAAC,MAAM;AAGf,QACE,EAAE,OAAuB;AAAA,UACzB;AAAA,QAAA,MAKFN,EAAe,UAAU,EAAE,QAC3BF,EAAgB,EAAI;AAAA,MACrB;AAAA,MACA,QAAQ,MAAMA,EAAgB,EAAK;AAAA,MAElC,UAAA;AAAA,QAAAJ;AAAA,QACAD,KAAiBU,MAAYN,KAAgBI,MAC7C,gBAAAe,EAACC,GAAA,EAAY,QAAQR,GAAgB;AAAA,QAErCR,KACA,gBAAAe;AAAA,UAACE;AAAA,UAAA;AAAA,YACA,QAAQjB,EAAQ;AAAA,YAChB,QAAQA,EAAQ;AAAA,YAChB,aAAU;AAAA,YAEV,UAAA,gBAAAe;AAAA,cAACG;AAAA,cAAA;AAAA,gBACA,MAAMC,EAAW;AAAA,gBACjB,MAAM9B,KAAiB,CAAA;AAAA,gBACvB,oBAAoB;AAAA,gBACpB,SAAS,MAAMY,EAAW,IAAI;AAAA,gBAC9B,UAAU,CAACvB,MAAyB;AACnC,kBAAAuB,EAAW,IAAI;AACf,wBAAMmB,IAAM3C,EAAcC,CAAQ,GAC5B2C,IAAQ9B,IACXA,EAAe6B,GAAK,EAAE,YAAYpB,EAAQ,WAAA,CAAY,IACtDoB;AACH,kBAAA9B,EAAS+B,GAAOrB,EAAQ,KAAK;AAAA,gBAC9B;AAAA,cAAA;AAAA,YAAA;AAAA,UACD;AAAA,QAAA;AAAA,MACD;AAAA,IAAA;AAAA,EAAA;AAIJ,GAEMc,IAAcQ,EAAO;AAAA;AAAA,GAQrBL,IAAaK,EAAO;AAAA;AAAA;AAAA;AAAA,eAIXC,EAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,GAIvC,CAACC,MAAOA,EAAE,SAAS,cAAc,UAAW;AAAA,GAC5C,CAACA,MAAOA,EAAE,SAAS,8BAA8B,wBAAyB;AAAA;"}

package/dist/esm/components/agent-builder/utils/mentionSerialization.js CHANGED Viewed

@@ -24,12 +24,18 @@ const b = (e, t = "Manifest") => e ? m[e] ?? e : t, E = (e) => {
   )
 ], g = (e) => e.replace(/^\{\{|\}\}$/g, ""), I = (e = []) => {
   const t = [], n = (a) => {
-    const i = a.actualValue;
-    i && t.push({
-      id: g(i),
-      label: `Variable: ${a.displayName}`,
-      meta: { kind: "variable", plainLabel: a.displayName }
-    }), Object.values(a.variables ?? {}).forEach(n);
+    const o = a.actualValue;
+    if (o) {
+      const i = g(o);
+      t.push({
+        id: i,
+        // Chip text is the raw token — designers want variables to read as
+        // {{a.b.c}} (styled purple by the editor), not a labelled chip.
+        label: `{{${i}}}`,
+        meta: { kind: "variable", plainLabel: a.displayName }
+      });
+    }
+    Object.values(a.variables ?? {}).forEach(n);
   };
   return e.forEach(n), t;
 }, k = (e) => e.tool_key === "send_slack_message" ? String(e.params.channelId?.value ?? "").trim() || "Send Slack message" : String(e.params.sendTo?.value ?? "").split(",").map((t) => t.trim()).filter(Boolean)[0] || "Send Email", $ = (e) => e.name || "Rest API", f = (e) => {
@@ -49,7 +55,7 @@ const b = (e, t = "Manifest") => e ? m[e] ?? e : t, E = (e) => {
 }, M = (e = [], t = []) => [
   ...t.map(f),
   ...e.map(S)
-], o = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), s = (e) => o(e).replace(/"/g, "&quot;"), d = (e, t, n) => `<span data-type="mentionAgent" class="bik-mention bik-mention--agent" data-id="${s(e)}" data-label="${s(t)}" data-kind="${s(n)}">${o(t)}</span>`, y = (e, t, n) => d(e, t, n), T = (e) => {
+], l = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), s = (e) => l(e).replace(/"/g, "&quot;"), d = (e, t, n) => `<span data-type="mentionAgent" class="bik-mention bik-mention--agent" data-id="${s(e)}" data-label="${s(t)}" data-kind="${s(n)}">${l(t)}</span>`, y = (e, t, n) => d(e, t, n), T = (e) => {
   const t = /* @__PURE__ */ new Map();
   for (const n of e) {
     const a = n.meta;
@@ -59,18 +65,18 @@ const b = (e, t = "Manifest") => e ? m[e] ?? e : t, E = (e) => {
 }, c = /\{\{((?:tool|subagent|variable):[^{}]+)\}\}/g, v = (e, t) => {
   let n = "", a = 0;
   c.lastIndex = 0;
-  let i;
-  for (; (i = c.exec(e)) !== null; ) {
-    n += o(e.slice(a, i.index));
-    const l = t.get(i[1]);
-    if (l) {
-      const p = l.meta.kind;
-      n += d(String(l.id), l.label, p);
+  let o;
+  for (; (o = c.exec(e)) !== null; ) {
+    n += l(e.slice(a, o.index));
+    const i = t.get(o[1]);
+    if (i) {
+      const p = i.meta.kind;
+      n += d(String(i.id), i.label, p);
     } else
-      n += o(i[0]);
+      n += l(o[0]);
     a = c.lastIndex;
   }
-  return n += o(e.slice(a)), n.replace(/\n/g, "<br>");
+  return n += l(e.slice(a)), n.replace(/\n/g, "<br>");
 }, A = (e, t = []) => {
   if (!e)
     return "";
@@ -101,7 +107,7 @@ const b = (e, t = "Manifest") => e ? m[e] ?? e : t, E = (e) => {
     case "bulletList": {
       const n = e.type === "orderedList";
       return (e.content ?? []).map(
-        (a, i) => `${n ? `${i + 1}.` : "-"} ${u(
+        (a, o) => `${n ? `${o + 1}.` : "-"} ${u(
           a,
           t
         ).replace(/\n+$/, "")}`
@@ -110,12 +116,12 @@ const b = (e, t = "Manifest") => e ? m[e] ?? e : t, E = (e) => {
 `;
     }
     default: {
-      const n = (e.content ?? []).map((i) => u(i, t)).join("");
+      const n = (e.content ?? []).map((o) => u(o, t)).join("");
       return ["paragraph", "heading", "listItem", "blockquote"].includes(e.type) ? `${n}
 ` : n;
     }
   }
-}, N = (e, t) => {
+}, B = (e, t) => {
   if (!e)
     return "";
   const n = new Set(t.map((a) => a.tool_id));
@@ -133,7 +139,7 @@ export {
   I as buildVariableMentionItems,
   S as configToolMentionItem,
   k as configToolName,
-  N as editorDocToInstructions,
+  B as editorDocToInstructions,
   A as instructionsToEditorHtml,
   f as restApiMentionItem,
   $ as restApiToolName,