feat: show sql errors

gregnr · gregnr · commit a0526500b29a · 2024-07-30T15:09:03.000-05:00
diff --git a/apps/postgres-new/components/code-accordion.tsx b/apps/postgres-new/components/code-accordion.tsx
@@ -12,29 +12,42 @@ export type CodeAccordionProps = {
   title: string
   language: 'sql'
   code: string
+  error?: string
+  className?: string
 }
 
-export default function CodeAccordion({ title, language, code }: CodeAccordionProps) {
+export default function CodeAccordion({
+  title,
+  language,
+  code,
+  error,
+  className,
+}: CodeAccordionProps) {
   return (
     <Accordion type="single" collapsible>
       <AccordionItem
         value="item-1"
-        className="border-2 border-neutral-100 bg-neutral-50 px-3 py-2 rounded-md"
+        className={cn(
+          'border-2 border-neutral-100 bg-neutral-50 px-3 py-2 rounded-md',
+          error ? 'bg-destructive-300' : undefined,
+          className
+        )}
       >
         <AccordionTrigger className="p-0 gap-2">
           <div className="flex gap-2 items-center font-normal text-lighter text-sm">
             <DatabaseZap size={14} />
             {title}
           </div>
         </AccordionTrigger>
-        <AccordionContent className="py-2 [&_>div]:pb-0">
+        <AccordionContent className="py-2 [&_>div]:pb-0 flex flex-col gap-2">
           <CodeBlock
             className={cn(`language-${language}`, 'border-none px-0 pb-4 !bg-inherit')}
             hideLineNumbers
             hideCopy
           >
             {code}
           </CodeBlock>
+          {error && <div className="text-destructive-600 text-xs">{error}</div>}
         </AccordionContent>
       </AccordionItem>
     </Accordion>
diff --git a/apps/postgres-new/components/tools/executed-sql.tsx b/apps/postgres-new/components/tools/executed-sql.tsx
@@ -27,7 +27,14 @@ export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) {
   }
 
   if (!toolInvocation.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={toolInvocation.result.error}
+      />
+    )
   }
 
   return <CodeAccordion title="Executed SQL" language="sql" code={formattedSql} />

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,14 @@ export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) {`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`if (!toolInvocation.result.success) {`
`30`		`- return <div className="bg-destructive-300 px-6 py-4 rounded-md">Error executing SQL</div>`
	`30`	`+ return (`
	`31`	`+ <CodeAccordion`
	`32`	`+ title="Error executing SQL"`
	`33`	`+ language="sql"`
	`34`	`+ code={formattedSql}`
	`35`	`+ error={toolInvocation.result.error}`
	`36`	`+ />`
	`37`	`+ )`
`31`	`38`	`}`
`32`	`39`
`33`	`40`	`return <CodeAccordion title="Executed SQL" language="sql" code={formattedSql} />`