Add explain code action to SQL editor

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

@@ -13,6 +13,8 @@ import { cn } from 'ui'
 import { untitledSnippetTitle } from './SQLEditor.constants'
 import type { IStandaloneCodeEditor } from './SQLEditor.types'
 import { createSqlSnippetSkeletonV2 } from './SQLEditor.utils'
+import { useIsAssistantV2Enabled } from '../App/FeaturePreview/FeaturePreviewContext'
+import { useAppStateSnapshot } from 'state/app-state'
 
 export type MonacoEditorProps = {
   id: string
@@ -39,6 +41,9 @@ const MonacoEditor = ({
   const project = useSelectedProject()
   const snapV2 = useSqlEditorV2StateSnapshot()
 
+  const isAssistantV2Enabled = useIsAssistantV2Enabled()
+  const { setAiAssistantPanel } = useAppStateSnapshot()
+
   const [intellisenseEnabled] = useLocalStorageQuery(
     LOCAL_STORAGE_KEYS.SQL_EDITOR_INTELLISENSE,
     true
@@ -69,6 +74,25 @@ const MonacoEditor = ({
       },
     })
 
+    if (isAssistantV2Enabled) {
+      editor.addAction({
+        id: 'explain-code',
+        label: 'Explain Code',
+        contextMenuGroupId: 'operation',
+        contextMenuOrder: 1,
+        run: () => {
+          const selectedValue = (editorRef?.current as any)
+            .getModel()
+            .getValueInRange((editorRef?.current as any)?.getSelection())
+          setAiAssistantPanel({
+            open: true,
+            sqlSnippets: [selectedValue],
+            initialInput: 'Can you explain this section to me in more detail?',
+          })
+        },
+      })
+    }
+
     editor.onDidChangeCursorSelection(({ selection }) => {
       const noSelection =
         selection.startLineNumber === selection.endLineNumber &&