@sourcegraph/cody-web 0.38.0 → 0.40.0

package/dist/index.js

@@ -3,8 +3,8 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a;
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { dn as getDefaultExportFromCjs, aY as FILE_CONTEXT_MENTION_PROVIDER, aZ as SYMBOL_CONTEXT_MENTION_PROVIDER, b0 as REMOTE_REPOSITORY_PROVIDER_URI, b1 as REMOTE_FILE_PROVIDER_URI, b2 as REMOTE_DIRECTORY_PROVIDER_URI, b3 as WEB_PROVIDER_URI, b8 as RULES_PROVIDER_URI, T as displayPath, m as displayLineRange, Y as displayPathDirname, W as displayPathBasename, I as IGNORED_FILE_WARNING_LABEL, L as LARGE_FILE_WARNING_LABEL, dp as object, dq as literal, dr as string$2, V as displayPathWithLines, c as URI, ds as is$3, c5 as serializeContextItem, c3 as CONTEXT_ITEM_MENTION_NODE_TYPE, cb as contextItemMentionNodeDisplayText, c4 as TEMPLATE_INPUT_NODE_TYPE, aU as parseMentionQuery, N as NO_SYMBOL_MATCHES_HELP_LABEL, F as FILE_RANGE_TOOLTIP_LABEL, dt as Observable, cd as createExtensionAPI, bb as createMessageAPIForWebview, du as debounce$1, C as ContextItemSource, cu as memoizeLastValue, bW as toSerializedPromptEditorValue$1, dv as isEqual, aV as scanForMentionTriggerInUserTextInput, c9 as getMentionOperations, ct as combineLatest, dw as map$3, a0 as forceHydration, a1 as hydrateAfterPostMessage, ag as isDotCom, be as isWorkspaceInstance, au as isAuthError, av as isAvailabilityError, dx as isSourcegraphToken, dy as trace, dz as context$1, dA as SpanStatusCode, dm as commonjsGlobal, dB as svg, dC as html$2, dD as whitespace, dE as find, dF as stringify, dG as stringify$1, dH as ccount, bT as CodyIDE, dI as CodyTaskState, dJ as cryptoJsExports, a6 as GuardrailsCheckStatus, dK as LRUCache, a as isError, aq as RateLimitError, a2 as FeatureFlag, r as reformatBotMessageForChat, at as isAbortErrorOrSocketHangUp, M as ModelTag, dL as DeepCodyAgentID, bY as serializedPromptEditorStateFromChatMessage, bZ as contextItemsFromPromptEditorValue, b$ as filterContextItemsFromPromptEditorValue, dM as View, E as isMacOS, dN as ToolCodyModelName, g as CustomCommandType, c0 as textContentFromSerializedLexicalNode, ci as firstValueFrom, d0 as skipPendingOperation, bO as FAST_CHAT_INPUT_TOKEN_BUDGET, f as webviewOpenURIForContextItem, l as pluralize, dk as UIToolStatus, dO as getFileDiff, dP as diffWithLineNum, dl as UITerminalOutputType, dQ as isCodeSearchContextItem, dR as v4, dS as lodashExports, c6 as deserializeContextItem, d1 as firstResultFromOperation, dT as ChatHistoryType, dU as ACCOUNT_USAGE_URL, dV as CODY_DOC_QUICKSTART_URL, b as isDefined, dW as browser, bU as CodyAutoSuggestionMode, _ as setDisplayPathEnvInfo, k as isErrorLike, bE as PromptString, a4 as createGuardrailsImpl, U as Uri } from "./vscode-shim-CdmSM8Q0.mjs";
-import { bh, bg } from "./vscode-shim-CdmSM8Q0.mjs";
+import { dn as getDefaultExportFromCjs, aY as FILE_CONTEXT_MENTION_PROVIDER, aZ as SYMBOL_CONTEXT_MENTION_PROVIDER, b0 as REMOTE_REPOSITORY_PROVIDER_URI, b1 as REMOTE_FILE_PROVIDER_URI, b2 as REMOTE_DIRECTORY_PROVIDER_URI, b3 as WEB_PROVIDER_URI, b8 as RULES_PROVIDER_URI, T as displayPath, m as displayLineRange, Y as displayPathDirname, W as displayPathBasename, I as IGNORED_FILE_WARNING_LABEL, L as LARGE_FILE_WARNING_LABEL, dp as object, dq as literal, dr as string$2, V as displayPathWithLines, c as URI, ds as is$3, c5 as serializeContextItem, c3 as CONTEXT_ITEM_MENTION_NODE_TYPE, cb as contextItemMentionNodeDisplayText, c4 as TEMPLATE_INPUT_NODE_TYPE, aU as parseMentionQuery, N as NO_SYMBOL_MATCHES_HELP_LABEL, F as FILE_RANGE_TOOLTIP_LABEL, dt as Observable, cd as createExtensionAPI, bb as createMessageAPIForWebview, du as debounce$1, C as ContextItemSource, cu as memoizeLastValue, bW as toSerializedPromptEditorValue$1, dv as isEqual, aV as scanForMentionTriggerInUserTextInput, c9 as getMentionOperations, ct as combineLatest, dw as map$3, a0 as forceHydration, a1 as hydrateAfterPostMessage, ag as isDotCom, be as isWorkspaceInstance, au as isAuthError, av as isAvailabilityError, dx as isSourcegraphToken, dy as trace, dz as context$1, dA as SpanStatusCode, dm as commonjsGlobal, dB as svg, dC as html$2, dD as whitespace, dE as find, dF as stringify, dG as stringify$1, dH as ccount, bT as CodyIDE, dI as CodyTaskState, dJ as cryptoJsExports, a6 as GuardrailsCheckStatus, dK as LRUCache, a as isError, aq as RateLimitError, a2 as FeatureFlag, r as reformatBotMessageForChat, at as isAbortErrorOrSocketHangUp, M as ModelTag, dL as DeepCodyAgentID, bY as serializedPromptEditorStateFromChatMessage, bZ as contextItemsFromPromptEditorValue, b$ as filterContextItemsFromPromptEditorValue, dM as View, E as isMacOS, dN as ToolCodyModelName, g as CustomCommandType, c0 as textContentFromSerializedLexicalNode, ci as firstValueFrom, d0 as skipPendingOperation, bO as FAST_CHAT_INPUT_TOKEN_BUDGET, f as webviewOpenURIForContextItem, l as pluralize, dk as UIToolStatus, dO as getFileDiff, dP as diffWithLineNum, dl as UITerminalOutputType, dQ as isCodeSearchContextItem, dR as v4, dS as lodashExports, c6 as deserializeContextItem, d1 as firstResultFromOperation, dT as ChatHistoryType, dU as ACCOUNT_USAGE_URL, dV as CODY_DOC_QUICKSTART_URL, b as isDefined, dW as browser, bU as CodyAutoSuggestionMode, _ as setDisplayPathEnvInfo, k as isErrorLike, bE as PromptString, a4 as createGuardrailsImpl, U as Uri } from "./vscode-shim-BM22pmQn.mjs";
+import { bh, bg } from "./vscode-shim-BM22pmQn.mjs";
 import * as React$2 from "react";
 import React__default, { createContext, useContext, useMemo as useMemo$1, useLayoutEffect as useLayoutEffect$1, useEffect as useEffect$2, forwardRef, useState as useState$1, useCallback, useRef as useRef$1, Suspense, createElement, memo as memo$2, useImperativeHandle, Children, isValidElement, cloneElement, Fragment as Fragment$2, useReducer, useId as useId$2, useInsertionEffect as useInsertionEffect$1, Component } from "react";
 var classnames = { exports: {} };
@@ -11593,7 +11593,7 @@ const editor$4 = "_editor_s4gjm_1";
 const contentEditable = "_content-editable_s4gjm_6";
 const placeholder = "_placeholder_s4gjm_14";
 const themeParagraph = "_theme-paragraph_s4gjm_29";
