Fix build errors (#32)

### TL;DR

Enabled the Benchify code repair API and fixed React dependency issues in the UI builder components.

### What changed?

- Uncommented the Benchify fixer API code in `generate/route.ts` to enable automatic code repair functionality
- Added proper type definitions for the `FixResult` interface in both `error-display.tsx` and `preview-card.tsx`
- Fixed React dependency issues in `code-editor.tsx`:
  - Added `useCallback` for the `buildFileTree` function
  - Updated dependency arrays in `useEffect` hooks to properly track dependencies
- Fixed quotes in JSX to use proper escaped quotes (`"`) in `error-display.tsx` and `preview-card.tsx`

### How to test?

1. Generate UI components that might contain errors
2. Verify that the Benchify fixer API automatically repairs the code
3. Check that the code editor properly maintains state when files change
4. Confirm that error messages display correctly with proper quotation marks

### Why make this change?

This change enables the automatic code repair functionality that was previously disabled, improving the user experience by automatically fixing generated code. The React dependency fixes prevent unnecessary re-renders and potential memory leaks in the UI builder components, while the proper typing enhances code maintainability and type safety.

Author: juancastano

app/api/generate/route.ts

@@ -100,27 +100,27 @@ export async function POST(request: NextRequest) {
         }
 
         // Repair the generated code using Benchify's API
-        // const { data } = await benchify.fixer.run({
-        //     files: filesToSandbox.map(file => ({
-        //         path: file.path,
-        //         contents: file.content
-        //     }))
-        // });
+        const { data } = await benchify.fixer.run({
+            files: filesToSandbox.map(file => ({
+                path: file.path,
+                contents: file.content
+            }))
+        });
 
         let repairedFiles = filesToSandbox;
-        // if (data) {
-        //     const { success, diff } = data;
-
-        //     if (success && diff) {
-        //         repairedFiles = filesToSandbox.map(file => {
-        //             const patchResult = applyPatch(file.content, diff);
-        //             return {
-        //                 ...file,
-        //                 content: typeof patchResult === 'string' ? patchResult : file.content
-        //             };
-        //         });
-        //     }
-        // }
+        if (data) {
+            const { success, diff } = data;
+
+            if (success && diff) {
+                repairedFiles = filesToSandbox.map(file => {
+                    const patchResult = applyPatch(file.content, diff);
+                    return {
+                        ...file,
+                        content: typeof patchResult === 'string' ? patchResult : file.content
+                    };
+                });
+            }
+        }
 
         const sandboxResult = await createSandbox({ files: repairedFiles });
 

components/ui-builder/code-editor.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { benchifyFileSchema } from "@/lib/schemas";
 import { z } from "zod";
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -35,7 +35,7 @@ export function CodeEditor({ files = [] }: CodeEditorProps) {
     const [openFolders, setOpenFolders] = useState<Set<string>>(new Set());
 
     // Build file tree structure (pure function, no side effects)
-    const buildFileTree = (files: Array<{ path: string; content: string }>): { tree: FileNode[], allFolders: string[] } => {
+    const buildFileTree = useCallback((files: Array<{ path: string; content: string }>): { tree: FileNode[], allFolders: string[] } => {
         const root: FileNode[] = [];
         const folderMap = new Map<string, FileNode>();
         const allFolders: string[] = [];
@@ -81,7 +81,7 @@ export function CodeEditor({ files = [] }: CodeEditorProps) {
         });
 
         return { tree: root, allFolders };
-    };
+    }, []);
 
     const { tree: fileTree, allFolders } = buildFileTree(files);
     const selectedFile = files.find(f => f.path === selectedFilePath);
@@ -91,14 +91,14 @@ export function CodeEditor({ files = [] }: CodeEditorProps) {
         if (allFolders.length > 0) {
             setOpenFolders(new Set(allFolders));
         }
-    }, [files.length]); // Only trigger when files array changes
+    }, [allFolders]);
 
     // Auto-select first file if none selected (only once when files change)
     useEffect(() => {
         if (!selectedFilePath && files.length > 0) {
             setSelectedFilePath(files[0].path);
         }
-    }, [files.length, selectedFilePath]); // Dependency on selectedFilePath prevents loops
+    }, [files, selectedFilePath]);
 
     // Get file icon based on extension
     const getFileIcon = (path: string) => {

components/ui-builder/error-display.tsx

@@ -17,10 +17,20 @@ interface BuildError {
     column?: number;
 }
 
+interface FixResult {
+    originalFiles: z.infer<typeof benchifyFileSchema>;
+    repairedFiles: z.infer<typeof benchifyFileSchema>;
+    buildOutput: string;
+    previewUrl: string;
+    buildErrors?: BuildError[];
+    hasErrors: boolean;
+    editInstruction?: string;
+}
+
 interface ErrorDisplayProps {
     errors: BuildError[];
     currentFiles?: z.infer<typeof benchifyFileSchema>;
-    onFixComplete?: (result: any) => void;
+    onFixComplete?: (result: FixResult) => void;
 }
 
 export function ErrorDisplay({ errors, currentFiles, onFixComplete }: ErrorDisplayProps) {
@@ -196,7 +206,7 @@ Please make the minimal changes necessary to resolve these errors while maintain
                         <li>• Verify that all props are properly typed</li>
                         <li>• Make sure all dependencies are correctly installed</li>
                         <li>• Try regenerating the component with more specific requirements</li>
-                        {currentFiles && <li>• Use the "Fix with AI" button above for automatic error resolution</li>}
+                        {currentFiles && <li>• Use the &quot;Fix with AI&quot; button above for automatic error resolution</li>}
                     </ul>
                 </div>
             </div>

components/ui-builder/preview-card.tsx

@@ -45,14 +45,24 @@ interface BuildError {
     column?: number;
 }
 
+interface FixResult {
+    originalFiles: z.infer<typeof benchifyFileSchema>;
+    repairedFiles: z.infer<typeof benchifyFileSchema>;
+    buildOutput: string;
+    previewUrl: string;
+    buildErrors?: BuildError[];
+    hasErrors: boolean;
+    editInstruction?: string;
+}
+
 interface PreviewCardProps {
     previewUrl?: string;
     code: z.infer<typeof benchifyFileSchema>;
     isGenerating?: boolean;
     prompt?: string;
     buildErrors?: BuildError[];
     hasErrors?: boolean;
-    onFixComplete?: (result: any) => void;
+    onFixComplete?: (result: FixResult) => void;
 }
 
 export function PreviewCard({
@@ -110,7 +120,7 @@ export function PreviewCard({
                                 <CardHeader>
                                     <CardTitle>Building Your UI</CardTitle>
                                     <p className="text-sm text-muted-foreground mt-2">
-                                        "{prompt.substring(0, 100)}{prompt.length > 100 ? '...' : ''}"
+                                        &quot;{prompt.substring(0, 100)}{prompt.length > 100 ? '...' : ''}&quot;
                                     </p>
                                 </CardHeader>
                                 <CardContent className="space-y-4">