From d8c1d1a2db4e76c8d0387635e89f45e434e18f87 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 24 Oct 2024 11:01:29 +0800
Subject: [PATCH] Chore/minor fix scratch pad (#30055)

* Fix padding

* Only activate scratch pad if feature preview is enabled
---
 .../components/ui/AIAssistantPanel/AIAssistantPanel.tsx   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantPanel.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantPanel.tsx
index c2d0379154a..346f7a4793e 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistantPanel.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistantPanel.tsx
@@ -40,6 +40,7 @@ import CodeEditor from '../CodeEditor/CodeEditor'
 import { AIAssistant } from './AIAssistant'
 import { generateCTA, generatePlaceholder, generateTitle, validateQuery } from './AIAssistant.utils'
 import { ASSISTANT_SUPPORT_ENTITIES } from './AiAssistant.constants'
+import { useIsDatabaseFunctionsAssistantEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 
 export const AiAssistantPanel = () => {
   const os = detectOS()
@@ -48,6 +49,7 @@ export const AiAssistantPanel = () => {
   const project = useSelectedProject()
   const queryClient = useQueryClient()
   const { aiAssistantPanel, setAiAssistantPanel } = useAppStateSnapshot()
+  const isEnabled = useIsDatabaseFunctionsAssistantEnabled()
 
   const { open, editor, content } = aiAssistantPanel
   const previousEditor = usePrevious(editor)
@@ -249,10 +251,10 @@ export const AiAssistantPanel = () => {
         setAiAssistantPanel({ open: true, editor: null })
       }
     }
-    if (project !== undefined) window.addEventListener('keydown', handler)
+    if (project !== undefined && isEnabled) window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [project])
+  }, [project, isEnabled])
 
   // [Joshen] Whenever the deps change recalculate the height of the editor
   useEffect(() => {
@@ -293,7 +295,7 @@ export const AiAssistantPanel = () => {
                 <Button
                   type="outline"
                   icon={<SqlEditor />}
-                  className="px-1"
+                  className="h-[24px] w-[24px] px-1"
                   onClick={() => {
                     const content = editorRef.current?.getValue() ?? ''
                     router.push(`/project/${ref}/sql/new?content=${encodeURIComponent(content)}`)