diff --git a/frontend/ee b/frontend/ee
index dcd948d284..081827444f 160000
--- a/frontend/ee
+++ b/frontend/ee
@@ -1 +1 @@
-Subproject commit dcd948d284b5f14a868480830e09b90496db8572
+Subproject commit 081827444f17634d22a2a65f258ced1b313d9b4b
diff --git a/frontend/src/AppBuilder/CodeEditor/CodehinterOverlayTriggers.jsx b/frontend/src/AppBuilder/CodeEditor/CodehinterOverlayTriggers.jsx
new file mode 100644
index 0000000000..c79c473169
--- /dev/null
+++ b/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 (
+
+ {!isPanelOpen && (
+ openSearchPanel(view)}
+ />
+ )}
+ {renderCopilot && renderCopilot()}
+
+ );
+};
diff --git a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx b/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
index ef5a5dbd7d..550336bba3 100644
--- a/frontend/src/AppBuilder/CodeEditor/MultiLineCodeEditor.jsx
+++ b/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}
>
-
+
{
isMultiEditor={true}
isQueryManager={isInsideQueryPane}
/>
- {renderCopilot && renderCopilot()}
{
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))}
/>
{showPreview && (
diff --git a/frontend/src/AppBuilder/CodeEditor/SearchBox.jsx b/frontend/src/AppBuilder/CodeEditor/SearchBox.jsx
index 28f7451b95..140ff2a7db 100644
--- a/frontend/src/AppBuilder/CodeEditor/SearchBox.jsx
+++ b/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 }) {
);
}
-
-export const SearchBtn = ({ view }) => {
- return (
-
- openSearchPanel(view)}
- />
-
- );
-};
diff --git a/frontend/src/AppBuilder/CodeEditor/SearchBox.scss b/frontend/src/AppBuilder/CodeEditor/SearchBox.scss
index 24c948b0ee..79de28f28a 100644
--- a/frontend/src/AppBuilder/CodeEditor/SearchBox.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 4fd1083987..297cc5c9fd 100644
--- a/frontend/src/_styles/theme.scss
+++ b/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;