updated file functions

Author: Gerome-Elassaad

app/api/files/content/route.ts

@@ -1,82 +1,65 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { NextResponse } from 'next/server'
 import { Sandbox } from '@e2b/code-interpreter'
 
-export async function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams
-  const sandboxId = searchParams.get('sandboxId')
-  const path = searchParams.get('path')
+const E2B_API_KEY = process.env.E2B_API_KEY
+if (!E2B_API_KEY) {
+  throw new Error('E2B_API_KEY environment variable not found')
+}
 
-  if (!sandboxId || !path) {
-    return NextResponse.json(
-      { error: 'sandboxId and path are required' },
-      { status: 400 },
-    )
-  }
+const sandboxTimeout = 10 * 60 * 1000
 
-  try {
-    const sandbox = await Sandbox.connect(sandboxId)
-    const content = await sandbox.files.read(path)
-    return new NextResponse(content, {
-      headers: {
-        'Content-Type': 'text/plain',
-      },
-    })
-  } catch (error) {
-    console.error('Error fetching file content:', error)
-    return NextResponse.json(
-      { error: 'Failed to fetch file content' },
-      { status: 500 },
-    )
-  }
+async function getSandbox(sessionID: string) {
+  const sandbox = await Sandbox.create({
+    apiKey: E2B_API_KEY,
+    metadata: {
+      sessionID,
+    },
+    timeoutMs: sandboxTimeout,
+  })
+  return sandbox
 }
 
