feat: different run commands based on file types

frontend/components/editor/navbar/index.tsx

@@ -65,6 +65,7 @@ export default function Navbar({
         <RunButtonModal
           isRunning={isRunning}
           setIsRunning={setIsRunning}
+          sandboxData={sandboxData}
         />
         <div className="flex items-center h-full space-x-4">
           <Avatars />

frontend/components/editor/navbar/run.tsx

@@ -5,16 +5,19 @@ import { Button } from "@/components/ui/button";
 import { useTerminal } from "@/context/TerminalContext";
 import { usePreview } from "@/context/PreviewContext";
 import { toast } from "sonner";
+import { Sandbox } from "@/lib/types";
 
 export default function RunButtonModal({
   isRunning,
   setIsRunning,
+  sandboxData,
 }: {
   isRunning: boolean;
   setIsRunning: (running: boolean) => void;
+  sandboxData: Sandbox;
 }) {
   const { createNewTerminal, terminals, closeTerminal } = useTerminal();
-  const { setIsPreviewCollapsed, previewPanelRef} = usePreview();
+  const { setIsPreviewCollapsed, previewPanelRef } = usePreview();
 
   const handleRun = () => {
     if (isRunning) {
@@ -36,12 +39,16 @@ export default function RunButtonModal({
       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 start");
-        // For testing:
-        //createNewTerminal("echo http://localhost:3000");
+        }
       } else {
         toast.error("You reached the maximum # of terminals.");
-        console.error('Maximum number of terminals reached.');
+        console.error("Maximum number of terminals reached.");
       }
 
       setIsPreviewCollapsed(false);

frontend/lib/types.ts

@@ -12,7 +12,7 @@ export type User = {
 export type Sandbox = {
   id: string;
   name: string;
-  type: "react" | "node";
+  type: string;
   visibility: "public" | "private";
   createdAt: Date;
   userId: string;