-const styles$w = {
+const styles$x = {
   editor: editor$4,
   contentEditable,
   placeholder,
@@ -12683,7 +12683,7 @@ const title = "_title_ql6r4_5";
 const description = "_description_ql6r4_5";
 const warning = "_warning_ql6r4_5";
 const row$1 = "_row_ql6r4_13";
-const styles$v = {
+const styles$w = {
   title,
   description,
   warning,
@@ -12741,22 +12741,22 @@ const MentionMenuContextItemContent = ({ query, item: item2, badge: badge2 }) =>
     warning2 = "";
   }
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$v.row, children: [
-      Icon2 && /* @__PURE__ */ jsxs("div", { className: styles$v.row, title: isSymbol ? item2.kind : "", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$w.row, children: [
+      Icon2 && /* @__PURE__ */ jsxs("div", { className: styles$w.row, title: isSymbol ? item2.kind : "", children: [
         /* @__PURE__ */ jsx(Icon2, { size: 16, strokeWidth: 1.75 }),
         isSymbol ? item2.kind : ""
       ] }),
-      /* @__PURE__ */ jsx("span", { className: clsx$1(styles$v.title, warning2 && styles$v.titleWithWarning), title: title2, children: displayName }),
-      description2 && /* @__PURE__ */ jsx("span", { className: styles$v.description, title: description2, children: description2 }),
+      /* @__PURE__ */ jsx("span", { className: clsx$1(styles$w.title, warning2 && styles$w.titleWithWarning), title: title2, children: displayName }),
+      description2 && /* @__PURE__ */ jsx("span", { className: styles$w.description, title: description2, children: description2 }),
       badge2,
       isLink && /* @__PURE__ */ jsx(ExternalLink, { size: 16, strokeWidth: 1.25, style: { opacity: "0.5" } })
     ] }),
-    warning2 && /* @__PURE__ */ jsx("span", { className: styles$v.warning, children: warning2 })
+    warning2 && /* @__PURE__ */ jsx("span", { className: styles$w.warning, children: warning2 })
   ] });
 };
 const MentionMenuProviderItemContent = ({ provider }) => {
   const Icon2 = iconForProvider[provider.id] ?? Database;
-  return /* @__PURE__ */ jsxs("div", { className: styles$v.row, title: provider.id, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$w.row, title: provider.id, children: [
     /* @__PURE__ */ jsx(Icon2, { size: 16, strokeWidth: 1.75 }),
     provider.title ?? provider.id,
     /* @__PURE__ */ jsx(ArrowRight, { size: 16, strokeWidth: 1.25, style: { opacity: "0.5" } })
@@ -12806,7 +12806,7 @@ const contextItemMentionNode = "_context-item-mention-node_1eamp_1";
 const icon$1 = "_icon_1eamp_14";
 const contextItemMentionChipNodeFocused = "_context-item-mention-chip-node--focused_1eamp_28";
 const isTooLargeOrIgnored$1 = "_is-too-large-or-ignored_1eamp_33";
-const styles$u = {
+const styles$v = {
   contextItemMentionNode,
   icon: icon$1,
   contextItemMentionChipNodeFocused,
@@ -13083,7 +13083,7 @@ function tooltipForContextItem(item2) {
   }
   return void 0;
 }
-const MENTION_CLASS_NAME = styles$u.contextItemMentionNode;
+const MENTION_CLASS_NAME = styles$v.contextItemMentionNode;
 function convertContextItemMentionElement(domNode) {
   const data = domNode.getAttribute(DOM_DATA_ATTR);
   if (data !== null) {
@@ -13175,8 +13175,8 @@ class ContextItemMentionNode extends gs {
         className: `${MENTION_NODE_CLASS_NAME} ${extraClassNamesForContextItem(
           this.contextItem
         )}`,
-        focusedClassName: styles$u.contextItemMentionChipNodeFocused,
-        iconClassName: styles$u.icon
+        focusedClassName: styles$v.contextItemMentionChipNodeFocused,
+        iconClassName: styles$v.icon
       }
     );
   }
@@ -13195,7 +13195,7 @@ function $createContextItemMentionNode(contextItem2, { isFromInitialContext } =
 function extraClassNamesForContextItem(contextItem2) {
   const classNames2 = [];
   if (contextItem2.isTooLarge || contextItem2.isIgnored) {
-    classNames2.push(styles$u.isTooLargeOrIgnored);
+    classNames2.push(styles$v.isTooLargeOrIgnored);
   }
   return classNames2.join(" ");
 }
@@ -13266,7 +13266,7 @@ const TemplateInputComponent = ({ editor: editor2, nodeKey, node: node2, classNa
 };
 const templateInputNode = "_template-input-node_14yoh_1";
 const templateInputNodeFocused = "_template-input-node--focused_14yoh_16";
-const styles$t = {
+const styles$u = {
   templateInputNode,
   templateInputNodeFocused
 };
@@ -13299,8 +13299,8 @@ class TemplateInputNode extends gs {
         editor: editor2,
         nodeKey: this.getKey(),
         node: this,
-        className: `${styles$t.templateInputNode}`,
-        focusedClassName: `${styles$t.templateInputNodeFocused}`
+        className: `${styles$u.templateInputNode}`,
+        focusedClassName: `${styles$u.templateInputNodeFocused}`
       }
     );
   }
@@ -13507,7 +13507,7 @@ function L({ options: e2, onQueryChange: n2, onSelectOption: o2, onOpen: r2, onC
 const popoverContainer = "_popover-container_11l09_1";
 const popoverDimensions$1 = "_popover-dimensions_11l09_15";
 const popover$1 = "_popover_11l09_1";
-const styles$s = {
+const styles$t = {
   popoverContainer,
   popoverDimensions: popoverDimensions$1,
   popover: popover$1
@@ -13522,12 +13522,12 @@ function contextItemID(item2) {
     item2.range ? `${item2.range.start.line}:${item2.range.start.character}-${item2.range.end.line}:${item2.range.end.character}` : ""
   ]);
 }
-const container$4 = "_container_fr158_1";
+const container$5 = "_container_fr158_1";
 const item$1 = "_item_fr158_8";
 const contextItem$1 = "_context-item_fr158_9";
 const experimental = "_experimental_fr158_17";
-const styles$r = {
-  container: container$4,
+const styles$s = {
+  container: container$5,
   item: item$1,
   contextItem: contextItem$1,
   experimental
@@ -13682,7 +13682,7 @@ const MentionMenu = ({
       {
         value: commandRowValue$1(provider),
         onSelect: onProviderSelect,
-        className: clsx$1(styles$r.item, COMMAND_ROW_CLASS_NAME),
+        className: clsx$1(styles$s.item, COMMAND_ROW_CLASS_NAME),
         children: /* @__PURE__ */ jsx(MentionMenuProviderItemContent, { provider })
       },
       commandRowValue$1(provider)
@@ -13695,7 +13695,7 @@ const MentionMenu = ({
       shouldFilter: false,
       value: effectiveValueRow ? commandRowValue$1(effectiveValueRow) : void 0,
       onValueChange: setValue,
-      className: styles$r.container,
+      className: styles$s.container,
       label: "@-mention context",
       ref,
       "data-testid": "mention-menu",
@@ -13710,8 +13710,8 @@ const MentionMenu = ({
               disabled: item2.isIgnored,
               onSelect: onCommandSelect,
               className: clsx$1(
-                styles$r.item,
-                styles$r.contextItem,
+                styles$s.item,
+                styles$s.contextItem,
                 COMMAND_ROW_CLASS_NAME
               ),
               children: /* @__PURE__ */ jsx(
@@ -13794,7 +13794,7 @@ function getItemsHeading$1(parentItem, mentionQuery) {
         {
           className: clsx$1(
             "tw-text-xs tw-rounded tw-px-2 tw-text-foreground",
-            styles$r.experimental
+            styles$s.experimental
           ),
           children: "Experimental"
         }
@@ -14008,7 +14008,7 @@ function createMentionMenuOption(item2) {
 function scanForMentionTriggerInLexicalInput(text2) {
   return scanForMentionTriggerInUserTextInput({ textBeforeCursor: text2, includeWhitespace: true });
 }
-const MentionsPlugin = memo$2(({ contextWindowSizeInTokens, openExternalLink }) => {
+const MentionsPlugin = memo$2(({ contextWindowSizeInTokens, openExternalLink, mentionPortalContainer }) => {
   const [editor2] = u$5();
   const [tokenAdded, setTokenAdded] = useState$1(0);
   const { params, updateQuery, updateMentionMenuParams } = useMentionMenuParams();
@@ -14115,6 +14115,7 @@ const MentionsPlugin = memo$2(({ contextWindowSizeInTokens, openExternalLink })
     {
       onQueryChange: updateQuery,
       onSelectOption,
+      parent: mentionPortalContainer ?? void 0,
       onClose,
       onOpen,
       triggerFn: scanForMentionTriggerInLexicalInput,
@@ -14133,7 +14134,7 @@ const MentionsPlugin = memo$2(({ contextWindowSizeInTokens, openExternalLink })
           // max height of the visible menu. This ensures that the menu does not
           // flip orientation as the user is typing if it suddenly has less
           // results. It also makes the positioning less glitchy.
-          /* @__PURE__ */ jsx("div", { className: styles$s.popoverContainer, children: /* @__PURE__ */ jsx("div", { "data-at-mention-menu": "", className: clsx$1(styles$s.popoverDimensions), children: /* @__PURE__ */ jsx("div", { className: styles$s.popover, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: styles$t.popoverContainer, children: /* @__PURE__ */ jsx("div", { "data-at-mention-menu": "", className: clsx$1(styles$t.popoverDimensions), children: /* @__PURE__ */ jsx("div", { className: styles$t.popover, children: /* @__PURE__ */ jsx(
             MentionMenu,
             {
               params,
@@ -14256,12 +14257,13 @@ const BaseEditor = ({
   contentEditableClassName,
   "aria-label": ariaLabel,
   onEnterKey,
-  openExternalLink
+  openExternalLink,
+  mentionPortalContainer
 }) => {
   const initialConfig = useMemo$1(
     () => ({
       namespace: "BaseEditor",
-      theme: { paragraph: styles$w.themeParagraph },
+      theme: { paragraph: styles$x.themeParagraph },
       onError: (error2) => console.error(error2),
       editorState: initialEditorState !== null ? JSON.stringify(initialEditorState) : void 0,
       editable: !disabled2,
@@ -14269,18 +14271,18 @@ const BaseEditor = ({
     }),
     []
   );
-  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: styles$w.editor, children: /* @__PURE__ */ jsxs(p$7, { initialConfig, children: [
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: styles$x.editor, children: /* @__PURE__ */ jsxs(p$7, { initialConfig, children: [
     /* @__PURE__ */ jsx(
       h,
       {
         contentEditable: /* @__PURE__ */ jsx(
           x$4,
           {
-            className: clsx$1(styles$w.contentEditable, contentEditableClassName),
+            className: clsx$1(styles$x.contentEditable, contentEditableClassName),
             ariaLabel
           }
         ),
-        placeholder: /* @__PURE__ */ jsx("div", { className: styles$w.placeholder, children: placeholder2 }),
+        placeholder: /* @__PURE__ */ jsx("div", { "data-editor-placeholder": true, className: styles$x.placeholder, children: placeholder2 }),
         ErrorBoundary: a$2
       }
     ),
@@ -14296,6 +14298,7 @@ const BaseEditor = ({
     /* @__PURE__ */ jsx(
       MentionsPlugin,
       {
+        mentionPortalContainer,
         contextWindowSizeInTokens,
         openExternalLink
       }
@@ -14309,7 +14312,7 @@ const BaseEditor = ({
 const editor$3 = "_editor_pujow_6";
 const seamless$1 = "_seamless_pujow_16";
 const disabled$2 = "_disabled_pujow_36";
-const styles$q = {
+const styles$r = {
   editor: editor$3,
   seamless: seamless$1,
   disabled: disabled$2
@@ -14462,6 +14465,7 @@ const PromptEditor$1 = ({
   disabled: disabled2,
   editorRef: ref,
   onEnterKey,
+  mentionPortalContainer,
   openExternalLink
 }) => {
   const editorRef = useRef$1(null);
@@ -14653,9 +14657,9 @@ const PromptEditor$1 = ({
   return /* @__PURE__ */ jsx(
     BaseEditor,
     {
-      className: clsx$1(styles$q.editor, editorClassName, {
-        [styles$q.disabled]: disabled2,
-        [styles$q.seamless]: seamless2
+      className: clsx$1(styles$r.editor, editorClassName, {
+        [styles$r.disabled]: disabled2,
+        [styles$r.seamless]: seamless2
       }),
       contentEditableClassName,
       initialEditorState: (initialEditorState == null ? void 0 : initialEditorState.lexicalEditorState) ?? null,
@@ -14667,7 +14671,8 @@ const PromptEditor$1 = ({
       disabled: disabled2,
       "aria-label": "Chat message",
       onEnterKey,
-      openExternalLink
+      openExternalLink,
+      mentionPortalContainer
     }
   );
 };
@@ -14724,7 +14729,7 @@ const editor$2 = "_editor_xv2pe_6";
 const input = "_input_xv2pe_20";
 const seamless = "_seamless_xv2pe_24";
 const disabled$1 = "_disabled_xv2pe_44";
-const styles$p = {
+const styles$q = {
   editor: editor$2,
   input,
   seamless,
@@ -30126,7 +30131,7 @@ new InputRule(/"$/, "”");
 new InputRule(/(?:^|[\s\{\[\(\<'"\u2018\u201C])(')$/, "‘");
 new InputRule(/'$/, "’");
 const atMention = "_atMention_1krkf_1";
-const styles$o = {
+const styles$p = {
   atMention
 };
 const AT_MENTION_TRIGGER_CHARACTER = "@";
@@ -30156,7 +30161,7 @@ function createAtMentionPlugin() {
                       // The current cursor position is after the '@' character
                       position2 - 1,
                       position2,
-                      { class: styles$o.atMention },
+                      { class: styles$p.atMention },
                       // This is necessary so that mapping changes will 'grow' the decoration, which
                       // also acts as marker for the mention value
                       { inclusiveEnd: true }
@@ -33712,7 +33717,7 @@ function useInteractions(propsList) {
 }
 const popoverDimensions = "_popover-dimensions_17xxk_1";
 const menu = "_menu_17xxk_5";
-const styles$n = {
+const styles$o = {
   popoverDimensions,
   menu
 };
@@ -33799,7 +33804,7 @@ const MentionsMenu = ({
           container2.current = node2;
           refs.setFloating(node2);
         },
-        className: clsx$1(styles$n.menu, styles$n.popoverDimensions, menuClass),
+        className: clsx$1(styles$o.menu, styles$o.popoverDimensions, menuClass),
         onMouseDown: handleMouseDown,
         onClick: handleClick,
         style: floatingStyles,
@@ -34043,7 +34048,7 @@ var m$1 = reactDomExports;
 const mention = "_mention_1l0qj_1";
 const mentionFocused = "_mention--focused_1l0qj_1";
 const isTooLargeOrIgnored = "_is-too-large-or-ignored_1l0qj_30";
-const styles$m = {
+const styles$n = {
   mention,
   mentionFocused,
   isTooLargeOrIgnored
@@ -34055,8 +34060,8 @@ class MentionView {
     var _a2;
     const item2 = node2.attrs.item;
     this.dom = document.createElement("span");
-    this.dom.className = clsx$1(styles$m.mention, {
-      [styles$m.isTooLargeOrIngore]: item2.isTooLarge || item2.isIgnored
+    this.dom.className = clsx$1(styles$n.mention, {
+      [styles$n.isTooLargeOrIngore]: item2.isTooLarge || item2.isIgnored
     });
     this.root = createRoot(this.dom);
     this.root.render(/* @__PURE__ */ jsx(MentionChip, { item: item2, children: ((_a2 = node2.content.firstChild) == null ? void 0 : _a2.text) ?? "" }));
@@ -34065,10 +34070,10 @@ class MentionView {
     return true;
   }
   selectNode() {
-    this.dom.classList.add(styles$m.mentionFocused);
+    this.dom.classList.add(styles$n.mentionFocused);
   }
   deselectNode() {
-    this.dom.classList.remove(styles$m.mentionFocused);
+    this.dom.classList.remove(styles$n.mentionFocused);
   }
   destroy() {
     window.queueMicrotask(() => this.root.unmount());
@@ -34615,13 +34620,13 @@ const PromptEditor = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx$1(styles$p.editor, editorClassName, {
-        [styles$p.disabled]: disabled2,
-        [styles$p.seamless]: seamless2
+      className: clsx$1(styles$q.editor, editorClassName, {
+        [styles$q.disabled]: disabled2,
+        [styles$q.seamless]: seamless2
       }),
       "data-lexical-editor": "true",
       children: [
-        /* @__PURE__ */ jsx("div", { className: clsx$1(styles$p.input, contentEditableClassName), ref: api2.ref }),
+        /* @__PURE__ */ jsx("div", { className: clsx$1(styles$q.input, contentEditableClassName), ref: api2.ref }),
         show && /* @__PURE__ */ jsx(
           MentionsMenu,
           {
@@ -34657,7 +34662,7 @@ function getItemsHeading(parentItem, query) {
         {
           className: clsx$1(
             "tw-text-xs tw-rounded tw-px-2 tw-text-foreground",
-            styles$p.experimental
+            styles$q.experimental
           ),
           children: "Experimental"
         }
@@ -36447,6 +36452,14 @@ const $a093c7e1ec25a057$export$be92b6f5f03c0fe9 = $a093c7e1ec25a057$export$28c66
 const $a093c7e1ec25a057$export$41fb9f06171c75f4 = $a093c7e1ec25a057$export$8c610744efcf8a1d;
 const $a093c7e1ec25a057$export$602eac185826482c = $a093c7e1ec25a057$export$7b36b8f925ab7497;
 const $a093c7e1ec25a057$export$7c6e2c02157bb7d2 = $a093c7e1ec25a057$export$e9003e2be37ec060;
+const DEFAULT_UI_CONFIGURATION = {
+  portalContainer: null
+};
+const UIConfigurationContext = createContext(DEFAULT_UI_CONFIGURATION);
+const UIConfigurationProvider = ({ value, children: children2 }) => /* @__PURE__ */ jsx(UIConfigurationContext.Provider, { value: value ?? DEFAULT_UI_CONFIGURATION, children: children2 });
+function useUIConfiguration() {
+  return useContext(UIConfigurationContext);
+}
 const CLASS_PART_SEPARATOR = "-";
 function createClassUtils(config) {
   const classMap = createClassMap(config);
@@ -38935,8 +38948,8 @@ const TooltipProvider = $a093c7e1ec25a057$export$2881499e37b75b9a;
 const Tooltip = $a093c7e1ec25a057$export$be92b6f5f03c0fe9;
 const TooltipTrigger = $a093c7e1ec25a057$export$41fb9f06171c75f4;
 const TooltipContent = React$2.forwardRef(({ portal, className, sideOffset = 4, ...props }, ref) => {
-  const Portal = portal ? $a093c7e1ec25a057$export$602eac185826482c : React$2.Fragment;
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+  const { portalContainer } = useUIConfiguration();
+  const content2 = /* @__PURE__ */ jsx(
     $a093c7e1ec25a057$export$7c6e2c02157bb7d2,
     {
       ref,
@@ -38948,7 +38961,8 @@ const TooltipContent = React$2.forwardRef(({ portal, className, sideOffset = 4,
       ...props,
       children: props.children
     }
-  ) });
+  );
+  return portal ? /* @__PURE__ */ jsx($a093c7e1ec25a057$export$602eac185826482c, { container: portalContainer, children: content2 }) : content2;
 });
 TooltipContent.displayName = $a093c7e1ec25a057$export$7c6e2c02157bb7d2.displayName;
 function r$1(e2) {
@@ -40602,7 +40616,7 @@ const CommandInput = React$2.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "tw-flex tw-w-full tw-border-solid tw-border tw-border-transparent tw-text-md tw-leading-none placeholder:tw-text-muted-foreground disabled:tw-cursor-not-allowed disabled:tw-opacity-50 focus:tw-outline-none",
+      "tw-flex tw-w-full tw-border-border tw-border-solid tw-border tw-text-md tw-leading-none placeholder:tw-text-muted-foreground disabled:tw-cursor-not-allowed disabled:tw-opacity-50 focus:tw-outline-none",
       className
     ),
     inputMode: "search",
@@ -40808,7 +40822,7 @@ const outerContainer = "_outer-container_eh1dt_1";
 const errorContainer = "_error-container_eh1dt_8";
 const error$1 = "_error_eh1dt_8";
 const closeBtn = "_close-btn_eh1dt_26";
-const styles$l = {
+const styles$m = {
   outerContainer,
   errorContainer,
   error: error$1,
@@ -41696,7 +41710,7 @@ memo$2(
   }
 );
 const chatDisabled = "_chat-disabled_rc7no_1";
-const styles$k = {
+const styles$l = {
   chatDisabled
 };
 class SpanManager {
@@ -71522,7 +71536,7 @@ const attributionIconFound = "_attribution-icon-found_36jko_137";
 const codiconLoading = "_codicon-loading_36jko_146";
 const spin$1 = "_spin_36jko_1";
 const content = "_content_36jko_162";
-const styles$j = {
+const styles$k = {
   wrapper,
   buttonsContainer,
   leftInfo,
@@ -71548,7 +71562,7 @@ const styles$j = {
   content
 };
 const spin = "_spin_56lwz_7";
-const styles$i = {
+const styles$j = {
   spin
 };
 const SaveCodeBlockIcon = (
@@ -71648,7 +71662,7 @@ const SyncSpinIcon = (
   /* @__PURE__ */ jsx(
     "svg",
     {
-      className: styles$i.spin,
+      className: styles$j.spin,
       role: "img",
       width: "16",
       height: "16",
@@ -71714,7 +71728,7 @@ const RefreshIcon = /* @__PURE__ */ jsx("i", { className: "codicon codicon-refre
 const CopyButton = ({
   text: text2,
   onCopy,
-  className = styles$j.button,
+  className = styles$k.button,
   showLabel = true,
   title: title2 = "Copy Code",
   label = "Copy",
@@ -71737,7 +71751,7 @@ const CopyButton = ({
   }, [onCopy, text2, label, customIcon]);
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className, onClick: handleClick, children: [
-      /* @__PURE__ */ jsx("div", { className: styles$j.iconContainer, children: icon2 }),
+      /* @__PURE__ */ jsx("div", { className: styles$k.iconContainer, children: icon2 }),
       showLabel && /* @__PURE__ */ jsx("span", { className: "tw-hidden xs:tw-block", children: currentLabel })
     ] }) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: title2 })
@@ -71763,7 +71777,7 @@ function createEditButtonsBasic(preText, copyButtonOnSubmit, insertButtonOnSubmi
   }
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(CopyButton, { text: preText, onCopy: copyButtonOnSubmit }),
-    insertButtonOnSubmit && /* @__PURE__ */ jsxs("div", { className: styles$j.insertButtons, children: [
+    insertButtonOnSubmit && /* @__PURE__ */ jsxs("div", { className: styles$k.insertButtons, children: [
       createInsertButton(preText, insertButtonOnSubmit),
       createSaveButton(preText, insertButtonOnSubmit)
     ] }),
@@ -71787,13 +71801,13 @@ function createAdditionsDeletions({
   const { additions, deletions } = getLineChanges(preText);
   const hasAdditionsDeletions = hasEditIntent && (additions >= 0 || deletions >= 0);
   return /* @__PURE__ */ jsx("div", { children: hasAdditionsDeletions && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsxs("span", { className: clsx$1(styles$j.addition, styles$j.stats), children: [
+    /* @__PURE__ */ jsxs("span", { className: clsx$1(styles$k.addition, styles$k.stats), children: [
       "+",
       additions
     ] }),
     ",",
     " ",
-    /* @__PURE__ */ jsxs("span", { className: styles$j.deletion, children: [
+    /* @__PURE__ */ jsxs("span", { className: styles$k.deletion, children: [
       "-",
       deletions
     ] })
@@ -71833,10 +71847,10 @@ function createInsertButton(preText, insertButtonOnSubmit) {
       "button",
       {
         type: "button",
-        className: styles$j.button,
+        className: styles$k.button,
         onClick: () => insertButtonOnSubmit == null ? void 0 : insertButtonOnSubmit(preText, false),
         children: [
-          /* @__PURE__ */ jsx("div", { className: styles$j.iconContainer, children: InsertCodeBlockIcon }),
+          /* @__PURE__ */ jsx("div", { className: styles$k.iconContainer, children: InsertCodeBlockIcon }),
           /* @__PURE__ */ jsx("span", { className: "tw-hidden xs:tw-block", children: "Insert" })
         ]
       }
@@ -71850,10 +71864,10 @@ function createSaveButton(preText, insertButtonOnSubmit) {
       "button",
       {
         type: "button",
-        className: styles$j.button,
+        className: styles$k.button,
         onClick: () => insertButtonOnSubmit == null ? void 0 : insertButtonOnSubmit(preText, true),
         children: [
-          /* @__PURE__ */ jsx("div", { className: styles$j.iconContainer, children: SaveCodeBlockIcon }),
+          /* @__PURE__ */ jsx("div", { className: styles$k.iconContainer, children: SaveCodeBlockIcon }),
           /* @__PURE__ */ jsx("span", { className: "tw-hidden xs:tw-block", children: "Save" })
         ]
       }
@@ -71881,8 +71895,8 @@ function createApplyButton(onSmartApply, smartApplyState) {
       break;
   }
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: styles$j.button, onClick, disabled: disabled2, children: [
-      /* @__PURE__ */ jsx("div", { className: styles$j.iconContainer, children: icon2 }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: styles$k.button, onClick, disabled: disabled2, children: [
+      /* @__PURE__ */ jsx("div", { className: styles$k.iconContainer, children: icon2 }),
       /* @__PURE__ */ jsx("span", { className: "tw-hidden xs:tw-block", children: label })
     ] }) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: "Apply in Editor" })
@@ -71890,12 +71904,12 @@ function createApplyButton(onSmartApply, smartApplyState) {
 }
 function createExecuteButton(onExecute) {
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: styles$j.button, onClick: onExecute, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: styles$k.button, onClick: onExecute, children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: clsx$1(
-            styles$j.iconContainer,
+            styles$k.iconContainer,
             "tw-align-middle codicon codicon-terminal"
           )
         }
@@ -71907,8 +71921,8 @@ function createExecuteButton(onExecute) {
 }
 function createAcceptButton(id2, smartApply) {
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: styles$j.button, onClick: () => smartApply.onAccept(id2), children: [
-      /* @__PURE__ */ jsx("div", { className: styles$j.iconContainer, children: TickIcon }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: styles$k.button, onClick: () => smartApply.onAccept(id2), children: [
+      /* @__PURE__ */ jsx("div", { className: styles$k.iconContainer, children: TickIcon }),
       /* @__PURE__ */ jsx("span", { className: "tw-hidden xs:tw-block", children: "Accept" })
     ] }) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: "Accept" })
@@ -71916,8 +71930,8 @@ function createAcceptButton(id2, smartApply) {
 }
 function createRejectButton(id2, smartApply) {
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: styles$j.button, onClick: () => smartApply.onReject(id2), children: [
-      /* @__PURE__ */ jsx("div", { className: styles$j.iconContainer, children: CloseIcon }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: styles$k.button, onClick: () => smartApply.onReject(id2), children: [
+      /* @__PURE__ */ jsx("div", { className: styles$k.iconContainer, children: CloseIcon }),
       /* @__PURE__ */ jsx("span", { className: "tw-hidden xs:tw-block", children: "Reject" })
     ] }) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: "Reject" })
@@ -71947,7 +71961,7 @@ function createActionsDropdown(preText) {
       "button",
       {
         type: "button",
-        className: styles$j.button,
+        className: styles$k.button,
         "aria-label": tooltip,
         "data-vscode-context": JSON.stringify(vscodeContext),
         onClick: handleClick,
@@ -71987,12 +72001,12 @@ function extractThinkContent(content2) {
     isThinking
   };
 }
-const container$3 = "_container_zq4rk_15";
+const container$4 = "_container_zq4rk_15";
 const line$1 = "_line_zq4rk_22";
 const guardrailsChecking = "_guardrails-checking_zq4rk_30";
 const shimmer = "_shimmer_zq4rk_1";
 const modulestyles = {
-  container: container$3,
+  container: container$4,
   line: line$1,
   guardrailsChecking,
   shimmer
@@ -72007,7 +72021,7 @@ const CodeBlockPlaceholder = ({
     "div",
     {
       className: clsx$1(
-        styles$j.content,
+        styles$k.content,
         "tw-overflow-hidden tw-p-4",
         className,
         status2 === GuardrailsCheckStatus.GeneratingCode || status2 === GuardrailsCheckStatus.Checking ? modulestyles.guardrailsChecking : modulestyles.guardrailsChecked
@@ -72040,15 +72054,15 @@ const GuardrailsStatus = ({
     className
   );
   return /* @__PURE__ */ jsxs("div", { className: containerClasses, title: tooltip, "data-testid": "guardrails-status", children: [
-    status2 === GuardrailsCheckStatus.GeneratingCode && /* @__PURE__ */ jsxs("div", { className: styles$j.status, children: [
-      /* @__PURE__ */ jsx(Loader, { className: clsx$1("tw-animate-spin", styles$j.iconContainer), size: 14 }),
-      /* @__PURE__ */ jsx("span", { className: styles$j.fileNameContainer, children: "Generating code" })
+    status2 === GuardrailsCheckStatus.GeneratingCode && /* @__PURE__ */ jsxs("div", { className: styles$k.status, children: [
+      /* @__PURE__ */ jsx(Loader, { className: clsx$1("tw-animate-spin", styles$k.iconContainer), size: 14 }),
+      /* @__PURE__ */ jsx("span", { className: styles$k.fileNameContainer, children: "Generating code" })
     ] }),
-    status2 === GuardrailsCheckStatus.Checking && /* @__PURE__ */ jsxs("div", { className: styles$j.status, children: [
-      /* @__PURE__ */ jsx(Loader, { className: clsx$1("tw-animate-spin", styles$j.iconContainer), size: 14 }),
-      /* @__PURE__ */ jsx("span", { className: styles$j.fileNameContainer, children: "Checking Guardrails" })
+    status2 === GuardrailsCheckStatus.Checking && /* @__PURE__ */ jsxs("div", { className: styles$k.status, children: [
+      /* @__PURE__ */ jsx(Loader, { className: clsx$1("tw-animate-spin", styles$k.iconContainer), size: 14 }),
+      /* @__PURE__ */ jsx("span", { className: styles$k.fileNameContainer, children: "Checking Guardrails" })
     ] }),
-    status2 === GuardrailsCheckStatus.Success && /* @__PURE__ */ jsxs("div", { className: styles$j.status, title: filename, onAuxClick: onSuccessAuxClick, children: [
+    status2 === GuardrailsCheckStatus.Success && /* @__PURE__ */ jsxs("div", { className: styles$k.status, title: filename, onAuxClick: onSuccessAuxClick, children: [
       /* @__PURE__ */ jsx(
         CircleCheckBig,
         {
@@ -72056,13 +72070,13 @@ const GuardrailsStatus = ({
           className: clsx$1(
             "tw-inline",
             "tw-text-[var(--vscode-gitDecoration-addedResourceForeground)]",
-            styles$j.iconContainer
+            styles$k.iconContainer
           )
         }
       ),
-      filename && /* @__PURE__ */ jsx("span", { className: styles$j.fileNameContainer, children: filename.split("/").pop() })
+      filename && /* @__PURE__ */ jsx("span", { className: styles$k.fileNameContainer, children: filename.split("/").pop() })
     ] }),
-    status2 === GuardrailsCheckStatus.Skipped && filename && /* @__PURE__ */ jsxs("div", { className: styles$j.status, title: filename, children: [
+    status2 === GuardrailsCheckStatus.Skipped && filename && /* @__PURE__ */ jsxs("div", { className: styles$k.status, title: filename, children: [
       /* @__PURE__ */ jsx(
         File,
         {
@@ -72070,31 +72084,31 @@ const GuardrailsStatus = ({
           className: clsx$1(
             "tw-inline",
             "tw-text-[var(--vscode-gitDecoration-addedResourceForeground)]",
-            styles$j.iconContainer
+            styles$k.iconContainer
           )
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: styles$j.fileNameContainer, children: filename.split("/").pop() })
+      /* @__PURE__ */ jsx("span", { className: styles$k.fileNameContainer, children: filename.split("/").pop() })
     ] }),
-    status2 === GuardrailsCheckStatus.Failed && /* @__PURE__ */ jsxs("div", { className: styles$j.status, children: [
+    status2 === GuardrailsCheckStatus.Failed && /* @__PURE__ */ jsxs("div", { className: styles$k.status, children: [
       /* @__PURE__ */ jsx(
         TriangleAlert,
         {
           size: 14,
-          className: clsx$1(styles$j.attributionIconFound, styles$j.iconContainer)
+          className: clsx$1(styles$k.attributionIconFound, styles$k.iconContainer)
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: styles$j.fileNameContainer, children: "Guardrails: Match found" })
+      /* @__PURE__ */ jsx("span", { className: styles$k.fileNameContainer, children: "Guardrails: Match found" })
     ] }),
-    status2 === GuardrailsCheckStatus.Error && /* @__PURE__ */ jsxs("div", { className: styles$j.status, children: [
+    status2 === GuardrailsCheckStatus.Error && /* @__PURE__ */ jsxs("div", { className: styles$k.status, children: [
       /* @__PURE__ */ jsx(
         TriangleAlert,
         {
           size: 14,
-          className: clsx$1(styles$j.attributionIconUnavailable, styles$j.iconContainer)
+          className: clsx$1(styles$k.attributionIconUnavailable, styles$k.iconContainer)
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: styles$j.fileNameContainer, children: "Guardrails API Error" })
+      /* @__PURE__ */ jsx("span", { className: styles$k.fileNameContainer, children: "Guardrails API Error" })
     ] }),
     children2
   ] });
@@ -72281,18 +72295,18 @@ const GuardrailsApplicator = ({
       status: guardrailsResult.status,
       filename: fileName,
       tooltip,
-      className: styles$j.metadataContainer,
+      className: styles$k.metadataContainer,
       onSuccessAuxClick,
       children: [
         guardrailsResult.status === GuardrailsCheckStatus.Error && /* @__PURE__ */ jsxs(
           "button",
           {
-            className: styles$j.button,
+            className: styles$k.button,
             type: "button",
             onClick: handleRetry,
             title: "Retry Guardrails check",
             children: [
-              /* @__PURE__ */ jsx("div", { className: styles$j.iconContainer, children: /* @__PURE__ */ jsx(RefreshCw, { size: 14 }) }),
+              /* @__PURE__ */ jsx("div", { className: styles$k.iconContainer, children: /* @__PURE__ */ jsx(RefreshCw, { size: 14 }) }),
               /* @__PURE__ */ jsx("span", { className: "tw-hidden xs:tw-block", children: "Retry" })
             ]
           }
@@ -72303,12 +72317,12 @@ const GuardrailsApplicator = ({
         guardrailsResult.status === GuardrailsCheckStatus.Failed && !isMessageLoading && /* @__PURE__ */ jsxs(
           "button",
           {
-            className: styles$j.button,
+            className: styles$k.button,
             type: "button",
             onClick: handleRegenerate,
             title: "Try regenerating code",
             children: [
-              /* @__PURE__ */ jsx("div", { className: styles$j.iconContainer, children: /* @__PURE__ */ jsx(RefreshCw, { size: 14 }) }),
+              /* @__PURE__ */ jsx("div", { className: styles$k.iconContainer, children: /* @__PURE__ */ jsx(RefreshCw, { size: 14 }) }),
               /* @__PURE__ */ jsx("span", { className: "tw-hidden xs:tw-block", children: "Regenerate" })
             ]
           }
@@ -72391,11 +72405,11 @@ const RichCodeBlock = ({
   const onExecuteThisScript = useCallback(() => {
     onExecute == null ? void 0 : onExecute(plainCode);
   }, [onExecute, plainCode]);
-  const additionsDeletions = smartApply ? /* @__PURE__ */ jsx("div", { className: styles$j.buttonContainer, children: createAdditionsDeletions({
+  const additionsDeletions = smartApply ? /* @__PURE__ */ jsx("div", { className: styles$k.buttonContainer, children: createAdditionsDeletions({
     hasEditIntent,
     preText: plainCode
   }) }) : void 0;
-  const actionButtons2 = /* @__PURE__ */ jsx("div", { className: styles$j.actionButtons, children: isCodeComplete && createEditButtons({
+  const actionButtons2 = /* @__PURE__ */ jsx("div", { className: styles$k.actionButtons, children: isCodeComplete && createEditButtons({
     isVSCode: config.clientCapabilities.isVSCode,
     copyOnly: config.clientCapabilities.codeCopyOnlyAction === "enabled",
     preText: plainCode,
@@ -72426,10 +72440,10 @@ const RichCodeBlock = ({
           /* @__PURE__ */ jsx(CodeBlockPlaceholder, { text: plainCode, status: guardrailsStatus })
         ) : (
           // Otherwise show the actual code with syntax highlighting
-          /* @__PURE__ */ jsx("pre", { className: styles$j.content, children: children2 })
+          /* @__PURE__ */ jsx("pre", { className: styles$k.content, children: children2 })
         ),
         additionsDeletions,
-        /* @__PURE__ */ jsx("div", { className: styles$j.buttonsContainer, children: /* @__PURE__ */ jsxs("div", { className: styles$j.buttons, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$k.buttonsContainer, children: /* @__PURE__ */ jsxs("div", { className: styles$k.buttons, children: [
           showCode && actionButtons2,
           guardrailsStatusDisplay
         ] }) })
@@ -80596,7 +80610,7 @@ var Trigger2 = AccordionTrigger$1;
 var Content2 = AccordionContent$1;
 const accordionTrigger = "_accordion-trigger_12003_1";
 const accordionTriggerChevron = "_accordion-trigger-chevron_12003_11";
-const styles$h = {
+const styles$i = {
   accordionTrigger,
   accordionTriggerChevron
 };
@@ -80607,7 +80621,7 @@ const AccordionTrigger = React$2.forwardRef(({ className, children: children2, .
   Trigger2,
   {
     ref,
-    className: clsx$1(styles$h.accordionTrigger, className),
+    className: clsx$1(styles$i.accordionTrigger, className),
     ...props,
     children: [
       children2,
@@ -80616,7 +80630,7 @@ const AccordionTrigger = React$2.forwardRef(({ className, children: children2, .
         {
           className: cn(
             "tw-h-8 tw-w-8 tw-text-muted-foreground",
-            styles$h.accordionTriggerChevron
+            styles$i.accordionTriggerChevron
           )
         }
       )
@@ -80798,7 +80812,7 @@ const ChatMessageContent = memo$2(
           onRegenerate,
           regeneratingCodeBlocks,
           smartApply,
-          className: clsx$1(styles$j.content, className),
+          className: clsx$1(styles$k.content, className),
           hasEditIntent: (humanMessage == null ? void 0 : humanMessage.intent) === "edit",
           chatCodeHighlightingEnabled
         }
@@ -80820,7 +80834,7 @@ const banner = "_banner_1sixu_62";
 const requestError = "_request-error_1sixu_136";
 const requestErrorTitle = "_request-error-title_1sixu_149";
 const errorContent = "_error-content_1sixu_153";
-const styles$g = {
+const styles$h = {
   errorItem,
   icon,
   body,
@@ -80854,9 +80868,9 @@ const RequestErrorItem = ({ error: error2, humanMessage }) => {
       }
     }
   ] : [];
-  return /* @__PURE__ */ jsxs("div", { className: styles$g.requestError, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$g.errorContent, children: [
-      /* @__PURE__ */ jsx("span", { className: styles$g.requestErrorTitle, children: "Request Failed: " }),
+  return /* @__PURE__ */ jsxs("div", { className: styles$h.requestError, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$h.errorContent, children: [
+      /* @__PURE__ */ jsx("span", { className: styles$h.requestErrorTitle, children: "Request Failed: " }),
       errorMessage
     ] }),
     actions2.length > 0 && /* @__PURE__ */ jsx("menu", { className: "tw-flex tw-gap-2 tw-text-sm tw-text-muted-foreground", children: /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-wrap tw-items-center tw-gap-x-4 tw-gap-y-2", children: /* @__PURE__ */ jsx("ul", { className: "tw-whitespace-nowrap tw-flex tw-gap-2 tw-flex-wrap", children: actions2.map(({ label, tooltip, onClick }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -80893,7 +80907,7 @@ const RateLimitErrorItem = ({ error: error2, postMessage }) => {
   if (fallbackToFlash) {
     ctaText = "Usage limit of premium models reached, switching the model to Gemini Flash.";
   }
-  return /* @__PURE__ */ jsx("div", { className: styles$g.errorItem, children: /* @__PURE__ */ jsxs("div", { className: styles$g.body, children: [
+  return /* @__PURE__ */ jsx("div", { className: styles$h.errorItem, children: /* @__PURE__ */ jsxs("div", { className: styles$h.body, children: [
     /* @__PURE__ */ jsxs("header", { children: [
       /* @__PURE__ */ jsx("h1", { children: ctaText }),
       /* @__PURE__ */ jsxs("p", { children: [
@@ -80901,7 +80915,7 @@ const RateLimitErrorItem = ({ error: error2, postMessage }) => {
         fallbackToFlash && " You can continue using Gemini Flash, or other standard models."
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: styles$g.actions, children: error2.feature !== "Agentic Chat" && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$h.actions, children: error2.feature !== "Agentic Chat" && /* @__PURE__ */ jsx(
       Button,
       {
         type: "button",
@@ -80910,7 +80924,7 @@ const RateLimitErrorItem = ({ error: error2, postMessage }) => {
         children: "Learn More"
       }
     ) }),
-    error2.retryMessage && /* @__PURE__ */ jsx("p", { className: styles$g.retryMessage, children: error2.retryMessage })
+    error2.retryMessage && /* @__PURE__ */ jsx("p", { className: styles$h.retryMessage, children: error2.retryMessage })
   ] }) });
 };
 const TokenUsageDisplay = ({ tokenUsage }) => {
@@ -80949,7 +80963,7 @@ const BaseMessageCell = ({ cellAction, content: content2, contentClassName, foot
   }
 );
 const stepContainer = "_step-container_1xbw7_1";
-const styles$f = {
+const styles$g = {
   stepContainer
 };
 const SubMessageCell = ({ piece, guardrails, onRegenerate, regeneratingCodeBlocks }) => {
@@ -80965,7 +80979,7 @@ const SubMessageCell = ({ piece, guardrails, onRegenerate, regeneratingCodeBlock
         regeneratingCodeBlocks
       }
     ),
-    piece.step && /* @__PURE__ */ jsxs("div", { className: `${styles$f.stepContainer} tw-flex tw-items-center tw-gap-2 tw-w-fit`, children: [
+    piece.step && /* @__PURE__ */ jsxs("div", { className: `${styles$g.stepContainer} tw-flex tw-items-center tw-gap-2 tw-w-fit`, children: [
       /* @__PURE__ */ jsx("div", { className: "tw-self-start tw-mt-1", children: /* @__PURE__ */ jsx(Wrench, { className: "tw-w-8 tw-h-8" }) }),
       /* @__PURE__ */ jsx("div", { children: piece.step.content })
     ] })
@@ -81047,7 +81061,7 @@ const AssistantMessageCell = memo$2(
           messageIntent === "chat" && /* @__PURE__ */ jsx(
             "div",
             {
-              className: `tw-flex tw-items-center tw-justify-end tw-gap-4  ${styles$j.buttonsContainer}`,
+              className: `tw-flex tw-items-center tw-justify-end tw-gap-4  ${styles$k.buttonsContainer}`,
               children: /* @__PURE__ */ jsx(
                 CopyButton,
                 {
@@ -81218,15 +81232,15 @@ const LinkOpenerProvider = ({ vscodeAPI, children: children2 }) => {
 function useLinkOpener() {
   return useContext(LinkOpenerContext);
 }
-const container$2 = "_container_1eiqs_6";
+const container$3 = "_container_1eiqs_6";
 const editor$1 = "_editor_1eiqs_17";
-const toolbar$1 = "_toolbar_1eiqs_23";
+const toolbar = "_toolbar_1eiqs_23";
 const focused$1 = "_focused_1eiqs_28";
 const editorContentEditable$1 = "_editor-content-editable_1eiqs_30";
-const styles$e = {
-  container: container$2,
+const styles$f = {
+  container: container$3,
   editor: editor$1,
-  toolbar: toolbar$1,
+  toolbar,
   focused: focused$1,
   editorContentEditable: editorContentEditable$1
 };
@@ -81632,16 +81646,17 @@ const $cb5cc270b50c6fcd$export$41fb9f06171c75f4 = $cb5cc270b50c6fcd$export$7dacb
 const $cb5cc270b50c6fcd$export$602eac185826482c = $cb5cc270b50c6fcd$export$dd679ffb4362d2d4;
 const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
 const popover = "_popover_1ah8d_2";
-const styles$d = {
+const styles$e = {
   popover
 };
 const Popover = $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9;
 const PopoverTrigger = $cb5cc270b50c6fcd$export$41fb9f06171c75f4;
 const PopoverContent = React$2.forwardRef(({ className, align = "start", sideOffset = 5, ...props }, ref) => {
   const portalRef = React$2.useRef(null);
+  const { portalContainer } = useUIConfiguration();
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx("div", { ref: portalRef, className: "empty:tw-hidden" }),
-    portalRef.current && /* @__PURE__ */ jsx($cb5cc270b50c6fcd$export$602eac185826482c, { container: portalRef.current, children: /* @__PURE__ */ jsx(
+    portalRef.current && /* @__PURE__ */ jsx($cb5cc270b50c6fcd$export$602eac185826482c, { container: portalContainer ?? portalRef.current, children: /* @__PURE__ */ jsx(
       $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2,
       {
         ref,
@@ -81650,7 +81665,7 @@ const PopoverContent = React$2.forwardRef(({ className, align = "start", sideOff
         className: cn(
           "tw-z-50 tw-w-72 tw-rounded-md tw-border tw-border-border tw-bg-popover tw-p-4 tw-text-popover-foreground tw-outline-none",
           className,
-          styles$d.popover
+          styles$e.popover
         ),
         ...props
       }
@@ -81796,6 +81811,7 @@ const ToolbarPopoverItem = ({
       PopoverContent,
       {
         align: "start",
+        collisionPadding: 8,
         onKeyDown: onKeyDownInPopoverContent,
         ref: popoverContentRef,
         ...popoverContentProps,
@@ -81813,7 +81829,7 @@ const disabled = "_disabled_k71kd_27";
 const modelIcon = "_model-icon_k71kd_31";
 const rightIcon = "_right-icon_k71kd_35";
 const badge = "_badge_k71kd_39";
-const styles$c = {
+const styles$d = {
   chatModelPopover,
   modelTitleWithIcon,
   modelName,
@@ -81940,7 +81956,7 @@ const ModelSelectField = ({
           loop: true,
           defaultValue: value,
           tabIndex: 0,
-          className: `focus:tw-outline-none ${styles$c.chatModelPopover}`,
+          className: `focus:tw-outline-none ${styles$d.chatModelPopover}`,
           "data-testid": "chat-model-popover",
           children: [
             intent === "agentic" && /* @__PURE__ */ jsx("div", { className: "tw-pl-5 tw-pr-3 tw-py-1.5 tw-text-sm tw-text-foreground tw-flex tw-justify-center", children: /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-start tw-gap-2 tw-bg-muted tw-px-2 tw-py-0.5 tw-rounded", children: [
@@ -81978,14 +81994,14 @@ const ModelSelectField = ({
                       href: "https://sourcegraph.com/docs/cody/clients/install-vscode#supported-llm-models",
                       target: "_blank",
                       rel: "noreferrer",
-                      className: styles$c.modelTitleWithIcon,
+                      className: styles$d.modelTitleWithIcon,
                       children: [
-                        /* @__PURE__ */ jsxs("span", { className: styles$c.modelIcon, children: [
+                        /* @__PURE__ */ jsxs("span", { className: styles$d.modelIcon, children: [
                           /* @__PURE__ */ jsx(BookOpen, { size: 16, strokeWidth: 2 }),
                           " "
                         ] }),
-                        /* @__PURE__ */ jsx("span", { className: styles$c.modelName, children: "Documentation" }),
-                        /* @__PURE__ */ jsx("span", { className: styles$c.rightIcon, children: /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx("span", { className: styles$d.modelName, children: "Documentation" }),
+                        /* @__PURE__ */ jsx("span", { className: styles$d.rightIcon, children: /* @__PURE__ */ jsx(
                           ExternalLink,
                           {
                             size: 16,
@@ -82058,17 +82074,17 @@ const ModelTitleWithIcon = ({ model, showIcon, modelAvailability: modelAvailabil
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: clsx$1(styles$c.modelTitleWithIcon, {
-        [styles$c.disabled]: isDisabled
+      className: clsx$1(styles$d.modelTitleWithIcon, {
+        [styles$d.disabled]: isDisabled
       }),
       children: [
-        showIcon ? model.id.includes(DeepCodyAgentID) ? /* @__PURE__ */ jsx(Brain, { size: 16, className: styles$c.modelIcon }) : /* @__PURE__ */ jsx(ChatModelIcon, { model: model.provider, className: styles$c.modelIcon }) : null,
-        /* @__PURE__ */ jsx("span", { className: clsx$1("tw-flex-grow", styles$c.modelName), children: model.title }),
+        showIcon ? model.id.includes(DeepCodyAgentID) ? /* @__PURE__ */ jsx(Brain, { size: 16, className: styles$d.modelIcon }) : /* @__PURE__ */ jsx(ChatModelIcon, { model: model.provider, className: styles$d.modelIcon }) : null,
+        /* @__PURE__ */ jsx("span", { className: clsx$1("tw-flex-grow", styles$d.modelName), children: model.title }),
         modelBadge && /* @__PURE__ */ jsx(
           Badge,
           {
             variant: "secondary",
-            className: clsx$1(styles$c.badge, {
+            className: clsx$1(styles$d.badge, {
               "tw-opacity-75": modelAvailability2 === "needs-cody-pro"
             }),
             children: modelBadge
@@ -82126,7 +82142,7 @@ const useDebounce = (value, delay2) => {
 };
 const userAvatar = "_user-avatar_vhaw6_1";
 const sourcegraphGradientBorder = "_sourcegraph-gradient-border_vhaw6_11";
-const styles$b = {
+const styles$c = {
   userAvatar,
   sourcegraphGradientBorder
 };
@@ -82145,7 +82161,7 @@ const UserAvatar = ({
       className
     }
   );
-  return sourcegraphGradientBorder2 ? /* @__PURE__ */ jsx("div", { className: clsx$1(styles$b.sourcegraphGradientBorder, "tw-inline-flex", className), children: inner }) : inner;
+  return sourcegraphGradientBorder2 ? /* @__PURE__ */ jsx("div", { className: clsx$1(styles$c.sourcegraphGradientBorder, "tw-inline-flex", className), children: inner }) : inner;
 };
 const InnerUserAvatar = ({
   user,
@@ -82168,7 +82184,7 @@ const InnerUserAvatar = ({
     return /* @__PURE__ */ jsx(
       "img",
       {
-        className: clsx$1(styles$b.userAvatar, className),
+        className: clsx$1(styles$c.userAvatar, className),
         src: url,
         role: "presentation",
         title: title2,
@@ -82183,9 +82199,9 @@ const InnerUserAvatar = ({
     "div",
     {
       title: title2,
-      className: clsx$1(styles$b.userAvatar, className),
+      className: clsx$1(styles$c.userAvatar, className),
       style: { width: `${size2}px`, height: `${size2}px`, fontSize: `${size2 / 3}px` },
-      children: /* @__PURE__ */ jsx("span", { className: styles$b.initials, children: getInitials((user == null ? void 0 : user.displayName) || (user == null ? void 0 : user.username) || "") })
+      children: /* @__PURE__ */ jsx("span", { className: styles$c.initials, children: getInitials((user == null ? void 0 : user.displayName) || (user == null ? void 0 : user.username) || "") })
     }
   );
 };
@@ -82209,7 +82225,7 @@ const prompt = "_prompt_1lclp_18";
 const promptContent = "_prompt--content_1lclp_1";
 const promptTitle = "_prompt--title_1lclp_1";
 const promptName = "_prompt--name_1lclp_1";
-const styles$a = {
+const styles$b = {
   item,
   itemIndicator,
   promptAvatar,
@@ -82231,7 +82247,7 @@ const ActionItem = (props) => {
     {
       value: commandRowValue(action),
       disabled: isDisabled,
-      className: clsx$1(className, styles$a.item),
+      className: clsx$1(className, styles$b.item),
       tooltip: isDisabled ? "Edit-like action is not supported in current read-only environment" : void 0,
       onSelect,
       children: action.actionType === "prompt" ? /* @__PURE__ */ jsx(ActionPrompt, { prompt: action }) : /* @__PURE__ */ jsx(ActionCommand, { command: action })
@@ -82240,30 +82256,30 @@ const ActionItem = (props) => {
 };
 const ActionPrompt = (props) => {
   const { prompt: prompt2 } = props;
-  return /* @__PURE__ */ jsxs("div", { className: styles$a.prompt, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$b.prompt, children: [
     prompt2.createdBy && /* @__PURE__ */ jsx(
       UserAvatar,
       {
         size: ACTION_ITEM_AVATAR_SIZE,
         user: { ...prompt2.createdBy, endpoint: "" },
-        className: styles$a.promptAvatar
+        className: styles$b.promptAvatar
       }
     ),
-    !prompt2.createdBy && /* @__PURE__ */ jsx("div", { className: styles$a.promptAvatar, children: /* @__PURE__ */ jsx(PencilRuler, { size: 16, strokeWidth: 1.5, className: styles$a.promptIcon }) }),
-    /* @__PURE__ */ jsxs("div", { className: styles$a.promptContent, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$a.promptTitle, children: [
-        /* @__PURE__ */ jsx("strong", { className: styles$a.promptName, children: prompt2.name }),
+    !prompt2.createdBy && /* @__PURE__ */ jsx("div", { className: styles$b.promptAvatar, children: /* @__PURE__ */ jsx(PencilRuler, { size: 16, strokeWidth: 1.5, className: styles$b.promptIcon }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles$b.promptContent, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$b.promptTitle, children: [
+        /* @__PURE__ */ jsx("strong", { className: styles$b.promptName, children: prompt2.name }),
         prompt2.draft && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "tw-text-xxs tw-mt-0.5", children: "Draft" }),
         prompt2.recommended && /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Pin, { size: 12, className: styles$a.promptIcon }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Pin, { size: 12, className: styles$b.promptIcon }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: "This prompt was recommended by your admin" })
         ] }),
         prompt2.mode !== "CHAT" && /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Pencil, { size: 12, className: styles$a.promptIcon }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Pencil, { size: 12, className: styles$b.promptIcon }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: "This is an edit prompt" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: styles$a.promptDescription, children: prompt2.description ?? "(No description provided)" })
+      /* @__PURE__ */ jsx("span", { className: styles$b.promptDescription, children: prompt2.description ?? "(No description provided)" })
     ] })
   ] });
 };
@@ -82285,11 +82301,11 @@ const ActionCommand = (props) => {
   const { command } = props;
   const Icon2 = COMMAND_ICONS[command.key] ?? PencilRuler;
   const description2 = command.type !== "default" ? command.description : COMMAND_DESCRIPTIONS[command.key];
-  return /* @__PURE__ */ jsxs("div", { className: styles$a.prompt, children: [
-    /* @__PURE__ */ jsx("div", { className: styles$a.promptAvatar, children: /* @__PURE__ */ jsx(Icon2, { size: 16, strokeWidth: 1.5, className: styles$a.promptIcon }) }),
-    /* @__PURE__ */ jsxs("div", { className: styles$a.promptContent, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$a.promptTitle, children: [
-        /* @__PURE__ */ jsx("strong", { className: styles$a.promptName, children: command.type === "default" ? command.description : command.key }),
+  return /* @__PURE__ */ jsxs("div", { className: styles$b.prompt, children: [
+    /* @__PURE__ */ jsx("div", { className: styles$b.promptAvatar, children: /* @__PURE__ */ jsx(Icon2, { size: 16, strokeWidth: 1.5, className: styles$b.promptIcon }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles$b.promptContent, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$b.promptTitle, children: [
+        /* @__PURE__ */ jsx("strong", { className: styles$b.promptName, children: command.type === "default" ? command.description : command.key }),
         command.type !== "default" && /* @__PURE__ */ jsx(
           Badge,
           {
@@ -82299,7 +82315,7 @@ const ActionCommand = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("span", { className: styles$a.promptDescription, children: description2 ?? "(No description provided)" })
+      /* @__PURE__ */ jsx("span", { className: styles$b.promptDescription, children: description2 ?? "(No description provided)" })
     ] })
   ] });
 };
@@ -82309,7 +82325,7 @@ const listInputContainer = "_list--input-container_mvyfp_1";
 const listInput = "_list--input_mvyfp_1";
 const listChips = "_list-chips_mvyfp_1";
 const listItem = "_list--item_mvyfp_41";
-const styles$9 = {
+const styles$a = {
   list,
   listInputContainer,
   listInput,
@@ -82454,19 +82470,19 @@ const PromptList = (props) => {
       tabIndex: 0,
       shouldFilter: false,
       defaultValue: "xxx-no-item",
-      className: clsx$1(className, styles$9.list, {
-        [styles$9.listChips]: appearanceMode === "chips-list"
+      className: clsx$1(className, styles$a.list, {
+        [styles$a.listChips]: appearanceMode === "chips-list"
       }),
       disablePointerSelection: true,
       children: /* @__PURE__ */ jsxs(CommandList, { className, children: [
-        showSearch && /* @__PURE__ */ jsx("div", { className: clsx$1(inputPaddingClass, inputClassName, styles$9.listInputContainer), children: /* @__PURE__ */ jsx(
+        showSearch && /* @__PURE__ */ jsx("div", { className: clsx$1(inputPaddingClass, inputClassName, styles$a.listInputContainer), children: /* @__PURE__ */ jsx(
           CommandInput,
           {
             value: query,
             onValueChange: setQuery,
             placeholder: "Search...",
             autoFocus: true,
-            className: styles$9.listInput
+            className: styles$a.listInput
           }
         ) }),
         !result && !error2 && /* @__PURE__ */ jsx(CommandLoading, { className: itemPaddingClass, children: "Loading..." }),
@@ -82490,7 +82506,7 @@ const PromptList = (props) => {
           {
             action,
             onSelect,
-            className: clsx$1(itemPaddingClass, styles$9.listItem)
+            className: clsx$1(itemPaddingClass, styles$a.listItem)
           },
           commandRowValue(action)
         )),
@@ -82779,7 +82795,7 @@ const PromptSelectField = ({ onSelect, onCloseByEscape, className, __storybook__
       "aria-label": "Insert prompt",
       popoverContent: (close2) => /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-max-h-[500px] tw-overflow-auto tw-relative", children: [
         /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-row tw-gap-4 tw-px-2 tw-py-3 tw-border-b tw-border-border tw-mb-1", children: /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-justify-start", children: [
-          /* @__PURE__ */ jsx("div", { className: "tw-w-1/2", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
             PromptOwnerFilter,
             {
               value: ownerFilterValue,
@@ -82789,7 +82805,7 @@ const PromptSelectField = ({ onSelect, onCloseByEscape, className, __storybook__
               userId: userId && !userIdError ? userId : void 0
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { className: "tw-w-1/2", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
             PromptTagsFilter,
             {
               selectedTagId,
@@ -82816,25 +82832,17 @@ const PromptSelectField = ({ onSelect, onCloseByEscape, className, __storybook__
             promptFilters
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "tw-sticky tw-bottom-0 tw-w-full tw-bg-popover tw-py-2 tw-px-3 tw-border-t tw-border-border", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "tw-sticky tw-bottom-0 tw-w-full tw-bg-popover tw-py-2 tw-px-3 tw-border-t tw-border-border", children: /* @__PURE__ */ jsxs(
           "a",
           {
             href: promptLibraryUrl,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "tw-w-full",
-            children: /* @__PURE__ */ jsxs(
-              Button,
-              {
-                type: "button",
-                variant: "link",
-                className: "tw-w-full tw-justify-center tw-text-sm tw-text-muted-foreground",
-                children: [
-                  "Explore Prompt Library",
-                  /* @__PURE__ */ jsx(ExternalLink, { className: "tw-ml-1 tw-size-6" })
-                ]
-              }
-            )
+            className: "tw-w-full tw-flex tw-items-center tw-p-2 tw-gap-2 tw-justify-center tw-align-middle tw-text-sm tw-underline-offset-4 hover:tw-underline hover:tw-text-link-hover tw-text-muted-foreground",
+            children: [
+              "Explore Prompt Library",
+              /* @__PURE__ */ jsx(ExternalLink, { className: "tw-ml-1 tw-size-6" })
+            ]
           }
         ) })
       ] }),
@@ -83390,6 +83398,7 @@ const HumanMessageEditor = ({
 }) => {
   var _a2, _b, _c;
   const telemetryRecorder = useTelemetryRecorder();
+  const { portalContainer } = useUIConfiguration();
   const editorRef = useRef$1(null);
   useImperativeHandle(parentEditorRef, () => editorRef.current);
   const [isEmptyEditorValue, setIsEmptyEditorValue] = useState$1(
@@ -83631,10 +83640,10 @@ const HumanMessageEditor = ({
       "div",
       {
         className: clsx$1(
-          styles$e.container,
+          styles$f.container,
           {
-            [styles$e.sent]: isSent,
-            [styles$e.focused]: focused2
+            [styles$f.sent]: isSent,
+            [styles$f.focused]: focused2
           },
           "tw-transition",
           className
@@ -83657,9 +83666,10 @@ const HumanMessageEditor = ({
               editorRef,
               disabled: disabled2,
               contextWindowSizeInTokens,
-              editorClassName: styles$e.editor,
-              contentEditableClassName: styles$e.editorContentEditable,
-              openExternalLink
+              editorClassName: styles$f.editor,
+              contentEditableClassName: styles$f.editorContentEditable,
+              openExternalLink,
+              mentionPortalContainer: portalContainer
             }
           ),
           !disabled2 && /* @__PURE__ */ jsx(
@@ -83672,7 +83682,7 @@ const HumanMessageEditor = ({
               onGapClick,
               focusEditor,
               hidden: !focused2 && isSent,
-              className: styles$e.toolbar,
+              className: styles$f.toolbar,
               intent: selectedIntent,
               extensionAPI,
               onMediaUpload,
@@ -83750,8 +83760,12 @@ const HumanMessageCellContent = memo$2((props) => {
     }
   );
 });
+const container$2 = "_container_bgbsm_1";
+const styles$9 = {
+  container: container$2
+};
 const ScrollDown = (props) => {
-  return /* @__PURE__ */ jsx("div", { className: "tw-relative tw-left-1/2 tw--translate-x-1/2 tw-z-50 tw-w-fit tw-h-0 tw--top-8", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: styles$9.container, children: /* @__PURE__ */ jsxs(
     Button,
     {
       variant: "outline",
@@ -86894,7 +86908,7 @@ const Chat = ({
   }, []);
   const [activeChatContext, setActiveChatContext] = useState$1();
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    !chatEnabled && /* @__PURE__ */ jsx("div", { className: styles$k.chatDisabled, children: "Cody chat is disabled by your Sourcegraph site administrator" }),
+    !chatEnabled && /* @__PURE__ */ jsx("div", { className: styles$l.chatDisabled, children: "Cody chat is disabled by your Sourcegraph site administrator" }),
     /* @__PURE__ */ jsx(
       Transcript,
       {
@@ -86951,15 +86965,15 @@ const StorageWarningBanner = ({ extensionAPI, vscodeAPI }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `${styles$g.errorItem} tw-bg-gray-500/10 tw-border-l-4 tw-border-blue-500 tw-relative`,
+      className: `${styles$h.errorItem} tw-bg-gray-500/10 tw-border-l-4 tw-border-blue-500 tw-relative`,
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles$g.icon, children: /* @__PURE__ */ jsx(TriangleAlert, { className: "tw-h-6 tw-w-6 tw-text-blue-600" }) }),
-        /* @__PURE__ */ jsxs("div", { className: styles$g.body, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$h.icon, children: /* @__PURE__ */ jsx(TriangleAlert, { className: "tw-h-6 tw-w-6 tw-text-blue-600" }) }),
+        /* @__PURE__ */ jsxs("div", { className: styles$h.body, children: [
           /* @__PURE__ */ jsxs("header", { children: [
             /* @__PURE__ */ jsx("h1", { className: "tw-text-blue-500", children: "Large Chat History Detected" }),
             /* @__PURE__ */ jsx("p", { className: "tw-text-gray-500", children: "Your large chat history is being loaded into memory, which may slow down Cody's performance. To improve performance, select the options below to export your chat history to save a backup, then clear it to free up memory. You can also go to the history page to perform these actions." })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: `${styles$g.actions} tw-flex tw-gap-3 tw-flex-wrap`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${styles$h.actions} tw-flex tw-gap-3 tw-flex-wrap`, children: [
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -88303,6 +88317,8 @@ function getCreateNewChatCommand(options) {
   return IDE === CodyIDE.Web ? "cody.chat.new" : webviewType === "sidebar" || !multipleWebviewsEnabled ? "cody.chat.newPanel" : "cody.chat.newEditorPanel";
 }
 const HISTORY_ITEMS_PER_PAGE = 20;
+const SEARCH_TIMEOUT_MS = 3e3;
+const SEARCH_CHUNK_SIZE = 100;
 const initialUIState = {
   searchText: "",
   visibleItems: HISTORY_ITEMS_PER_PAGE,
@@ -88322,7 +88338,7 @@ const HistoryTab = (props) => {
     "div",
     {
       className: clsx$1(
-        "tw-flex tw-flex-col tw-justify-center tw-overflow-hidden tw-h-full tw-w-full tw-m-4",
+        "tw-flex tw-flex-col tw-justify-center tw-overflow-hidden tw-h-full tw-w-full",
         {
           "tw-items-center": !chats
         }
@@ -88344,20 +88360,74 @@ const HistoryTabWithData = ({
   const observerRef = useRef$1(null);
   const loadingRef = useRef$1(null);
   const renameInputRef = useRef$1(null);
-  const nonEmptyChats = useMemo$1(() => chats.filter((c2) => {
-    var _a2;
-    return (_a2 = c2 == null ? void 0 : c2.firstHumanMessageText) == null ? void 0 : _a2.length;
-  }), [chats]);
-  const filteredChats = useMemo$1(() => {
-    if (!uiState.searchText.trim()) return nonEmptyChats;
-    const searchTerm = uiState.searchText.toLowerCase();
-    return nonEmptyChats.filter(
-      (chat2) => {
-        var _a2, _b;
-        return ((_a2 = chat2.chatTitle) == null ? void 0 : _a2.toLowerCase().includes(searchTerm)) || ((_b = chat2.firstHumanMessageText) == null ? void 0 : _b.toLowerCase().includes(searchTerm));
+  const nonEmptyChats = useMemo$1(
+    () => chats.filter((c2) => {
+      var _a2, _b;
+      return ((_a2 = c2 == null ? void 0 : c2.chatTitle) == null ? void 0 : _a2.length) || ((_b = c2 == null ? void 0 : c2.firstHumanMessageText) == null ? void 0 : _b.length);
+    }),
+    [chats]
+  );
+  const [filteredChats, setFilteredChats] = useState$1([]);
+  const [isSearching, setIsSearching] = useState$1(false);
+  const [searchTimedOut, setSearchTimedOut] = useState$1(false);
+  const [debouncedSearchText, setDebouncedSearchText] = useState$1("");
+  useEffect$2(() => {
+    const id2 = window.setTimeout(() => {
+      setDebouncedSearchText(uiState.searchText);
+    }, 150);
+    return () => clearTimeout(id2);
+  }, [uiState.searchText]);
+  useEffect$2(() => {
+    if (!debouncedSearchText.trim()) {
+      setFilteredChats(nonEmptyChats);
+      setIsSearching(false);
+      setSearchTimedOut(false);
+      return;
+    }
+    const searchTerm = debouncedSearchText.toLowerCase();
+    const results = [];
+    const startTime = Date.now();
+    let currentIndex = 0;
+    let aborted = false;
+    const timeoutIds = [];
+    setIsSearching(true);
+    setSearchTimedOut(false);
+    const processChunk = () => {
+      var _a2, _b;
+      if (aborted) return;
+      const elapsed = Date.now() - startTime;
+      if (elapsed > SEARCH_TIMEOUT_MS) {
+        setFilteredChats(results);
+        setIsSearching(false);
+        setSearchTimedOut(true);
+        return;
       }
-    );
-  }, [nonEmptyChats, uiState.searchText]);
+      const endIndex = Math.min(currentIndex + SEARCH_CHUNK_SIZE, nonEmptyChats.length);
+      for (let i = currentIndex; i < endIndex; i++) {
+        const chat2 = nonEmptyChats[i];
+        const matches3 = chat2.searchableText !== void 0 ? chat2.searchableText.includes(searchTerm) : ((_a2 = chat2.chatTitle) == null ? void 0 : _a2.toLowerCase().includes(searchTerm)) || ((_b = chat2.firstHumanMessageText) == null ? void 0 : _b.toLowerCase().includes(searchTerm));
+        if (matches3) {
+          results.push(chat2);
+        }
+      }
+      currentIndex = endIndex;
+      if (currentIndex < nonEmptyChats.length) {
+        const id2 = window.setTimeout(processChunk, 0);
+        timeoutIds.push(id2);
+      } else {
+        setFilteredChats(results);
+        setIsSearching(false);
+        setSearchTimedOut(false);
+      }
+    };
+    processChunk();
+    return () => {
+      aborted = true;
+      for (const id2 of timeoutIds) {
+        clearTimeout(id2);
+      }
+    };
+  }, [nonEmptyChats, debouncedSearchText]);
   const displayedChats = useMemo$1(
     () => filteredChats.slice(0, uiState.visibleItems),
     [filteredChats, uiState.visibleItems]
@@ -88598,6 +88668,11 @@ const HistoryTabWithData = ({
           }
         ) }),
         /* @__PURE__ */ jsxs(CommandList, { className: "tw-flex-1 tw-overflow-y-auto tw-m-2", children: [
+          isSearching && /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-justify-center tw-items-center tw-py-4", children: [
+            /* @__PURE__ */ jsx(LoadingDots, {}),
+            /* @__PURE__ */ jsx("span", { className: "tw-ml-2 tw-text-sm tw-text-muted-foreground", children: "Searching..." })
+          ] }),
+          searchTimedOut && /* @__PURE__ */ jsx("div", { className: "tw-text-center tw-py-2 tw-text-sm tw-text-muted-foreground", children: "Search timed out. Showing partial results." }),
           displayedChats.map((chat2) => {
             const id2 = chat2.lastInteractionTimestamp;
             const lastMessage = chat2.firstHumanMessageText;
@@ -88608,27 +88683,27 @@ const HistoryTabWithData = ({
             return /* @__PURE__ */ jsxs(
               CommandItem,
               {
-                className: `tw-text-left tw-truncate tw-w-full tw-rounded-md tw-text-sm ${styles$4.historyItem} tw-overflow-hidden tw-text-sidebar-foreground tw-align-baseline`,
+                className: `tw-text-left tw-truncate tw-w-full tw-gap-2 tw-rounded-md tw-text-sm ${styles$4.historyItem} tw-overflow-hidden tw-text-sidebar-foreground tw-align-baseline`,
                 onSelect: () => vscodeAPI.postMessage({ command: "restoreHistory", chatID: id2 }),
                 title: chat2.model,
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "tw-truncate tw-w-full tw-flex tw-flex-col tw-gap-2", children: [
-                    /* @__PURE__ */ jsx("div", { children: isRenaming ? /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx("div", { className: "tw-truncate", children: isRenaming ? /* @__PURE__ */ jsx(
                       "input",
                       {
                         ref: renameInputRef,
                         type: "text",
                         value: uiState.renameInputValue,
-                        onChange: (e2) => updateUIState({ renameInputValue: e2.target.value }),
                         onKeyDown: (e2) => {
                           if (e2.key === "Enter") handleRenameSubmit(e2, id2);
                           else if (e2.key === "Escape") cancelRename();
                         },
+                        onChange: (e2) => updateUIState({ renameInputValue: e2.target.value }),
                         className: "tw-w-full tw-bg-input-background tw-text-input-foreground tw-border tw-border-border tw-rounded tw-px-2 tw-py-1 tw-text-sm",
                         onClick: (e2) => e2.stopPropagation()
                       }
                     ) : mode !== IntentEnum.Chat ? `[${mode}] ${chatTitle}` : chatTitle }),
-                    /* @__PURE__ */ jsx("div", { className: "tw-text-left tw-text-muted-foreground", children: timestamp })
+                    /* @__PURE__ */ jsx("div", { className: "tw-truncate tw-text-left tw-text-muted-foreground", children: timestamp })
                   ] }),
                   isRenaming ? /* @__PURE__ */ jsx(
                     Button,
@@ -88636,12 +88711,12 @@ const HistoryTabWithData = ({
                       variant: "outline",
                       title: "Enter to confirm or Escape to cancel",
                       "aria-label": "rename-history-submit-button",
-                      className: styles$4.deleteButton,
+                      className: `${styles$4.deleteButton} tw-self-start`,
                       onClick: (e2) => handleRenameSubmit(e2, id2),
                       onKeyDown: (e2) => handleRenameSubmit(e2, id2),
                       children: /* @__PURE__ */ jsx(Check, { className: "tw-w-8 tw-h-8", size: 16, strokeWidth: "1.25" })
                     }
-                  ) : /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-gap-2", children: [
+                  ) : /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-gap-2 tw-self-start", children: [
                     /* @__PURE__ */ jsx(
                       Button,
                       {
@@ -89211,17 +89286,17 @@ const UserMenu = ({
   );
 };
 const USER_MENU_AVATAR_SIZE = 16;
-const tabsRoot = "_tabs-root_hvph1_10";
-const tabsContainer = "_tabs-container_hvph1_17";
-const tabs = "_tabs_hvph1_10";
-const subTabs = "_sub-tabs_hvph1_40";
-const tabActionLabel = "_tab-action-label_hvph1_56";
-const tabsRootCodyWeb = "_tabs-root--cody-web_hvph1_68";
-const dialogOverlay = "_dialog-overlay_hvph1_1";
-const dialogContent = "_dialog-content_hvph1_1";
-const dialogTitle = "_dialog-title_hvph1_1";
-const dialogDescription = "_dialog-description_hvph1_1";
-const dialogFooter = "_dialog-footer_hvph1_1";
+const tabsRoot = "_tabs-root_xz9m6_10";
+const tabsContainer = "_tabs-container_xz9m6_17";
+const tabs = "_tabs_xz9m6_10";
+const subTabs = "_sub-tabs_xz9m6_40";
+const tabActionLabel = "_tab-action-label_xz9m6_56";
+const tabsRootCodyWeb = "_tabs-root--cody-web_xz9m6_68";
+const dialogOverlay = "_dialog-overlay_xz9m6_1";
+const dialogContent = "_dialog-content_xz9m6_1";
+const dialogTitle = "_dialog-title_xz9m6_1";
+const dialogDescription = "_dialog-description_xz9m6_1";
+const dialogFooter = "_dialog-footer_xz9m6_1";
 const styles$3 = {
   tabsRoot,
   tabsContainer,
@@ -89377,6 +89452,7 @@ const ActionButtonWithConfirmation = (props) => {
     dialogDescription: dialogDescription2
   } = props;
   const [state, setState] = useState$1(false);
+  const { portalContainer } = useUIConfiguration();
   return /* @__PURE__ */ jsxs($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, { open: state, onOpenChange: setState, children: [
     /* @__PURE__ */ jsx(
       TabButton,
@@ -89390,7 +89466,7 @@ const ActionButtonWithConfirmation = (props) => {
         onClick: () => setState(true)
       }
     ),
-    /* @__PURE__ */ jsxs($5d3850c4d0b4e6c7$export$602eac185826482c, { children: [
+    /* @__PURE__ */ jsxs($5d3850c4d0b4e6c7$export$602eac185826482c, { container: portalContainer, children: [
       /* @__PURE__ */ jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: styles$3.dialogOverlay }),
       /* @__PURE__ */ jsxs($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { className: styles$3.dialogContent, "data-cody-ui-dialog": true, children: [
         /* @__PURE__ */ jsx($5d3850c4d0b4e6c7$export$f99233281efd08a0, { className: styles$3.dialogTitle, children: dialogTitle2 }),
@@ -89573,7 +89649,7 @@ const CodyPanel = ({
       defaultValue: View.Chat,
       value: view,
       orientation: "vertical",
-      className: styles$l.outerContainer,
+      className: styles$m.outerContainer,
       children: [
         /* @__PURE__ */ jsx(Notices, { instanceNotices }),
         config.webviewType !== "editor" && /* @__PURE__ */ jsx(
@@ -89633,15 +89709,15 @@ const ErrorBanner = ({ errors, setErrors, vscodeAPI }) => {
     const extensionAPI = useExtensionAPI();
     return /* @__PURE__ */ jsx(StorageWarningBanner, { extensionAPI, vscodeAPI });
   }
-  return /* @__PURE__ */ jsx("div", { className: styles$l.errorContainer, children: errors.map((error2, i) => (
+  return /* @__PURE__ */ jsx("div", { className: styles$m.errorContainer, children: errors.map((error2, i) => (
     // biome-ignore lint/suspicious/noArrayIndexKey: error strings might not be unique, so we have no natural id
-    /* @__PURE__ */ jsxs("div", { className: styles$l.error, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$m.error, children: [
       /* @__PURE__ */ jsx("span", { children: error2 }),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: styles$l.closeBtn,
+          className: styles$m.closeBtn,
           onClick: () => setErrors(errors.filter((e2) => e2 !== error2)),
           children: "×"
         }
@@ -89678,7 +89754,8 @@ function getAppWrappers({
   telemetryRecorder,
   config,
   clientConfig,
-  staticDefaultContext
+  staticDefaultContext,
+  uiConfiguration
 }) {
   return [
     {
@@ -89700,6 +89777,10 @@ function getAppWrappers({
     {
       component: LinkOpenerProvider,
       props: { vscodeAPI }
+    },
+    {
+      component: UIConfigurationProvider,
+      props: { value: uiConfiguration }
     }
   ];
 }
@@ -90004,6 +90085,7 @@ const CodyWebChat = ({
   agentConfig,
   initialContext,
   className,
+  portalContainer,
   onExternalApiReady,
   controller,
   viewType
@@ -90032,6 +90114,7 @@ const CodyWebChat = ({
       vscodeAPI: agent2.vscodeAPI,
       initialContext,
       className: styles$2.container,
+      portalContainer,
       onExternalApiReady,
       webview: viewType === "page" ? "editor" : "sidebar",
       controller
@@ -90043,6 +90126,7 @@ const CodyWebPanel = (props) => {
     vscodeAPI,
     initialContext: initialContextData,
     className,
+    portalContainer,
     onExternalApiReady,
     webview,
     controller
@@ -90074,7 +90158,7 @@ const CodyWebPanel = (props) => {
           break;
         case "history.download": {
           if (extensionApiRef.current) {
-            downloadChatHistory(extensionApiRef.current);
+            void downloadChatHistory(extensionApiRef.current);
           }
           break;
         }
@@ -90229,9 +90313,10 @@ const CodyWebPanel = (props) => {
       telemetryRecorder,
       config,
       clientConfig,
-      staticDefaultContext
+      staticDefaultContext,
+      uiConfiguration: { portalContainer }
     }),
-    [vscodeAPI, telemetryRecorder, config, clientConfig, staticDefaultContext]
+    [vscodeAPI, telemetryRecorder, config, clientConfig, staticDefaultContext, portalContainer]
   );
   const CONTEXT_MENTIONS_SETTINGS = useMemo$1(() => {
     const { repository } = initialContextData ?? {};
@@ -90290,17 +90375,15 @@ const CodyWebPanel = (props) => {
     }
   ) }) }) });
 };
-const root = "_root_n2nil_6";
-const container = "_container_n2nil_14";
-const editor = "_editor_n2nil_28";
-const toolbar = "_toolbar_n2nil_34";
-const focused = "_focused_n2nil_39";
-const editorContentEditable = "_editor-content-editable_n2nil_41";
+const root = "_root_65pir_1";
+const container = "_container_65pir_11";
+const editor = "_editor_65pir_25";
+const focused = "_focused_65pir_31";
+const editorContentEditable = "_editor-content-editable_65pir_32";
 const styles = {
   root,
   container,
   editor,
-  toolbar,
   focused,
   editorContentEditable
 };
@@ -90314,6 +90397,7 @@ const CodyPromptTemplate = ({
   disabled: disabled2,
   initialEditorState,
   placeholder: placeholder2,
+  portalContainer,
   onEditorApiReady
 }) => {
   const agent2 = useCodyWebAgent(agentConfig);
@@ -90334,6 +90418,7 @@ const CodyPromptTemplate = ({
   return /* @__PURE__ */ jsx(AppWrapper, { children: /* @__PURE__ */ jsx("div", { className: classNames(className, styles.root), children: /* @__PURE__ */ jsx(
     CodyPromptTemplatePanel,
     {
+      portalContainer,
       vscodeAPI: agent2.vscodeAPI,
       className: styles.container,
       disabled: disabled2,
@@ -90344,7 +90429,15 @@ const CodyPromptTemplate = ({
   ) }) });
 };
 const CodyPromptTemplatePanel = (props) => {
-  const { vscodeAPI, className, disabled: disabled2, initialEditorState, placeholder: placeholder2, onEditorApiReady } = props;
+  const {
+    vscodeAPI,
+    className,
+    disabled: disabled2,
+    initialEditorState,
+    placeholder: placeholder2,
+    portalContainer,
+    onEditorApiReady
+  } = props;
   const dispatchClientAction = useClientActionDispatcher();
   const [clientConfig, setClientConfig] = useState$1(null);
   const editorRef = useRef$1(null);
@@ -90377,9 +90470,10 @@ const CodyPromptTemplatePanel = (props) => {
       telemetryRecorder,
       config: null,
       clientConfig,
-      staticDefaultContext
+      staticDefaultContext,
+      uiConfiguration: { portalContainer }
     }),
-    [vscodeAPI, telemetryRecorder, clientConfig, staticDefaultContext]
+    [vscodeAPI, telemetryRecorder, clientConfig, staticDefaultContext, portalContainer]
   );
   const CONTEXT_MENTIONS_SETTINGS = useMemo$1(() => {
     return {
@@ -90402,7 +90496,8 @@ const CodyPromptTemplatePanel = (props) => {
       contextWindowSizeInTokens: 4096,
       editorClassName: styles.editor,
       contentEditableClassName: styles.editorContentEditable,
-      openExternalLink
+      openExternalLink,
+      mentionPortalContainer: portalContainer
     }
   ) }) }) });
 };