Feat/assistant convert supabasejs (supabase#30648)

* add ability to convert sql to js

* remove console

* Merge master + small style fix

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: SaxonF

apps/studio/components/ui/AIAssistantPanel/Message.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 
-import { cn, markdownComponents, WarningIcon } from 'ui'
+import { cn, markdownComponents, WarningIcon, CodeBlock } from 'ui'
 import CollapsibleCodeBlock from './CollapsibleCodeBlock'
 import { SqlSnippet } from './SqlSnippet'
 
@@ -56,20 +56,38 @@ export const Message = function Message({
           components={{
             ...markdownComponents,
             pre: (props: any) => {
-              return readOnly ? (
-                <div className="mb-1 -mt-2">
-                  <CollapsibleCodeBlock
-                    value={props.children[0].props.children[0]}
-                    language="sql"
+              const language = props.children[0].props.className?.replace('language-', '') || 'sql'
+
+              if (language === 'sql') {
+                return readOnly ? (
+                  <div className="mb-1 -mt-2">
+                    <CollapsibleCodeBlock
+                      value={props.children[0].props.children[0]}
+                      language="sql"
+                      hideLineNumbers
+                    />
+                  </div>
+                ) : (
+                  <SqlSnippet
+                    readOnly={readOnly}
+                    isLoading={isLoading}
+                    sql={props.children[0].props.children}
+                  />
+                )
+              }
+
+              return (
+                <div className="-mx-8">
+                  <CodeBlock
                     hideLineNumbers
+                    value={props.children[0].props.children}
+                    language={language}
+                    className={cn(
+                      'max-h-96 max-w-none block !bg-transparent !py-3 !px-3.5 prose dark:prose-dark border-0 border-t border-b text-foreground !rounded-none w-full',
+                      '[&>code]:m-0 [&>code>span]:flex [&>code>span]:flex-wrap [&>code]:block [&>code>span]:text-foreground'
+                    )}
                   />
                 </div>
-              ) : (
-                <SqlSnippet
-                  readOnly={readOnly}
-                  isLoading={isLoading}
-                  sql={props.children[0].props.children}
-                />
               )
             },
             ol: (props: any) => {

apps/studio/package.json

@@ -42,6 +42,7 @@
     "@supabase/pg-meta": "*",
     "@supabase/realtime-js": "2.10.2",
     "@supabase/shared-types": "0.1.74",
+    "@supabase/sql-to-rest": "^0.1.6",
     "@supabase/supabase-js": "^2.44.3",
     "@tanstack/react-query": "4.35.7",
     "@tanstack/react-query-devtools": "4.35.7",

apps/studio/pages/api/ai/sql/generate-v3.ts

@@ -68,7 +68,7 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse) {
     model: openai('gpt-4o-mini'),
     maxSteps: 5,
     system: `
-      You are a Supabase Postgres expert who can do three things.
+      You are a Supabase Postgres expert who can do the following things.
 
       # You generate and debug SQL
       The generated SQL (must be valid SQL), and must adhere to the following:
@@ -105,6 +105,9 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse) {
       - Default to create or replace whenever possible for updating an existing function, otherwise use the alter function statement
       Please make sure that all queries are valid Postgres SQL queries
 
+      # You convert sql to supabase-js client code
+      Use the convertSqlToSupabaseJs tool to convert select sql to supabase-js client code. If conversion isn't supported, build a postgres function instead and suggest using supabase-js to call it via  "const { data, error } = await supabase.rpc('echo', { say: '👋'})"
+
       Follow these instructions:
       - First look at the list of provided schemas and if needed, get more information about a schema. You will almost always need to retrieve information about the public schema before answering a question. If the question is about users, also retrieve the auth schema.
 

apps/studio/pages/api/ai/sql/tools.ts

@@ -5,6 +5,7 @@ import { z } from 'zod'
 import { getDatabasePolicies } from 'data/database-policies/database-policies-query'
 import { getEntityDefinitionsSql } from 'data/database/entity-definitions-query'
 import { executeSql } from 'data/sql/execute-sql-query'
+import { processSql, renderSupabaseJs } from '@supabase/sql-to-rest'
 
 export const getTools = ({
   projectRef,
@@ -47,6 +48,25 @@ export const getTools = ({
         }
       },
     }),
+    convertSqlToSupabaseJs: tool({
+      description: 'Convert an sql query into supabase-js client code',
+      parameters: z.object({
+        sql: z
+          .string()
+          .describe(
+            'The sql statement to convert. Only a subset of statements are supported currently. '
+          ),
+      }),
+      execute: async ({ sql }) => {
+        try {
+          const statement = await processSql(sql)
+          const { code } = await renderSupabaseJs(statement)
+          return code
+        } catch (error) {
+          return `Failed to convert SQL: ${error}`
+        }
+      },
+    }),
     getRlsKnowledge: tool({
       description:
         'Get existing policies and examples and instructions on how to write RLS policies',