feat: Conversational AI for the SQL Editor (supabase#21388)

* Add a API endpoint for generating queries for the SQL editor. * Merge all multiline props. * Add a new component for diff actions. * Copy components for the AI panel. * Add useChat hook. * Add a feature preview for the this feature. The preview is dependent on the feature flag. * Reorder the nesting in the SQL editor to accomodate the AI assistant. * Try to fit both AI assistants in the SQL editor, available via a feature preview. * Refactor the SQL editor to make the diff work correctly in all cases. * Minor fixes for the old AI feature. * Fix the debug functionality to work with both assistants. * Fix some copy-paste leftovers. * Remove unneeded code. * Make the icons softer. * Fix the name of the panel component. * Fix console.logs. * Add overflow to the AI assistant. * surface opt in config in ai settings button * Skip diffing if editor is empty * Add selected state when selecting a message to insert/replace code * Add sample prompts * Add SQL ai dislaimer when replacing code * Light mode action bar nudges * Add text for the feature preview. * lang nudges * Hide the command suggestions for now. * Set the discussion url to undefined. * Don't add the disclaimer twice. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Terry Sutton <saltcod@gmail.com>

Author: 3 people

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx

@@ -22,6 +22,7 @@ export const FeaturePreviewContextProvider = ({ children }: PropsWithChildren<{}
  [LOCAL_STORAGE_KEYS.UI_PREVIEW_API_SIDE_PANEL]: false,
  [LOCAL_STORAGE_KEYS.UI_PREVIEW_RLS_AI_ASSISTANT]: false,
  [LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS]: false,
+ [LOCAL_STORAGE_KEYS.UI_PREVIEW_SQL_EDITOR_AI_ASSISTANT]: false,
  })
 
  useEffect(() => {
@@ -35,6 +36,8 @@ export const FeaturePreviewContextProvider = ({ children }: PropsWithChildren<{}
  localStorage.getItem(LOCAL_STORAGE_KEYS.UI_PREVIEW_RLS_AI_ASSISTANT) === 'true',
  [LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS]:
  localStorage.getItem(LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS) === 'true',
+ [LOCAL_STORAGE_KEYS.UI_PREVIEW_SQL_EDITOR_AI_ASSISTANT]:
+ localStorage.getItem(LOCAL_STORAGE_KEYS.UI_PREVIEW_SQL_EDITOR_AI_ASSISTANT) === 'true',
  })
  }
  }, [])
@@ -69,3 +72,8 @@ export const useIsColumnLevelPrivilegesEnabled = () => {
  const { flags } = useFeaturePreviewContext()
  return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS]
 }
+
+export const useIsSQLEditorAiAssistantEnabled = () => {
+ const { flags } = useFeaturePreviewContext()
+ return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_SQL_EDITOR_AI_ASSISTANT]
+}

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx

@@ -5,15 +5,19 @@ import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { Button, IconExternalLink, IconEye, IconEyeOff, Modal, ScrollArea, cn } from 'ui'
 
+import { useFlag } from 'hooks'
 import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import Telemetry from 'lib/telemetry'
 import { useAppStateSnapshot } from 'state/app-state'
 import APISidePanelPreview from './APISidePanelPreview'
 import CLSPreview from './CLSPreview'
 import { useFeaturePreviewContext } from './FeaturePreviewContext'
 import RLSAIAssistantPreview from './RLSAIAssistantPreview'
