Merge pull request #39 from supabase-community/fix/csv-import-export-…

…theme

fix: sql accordion theme for csv import/export messages

apps/postgres-new/components/tools/csv-export.tsx

@@ -1,5 +1,7 @@
 import { m } from 'framer-motion'
 import { Download } from 'lucide-react'
+import { useMemo } from 'react'
+import { format } from 'sql-formatter'
 import { loadFile } from '~/lib/files'
 import { ToolInvocation } from '~/lib/tools'
 import { downloadFile } from '~/lib/util'
@@ -10,19 +12,40 @@ export type CsvExportProps = {
 }
 
 export default function CsvExport({ toolInvocation }: CsvExportProps) {
+  const { sql } = toolInvocation.args
+
+  const formattedSql = useMemo(
+    () =>
+      format(sql, {
+        language: 'postgresql',
+        keywordCase: 'lower',
+        identifierCase: 'lower',
+        dataTypeCase: 'lower',
+        functionCase: 'lower',
+      }),
+    [sql]
+  )
+
   if (!('result' in toolInvocation)) {
     return null
   }
 
   const { result } = toolInvocation
 
   if (!result.success) {
-    return <div className="bg-destructive-300 px-6 py-4 rounded-md">Error executing SQL</div>
+    return (
+      <CodeAccordion
+        title="Error executing SQL"
+        language="sql"
+        code={formattedSql}
+        error={result.error}
+      />
+    )
   }
 
   return (
     <>
-      <CodeAccordion title="Executed SQL" language="sql" code={toolInvocation.args.sql} />
+      <CodeAccordion title="Executed SQL" language="sql" code={formattedSql} />
       <m.div
         layoutId={toolInvocation.toolCallId}
         className="self-start px-5 py-2.5 text-base rounded-full bg-border flex gap-2 items-center text-lighter italic"

apps/postgres-new/components/tools/csv-import.tsx

@@ -1,20 +1,43 @@
 import { ToolInvocation } from '~/lib/tools'
 import CodeAccordion from '../code-accordion'
+import { useMemo } from 'react'
+import { format } from 'sql-formatter'
 
 export type CsvExportProps = {
   toolInvocation: ToolInvocation<'importCsv'>
 }
 
 export default function CsvImport({ toolInvocation }: CsvExportProps) {
+  const { sql } = toolInvocation.args
+
+  const formattedSql = useMemo(
+    () =>
+      format(sql, {
+        language: 'postgresql',
+        keywordCase: 'lower',
+        identifierCase: 'lower',
+        dataTypeCase: 'lower',
+        functionCase: 'lower',
+      }),
+    [sql]
+  )
+
   if (!('result' in toolInvocation)) {
     return null
   }
 
   const { result } = toolInvocation
 
   if (!result.success) {
-    return <div className="bg-destructive-300 px-6 py-4 rounded-md">Error executing SQL</div>
+    return (
+      <CodeAccordion
+        title="Error executing SQL"
+        language="sql"
+        code={formattedSql}
+        error={result.error}
+      />
+    )
   }
 
-  return <CodeAccordion title="Executed SQL" language="sql" code={toolInvocation.args.sql} />
+  return <CodeAccordion title="Executed SQL" language="sql" code={formattedSql} />
 }

apps/postgres-new/components/tools/executed-sql.tsx

@@ -26,13 +26,15 @@ export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) {
     return null
   }
 
-  if (!toolInvocation.result.success) {
+  const { result } = toolInvocation
+
+  if (!result.success) {
     return (
       <CodeAccordion
         title="Error executing SQL"
         language="sql"
         code={formattedSql}
-        error={toolInvocation.result.error}
+        error={result.error}
       />
     )
   }