fix keyboard shortcut

apps/studio/components/interfaces/SQLEditor/AskAIWidget.tsx

@@ -26,7 +26,6 @@ export const AskAIWidget = ({
   isLoading = false,
   onHeightChange,
 }: AskAIWidgetProps) => {
-  const os = detectOS()
   const containerRef = useRef<HTMLDivElement>(null)
 
   // Auto focus input
@@ -74,11 +73,11 @@ export const AskAIWidget = ({
         ref={inputRef}
         className="bg-transparent border-0 outline-0 ring-0 ring-offset-0 focus:outline-0 focus:ring-0 focus:ring-offset-0 focus-visible:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-within:outline-0 focus-within:ring-0 focus-within:ring-offset-0 shadow-none rounded-none gap-4 text-xs md:text-xs py-2 pl-3 !leading-[20px]"
         placeholder={isDiffVisible ? 'Make an edit...' : 'Edit via the Assistant...'}
-        autoFocus
         value={value}
         onChange={(e) => onChange(e.target.value)}
         onKeyDown={(e) => {
-          if (e.key === 'Enter' && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
+          if (e.key === 'Enter' && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+            e.preventDefault()
             handleSubmit()
           }
         }}

apps/studio/components/ui/AIEditor/index.tsx

@@ -1,7 +1,7 @@
 import Editor, { DiffEditor, Monaco, OnMount } from '@monaco-editor/react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Command } from 'lucide-react'
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useCallback } from 'react'
 import { editor as monacoEditor } from 'monaco-editor'
 import { useCompletion } from 'ai/react'
 import { detectOS } from 'lib/helpers'
@@ -97,22 +97,22 @@ const AIEditor = ({
     setIsDiffMode(true)
   }, [completion, promptState.beforeSelection, promptState.selection, promptState.afterSelection])
 
-  const handleReset = () => {
+  const handleReset = useCallback(() => {
     setCompletion('')
     setIsDiffMode(false)
     setPromptState((prev) => ({ ...prev, isOpen: false }))
     setPromptInput('')
     editorRef.current?.focus()
-  }
+  }, [setCompletion])
 
-  const handleAcceptDiff = () => {
+  const handleAcceptDiff = useCallback(() => {
     if (diffValue.modified) {
       const newValue = diffValue.modified
       setCurrentValue(newValue)
       onChange?.(newValue)
       handleReset()
     }
-  }
+  }, [diffValue.modified, onChange, handleReset])
 
   const handleRejectDiff = () => {
     handleReset()
@@ -127,20 +127,20 @@ const AIEditor = ({
         (os === 'macos' ? event.metaKey : event.ctrlKey) &&
         isDiffMode
       ) {
+        event.preventDefault()
         handleAcceptDiff()
       }
     }
 
     window.addEventListener('keydown', handleKeyboard)
     return () => window.removeEventListener('keydown', handleKeyboard)
-  }, [os, isDiffMode])
+  }, [os, isDiffMode, handleAcceptDiff, handleReset])
 
   const handleEditorDidMount: OnMount = (
     editor: monacoEditor.IStandaloneCodeEditor,
     monaco: Monaco
   ) => {
     editorRef.current = editor
-
     // Set prompt state to open if promptInput exists
     if (promptInput) {
       const model = editor.getModel()
@@ -245,6 +245,7 @@ const AIEditor = ({
             modified={diffValue.modified}
             onMount={(editor: monacoEditor.IStandaloneDiffEditor) => {
               diffEditorRef.current = editor
+              console.log('mount diff editor')
               setIsDiffEditorMounted(true)
             }}
             options={{