Fixed the codehinter overlay triggers UI

frontend/ee

@@ -1 +1 @@
-Subproject commit dcd948d284b5f14a868480830e09b90496db8572
+Subproject commit 081827444f17634d22a2a65f258ced1b313d9b4b

frontend/src/AppBuilder/CodeEditor/CodehinterOverlayTriggers.jsx

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import { openSearchPanel } from '@codemirror/search';
+import './SearchBox.scss';
+import { Button as ButtonComponent } from '@/components/ui/Button/Button.jsx';
+
+export const CodeHinterBtns = ({ view, isPanelOpen, renderCopilot }) => {
+  return (
+    <div
+      className="d-flex tw-flex-col align-items-end tw-gap-[2.5px] w-100 position-absolute tw-pt-[4px] tw-pr-[4px]"
+      style={{ top: isPanelOpen ? '44px' : 0 }}
+    >
+      {!isPanelOpen && (
+        <ButtonComponent
+          iconOnly
+          trailingIcon="search01"
+          size="small"
+          variant="outline"
+          ariaLabel="Open search panel"
+          className="codehinter-search-btn"
+          onClick={() => openSearchPanel(view)}
+        />
+      )}
+      {renderCopilot && renderCopilot()}
+    </div>
+  );
+};

frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx

@@ -21,8 +21,9 @@ import { removeNestedDoubleCurlyBraces } from '@/_helpers/utils';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
 import { search, searchKeymap, searchPanelOpen } from '@codemirror/search';
-import { handleSearchPanel, SearchBtn } from './SearchBox';
+import { handleSearchPanel } from './SearchBox';
 import { isInsideParent } from './utils';
+import { CodeHinterBtns } from './CodehinterOverlayTriggers';
 
 const langSupport = Object.freeze({
   javascript: javascript(),
@@ -73,6 +74,8 @@ const MultiLineCodeEditor = (props) => {
 
   const [editorView, setEditorView] = React.useState(null);
 
+  const [isSearchPanelOpen, setIsSearchPanelOpen] = React.useState(false);
+
   const handleOnBlur = () => {
     if (!delayOnChange) return onChange(currentValueRef.current);
     setTimeout(() => {
@@ -248,7 +251,7 @@ const MultiLineCodeEditor = (props) => {
       ref={wrapperRef}
     >
       <div className={`${className} ${darkMode && 'cm-codehinter-dark-themed'}`}>
-        <SearchBtn view={editorView} />
+        <CodeHinterBtns view={editorView} isPanelOpen={isSearchPanelOpen} renderCopilot={renderCopilot} />
         <CodeHinter.PopupIcon
           callback={handleTogglePopupExapand}
           icon="portal-open"
@@ -256,7 +259,6 @@ const MultiLineCodeEditor = (props) => {
           isMultiEditor={true}
           isQueryManager={isInsideQueryPane}
         />
-        {renderCopilot && renderCopilot()}
 
         <CodeHinter.Portal
           isCopilotEnabled={false}
@@ -316,12 +318,7 @@ const MultiLineCodeEditor = (props) => {
                 readOnly={readOnly}
                 editable={editable} //for transformations in query manager
                 onCreateEditor={(view) => setEditorView(view)}
-                onUpdate={(view) => {
-                  const icon = document.querySelector('.codehinter-search-btn');
-                  if (searchPanelOpen(view.state)) {
-                    icon.style.display = 'none';
-                  } else icon.style.display = 'block';
-                }}
+                onUpdate={(view) => setIsSearchPanelOpen(searchPanelOpen(view.state))}
               />
             </div>
             {showPreview && (

frontend/src/AppBuilder/CodeEditor/SearchBox.jsx

@@ -9,7 +9,6 @@ import {
   findPrevious,
   replaceNext,
   replaceAll,
-  openSearchPanel,
 } from '@codemirror/search';
 import './SearchBox.scss';
 import InputComponent from '@/components/ui/Input/Index.jsx';
@@ -162,22 +161,3 @@ function SearchPanel({ view }) {
     </div>
   );
 }
-
-export const SearchBtn = ({ view }) => {
-  return (
-    <div
-      className="d-flex justify-content-end w-100 position-absolute tw-pt-[3px] tw-pr-[4px] codehinter-search-btn-wrapper"
-      style={{ top: 0 }}
-    >
-      <ButtonComponent
-        iconOnly
-        trailingIcon="search01"
-        size="small"
-        variant="outline"
-        ariaLabel="Open search panel"
-        className="codehinter-search-btn"
-        onClick={() => openSearchPanel(view)}
-      />
-    </div>
-  );
-};

frontend/src/AppBuilder/CodeEditor/SearchBox.scss

@@ -44,7 +44,5 @@
 }
 
 .code-hinter-wrapper .codehinter-search-btn {
-    display: block;
-    padding-top: 1px;
-    z-index: 10000;
+    z-index: 1000;
 }

frontend/src/_styles/theme.scss

@@ -18393,6 +18393,10 @@ section.ai-message-prompt-input-wrapper {
   }
 }
 
+.codehinter-copilot-btn {
+  z-index: 1000;
+}
+
 #copilot-menu {
   width: 440px;
   max-width: 440px;