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

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

@@ -1,83 +1,83 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import V from "../../../assets/icons/delete.svg.js";
-import K from "../../../assets/icons/plus.svg.js";
-import { useState as s, useRef as $ } from "react";
-import R from "styled-components";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import K from "../../../assets/icons/delete.svg.js";
+import Q from "../../../assets/icons/plus.svg.js";
+import { useState as l, useRef as $ } from "react";
+import b from "styled-components";
 import { TitleSmall as u } from "../../TypographyStyle.js";
-import { COLORS as l } from "../../../constants/Theme.js";
+import { COLORS as i } from "../../../constants/Theme.js";
 import { FieldBlock as p } from "../AgentBuilder.styled.js";
-import { AGENT_CHAR_LIMITS as Q } from "../constants/charLimits.js";
-import { DRAWER_BODY_STYLE as X, DRAWER_HEADER_STYLE as Z, DrawerHeaderText as ee } from "./DrawerHeaderText.js";
-import { ToolInstructionsField as te } from "./ToolInstructionsField.js";
+import { AGENT_CHAR_LIMITS as X } from "../constants/charLimits.js";
+import { DRAWER_BODY_STYLE as Z, DRAWER_HEADER_STYLE as ee, DrawerHeaderText as te } from "./DrawerHeaderText.js";
+import { ToolInstructionsField as re } from "./ToolInstructionsField.js";
 import { VariableTriggerArea as h } from "./VariableTriggerArea.js";
-import { SideModal as re } from "../../side-modal/SideModal.js";
+import { SideModal as oe } from "../../side-modal/SideModal.js";
 import { Input as f } from "../../input/Input.js";
