updated preview

Author: Gerome-Elassaad

app/api/code/execute/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server'
+import { evaluateCode } from '@/app/api/chat/codeInterpreter'
+
+export async function POST(req: Request) {
+  try {
+    const { sessionID, code } = await req.json()
+
+    if (!sessionID || !code) {
+      return NextResponse.json(
+        { error: 'sessionID and code are required' },
+        { status: 400 },
+      )
+    }
+
+    const result = await evaluateCode(sessionID, code)
+    return NextResponse.json(result)
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || 'An unexpected error occurred' },
+      { status: 500 },
+    )
+  }
+}

app/api/files/content/route.ts

@@ -24,6 +24,7 @@ import { experimental_useObject as useObject } from 'ai/react'
 import { usePostHog } from 'posthog-js/react'
 import { SetStateAction, useCallback, useEffect, useState } from 'react'
 import { useLocalStorage } from 'usehooks-ts'
+import { useEnhancedChat } from '@/hooks/use-enhanced-chat'
 
 export default function Home() {
   const supabase = createBrowserClient()
@@ -54,6 +55,14 @@ export default function Home() {
 
   const { session, userTeam } = useAuth(setAuthDialog, setAuthView)
 
+  const { executeCode } = useEnhancedChat({
+    userID: session?.user?.id,
+    teamID: userTeam?.id,
+    template: templates,
+    model: modelsList.models.find(m => m.id === languageModel.model)!,
+    config: languageModel,
+  })
+
   const handleChatSelected = async (chatId: string) => {
     const project = await getProject(chatId);
     if (project) {
@@ -369,6 +378,7 @@ export default function Home() {
               messages={messages}
               isLoading={isLoading}
               setCurrentPreview={setCurrentPreview}
+              executeCode={executeCode}
             />
           )}
 

app/api/files/route.ts

@@ -1,22 +1,25 @@
 import { Message } from '@/lib/messages'
 import { FragmentSchema } from '@/lib/schema'
-import { ExecutionResult } from '@/lib/types'
+import { ExecutionResult, ExecutionResultInterpreter } from '@/lib/types'
 import { DeepPartial } from 'ai'
 import { LoaderIcon, Terminal } from 'lucide-react'
 import Image from 'next/image'
 import { useEffect } from 'react'
+import { FragmentInterpreter } from './fragment-interpreter'
 
 export function Chat({
   messages,
   isLoading,
   setCurrentPreview,
+  executeCode,
 }: {
   messages: Message[]
   isLoading: boolean
   setCurrentPreview: (preview: {
     fragment: DeepPartial<FragmentSchema> | undefined
     result: ExecutionResult | undefined
   }) => void
+  executeCode: (code: string) => Promise<void>
 }) {
   const messagesString = JSON.stringify(messages)
   useEffect(() => {
@@ -53,7 +56,7 @@ export function Chat({
               )
             }
           })}
-          {message.object && (
+          {message.object && message.object.template !== 'code-interpreter-v1' && (
             <div
               onClick={() =>
                 setCurrentPreview({
@@ -76,6 +79,13 @@ export function Chat({
               </div>
             </div>
           )}
+          {message.object && message.object.template === 'code-interpreter-v1' && (
+            <FragmentInterpreter
+              result={message.result as ExecutionResultInterpreter}
+              code={message.object.code || ''}
+              executeCode={executeCode}
+            />
+          )}
         </div>
       ))}
       {isLoading && (

app/page.tsx

@@ -1,8 +1,10 @@
 import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
 import { ExecutionResultInterpreter } from '@/lib/types'
 import { Result as CellResultData } from '@e2b/code-interpreter'
-import { Terminal } from 'lucide-react'
+import { Terminal, PlayIcon, LoaderIcon } from 'lucide-react'
 import Image from 'next/image'
+import { useState } from 'react'
 
 function CellResult({ result }: { result: CellResultData }) {
   // Order of checks is important
@@ -92,46 +94,54 @@ function LogsOutput({
 
 export function FragmentInterpreter({
   result,
+  code,
+  executeCode,
 }: {
   result: ExecutionResultInterpreter
+  code: string
+  executeCode: (code: string) => Promise<void>
 }) {
-  const { cellResults, stdout, stderr, runtimeError } = result
+  const [isLoading, setIsLoading] = useState(false)
+  const { cellResults, stdout, stderr, runtimeError } = result || {}
 
-  // The AI-generated code experienced runtime error
-  if (runtimeError) {
-    const { name, value, traceback } = runtimeError
-    return (
-      <div className="p-4">
-        <Alert variant="destructive">
-          <Terminal className="h-4 w-4" />
-          <AlertTitle>
-            {name}: {value}
-          </AlertTitle>
-          <AlertDescription className="font-mono whitespace-pre-wrap">
-            {traceback}
-          </AlertDescription>
-        </Alert>
-      </div>
-    )
+  const handleExecute = async () => {
+    setIsLoading(true)
+    await executeCode(code)
+    setIsLoading(false)
   }
 
-  if (cellResults.length > 0) {
-    return (
-      <div className="flex flex-col h-full">
-        <div className="w-full flex-1 p-4 flex flex-col items-start justify-center border-b space-y-4">
-          {cellResults.map((cellResult, index) => (
-            <CellResult key={index} result={cellResult} />
-          ))}
-        </div>
-        <LogsOutput stdout={stdout} stderr={stderr} />
+  return (
+    <div className="flex flex-col h-full">
+      <div className="w-full flex-1 p-4 flex flex-col items-start justify-center border-b space-y-4">
+        {cellResults && cellResults.length > 0 && cellResults.map((cellResult, index) => (
+          <CellResult key={index} result={cellResult} />
+        ))}
+        {runtimeError && (
+          <Alert variant="destructive">
+            <Terminal className="h-4 w-4" />
+            <AlertTitle>
+              {runtimeError.name}: {runtimeError.value}
+            </AlertTitle>
+            <AlertDescription className="font-mono whitespace-pre-wrap">
+              {runtimeError.traceback}
+            </AlertDescription>
+          </Alert>
+        )}
+        {(!cellResults || cellResults.length === 0) && !runtimeError && (
+          <span>No output or logs</span>
+        )}
       </div>
-    )
-  }
-
-  // No cell results, but there is stdout or stderr
-  if (stdout.length > 0 || stderr.length > 0) {
-    return <LogsOutput stdout={stdout} stderr={stderr} />
-  }
-
-  return <span>No output or logs</span>
+      <LogsOutput stdout={stdout || []} stderr={stderr || []} />
+      <div className="p-4 border-t">
+        <Button onClick={handleExecute} disabled={isLoading}>
+          {isLoading ? (
+            <LoaderIcon className="animate-spin mr-2" />
+          ) : (
+            <PlayIcon className="mr-2" />
+          )}
+          Execute
+        </Button>
+      </div>
+    </div>
+  )
 }

components/chat.tsx

@@ -23,6 +23,7 @@ interface EnhancedChatConfig {
 
 export function useEnhancedChat(chatConfig: EnhancedChatConfig) {
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isExecuting, setIsExecuting] = useState(false)
   const [context, setContext] = useState({
     cwd: '/home/project',
     projectFiles: [] as string[],
@@ -31,7 +32,7 @@ export function useEnhancedChat(chatConfig: EnhancedChatConfig) {
     supabase: undefined as any
   })
 
-  const { messages, input, setInput, append, isLoading, stop, error } = useChat({
+  const { messages, input, setInput, append, isLoading, stop, error, setMessages } = useChat({
     api: '/api/chat',
     body: {
       userID: chatConfig.userID,
@@ -100,6 +101,48 @@ export function useEnhancedChat(chatConfig: EnhancedChatConfig) {
     }))
   }, [])
 
+  const executeCode = useCallback(
+    async (code: string) => {
+      if (isExecuting) return
+      setIsExecuting(true)
+
+      try {
+        const response = await fetch('/api/code/execute', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            sessionID: chatConfig.userID,
+            code,
+          }),
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json()
+          throw new Error(errorData.error || 'Failed to execute code')
+        }
+
+        const result = await response.json()
+        
+        const lastMessage = messages[messages.length - 1]
+        if (lastMessage) {
+          const updatedMessage = {
+            ...lastMessage,
+            result: result,
+          }
+          setMessages([...messages.slice(0, -1), updatedMessage])
+        }
+
+      } catch (error: any) {
+        trackError(error.message)
+      } finally {
+        setIsExecuting(false)
+      }
+    },
+    [isExecuting, chatConfig.userID, trackError, messages, setMessages],
+  )
+
   useEffect(() => {
     if (error) {
       trackError(error.message)
@@ -111,11 +154,12 @@ export function useEnhancedChat(chatConfig: EnhancedChatConfig) {
     input,
     setInput,
     submitMessage,
-    isLoading: isLoading || isSubmitting,
+    isLoading: isLoading || isSubmitting || isExecuting,
     stop,
     error,
     context,
     updateContext,
-    trackError
+    trackError,
+    executeCode,
   }
 }