fix: close the terminal opened with run button

frontend/components/editor/navbar/run.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import React, { useEffect, useRef } from 'react';
 import { Play, StopCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useTerminal } from "@/context/TerminalContext";
@@ -16,53 +17,57 @@ export default function RunButtonModal({
   setIsRunning: (running: boolean) => void;
   sandboxData: Sandbox;
 }) {
-  const { createNewTerminal, terminals, closeTerminal } = useTerminal();
+  const { createNewTerminal, closeTerminal, terminals } = useTerminal();
   const { setIsPreviewCollapsed, previewPanelRef } = usePreview();
+  // Ref to keep track of the last created terminal's ID
+  const lastCreatedTerminalRef = useRef<string | null>(null);
 
-  const handleRun = () => {
+  // Effect to update the lastCreatedTerminalRef when a new terminal is added
-    if (isRunning) {
+  useEffect(() => {
-      console.log('Stopping sandbox...');
+    if (terminals.length > 0 && !isRunning) {
-      console.log('Closing Preview Window');
+      const latestTerminal = terminals[terminals.length - 1];
-
+      if (latestTerminal && latestTerminal.id !== lastCreatedTerminalRef.current) {
-      terminals.forEach(term => {
+        lastCreatedTerminalRef.current = latestTerminal.id;
-        if (term.terminal) {
-          closeTerminal(term.id);
-          console.log('Closing Terminal', term.id);
-        }
-      });
-
-      setIsPreviewCollapsed(true);
-      previewPanelRef.current?.collapse();
-    } else {
-      console.log('Running sandbox...');
-      console.log('Opening Terminal');
-      console.log('Opening Preview Window');
-
-      if (terminals.length < 4) {
-        if (sandboxData.type === "streamlit") {
-          createNewTerminal(
-            "pip install -r requirements.txt && streamlit run main.py --server.runOnSave true"
-          );
-        } else {
-          createNewTerminal("yarn install && yarn dev");
-        }
-      } else {
-        toast.error("You reached the maximum # of terminals.");
-        console.error("Maximum number of terminals reached.");
       }
-
-      setIsPreviewCollapsed(false);
-      previewPanelRef.current?.expand();
     }
+  }, [terminals, isRunning]);
+
+  const handleRun = async () => {
+    if (isRunning && lastCreatedTerminalRef.current) 
+      {
+        await closeTerminal(lastCreatedTerminalRef.current);
+        lastCreatedTerminalRef.current = null;
+        setIsPreviewCollapsed(true);
+        previewPanelRef.current?.collapse();
+      } 
+    else if (!isRunning && terminals.length < 4) 
+      {
+      const command = sandboxData.type === "streamlit"
+        ? "pip install -r requirements.txt && streamlit run main.py --server.runOnSave true"
+        : "yarn install && yarn dev";
+      
+      try {
+        // Create a new terminal with the appropriate command
+        await createNewTerminal(command);
+        setIsPreviewCollapsed(false);
+        previewPanelRef.current?.expand();
+      } catch (error) {
+        toast.error("Failed to create new terminal.");
+        console.error("Error creating new terminal:", error);
+        return;
+      }
+    } else if (!isRunning) {
+      toast.error("You've reached the maximum number of terminals.");
+      return;
+    }
+
     setIsRunning(!isRunning);
   };
 
   return (
-    <>
+    <Button variant="outline" onClick={handleRun}>
-      <Button variant="outline" onClick={handleRun}>
+      {isRunning ? <StopCircle className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
-        {isRunning ? <StopCircle className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
+      {isRunning ? 'Stop' : 'Run'}
-        {isRunning ? 'Stop' : 'Run'}
+    </Button>
-      </Button>
-    </>
   );
 }