-import { Dropdown as oe } from "../../dropdown/Dropdown.js";
-import { unwrapDropdownValue as ne } from "../../dropdown/utils.js";
-import { Button as ae } from "../../button/Button.js";
-import { BikEditor as D } from "../../../editor/BikEditor.js";
-const se = ["GET", "POST", "PUT", "PATCH", "DELETE"], le = se.map((d) => ({
-  label: d,
-  value: d
-})), ke = ({
-  onClose: d,
-  onSave: _,
-  initial: a,
-  onImprove: q,
-  charLimits: b = Q,
-  zIndex: N,
-  existingNames: j = [],
+import { Dropdown as ne } from "../../dropdown/Dropdown.js";
+import { unwrapDropdownValue as ae } from "../../dropdown/utils.js";
+import { Button as se } from "../../button/Button.js";
+import { BikEditor as q } from "../../../editor/BikEditor.js";
+const le = ["GET", "POST", "PUT", "PATCH", "DELETE"], ie = le.map((s) => ({
+  label: s,
+  value: s
+})), M = (s, y) => (y.textBefore.match(new RegExp('(?<!\\\\)"', "g"))?.length ?? 0) % 2 === 1 ? s : `"${s}"`, Ae = ({
+  onClose: s,
+  onSave: y,
+  initial: n,
+  onImprove: N,
+  charLimits: I = X,
+  zIndex: j,
+  existingNames: z = [],
   variablesData: c
 }) => {
-  const [y, z] = s(a?.name ?? ""), I = $(null), E = $(null), [H, F] = s(a?.instructions ?? ""), [x, w] = s(a?.url ?? "https://"), [v, G] = s(
-    a?.method ?? "POST"
-  ), [A, g] = s(
-    a?.headers ?? [{ key: "", value: "" }]
-  ), [k, J] = s(a?.requestBody ?? ""), [P, U] = s(
-    a?.responseSample ?? ""
-  ), [B, L] = s(!1), T = (e, r) => g(
-    (o) => o.map((n, m) => m === e ? { ...n, ...r } : n)
-  ), W = () => g((e) => [...e, { key: "", value: "" }]), Y = (e) => g((r) => r.filter((o, n) => n !== e)), S = y.trim(), C = S.length > 0 && j.some(
-    (e) => e.trim().toLowerCase() === S.toLowerCase()
-  ), O = S.length > 0 && x.trim().length > 0 && !C;
-  return /* @__PURE__ */ i(
-    re,
+  const [x, F] = l(n?.name ?? ""), E = $(null), H = $(null), [w, G] = l(n?.instructions ?? ""), [T, B] = l(n?.url ?? "https://"), [g, J] = l(
+    n?.method ?? "POST"
+  ), [k, v] = l(
+    n?.headers ?? [{ key: "", value: "" }]
+  ), [A, U] = l(n?.requestBody ?? ""), [D, W] = l(
+    n?.responseSample ?? ""
+  ), [P, L] = l(!1), S = (e, r) => v(
+    (o) => o.map((a, m) => m === e ? { ...a, ...r } : a)
+  ), Y = () => v((e) => [...e, { key: "", value: "" }]), V = (e) => v((r) => r.filter((o, a) => a !== e)), C = x.trim(), R = C.length > 0 && z.some(
+    (e) => e.trim().toLowerCase() === C.toLowerCase()
+  ), O = C.length > 0 && T.trim().length > 0 && !R;
+  return /* @__PURE__ */ d(
+    oe,
     {
       header: "Rest API",
       closeOnEscapeKey: !1,
-      zIndex: N,
+      zIndex: j,
       headerCustomComponent: /* @__PURE__ */ t(
-        ee,
+        te,
         {
           title: "Rest API",
           subtitle: "Connect to any API endpoint. Define the request and a sample response for the agent to reference."
         }
       ),
       width: "431px",
-      headerStyle: Z,
-      bodyStyle: X,
-      onClose: d,
+      headerStyle: ee,
+      bodyStyle: Z,
+      onClose: s,
       saveButtonProps: {
         "data-test": "restapi-save",
         buttonText: "Save",
         buttonType: "primary",
         size: "small",
         disabled: !O,
-        isLoading: B,
+        isLoading: P,
         onClick: async () => {
-          if (!O || B)
+          if (!O || P)
             return;
           const e = {
-            id: a?.id ?? `restapi_${Date.now().toString(36)}`,
-            name: y.trim(),
-            instructions: H,
-            url: x.trim(),
-            method: v,
+            id: n?.id ?? `restapi_${Date.now().toString(36)}`,
+            name: x.trim(),
+            instructions: w,
+            url: T.trim(),
+            method: g,
             // Drop fully-empty header rows.
-            headers: A.filter((o) => o.key.trim() || o.value.trim()),
-            requestBody: k,
-            responseSample: P
-          }, r = _(e);
+            headers: k.filter((o) => o.key.trim() || o.value.trim()),
+            requestBody: A,
+            responseSample: D
+          }, r = y(e);
           if (r && typeof r.then == "function") {
             L(!0);
             try {
@@ -93,7 +93,7 @@ const se = ["GET", "POST", "PUT", "PATCH", "DELETE"], le = se.map((d) => ({
         buttonText: "Cancel",
         buttonType: "tertiaryGray",
         size: "small",
-        onClick: d
+        onClick: s
       },
       children: [
         /* @__PURE__ */ t(
@@ -104,33 +104,34 @@ const se = ["GET", "POST", "PUT", "PATCH", "DELETE"], le = se.map((d) => ({
             labelText: "Name",
             labelTextBold: !0,
             placeholder: "Enter action name",
-            value: y,
-            maxCharLimit: b.name,
-            state: C ? "invalid" : void 0,
-            errorMessage: C ? "A tool with this name already exists" : void 0,
-            onChangeText: z
+            value: x,
+            maxCharLimit: I.name,
+            state: R ? "invalid" : void 0,
+            errorMessage: R ? "A tool with this name already exists" : void 0,
+            onChangeText: F
           }
         ),
         /* @__PURE__ */ t(
-          te,
+          re,
           {
             "data-test": "restapi-instructions",
             label: "Instructions",
-            value: H,
-            onChange: F,
-            maxLength: b.instructions,
+            value: w,
+            onChange: G,
+            maxLength: I.instructions,
             placeholder: "Describe how should the LLM generate the rest API",
-            onImprove: q,
+            onImprove: N,
             variablesData: c
           }
         ),
         /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(
           h,
           {
+            addDataButton: !0,
             variablesData: c,
-            onInsert: (e, r) => w((o) => {
-              const n = r ?? o.length;
-              return `${o.slice(0, n)}${e}${o.slice(n)}`;
+            onInsert: (e, r) => B((o) => {
+              const a = r ?? o.length;
+              return `${o.slice(0, a)}${e}${o.slice(a)}`;
             }),
             children: /* @__PURE__ */ t(
               f,
@@ -141,35 +142,35 @@ const se = ["GET", "POST", "PUT", "PATCH", "DELETE"], le = se.map((d) => ({
                 labelTextBold: !0,
                 placeholder: "https://",
                 type: "url",
-                value: x,
-                onChangeText: w
+                value: T,
+                onChangeText: B
               }
             )
           }
         ) }),
-        /* @__PURE__ */ i(p, { children: [
-          /* @__PURE__ */ t(u, { color: l.content.primary, children: "HTTP method" }),
+        /* @__PURE__ */ d(p, { children: [
+          /* @__PURE__ */ t(u, { color: i.content.primary, children: "HTTP method" }),
           /* @__PURE__ */ t(
-            oe,
+            ne,
             {
               "data-test": "restapi-method",
               size: "small",
               width: "100%",
               dropdownWidth: "399px",
-              options: le,
-              defaultOptions: [{ label: v, value: v }],
+              options: ie,
+              defaultOptions: [{ label: g, value: g }],
               onSelect: (e) => {
-                const r = ne(e);
-                r && G(r);
+                const r = ae(e);
+                r && J(r);
               }
             }
           )
         ] }),
-        /* @__PURE__ */ i(p, { children: [
-          /* @__PURE__ */ t(u, { color: l.content.primary, children: "Headers" }),
-          A.map((e, r) => (
+        /* @__PURE__ */ d(p, { children: [
+          /* @__PURE__ */ t(u, { color: i.content.primary, children: "Headers" }),
+          k.map((e, r) => (
             // eslint-disable-next-line react/no-array-index-key
-            /* @__PURE__ */ i(ie, { "data-test": `restapi-header-${r}`, children: [
+            /* @__PURE__ */ d(de, { "data-test": `restapi-header-${r}`, children: [
               /* @__PURE__ */ t(
                 f,
                 {
@@ -177,16 +178,17 @@ const se = ["GET", "POST", "PUT", "PATCH", "DELETE"], le = se.map((d) => ({
                   hideInputHeader: !0,
                   placeholder: "Enter name",
                   value: e.key,
-                  onChangeText: (o) => T(r, { key: o })
+                  onChangeText: (o) => S(r, { key: o })
                 }
               ),
               /* @__PURE__ */ t(
                 h,
                 {
+                  addDataButton: !0,
                   variablesData: c,
-                  onInsert: (o, n) => {
-                    const m = n ?? e.value.length;
-                    T(r, {
+                  onInsert: (o, a) => {
+                    const m = a ?? e.value.length;
+                    S(r, {
                       value: `${e.value.slice(0, m)}${o}${e.value.slice(m)}`
                     });
                   },
@@ -197,58 +199,60 @@ const se = ["GET", "POST", "PUT", "PATCH", "DELETE"], le = se.map((d) => ({
                       hideInputHeader: !0,
                       placeholder: "Enter value",
                       value: e.value,
-                      onChangeText: (o) => T(r, { value: o })
+                      onChangeText: (o) => S(r, { value: o })
                     }
                   )
                 }
               ),
               /* @__PURE__ */ t(
-                ce,
+                pe,
                 {
                   type: "button",
                   "aria-label": "Remove header",
                   "data-test": `restapi-header-remove-${r}`,
-                  onClick: () => Y(r),
+                  onClick: () => V(r),
                   children: /* @__PURE__ */ t(
-                    V,
+                    K,
                     {
                       width: 16,
                       height: 16,
-                      color: l.content.secondary
+                      color: i.content.secondary
                     }
                   )
                 }
               )
             ] }, r)
           )),
-          /* @__PURE__ */ t(de, { children: /* @__PURE__ */ t(
-            ae,
+          /* @__PURE__ */ t(ce, { children: /* @__PURE__ */ t(
+            se,
             {
               "data-test": "restapi-add-header",
               buttonType: "dashRegular",
               size: "small",
-              LeadingIcon: K,
+              LeadingIcon: Q,
               buttonText: "Add header",
-              onClick: W
+              onClick: Y
             }
           ) })
         ] }),
-        /* @__PURE__ */ i(p, { children: [
-          /* @__PURE__ */ t(u, { color: l.content.primary, children: "Request " }),
+        /* @__PURE__ */ d(p, { children: [
+          /* @__PURE__ */ t(u, { color: i.content.primary, children: "Request " }),
           /* @__PURE__ */ t(
             h,
             {
+              addDataButton: !0,
               variablesData: c,
-              onInsert: (e) => I.current?.insertInlineContent(e),
+              transformToken: M,
+              onInsert: (e) => E.current?.insertInlineContent(e),
               children: /* @__PURE__ */ t(
-                D,
+                q,
                 {
-                  ref: I,
+                  ref: E,
                   features: { jsonMode: !0 },
-                  initialContent: k,
-                  style: M,
+                  initialContent: A,
+                  style: _,
                   placeholder: "Type or paste JSON here",
-                  onChange: (e) => J(e.text),
+                  onChange: (e) => U(e.text),
                   minHeight: "120px",
                   maxHeight: "240px"
                 }
@@ -256,22 +260,24 @@ const se = ["GET", "POST", "PUT", "PATCH", "DELETE"], le = se.map((d) => ({
             }
           )
         ] }),
-        /* @__PURE__ */ i(p, { children: [
-          /* @__PURE__ */ t(u, { color: l.content.primary, children: "Response " }),
+        /* @__PURE__ */ d(p, { children: [
+          /* @__PURE__ */ t(u, { color: i.content.primary, children: "Response " }),
           /* @__PURE__ */ t(
             h,
             {
+              addDataButton: !0,
               variablesData: c,
-              onInsert: (e) => E.current?.insertInlineContent(e),
+              transformToken: M,
+              onInsert: (e) => H.current?.insertInlineContent(e),
               children: /* @__PURE__ */ t(
-                D,
+                q,
                 {
-                  ref: E,
+                  ref: H,
                   features: { jsonMode: !0 },
-                  style: M,
-                  initialContent: P,
+                  style: _,
+                  initialContent: D,
                   placeholder: "Type or paste JSON here",
-                  onChange: (e) => U(e.text),
+                  onChange: (e) => W(e.text),
                   minHeight: "120px",
                   maxHeight: "240px"
                 }
@@ -282,33 +288,34 @@ const se = ["GET", "POST", "PUT", "PATCH", "DELETE"], le = se.map((d) => ({
       ]
     }
   );
-}, ie = R.div`
+}, de = b.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`, de = R.div`
+`, ce = b.div`
 	display: flex;
-`, ce = R.button`
+`, pe = b.button`
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
 	width: 32px;
 	height: 32px;
-	border: 1px solid ${l.stroke.primary};
+	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
-	background: ${l.surface.standard};
+	background: ${i.surface.standard};
 	cursor: pointer;
 
 	&:hover {
-		border-color: ${l.content.secondary};
+		border-color: ${i.content.secondary};
 	}
-`, M = {
+`, _ = {
   borderRadius: "4px",
   overflow: "hidden"
 };
 export {
-  M as JsonFieldBox,
-  ke as RestApiToolPanel
+  _ as JsonFieldBox,
+  Ae as RestApiToolPanel,
+  M as jsonQuoteToken
 };
 //# sourceMappingURL=RestApiToolPanel.js.map

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

@@ -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 * 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\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\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","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","token","caret","u","at","TitleSmall","COLORS","Dropdown","opt","v","unwrapDropdownValue","HeaderRow","IconBtn","DeleteIcon","AddHeaderRow","Button","PlusIcon","BikEditor","JsonFieldBox","c","styled"],"mappings":"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"}
+{"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

@@ -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

@@ -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;"}
+{"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;"}