chore: remove unused monaco ai widget

This commit is contained in:
Greg Richardson committed 2023-07-19 16:36:11 -06:00
1 parent e4d8220a4e
commit bb583f35a8
3 files changed
+2 -99

No files matched your search

@@ -1,40 +0,0 @@
import { m } from 'framer-motion'
import { useCallback } from 'react'
import { AiIcon, IconCornerDownLeft, Input } from 'ui'
const AskAIWidget = () => {
// Auto focus input
const inputRef = useCallback((input: HTMLInputElement | null) => {
setTimeout(() => {
input?.focus()
}, 0)
}, [])
return (
<m.div
initial={{ y: -50 }}
animate={{ y: 0 }}
className="bg-scale-200 rounded-md p-2 my-2 border border-scale-700 shadow-xl shadow-scale-100 flex flex-col gap-2 text-sm text-scale-1100 max-w-xl"
>
<m.div initial={{ y: -25 }} animate={{ y: 0 }}>
<Input
inputRef={inputRef}
size="xlarge"
icon={<AiIcon className="w-4 h-4 ml-1" />}
inputClassName="bg-scale-100 placeholder:text-scale-900 rounded-sm focus:!border-brand-900"
iconContainerClassName="transition text-scale-800 peer-focus/input:text-brand-900"
placeholder="Ask Supabase AI to edit this query"
autoFocus
actions={
<div className="flex items-center space-x-1 mr-4">
<IconCornerDownLeft size={16} strokeWidth={1.5} />
</div>
}
/>
</m.div>
AI generated code may be incorrect.
</m.div>
)
}
export default AskAIWidget
@@ -1,10 +1,8 @@
import Editor, { Monaco, OnMount } from '@monaco-editor/react'
import { timeout } from 'lib/helpers'
import { Selection, editor } from 'monaco-editor'
import { MutableRefObject, useEffect, useRef, useState } from 'react'
import { editor } from 'monaco-editor'
import { MutableRefObject, useRef, useState } from 'react'
import { useSqlEditorStateSnapshot } from 'state/sql-editor'
import AskAIWidget from './AskAIWidget'
import InlineWidget from './InlineWidget'
export type IStandaloneCodeEditor = Parameters<OnMount>[0]
@@ -14,8 +12,6 @@ export type MonacoEditorProps = {
isExecuting: boolean
autoFocus?: boolean
executeQuery: () => void
onOpenAiWidget?: () => void
onCloseAiWidget?: () => void
}
const MonacoEditor = ({
@@ -24,8 +20,6 @@ const MonacoEditor = ({
isExecuting,
autoFocus = true,
executeQuery,
onOpenAiWidget,
onCloseAiWidget,
}: MonacoEditorProps) => {
const snap = useSqlEditorStateSnapshot({ sync: true })
const snippet = snap.snippets[id]
@@ -35,8 +29,6 @@ const MonacoEditor = ({
executeQueryRef.current = executeQuery
const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>()
const [isAiWidgetOpen, setIsAiWidgetOpen] = useState(false)
const [aiWidgetSelection, setAiWidgetSelection] = useState<Selection>()
const handleEditorOnMount: OnMount = async (editor, monaco) => {
editorRef.current = editor
@@ -60,23 +52,6 @@ const MonacoEditor = ({
},
})
editor.addAction({
id: 'ask-ai',
label: 'Ask AI',
keybindings: [monaco.KeyMod.CtrlCmd + monaco.KeyCode.KeyI],
contextMenuGroupId: 'operation',
contextMenuOrder: 0,
run: () => {
const selection = editor.getSelection()
if (selection) {
setAiWidgetSelection(selection)
setIsAiWidgetOpen(true)
onOpenAiWidget?.()
}
},
})
// add margin above first line
editorRef.current.changeViewZones((accessor) => {
accessor.addZone({
@@ -92,26 +67,6 @@ const MonacoEditor = ({
}
}
useEffect(() => {
if (!isAiWidgetOpen) {
return
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') {
setIsAiWidgetOpen(false)
onCloseAiWidget?.()
editor?.focus()
}
}
window.addEventListener('keydown', onKeyDown)
return () => {
window.removeEventListener('keydown', onKeyDown)
}
}, [editor, isAiWidgetOpen, onCloseAiWidget])
function handleEditorChange(value: string | undefined) {
if (id && value) snap.setSql(id, value)
}
@@ -136,16 +91,6 @@ const MonacoEditor = ({
fixedOverflowWidgets: true,
}}
/>
{editor && isAiWidgetOpen && aiWidgetSelection && (
<InlineWidget
editor={editor}
id="ask-ai"
afterLineNumber={aiWidgetSelection.endLineNumber}
heightInLines={6}
>
<AskAIWidget />
</InlineWidget>
)}
</>
)
}
@@ -471,8 +471,6 @@ const SQLEditor = () => {
isExecuting={isExecuting}
autoFocus={false}
executeQuery={executeQuery}
// onOpenAiWidget={() => setIsAiWidgetOpen(true)}
// onCloseAiWidget={() => setIsAiWidgetOpen(false)}
/>
</m.div>
</>