-export async function POST(request: NextRequest) {
-  const {
-    sandboxId,
-    path,
-    content,
-  }: { sandboxId: string; path: string; content: string } = await request.json()
+export async function GET(req: Request) {
+  try {
+    const { searchParams } = new URL(req.url)
+    const sessionID = searchParams.get('sessionID')
+    const path = searchParams.get('path')
 
-  if (!sandboxId || !path || content === undefined) {
-    return NextResponse.json(
-      { error: 'sandboxId, path, and content are required' },
-      { status: 400 },
-    )
-  }
+    if (!sessionID || !path) {
+      return NextResponse.json(
+        { error: 'sessionID and path are required' },
+        { status: 400 },
+      )
+    }
 
-  try {
-    const sandbox = await Sandbox.connect(sandboxId)
-    await sandbox.files.write(path, content)
-    return NextResponse.json({ success: true })
-  } catch (error) {
-    console.error('Error saving file content:', error)
+    const sandbox = await getSandbox(sessionID)
+    const content = await sandbox.files.read(path)
+    return NextResponse.json({ content })
+  } catch (error: any) {
     return NextResponse.json(
-      { error: 'Failed to save file content' },
+      { error: error.message || 'An unexpected error occurred' },
       { status: 500 },
     )
   }
 }
 
-export async function DELETE(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams
-  const sandboxId = searchParams.get('sandboxId')
-  const path = searchParams.get('path')
+export async function POST(req: Request) {
+  try {
+    const { sessionID, path, content } = await req.json()
 
-  if (!sandboxId || !path) {
-    return NextResponse.json(
-      { error: 'sandboxId and path are required' },
-      { status: 400 },
-    )
-  }
+    if (!sessionID || !path || content === undefined) {
+      return NextResponse.json(
+        { error: 'sessionID, path and content are required' },
+        { status: 400 },
+      )
+    }
 
-  try {
-    const sandbox = await Sandbox.connect(sandboxId)
-    await sandbox.files.remove(path)
+    const sandbox = await getSandbox(sessionID)
+    await sandbox.files.write(path, content)
     return NextResponse.json({ success: true })
-  } catch (error) {
-    console.error('Error deleting file:', error)
+  } catch (error: any) {
     return NextResponse.json(
-      { error: 'Failed to delete file' },
+      { error: error.message || 'An unexpected error occurred' },
       { status: 500 },
     )
   }

app/api/files/route.ts

@@ -28,33 +28,41 @@ async function listFilesRecursively(
   return nodes
 }
 
+const E2B_API_KEY = process.env.E2B_API_KEY
+if (!E2B_API_KEY) {
+  throw new Error('E2B_API_KEY environment variable not found')
+}
+
+const sandboxTimeout = 10 * 60 * 1000
+
+async function getSandbox(sessionID: string) {
+  const sandbox = await Sandbox.create({
+    apiKey: E2B_API_KEY,
+    metadata: {
+      sessionID,
+    },
+    timeoutMs: sandboxTimeout,
+  })
+  return sandbox
+}
+
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams
-  const sandboxId = searchParams.get('sandboxId')
+  const sessionID = searchParams.get('sessionID')
 
-  let sandbox: Sandbox | undefined
+  if (!sessionID) {
+    return NextResponse.json(
+      { error: 'sessionID is required' },
+      { status: 400 },
+    )
+  }
 
   try {
-    if (sandboxId) {
-      sandbox = await Sandbox.connect(sandboxId)
-    } else {
-      sandbox = await Sandbox.create('nextjs-developer')
-    }
-
+    const sandbox = await getSandbox(sessionID)
     const fileTree = await listFilesRecursively(sandbox, '/')
-    
-    // Only kill the sandbox if it was created in this request
-    if (!sandboxId && sandbox) {
-      await sandbox.kill()
-    }
-
     return NextResponse.json(fileTree)
   } catch (error) {
     console.error('Error fetching file tree:', error)
-    // Ensure sandbox is killed in case of an error during file listing
-    if (!sandboxId && sandbox) {
-      await sandbox.kill()
-    }
     return NextResponse.json(
       { error: 'Failed to fetch file tree' },
       { status: 500 },

app/page.tsx

@@ -16,7 +16,7 @@ import { LLMModelConfig } from '@/lib/models'
 import modelsList from '@/lib/models.json'
 import { FragmentSchema, fragmentSchema as schema } from '@/lib/schema'
 import { createBrowserClient } from '@/lib/supabase-client'
-import templates, { TemplateId } from '@/lib/templates'
+import templates, { TemplateId, Templates } from '@/lib/templates'
 import { ExecutionResult } from '@/lib/types'
 import { cn } from '@/lib/utils'
 import { DeepPartial } from 'ai'
@@ -51,16 +51,22 @@ export default function Home() {
   const [authView, setAuthView] = useState<ViewType>('sign_in')
   const [isRateLimited, setIsRateLimited] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
+  const [executionResult, setExecutionResult] = useState<ExecutionResult | undefined>(undefined)
 
   const [currentProject, setCurrentProject] = useState<Project | null>(null)
   const [isLoadingProject, setIsLoadingProject] = useState(false)
 
   const { session, userTeam } = useAuth(setAuthDialog, setAuthView)
 
-  const { executeCode } = useEnhancedChat({
+  const currentTemplate =
+    selectedTemplate === 'auto'
+      ? templates
+      : ({ [selectedTemplate]: templates[selectedTemplate] } as Templates)
+
+  const { executeCode: enhancedExecuteCode } = useEnhancedChat({
     userID: session?.user?.id,
     teamID: userTeam?.id,
-    template: templates,
+    template: currentTemplate,
     model: modelsList.models.find(m => m.id === languageModel.model)!,
     config: languageModel,
   })
@@ -82,10 +88,6 @@ export default function Home() {
   const currentModel = filteredModels.find(
     (model) => model.id === languageModel.model,
   )
-  const currentTemplate =
-    selectedTemplate === 'auto'
-      ? templates
-      : { [selectedTemplate]: templates[selectedTemplate] }
   const lastMessage = messages[messages.length - 1]
 
   useEffect(() => {
@@ -336,14 +338,9 @@ export default function Home() {
     setCurrentPreview({ fragment: undefined, result: undefined })
   }
 
-  async function handleSaveFile(path: string, content: string) {
-    await fetch('/api/files/content', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ path, content }),
-    })
+  const executeCode = async (code: string) => {
+    const result = await enhancedExecuteCode(code)
+    setExecutionResult(result)
   }
 
   return (
@@ -430,21 +427,21 @@ export default function Home() {
             />
           </ChatInput>
         </div>
-        <Preview
+          <Preview
           teamID={userTeam?.id}
           accessToken={session?.access_token}
           selectedTab={currentTab}
           onSelectedTabChange={setCurrentTab}
           isChatLoading={isLoading}
           isPreviewLoading={isPreviewLoading}
           fragment={fragment}
-          result={result as ExecutionResult}
+          result={executionResult || result as ExecutionResult}
           onClose={() => setFragment(undefined)}
           code={fragment?.code || ''}
           executeCode={executeCode}
-          selectedFile={selectedFile}
-          onSave={handleSaveFile}
-        />
+          selectedFile={selectedFile} onSave={function (path: string, content: string): void {
+            throw new Error('Function not implemented.')
+          } }        />
       </div>
     </main>
   )

components/chat-picker.tsx

@@ -106,4 +106,4 @@ export function ChatPicker({
       </div>
     </div>
   )
-}
+}

components/chat-settings.tsx

@@ -202,4 +202,4 @@ export function ChatSettings({
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+}

components/code-editor.tsx

@@ -2,6 +2,7 @@ import Editor, { Monaco } from '@monaco-editor/react'
 import { useRef } from 'react'
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
 import { useTheme } from 'next-themes'
+import './code-theme.css'
 
 export function CodeEditor({
   code,

components/enhanced-code-interpreter.tsx

@@ -21,7 +21,7 @@ import {
 } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import Image from 'next/image'
-import { useState, useRef, useCallback } from 'react'
+import { useState, useRef, useCallback, useEffect } from 'react'
 
 // Dynamically import Monaco Editor to avoid SSR issues
 const MonacoEditor = dynamic(() => import('@monaco-editor/react'), { 
@@ -296,18 +296,27 @@ export function EnhancedCodeInterpreter({
 }: {
   result?: ExecutionResultInterpreter
   code: string
-  executeCode: (code: string) => Promise<void>
+  executeCode: (code: string) => Promise<any>
 }) {
   const [cells, setCells] = useState<CodeCell[]>([
     {
       id: '1',
       code: initialCode || '# Welcome to the Enhanced Code Interpreter\nprint("Hello, World!")',
-      results: result?.cellResults,
-      stdout: result?.stdout,
-      stderr: result?.stderr
     }
   ])
 
+  useEffect(() => {
+    if (result) {
+      setCells(cells.map(cell => ({
+        ...cell,
+        results: result.cellResults,
+        stdout: result.stdout,
+        stderr: result.stderr,
+        error: result.error,
+      })))
+    }
+  }, [result])
+
   const [activeTab, setActiveTab] = useState('notebook')
 
   const addCell = () => {
@@ -334,19 +343,22 @@ export function EnhancedCodeInterpreter({
     const cell = cells.find(c => c.id === id)
     if (!cell) return
 
-    // Mark cell as executing
     setCells(cells.map(c => 
-      c.id === id ? { ...c, isExecuting: true, error: undefined } : c
+      c.id === id ? { ...c, isExecuting: true, error: undefined, results: [], stdout: [], stderr: [] } : c
     ))
 
     try {
-      // Execute the code
-      await executeCode(cell.code)
+      const result = await executeCode(cell.code)
 
-      // For now, we'll need to handle the result through the existing system
-      // In a real implementation, we'd want to get the result directly
       setCells(cells.map(c => 
-        c.id === id ? { ...c, isExecuting: false } : c
+        c.id === id ? { 
+          ...c, 
+          isExecuting: false, 
+          results: result.results,
+          stdout: result.stdout,
+          stderr: result.stderr,
+          error: result.error,
+        } : c
       ))
     } catch (error) {
       setCells(cells.map(c => 
@@ -464,4 +476,4 @@ export function EnhancedCodeInterpreter({
       </Tabs>
     </div>
   )
-}
+}