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

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

@@ -1 +0,0 @@
-{"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 { AddDataPill } from '../../add-variableV2/AddDataPill';\nimport type {\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport { variableTokenName } from '../utils/mentionSerialization';\nimport { MentionPicker } from './MentionPicker';\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 */\n// Opening delimiters trigger; closing ones (`}` `)` `]` `>`) deliberately do\n// NOT — typing a literal `@` right after an inserted `{{token}}` (e.g.\n// `{{store_name}}@acme.com`) must stay literal.\nconst BOUNDARY = /[\\s,;:/?&=({[<\"']/;\n// The subset the editor's own `@` mention trigger does NOT handle (it only\n// fires after whitespace / at the start) — used by `skipNativeBoundaries`\n// fields so the two triggers never fire for the same keystroke.\nconst NON_NATIVE_BOUNDARY = /[,;:/?&=({[<\"']/;\n\nconst triggerContext = (\n\ttarget: EventTarget | null,\n\tboundary: RegExp,\n\tskipStart: boolean,\n): { ok: boolean; caret: number | null } => {\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 atStart = caret === 0;\n\t\tconst prev = atStart ? ' ' : target.value[caret - 1] ?? ' ';\n\t\treturn { ok: atStart ? !skipStart : boundary.test(prev), caret };\n\t}\n\t// Rich editor (ProseMirror contenteditable): read the character before the\n\t// selection.\n\tconst sel = window.getSelection();\n\tconst text = sel?.anchorNode?.textContent ?? '';\n\tconst offset = sel?.anchorOffset ?? 0;\n\tconst atStart = offset === 0;\n\tconst prev = atStart ? ' ' : text[offset - 1] ?? ' ';\n\treturn { ok: atStart ? !skipStart : boundary.test(prev), caret: null };\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 * 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\t/**\n\t * The wrapped field is a BikEditor whose OWN `@` mention trigger already\n\t * fires after whitespace / at the start — this wrapper then only handles\n\t * the delimiter boundaries the native trigger misses (`https://@`, `\"@`…),\n\t * so the two never open a panel for the same keystroke.\n\t */\n\tskipNativeBoundaries?: boolean;\n\t/**\n\t * Observes the panel's open state. Fields that commit on blur (the email\n\t * chips entry) use this to hold off while focus is bouncing through the\n\t * panel — blur-time focus targets are unreliable mid-transition.\n\t */\n\tonOpenChange?: (open: boolean) => void;\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\taddDataButton,\n\tskipNativeBoundaries,\n\tonOpenChange,\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\tabove: boolean;\n\t\talignRight: boolean;\n\t} | null>(null);\n\n\tconst enabled = (variablesData?.length ?? 0) > 0;\n\n\tconst openPanel = (t: NonNullable<typeof trigger>) => {\n\t\tsetTrigger(t);\n\t\tonOpenChange?.(true);\n\t};\n\tconst closePanel = () => {\n\t\tsetTrigger(null);\n\t\tonOpenChange?.(false);\n\t};\n\n\t// Panel is ~344px wide / ~385px tall (the MentionPicker card in its\n\t// variables view, plus a little slack), 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 < 385,\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(\n\t\t\t\te.target,\n\t\t\t\tskipNativeBoundaries ? NON_NATIVE_BOUNDARY : BOUNDARY,\n\t\t\t\t!!skipNativeBoundaries,\n\t\t\t);\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\topenPanel({ caret: ctx.caret, ...placement() });\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, BOUNDARY, false);\n\t\topenPanel({ caret: ctx.caret, ...placement() });\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\tclosePanel();\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\tclosePanel();\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 label=\"Add variable\" 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\t// Keep the field focused while clicking rows (a blur mid-pick\n\t\t\t\t\t// would e.g. commit a half-typed email chip). The panel's own\n\t\t\t\t\t// inputs (search) still take focus normally.\n\t\t\t\t\tonMouseDown={(e) => {\n\t\t\t\t\t\tconst t = e.target as HTMLElement;\n\t\t\t\t\t\tif (!t.closest('input')) {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{/* The EXACT panel the Instructions / Guardrails @ opens: with no\n\t\t\t\t\t    tools / sub-agents, Variables is its sole category, so it\n\t\t\t\t\t    renders the \"Variables\" header + variable list directly. */}\n\t\t\t\t\t<MentionPicker\n\t\t\t\t\t\titems={[]}\n\t\t\t\t\t\tquery=\"\"\n\t\t\t\t\t\tactiveIndex={-1}\n\t\t\t\t\t\tonSelect={() => undefined}\n\t\t\t\t\t\tonClose={closePanel}\n\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\tonSelectVariable={(variable: VariableV3) => {\n\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t// Re-read the caret at PICK time: the user may have clicked\n\t\t\t\t\t\t\t// elsewhere in the field since the `@` (the panel stays open\n\t\t\t\t\t\t\t// for clicks inside the wrapper), and an input keeps its\n\t\t\t\t\t\t\t// selection while unfocused — trigger.caret is the fallback.\n\t\t\t\t\t\t\tconst el = lastFocusedRef.current;\n\t\t\t\t\t\t\tconst caret =\n\t\t\t\t\t\t\t\tel instanceof HTMLInputElement ||\n\t\t\t\t\t\t\t\tel instanceof HTMLTextAreaElement\n\t\t\t\t\t\t\t\t\t? el.selectionStart ?? trigger.caret\n\t\t\t\t\t\t\t\t\t: trigger.caret;\n\t\t\t\t\t\t\tonInsert(variableToken(variable), 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 MentionPicker inside brings\n// its own card chrome (same as the Instructions / Guardrails @ menu). High\n// 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\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","NON_NATIVE_BOUNDARY","triggerContext","target","boundary","skipStart","caret","atStart","prev","sel","text","offset","VariableTriggerArea","variablesData","onInsert","addDataButton","skipNativeBoundaries","onOpenChange","children","containerRef","useRef","fieldFocused","setFieldFocused","useState","lastFocusedRef","trigger","setTrigger","enabled","openPanel","closePanel","placement","rect","onKeyDownCapture","useCallback","e","ctx","openFromButton","useEffect","onKey","onDown","jsxs","TriggerWrap","AddDataPill","jsx","FloaterBox","MentionPicker","el","styled","p"],"mappings":"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"}