+import { SQLEditorAIAssistantPreview } from './SQLEditorAIAssistantPreview'
 
 const FeaturePreviewModal = () => {
+ const isAIConversational = useFlag('sqlEditorConversationalAi')
+
  // [Ivan] We should probably move this to a separate file, together with LOCAL_STORAGE_KEYS. We should make adding new feature previews as simple as possible.
  const FEATURE_PREVIEWS: { key: string; name: string; content: any; discussionsUrl?: string }[] = [
  {
@@ -34,6 +38,17 @@ const FeaturePreviewModal = () => {
  content: <CLSPreview />,
  discussionsUrl: 'https://github.com/orgs/supabase/discussions/20295',
  },
+ // the user should only be able to see the panel for the AI assistant if the feature flag is true
+ ...(isAIConversational
+ ? [
+ {
+ key: LOCAL_STORAGE_KEYS.UI_PREVIEW_SQL_EDITOR_AI_ASSISTANT,
+ name: 'Supabase Assistant for SQL editor',
+ content: <SQLEditorAIAssistantPreview />,
+ discussionsUrl: undefined,
+ },
+ ]
+ : []),
  ]
 
  const router = useRouter()

apps/studio/components/interfaces/App/FeaturePreview/SQLEditorAIAssistantPreview.tsx

@@ -0,0 +1,47 @@
+import { useParams } from 'common'
+import { Markdown } from 'components/interfaces/Markdown'
+import { BASE_PATH } from 'lib/constants'
+import Image from 'next/image'
+
+export const SQLEditorAIAssistantPreview = () => {
+ const { ref } = useParams()
+
+ return (
+ <div className="space-y-2">
+ <div className="mb-4 flex flex-col gap-y-2">
+ <Markdown
+ className="text-foreground-light max-w-full"
+ content="When using the [SQL Editor](http://supabase.com/project/_/sql) you'll have access to a new and improved AI Assistant which you can use to help you write your queries."
+ />
+ <Markdown
+ className="text-foreground-light max-w-full"
+ content={`Let our AI Assistant handle the SQL while you focus on building your app.`}
+ />
+ </div>
+ <Image
+ src={`${BASE_PATH}/img/previews/rls-ai-assistant-preview.png`}
+ width={1860}
+ height={970}
+ alt="api-docs-side-panel-preview"
+ className="rounded border"
+ />
+ <div className="space-y-2 !mt-4">
+ <p className="text-sm">Enabling this preview will:</p>
+ <ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
+ <li>
+ <Markdown
+ className="text-foreground-light"
+ content={`Replace the existing single-input UI with a side panel where you can have a full conversation.`}
+ />
+ </li>
+ <li>
+ <Markdown
+ className="text-foreground-light"
+ content={`Supabase Assistant will iteratively generate SQL from your natural language prompts.`}
+ />
+ </li>
+ </ul>
+ </div>
+ </div>
+ )
+}

apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/AIPolicyChat.tsx

@@ -1,6 +1,9 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useTelemetryProps } from 'common'
+import Telemetry from 'lib/telemetry'
 import { compact, last } from 'lodash'
 import { Loader2 } from 'lucide-react'
+import { useRouter } from 'next/router'
 import { useEffect, useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import {
@@ -10,14 +13,13 @@ import {
  FormField_Shadcn_,
  FormItem_Shadcn_,
  Form_Shadcn_,
- IconSettings,
  Input_Shadcn_,
+ cn,
 } from 'ui'
 import * as z from 'zod'
-import Telemetry from 'lib/telemetry'
-import { useTelemetryProps } from 'common'
-import { useRouter } from 'next/router'
 
+import { useLocalStorageQuery, useSelectedOrganization } from 'hooks'
+import { IS_PLATFORM, LOCAL_STORAGE_KEYS, OPT_IN_TAGS } from 'lib/constants'
 import { useProfile } from 'lib/profile'
 import { useAppStateSnapshot } from 'state/app-state'
 import { MessageWithDebug } from './AIPolicyEditorPanel.utils'
@@ -40,12 +42,17 @@ export const AIPolicyChat = ({
  onDiff,
  onChange,
 }: AIPolicyChatProps) => {
+ const router = useRouter()
  const { profile } = useProfile()
  const snap = useAppStateSnapshot()
+ const organization = useSelectedOrganization()
  const bottomRef = useRef<HTMLDivElement>(null)
- const router = useRouter()
  const telemetryProps = useTelemetryProps()
 
+ const isOptedInToAI = organization?.opt_in_tags?.includes(OPT_IN_TAGS.AI_SQL) ?? false
+ const [hasEnabledAISchema] = useLocalStorageQuery(LOCAL_STORAGE_KEYS.SQL_EDITOR_AI_SCHEMA, true)
+ const includeSchemaMetadata = (isOptedInToAI || !IS_PLATFORM) && hasEnabledAISchema
+
  const name = compact([profile?.first_name, profile?.last_name]).join(' ')
 
  const FormSchema = z.object({ chat: z.string() })
@@ -90,15 +97,21 @@ export const AIPolicyChat = ({
  Make sure to verify any generated code or suggestions, and share feedback so that we can
  learn and improve.`}
  >
- <div>
- <Button
- type="default"
- icon={<IconSettings strokeWidth={1.5} />}
- onClick={() => snap.setShowAiSettingsModal(true)}
- >
- AI Settings
- </Button>
- </div>
+ <Button
+ type="default"
+ className="w-min"
+ icon={
+ <div
+ className={cn(
+ 'w-2 h-2 rounded-full',
+ includeSchemaMetadata ? 'bg-brand' : 'border border-stronger'
+ )}
+ />
+ }
+ onClick={() => snap.setShowAiSettingsModal(true)}
+ >
+ {includeSchemaMetadata ? 'Include' : 'Exclude'} database metadata in queries
+ </Button>
  </Message>
 
  {messages.map((m) => (

apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/Message.tsx

@@ -82,9 +82,10 @@ const Message = memo(function Message({
  return (
  <AIPolicyPre
  onDiff={onDiff}
- className={
+ className={cn(
+ 'transition',
  isSelected ? '[&>div>pre]:!border-stronger [&>div>pre]:!bg-surface-200' : ''
- }
+ )}
  >
  {props.children[0].props.children}
  </AIPolicyPre>

apps/studio/components/interfaces/SQLEditor/AiAssistantPanel/AiMessagePre.tsx

@@ -0,0 +1,149 @@
+import { useTelemetryProps } from 'common'
+import { InsertCode, ReplaceCode } from 'icons'
+import { Check, Copy } from 'lucide-react'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { format } from 'sql-formatter'
+import {
+ Button,
+ CodeBlock,
+ TooltipContent_Shadcn_,
+ TooltipTrigger_Shadcn_,
+ Tooltip_Shadcn_,
+ cn,
+} from 'ui'
+
+import Telemetry from 'lib/telemetry'
+import { DiffType } from '../SQLEditor.types'
+
+interface AiMessagePreProps {
+ onDiff: (type: DiffType, s: string) => void
+ children: string[]
+ className?: string
+}
+
+export const AiMessagePre = ({ onDiff, children, className }: AiMessagePreProps) => {
+ const [copied, setCopied] = useState(false)
+ const router = useRouter()
+ const telemetryProps = useTelemetryProps()
+
+ useEffect(() => {
+ if (!copied) return
+ const timer = setTimeout(() => setCopied(false), 2000)
+ return () => clearTimeout(timer)
+ }, [copied])
+
+ let formatted = (children || [''])[0]
+ try {
+ formatted = format(formatted, { language: 'postgresql', keywordCase: 'upper' })
+ } catch {}
+
+ if (formatted.length === 0) {
+ return null
+ }
+
+ function handleCopy(formatted: string) {
+ navigator.clipboard.writeText(formatted).then()
+ setCopied(true)
+ }
+
+ return (
+ <pre className={cn('rounded-md relative group', className)}>
+ <CodeBlock
+ value={formatted}
+ language="sql"
+ className={cn(
+ '!bg-transparent !py-3 !px-3.5 prose dark:prose-dark',
+ // change the look of the code block. The flex hack is so that the code is wrapping since
+ // every word is a separate span
+ '[&>code]:m-0 [&>code>span]:flex [&>code>span]:flex-wrap'
+ )}
+ hideCopy
+ hideLineNumbers
+ />
+ <div className="absolute top-5 right-2 bg-surface-100 border-muted border rounded-lg h-[28px] hidden group-hover:block">
+ <Tooltip_Shadcn_>
+ <TooltipTrigger_Shadcn_ asChild>
+ <Button
+ type="text"
+ size="tiny"
+ onClick={() => {
+ onDiff(DiffType.Addition, formatted)
+ Telemetry.sendEvent(
+ {
+ category: 'sql_editor_ai_assistant',
+ action: 'ai_suggestion_inserted',
+ label: 'sql-editor-ai-assistant',
+ },
+ telemetryProps,
+ router
+ )
+ }}
+ >
+ <InsertCode className="h-4 w-4 text-foreground-light" strokeWidth={1.5} />
+ </Button>
+ </TooltipTrigger_Shadcn_>
+ <TooltipContent_Shadcn_ side="bottom" className="font-sans">
+ Insert code
+ </TooltipContent_Shadcn_>
+ </Tooltip_Shadcn_>
+
+ <Tooltip_Shadcn_>
+ <TooltipTrigger_Shadcn_ asChild>
+ <Button
+ type="text"
+ size="tiny"
+ onClick={() => {
+ onDiff(DiffType.Modification, formatted)
+ Telemetry.sendEvent(
+ {
+ category: 'sql_editor_ai_assistant',
+ action: 'ai_suggestion_replaced',
+ label: 'sql-editor-ai-assistant',
+ },
+ telemetryProps,
+ router
+ )
+ }}
+ >
+ <ReplaceCode className="h-4 w-4 text-foreground-light" strokeWidth={1.5} />
+ </Button>
+ </TooltipTrigger_Shadcn_>
+ <TooltipContent_Shadcn_ side="bottom" className="font-sans">
+ Replace code
+ </TooltipContent_Shadcn_>
+ </Tooltip_Shadcn_>
+
+ <Tooltip_Shadcn_>
+ <TooltipTrigger_Shadcn_ asChild>
+ <Button
+ type="text"
+ size="tiny"
+ onClick={() => {
+ handleCopy(formatted)
+ Telemetry.sendEvent(
+ {
+ category: 'sql_editor_ai_assistant',
+ action: 'ai_suggestion_copied',
+ label: 'sql-editor-ai-assistant',
+ },
+ telemetryProps,
+ router
+ )
+ }}
+ >
+ {copied ? (
+ <Check size={16} className="text-brand-600" />
+ ) : (
+ <Copy size={16} className="text-foreground-light" strokeWidth={1.5} />
+ )}
+ </Button>
+ </TooltipTrigger_Shadcn_>
+ <TooltipContent_Shadcn_ side="bottom" className="font-sans">
+ Copy code
+ </TooltipContent_Shadcn_>
+ </Tooltip_Shadcn_>
+ </div>
+ </pre>
+ )
+}