Add support for adding new npm packages BEN-1072 (#22)

### TL;DR

Disabled code repair functionality and added automatic dependency installation for user-generated apps.

### What changed?

- Commented out the Benchify code repair functionality in the generate route
- Added a new feature to automatically detect and install new dependencies from the generated package.json
- Implemented `extractNewPackages` function to identify dependencies not included in the base template
- Updated the Benchify package from version 0.1.0-alpha.3 to 0.1.0-alpha.5

### How to test?

1. Generate an app that requires dependencies not in the base template
2. Verify that the console logs show the new packages being installed
3. Confirm the sandbox loads correctly with the new dependencies available
4. Check that the app functions properly without the code repair step

### Why make this change?

The code repair functionality may have been causing issues or was not needed at this stage of development. More importantly, the automatic dependency installation feature improves the user experience by ensuring that all required packages are available in the sandbox environment without manual intervention. This allows generated apps to use a wider range of dependencies while maintaining a lightweight base template.

Author: juancastano

app/api/generate/route.ts

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

lib/e2b.ts

@@ -27,6 +27,30 @@ export async function createSandbox({ files }: { files: z.infer<typeof benchifyF
 
     await sandbox.files.write(filesToWrite);
 
+    // Check if package.json was written and install only new dependencies
+    const packageJsonFile = transformedFiles.find(file => file.path === 'package.json');
+    if (packageJsonFile) {
+        console.log('package.json detected, checking for new dependencies...');
+        try {
+            const newPackages = extractNewPackages(packageJsonFile.content);
+
+            if (newPackages.length > 0) {
+                console.log('Installing new packages:', newPackages);
+                const installCmd = `cd /app && npm install ${newPackages.join(' ')} --no-save`;
+                const result = await sandbox.commands.run(installCmd);
+                console.log('New packages installed successfully:', result.stdout);
+                if (result.stderr) {
+                    console.warn('npm install warnings:', result.stderr);
+                }
+            } else {
+                console.log('No new packages to install');
+            }
+        } catch (error) {
+            console.error('Failed to install new packages:', error);
+            // Don't throw here, let the sandbox continue - users can still work with basic dependencies
+        }
+    }
+
     // Get all files from the sandbox using the improved filter logic
     const allFiles = await fetchAllSandboxFiles(sandbox);
 
@@ -40,3 +64,31 @@ export async function createSandbox({ files }: { files: z.infer<typeof benchifyF
     };
 }
 
+function extractNewPackages(packageJsonContent: string): string[] {
+    try {
+        const packageJson = JSON.parse(packageJsonContent);
+        const dependencies = packageJson.dependencies || {};
+
+        // Base packages that are already installed in the template
+        const basePackages = [
+            'react',
+            'react-dom',
+            '@vitejs/plugin-react',
+            'tailwindcss',
+            '@tailwindcss/vite',
+            'typescript',
+            'vite'
+        ];
+
+        // Find packages that aren't in our base template
+        const newPackages = Object.entries(dependencies)
+            .filter(([pkg]) => !basePackages.includes(pkg))
+            .map(([pkg, version]) => `${pkg}@${version}`);
+
+        return newPackages;
+    } catch (error) {
+        console.error('Error parsing package.json:', error);
+        return [];
+    }
+}
+