From bb583f35a8cb9307db04470e46efebdefcf57cf6 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Wed, 19 Jul 2023 16:36:11 -0600
Subject: [PATCH] chore: remove unused monaco ai widget

---
 .../interfaces/SQLEditor/AskAIWidget.tsx      | 40 -------------
 .../interfaces/SQLEditor/MonacoEditor.tsx     | 59 +------------------
 .../interfaces/SQLEditor/SQLEditor.tsx        |  2 -
 3 files changed, 2 insertions(+), 99 deletions(-)
 delete mode 100644 studio/components/interfaces/SQLEditor/AskAIWidget.tsx

diff --git a/studio/components/interfaces/SQLEditor/AskAIWidget.tsx b/studio/components/interfaces/SQLEditor/AskAIWidget.tsx
deleted file mode 100644
index 917fd1fc8b4..00000000000
--- a/studio/components/interfaces/SQLEditor/AskAIWidget.tsx
+++ /dev/null
@@ -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
diff --git a/studio/components/interfaces/SQLEditor/MonacoEditor.tsx b/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
index fb473156bbf..2663cc9e73b 100644
--- a/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
+++ b/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
@@ -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>
-      )}
     </>
   )
 }
diff --git a/studio/components/interfaces/SQLEditor/SQLEditor.tsx b/studio/components/interfaces/SQLEditor/SQLEditor.tsx
index 21f520528a0..6931d1da5ea 100644
--- a/studio/components/interfaces/SQLEditor/SQLEditor.tsx
+++ b/studio/components/interfaces/SQLEditor/SQLEditor.tsx
@@ -471,8 +471,6 @@ const SQLEditor = () => {
                     isExecuting={isExecuting}
                     autoFocus={false}
                     executeQuery={executeQuery}
-                    // onOpenAiWidget={() => setIsAiWidgetOpen(true)}
-                    // onCloseAiWidget={() => setIsAiWidgetOpen(false)}
                   />
                 </m.div>
               </>