diff --git a/apps/studio/components/interfaces/SQLEditor/AskAIWidget.tsx b/apps/studio/components/interfaces/SQLEditor/AskAIWidget.tsx index a6af7b552bc..bc50ef3fdd9 100644 --- a/apps/studio/components/interfaces/SQLEditor/AskAIWidget.tsx +++ b/apps/studio/components/interfaces/SQLEditor/AskAIWidget.tsx @@ -26,7 +26,6 @@ export const AskAIWidget = ({ isLoading = false, onHeightChange, }: AskAIWidgetProps) => { - const os = detectOS() const containerRef = useRef(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() } }} diff --git a/apps/studio/components/ui/AIEditor/index.tsx b/apps/studio/components/ui/AIEditor/index.tsx index d5e727b91ac..ed134bef088 100644 --- a/apps/studio/components/ui/AIEditor/index.tsx +++ b/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={{