From 7db4cdfa36d08fbe4301e1c793dc8c6d1919bc04 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Sat, 10 Aug 2024 15:25:50 -0500
Subject: [PATCH] fix: sql accordion theme for csv import/export messages

---
 .../components/tools/csv-export.tsx           | 27 +++++++++++++++++--
 .../components/tools/csv-import.tsx           | 27 +++++++++++++++++--
 .../components/tools/executed-sql.tsx         |  6 +++--
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/apps/postgres-new/components/tools/csv-export.tsx b/apps/postgres-new/components/tools/csv-export.tsx
index dc48b7f..09e29fc 100644
--- 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,6 +12,20 @@ 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
   }
@@ -17,12 +33,19 @@ export default function CsvExport({ toolInvocation }: CsvExportProps) {
   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
index 4b4c55c..ef5695f 100644
--- a/apps/postgres-new/components/tools/csv-import.tsx
+++ b/apps/postgres-new/components/tools/csv-import.tsx
@@ -1,11 +1,27 @@
 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
   }
@@ -13,8 +29,15 @@ export default function CsvImport({ toolInvocation }: CsvExportProps) {
   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
index 4c9cdf9..e97e319 100644
--- 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}
       />
     )
   }