fix: sql accordion theme for csv import/export messages

gregnr · gregnr · commit 7db4cdfa36d0 · 2024-08-10T15:25:50.000-05:00
diff --git a/apps/postgres-new/components/tools/csv-export.tsx b/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"
diff --git a/apps/postgres-new/components/tools/csv-import.tsx b/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} />
 }
diff --git a/apps/postgres-new/components/tools/executed-sql.tsx b/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}
       />
     )
   }

Original file line number	Diff line number	Diff line change
`@@ -26,13 +26,15 @@ export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) {`
`26`	`26`	`return null`
`27`	`27`	`}`
`28`	`28`
`29`		`- if (!toolInvocation.result.success) {`
	`29`	`+ const { result } = toolInvocation`
	`30`	`+`
	`31`	`+ if (!result.success) {`
`30`	`32`	`return (`
`31`	`33`	`<CodeAccordion`
`32`	`34`	`title="Error executing SQL"`
`33`	`35`	`language="sql"`
`34`	`36`	`code={formattedSql}`
`35`		`- error={toolInvocation.result.error}`
	`37`	`+ error={result.error}`
`36`	`38`	`/>`
`37`	`39`	`)`
`38`	`40`	`}`