Chore: Change about to help, and add link to Discord

- added user avatars for each user
- it will fetch user images from github or google and if there is no image then it will show initials

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": false,
+    "insertFinalNewline": true
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
+  }
+}

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2024 Ishaan Dey
+Copyright (c) 2024 GitWit, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,103 +1,247 @@
-# Sandbox 📦🪄
+# GitWit Sandbox 📦🪄
 
-<img width="1799" alt="Screenshot 2024-05-31 at 8 33 56 AM" src="https://github.com/ishaan1013/sandbox/assets/69771365/3f73d7c0-f82a-4997-b01e-eaa043e95113">
+![2024-10-2307 17 42-ezgif com-resize](https://github.com/user-attachments/assets/a4057129-81a7-4a31-a093-c8bc8189ae72)
 
-Sandbox is an open-source cloud-based code editing environment with custom AI code autocompletion and real-time collaboration.
+Sandbox is an open-source cloud-based code editing environment with custom AI code generation, live preview, real-time collaboration and AI chat.
 
-Check out the [Twitter thread](https://x.com/ishaandey_/status/1796338262002573526) with the demo video!
-
-Check out this [guide](https://dev.to/jamesmurdza/how-to-setup-ishaan1013sandbox-locally-503p) made by [@jamesmurdza](https://x.com/jamesmurdza) on setting it up locally!
+For the latest updates, join our Discord server: [discord.gitwit.dev](https://discord.gitwit.dev/).
 
 ## Running Locally
 
-### Frontend
+Notes:
 
-Install dependencies
+- Double check that whatever you change "SUPERDUPERSECRET" to, it's the same in all config files.
+
+### 0. Requirements
+
+The application uses NodeJS for the backend, NextJS for the frontend and Cloudflare workers for additional backend tasks.
+
+Needed accounts to set up:
+
+- [Clerk](https://clerk.com/): Used for user authentication.
+- [Liveblocks](https://liveblocks.io/): Used for collaborative editing.
+- [E2B](https://e2b.dev/): Used for the terminals and live preview.
+- [Cloudflare](https://www.cloudflare.com/): Used for relational data storage (D2) and file storage (R2).
+
+A quick overview of the tech before we start: The deployment uses a **NextJS** app for the frontend and an **ExpressJS** server on the backend. Presumably that's because NextJS integrates well with Clerk middleware but not with Socket.io.
+
+### 1. Initial setup
+
+No surprise in the first step:
 
 ```bash
-cd frontend
-npm install
+git clone https://github.com/jamesmurdza/sandbox
+cd sandbox
 ```
 
-Add the required environment variables in `.env` (example file provided in `.env.example`). You will need to make an account on [Clerk](https://clerk.com/) and [Liveblocks](https://liveblocks.io/) to get API keys.
+Run `npm install` in:
 
-Then, run in development mode
-
-```bash
-npm run dev
+```
+/frontend
+/backend/database
+/backend/storage
+/backend/server
+/backend/ai
 ```
 
-### Backend
+### 2. Adding Clerk
 
-The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview.
+Setup the Clerk account.
+Get the API keys from Clerk.
 
-You will need to make an account on [E2B](https://e2b.dev/) to get an API key.
+Update `/frontend/.env`:
 
-#### Socket.io server
-
-Install dependencies
-
-```bash
-cd backend/server
-npm install
+```
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='🔑'
+CLERK_SECRET_KEY='🔑'
 ```
 
-Add the required environment variables in `.env` (example file provided in `.env.example`)
+### 3. Deploying the storage bucket
 
-Project files will be stored in the `projects/<project-id>` directory. The middleware contains basic authorization logic for connecting to the server.
+Go to Cloudflare.
+Create and name an R2 storage bucket in the control panel.
+Copy the account ID of one domain.
 
-Run in development mode
+Update `/backend/storage/src/wrangler.toml`:
 
-```bash
-npm run dev
+```
+account_id = '🔑'
+bucket_name = '🔑'
+key = 'SUPERDUPERSECRET'
 ```
 
-This directory is dockerized, so feel free to deploy a container on any platform of your choice! I chose not to deploy this project for public access due to costs & safety, but deploying your own for personal use should be no problem.
+In the `/backend/storage/src` directory:
 
-#### Cloudflare Workers (Database, Storage, AI)
-
-Directories:
-
-- `/backend/database`: D1 database
-- `/backend/storage`: R2 storage
-- `/backend/ai`: Workers AI
-
-Install dependencies
-
-```bash
-cd backend/database
-npm install
-
-cd ../storage
-npm install
-
-cd ../ai
-npm install
 ```
-
-Read the [documentation](https://developers.cloudflare.com/workers/) to learn more about workers.
-
-For each directory, add the required environment variables in `wrangler.toml` (example file provided in `wrangler.example.toml`). For the AI worker, you can define any value you want for the `CF_AI_KEY` -- set this in other `.env` files to authorize access.
-
-Run in development mode
-
-```bash
-npm run dev
-```
-
-Deploy to Cloudflare with [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/)
-
-```bash
 npx wrangler deploy
 ```
 
----
+### 4. Deploying the database
+
+Create a database:
+
+```
+npx wrangler d1 create sandbox-database
+```
+
+Use the output for the next setp.
+
+Update `/backend/database/src/wrangler.toml`:
+
+```
+database_name = '🔑'
+database_id = '🔑'
+KEY = 'SUPERDUPERSECRET'
+STORAGE_WORKER_URL = 'https://storage.🍎.workers.dev'
+```
+
+In the `/backend/database/src` directory:
+
+```
+npx wrangler deploy
+```
+
+### 5. Applying the database schema
+
+Delete the `/backend/database/drizzle/meta` directory.
+
+In the `/backend/database/` directory:
+
+```
+npm run generate
+npx wrangler d1 execute sandbox-database --remote --file=./drizzle/0000_🍏_🍐.sql
+```
+
+### 6. Configuring the server
+
+Update `/backend/server/.env`:
+
+```
+DATABASE_WORKER_URL='https://database.🍎.workers.dev'
+STORAGE_WORKER_URL='https://storage.🍎.workers.dev'
+WORKERS_KEY='SUPERDUPERSECRET'
+```
+
+### 7. Adding Liveblocks
+
+Setup the Liveblocks account.
+
+Update `/frontend/.env`:
+
+```
+NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY='🔑'
+LIVEBLOCKS_SECRET_KEY='🔑'
+```
+
+### 8. Adding E2B
+
+Setup the E2B account.
+
+Update `/backend/server/.env`:
+
+```
+E2B_API_KEY='🔑'
+```
+
+### 9. Adding AI code generation
+
+In the `/backend/ai` directory:
+
+```
+npx wrangler deploy
+```
+
+Update `/backend/server/.env`:
+
+```
+AI_WORKER_URL='https://ai.🍎.workers.dev'
+```
+
+### 10. Configuring the frontend
+
+Update `/frontend/.env`:
+
+```
+NEXT_PUBLIC_DATABASE_WORKER_URL='https://database.🍎.workers.dev'
+NEXT_PUBLIC_STORAGE_WORKER_URL='https://storage.🍎.workers.dev'
+NEXT_PUBLIC_WORKERS_KEY='SUPERDUPERSECRET'
+```
+
+### 11. Running the IDE
+
+Run `npm run dev` simultaneously in:
+
+```
+/frontend
+/backend/server
+```
+
+## Setting up Deployments
+
+The steps above do not include steps to setup [Dokku](https://github.com/dokku/dokku), which is required for deployments.
+
+**Note:** This is completely optional to set up if you just want to run GitWit Sandbox.
+
+Setting up deployments first requires a separate domain (such as gitwit.app, which we use).
+
+We then deploy Dokku on a separate server, according to this guide: https://dev.to/jamesmurdza/host-your-own-paas-platform-as-a-service-on-amazon-web-services-3f0d
+
+The Sandbox platform connects to the Dokku server via SSH, using SSH keys specifically generated for this connection. The SSH key is stored on the Sandbox server, and the following environment variables are set in /backend/server/.env:
+
+```bash
+DOKKU_HOST=
+DOKKU_USERNAME=
+DOKKU_KEY=
+```
+
+## Creating Custom Templates
+
+Anyone can contribute a custom template for integration in Sandbox. Since Sandbox is built on E2B, there is no limitation to what langauge or runtime a Sandbox can use.
+
+Currently there are four templates:
+- [jamesmurdza/dokku-reactjs-template](https://github.com/jamesmurdza/dokku-reactjs-template)
+- [jamesmurdza/dokku-vanillajs-template](https://github.com/jamesmurdza/dokku-vanillajs-template)
+- [jamesmurdza/dokku-nextjs-template](https://github.com/jamesmurdza/dokku-nextjs-template)
+- [jamesmurdza/dokku-streamlit-template](https://github.com/jamesmurdza/dokku-streamlit-template)
+
+To create your own template, you can fork one of the above templates or start with a new blank repository. The template should have at least an `e2b.Dockerfile`, which is used by E2B to create the development environment. Optionally, a `Dockerfile` can be added which will be used to create the project build when it is deployed.
+
+To test the template, you must have an [E2B account](https://e2b.dev/) and the [E2B CLI tools](https://e2b.dev/docs/cli) installed. Then, in the Terminal, run:
+
+```
+e2b auth login
+```
+
+Then, navigate to your template directory and run the following command where **TEMPLATENAME** is the name of your template:
+
+```
+e2b template build -d e2b.Dockerfile -n TEMPLATENAME
+```
+
+Finally, to test your template run:
+
+```
+e2b sandbox spawn TEMPLATENAME
+cd project
+```
+
+You will see a URL in the form of `https://xxxxxxxxxxxxxxxxxxx.e2b-staging.com`.
+
+Now, run the command to start your development server.
+
+To see the running server, visit the public url `https://<PORT>-xxxxxxxxxxxxxxxxxxx.e2b-staging.com`.
+
+If you've done this and it works, let us know and we'll add your template to Sandbox! Please reach out to us [on Discord](https://discord.gitwit.dev/) with any questions or to submit your working template.
+
+Note: In the future, we will add a way to specify the command triggered by the "Run" button (e.g. "npm run dev").
+
+For more information, see:
+- [Custom E2B Sandboxes](https://e2b.dev/docs/sandbox-template)
+- [Dokku Builders](https://dokku.com/docs/deployment/builders/builder-management/)
 
 ## Contributing
 
-Thanks for your interest in contributing! Review this section before submitting your first pull request. If you need any help, feel free to reach out to [@ishaandey\_](https://x.com/ishaandey_).
-
-Please prioritize existing issues, but feel free to contribute new issues if you have ideas for a feature or bug that you think would be useful.
+Thanks for your interest in contributing! Review this section before submitting your first pull request. If you need any help, feel free contact us [on Discord](https://discord.gitwit.dev/).
 
 ### Structure
 
@@ -116,13 +260,13 @@ backend/
 └── ai
 ```
 
-| Path               | Description                                                                |
-| ------------------ | -------------------------------------------------------------------------- |
-| `frontend`         | The Next.js application for the frontend.                                  |
-| `backend/server`   | The Express websocket server.                                              |
-| `backend/database` | API for interfacing with the D1 database (SQLite).                         |
+| Path               | Description                                                  |
+| ------------------ | ------------------------------------------------------------ |
+| `frontend`         | The Next.js application for the frontend.                    |
+| `backend/server`   | The Express websocket server.                                |
+| `backend/database` | API for interfacing with the D1 database (SQLite).           |
 | `backend/storage`  | API for interfacing with R2 storage. Service-bound to `/backend/database`. |
-| `backend/ai`       | API for making requests to Workers AI .                                    |
+| `backend/ai`       | API for making requests to Workers AI .                      |
 
 ### Development
 
@@ -151,11 +295,15 @@ It should be in the form `category(scope or module): message` in your commit mes
 
 - `feat / feature`: all changes that introduce completely new code or new
   features
+
 - `fix`: changes that fix a bug (ideally you will additionally reference an
   issue if present)
+
 - `refactor`: any code related change that is not a fix nor a feature
+
 - `docs`: changing existing or creating new documentation (i.e. README, docs for
   usage of a lib or cli usage)
+
 - `chore`: all changes to the repository that do not fit into any of the above
   categories
 

backend/ai/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": false
-}

backend/ai/package.json

@@ -1,22 +1,22 @@
 {
-  "name": "ai",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "deploy": "wrangler deploy",
-    "dev": "wrangler dev",
-    "start": "wrangler dev",
-    "test": "vitest",
-    "cf-typegen": "wrangler types"
-  },
-  "devDependencies": {
-    "@cloudflare/vitest-pool-workers": "^0.1.0",
-    "@cloudflare/workers-types": "^4.20240512.0",
-    "typescript": "^5.0.4",
-    "vitest": "1.3.0",
-    "wrangler": "^3.0.0"
-  },
-  "dependencies": {
-    "@anthropic-ai/sdk": "^0.27.2"
-  }
-}
+	"name": "ai",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler deploy",
+		"dev": "wrangler dev",
+		"start": "wrangler dev",
+		"test": "vitest",
+		"cf-typegen": "wrangler types"
+	},
+	"devDependencies": {
+		"@cloudflare/vitest-pool-workers": "^0.1.0",
+		"@cloudflare/workers-types": "^4.20240512.0",
+		"typescript": "^5.0.4",
+		"vitest": "1.3.0",
+		"wrangler": "^3.0.0"
+	},
+	"dependencies": {
+		"@anthropic-ai/sdk": "^0.27.2"
+	}
+}

backend/ai/src/index.ts

@@ -1,57 +1,61 @@
-import { Anthropic } from "@anthropic-ai/sdk";
-import { MessageParam } from "@anthropic-ai/sdk/src/resources/messages.js";
+import { Anthropic } from "@anthropic-ai/sdk"
+import { MessageParam } from "@anthropic-ai/sdk/src/resources/messages.js"
 
 export interface Env {
-  ANTHROPIC_API_KEY: string;
+	ANTHROPIC_API_KEY: string
 }
 
 export default {
-  async fetch(request: Request, env: Env): Promise<Response> {
-    // Handle CORS preflight requests
-    if (request.method === "OPTIONS") {
-      return new Response(null, {
-        headers: {
-          "Access-Control-Allow-Origin": "*",
-          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
-          "Access-Control-Allow-Headers": "Content-Type",
-        },
-      });
-    }
+	async fetch(request: Request, env: Env): Promise<Response> {
+		// Handle CORS preflight requests
+		if (request.method === "OPTIONS") {
+			return new Response(null, {
+				headers: {
+					"Access-Control-Allow-Origin": "*",
+					"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+					"Access-Control-Allow-Headers": "Content-Type",
+				},
+			})
+		}
 
-    if (request.method !== "GET" && request.method !== "POST") {
-      return new Response("Method Not Allowed", { status: 405 });
-    }
+		if (request.method !== "GET" && request.method !== "POST") {
+			return new Response("Method Not Allowed", { status: 405 })
+		}
 
-    let body;
-    let isEditCodeWidget = false;
-    if (request.method === "POST") {
-      body = await request.json() as { messages: unknown; context: unknown; activeFileContent: string };
-    } else {
-      const url = new URL(request.url);
-      const fileName = url.searchParams.get("fileName") || "";
-      const code = url.searchParams.get("code") || "";
-      const line = url.searchParams.get("line") || "";
-      const instructions = url.searchParams.get("instructions") || "";
+		let body
+		let isEditCodeWidget = false
+		if (request.method === "POST") {
+			body = (await request.json()) as {
+				messages: unknown
+				context: unknown
+				activeFileContent: string
+			}
+		} else {
+			const url = new URL(request.url)
+			const fileName = url.searchParams.get("fileName") || ""
+			const code = url.searchParams.get("code") || ""
+			const line = url.searchParams.get("line") || ""
+			const instructions = url.searchParams.get("instructions") || ""
 
-      body = {
-        messages: [{ role: "human", content: instructions }],
-        context: `File: ${fileName}\nLine: ${line}\nCode:\n${code}`,
-        activeFileContent: code,
-      };
-      isEditCodeWidget = true;
-    }
+			body = {
+				messages: [{ role: "human", content: instructions }],
+				context: `File: ${fileName}\nLine: ${line}\nCode:\n${code}`,
+				activeFileContent: code,
+			}
+			isEditCodeWidget = true
+		}
 
-    const messages = body.messages;
-    const context = body.context;
-    const activeFileContent = body.activeFileContent;
+		const messages = body.messages
+		const context = body.context
+		const activeFileContent = body.activeFileContent
 
-    if (!Array.isArray(messages) || messages.length === 0) {
-      return new Response("Invalid or empty messages", { status: 400 });
-    }
+		if (!Array.isArray(messages) || messages.length === 0) {
+			return new Response("Invalid or empty messages", { status: 400 })
+		}
 
-    let systemMessage;
-    if (isEditCodeWidget) {
-      systemMessage = `You are an AI code editor. Your task is to modify the given code based on the user's instructions. Only output the modified code, without any explanations or markdown formatting. The code should be a direct replacement for the existing code.
+		let systemMessage
+		if (isEditCodeWidget) {
+			systemMessage = `You are an AI code editor. Your task is to modify the given code based on the user's instructions. Only output the modified code, without any explanations or markdown formatting. The code should be a direct replacement for the existing code.
 
 Context:
 ${context}
@@ -61,9 +65,9 @@ ${activeFileContent}
 
 Instructions: ${messages[0].content}
 
-Respond only with the modified code that can directly replace the existing code.`;
-    } else {
-      systemMessage = `You are an intelligent programming assistant. Please respond to the following request concisely. If your response includes code, please format it using triple backticks (\`\`\`) with the appropriate language identifier. For example:
+Respond only with the modified code that can directly replace the existing code.`
+		} else {
+			systemMessage = `You are an intelligent programming assistant. Please respond to the following request concisely. If your response includes code, please format it using triple backticks (\`\`\`) with the appropriate language identifier. For example:
 
 \`\`\`python
 print("Hello, World!")
@@ -71,51 +75,54 @@ print("Hello, World!")
 
 Provide a clear and concise explanation along with any code snippets. Keep your response brief and to the point.
 
-${context ? `Context:\n${context}\n` : ''}
-${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ''}`;
-    }
+${context ? `Context:\n${context}\n` : ""}
+${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ""}`
+		}
 
-    const anthropicMessages = messages.map(msg => ({
-      role: msg.role === 'human' ? 'user' : 'assistant',
-      content: msg.content
-    })) as MessageParam[];
+		const anthropicMessages = messages.map((msg) => ({
+			role: msg.role === "human" ? "user" : "assistant",
+			content: msg.content,
+		})) as MessageParam[]
 
-    try { 
-      const anthropic = new Anthropic({ apiKey: env.ANTHROPIC_API_KEY });
+		try {
+			const anthropic = new Anthropic({ apiKey: env.ANTHROPIC_API_KEY })
 
-      const stream = await anthropic.messages.create({
-        model: "claude-3-5-sonnet-20240620",
-        max_tokens: 1024,
-        system: systemMessage,
-        messages: anthropicMessages,
-        stream: true,
-      });
+			const stream = await anthropic.messages.create({
+				model: "claude-3-5-sonnet-20240620",
+				max_tokens: 1024,
+				system: systemMessage,
+				messages: anthropicMessages,
+				stream: true,
+			})
 
-      const encoder = new TextEncoder();
+			const encoder = new TextEncoder()
 
-      const streamResponse = new ReadableStream({
-        async start(controller) {
-          for await (const chunk of stream) {
-            if (chunk.type === 'content_block_delta' && chunk.delta.type === 'text_delta') {
-              const bytes = encoder.encode(chunk.delta.text);
-              controller.enqueue(bytes);
-            }
-          }
-          controller.close();
-        },
-      });
+			const streamResponse = new ReadableStream({
+				async start(controller) {
+					for await (const chunk of stream) {
+						if (
+							chunk.type === "content_block_delta" &&
+							chunk.delta.type === "text_delta"
+						) {
+							const bytes = encoder.encode(chunk.delta.text)
+							controller.enqueue(bytes)
+						}
+					}
+					controller.close()
+				},
+			})
 
-      return new Response(streamResponse, {
-        headers: {
-          "Content-Type": "text/plain; charset=utf-8",
-          "Access-Control-Allow-Origin": "*",
-          "Cache-Control": "no-cache",
-          "Connection": "keep-alive",
-        },
-      });
-    } catch (error) {
-      console.error("Error:", error);
-      return new Response("Internal Server Error", { status: 500 });
-    }
-  },
-};
+			return new Response(streamResponse, {
+				headers: {
+					"Content-Type": "text/plain; charset=utf-8",
+					"Access-Control-Allow-Origin": "*",
+					"Cache-Control": "no-cache",
+					Connection: "keep-alive",
+				},
+			})
+		} catch (error) {
+			console.error("Error:", error)
+			return new Response("Internal Server Error", { status: 500 })
+		}
+	},
+}

backend/ai/test/index.spec.ts

@@ -1,25 +1,30 @@
 // test/index.spec.ts
-import { env, createExecutionContext, waitOnExecutionContext, SELF } from 'cloudflare:test';
-import { describe, it, expect } from 'vitest';
-import worker from '../src/index';
+import {
+	createExecutionContext,
+	env,
+	SELF,
+	waitOnExecutionContext,
+} from "cloudflare:test"
+import { describe, expect, it } from "vitest"
+import worker from "../src/index"
 
 // For now, you'll need to do something like this to get a correctly-typed
 // `Request` to pass to `worker.fetch()`.
-const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;
+const IncomingRequest = Request<unknown, IncomingRequestCfProperties>
 
-describe('Hello World worker', () => {
-	it('responds with Hello World! (unit style)', async () => {
-		const request = new IncomingRequest('http://example.com');
+describe("Hello World worker", () => {
+	it("responds with Hello World! (unit style)", async () => {
+		const request = new IncomingRequest("http://example.com")
 		// Create an empty context to pass to `worker.fetch()`.
-		const ctx = createExecutionContext();
-		const response = await worker.fetch(request, env, ctx);
+		const ctx = createExecutionContext()
+		const response = await worker.fetch(request, env, ctx)
 		// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
-		await waitOnExecutionContext(ctx);
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
-	});
+		await waitOnExecutionContext(ctx)
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
+	})
 
-	it('responds with Hello World! (integration style)', async () => {
-		const response = await SELF.fetch('https://example.com');
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
-	});
-});
+	it("responds with Hello World! (integration style)", async () => {
+		const response = await SELF.fetch("https://example.com")
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
+	})
+})

backend/ai/test/tsconfig.json

@@ -1,11 +1,11 @@
 {
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "types": [
-      "@cloudflare/workers-types/experimental",
-      "@cloudflare/vitest-pool-workers"
-    ]
-  },
-  "include": ["./**/*.ts", "../src/env.d.ts"],
-  "exclude": []
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"types": [
+			"@cloudflare/workers-types/experimental",
+			"@cloudflare/vitest-pool-workers"
+		]
+	},
+	"include": ["./**/*.ts", "../src/env.d.ts"],
+	"exclude": []
 }

backend/ai/tsconfig.json

@@ -12,7 +12,9 @@
 
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+		"lib": [
+			"es2021"
+		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
 		"jsx": "react" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */

backend/ai/vitest.config.ts

@@ -1,11 +1,11 @@
-import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config"
 
 export default defineWorkersConfig({
-  test: {
-    poolOptions: {
-      workers: {
-        wrangler: { configPath: "./wrangler.toml" },
-      },
-    },
-  },
-});
+	test: {
+		poolOptions: {
+			workers: {
+				wrangler: { configPath: "./wrangler.toml" },
+			},
+		},
+	},
+})

backend/ai/worker-configuration.d.ts

@@ -1,4 +1,3 @@
 // Generated by Wrangler
 // After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
-interface Env {
-}
+interface Env {}

backend/ai/wrangler.example.toml

@@ -5,3 +5,6 @@ compatibility_flags = ["nodejs_compat"]
 
 [ai]
 binding = "AI"
+
+[vars]
+ANTHROPIC_API_KEY = ""

backend/database/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": false
-}

backend/database/drizzle.config.ts

@@ -1,4 +1,4 @@
-import type { Config } from "drizzle-kit";
+import type { Config } from "drizzle-kit"
 
 export default process.env.LOCAL_DB_PATH
 	? ({
@@ -16,4 +16,4 @@ export default process.env.LOCAL_DB_PATH
 				wranglerConfigPath: "wrangler.toml",
 				dbName: "d1-sandbox",
 			},
-	  } satisfies Config);
+	  } satisfies Config)

backend/database/drizzle/meta/0000_snapshot.json

@@ -1,7 +1,7 @@
 {
   "version": "5",
   "dialect": "sqlite",
-  "id": "6570ba20-a672-400c-8147-7ba533784918",
+  "id": "afe10bff-362b-402c-bdb5-038341692f35",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "tables": {
     "sandbox": {
@@ -35,12 +35,36 @@
           "notNull": false,
           "autoincrement": false
         },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
         "user_id": {
           "name": "user_id",
           "type": "text",
           "primaryKey": false,
           "notNull": true,
           "autoincrement": false
+        },
+        "likeCount": {
+          "name": "likeCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
+        },
+        "viewCount": {
+          "name": "viewCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
         }
       },
       "indexes": {
@@ -93,6 +117,43 @@
           "primaryKey": false,
           "notNull": true,
           "autoincrement": false
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "avatarUrl": {
+          "name": "avatarUrl",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "generations": {
+          "name": "generations",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
         }
       },
       "indexes": {
@@ -102,6 +163,13 @@
             "id"
           ],
           "isUnique": true
+        },
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
         }
       },
       "foreignKeys": {},
@@ -124,6 +192,13 @@
           "primaryKey": false,
           "notNull": true,
           "autoincrement": false
+        },
+        "sharedOn": {
+          "name": "sharedOn",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
         }
       },
       "indexes": {},

backend/database/drizzle/meta/0001_snapshot.json

@@ -1,8 +1,8 @@
 {
   "version": "5",
   "dialect": "sqlite",
-  "id": "9f64104a-4954-40c0-8155-17755ea0a243",
-  "prevId": "6570ba20-a672-400c-8147-7ba533784918",
+  "id": "e570d5ac-700d-4e62-8a46-482b21ae1fe1",
+  "prevId": "afe10bff-362b-402c-bdb5-038341692f35",
   "tables": {
     "sandbox": {
       "name": "sandbox",
@@ -35,12 +35,36 @@
           "notNull": false,
           "autoincrement": false
         },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
         "user_id": {
           "name": "user_id",
           "type": "text",
           "primaryKey": false,
           "notNull": true,
           "autoincrement": false
+        },
+        "likeCount": {
+          "name": "likeCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
+        },
+        "viewCount": {
+          "name": "viewCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
         }
       },
       "indexes": {
@@ -94,12 +118,35 @@
           "notNull": true,
           "autoincrement": false
         },
-        "image": {
-          "name": "image",
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "avatarUrl": {
+          "name": "avatarUrl",
           "type": "text",
           "primaryKey": false,
           "notNull": false,
           "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "generations": {
+          "name": "generations",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": 0
         }
       },
       "indexes": {
@@ -109,6 +156,13 @@
             "id"
           ],
           "isUnique": true
+        },
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
         }
       },
       "foreignKeys": {},
@@ -131,6 +185,13 @@
           "primaryKey": false,
           "notNull": true,
           "autoincrement": false
+        },
+        "sharedOn": {
+          "name": "sharedOn",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
         }
       },
       "indexes": {},

backend/database/drizzle/meta/0002_snapshot.json

@@ -1,168 +0,0 @@
-{
-  "version": "5",
-  "dialect": "sqlite",
-  "id": "5baf10d6-7697-42ba-a11a-ee4c7bd7e91e",
-  "prevId": "9f64104a-4954-40c0-8155-17755ea0a243",
-  "tables": {
-    "sandbox": {
-      "name": "sandbox",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "type": {
-          "name": "type",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "visibility": {
-          "name": "visibility",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "sandbox_id_unique": {
-          "name": "sandbox_id_unique",
-          "columns": [
-            "id"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {
-        "sandbox_user_id_user_id_fk": {
-          "name": "sandbox_user_id_user_id_fk",
-          "tableFrom": "sandbox",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "user": {
-      "name": "user",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "user_id_unique": {
-          "name": "user_id_unique",
-          "columns": [
-            "id"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "users_to_sandboxes": {
-      "name": "users_to_sandboxes",
-      "columns": {
-        "userId": {
-          "name": "userId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "sandboxId": {
-          "name": "sandboxId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "users_to_sandboxes_userId_user_id_fk": {
-          "name": "users_to_sandboxes_userId_user_id_fk",
-          "tableFrom": "users_to_sandboxes",
-          "tableTo": "user",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        },
-        "users_to_sandboxes_sandboxId_sandbox_id_fk": {
-          "name": "users_to_sandboxes_sandboxId_sandbox_id_fk",
-          "tableFrom": "users_to_sandboxes",
-          "tableTo": "sandbox",
-          "columnsFrom": [
-            "sandboxId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    }
-  },
-  "enums": {},
-  "_meta": {
-    "schemas": {},
-    "tables": {},
-    "columns": {}
-  }
-}

backend/database/drizzle/meta/0003_snapshot.json

@@ -1,175 +0,0 @@
-{
-  "version": "5",
-  "dialect": "sqlite",
-  "id": "37e38b82-1494-4818-8c26-b9024cce3fa9",
-  "prevId": "5baf10d6-7697-42ba-a11a-ee4c7bd7e91e",
-  "tables": {
-    "sandbox": {
-      "name": "sandbox",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "type": {
-          "name": "type",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "visibility": {
-          "name": "visibility",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "sandbox_id_unique": {
-          "name": "sandbox_id_unique",
-          "columns": [
-            "id"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {
-        "sandbox_user_id_user_id_fk": {
-          "name": "sandbox_user_id_user_id_fk",
-          "tableFrom": "sandbox",
-          "tableTo": "user",
-          "columnsFrom": [
-            "user_id"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "user": {
-      "name": "user",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "image": {
-          "name": "image",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false,
-          "autoincrement": false
-        }
-      },
-      "indexes": {
-        "user_id_unique": {
-          "name": "user_id_unique",
-          "columns": [
-            "id"
-          ],
-          "isUnique": true
-        }
-      },
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "users_to_sandboxes": {
-      "name": "users_to_sandboxes",
-      "columns": {
-        "userId": {
-          "name": "userId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        },
-        "sandboxId": {
-          "name": "sandboxId",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true,
-          "autoincrement": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "users_to_sandboxes_userId_user_id_fk": {
-          "name": "users_to_sandboxes_userId_user_id_fk",
-          "tableFrom": "users_to_sandboxes",
-          "tableTo": "user",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        },
-        "users_to_sandboxes_sandboxId_sandbox_id_fk": {
-          "name": "users_to_sandboxes_sandboxId_sandbox_id_fk",
-          "tableFrom": "users_to_sandboxes",
-          "tableTo": "sandbox",
-          "columnsFrom": [
-            "sandboxId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    }
-  },
-  "enums": {},
-  "_meta": {
-    "schemas": {},
-    "tables": {},
-    "columns": {}
-  }
-}

backend/database/drizzle/meta/_journal.json

@@ -5,50 +5,29 @@
     {
       "idx": 0,
       "version": "5",
-      "when": 1714540200800,
-      "tag": "0000_big_rogue",
+      "when": 1731288423588,
+      "tag": "0000_cuddly_patriot",
       "breakpoints": true
     },
     {
       "idx": 1,
       "version": "5",
-      "when": 1714541190588,
-      "tag": "0001_empty_black_knight",
+      "when": 1731290863632,
+      "tag": "0001_opposite_newton_destine",
       "breakpoints": true
     },
     {
       "idx": 2,
       "version": "5",
-      "when": 1714541209173,
-      "tag": "0002_sour_ego",
+      "when": 1731296235880,
+      "tag": "0002_rainy_fantastic_four",
       "breakpoints": true
     },
     {
       "idx": 3,
       "version": "5",
-      "when": 1714541233589,
-      "tag": "0003_pale_overlord",
-      "breakpoints": true
-    },
-    {
-      "idx": 4,
-      "version": "5",
-      "when": 1714565073180,
-      "tag": "0004_cuddly_wolf_cub",
-      "breakpoints": true
-    },
-    {
-      "idx": 5,
-      "version": "5",
-      "when": 1714950365718,
-      "tag": "0005_last_the_twelve",
-      "breakpoints": true
-    },
-    {
-      "idx": 6,
-      "version": "5",
-      "when": 1716432225404,
-      "tag": "0006_lively_mattie_franklin",
+      "when": 1731297339306,
+      "tag": "0003_lying_snowbird",
       "breakpoints": true
     }
   ]

backend/database/package.json

@@ -1,32 +1,32 @@
 {
-  "name": "database",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "deploy": "wrangler deploy",
-    "dev": "wrangler dev",
-    "start": "wrangler dev",
-    "test": "vitest",
-    "generate": "drizzle-kit generate:sqlite --schema=src/schema.ts",
-    "up": "drizzle-kit up:sqlite --schema=src/schema.ts",
-    "db:studio": "cross-env LOCAL_DB_PATH=$(find .wrangler/state/v3/d1/miniflare-D1DatabaseObject -type f -name '*.sqlite' -print -quit) drizzle-kit studio"
-  },
-  "devDependencies": {
-    "@cloudflare/vitest-pool-workers": "^0.1.0",
-    "@cloudflare/workers-types": "^4.20240405.0",
-    "@types/itty-router-extras": "^0.4.3",
-    "drizzle-kit": "^0.20.17",
-    "typescript": "^5.0.4",
-    "vitest": "1.3.0",
-    "wrangler": "^3.0.0"
-  },
-  "dependencies": {
-    "@paralleldrive/cuid2": "^2.2.2",
-    "better-sqlite3": "^9.5.0",
-    "cross-env": "^7.0.3",
-    "drizzle-orm": "^0.30.8",
-    "itty-router": "^5.0.16",
-    "itty-router-extras": "^0.4.6",
-    "zod": "^3.22.4"
-  }
+	"name": "database",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler deploy",
+		"dev": "wrangler dev",
+		"start": "wrangler dev",
+		"test": "vitest",
+		"generate": "drizzle-kit generate:sqlite --schema=src/schema.ts",
+		"up": "drizzle-kit up:sqlite --schema=src/schema.ts",
+		"db:studio": "cross-env LOCAL_DB_PATH=$(find .wrangler/state/v3/d1/miniflare-D1DatabaseObject -type f -name '*.sqlite' -print -quit) drizzle-kit studio"
+	},
+	"devDependencies": {
+		"@cloudflare/vitest-pool-workers": "^0.1.0",
+		"@cloudflare/workers-types": "^4.20240405.0",
+		"@types/itty-router-extras": "^0.4.3",
+		"drizzle-kit": "^0.20.17",
+		"typescript": "^5.0.4",
+		"vitest": "1.3.0",
+		"wrangler": "^3.86.0"
+	},
+	"dependencies": {
+		"@paralleldrive/cuid2": "^2.2.2",
+		"better-sqlite3": "^9.5.0",
+		"cross-env": "^7.0.3",
+		"drizzle-orm": "^0.30.8",
+		"itty-router": "^5.0.16",
+		"itty-router-extras": "^0.4.6",
+		"zod": "^3.22.4"
+	}
 }

backend/database/src/index.ts

@@ -1,11 +1,11 @@
 // import type { DrizzleD1Database } from "drizzle-orm/d1";
 import { drizzle } from "drizzle-orm/d1"
 import { json } from "itty-router-extras"
-import { ZodError, z } from "zod"
+import { z } from "zod"
 
-import { user, sandbox, usersToSandboxes } from "./schema"
-import * as schema from "./schema"
 import { and, eq, sql } from "drizzle-orm"
+import * as schema from "./schema"
+import { sandbox, user, usersToSandboxes } from "./schema"
 
 export interface Env {
 	DB: D1Database
@@ -169,6 +169,7 @@ export default {
 								name: sb.name,
 								type: sb.type,
 								author: sb.author.name,
+								authorAvatarUrl: sb.author.avatarUrl,
 								sharedOn: r.sharedOn,
 							}
 						})
@@ -282,14 +283,26 @@ export default {
 					id: z.string(),
 					name: z.string(),
 					email: z.string().email(),
+					username: z.string(),
+					avatarUrl: z.string().optional(),
+					createdAt: z.string().optional(),
+					generations: z.number().optional(),
 				})
 
 				const body = await request.json()
-				const { id, name, email } = userSchema.parse(body)
+				const { id, name, email, username, avatarUrl, createdAt, generations } = userSchema.parse(body)
 
 				const res = await db
 					.insert(user)
-					.values({ id, name, email })
+					.values({
+						id,
+						name,
+						email,
+						username,
+						avatarUrl,
+						createdAt: createdAt ? new Date(createdAt) : new Date(),
+						generations,
+					})
 					.returning()
 					.get()
 				return json({ res })
@@ -303,6 +316,20 @@ export default {
 			} else {
 				return methodNotAllowed
 			}
+		} else if (path === "/api/user/check-username") {
+			if (method === "GET") {
+				const params = url.searchParams
+				const username = params.get("username")
+
+				if (!username) return invalidRequest
+
+				const exists = await db.query.user.findFirst({
+					where: (user, { eq }) => eq(user.username, username)
+				})
+
+				return json({ exists: !!exists })
+			}
+			return methodNotAllowed
 		} else return notFound
 	},
 }

backend/database/src/schema.ts

@@ -1,6 +1,7 @@
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { createId } from "@paralleldrive/cuid2";
-import { relations, sql } from "drizzle-orm";
+import { createId } from "@paralleldrive/cuid2"
+import { relations } from "drizzle-orm"
+import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core"
+import { sql } from "drizzle-orm"
 
 export const user = sqliteTable("user", {
 	id: text("id")
@@ -9,16 +10,19 @@ export const user = sqliteTable("user", {
 		.unique(),
 	name: text("name").notNull(),
 	email: text("email").notNull(),
-	image: text("image"),
+	username: text("username").notNull().unique(),
+	avatarUrl: text("avatarUrl"),
+	createdAt: integer("createdAt", { mode: "timestamp_ms" })
+		.default(sql`CURRENT_TIMESTAMP`),
 	generations: integer("generations").default(0),
-});
+})
 
-export type User = typeof user.$inferSelect;
+export type User = typeof user.$inferSelect
 
 export const userRelations = relations(user, ({ many }) => ({
 	sandbox: many(sandbox),
 	usersToSandboxes: many(usersToSandboxes),
-}));
+}))
 
 export const sandbox = sqliteTable("sandbox", {
 	id: text("id")
@@ -28,13 +32,16 @@ export const sandbox = sqliteTable("sandbox", {
 	name: text("name").notNull(),
 	type: text("type").notNull(),
 	visibility: text("visibility", { enum: ["public", "private"] }),
-	createdAt: integer("createdAt", { mode: "timestamp_ms" }),
+	createdAt: integer("createdAt", { mode: "timestamp_ms" })
+		.default(sql`CURRENT_TIMESTAMP`),
 	userId: text("user_id")
 		.notNull()
 		.references(() => user.id),
-});
+	likeCount: integer("likeCount").default(0),
+	viewCount: integer("viewCount").default(0),
+})
 
-export type Sandbox = typeof sandbox.$inferSelect;
+export type Sandbox = typeof sandbox.$inferSelect
 
 export const sandboxRelations = relations(sandbox, ({ one, many }) => ({
 	author: one(user, {
@@ -42,7 +49,7 @@ export const sandboxRelations = relations(sandbox, ({ one, many }) => ({
 		references: [user.id],
 	}),
 	usersToSandboxes: many(usersToSandboxes),
-}));
+}))
 
 export const usersToSandboxes = sqliteTable("users_to_sandboxes", {
 	userId: text("userId")
@@ -52,15 +59,18 @@ export const usersToSandboxes = sqliteTable("users_to_sandboxes", {
 		.notNull()
 		.references(() => sandbox.id),
 	sharedOn: integer("sharedOn", { mode: "timestamp_ms" }),
-});
+})
 
-export const usersToSandboxesRelations = relations(usersToSandboxes, ({ one }) => ({
-	group: one(sandbox, {
-		fields: [usersToSandboxes.sandboxId],
-		references: [sandbox.id],
-	}),
-	user: one(user, {
-		fields: [usersToSandboxes.userId],
-		references: [user.id],
-	}),
-}));
+export const usersToSandboxesRelations = relations(
+	usersToSandboxes,
+	({ one }) => ({
+		group: one(sandbox, {
+			fields: [usersToSandboxes.sandboxId],
+			references: [sandbox.id],
+		}),
+		user: one(user, {
+			fields: [usersToSandboxes.userId],
+			references: [user.id],
+		}),
+	})
+)

backend/database/test/index.spec.ts

@@ -1,25 +1,30 @@
 // test/index.spec.ts
-import { env, createExecutionContext, waitOnExecutionContext, SELF } from "cloudflare:test";
-import { describe, it, expect } from "vitest";
-import worker from "../src/index";
+import {
+	createExecutionContext,
+	env,
+	SELF,
+	waitOnExecutionContext,
+} from "cloudflare:test"
+import { describe, expect, it } from "vitest"
+import worker from "../src/index"
 
 // For now, you'll need to do something like this to get a correctly-typed
 // `Request` to pass to `worker.fetch()`.
-const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;
+const IncomingRequest = Request<unknown, IncomingRequestCfProperties>
 
 describe("Hello World worker", () => {
-  it("responds with Hello World! (unit style)", async () => {
-    const request = new IncomingRequest("http://example.com");
-    // Create an empty context to pass to `worker.fetch()`.
-    const ctx = createExecutionContext();
-    const response = await worker.fetch(request, env, ctx);
-    // Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
-    await waitOnExecutionContext(ctx);
-    expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
-  });
+	it("responds with Hello World! (unit style)", async () => {
+		const request = new IncomingRequest("http://example.com")
+		// Create an empty context to pass to `worker.fetch()`.
+		const ctx = createExecutionContext()
+		const response = await worker.fetch(request, env, ctx)
+		// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+		await waitOnExecutionContext(ctx)
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
+	})
 
-  it("responds with Hello World! (integration style)", async () => {
-    const response = await SELF.fetch("https://example.com");
-    expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
- });
-});
+	it("responds with Hello World! (integration style)", async () => {
+		const response = await SELF.fetch("https://example.com")
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
+	})
+})

backend/database/test/tsconfig.json

@@ -1,11 +1,11 @@
 {
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "types": [
-      "@cloudflare/workers-types/experimental",
-      "@cloudflare/vitest-pool-workers"
-    ]
-  },
-  "include": ["./**/*.ts", "../src/env.d.ts"],
-  "exclude": []
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"types": [
+			"@cloudflare/workers-types/experimental",
+			"@cloudflare/vitest-pool-workers"
+		]
+	},
+	"include": ["./**/*.ts", "../src/env.d.ts"],
+	"exclude": []
 }

backend/database/tsconfig.json

@@ -12,7 +12,9 @@
 
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+		"lib": [
+			"es2021"
+		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
 		"jsx": "react" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */

backend/database/vitest.config.ts

@@ -1,11 +1,11 @@
-import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config"
 
 export default defineWorkersConfig({
-  test: {
-    poolOptions: {
-      workers: {
-        wrangler: { configPath: "./wrangler.toml" },
-      },
-    },
-  },
-});
+	test: {
+		poolOptions: {
+			workers: {
+				wrangler: { configPath: "./wrangler.toml" },
+			},
+		},
+	},
+})

backend/server/.env.example

@@ -7,6 +7,7 @@ PORT=4000
 WORKERS_KEY=
 DATABASE_WORKER_URL=
 STORAGE_WORKER_URL=
+AI_WORKER_URL=
 E2B_API_KEY=
 DOKKU_HOST=
 DOKKU_USERNAME=

backend/server/nodemon.json

@@ -1,5 +1,7 @@
 {
-  "watch": ["src"],
+  "watch": [
+    "src"
+  ],
   "ext": "ts",
   "exec": "concurrently \"npx tsc --watch\" \"ts-node src/index.ts\""
 }

backend/server/package.json

@@ -31,4 +31,4 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"
   }
-}
+}

backend/server/src/AIWorker.ts

@@ -0,0 +1,90 @@
+// AIWorker class for handling AI-related operations
+export class AIWorker {
+  private aiWorkerUrl: string
+  private cfAiKey: string
+  private databaseWorkerUrl: string
+  private workersKey: string
+
+  // Constructor to initialize AIWorker with necessary URLs and keys
+  constructor(
+    aiWorkerUrl: string,
+    cfAiKey: string,
+    databaseWorkerUrl: string,
+    workersKey: string
+  ) {
+    this.aiWorkerUrl = aiWorkerUrl
+    this.cfAiKey = cfAiKey
+    this.databaseWorkerUrl = databaseWorkerUrl
+    this.workersKey = workersKey
+  }
+
+  // Method to generate code based on user input
+  async generateCode(
+    userId: string,
+    fileName: string,
+    code: string,
+    line: number,
+    instructions: string
+  ): Promise<{ response: string; success: boolean }> {
+    try {
+      const fetchPromise = fetch(
+        `${process.env.DATABASE_WORKER_URL}/api/sandbox/generate`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `${process.env.WORKERS_KEY}`,
+          },
+          body: JSON.stringify({
+            userId: userId,
+          }),
+        }
+      )
+
+      // Generate code from cloudflare workers AI
+      const generateCodePromise = fetch(
+        `${process.env.AI_WORKER_URL}/api?fileName=${encodeURIComponent(
+          fileName
+        )}&code=${encodeURIComponent(code)}&line=${encodeURIComponent(
+          line
+        )}&instructions=${encodeURIComponent(instructions)}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `${process.env.CF_AI_KEY}`,
+          },
+        }
+      )
+
+      const [fetchResponse, generateCodeResponse] = await Promise.all([
+        fetchPromise,
+        generateCodePromise,
+      ])
+
+      if (!generateCodeResponse.ok) {
+        throw new Error(`HTTP error! status: ${generateCodeResponse.status}`)
+      }
+
+      const reader = generateCodeResponse.body?.getReader()
+      const decoder = new TextDecoder()
+      let result = ""
+
+      if (reader) {
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+          result += decoder.decode(value, { stream: true })
+        }
+      }
+
+      // The result should now contain only the modified code
+      return { response: result.trim(), success: true }
+    } catch (e: any) {
+      console.error("Error generating code:", e)
+      return {
+        response: "Error generating code. Please try again.",
+        success: false,
+      }
+    }
+  }
+}

backend/server/src/ConnectionManager.ts

@@ -0,0 +1,58 @@
+import { Socket } from "socket.io"
+
+class Counter {
+    private count: number = 0
+
+    increment() {
+        this.count++
+    }
+
+    decrement() {
+        this.count = Math.max(0, this.count - 1)
+    }
+
+    getValue(): number {
+        return this.count
+    }
+}
+
+// Owner Connection Management
+export class ConnectionManager {
+    // Counts how many times the owner is connected to a sandbox
+    private ownerConnections: Record<string, Counter> = {}
+    // Stores all sockets connected to a given sandbox
+    private sockets: Record<string, Set<Socket>> = {}
+
+    // Checks if the owner of a sandbox is connected
+    ownerIsConnected(sandboxId: string): boolean {
+        return this.ownerConnections[sandboxId]?.getValue() > 0
+    }
+
+    // Adds a connection for a sandbox
+    addConnectionForSandbox(socket: Socket, sandboxId: string, isOwner: boolean) {
+        this.sockets[sandboxId] ??= new Set()
+        this.sockets[sandboxId].add(socket)
+
+        // If the connection is for the owner, increments the owner connection counter
+        if (isOwner) {
+            this.ownerConnections[sandboxId] ??= new Counter()
+            this.ownerConnections[sandboxId].increment()
+        }
+    }
+
+    // Removes a connection for a sandbox
+    removeConnectionForSandbox(socket: Socket, sandboxId: string, isOwner: boolean) {
+        this.sockets[sandboxId]?.delete(socket)
+
+        // If the connection being removed is for the owner, decrements the owner connection counter
+        if (isOwner) {
+            this.ownerConnections[sandboxId]?.decrement()
+        }
+    }
+
+    // Returns the set of sockets connected to a given sandbox
+    connectionsForSandbox(sandboxId: string): Set<Socket> {
+        return this.sockets[sandboxId] ?? new Set();
+    }
+
+}

backend/server/src/DokkuClient.ts

@@ -1,37 +1,40 @@
-import { SSHSocketClient, SSHConfig } from "./SSHSocketClient"
+import { SSHConfig, SSHSocketClient } from "./SSHSocketClient"
 
+// Interface for the response structure from Dokku commands
 export interface DokkuResponse {
-  ok: boolean;
-  output: string;
+  ok: boolean
+  output: string
 }
 
+// DokkuClient class extends SSHSocketClient to interact with Dokku via SSH
 export class DokkuClient extends SSHSocketClient {
-
   constructor(config: SSHConfig) {
-    super(
-      config,
-      "/var/run/dokku-daemon/dokku-daemon.sock"
-    )
+    // Initialize with Dokku daemon socket path
+    super(config, "/var/run/dokku-daemon/dokku-daemon.sock")
   }
 
+  // Send a command to Dokku and parse the response
   async sendCommand(command: string): Promise<DokkuResponse> {
     try {
-      const response = await this.sendData(command);
+      const response = await this.sendData(command)
 
       if (typeof response !== "string") {
-        throw new Error("Received data is not a string");
+        throw new Error("Received data is not a string")
       }
 
-      return JSON.parse(response);
+      // Parse the JSON response from Dokku
+      return JSON.parse(response)
     } catch (error: any) {
-      throw new Error(`Failed to send command: ${error.message}`);
+      throw new Error(`Failed to send command: ${error.message}`)
     }
   }
 
+  // List all deployed Dokku apps
   async listApps(): Promise<string[]> {
-    const response = await this.sendCommand("apps:list");
-    return response.output.split("\n").slice(1); // Split by newline and ignore the first line (header)
+    const response = await this.sendCommand("apps:list")
+    // Split the output by newline and remove the header
+    return response.output.split("\n").slice(1)
   }
 }
 
-export { SSHConfig };
+export { SSHConfig }

backend/server/src/FileManager.ts

@@ -0,0 +1,513 @@
+import { FilesystemEvent, Sandbox, WatchHandle } from "e2b"
+import path from "path"
+import RemoteFileStorage from "./RemoteFileStorage"
+import { MAX_BODY_SIZE } from "./ratelimit"
+import { TFile, TFileData, TFolder } from "./types"
+
+// Convert list of paths to the hierchical file structure used by the editor
+function generateFileStructure(paths: string[]): (TFolder | TFile)[] {
+  const root: TFolder = { id: "/", type: "folder", name: "/", children: [] }
+
+  paths.forEach((path) => {
+    const parts = path.split("/")
+    let current: TFolder = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1 && part.length
+      const existing = current.children.find((child) => child.name === part)
+
+      if (existing) {
+        if (!isFile) {
+          current = existing as TFolder
+        }
+      } else {
+        if (isFile) {
+          const file: TFile = { id: `/${parts.join("/")}`, type: "file", name: part }
+          current.children.push(file)
+        } else {
+          const folder: TFolder = {
+            id: `/${parts.slice(0, i + 1).join("/")}`,
+            type: "folder",
+            name: part,
+            children: [],
+          }
+          current.children.push(folder)
+          current = folder
+        }
+      }
+    }
+  })
+
+  return root.children
+}
+
+// FileManager class to handle file operations in a sandbox
+export class FileManager {
+  private sandboxId: string
+  private sandbox: Sandbox
+  public files: (TFolder | TFile)[]
+  public fileData: TFileData[]
+  private fileWatchers: WatchHandle[] = []
+  private dirName = "/home/user/project"
+  private refreshFileList: ((files: (TFolder | TFile)[]) => void) | null
+
+  // Constructor to initialize the FileManager
+  constructor(
+    sandboxId: string,
+    sandbox: Sandbox,
+    refreshFileList: ((files: (TFolder | TFile)[]) => void) | null
+  ) {
+    this.sandboxId = sandboxId
+    this.sandbox = sandbox
+    this.files = []
+    this.fileData = []
+    this.refreshFileList = refreshFileList
+  }
+
+  // Fetch file data from list of paths
+  private async generateFileData(paths: string[]): Promise<TFileData[]> {
+    const fileData: TFileData[] = []
+
+    for (const path of paths) {
+      const parts = path.split("/")
+      const isFile = parts.length > 0 && parts[parts.length - 1].length > 0
+
+      if (isFile) {
+        const fileId = `/${parts.join("/")}`
+        const data = await RemoteFileStorage.fetchFileContent(`projects/${this.sandboxId}${fileId}`)
+        fileData.push({ id: fileId, data })
+      }
+    }
+
+    return fileData
+  }
+
+  // Convert local file path to remote path
+  private getRemoteFileId(localId: string): string {
+    return `projects/${this.sandboxId}${localId}`
+  }
+
+  // Convert remote file path to local file path
+  private getLocalFileId(remoteId: string): string | undefined {
+    const allParts = remoteId.split("/")
+    if (allParts[1] !== this.sandboxId) return undefined;
+    return allParts.slice(2).join("/")
+  }
+
+  // Convert remote file paths to local file paths
+  private getLocalFileIds(remoteIds: string[]): string[] {
+    return remoteIds
+      .map(this.getLocalFileId.bind(this))
+      .filter((id) => id !== undefined);
+  }
+
+  // Download files from remote storage
+  private async updateFileData(): Promise<TFileData[]> {
+    const remotePaths = await RemoteFileStorage.getSandboxPaths(this.sandboxId)
+    const localPaths = this.getLocalFileIds(remotePaths)
+    this.fileData = await this.generateFileData(localPaths)
+    return this.fileData
+  }
+
+  // Update file structure
+  private async updateFileStructure(): Promise<(TFolder | TFile)[]> {
+    const remotePaths = await RemoteFileStorage.getSandboxPaths(this.sandboxId)
+    const localPaths = this.getLocalFileIds(remotePaths)
+    this.files = generateFileStructure(localPaths)
+    return this.files
+  }
+
+  // Initialize the FileManager
+  async initialize() {
+
+    // Download files from remote file storage
+    await this.updateFileStructure()
+    await this.updateFileData()
+
+    // Copy all files from the project to the container
+    const promises = this.fileData.map(async (file) => {
+      try {
+        const filePath = path.posix.join(this.dirName, file.id)
+        const parentDirectory = path.dirname(filePath)
+        if (!this.sandbox.files.exists(parentDirectory)) {
+          await this.sandbox.files.makeDir(parentDirectory)
+        }
+        await this.sandbox.files.write(filePath, file.data)
+      } catch (e: any) {
+        console.log("Failed to create file: " + e)
+      }
+    })
+    await Promise.all(promises)
+
+    // Reload file list from the container to include template files
+    const result = await this.sandbox.commands.run(`find "${this.dirName}" -type f`); // List all files recursively
+    const localPaths = result.stdout.split('\n').filter(path => path); // Split the output into an array and filter out empty strings
+    const relativePaths = localPaths.map(filePath => path.posix.relative(this.dirName, filePath)); // Convert absolute paths to relative paths
+    this.files = generateFileStructure(relativePaths);
+
+    // Make the logged in user the owner of all project files
+    this.fixPermissions()
+
+    await this.watchDirectory(this.dirName)
+    await this.watchSubdirectories(this.dirName)
+  }
+
+  // Check if the given path is a directory
+  private async isDirectory(directoryPath: string): Promise<boolean> {
+    try {
+      const result = await this.sandbox.commands.run(
+        `[ -d "${directoryPath}" ] && echo "true" || echo "false"`
+      )
+      return result.stdout.trim() === "true"
+    } catch (e: any) {
+      console.log("Failed to check if directory: " + e)
+      return false
+    }
+  }
+
+  // Change the owner of the project directory to user
+  private async fixPermissions() {
+    try {
+      await this.sandbox.commands.run(
+        `sudo chown -R user "${this.dirName}"`
+      )
+    } catch (e: any) {
+      console.log("Failed to fix permissions: " + e)
+    }
+  }
+
+  // Watch a directory for changes
+  async watchDirectory(directory: string): Promise<WatchHandle | undefined> {
+    try {
+      const handle = await this.sandbox.files.watch(
+        directory,
+        async (event: FilesystemEvent) => {
+          try {
+            function removeDirName(path: string, dirName: string) {
+              return path.startsWith(dirName)
+                ? path.slice(dirName.length)
+                : path
+            }
+
+            // This is the absolute file path in the container
+            const containerFilePath = path.posix.join(directory, event.name)
+            // This is the file path relative to the project directory
+            const sandboxFilePath = removeDirName(containerFilePath, this.dirName)
+            // This is the directory being watched relative to the project directory
+            const sandboxDirectory = removeDirName(directory, this.dirName)
+
+            // Helper function to find a folder by id
+            function findFolderById(
+              files: (TFolder | TFile)[],
+              folderId: string
+            ) {
+              return files.find(
+                (file: TFolder | TFile) =>
+                  file.type === "folder" && file.id === folderId
+              )
+            }
+
+            // Handle file/directory creation event
+            if (event.type === "create") {
+              const folder = findFolderById(
+                this.files,
+                sandboxDirectory
+              ) as TFolder
+              const isDir = await this.isDirectory(containerFilePath)
+
+              const newItem = isDir
+                ? ({
+                  id: sandboxFilePath,
+                  name: event.name,
+                  type: "folder",
+                  children: [],
+                } as TFolder)
+                : ({
+                  id: sandboxFilePath,
+                  name: event.name,
+                  type: "file",
+                } as TFile)
+
+              if (folder) {
+                // If the folder exists, add the new item (file/folder) as a child
+                folder.children.push(newItem)
+              } else {
+                // If folder doesn't exist, add the new item to the root
+                this.files.push(newItem)
+              }
+
+              if (!isDir) {
+                const fileData = await this.sandbox.files.read(
+                  containerFilePath
+                )
+                const fileContents =
+                  typeof fileData === "string" ? fileData : ""
+                this.fileData.push({
+                  id: sandboxFilePath,
+                  data: fileContents,
+                })
+              }
+
+              console.log(`Create ${sandboxFilePath}`)
+            }
+
+            // Handle file/directory removal or rename event
+            else if (event.type === "remove" || event.type == "rename") {
+              const folder = findFolderById(
+                this.files,
+                sandboxDirectory
+              ) as TFolder
+              const isDir = await this.isDirectory(containerFilePath)
+
+              const isFileMatch = (file: TFolder | TFile | TFileData) =>
+                file.id === sandboxFilePath ||
+                file.id.startsWith(containerFilePath + "/")
+
+              if (folder) {
+                // Remove item from its parent folder
+                folder.children = folder.children.filter(
+                  (file: TFolder | TFile) => !isFileMatch(file)
+                )
+              } else {
+                // Remove from the root if it's not inside a folder
+                this.files = this.files.filter(
+                  (file: TFolder | TFile) => !isFileMatch(file)
+                )
+              }
+
+              // Also remove any corresponding file data
+              this.fileData = this.fileData.filter(
+                (file: TFileData) => !isFileMatch(file)
+              )
+
+              console.log(`Removed: ${sandboxFilePath}`)
+            }
+
+            // Handle file write event
+            else if (event.type === "write") {
+              const folder = findFolderById(
+                this.files,
+                sandboxDirectory
+              ) as TFolder
+              const fileToWrite = this.fileData.find(
+                (file) => file.id === sandboxFilePath
+              )
+
+              if (fileToWrite) {
+                fileToWrite.data = await this.sandbox.files.read(
+                  containerFilePath
+                )
+                console.log(`Write to ${sandboxFilePath}`)
+              } else {
+                // If the file is part of a folder structure, locate it and update its data
+                const fileInFolder = folder?.children.find(
+                  (file) => file.id === sandboxFilePath
+                )
+                if (fileInFolder) {
+                  const fileData = await this.sandbox.files.read(
+                    containerFilePath
+                  )
+                  const fileContents =
+                    typeof fileData === "string" ? fileData : ""
+                  this.fileData.push({
+                    id: sandboxFilePath,
+                    data: fileContents,
+                  })
+                  console.log(`Write to ${sandboxFilePath}`)
+                }
+              }
+            }
+
+            // Tell the client to reload the file list
+            if (event.type !== "chmod") {
+              this.refreshFileList?.(this.files)
+            }
+          } catch (error) {
+            console.error(
+              `Error handling ${event.type} event for ${event.name}:`,
+              error
+            )
+          }
+        },
+        { timeout: 0 }
+      )
+      this.fileWatchers.push(handle)
+      return handle
+    } catch (error) {
+      console.error(`Error watching filesystem:`, error)
+    }
+  }
+
+  // Watch subdirectories recursively
+  async watchSubdirectories(directory: string) {
+    const dirContent = await this.sandbox.files.list(directory)
+    await Promise.all(
+      dirContent.map(async (item) => {
+        if (item.type === "dir") {
+          console.log("Watching " + item.path)
+          await this.watchDirectory(item.path)
+        }
+      })
+    )
+  }
+
+  // Get file content
+  async getFile(fileId: string): Promise<string | undefined> {
+    const filePath = path.posix.join(this.dirName, fileId)
+    const fileContent = await this.sandbox.files.read(filePath)
+    return fileContent
+  }
+
+  // Get folder content
+  async getFolder(folderId: string): Promise<string[]> {
+    const remotePaths = await RemoteFileStorage.getFolder(this.getRemoteFileId(folderId))
+    return this.getLocalFileIds(remotePaths)
+  }
+
+  // Save file content
+  async saveFile(fileId: string, body: string): Promise<void> {
+    if (!fileId) return // handles saving when no file is open
+
+    if (Buffer.byteLength(body, "utf-8") > MAX_BODY_SIZE) {
+      throw new Error("File size too large. Please reduce the file size.")
+    }
+    await RemoteFileStorage.saveFile(this.getRemoteFileId(fileId), body)
+    const file = this.fileData.find((f) => f.id === fileId)
+    if (!file) return
+    file.data = body
+
+    await this.sandbox.files.write(path.posix.join(this.dirName, file.id), body)
+    this.fixPermissions()
+  }
+
+  // Move a file to a different folder
+  async moveFile(
+    fileId: string,
+    folderId: string
+  ): Promise<(TFolder | TFile)[]> {
+    const fileData = this.fileData.find((f) => f.id === fileId)
+    const file = this.files.find((f) => f.id === fileId)
+    if (!fileData || !file) return this.files
+
+    const parts = fileId.split("/")
+    const newFileId = folderId + "/" + parts.pop()
+
+    await this.moveFileInContainer(fileId, newFileId)
+
+    await this.fixPermissions()
+
+    fileData.id = newFileId
+    file.id = newFileId
+
+    await RemoteFileStorage.renameFile(this.getRemoteFileId(fileId), this.getRemoteFileId(newFileId), fileData.data)
+    return this.updateFileStructure()
+  }
+
+  // Move a file within the container
+  private async moveFileInContainer(oldPath: string, newPath: string) {
+    try {
+      const fileContents = await this.sandbox.files.read(
+        path.posix.join(this.dirName, oldPath)
+      )
+      await this.sandbox.files.write(
+        path.posix.join(this.dirName, newPath),
+        fileContents
+      )
+      await this.sandbox.files.remove(path.posix.join(this.dirName, oldPath))
+    } catch (e) {
+      console.error(`Error moving file from ${oldPath} to ${newPath}:`, e)
+    }
+  }
+
+  // Create a new file
+  async createFile(name: string): Promise<boolean> {
+    const size: number = await RemoteFileStorage.getProjectSize(this.sandboxId)
+    if (size > 200 * 1024 * 1024) {
+      throw new Error("Project size exceeded. Please delete some files.")
+    }
+
+    const id = `/${name}`
+
+    await this.sandbox.files.write(path.posix.join(this.dirName, id), "")
+    await this.fixPermissions()
+
+    this.files.push({
+      id,
+      name,
+      type: "file",
+    })
+
+    this.fileData.push({
+      id,
+      data: "",
+    })
+
+    await RemoteFileStorage.createFile(this.getRemoteFileId(id))
+
+    return true
+  }
+
+  // Create a new folder
+  async createFolder(name: string): Promise<void> {
+    const id = `/${name}`
+    await this.sandbox.files.makeDir(path.posix.join(this.dirName, id))
+  }
+
+  // Rename a file
+  async renameFile(fileId: string, newName: string): Promise<void> {
+    const fileData = this.fileData.find((f) => f.id === fileId)
+    const file = this.files.find((f) => f.id === fileId)
+    if (!fileData || !file) return
+
+    const parts = fileId.split("/")
+    const newFileId = parts.slice(0, parts.length - 1).join("/") + "/" + newName
+
+    await this.moveFileInContainer(fileId, newFileId)
+    await this.fixPermissions()
+    await RemoteFileStorage.renameFile(this.getRemoteFileId(fileId), this.getRemoteFileId(newFileId), fileData.data)
+
+    fileData.id = newFileId
+    file.id = newFileId
+  }
+
+  // Delete a file
+  async deleteFile(fileId: string): Promise<(TFolder | TFile)[]> {
+    const file = this.fileData.find((f) => f.id === fileId)
+    if (!file) return this.files
+
+    await this.sandbox.files.remove(path.posix.join(this.dirName, fileId))
+    this.fileData = this.fileData.filter(
+      (f) => f.id !== fileId
+    )
+
+    await RemoteFileStorage.deleteFile(this.getRemoteFileId(fileId))
+    return this.updateFileStructure()
+  }
+
+  // Delete a folder
+  async deleteFolder(folderId: string): Promise<(TFolder | TFile)[]> {
+    const files = await RemoteFileStorage.getFolder(this.getRemoteFileId(folderId))
+
+    await Promise.all(
+      files.map(async (file) => {
+        await this.sandbox.files.remove(path.posix.join(this.dirName, file))
+        this.fileData = this.fileData.filter(
+          (f) => f.id !== file
+        )
+        await RemoteFileStorage.deleteFile(this.getRemoteFileId(file))
+      })
+    )
+
+    return this.updateFileStructure()
+  }
+
+  // Close all file watchers
+  async closeWatchers() {
+    await Promise.all(
+      this.fileWatchers.map(async (handle: WatchHandle) => {
+        await handle.close()
+      })
+    )
+  }
+}

backend/server/src/RemoteFileStorage.ts

@@ -0,0 +1,117 @@
+import * as dotenv from "dotenv"
+import { R2Files } from "./types"
+
+dotenv.config()
+
+export const RemoteFileStorage = {
+  getSandboxPaths: async (id: string) => {
+    const res = await fetch(
+      `${process.env.STORAGE_WORKER_URL}/api?sandboxId=${id}`,
+      {
+        headers: {
+          Authorization: `${process.env.WORKERS_KEY}`,
+        },
+      }
+    )
+    const data: R2Files = await res.json()
+
+    return data.objects.map((obj) => obj.key)
+  },
+
+  getFolder: async (folderId: string) => {
+    const res = await fetch(
+      `${process.env.STORAGE_WORKER_URL}/api?folderId=${folderId}`,
+      {
+        headers: {
+          Authorization: `${process.env.WORKERS_KEY}`,
+        },
+      }
+    )
+    const data: R2Files = await res.json()
+
+    return data.objects.map((obj) => obj.key)
+  },
+
+  fetchFileContent: async (fileId: string): Promise<string> => {
+    try {
+      const fileRes = await fetch(
+        `${process.env.STORAGE_WORKER_URL}/api?fileId=${fileId}`,
+        {
+          headers: {
+            Authorization: `${process.env.WORKERS_KEY}`,
+          },
+        }
+      )
+      return await fileRes.text()
+    } catch (error) {
+      console.error("ERROR fetching file:", error)
+      return ""
+    }
+  },
+
+  createFile: async (fileId: string) => {
+    const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+      body: JSON.stringify({ fileId }),
+    })
+    return res.ok
+  },
+
+  renameFile: async (
+    fileId: string,
+    newFileId: string,
+    data: string
+  ) => {
+    const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/rename`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+      body: JSON.stringify({ fileId, newFileId, data }),
+    })
+    return res.ok
+  },
+
+  saveFile: async (fileId: string, data: string) => {
+    const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/save`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+      body: JSON.stringify({ fileId, data }),
+    })
+    return res.ok
+  },
+
+  deleteFile: async (fileId: string) => {
+    const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `${process.env.WORKERS_KEY}`,
+      },
+      body: JSON.stringify({ fileId }),
+    })
+    return res.ok
+  },
+
+  getProjectSize: async (id: string) => {
+    const res = await fetch(
+      `${process.env.STORAGE_WORKER_URL}/api/size?sandboxId=${id}`,
+      {
+        headers: {
+          Authorization: `${process.env.WORKERS_KEY}`,
+        },
+      }
+    )
+    return (await res.json()).size
+  }
+}
+
+export default RemoteFileStorage

backend/server/src/SSHSocketClient.ts

@@ -1,90 +1,98 @@
-import { Client } from "ssh2";
+import { Client } from "ssh2"
 
+// Interface defining the configuration for SSH connection
 export interface SSHConfig {
-  host: string;
-  port?: number;
-  username: string;
-  privateKey: Buffer;
+  host: string
+  port?: number
+  username: string
+  privateKey: Buffer
 }
 
+// Class to handle SSH connections and communicate with a Unix socket
 export class SSHSocketClient {
-    private conn: Client;
-    private config: SSHConfig;
-    private socketPath: string;
-    private isConnected: boolean = false;
-  
-    constructor(config: SSHConfig, socketPath: string) {
-      this.conn = new Client();
-      this.config = { ...config, port: 22};
-      this.socketPath = socketPath;
-  
-      this.setupTerminationHandlers();
-    }
-  
-    private setupTerminationHandlers() {
-      process.on("SIGINT", this.closeConnection.bind(this));
-      process.on("SIGTERM", this.closeConnection.bind(this));
-    }
-  
-    private closeConnection() {
-      console.log("Closing SSH connection...");
-      this.conn.end();
-      this.isConnected = false;
-      process.exit(0);
-    }
-  
-    connect(): Promise<void> {
-      return new Promise((resolve, reject) => {
-        this.conn
-          .on("ready", () => {
-            console.log("SSH connection established");
-            this.isConnected = true;
-            resolve();
-          })
-          .on("error", (err) => {
-            console.error("SSH connection error:", err);
-            this.isConnected = false;
-            reject(err);
-          })
-          .on("close", () => {
-            console.log("SSH connection closed");
-            this.isConnected = false;
-          })
-          .connect(this.config);
-      });
-    }
-  
-    sendData(data: string): Promise<string> {
-      return new Promise((resolve, reject) => {
-        if (!this.isConnected) {
-          reject(new Error("SSH connection is not established"));
-          return;
-        }
-  
-        this.conn.exec(
-          `echo "${data}" | nc -U ${this.socketPath}`,
-          (err, stream) => {
-            if (err) {
-              reject(err);
-              return;
-            }
-  
-            stream
-              .on("close", (code: number, signal: string) => {
-                reject(
-                  new Error(
-                    `Stream closed with code ${code} and signal ${signal}`
-                  )
-                );
-              })
-              .on("data", (data: Buffer) => {
-                resolve(data.toString());
-              })
-              .stderr.on("data", (data: Buffer) => {
-                reject(new Error(data.toString()));
-              });
+  private conn: Client
+  private config: SSHConfig
+  private socketPath: string
+  private isConnected: boolean = false
+
+  // Constructor initializes the SSH client and sets up configuration
+  constructor(config: SSHConfig, socketPath: string) {
+    this.conn = new Client()
+    this.config = { ...config, port: 22 } // Default port to 22 if not provided
+    this.socketPath = socketPath
+
+    this.setupTerminationHandlers()
+  }
+
+  // Set up handlers for graceful termination
+  private setupTerminationHandlers() {
+    process.on("SIGINT", this.closeConnection.bind(this))
+    process.on("SIGTERM", this.closeConnection.bind(this))
+  }
+
+  // Method to close the SSH connection
+  private closeConnection() {
+    console.log("Closing SSH connection...")
+    this.conn.end()
+    this.isConnected = false
+    process.exit(0)
+  }
+
+  // Method to establish the SSH connection
+  connect(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.conn
+        .on("ready", () => {
+          console.log("SSH connection established")
+          this.isConnected = true
+          resolve()
+        })
+        .on("error", (err) => {
+          console.error("SSH connection error:", err)
+          this.isConnected = false
+          reject(err)
+        })
+        .on("close", () => {
+          console.log("SSH connection closed")
+          this.isConnected = false
+        })
+        .connect(this.config)
+    })
+  }
+
+  // Method to send data through the SSH connection to the Unix socket
+  sendData(data: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      if (!this.isConnected) {
+        reject(new Error("SSH connection is not established"))
+        return
+      }
+
+      // Use netcat to send data to the Unix socket
+      this.conn.exec(
+        `echo "${data}" | nc -U ${this.socketPath}`,
+        (err, stream) => {
+          if (err) {
+            reject(err)
+            return
           }
-        );
-      });
-    }
-  }
+
+          stream
+            .on("close", (code: number, signal: string) => {
+              reject(
+                new Error(
+                  `Stream closed with code ${code} and signal ${signal}`
+                )
+              )
+            })
+            .on("data", (data: Buffer) => {
+              resolve(data.toString())
+            })
+            .stderr.on("data", (data: Buffer) => {
+              reject(new Error(data.toString()))
+            })
+        }
+      )
+    })
+  }
+}

backend/server/src/Sandbox.ts

@@ -0,0 +1,262 @@
+import { Sandbox as E2BSandbox } from "e2b"
+import { Socket } from "socket.io"
+import { AIWorker } from "./AIWorker"
+import { CONTAINER_TIMEOUT } from "./constants"
+import { DokkuClient } from "./DokkuClient"
+import { FileManager } from "./FileManager"
+import {
+    createFileRL,
+    createFolderRL,
+    deleteFileRL,
+    renameFileRL,
+    saveFileRL,
+} from "./ratelimit"
+import { SecureGitClient } from "./SecureGitClient"
+import { TerminalManager } from "./TerminalManager"
+import { TFile, TFileData, TFolder } from "./types"
+import { LockManager } from "./utils"
+const lockManager = new LockManager()
+
+// Define a type for SocketHandler functions
+type SocketHandler<T = Record<string, any>> = (args: T) => any;
+
+// Extract port number from a string
+function extractPortNumber(inputString: string): number | null {
+    const cleanedString = inputString.replace(/\x1B\[[0-9;]*m/g, "")
+    const regex = /http:\/\/localhost:(\d+)/
+    const match = cleanedString.match(regex)
+    return match ? parseInt(match[1]) : null
+}
+
+type ServerContext = {
+    aiWorker: AIWorker;
+    dokkuClient: DokkuClient | null;
+    gitClient: SecureGitClient | null;
+};
+
+export class Sandbox {
+    // Sandbox properties:
+    sandboxId: string;
+    type: string;
+    fileManager: FileManager | null;
+    terminalManager: TerminalManager | null;
+    container: E2BSandbox | null;
+    // Server context:
+    dokkuClient: DokkuClient | null;
+    gitClient: SecureGitClient | null;
+    aiWorker: AIWorker;
+
+    constructor(sandboxId: string, type: string, { aiWorker, dokkuClient, gitClient }: ServerContext) {
+        // Sandbox properties:
+        this.sandboxId = sandboxId;
+        this.type = type;
+        this.fileManager = null;
+        this.terminalManager = null;
+        this.container = null;
+        // Server context:
+        this.aiWorker = aiWorker;
+        this.dokkuClient = dokkuClient;
+        this.gitClient = gitClient;
+    }
+
+    // Initializes the container for the sandbox environment
+    async initialize(
+        fileWatchCallback: ((files: (TFolder | TFile)[]) => void) | undefined
+    ) {
+        // Acquire a lock to ensure exclusive access to the sandbox environment
+        await lockManager.acquireLock(this.sandboxId, async () => {
+            // Check if a container already exists and is running
+            if (this.container && await this.container.isRunning()) {
+                console.log(`Found existing container ${this.sandboxId}`)
+            } else {
+                console.log("Creating container", this.sandboxId)
+                // Create a new container with a specified template and timeout
+                const templateTypes = ["vanillajs", "reactjs", "nextjs", "streamlit"];
+                const template = templateTypes.includes(this.type)
+                    ? `gitwit-${this.type}`
+                    : `base`;
+                this.container = await E2BSandbox.create(template, {
+                    timeoutMs: CONTAINER_TIMEOUT,
+                })
+            }
+        })
+        // Ensure a container was successfully created
+        if (!this.container) throw new Error("Failed to create container")
+
+        // Initialize the terminal manager if it hasn't been set up yet
+        if (!this.terminalManager) {
+            this.terminalManager = new TerminalManager(this.container)
+            console.log(`Terminal manager set up for ${this.sandboxId}`)
+        }
+
+        // Initialize the file manager if it hasn't been set up yet
+        if (!this.fileManager) {
+            this.fileManager = new FileManager(
+                this.sandboxId,
+                this.container,
+                fileWatchCallback ?? null
+            )
+            // Initialize the file manager and emit the initial files
+            await this.fileManager.initialize()
+        }
+    }
+
+    // Called when the client disconnects from the Sandbox
+    async disconnect() {
+        // Close all terminals managed by the terminal manager
+        await this.terminalManager?.closeAllTerminals()
+        // This way the terminal manager will be set up again if we reconnect
+        this.terminalManager = null;
+        // Close all file watchers managed by the file manager
+        await this.fileManager?.closeWatchers()
+        // This way the file manager will be set up again if we reconnect
+        this.fileManager = null;
+    }
+
+    handlers(connection: { userId: string, isOwner: boolean, socket: Socket }) {
+
+        // Handle heartbeat from a socket connection
+        const handleHeartbeat: SocketHandler = (_: any) => {
+            // Only keep the sandbox alive if the owner is still connected
+            if (connection.isOwner) {
+                this.container?.setTimeout(CONTAINER_TIMEOUT)
+            }
+        }
+
+        // Handle getting a file
+        const handleGetFile: SocketHandler = ({ fileId }: any) => {
+            return this.fileManager?.getFile(fileId)
+        }
+
+        // Handle getting a folder
+        const handleGetFolder: SocketHandler = ({ folderId }: any) => {
+            return this.fileManager?.getFolder(folderId)
+        }
+
+        // Handle saving a file
+        const handleSaveFile: SocketHandler = async ({ fileId, body }: any) => {
+            await saveFileRL.consume(connection.userId, 1);
+            return this.fileManager?.saveFile(fileId, body)
+        }
+
+        // Handle moving a file
+        const handleMoveFile: SocketHandler = ({ fileId, folderId }: any) => {
+            return this.fileManager?.moveFile(fileId, folderId)
+        }
+
+        // Handle listing apps
+        const handleListApps: SocketHandler = async (_: any) => {
+            if (!this.dokkuClient) throw Error("Failed to retrieve apps list: No Dokku client")
+            return { success: true, apps: await this.dokkuClient.listApps() }
+        }
+
+        // Handle deploying code
+        const handleDeploy: SocketHandler = async (_: any) => {
+            if (!this.gitClient) throw Error("No git client")
+            if (!this.fileManager) throw Error("No file manager")
+            await this.gitClient.pushFiles(this.fileManager?.fileData, this.sandboxId)
+            return { success: true }
+        }
+
+        // Handle creating a file
+        const handleCreateFile: SocketHandler = async ({ name }: any) => {
+            await createFileRL.consume(connection.userId, 1);
+            return { "success": await this.fileManager?.createFile(name) }
+        }
+
+        // Handle creating a folder
+        const handleCreateFolder: SocketHandler = async ({ name }: any) => {
+            await createFolderRL.consume(connection.userId, 1);
+            return { "success": await this.fileManager?.createFolder(name) }
+        }
+
+        // Handle renaming a file
+        const handleRenameFile: SocketHandler = async ({ fileId, newName }: any) => {
+            await renameFileRL.consume(connection.userId, 1)
+            return this.fileManager?.renameFile(fileId, newName)
+        }
+
+        // Handle deleting a file
+        const handleDeleteFile: SocketHandler = async ({ fileId }: any) => {
+            await deleteFileRL.consume(connection.userId, 1)
+            return this.fileManager?.deleteFile(fileId)
+        }
+
+        // Handle deleting a folder
+        const handleDeleteFolder: SocketHandler = ({ folderId }: any) => {
+            return this.fileManager?.deleteFolder(folderId)
+        }
+
+        // Handle creating a terminal session
+        const handleCreateTerminal: SocketHandler = async ({ id }: any) => {
+            await lockManager.acquireLock(this.sandboxId, async () => {
+                await this.terminalManager?.createTerminal(id, (responseString: string) => {
+                    connection.socket.emit("terminalResponse", { id, data: responseString })
+                    const port = extractPortNumber(responseString)
+                    if (port) {
+                        connection.socket.emit(
+                            "previewURL",
+                            "https://" + this.container?.getHost(port)
+                        )
+                    }
+                })
+            })
+        }
+
+        // Handle resizing a terminal
+        const handleResizeTerminal: SocketHandler = ({ dimensions }: any) => {
+            this.terminalManager?.resizeTerminal(dimensions)
+        }
+
+        // Handle sending data to a terminal
+        const handleTerminalData: SocketHandler = ({ id, data }: any) => {
+            return this.terminalManager?.sendTerminalData(id, data)
+        }
+
+        // Handle closing a terminal
+        const handleCloseTerminal: SocketHandler = ({ id }: any) => {
+            return this.terminalManager?.closeTerminal(id)
+        }
+
+        // Handle generating code
+        const handleGenerateCode: SocketHandler = ({ fileName, code, line, instructions }: any) => {
+            return this.aiWorker.generateCode(connection.userId, fileName, code, line, instructions)
+        }
+
+        // Handle downloading files by download button
+        const handleDownloadFiles: SocketHandler = async () => {
+            if (!this.fileManager) throw Error("No file manager")
+
+            // Get all files with their data through fileManager
+            const files = this.fileManager.fileData.map((file: TFileData) => ({
+                path: file.id.startsWith('/') ? file.id.slice(1) : file.id,
+                content: file.data
+            }))
+
+            return { files }
+        }
+
+        return {
+            "heartbeat": handleHeartbeat,
+            "getFile": handleGetFile,
+            "downloadFiles": handleDownloadFiles,
+            "getFolder": handleGetFolder,
+            "saveFile": handleSaveFile,
+            "moveFile": handleMoveFile,
+            "list": handleListApps,
+            "deploy": handleDeploy,
+            "createFile": handleCreateFile,
+            "createFolder": handleCreateFolder,
+            "renameFile": handleRenameFile,
+            "deleteFile": handleDeleteFile,
+            "deleteFolder": handleDeleteFolder,
+            "createTerminal": handleCreateTerminal,
+            "resizeTerminal": handleResizeTerminal,
+            "terminalData": handleTerminalData,
+            "closeTerminal": handleCloseTerminal,
+            "generateCode": handleGenerateCode,
+        };
+
+    }
+
+}

backend/server/src/SecureGitClient.ts

@@ -1,82 +1,84 @@
-import simpleGit, { SimpleGit } from "simple-git";
-import path from "path";
-import fs from "fs";
-import os from "os";
+import fs from "fs"
+import os from "os"
+import path from "path"
+import simpleGit, { SimpleGit } from "simple-git"
 
 export type FileData = {
-  id: string;
-  data: string;
-};
+  id: string
+  data: string
+}
 
 export class SecureGitClient {
-  private gitUrl: string;
-  private sshKeyPath: string;
+  private gitUrl: string
+  private sshKeyPath: string
 
   constructor(gitUrl: string, sshKeyPath: string) {
-    this.gitUrl = gitUrl;
-    this.sshKeyPath = sshKeyPath;
+    this.gitUrl = gitUrl
+    this.sshKeyPath = sshKeyPath
   }
 
   async pushFiles(fileData: FileData[], repository: string): Promise<void> {
-    let tempDir: string | undefined;
+    let tempDir: string | undefined
 
     try {
       // Create a temporary directory
-      tempDir = fs.mkdtempSync(path.posix.join(os.tmpdir(), 'git-push-'));
-      console.log(`Temporary directory created: ${tempDir}`);
+      tempDir = fs.mkdtempSync(path.posix.join(os.tmpdir(), "git-push-"))
+      console.log(`Temporary directory created: ${tempDir}`)
 
       // Write files to the temporary directory
-      console.log(`Writing ${fileData.length} files.`);
+      console.log(`Writing ${fileData.length} files.`)
       for (const { id, data } of fileData) {
-        const filePath = path.posix.join(tempDir, id);
-        const dirPath = path.dirname(filePath);
-      
+        const filePath = path.posix.join(tempDir, id)
+        const dirPath = path.dirname(filePath)
+
         if (!fs.existsSync(dirPath)) {
-          fs.mkdirSync(dirPath, { recursive: true });
+          fs.mkdirSync(dirPath, { recursive: true })
         }
-        fs.writeFileSync(filePath, data);
+        fs.writeFileSync(filePath, data)
       }
 
       // Initialize the simple-git instance with the temporary directory and custom SSH command
       const git: SimpleGit = simpleGit(tempDir, {
         config: [
-          'core.sshCommand=ssh -i ' + this.sshKeyPath + ' -o IdentitiesOnly=yes'
-        ]
+          "core.sshCommand=ssh -i " +
+            this.sshKeyPath +
+            " -o IdentitiesOnly=yes",
+        ],
       }).outputHandler((_command, stdout, stderr) => {
-        stdout.pipe(process.stdout);
-        stderr.pipe(process.stderr);
-     });;
+        stdout.pipe(process.stdout)
+        stderr.pipe(process.stderr)
+      })
 
       // Initialize a new Git repository
-      await git.init();
+      await git.init()
 
       // Add remote repository
-      await git.addRemote("origin", `${this.gitUrl}:${repository}`);
+      await git.addRemote("origin", `${this.gitUrl}:${repository}`)
 
       // Add files to the repository
-      for (const {id, data} of fileData) {
-        await git.add(id);
+      for (const { id, data } of fileData) {
+        await git.add(id)
       }
 
       // Commit the changes
-      await git.commit("Add files.");
+      await git.commit("Add files.")
 
       // Push the changes to the remote repository
-      await git.push("origin", "master", {'--force': null});
+      await git.push("origin", "master", { "--force": null })
 
-      console.log("Files successfully pushed to the repository");
+      console.log("Files successfully pushed to the repository")
 
       if (tempDir) {
-        fs.rmSync(tempDir, { recursive: true, force: true });
-        console.log(`Temporary directory removed: ${tempDir}`);
+        fs.rmSync(tempDir, { recursive: true, force: true })
+        console.log(`Temporary directory removed: ${tempDir}`)
       }
     } catch (error) {
       if (tempDir) {
-        fs.rmSync(tempDir, { recursive: true, force: true });
-        console.log(`Temporary directory removed: ${tempDir}`);
+        fs.rmSync(tempDir, { recursive: true, force: true })
+        console.log(`Temporary directory removed: ${tempDir}`)
       }
-      console.error("Error pushing files to the repository:", error);
-      throw error;
+      console.error("Error pushing files to the repository:", error)
+      throw error
     }
   }
-}
+}

backend/server/src/Terminal.ts

@@ -1,13 +1,13 @@
-import { Sandbox, ProcessHandle } from "e2b";
+import { ProcessHandle, Sandbox } from "e2b"
 
 // Terminal class to manage a pseudo-terminal (PTY) in a sandbox environment
 export class Terminal {
-  private pty: ProcessHandle | undefined; // Holds the PTY process handle
-  private sandbox: Sandbox; // Reference to the sandbox environment
+  private pty: ProcessHandle | undefined // Holds the PTY process handle
+  private sandbox: Sandbox // Reference to the sandbox environment
 
   // Constructor initializes the Terminal with a sandbox
   constructor(sandbox: Sandbox) {
-    this.sandbox = sandbox;
+    this.sandbox = sandbox
   }
 
   // Initialize the terminal with specified rows, columns, and data handler
@@ -16,9 +16,9 @@ export class Terminal {
     cols = 80,
     onData,
   }: {
-    rows?: number;
-    cols?: number;
-    onData: (responseData: string) => void;
+    rows?: number
+    cols?: number
+    onData: (responseData: string) => void
   }): Promise<void> {
     // Create a new PTY process
     this.pty = await this.sandbox.pty.create({
@@ -26,35 +26,38 @@ export class Terminal {
       cols,
       timeout: 0,
       onData: (data: Uint8Array) => {
-        onData(new TextDecoder().decode(data)); // Convert received data to string and pass to handler
+        onData(new TextDecoder().decode(data)) // Convert received data to string and pass to handler
       },
-    });
+    })
   }
 
   // Send data to the terminal
   async sendData(data: string) {
     if (this.pty) {
-      await this.sandbox.pty.sendInput(this.pty.pid, new TextEncoder().encode(data));
+      await this.sandbox.pty.sendInput(
+        this.pty.pid,
+        new TextEncoder().encode(data)
+      )
     } else {
-      console.log("Cannot send data because pty is not initialized.");
+      console.log("Cannot send data because pty is not initialized.")
     }
   }
 
   // Resize the terminal
   async resize(size: { cols: number; rows: number }): Promise<void> {
     if (this.pty) {
-      await this.sandbox.pty.resize(this.pty.pid, size);
+      await this.sandbox.pty.resize(this.pty.pid, size)
     } else {
-      console.log("Cannot resize terminal because pty is not initialized.");
+      console.log("Cannot resize terminal because pty is not initialized.")
     }
   }
 
   // Close the terminal, killing the PTY process and stopping the input stream
   async close(): Promise<void> {
     if (this.pty) {
-      await this.pty.kill();
+      await this.pty.kill()
     } else {
-      console.log("Cannot kill pty because it is not initialized.");
+      console.log("Cannot kill pty because it is not initialized.")
     }
   }
 }
@@ -64,4 +67,4 @@ export class Terminal {
 // await terminal.init();
 // terminal.sendData('ls -la');
 // await terminal.resize({ cols: 100, rows: 30 });
-// await terminal.close();
+// await terminal.close();

backend/server/src/TerminalManager.ts

@@ -0,0 +1,74 @@
+import { Sandbox } from "e2b"
+import { Terminal } from "./Terminal"
+
+export class TerminalManager {
+  private sandbox: Sandbox
+  private terminals: Record<string, Terminal> = {}
+
+  constructor(sandbox: Sandbox) {
+    this.sandbox = sandbox
+  }
+
+  async createTerminal(
+    id: string,
+    onData: (responseString: string) => void
+  ): Promise<void> {
+    if (this.terminals[id]) {
+      return
+    }
+
+    this.terminals[id] = new Terminal(this.sandbox)
+    await this.terminals[id].init({
+      onData,
+      cols: 80,
+      rows: 20,
+    })
+
+    const defaultDirectory = "/home/user/project"
+    const defaultCommands = [
+      `cd "${defaultDirectory}"`,
+      "export PS1='user> '",
+      "clear",
+    ]
+    for (const command of defaultCommands) {
+      await this.terminals[id].sendData(command + "\r")
+    }
+
+    console.log("Created terminal", id)
+  }
+
+  async resizeTerminal(dimensions: {
+    cols: number
+    rows: number
+  }): Promise<void> {
+    Object.values(this.terminals).forEach((t) => {
+      t.resize(dimensions)
+    })
+  }
+
+  async sendTerminalData(id: string, data: string): Promise<void> {
+    if (!this.terminals[id]) {
+      return
+    }
+
+    await this.terminals[id].sendData(data)
+  }
+
+  async closeTerminal(id: string): Promise<void> {
+    if (!this.terminals[id]) {
+      return
+    }
+
+    await this.terminals[id].close()
+    delete this.terminals[id]
+  }
+
+  async closeAllTerminals(): Promise<void> {
+    await Promise.all(
+      Object.entries(this.terminals).map(async ([key, terminal]) => {
+        await terminal.close()
+        delete this.terminals[key]
+      })
+    )
+  }
+}

backend/server/src/constants.ts

@@ -0,0 +1,2 @@
+// The amount of time in ms that a container will stay alive without a hearbeat.
+export const CONTAINER_TIMEOUT = 120_000

backend/server/src/fileoperations.ts

@@ -1,177 +0,0 @@
-import * as dotenv from "dotenv";
-import {
-  R2FileBody,
-  R2Files,
-  Sandbox,
-  TFile,
-  TFileData,
-  TFolder,
-} from "./types";
-
-dotenv.config();
-
-export const getSandboxFiles = async (id: string) => {
-  const res = await fetch(
-    `${process.env.STORAGE_WORKER_URL}/api?sandboxId=${id}`,
-    {
-      headers: {
-        Authorization: `${process.env.WORKERS_KEY}`,
-      },
-    }
-  );
-  const data: R2Files = await res.json();
-
-  const paths = data.objects.map((obj) => obj.key);
-  const processedFiles = await processFiles(paths, id);
-  return processedFiles;
-};
-
-export const getFolder = async (folderId: string) => {
-  const res = await fetch(
-    `${process.env.STORAGE_WORKER_URL}/api?folderId=${folderId}`,
-    {
-      headers: {
-        Authorization: `${process.env.WORKERS_KEY}`,
-      },
-    }
-  );
-  const data: R2Files = await res.json();
-
-  return data.objects.map((obj) => obj.key);
-};
-
-const processFiles = async (paths: string[], id: string) => {
-  const root: TFolder = { id: "/", type: "folder", name: "/", children: [] };
-  const fileData: TFileData[] = [];
-
-  paths.forEach((path) => {
-    const allParts = path.split("/");
-    if (allParts[1] !== id) {
-      return;
-    }
-
-    const parts = allParts.slice(2);
-    let current: TFolder = root;
-
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i];
-      const isFile = i === parts.length - 1 && part.length;
-      const existing = current.children.find((child) => child.name === part);
-
-      if (existing) {
-        if (!isFile) {
-          current = existing as TFolder;
-        }
-      } else {
-        if (isFile) {
-          const file: TFile = { id: path, type: "file", name: part };
-          current.children.push(file);
-          fileData.push({ id: path, data: "" });
-        } else {
-          const folder: TFolder = {
-            // id: path, // todo: wrong id. for example, folder "src" ID is: projects/a7vgttfqbgy403ratp7du3ln/src/App.css
-            id: `projects/${id}/${parts.slice(0, i + 1).join("/")}`,
-            type: "folder",
-            name: part,
-            children: [],
-          };
-          current.children.push(folder);
-          current = folder;
-        }
-      }
-    }
-  });
-
-  await Promise.all(
-    fileData.map(async (file) => {
-      const data = await fetchFileContent(file.id);
-      file.data = data;
-    })
-  );
-
-  return {
-    files: root.children,
-    fileData,
-  };
-};
-
-const fetchFileContent = async (fileId: string): Promise<string> => {
-  try {
-    const fileRes = await fetch(
-      `${process.env.STORAGE_WORKER_URL}/api?fileId=${fileId}`,
-      {
-        headers: {
-          Authorization: `${process.env.WORKERS_KEY}`,
-        },
-      }
-    );
-    return await fileRes.text();
-  } catch (error) {
-    console.error("ERROR fetching file:", error);
-    return "";
-  }
-};
-
-export const createFile = async (fileId: string) => {
-  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `${process.env.WORKERS_KEY}`,
-    },
-    body: JSON.stringify({ fileId }),
-  });
-  return res.ok;
-};
-
-export const renameFile = async (
-  fileId: string,
-  newFileId: string,
-  data: string
-) => {
-  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/rename`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `${process.env.WORKERS_KEY}`,
-    },
-    body: JSON.stringify({ fileId, newFileId, data }),
-  });
-  return res.ok;
-};
-
-export const saveFile = async (fileId: string, data: string) => {
-  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api/save`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `${process.env.WORKERS_KEY}`,
-    },
-    body: JSON.stringify({ fileId, data }),
-  });
-  return res.ok;
-};
-
-export const deleteFile = async (fileId: string) => {
-  const res = await fetch(`${process.env.STORAGE_WORKER_URL}/api`, {
-    method: "DELETE",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `${process.env.WORKERS_KEY}`,
-    },
-    body: JSON.stringify({ fileId }),
-  });
-  return res.ok;
-};
-
-export const getProjectSize = async (id: string) => {
-  const res = await fetch(
-    `${process.env.STORAGE_WORKER_URL}/api/size?sandboxId=${id}`,
-    {
-      headers: {
-        Authorization: `${process.env.WORKERS_KEY}`,
-      },
-    }
-  );
-  return (await res.json()).size;
-};

backend/server/src/ratelimit.ts

@@ -30,4 +30,4 @@ export const deleteFileRL = new RateLimiterMemory({
 export const deleteFolderRL = new RateLimiterMemory({
   points: 1,
   duration: 2,
-})
+})

backend/server/src/socketAuth.ts

@@ -0,0 +1,75 @@
+import { Socket } from "socket.io"
+import { z } from "zod"
+import { Sandbox, User } from "./types"
+
+// Middleware for socket authentication
+export const socketAuth = async (socket: Socket, next: Function) => {
+    // Define the schema for handshake query validation
+    const handshakeSchema = z.object({
+        userId: z.string(),
+        sandboxId: z.string(),
+        EIO: z.string(),
+        transport: z.string(),
+    })
+
+    const q = socket.handshake.query
+    const parseQuery = handshakeSchema.safeParse(q)
+
+    // Check if the query is valid according to the schema
+    if (!parseQuery.success) {
+        next(new Error("Invalid request."))
+        return
+    }
+
+    const { sandboxId, userId } = parseQuery.data
+    // Fetch user data from the database
+    const dbUser = await fetch(
+        `${process.env.DATABASE_WORKER_URL}/api/user?id=${userId}`,
+        {
+            headers: {
+                Authorization: `${process.env.WORKERS_KEY}`,
+            },
+        }
+    )
+    const dbUserJSON = (await dbUser.json()) as User
+
+    // Fetch sandbox data from the database
+    const dbSandbox = await fetch(
+        `${process.env.DATABASE_WORKER_URL}/api/sandbox?id=${sandboxId}`,
+        {
+            headers: {
+                Authorization: `${process.env.WORKERS_KEY}`,
+            },
+        }
+    )
+    const dbSandboxJSON = (await dbSandbox.json()) as Sandbox
+
+    // Check if user data was retrieved successfully
+    if (!dbUserJSON) {
+        next(new Error("DB error."))
+        return
+    }
+
+    // Check if the user owns the sandbox or has shared access
+    const sandbox = dbUserJSON.sandbox.find((s) => s.id === sandboxId)
+    const sharedSandboxes = dbUserJSON.usersToSandboxes.find(
+        (uts) => uts.sandboxId === sandboxId
+    )
+
+    // If user doesn't own or have shared access to the sandbox, deny access
+    if (!sandbox && !sharedSandboxes) {
+        next(new Error("Invalid credentials."))
+        return
+    }
+
+    // Set socket data with user information
+    socket.data = {
+        userId,
+        sandboxId: sandboxId,
+        isOwner: sandbox !== undefined,
+        type: dbSandboxJSON.type
+    }
+
+    // Allow the connection
+    next()
+}

backend/server/src/types.ts

@@ -1,70 +1,75 @@
 // DB Types
 
 export type User = {
-  id: string;
-  name: string;
-  email: string;
-  generations: number;
-  sandbox: Sandbox[];
-  usersToSandboxes: UsersToSandboxes[];
-};
+  id: string
+  name: string
+  email: string
+  generations: number
+  sandbox: Sandbox[]
+  usersToSandboxes: UsersToSandboxes[]
+}
 
 export type Sandbox = {
-  id: string;
-  name: string;
-  type: "react" | "node";
-  visibility: "public" | "private";
-  createdAt: Date;
-  userId: string;
-  usersToSandboxes: UsersToSandboxes[];
-};
+  id: string
+  name: string
+  type: "reactjs" | "vanillajs" | "nextjs" | "streamlit"
+  visibility: "public" | "private"
+  createdAt: Date
+  userId: string
+  usersToSandboxes: UsersToSandboxes[]
+}
 
 export type UsersToSandboxes = {
-  userId: string;
-  sandboxId: string;
-  sharedOn: Date;
-};
+  userId: string
+  sandboxId: string
+  sharedOn: Date
+}
 
 export type TFolder = {
-  id: string;
-  type: "folder";
-  name: string;
-  children: (TFile | TFolder)[];
-};
+  id: string
+  type: "folder"
+  name: string
+  children: (TFile | TFolder)[]
+}
 
 export type TFile = {
-  id: string;
-  type: "file";
-  name: string;
-};
+  id: string
+  type: "file"
+  name: string
+}
 
 export type TFileData = {
-  id: string;
-  data: string;
-};
+  id: string
+  data: string
+}
 
 export type R2Files = {
-  objects: R2FileData[];
-  truncated: boolean;
-  delimitedPrefixes: any[];
-};
+  objects: R2FileData[]
+  truncated: boolean
+  delimitedPrefixes: any[]
+}
 
 export type R2FileData = {
-  storageClass: string;
-  uploaded: string;
-  checksums: any;
-  httpEtag: string;
-  etag: string;
-  size: number;
-  version: string;
-  key: string;
-};
+  storageClass: string
+  uploaded: string
+  checksums: any
+  httpEtag: string
+  etag: string
+  size: number
+  version: string
+  key: string
+}
 
 export type R2FileBody = R2FileData & {
-  body: ReadableStream;
-  bodyUsed: boolean;
-  arrayBuffer: Promise<ArrayBuffer>;
-  text: Promise<string>;
-  json: Promise<any>;
-  blob: Promise<Blob>;
-};
+  body: ReadableStream
+  bodyUsed: boolean
+  arrayBuffer: Promise<ArrayBuffer>
+  text: Promise<string>
+  json: Promise<any>
+  blob: Promise<Blob>
+}
+export interface DokkuResponse {
+  success: boolean
+  apps?: string[]
+  message?: string
+}

backend/server/src/utils.ts

@@ -1,23 +1,23 @@
 export class LockManager {
-  private locks: { [key: string]: Promise<any> };
+  private locks: { [key: string]: Promise<any> }
 
   constructor() {
-    this.locks = {};
+    this.locks = {}
   }
 
   async acquireLock<T>(key: string, task: () => Promise<T>): Promise<T> {
     if (!this.locks[key]) {
       this.locks[key] = new Promise<T>(async (resolve, reject) => {
         try {
-          const result = await task();
-          resolve(result);
+          const result = await task()
+          resolve(result)
         } catch (error) {
-          reject(error);
+          reject(error)
         } finally {
-          delete this.locks[key];
+          delete this.locks[key]
         }
-      });
+      })
     }
-    return await this.locks[key];
+    return await this.locks[key]
   }
 }

backend/storage/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": false
-}

backend/storage/package.json

@@ -1,23 +1,23 @@
 {
-  "name": "storage",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "deploy": "wrangler deploy",
-    "dev": "wrangler dev --remote",
-    "start": "wrangler dev",
-    "test": "vitest",
-    "cf-typegen": "wrangler types"
-  },
-  "devDependencies": {
-    "@cloudflare/vitest-pool-workers": "^0.1.0",
-    "@cloudflare/workers-types": "^4.20240419.0",
-    "typescript": "^5.0.4",
-    "vitest": "1.3.0",
-    "wrangler": "^3.0.0"
-  },
-  "dependencies": {
-    "p-limit": "^6.1.0",
-    "zod": "^3.23.4"
-  }
+	"name": "storage",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler deploy",
+		"dev": "wrangler dev --remote",
+		"start": "wrangler dev",
+		"test": "vitest",
+		"cf-typegen": "wrangler types"
+	},
+	"devDependencies": {
+		"@cloudflare/vitest-pool-workers": "^0.1.0",
+		"@cloudflare/workers-types": "^4.20241106.0",
+		"typescript": "^5.0.4",
+		"vitest": "1.3.0",
+		"wrangler": "^3.86.0"
+	},
+	"dependencies": {
+		"p-limit": "^6.1.0",
+		"zod": "^3.23.4"
+	}
 }

backend/storage/src/index.ts

@@ -1,5 +1,5 @@
+import { ExecutionContext, R2Bucket, Headers as CFHeaders } from "@cloudflare/workers-types"
 import { z } from "zod"
-import pLimit from 'p-limit';
 
 export interface Env {
 	R2: R2Bucket
@@ -76,14 +76,13 @@ export default {
 					if (obj === null) {
 						return new Response(`${fileId} not found`, { status: 404 })
 					}
-					const headers = new Headers()
+					const headers = new Headers() as unknown as CFHeaders
 					headers.set("etag", obj.httpEtag)
 					obj.writeHttpMetadata(headers)
 
 					const text = await obj.text()
-
 					return new Response(text, {
-						headers,
+						headers: Object.fromEntries(headers.entries()),
 					})
 				} else return invalidRequest
 			} else if (method === "POST") {
@@ -136,29 +135,7 @@ export default {
 
 			return success
 		} else if (path === "/api/init" && method === "POST") {
-			const initSchema = z.object({
-				sandboxId: z.string(),
-				type: z.string(),
-			})
-
-			const body = await request.json()
-			const { sandboxId, type } = initSchema.parse(body)
-
-			console.log(`Copying template: ${type}`);
-
-			// List all objects under the directory
-			const { objects } = await env.Templates.list({ prefix: type });
-
-			// Copy each object to the new directory with a 5 concurrency limit
-			const limit = pLimit(5);
-			await Promise.all(objects.map(({ key }) =>
-			  limit(async () => {
-				const destinationKey = key.replace(type, `projects/${sandboxId}`);
-				const fileBody = await env.Templates.get(key).then(res => res?.body ?? "");
-				await env.R2.put(destinationKey, fileBody);
-			  })
-			));
-
+			// This API path no longer does anything, because template files are stored in E2B sandbox templates.
 			return success
 		} else {
 			return notFound

backend/storage/test/index.spec.ts

@@ -1,25 +1,30 @@
 // test/index.spec.ts
-import { env, createExecutionContext, waitOnExecutionContext, SELF } from 'cloudflare:test';
-import { describe, it, expect } from 'vitest';
-import worker from '../src/index';
+import {
+	createExecutionContext,
+	env,
+	SELF,
+	waitOnExecutionContext,
+} from "cloudflare:test"
+import { describe, expect, it } from "vitest"
+import worker from "../src/index"
 
 // For now, you'll need to do something like this to get a correctly-typed
 // `Request` to pass to `worker.fetch()`.
-const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;
+const IncomingRequest = Request<unknown, IncomingRequestCfProperties>
 
-describe('Hello World worker', () => {
-	it('responds with Hello World! (unit style)', async () => {
-		const request = new IncomingRequest('http://example.com');
+describe("Hello World worker", () => {
+	it("responds with Hello World! (unit style)", async () => {
+		const request = new IncomingRequest("http://example.com")
 		// Create an empty context to pass to `worker.fetch()`.
-		const ctx = createExecutionContext();
-		const response = await worker.fetch(request, env, ctx);
+		const ctx = createExecutionContext()
+		const response = await worker.fetch(request, env, ctx)
 		// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
-		await waitOnExecutionContext(ctx);
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
-	});
+		await waitOnExecutionContext(ctx)
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
+	})
 
-	it('responds with Hello World! (integration style)', async () => {
-		const response = await SELF.fetch('https://example.com');
-		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
-	});
-});
+	it("responds with Hello World! (integration style)", async () => {
+		const response = await SELF.fetch("https://example.com")
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`)
+	})
+})

backend/storage/test/tsconfig.json

@@ -1,11 +1,11 @@
 {
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "types": [
-      "@cloudflare/workers-types/experimental",
-      "@cloudflare/vitest-pool-workers"
-    ]
-  },
-  "include": ["./**/*.ts", "../src/env.d.ts"],
-  "exclude": []
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"types": [
+			"@cloudflare/workers-types/experimental",
+			"@cloudflare/vitest-pool-workers"
+		]
+	},
+	"include": ["./**/*.ts", "../src/env.d.ts"],
+	"exclude": []
 }

backend/storage/tsconfig.json

@@ -12,7 +12,9 @@
 
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+		"lib": [
+			"es2021"
+		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
 		"jsx": "react" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -32,7 +34,7 @@
 		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 		// "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
 		"types": [
-			"@cloudflare/workers-types/2023-07-01"
+			"@cloudflare/workers-types"
 		] /* Specify type package names to be included without being referenced in a source file. */,
 		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 		"resolveJsonModule": true /* Enable importing .json files */,

backend/storage/vitest.config.ts

@@ -1,11 +1,11 @@
-import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config"
 
 export default defineWorkersConfig({
-  test: {
-    poolOptions: {
-      workers: {
-        wrangler: { configPath: "./wrangler.toml" },
-      },
-    },
-  },
-});
+	test: {
+		poolOptions: {
+			workers: {
+				wrangler: { configPath: "./wrangler.toml" },
+			},
+		},
+	},
+})

backend/storage/worker-configuration.d.ts

@@ -1,4 +1,3 @@
 // Generated by Wrangler
 // After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
-interface Env {
-}
+interface Env {}

frontend/.env.example

@@ -8,8 +8,10 @@ NEXT_PUBLIC_APP_URL=http://localhost:3000
 
 # Set WORKER_URLs after deploying the workers.
 # Set NEXT_PUBLIC_WORKERS_KEY to be the same as KEY in /backend/storage/wrangler.toml.
+# These URLs should begin with https:// in production
 NEXT_PUBLIC_DATABASE_WORKER_URL=
 NEXT_PUBLIC_STORAGE_WORKER_URL=
+NEXT_PUBLIC_AI_WORKER_URL=
 NEXT_PUBLIC_WORKERS_KEY=
 
 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in

frontend/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": false
-}

frontend/app/(app)/code/[id]/page.tsx

@@ -1,12 +1,11 @@
+// import { Room } from "@/components/editor/live/room"
+import Loading from "@/components/editor/loading"
 import Navbar from "@/components/editor/navbar"
-import { Room } from "@/components/editor/live/room"
+import { TerminalProvider } from "@/context/TerminalContext"
 import { Sandbox, User, UsersToSandboxes } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
-import { notFound, redirect } from "next/navigation"
-import Loading from "@/components/editor/loading"
 import dynamic from "next/dynamic"
-import fs from "fs"
-import { TerminalProvider } from "@/context/TerminalContext"
+import { notFound, redirect } from "next/navigation"
 
 export const revalidate = 0
 
@@ -52,7 +51,7 @@ const getSharedUsers = async (usersToSandboxes: UsersToSandboxes[]) => {
         }
       )
       const userData: User = await userRes.json()
-      return { id: userData.id, name: userData.name }
+      return { id: userData.id, name: userData.name, avatarUrl: userData.avatarUrl }
     })
   )
 
@@ -89,19 +88,20 @@ export default async function CodePage({ params }: { params: { id: string } }) {
 
   return (
     <>
-    <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-      <Room id={sandboxId}>
-      <TerminalProvider>
-        <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
-        <div className="w-screen flex grow">
-          <CodeEditor
-            userData={userData}
-            sandboxData={sandboxData}
-          />
-        </div>
-      </TerminalProvider>
-      </Room>
-    </div>
+      <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
+        {/* <Room id={sandboxId}> */}
+          <TerminalProvider>
+            <Navbar
+              userData={userData}
+              sandboxData={sandboxData}
+              shared={shared as { id: string; name: string; avatarUrl: string }[]}
+            />
+            <div className="w-screen flex grow">
+              <CodeEditor userData={userData} sandboxData={sandboxData} />
+            </div>
+          </TerminalProvider>
+        {/* </Room> */}
+      </div>
     </>
   )
 }

frontend/app/(app)/dashboard/page.tsx

@@ -1,8 +1,8 @@
-import { UserButton, currentUser } from "@clerk/nextjs"
-import { redirect } from "next/navigation"
 import Dashboard from "@/components/dashboard"
 import Navbar from "@/components/dashboard/navbar"
-import { Sandbox, User } from "@/lib/types"
+import { User } from "@/lib/types"
+import { currentUser } from "@clerk/nextjs"
+import { redirect } from "next/navigation"
 
 export default async function DashboardPage() {
   const user = await currentUser()
@@ -35,6 +35,7 @@ export default async function DashboardPage() {
     type: "react" | "node"
     author: string
     sharedOn: Date
+    authorAvatarUrl: string
   }[]
 
   return (

frontend/app/(app)/layout.tsx

@@ -1,6 +1,7 @@
 import { User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import { redirect } from "next/navigation"
+import { generateUniqueUsername } from "@/lib/username-generator";
 
 export default async function AppAuthLayout({
   children,
@@ -24,6 +25,25 @@ export default async function AppAuthLayout({
   const dbUserJSON = (await dbUser.json()) as User
 
   if (!dbUserJSON.id) {
+    // Try to get GitHub username if available
+    const githubUsername = user.externalAccounts.find(
+      account => account.provider === "github"
+    )?.username;
+
+    const username = githubUsername || await generateUniqueUsername(async (username) => {
+      // Check if username exists in database
+      const userCheck = await fetch(
+        `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user/check-username?username=${username}`,
+        {
+          headers: {
+            Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+          },
+        }
+      )
+      const exists = await userCheck.json()
+      return exists.exists
+    });
+
     const res = await fetch(
       `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user`,
       {
@@ -36,9 +56,20 @@ export default async function AppAuthLayout({
           id: user.id,
           name: user.firstName + " " + user.lastName,
           email: user.emailAddresses[0].emailAddress,
+          username: username,
+          avatarUrl: user.imageUrl || null,
+          createdAt: new Date().toISOString(),
         }),
       }
     )
+
+    if (!res.ok) {
+      const error = await res.text();
+      console.error("Failed to create user:", error);
+    } else {
+      const data = await res.json();
+      console.log("User created successfully:", data);
+    }
   }
 
   return <>{children}</>

frontend/app/api/lb-auth/route.ts

@@ -1,57 +1,61 @@
-import { colors } from "@/lib/colors"
-import { User } from "@/lib/types"
+// import { colors } from "@/lib/colors"
+// import { User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
-import { Liveblocks } from "@liveblocks/node"
+// import { Liveblocks } from "@liveblocks/node"
 import { NextRequest } from "next/server"
 
-const API_KEY = process.env.LIVEBLOCKS_SECRET_KEY!
+// const API_KEY = process.env.LIVEBLOCKS_SECRET_KEY!
 
-const liveblocks = new Liveblocks({
-  secret: API_KEY!,
-})
+// const liveblocks = new Liveblocks({
+//   secret: API_KEY!,
+// })
 
 export async function POST(request: NextRequest) {
-  const clerkUser = await currentUser()
+  // Temporarily return unauthorized while Liveblocks is disabled
+  return new Response("Liveblocks collaboration temporarily disabled", { status: 503 })
 
-  if (!clerkUser) {
-    return new Response("Unauthorized", { status: 401 })
-  }
-
-  const res = await fetch(
-    `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${clerkUser.id}`,
-    {
-      headers: {
-        Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
-      },
-    }
-  )
-  const user = (await res.json()) as User
-
-  const colorNames = Object.keys(colors)
-  const randomColor = colorNames[
-    Math.floor(Math.random() * colorNames.length)
-  ] as keyof typeof colors
-  const code = colors[randomColor]
-
-  // Create a session for the current user
-  // userInfo is made available in Liveblocks presence hooks, e.g. useOthers
-  const session = liveblocks.prepareSession(user.id, {
-    userInfo: {
-      name: user.name,
-      email: user.email,
-      color: randomColor,
-    },
-  })
-
-  // Give the user access to the room
-  user.sandbox.forEach((sandbox) => {
-    session.allow(`${sandbox.id}`, session.FULL_ACCESS)
-  })
-  user.usersToSandboxes.forEach((userToSandbox) => {
-    session.allow(`${userToSandbox.sandboxId}`, session.FULL_ACCESS)
-  })
-
-  // Authorize the user and return the result
-  const { body, status } = await session.authorize()
-  return new Response(body, { status })
+  // Original implementation commented out:
+  // const clerkUser = await currentUser()
+  // 
+  // if (!clerkUser) {
+  //   return new Response("Unauthorized", { status: 401 })
+  // }
+  // 
+  // const res = await fetch(
+  //   `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${clerkUser.id}`,
+  //   {
+  //     headers: {
+  //       Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
+  //     },
+  //   }
+  // )
+  // const user = (await res.json()) as User
+  // 
+  // const colorNames = Object.keys(colors)
+  // const randomColor = colorNames[
+  //   Math.floor(Math.random() * colorNames.length)
+  // ] as keyof typeof colors
+  // const code = colors[randomColor]
+  // 
+  // // Create a session for the current user
+  // // userInfo is made available in Liveblocks presence hooks, e.g. useOthers
+  // const session = liveblocks.prepareSession(user.id, {
+  //   userInfo: {
+  //     name: user.name,
+  //     email: user.email,
+  //     color: randomColor,
+  //   },
+  // })
+  // 
+  // // Give the user access to the room
+  // user.sandbox.forEach((sandbox) => {
+  //   session.allow(`${sandbox.id}`, session.FULL_ACCESS)
+  // })
+  // user.usersToSandboxes.forEach((userToSandbox) => {
+  //   session.allow(`${userToSandbox.sandboxId}`, session.FULL_ACCESS)
+  // })
+  // 
+  // // Authorize the user and return the result
+  // const { body, status } = await session.authorize()
+  // return new Response(body, { status })
 }

frontend/app/globals.css

@@ -99,6 +99,29 @@
   ); /* violet 900 -> bg */
 }
 
+.light .gradient-button-bg {
+  background: radial-gradient(
+    circle at top,
+    #262626 0%,
+    #f5f5f5 50%
+  ); /* Dark gray -> Light gray */
+}
+
+.light .gradient-button {
+  background: radial-gradient(
+    circle at bottom,
+    hsl(0, 10%, 25%) -10%,
+    #9d9d9d 50%
+  ); /* Light gray -> Almost white */
+}
+
+.light .gradient-button-bg > div:hover {
+  background: radial-gradient(
+    circle at bottom,
+    hsl(0, 10%, 25%) -10%,
+    #9d9d9d 80%
+  ); /* Light gray -> Almost white */
+}
 .inline-decoration::before {
   content: "Generate";
   color: #525252;

frontend/app/layout.tsx

@@ -1,13 +1,13 @@
-import type { Metadata } from "next"
-import { GeistSans } from "geist/font/sans"
-import { GeistMono } from "geist/font/mono"
-import "./globals.css"
-import { ThemeProvider } from "@/components/layout/themeProvider"
-import { ClerkProvider } from "@clerk/nextjs"
 import { Toaster } from "@/components/ui/sonner"
-import { Analytics } from "@vercel/analytics/react"
-import { PreviewProvider } from "@/context/PreviewContext";
+import { ThemeProvider } from "@/components/ui/theme-provider"
+import { PreviewProvider } from "@/context/PreviewContext"
 import { SocketProvider } from '@/context/SocketContext'
+import { ClerkProvider } from "@clerk/nextjs"
+import { Analytics } from "@vercel/analytics/react"
+import { GeistMono } from "geist/font/mono"
+import { GeistSans } from "geist/font/sans"
+import type { Metadata } from "next"
+import "./globals.css"
 
 export const metadata: Metadata = {
   title: "Sandbox",
@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 }
 
 export default function RootLayout({
-  children
+  children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
@@ -25,14 +25,11 @@ export default function RootLayout({
         <body>
           <ThemeProvider
             attribute="class"
-            defaultTheme="dark"
-            forcedTheme="dark"
+            defaultTheme="system"
             disableTransitionOnChange
           >
             <SocketProvider>
-            <PreviewProvider>
-            {children}
-            </PreviewProvider>
+              <PreviewProvider>{children}</PreviewProvider>
             </SocketProvider>
             <Analytics />
             <Toaster position="bottom-left" richColors />
@@ -41,4 +38,4 @@ export default function RootLayout({
       </html>
     </ClerkProvider>
   )
-}
+}

frontend/app/page.tsx

@@ -1,13 +1,13 @@
-import { currentUser } from "@clerk/nextjs";
-import { redirect } from "next/navigation";
-import Landing from "@/components/landing";
+import Landing from "@/components/landing"
+import { currentUser } from "@clerk/nextjs"
+import { redirect } from "next/navigation"
 
 export default async function Home() {
-  const user = await currentUser();
+  const user = await currentUser()
 
   if (user) {
-    redirect("/dashboard");
+    redirect("/dashboard")
   }
 
-  return <Landing />;
+  return <Landing />
 }

frontend/components/dashboard/about.tsx

@@ -3,16 +3,9 @@
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog"
-import Image from "next/image"
-import { useState } from "react"
-
-import { Button } from "../ui/button"
-import { ChevronRight } from "lucide-react"
 
 export default function AboutModal({
   open,
@@ -25,11 +18,38 @@ export default function AboutModal({
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>About this project</DialogTitle>
+          <DialogTitle>Help & Support</DialogTitle>
         </DialogHeader>
-        <div className="text-sm text-muted-foreground">
-          Sandbox is an open-source cloud-based code editing environment with
-          custom AI code autocompletion and real-time collaboration.
+        <div className="space-y-4">
+          {/* <div className="text-sm text-muted-foreground">
+            Sandbox is an open-source cloud-based code editing environment with
+            custom AI code autocompletion and real-time collaboration.
+          </div> */}
+          <div className="text-sm text-muted-foreground">
+            Get help and support through our Discord community or by creating issues on GitHub:
+          </div>
+          <div className="space-y-2">
+            <div className="text-sm">
+              <a 
+                href="https://discord.gitwit.dev/" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                Join our Discord community →
+              </a>
+            </div>
+            <div className="text-sm">
+              <a 
+                href="https://github.com/jamesmurdza/sandbox/issues" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                Report issues on GitHub →
+              </a>
+            </div>
+          </div>
         </div>
       </DialogContent>
     </Dialog>

frontend/components/dashboard/index.tsx

@@ -1,24 +1,16 @@
 "use client"
 
-import CustomButton from "@/components/ui/customButton"
 import { Button } from "@/components/ui/button"
-import {
-  Code2,
-  FolderDot,
-  HelpCircle,
-  Plus,
-  Settings,
-  Users,
-} from "lucide-react"
-import { useEffect, useState } from "react"
+import CustomButton from "@/components/ui/customButton"
 import { Sandbox } from "@/lib/types"
+import { Code2, FolderDot, HelpCircle, Plus, Users } from "lucide-react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import AboutModal from "./about"
+import NewProjectModal from "./newProject"
 import DashboardProjects from "./projects"
 import DashboardSharedWithMe from "./shared"
-import NewProjectModal from "./newProject"
-import Link from "next/link"
-import { useRouter, useSearchParams } from "next/navigation"
-import AboutModal from "./about"
-import { toast } from "sonner"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
@@ -33,6 +25,7 @@ export default function Dashboard({
     type: "react" | "node"
     author: string
     sharedOn: Date
+    authorAvatarUrl?: string
   }[]
 }) {
   const [screen, setScreen] = useState<TScreen>("projects")
@@ -49,8 +42,9 @@ export default function Dashboard({
   const q = searchParams.get("q")
   const router = useRouter()
 
-  useEffect(() => { // update the dashboard to show a new project
-      router.refresh() 
+  useEffect(() => {
+    // update the dashboard to show a new project
+    router.refresh()
   }, [])
 
   return (
@@ -84,14 +78,14 @@ export default function Dashboard({
               <FolderDot className="w-4 h-4 mr-2" />
               My Projects
             </Button>
-            <Button
+            {/* <Button
               variant="ghost"
               onClick={() => setScreen("shared")}
               className={activeScreen("shared")}
             >
               <Users className="w-4 h-4 mr-2" />
               Shared With Me
-            </Button>
+            </Button> */}
             {/* <Button
               variant="ghost"
               onClick={() => setScreen("settings")}
@@ -102,7 +96,7 @@ export default function Dashboard({
             </Button> */}
           </div>
           <div className="flex flex-col">
-            <a target="_blank" href="https://github.com/ishaan1013/sandbox">
+            <a target="_blank" href="https://github.com/jamesmurdza/sandbox">
               <Button
                 variant="ghost"
                 className="justify-start w-full font-normal text-muted-foreground"
@@ -117,7 +111,7 @@ export default function Dashboard({
               className="justify-start font-normal text-muted-foreground"
             >
               <HelpCircle className="w-4 h-4 mr-2" />
-              About
+              Help
             </Button>
           </div>
         </div>
@@ -128,7 +122,12 @@ export default function Dashboard({
             ) : null}
           </>
         ) : screen === "shared" ? (
-          <DashboardSharedWithMe shared={shared} />
+          <DashboardSharedWithMe
+            shared={shared.map((item) => ({
+              ...item,
+              authorAvatarUrl: item.authorAvatarUrl || "",
+            }))}
+          />
         ) : screen === "settings" ? null : null}
       </div>
     </>

frontend/components/dashboard/navbar/index.tsx

@@ -1,9 +1,10 @@
+import Logo from "@/assets/logo.svg"
+import { ThemeSwitcher } from "@/components/ui/theme-switcher"
+import { User } from "@/lib/types"
 import Image from "next/image"
 import Link from "next/link"
-import Logo from "@/assets/logo.svg"
-import DashboardNavbarSearch from "./search"
 import UserButton from "../../ui/userButton"
-import { User } from "@/lib/types"
+import DashboardNavbarSearch from "./search"
 
 export default function DashboardNavbar({ userData }: { userData: User }) {
   return (
@@ -19,6 +20,7 @@ export default function DashboardNavbar({ userData }: { userData: User }) {
       </div>
       <div className="flex items-center space-x-4">
         <DashboardNavbarSearch />
+        <ThemeSwitcher />
         <UserButton userData={userData} />
       </div>
     </div>

frontend/components/dashboard/navbar/search.tsx

@@ -1,13 +1,12 @@
-"use client";
+"use client"
 
-import { Input } from "../../ui/input";
-import { Search } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import { Search } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { Input } from "../../ui/input"
 
 export default function DashboardNavbarSearch() {
   // const [search, setSearch] = useState("");
-  const router = useRouter();
+  const router = useRouter()
 
   // useEffect(() => {
   //   const delayDebounceFn = setTimeout(() => {
@@ -29,14 +28,14 @@ export default function DashboardNavbarSearch() {
         // onChange={(e) => setSearch(e.target.value)}
         onChange={(e) => {
           if (e.target.value === "") {
-            router.push(`/dashboard`);
-            return;
+            router.push(`/dashboard`)
+            return
           }
-          router.push(`/dashboard?q=${e.target.value}`);
+          router.push(`/dashboard?q=${e.target.value}`)
         }}
         placeholder="Search projects..."
         className="pl-8"
       />
     </div>
-  );
+  )
 }

frontend/components/dashboard/newProject.tsx

@@ -3,16 +3,14 @@
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog"
-import Image from "next/image"
-import { useState } from "react"
-import { set, z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
+import Image from "next/image"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { useForm } from "react-hook-form"
+import { z } from "zod"
 
 import {
   Form,
@@ -31,13 +29,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { useUser } from "@clerk/nextjs"
 import { createSandbox } from "@/lib/actions"
-import { useRouter } from "next/navigation"
-import { Loader2 } from "lucide-react"
-import { Button } from "../ui/button"
 import { projectTemplates } from "@/lib/data"
+import { useUser } from "@clerk/nextjs"
+import { ChevronLeft, ChevronRight, Loader2, Search } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { Button } from "../ui/button"
 
+import { cn } from "@/lib/utils"
+import type { EmblaCarouselType } from "embla-carousel"
+import useEmblaCarousel from "embla-carousel-react"
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
 const formSchema = z.object({
   name: z
     .string()
@@ -57,11 +59,20 @@ export default function NewProjectModal({
   open: boolean
   setOpen: (open: boolean) => void
 }) {
+  const router = useRouter()
+  const user = useUser()
   const [selected, setSelected] = useState("reactjs")
   const [loading, setLoading] = useState(false)
-  const router = useRouter()
-
-  const user = useUser()
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }, [
+    WheelGesturesPlugin(),
+  ])
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi)
+  const [search, setSearch] = useState("")
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -71,6 +82,26 @@ export default function NewProjectModal({
     },
   })
 
+  const handleTemplateClick = useCallback(
+    ({ id, index }: { id: string; index: number }) => {
+      setSelected(id)
+      emblaApi?.scrollTo(index)
+    },
+    [emblaApi]
+  )
+  const filteredTemplates = useMemo(
+    () =>
+      projectTemplates.filter(
+        (item) =>
+          item.name.toLowerCase().includes(search.toLowerCase()) ||
+          item.description.toLowerCase().includes(search.toLowerCase())
+      ),
+    [search, projectTemplates]
+  )
+  const emptyTemplates = useMemo(
+    () => filteredTemplates.length === 0,
+    [filteredTemplates]
+  )
   async function onSubmit(values: z.infer<typeof formSchema>) {
     if (!user.isSignedIn) return
 
@@ -80,7 +111,6 @@ export default function NewProjectModal({
     const id = await createSandbox(sandboxData)
     router.push(`/code/${id}`)
   }
-
   return (
     <Dialog
       open={open}
@@ -92,25 +122,89 @@ export default function NewProjectModal({
         <DialogHeader>
           <DialogTitle>Create A Sandbox</DialogTitle>
         </DialogHeader>
-        <div className="grid grid-cols-2 w-full gap-2 mt-2">
-          {projectTemplates.map((item) => (
-            <button
-              disabled={item.disabled || loading}
-              key={item.id}
-              onClick={() => setSelected(item.id)}
-              className={`${
-                selected === item.id ? "border-foreground" : "border-border"
-              } rounded-md border bg-card text-card-foreground shadow text-left p-4 flex flex-col transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed`}
+        <div className="flex flex-col gap-2 max-w-full overflow-hidden">
+          <div className="flex items-center justify-end">
+            <SearchInput
+              {...{
+                value: search,
+                onValueChange: setSearch,
+              }}
+            />
+          </div>
+          <div className="overflow-hidden relative" ref={emblaRef}>
+            <div
+              className={cn(
+                "grid grid-flow-col gap-x-2  min-h-[97px]",
+                emptyTemplates ? "auto-cols-[100%]" : "auto-cols-[200px]"
+              )}
             >
-              <div className="space-x-2 flex items-center justify-start w-full">
-                <Image alt="" src={item.icon} width={20} height={20} />
-                <div className="font-medium">{item.name}</div>
-              </div>
-              <div className="mt-2 text-muted-foreground text-sm">
-                {item.description}
-              </div>
-            </button>
-          ))}
+              {filteredTemplates.map((item, i) => (
+                <button
+                  disabled={item.disabled || loading}
+                  key={item.id}
+                  onClick={handleTemplateClick.bind(null, {
+                    id: item.id,
+                    index: i,
+                  })}
+                  className={cn(
+                    selected === item.id
+                      ? "shadow-foreground"
+                      : "shadow-border",
+                    "shadow-[0_0_0_1px_inset] rounded-md border bg-card text-card-foreground text-left p-4 flex flex-col transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+                  )}
+                >
+                  <div className="space-x-2 flex items-center justify-start w-full">
+                    <Image alt="" src={item.icon} width={20} height={20} />
+                    <div className="font-medium">{item.name}</div>
+                  </div>
+                  <div className="mt-2 text-muted-foreground text-xs line-clamp-2">
+                    {item.description}
+                  </div>
+                </button>
+              ))}
+              {emptyTemplates && (
+                <div className="flex flex-col gap-2 items-center text-center justify-center text-muted-foreground text-sm">
+                  <p>No templates found</p>
+                  <Button size="xs" asChild>
+                    <a
+                      href="https://github.com/jamesmurdza/sandbox"
+                      target="_blank"
+                    >
+                      Contribute
+                    </a>
+                  </Button>
+                </div>
+              )}
+            </div>
+            <div
+              className={cn(
+                "absolute transition-all opacity-100 duration-400 bg-gradient-to-r from-background via-background to-transparent w-14 pl-1 left-0 top-0 -translate-x-1 bottom-0 h-full flex items-center",
+                prevBtnDisabled && "opacity-0 pointer-events-none"
+              )}
+            >
+              <Button
+                size="smIcon"
+                className="rounded-full"
+                onClick={onPrevButtonClick}
+              >
+                <ChevronLeft className="size-5" />
+              </Button>
+            </div>
+            <div
+              className={cn(
+                "absolute transition-all opacity-100 duration-400 bg-gradient-to-l from-background via-background to-transparent w-14 pl-1 right-0 top-0 translate-x-1 bottom-0 h-full flex items-center",
+                nextBtnDisabled && "opacity-0 pointer-events-none"
+              )}
+            >
+              <Button
+                size="smIcon"
+                className="rounded-full"
+                onClick={onNextButtonClick}
+              >
+                <ChevronRight className="size-5" />
+              </Button>
+            </div>
+          </div>
         </div>
 
         <Form {...form}>
@@ -178,3 +272,68 @@ export default function NewProjectModal({
     </Dialog>
   )
 }
+
+function SearchInput({
+  value,
+  onValueChange,
+}: {
+  value?: string
+  onValueChange?: (value: string) => void
+}) {
+  const onSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault()
+    console.log("searching")
+  }, [])
+  return (
+    <form {...{ onSubmit }} className="w-40 h-8 ">
+      <label
+        htmlFor="template-search"
+        className="flex gap-2 rounded-sm transition-colors bg-gray-100 dark:bg-[#2e2e2e] border border-[--s-color] [--s-color:hsl(var(--muted-foreground))]  focus-within:[--s-color:hsl(var(--muted-foreground),50%)]  h-full items-center px-2"
+      >
+        <Search className="size-4 text-[--s-color] transition-colors" />
+        <input
+          id="template-search"
+          type="text"
+          name="search"
+          placeholder="Search templates"
+          value={value}
+          onChange={(e) => onValueChange?.(e.target.value)}
+          className="bg-transparent placeholder:text-muted-foreground w-full focus:outline-none text-xs"
+        />
+      </label>
+    </form>
+  )
+}
+const usePrevNextButtons = (emblaApi: EmblaCarouselType | undefined) => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollPrev()
+  }, [emblaApi])
+
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollNext()
+  }, [emblaApi])
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev())
+    setNextBtnDisabled(!emblaApi.canScrollNext())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi) return
+
+    onSelect(emblaApi)
+    emblaApi.on("reInit", onSelect).on("select", onSelect)
+  }, [emblaApi, onSelect])
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  }
+}

frontend/components/dashboard/projectCard/dropdown.tsx

@@ -1,30 +1,30 @@
-"use client";
+"use client"
 
-import { Sandbox } from "@/lib/types";
-import { Ellipsis, Globe, Lock, Trash2 } from "lucide-react";
+import { Sandbox } from "@/lib/types"
+import { Ellipsis, Globe, Lock, Trash2 } from "lucide-react"
 
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu"
 
 export default function ProjectCardDropdown({
   sandbox,
   onVisibilityChange,
   onDelete,
 }: {
-  sandbox: Sandbox;
-  onVisibilityChange: (sandbox: Sandbox) => void;
-  onDelete: (sandbox: Sandbox) => void;
+  sandbox: Sandbox
+  onVisibilityChange: (sandbox: Sandbox) => void
+  onDelete: (sandbox: Sandbox) => void
 }) {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger
         onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
+          e.preventDefault()
+          e.stopPropagation()
         }}
         className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm outline-foreground"
       >
@@ -33,8 +33,8 @@ export default function ProjectCardDropdown({
       <DropdownMenuContent className="w-40">
         <DropdownMenuItem
           onClick={(e) => {
-            e.stopPropagation();
-            onVisibilityChange(sandbox);
+            e.stopPropagation()
+            onVisibilityChange(sandbox)
           }}
           className="cursor-pointer"
         >
@@ -52,8 +52,8 @@ export default function ProjectCardDropdown({
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={(e) => {
-            e.stopPropagation();
-            onDelete(sandbox);
+            e.stopPropagation()
+            onDelete(sandbox)
           }}
           className="!text-destructive cursor-pointer"
         >
@@ -62,5 +62,5 @@ export default function ProjectCardDropdown({
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  );
+  )
 }

frontend/components/dashboard/projectCard/index.tsx

@@ -1,14 +1,14 @@
 "use client"
 
+import { Card } from "@/components/ui/card"
+import { projectTemplates } from "@/lib/data"
+import { Sandbox } from "@/lib/types"
 import { AnimatePresence, motion } from "framer-motion"
+import { Clock, Globe, Lock } from "lucide-react"
 import Image from "next/image"
+import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
 import ProjectCardDropdown from "./dropdown"
-import { Clock, Globe, Lock } from "lucide-react"
-import { Sandbox } from "@/lib/types"
-import { Card } from "@/components/ui/card"
-import { useRouter } from "next/navigation"
-import { projectTemplates } from "@/lib/data"
 
 export default function ProjectCard({
   children,

frontend/components/dashboard/projectCard/revealEffect.tsx

@@ -1,8 +1,8 @@
-"use client";
-import { cn } from "@/lib/utils";
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
-import React, { useMemo, useRef } from "react";
-import * as THREE from "three";
+"use client"
+import { cn } from "@/lib/utils"
+import { Canvas, useFrame, useThree } from "@react-three/fiber"
+import React, { useMemo, useRef } from "react"
+import * as THREE from "three"
 
 export const CanvasRevealEffect = ({
   animationSpeed = 0.4,
@@ -12,12 +12,12 @@ export const CanvasRevealEffect = ({
   dotSize,
   showGradient = true,
 }: {
-  animationSpeed?: number;
-  opacities?: number[];
-  colors?: number[][];
-  containerClassName?: string;
-  dotSize?: number;
-  showGradient?: boolean;
+  animationSpeed?: number
+  opacities?: number[]
+  colors?: number[][]
+  containerClassName?: string
+  dotSize?: number
+  showGradient?: boolean
 }) => {
   return (
     <div className={cn("h-full relative bg-white w-full", containerClassName)}>
@@ -41,16 +41,16 @@ export const CanvasRevealEffect = ({
         <div className="absolute inset-0 bg-gradient-to-t from-background to-[100%]" />
       )}
     </div>
-  );
-};
+  )
+}
 
 interface DotMatrixProps {
-  colors?: number[][];
-  opacities?: number[];
-  totalSize?: number;
-  dotSize?: number;
-  shader?: string;
-  center?: ("x" | "y")[];
+  colors?: number[][]
+  opacities?: number[]
+  totalSize?: number
+  dotSize?: number
+  shader?: string
+  center?: ("x" | "y")[]
 }
 
 const DotMatrix: React.FC<DotMatrixProps> = ({
@@ -69,7 +69,7 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
       colors[0],
       colors[0],
       colors[0],
-    ];
+    ]
     if (colors.length === 2) {
       colorsArray = [
         colors[0],
@@ -78,7 +78,7 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
         colors[1],
         colors[1],
         colors[1],
-      ];
+      ]
     } else if (colors.length === 3) {
       colorsArray = [
         colors[0],
@@ -87,7 +87,7 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
         colors[1],
         colors[2],
         colors[2],
-      ];
+      ]
     }
 
     return {
@@ -111,8 +111,8 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
         value: dotSize,
         type: "uniform1f",
       },
-    };
-  }, [colors, opacities, totalSize, dotSize]);
+    }
+  }, [colors, opacities, totalSize, dotSize])
 
   return (
     <Shader
@@ -168,87 +168,87 @@ const DotMatrix: React.FC<DotMatrixProps> = ({
       uniforms={uniforms}
       maxFps={60}
     />
-  );
-};
+  )
+}
 
 type Uniforms = {
   [key: string]: {
-    value: number[] | number[][] | number;
-    type: string;
-  };
-};
+    value: number[] | number[][] | number
+    type: string
+  }
+}
 const ShaderMaterial = ({
   source,
   uniforms,
   maxFps = 60,
 }: {
-  source: string;
-  hovered?: boolean;
-  maxFps?: number;
-  uniforms: Uniforms;
+  source: string
+  hovered?: boolean
+  maxFps?: number
+  uniforms: Uniforms
 }) => {
-  const { size } = useThree();
-  const ref = useRef<THREE.Mesh>();
-  let lastFrameTime = 0;
+  const { size } = useThree()
+  const ref = useRef<THREE.Mesh>()
+  let lastFrameTime = 0
 
   useFrame(({ clock }) => {
-    if (!ref.current) return;
-    const timestamp = clock.getElapsedTime();
+    if (!ref.current) return
+    const timestamp = clock.getElapsedTime()
     if (timestamp - lastFrameTime < 1 / maxFps) {
-      return;
+      return
     }
-    lastFrameTime = timestamp;
+    lastFrameTime = timestamp
 
-    const material: any = ref.current.material;
-    const timeLocation = material.uniforms.u_time;
-    timeLocation.value = timestamp;
-  });
+    const material: any = ref.current.material
+    const timeLocation = material.uniforms.u_time
+    timeLocation.value = timestamp
+  })
 
   const getUniforms = () => {
-    const preparedUniforms: any = {};
+    const preparedUniforms: any = {}
 
     for (const uniformName in uniforms) {
-      const uniform: any = uniforms[uniformName];
+      const uniform: any = uniforms[uniformName]
 
       switch (uniform.type) {
         case "uniform1f":
-          preparedUniforms[uniformName] = { value: uniform.value, type: "1f" };
-          break;
+          preparedUniforms[uniformName] = { value: uniform.value, type: "1f" }
+          break
         case "uniform3f":
           preparedUniforms[uniformName] = {
             value: new THREE.Vector3().fromArray(uniform.value),
             type: "3f",
-          };
-          break;
+          }
+          break
         case "uniform1fv":
-          preparedUniforms[uniformName] = { value: uniform.value, type: "1fv" };
-          break;
+          preparedUniforms[uniformName] = { value: uniform.value, type: "1fv" }
+          break
         case "uniform3fv":
           preparedUniforms[uniformName] = {
             value: uniform.value.map((v: number[]) =>
               new THREE.Vector3().fromArray(v)
             ),
             type: "3fv",
-          };
-          break;
+          }
+          break
         case "uniform2f":
           preparedUniforms[uniformName] = {
             value: new THREE.Vector2().fromArray(uniform.value),
             type: "2f",
-          };
-          break;
+          }
+          break
         default:
-          console.error(`Invalid uniform type for '${uniformName}'.`);
-          break;
+          console.error(`Invalid uniform type for '${uniformName}'.`)
+          break
       }
     }
 
-    preparedUniforms["u_time"] = { value: 0, type: "1f" };
+    preparedUniforms["u_time"] = { value: 0, type: "1f" }
     preparedUniforms["u_resolution"] = {
       value: new THREE.Vector2(size.width * 2, size.height * 2),
-    }; // Initialize u_resolution
-    return preparedUniforms;
-  };
+    } // Initialize u_resolution
+    return preparedUniforms
+  }
 
   // Shader material
   const material = useMemo(() => {
@@ -272,33 +272,33 @@ const ShaderMaterial = ({
       blending: THREE.CustomBlending,
       blendSrc: THREE.SrcAlphaFactor,
       blendDst: THREE.OneFactor,
-    });
+    })
 
-    return materialObject;
-  }, [size.width, size.height, source]);
+    return materialObject
+  }, [size.width, size.height, source])
 
   return (
     <mesh ref={ref as any}>
       <planeGeometry args={[2, 2]} />
       <primitive object={material} attach="material" />
     </mesh>
-  );
-};
+  )
+}
 
 const Shader: React.FC<ShaderProps> = ({ source, uniforms, maxFps = 60 }) => {
   return (
     <Canvas className="absolute inset-0  h-full w-full">
       <ShaderMaterial source={source} uniforms={uniforms} maxFps={maxFps} />
     </Canvas>
-  );
-};
+  )
+}
 interface ShaderProps {
-  source: string;
+  source: string
   uniforms: {
     [key: string]: {
-      value: number[] | number[][] | number;
-      type: string;
-    };
-  };
-  maxFps?: number;
+      value: number[] | number[][] | number
+      type: string
+    }
+  }
+  maxFps?: number
 }

frontend/components/dashboard/projects.tsx

@@ -1,16 +1,12 @@
-"use client";
+"use client"
 
-import { Sandbox } from "@/lib/types";
-import ProjectCard from "./projectCard";
-import Image from "next/image";
-import ProjectCardDropdown from "./projectCard/dropdown";
-import { Clock, Globe, Lock } from "lucide-react";
-import Link from "next/link";
-import { Card } from "../ui/card";
-import { deleteSandbox, updateSandbox } from "@/lib/actions";
-import { toast } from "sonner";
-import { useEffect, useState } from "react";
-import { CanvasRevealEffect } from "./projectCard/revealEffect";
+import { deleteSandbox, updateSandbox } from "@/lib/actions"
+import { Sandbox } from "@/lib/types"
+import Link from "next/link"
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import ProjectCard from "./projectCard"
+import { CanvasRevealEffect } from "./projectCard/revealEffect"
 
 const colors: { [key: string]: number[][] } = {
   react: [
@@ -21,38 +17,37 @@ const colors: { [key: string]: number[][] } = {
     [86, 184, 72],
     [59, 112, 52],
   ],
-};
+}
 
 export default function DashboardProjects({
   sandboxes,
   q,
 }: {
-  sandboxes: Sandbox[];
-  q: string | null;
+  sandboxes: Sandbox[]
+  q: string | null
 }) {
-  const [deletingId, setDeletingId] = useState<string>("");
+  const [deletingId, setDeletingId] = useState<string>("")
 
   const onDelete = async (sandbox: Sandbox) => {
-    setDeletingId(sandbox.id);
-    toast(`Project ${sandbox.name} deleted.`);
-    await deleteSandbox(sandbox.id);
-  };
+    setDeletingId(sandbox.id)
+    toast(`Project ${sandbox.name} deleted.`)
+    await deleteSandbox(sandbox.id)
+  }
 
   useEffect(() => {
     if (deletingId) {
-      setDeletingId("");
+      setDeletingId("")
     }
-  }, [sandboxes]);
+  }, [sandboxes])
 
   const onVisibilityChange = async (sandbox: Sandbox) => {
-    const newVisibility =
-      sandbox.visibility === "public" ? "private" : "public";
-    toast(`Project ${sandbox.name} is now ${newVisibility}.`);
+    const newVisibility = sandbox.visibility === "public" ? "private" : "public"
+    toast(`Project ${sandbox.name} is now ${newVisibility}.`)
     await updateSandbox({
       id: sandbox.id,
       visibility: newVisibility,
-    });
-  };
+    })
+  }
 
   return (
     <div className="grow p-4 flex flex-col">
@@ -65,7 +60,7 @@ export default function DashboardProjects({
             {sandboxes.map((sandbox) => {
               if (q && q.length > 0) {
                 if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
-                  return null;
+                  return null
                 }
               }
               return (
@@ -93,7 +88,7 @@ export default function DashboardProjects({
                     <div className="absolute inset-0 [mask-image:radial-gradient(400px_at_center,white,transparent)] bg-background/75" />
                   </ProjectCard>
                 </Link>
-              );
+              )
             })}
           </div>
         ) : (
@@ -103,5 +98,5 @@ export default function DashboardProjects({
         )}
       </div>
     </div>
-  );
+  )
 }

frontend/components/dashboard/shared.tsx

@@ -1,29 +1,29 @@
-import { Sandbox } from "@/lib/types";
 import {
   Table,
   TableBody,
-  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
-import Image from "next/image";
-import Button from "../ui/customButton";
-import { ChevronRight } from "lucide-react";
-import Avatar from "../ui/avatar";
-import Link from "next/link";
+} from "@/components/ui/table"
+import { ChevronRight } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import Avatar from "../ui/avatar"
+import Button from "../ui/customButton"
+import { projectTemplates } from "@/lib/data"
 
 export default function DashboardSharedWithMe({
   shared,
 }: {
   shared: {
-    id: string;
-    name: string;
-    type: "react" | "node";
-    author: string;
-    sharedOn: Date;
-  }[];
+    id: string
+    name: string
+    type: string
+    author: string
+    authorAvatarUrl: string
+    sharedOn: Date
+  }[]
 }) {
   return (
     <div className="grow p-4 flex flex-col">
@@ -47,9 +47,7 @@ export default function DashboardSharedWithMe({
                       <Image
                         alt=""
                         src={
-                          sandbox.type === "react"
-                            ? "/project-icons/react.svg"
-                            : "/project-icons/node.svg"
+                          projectTemplates.find((p) => p.id === sandbox.type)?.icon ?? "/project-icons/node.svg"
                         }
                         width={20}
                         height={20}
@@ -60,7 +58,11 @@ export default function DashboardSharedWithMe({
                   </TableCell>
                   <TableCell>
                     <div className="flex items-center">
-                      <Avatar name={sandbox.author} className="mr-2" />
+                      <Avatar 
+                        name={sandbox.author}
+                        avatarUrl={sandbox.authorAvatarUrl}
+                        className="mr-2"
+                      />
                       {sandbox.author}
                     </div>
                   </TableCell>
@@ -86,5 +88,5 @@ export default function DashboardSharedWithMe({
         </div>
       )}
     </div>
-  );
+  )
 }

frontend/components/editor/AIChat/ChatInput.tsx

@@ -1,36 +1,239 @@
-import React from 'react';
-import { Button } from '../../ui/button';
-import { Send, StopCircle } from 'lucide-react';
+import { Send, StopCircle, Image as ImageIcon, Paperclip } from "lucide-react"
+import { Button } from "../../ui/button"
+import { useEffect } from "react"
+import { TFile, TFolder } from "@/lib/types"
+import { ALLOWED_FILE_TYPES } from "./types"
+import { looksLikeCode } from "./lib/chatUtils"
+import { ChatInputProps } from "./types"
 
-interface ChatInputProps {
-  input: string;
-  setInput: (input: string) => void;
-  isGenerating: boolean;
-  handleSend: () => void;
-  handleStopGeneration: () => void;
-}
+export default function ChatInput({
+  input,
+  setInput,
+  isGenerating,
+  handleSend,
+  handleStopGeneration,
+  onImageUpload,
+  addContextTab,
+  activeFileName,
+  editorRef,
+  lastCopiedRangeRef,
+  contextTabs,
+  onRemoveTab,
+  textareaRef,
+}: ChatInputProps) {
+
+  // Auto-resize textarea as content changes
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'
+    }
+  }, [input])
+
+  // Handle keyboard events for sending messages
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      if (e.ctrlKey) {
+        e.preventDefault()
+        handleSend(true) // Send with full context
+      } else if (!e.shiftKey && !isGenerating) {
+        e.preventDefault()
+        handleSend(false)
+      }
+    } else if (e.key === "Backspace" && input === "" && contextTabs.length > 0) {
+      e.preventDefault()
+      // Remove the last context tab
+      const lastTab = contextTabs[contextTabs.length - 1]
+      onRemoveTab(lastTab.id)
+    }
+  }
+
+  // Handle paste events for image and code
+  const handlePaste = async (e: React.ClipboardEvent) => {
+    // Handle image paste
+    const items = Array.from(e.clipboardData.items);
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault();
+        
+        const file = item.getAsFile();
+        if (!file) continue;
+
+        try {
+          // Convert image to base64 string for context tab title and timestamp
+          const reader = new FileReader();
+          reader.onload = () => {
+            const base64String = reader.result as string;
+            addContextTab(
+              "image",
+              `Image ${new Date().toLocaleTimeString('en-US', {
+                hour12: true,
+                hour: '2-digit',
+                minute: '2-digit'
+              }).replace(/(\d{2}):(\d{2})/, '$1:$2')}`,
+              base64String
+            );
+          };
+          reader.readAsDataURL(file);
+        } catch (error) {
+          console.error('Error processing pasted image:', error);
+        }
+        return;
+      }
+    }
+    
+    // Get text from clipboard 
+    const text = e.clipboardData.getData('text');
+
+    // If text doesn't contain newlines or doesn't look like code, let it paste normally
+    if (!text || !text.includes('\n') || !looksLikeCode(text)) {
+      return;
+    }
+
+    e.preventDefault();
+    const editor = editorRef.current;
+    const currentSelection = editor?.getSelection();
+    const lines = text.split('\n');
+
+    // TODO: FIX THIS: even when i paste the outside code, it shows the active file name,it works when no tabs are open, just does not work when the tab is open
+    
+    // If selection exists in editor, use file name and line numbers
+    if (currentSelection && !currentSelection.isEmpty()) {
+      addContextTab(
+        "code",
+        `${activeFileName} (${currentSelection.startLineNumber}-${currentSelection.endLineNumber})`,
+        text,
+        { start: currentSelection.startLineNumber, end: currentSelection.endLineNumber }
+      );
+      return;
+    }
+    
+    // If we have stored line range from a copy operation in the editor
+    if (lastCopiedRangeRef.current) {
+      const range = lastCopiedRangeRef.current;
+      addContextTab(
+        "code",
+        `${activeFileName} (${range.startLine}-${range.endLine})`,
+        text,
+        { start: range.startLine, end: range.endLine }
+      );
+      return;
+    }
+    
+    // For code pasted from outside the editor
+    addContextTab(
+      "code",
+      `Pasted Code (1-${lines.length})`,
+      text,
+      { start: 1, end: lines.length }
+    );
+  };
+
+  // Handle image upload from local machine via input
+  const handleImageUpload = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = 'image/*'
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (file) onImageUpload(file)
+    }
+    input.click()
+  }
+
+  // Helper function to flatten the file tree
+  const getAllFiles = (items: (TFile | TFolder)[]): TFile[] => {
+    return items.reduce((acc: TFile[], item) => {
+      if (item.type === "file") {
+        acc.push(item)
+      } else {
+        acc.push(...getAllFiles(item.children))
+      }
+      return acc
+    }, [])
+  }
+
+  // Handle file upload from local machine via input
+  const handleFileUpload = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.txt,.md,.csv,.json,.js,.ts,.html,.css,.pdf'
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (file) {
+        if (!(file.type in ALLOWED_FILE_TYPES)) {
+          alert('Unsupported file type. Please upload text, code, or PDF files.')
+          return
+        }
+
+        const reader = new FileReader()
+        reader.onload = () => {
+          addContextTab("file", file.name, reader.result as string)
+        }
+        reader.readAsText(file)
+      }
+    }
+    input.click()
+  }
 
-export default function ChatInput({ input, setInput, isGenerating, handleSend, handleStopGeneration }: ChatInputProps) {
   return (
-    <div className="flex space-x-2 min-w-0">
-      <input 
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyPress={(e) => e.key === 'Enter' && !isGenerating && handleSend()}
-        className="flex-grow p-2 border rounded-lg min-w-0 bg-input"
-        placeholder="Type your message..."
-        disabled={isGenerating}
-      />
-      {isGenerating ? (
-        <Button onClick={handleStopGeneration} variant="destructive" size="icon" className="h-10 w-10">
-          <StopCircle className="w-4 h-4" />
+    <div className="space-y-2">
+      <div className="flex space-x-2 min-w-0">
+        <textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          className="flex-grow p-2 border rounded-lg min-w-0 bg-input resize-none overflow-hidden"
+          placeholder="Type your message..."
+          disabled={isGenerating}
+          rows={1}
+        />
+        {/* Render stop generation button */}
+        {isGenerating ? (
+          <Button
+            onClick={handleStopGeneration}
+            variant="destructive"
+            size="icon"
+            className="h-10 w-10"
+          >
+            <StopCircle className="w-4 h-4" />
+          </Button>
+        ) : (
+          <Button
+            onClick={() => handleSend(false)}
+            disabled={isGenerating}
+            size="icon"
+            className="h-10 w-10"
+          >
+            <Send className="w-4 h-4" />
+          </Button>
+        )}
+      </div>
+      <div className="flex items-center justify-end gap-2">
+        {/* Render file upload button */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 px-2 sm:px-3"
+          onClick={handleFileUpload}
+        >
+          <Paperclip className="h-3 w-3 sm:mr-1" />
+          <span className="hidden sm:inline">File</span>
         </Button>
-      ) : (
-        <Button onClick={handleSend} disabled={isGenerating} size="icon" className="h-10 w-10">
-          <Send className="w-4 h-4" />
+        {/* Render image upload button */}
+        <Button 
+          variant="ghost" 
+          size="sm"
+            className="h-6 px-2 sm:px-3"
+            onClick={handleImageUpload}
+          >
+            <ImageIcon className="h-3 w-3 sm:mr-1" />
+          <span className="hidden sm:inline">Image</span>
         </Button>
-      )}
+      </div>
     </div>
-  );
+  )
 }
+

frontend/components/editor/AIChat/ChatMessage.tsx

@@ -1,26 +1,29 @@
-import React, { useState } from 'react';
-import { Button } from '../../ui/button';
-import { ChevronUp, ChevronDown, Copy, Check, CornerUpLeft } from 'lucide-react';
-import ReactMarkdown from 'react-markdown';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import remarkGfm from 'remark-gfm';
-import { copyToClipboard, stringifyContent } from './lib/chatUtils';
+import { Check, Copy, CornerUpLeft } from "lucide-react"
+import React, { useState } from "react"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import { Button } from "../../ui/button"
+import { copyToClipboard, stringifyContent } from "./lib/chatUtils"
+import ContextTabs from "./ContextTabs"
+import { createMarkdownComponents } from './lib/markdownComponents'
+import { MessageProps } from "./types"
 
-interface MessageProps {
-  message: {
-    role: 'user' | 'assistant';
-    content: string;
-    context?: string;
-  };
-  setContext: (context: string | null) => void;
-  setIsContextExpanded: (isExpanded: boolean) => void;
-}
+export default function ChatMessage({
+  message,
+  setContext,
+  setIsContextExpanded,
+  socket,
+}: MessageProps) {
 
-export default function ChatMessage({ message, setContext, setIsContextExpanded }: MessageProps) {
-  const [expandedMessageIndex, setExpandedMessageIndex] = useState<number | null>(null);
-  const [copiedText, setCopiedText] = useState<string | null>(null);
+  // State for expanded message index
+  const [expandedMessageIndex, setExpandedMessageIndex] = useState<
+    number | null
+  >(null)
 
+  // State for copied text
+  const [copiedText, setCopiedText] = useState<string | null>(null)
+
+  // Render copy button for text content 
   const renderCopyButton = (text: any) => (
     <Button
       onClick={() => copyToClipboard(stringifyContent(text), setCopiedText)}
@@ -34,17 +37,41 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
         <Copy className="w-4 h-4" />
       )}
     </Button>
-  );
+  )
 
+  // Set context for code when asking about code
   const askAboutCode = (code: any) => {
-    const contextString = stringifyContent(code);
-    setContext(`Regarding this code:\n${contextString}`);
-    setIsContextExpanded(false);
-  };
+    const contextString = stringifyContent(code)
+    const newContext = `Regarding this code:\n${contextString}`
+    
+    // Format timestamp to match chat message format (HH:MM PM)
+    const timestamp = new Date().toLocaleTimeString('en-US', {
+      hour12: true,
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+    
+    // Instead of replacing context, append to it
+    if (message.role === "assistant") {
+      // For assistant messages, create a new context tab with the response content and timestamp
+      setContext(newContext, `AI Response (${timestamp})`, {
+        start: 1,
+        end: contextString.split('\n').length
+      })
+    } else {
+      // For user messages, create a new context tab with the selected content and timestamp
+      setContext(newContext, `User Chat (${timestamp})`, {
+        start: 1,
+        end: contextString.split('\n').length
+      })
+    }
+    setIsContextExpanded(false)
+  }
 
+  // Render markdown elements for code and text
   const renderMarkdownElement = (props: any) => {
-    const { node, children } = props;
-    const content = stringifyContent(children);
+    const { node, children } = props
+    const content = stringifyContent(children)
 
     return (
       <div className="relative group">
@@ -59,23 +86,94 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
             <CornerUpLeft className="w-4 h-4" />
           </Button>
         </div>
-        {React.createElement(node.tagName, {
-          ...props,
-          className: `${props.className || ''} hover:bg-transparent rounded p-1 transition-colors`
-        }, children)}
+        {/* Render markdown element */}
+        {React.createElement(
+          node.tagName,
+          {
+            ...props,
+            className: `${
+              props.className || ""
+            } hover:bg-transparent rounded p-1 transition-colors`,
+          },
+          children
+        )}
       </div>
-    );
-  };
+    )
+  }
+
+  // Create markdown components
+  const components = createMarkdownComponents(
+    renderCopyButton,
+    renderMarkdownElement,
+    askAboutCode
+  )
 
   return (
     <div className="text-left relative">
-      <div className={`relative p-2 rounded-lg ${
-        message.role === 'user' 
-          ? 'bg-[#262626] text-white' 
-          : 'bg-transparent text-white'
-        } max-w-full`}>
-        {message.role === 'user' && (
-          <div className="absolute top-0 right-0 flex opacity-0 group-hover:opacity-30 transition-opacity">
+      <div
+        className={`relative p-2 rounded-lg ${
+          message.role === "user"
+            ? "bg-[#262626] text-white"
+            : "bg-transparent text-white"
+        } max-w-full`}
+      >
+        {/* Render context tabs */}
+        {message.role === "user" && message.context && (
+          <div className="mb-2 bg-input rounded-lg">
+            <ContextTabs
+              socket={socket}
+              activeFileName=""
+              onAddFile={() => {}}
+              contextTabs={parseContextToTabs(message.context)}
+              onRemoveTab={() => {}}
+              isExpanded={expandedMessageIndex === 0}
+              onToggleExpand={() => setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)}
+              className="[&_div:first-child>div:first-child>div]:bg-[#0D0D0D] [&_button:first-child]:hidden [&_button:last-child]:hidden"
+            />
+            {expandedMessageIndex === 0 && (
+              <div className="relative">
+                <div className="absolute top-0 right-0 flex p-1">
+                  {renderCopyButton(
+                    message.context.replace(/^Regarding this code:\n/, "")
+                  )}
+                </div>
+                {/* Render code textarea */}
+                {(() => {
+                  const code = message.context.replace(
+                    /^Regarding this code:\n/,
+                    ""
+                  )
+                  const match = /language-(\w+)/.exec(code)
+                  const language = match ? match[1] : "typescript"
+                  return (
+                    <div className="pt-6">
+                      <textarea
+                        value={code}
+                        onChange={(e) => {
+                          const updatedContext = `Regarding this code:\n${e.target.value}`
+                          setContext(updatedContext, "Selected Content", {
+                            start: 1,
+                            end: e.target.value.split('\n').length
+                          })
+                        }}
+                        className="w-full p-2 bg-[#1e1e1e] text-white font-mono text-sm rounded"
+                        rows={code.split("\n").length}
+                        style={{
+                          resize: "vertical",
+                          minHeight: "100px",
+                          maxHeight: "400px",
+                        }}
+                      />
+                    </div>
+                  )
+                })()}
+              </div>
+            )}
+          </div>
+        )}
+        {/* Render copy and ask about code buttons */}
+        {message.role === "user" && (
+          <div className="absolute top-0 right-0 p-1 flex opacity-40">
             {renderCopyButton(message.content)}
             <Button
               onClick={() => askAboutCode(message.content)}
@@ -87,115 +185,42 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
             </Button>
           </div>
         )}
-        {message.context && (
-          <div className="mb-2 bg-input rounded-lg">
-            <div 
-              className="flex justify-between items-center cursor-pointer"
-              onClick={() => setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)}
-            >
-              <span className="text-sm text-gray-300">
-                Context 
-              </span>
-              {expandedMessageIndex === 0 ? (
-                <ChevronUp size={16} />
-              ) : (
-                <ChevronDown size={16} />
-              )}
-            </div>
-            {expandedMessageIndex === 0 && (
-              <div className="relative">
-                <div className="absolute top-0 right-0 flex p-1">
-                  {renderCopyButton(message.context.replace(/^Regarding this code:\n/, ''))}
-                </div>
-                {(() => {
-                  const code = message.context.replace(/^Regarding this code:\n/, '');
-                  const match = /language-(\w+)/.exec(code);
-                  const language = match ? match[1] : 'typescript';
-                  return (
-                    <div className="pt-6">
-                      <textarea
-                        value={code}
-                        onChange={(e) => {
-                          const updatedContext = `Regarding this code:\n${e.target.value}`;
-                          setContext(updatedContext);
-                        }}
-                        className="w-full p-2 bg-[#1e1e1e] text-white font-mono text-sm rounded"
-                        rows={code.split('\n').length}
-                        style={{
-                          resize: 'vertical',
-                          minHeight: '100px',
-                          maxHeight: '400px',
-                        }}
-                      />
-                    </div>
-                  );
-                })()}
-              </div>
-            )}
-          </div>
-        )}
-        {message.role === 'assistant' ? (
+        {/* Render markdown content */}
+        {message.role === "assistant" ? (
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
-            components={{
-              code({node, className, children, ...props}) {
-                const match = /language-(\w+)/.exec(className || '');
-                return match ? (
-                  <div className="relative border border-input rounded-md my-4">
-                    <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
-                      {match[1]}
-                    </div>
-                    <div className="absolute top-0 right-0 flex">
-                      {renderCopyButton(children)}
-                      <Button
-                        onClick={() => askAboutCode(children)}
-                        size="sm"
-                        variant="ghost"
-                        className="p-1 h-6"
-                      >
-                        <CornerUpLeft className="w-4 h-4" />
-                      </Button>
-                    </div>
-                    <div className="pt-6">
-                      <SyntaxHighlighter
-                        style={vscDarkPlus as any}
-                        language={match[1]}
-                        PreTag="div"
-                        customStyle={{
-                          margin: 0,
-                          padding: '0.5rem',
-                          fontSize: '0.875rem',
-                        }}
-                      >
-                        {stringifyContent(children)}
-                      </SyntaxHighlighter>
-                    </div>
-                  </div>
-                ) : (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                );
-              },
-              p: renderMarkdownElement,
-              h1: renderMarkdownElement,
-              h2: renderMarkdownElement,
-              h3: renderMarkdownElement,
-              h4: renderMarkdownElement,
-              h5: renderMarkdownElement,
-              h6: renderMarkdownElement,
-              ul: (props) => <ul className="list-disc pl-6 mb-4 space-y-2">{props.children}</ul>,
-              ol: (props) => <ol className="list-decimal pl-6 mb-4 space-y-2">{props.children}</ol>,
-            }}
+            components={components}
           >
             {message.content}
           </ReactMarkdown>
         ) : (
-          <div className="whitespace-pre-wrap group">
-            {message.content}
-          </div>
+          <div className="whitespace-pre-wrap group">{message.content}</div>
         )}
       </div>
     </div>
-  );
+  )
+}
+
+// Parse context to tabs for context tabs component 
+function parseContextToTabs(context: string) {
+  const sections = context.split(/(?=File |Code from )/)
+  return sections.map((section, index) => {
+    const lines = section.trim().split('\n')
+    const titleLine = lines[0]
+    let content = lines.slice(1).join('\n').trim()
+    
+    // Remove code block markers for display
+    content = content.replace(/^```[\w-]*\n/, '').replace(/\n```$/, '')
+    
+    // Determine if the context is a file or code
+    const isFile = titleLine.startsWith('File ')
+    const name = titleLine.replace(/^(File |Code from )/, '').replace(':', '')
+    
+    return {
+      id: `context-${index}`,
+      type: isFile ? "file" as const : "code" as const,
+      name: name,
+      content: content
+    }
+  }).filter(tab => tab.content.length > 0)
 }

frontend/components/editor/AIChat/ContextDisplay.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { ChevronUp, ChevronDown, X } from 'lucide-react';
-
-interface ContextDisplayProps {
-  context: string | null;
-  isContextExpanded: boolean;
-  setIsContextExpanded: (isExpanded: boolean) => void;
-  setContext: (context: string | null) => void;
-}
-
-export default function ContextDisplay({ context, isContextExpanded, setIsContextExpanded, setContext }: ContextDisplayProps) {
-  if (!context) return null;
-
-  return (
-    <div className="mb-2 bg-input p-2 rounded-lg">
-      <div className="flex justify-between items-center">
-        <div 
-          className="flex-grow cursor-pointer" 
-          onClick={() => setIsContextExpanded(!isContextExpanded)}
-        >
-          <span className="text-sm text-gray-300">
-            Context
-          </span>
-        </div>
-        <div className="flex items-center">
-          {isContextExpanded ? (
-            <ChevronUp size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(false)} />
-          ) : (
-            <ChevronDown size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(true)} />
-          )}
-          <X 
-            size={16} 
-            className="ml-2 cursor-pointer text-gray-400 hover:text-gray-200" 
-            onClick={() => setContext(null)}
-          />
-        </div>
-      </div>
-      {isContextExpanded && (
-        <textarea
-          value={context.replace(/^Regarding this code:\n/, '')}
-          onChange={(e) => setContext(`Regarding this code:\n${e.target.value}`)}
-          className="w-full mt-2 p-2 bg-#1e1e1e text-white rounded"
-          rows={5}
-        />
-      )}
-    </div>
-  );
-}

frontend/components/editor/AIChat/ContextTabs.tsx

@@ -0,0 +1,172 @@
+import { Plus, X, Image as ImageIcon, FileText } from "lucide-react"
+import { useState } from "react"
+import { Button } from "../../ui/button"
+import { TFile, TFolder } from "@/lib/types"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Input } from "@/components/ui/input"
+import { ContextTab } from "./types"
+import { ContextTabsProps } from "./types"
+// Ignore certain folders and files from the file tree 
+import { ignoredFiles, ignoredFolders } from "./lib/ignored-paths"
+
+export default function ContextTabs({
+  contextTabs,
+  onRemoveTab,
+  className,
+  files = [],
+  onFileSelect,
+}: ContextTabsProps & { className?: string }) {
+
+  // State for preview tab
+  const [previewTab, setPreviewTab] = useState<ContextTab | null>(null)
+  const [searchQuery, setSearchQuery] = useState("")
+
+  // Allow preview for images and code selections from editor
+  const togglePreview = (tab: ContextTab) => {
+    if (!tab.lineRange && tab.type !== "image") {
+      return;
+    }
+    
+    // Toggle preview for images and code selections from editor
+    if (previewTab?.id === tab.id) {
+      setPreviewTab(null)
+    } else {
+      setPreviewTab(tab)
+    }
+  }
+
+  // Remove tab from context when clicking on X
+  const handleRemoveTab = (id: string) => {
+    if (previewTab?.id === id) {
+      setPreviewTab(null)
+    }
+    onRemoveTab(id)
+  }
+
+  // Get all files from the file tree to search for context
+  const getAllFiles = (items: (TFile | TFolder)[]): TFile[] => {
+    return items.reduce((acc: TFile[], item) => {
+      // Add file if it's not ignored 
+      if (item.type === "file" && !ignoredFiles.some((pattern: string) => 
+        item.name.endsWith(pattern.replace('*', '')) || item.name === pattern
+      )) {
+        acc.push(item)
+      // Add all files from folder if it's not ignored 
+      } else if (item.type === "folder" && !ignoredFolders.some((folder: string) => folder === item.name)) {
+        acc.push(...getAllFiles(item.children))
+      }
+      return acc
+    }, [])
+  }
+
+  // Get all files from the file tree to search for context when adding context
+  const allFiles = getAllFiles(files)
+  const filteredFiles = allFiles.filter(file => 
+    file.name.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  return (
+    <div className={`border-none ${className || ''}`}>
+      <div className="flex flex-col">
+        <div className="flex items-center gap-1 overflow-hidden mb-2 flex-wrap">
+          {/* Add context tab button */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </PopoverTrigger>
+            {/* Add context tab popover */}
+            <PopoverContent className="w-64 p-2">
+              <div className="flex gap-2 mb-2">
+                <Input
+                  placeholder="Search files..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="flex-1"
+                />
+              </div>
+              <div className="max-h-[200px] overflow-y-auto">
+                {filteredFiles.map((file) => (
+                  <Button
+                    key={file.id}
+                    variant="ghost"
+                    className="w-full justify-start text-sm mb-1"
+                    onClick={() => onFileSelect?.(file)}
+                  >
+                    <FileText className="h-4 w-4 mr-2" />
+                    {file.name}
+                  </Button>
+                ))}
+              </div>
+            </PopoverContent>
+          </Popover>
+          {/* Add context tab button */}
+          {contextTabs.length === 0 && (
+            <div className="flex items-center gap-1 px-2 rounded">
+              <span className="text-sm text-muted-foreground">Add Context</span>
+            </div>
+          )}
+          {/* Render context tabs */}
+          {contextTabs.map((tab) => (
+            <div
+              key={tab.id}
+              className="flex items-center gap-1 px-2 bg-input rounded text-sm cursor-pointer hover:bg-muted"
+              onClick={() => togglePreview(tab)}
+            >
+              {tab.type === "image" && <ImageIcon className="h-3 w-3" />}
+              <span>{tab.name}</span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-4 w-4"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleRemoveTab(tab.id)
+                }}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        {/* Preview Section */}
+        {previewTab && (
+          <div className="p-2 bg-input rounded-md max-h-[200px] overflow-auto mb-2">
+            {previewTab.type === "image" ? (
+              <img 
+                src={previewTab.content} 
+                alt={previewTab.name}
+                className="max-w-full h-auto"
+              />
+            ) : previewTab.lineRange && (
+              <>
+                <div className="text-xs text-muted-foreground mt-1">
+                  Lines {previewTab.lineRange.start}-{previewTab.lineRange.end}
+                </div>
+                <pre className="text-xs font-mono whitespace-pre-wrap">
+                  {previewTab.content}
+                </pre>
+              </>
+            )}
+            {/* Render file context tab */}
+            {previewTab.type === "file" && (
+              <pre className="text-xs font-mono whitespace-pre-wrap">
+                {previewTab.content}
+              </pre>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/components/editor/AIChat/index.tsx

@@ -1,48 +1,146 @@
-import React, { useState, useEffect, useRef } from 'react';
-import LoadingDots from '../../ui/LoadingDots';
-import ChatMessage from './ChatMessage';
-import ChatInput from './ChatInput';
-import ContextDisplay from './ContextDisplay';
-import { handleSend, handleStopGeneration } from './lib/chatUtils';
-import { X } from 'lucide-react';
+import { X } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import LoadingDots from "../../ui/LoadingDots"
+import ChatInput from "./ChatInput"
+import ChatMessage from "./ChatMessage"
+import ContextTabs from "./ContextTabs"
+import { handleSend, handleStopGeneration } from "./lib/chatUtils"
+import { nanoid } from 'nanoid'
+import { TFile } from "@/lib/types"
+import { useSocket } from "@/context/SocketContext"
+import { Message, ContextTab, AIChatProps } from './types'
 
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-  context?: string;
-}
+export default function AIChat({
+  activeFileContent,
+  activeFileName,
+  onClose,
+  editorRef,
+  lastCopiedRangeRef,
+  files,
+}: AIChatProps) {
+  // Initialize socket and messages
+  const { socket } = useSocket()
+  const [messages, setMessages] = useState<Message[]>([])
 
-export default function AIChat({ activeFileContent, activeFileName, onClose }: { activeFileContent: string, activeFileName: string, onClose: () => void }) {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [input, setInput] = useState('');
-  const [isGenerating, setIsGenerating] = useState(false);
-  const chatContainerRef = useRef<HTMLDivElement>(null);
-  const abortControllerRef = useRef<AbortController | null>(null);
-  const [context, setContext] = useState<string | null>(null);
-  const [isContextExpanded, setIsContextExpanded] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+  // Initialize input and state for generating messages
+  const [input, setInput] = useState("")
+  const [isGenerating, setIsGenerating] = useState(false)
 
+  // Initialize chat container ref and abort controller ref
+  const chatContainerRef = useRef<HTMLDivElement>(null)
+  const abortControllerRef = useRef<AbortController | null>(null)
+
+  // Initialize context tabs and state for expanding context
+  const [contextTabs, setContextTabs] = useState<ContextTab[]>([])
+  const [isContextExpanded, setIsContextExpanded] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  // Initialize textarea ref
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // Scroll to bottom of chat when messages change
   useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
+    scrollToBottom()
+  }, [messages])
 
+  // Scroll to bottom of chat when messages change
   const scrollToBottom = () => {
     if (chatContainerRef.current) {
       setTimeout(() => {
         chatContainerRef.current?.scrollTo({
           top: chatContainerRef.current.scrollHeight,
-          behavior: 'smooth'
-        });
-      }, 100);
+          behavior: "smooth",
+        })
+      }, 100)
     }
-  };
+  }
+
+  // Add context tab to context tabs
+  const addContextTab = (type: string, name: string, content: string, lineRange?: { start: number; end: number }) => {
+    const newTab = {
+      id: nanoid(),
+      type: type as "file" | "code" | "image",
+      name,
+      content,
+      lineRange
+    }
+    setContextTabs(prev => [...prev, newTab])
+  }
+
+  // Remove context tab from context tabs
+  const removeContextTab = (id: string) => {
+    setContextTabs(prev => prev.filter(tab => tab.id !== id))
+  }
+
+  // Add file to context tabs
+  const handleAddFile = (tab: ContextTab) => {
+    setContextTabs(prev => [...prev, tab])
+  }
+
+  // Format code content to remove starting and ending code block markers if they exist
+  const formatCodeContent = (content: string) => {
+    return content.replace(/^```[\w-]*\n/, '').replace(/\n```$/, '')
+  }
+
+  // Get combined context from context tabs
+  const getCombinedContext = () => {
+    if (contextTabs.length === 0) return ''
+    
+    return contextTabs.map(tab => {
+      if (tab.type === 'file') {
+        const fileExt = tab.name.split('.').pop() || 'txt'
+        const cleanContent = formatCodeContent(tab.content)
+        return `File ${tab.name}:\n\`\`\`${fileExt}\n${cleanContent}\n\`\`\``
+      } else if (tab.type === 'code') {
+        const cleanContent = formatCodeContent(tab.content)
+        return `Code from ${tab.name}:\n\`\`\`typescript\n${cleanContent}\n\`\`\``
+      }
+      return `${tab.name}:\n${tab.content}`
+    }).join('\n\n')
+  }
+
+  // Handle sending message with context
+  const handleSendWithContext = () => {
+    const combinedContext = getCombinedContext()
+    handleSend(
+      input,
+      combinedContext,
+      messages,
+      setMessages,
+      setInput,
+      setIsContextExpanded,
+      setIsGenerating,
+      setIsLoading,
+      abortControllerRef,
+      activeFileContent
+    )
+    // Clear context tabs after sending
+    setContextTabs([])
+  }
+
+  // Set context for the chat
+  const setContext = (
+    context: string | null, 
+    name: string, 
+    range?: { start: number, end: number }
+  ) => {
+    if (!context) {
+      setContextTabs([])
+      return
+    }
+
+    // Always add a new tab instead of updating existing ones
+    addContextTab('code', name, context, range)
+  }
 
   return (
     <div className="flex flex-col h-screen w-full">
       <div className="flex justify-between items-center p-2 border-b">
         <span className="text-muted-foreground/50 font-medium">CHAT</span>
         <div className="flex items-center h-full">
-          <span className="text-muted-foreground/50 font-medium">{activeFileName}</span>
+          <span className="text-muted-foreground/50 font-medium">
+            {activeFileName}
+          </span>
           <div className="mx-2 h-full w-px bg-muted-foreground/20"></div>
           <button
             onClick={onClose}
@@ -53,32 +151,72 @@ export default function AIChat({ activeFileContent, activeFileName, onClose }: {
           </button>
         </div>
       </div>
-      <div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4">
+      <div
+        ref={chatContainerRef}
+        className="flex-grow overflow-y-auto p-4 space-y-4"
+      >
         {messages.map((message, messageIndex) => (
-          <ChatMessage 
-            key={messageIndex} 
-            message={message} 
+          // Render chat message component for each message 
+          <ChatMessage
+            key={messageIndex}
+            message={message}
             setContext={setContext}
             setIsContextExpanded={setIsContextExpanded}
+            socket={socket}
           />
         ))}
         {isLoading && <LoadingDots />}
       </div>
       <div className="p-4 border-t mb-14">
-        <ContextDisplay 
-          context={context} 
-          isContextExpanded={isContextExpanded}
-          setIsContextExpanded={setIsContextExpanded}
-          setContext={setContext}
+        {/* Render context tabs component */}
+        <ContextTabs
+          activeFileName={activeFileName}
+          onAddFile={handleAddFile}
+          contextTabs={contextTabs}
+          onRemoveTab={removeContextTab}
+          isExpanded={isContextExpanded}
+          onToggleExpand={() => setIsContextExpanded(!isContextExpanded)}
+          files={files}
+          socket={socket}
+          onFileSelect={(file: TFile) => {
+            socket?.emit("getFile", { fileId: file.id }, (response: string) => {
+              const fileExt = file.name.split('.').pop() || 'txt'
+              const formattedContent = `\`\`\`${fileExt}\n${response}\n\`\`\``
+              addContextTab('file', file.name, formattedContent)
+              if (textareaRef.current) {
+                textareaRef.current.focus()
+              }
+            })
+          }}
         />
-        <ChatInput 
+        {/* Render chat input component */}
+        <ChatInput
+          textareaRef={textareaRef}
+          addContextTab={addContextTab}
+          editorRef={editorRef}
           input={input}
           setInput={setInput}
           isGenerating={isGenerating}
-          handleSend={() => handleSend(input, context, messages, setMessages, setInput, setIsContextExpanded, setIsGenerating, setIsLoading, abortControllerRef, activeFileContent)}
+          handleSend={handleSendWithContext}
           handleStopGeneration={() => handleStopGeneration(abortControllerRef)}
+          onImageUpload={(file) => {
+            const reader = new FileReader()
+            reader.onload = (e) => {
+              if (e.target?.result) {
+                addContextTab("image", file.name, e.target.result as string)
+              }
+            }
+            reader.readAsDataURL(file)
+          }}
+          lastCopiedRangeRef={lastCopiedRangeRef}
+          activeFileName={activeFileName}
+          contextTabs={contextTabs.map(tab => ({
+            ...tab,
+            title: tab.id 
+          }))}
+          onRemoveTab={removeContextTab}
         />
       </div>
     </div>
-  );
+  )
 }

frontend/components/editor/AIChat/lib/chatUtils.ts

@@ -1,59 +1,84 @@
-import React from 'react';
+import React from "react"
 
-export const stringifyContent = (content: any, seen = new WeakSet()): string => {
-  if (typeof content === 'string') {
-    return content;
+// Stringify content for chat message component 
+export const stringifyContent = (
+  content: any,
+  seen = new WeakSet()
+): string => {
+  // Stringify content if it's a string
+  if (typeof content === "string") {
+    return content
   }
+  // Stringify content if it's null
   if (content === null) {
-    return 'null';
+    return "null"
   }
+  // Stringify content if it's undefined
   if (content === undefined) {
-    return 'undefined';
+    return "undefined"
   }
-  if (typeof content === 'number' || typeof content === 'boolean') {
-    return content.toString();
+  // Stringify content if it's a number or boolean
+  if (typeof content === "number" || typeof content === "boolean") {
+    return content.toString()
   }
-  if (typeof content === 'function') {
-    return content.toString();
+  // Stringify content if it's a function
+  if (typeof content === "function") {
+    return content.toString()
   }
-  if (typeof content === 'symbol') {
-    return content.toString();
+  // Stringify content if it's a symbol
+  if (typeof content === "symbol") {
+    return content.toString()
   }
-  if (typeof content === 'bigint') {
-    return content.toString() + 'n';
+  // Stringify content if it's a bigint
+  if (typeof content === "bigint") {
+    return content.toString() + "n"
   }
+  // Stringify content if it's a valid React element
   if (React.isValidElement(content)) {
-    return React.Children.toArray((content as React.ReactElement).props.children)
-      .map(child => stringifyContent(child, seen))
-      .join('');
+    return React.Children.toArray(
+      (content as React.ReactElement).props.children
+    )
+      .map((child) => stringifyContent(child, seen))
+      .join("")
   }
+  // Stringify content if it's an array
   if (Array.isArray(content)) {
-    return '[' + content.map(item => stringifyContent(item, seen)).join(', ') + ']';
+    return (
+      "[" + content.map((item) => stringifyContent(item, seen)).join(", ") + "]"
+    )
   }
-  if (typeof content === 'object') {
+  // Stringify content if it's an object
+  if (typeof content === "object") {
     if (seen.has(content)) {
-      return '[Circular]';
+      return "[Circular]"
     }
-    seen.add(content);
+    seen.add(content)
     try {
       const pairs = Object.entries(content).map(
         ([key, value]) => `${key}: ${stringifyContent(value, seen)}`
-      );
-      return '{' + pairs.join(', ') + '}';
+      )
+      return "{" + pairs.join(", ") + "}"
     } catch (error) {
-      return Object.prototype.toString.call(content);
+      return Object.prototype.toString.call(content)
     }
   }
-  return String(content);
-};
+  // Stringify content if it's a primitive value
+  return String(content)
+}
 
-export const copyToClipboard = (text: string, setCopiedText: (text: string | null) => void) => {
+// Copy to clipboard for chat message component  
+export const copyToClipboard = (
+  text: string,
+  setCopiedText: (text: string | null) => void
+) => {
+  // Copy text to clipboard for chat message component 
   navigator.clipboard.writeText(text).then(() => {
-    setCopiedText(text);
-    setTimeout(() => setCopiedText(null), 2000);
-  });
-};
+    setCopiedText(text)
+    setTimeout(() => setCopiedText(null), 2000)
+  })
+}
 
+// Handle send for chat message component  
 export const handleSend = async (
   input: string,
   context: string | null,
@@ -66,97 +91,145 @@ export const handleSend = async (
   abortControllerRef: React.MutableRefObject<AbortController | null>,
   activeFileContent: string
 ) => {
-  if (input.trim() === '' && !context) return;
+  // Return if input is empty and context is null
+  if (input.trim() === "" && !context) return 
 
-  const newMessage = { 
-    role: 'user' as const, 
+  // Get timestamp for chat message component 
+  const timestamp = new Date().toLocaleTimeString('en-US', {
+    hour12: true,
+    hour: '2-digit',
+    minute: '2-digit'
+  }).replace(/(\d{2}):(\d{2})/, '$1:$2')
+
+  // Create user message for chat message component 
+  const userMessage = {
+    role: "user" as const,
     content: input,
-    context: context || undefined
-  };
-  const updatedMessages = [...messages, newMessage];
-  setMessages(updatedMessages);
-  setInput('');
-  setIsContextExpanded(false);
-  setIsGenerating(true);
-  setIsLoading(true);
+    context: context || undefined,
+    timestamp: timestamp
+  }
 
-  abortControllerRef.current = new AbortController();
+  // Update messages for chat message component 
+  const updatedMessages = [...messages, userMessage]
+  setMessages(updatedMessages)
+  setInput("")
+  setIsContextExpanded(false)
+  setIsGenerating(true)
+  setIsLoading(true)
+
+  abortControllerRef.current = new AbortController()
 
   try {
-    const anthropicMessages = updatedMessages.map(msg => ({
-      role: msg.role === 'user' ? 'human' : 'assistant',
-      content: msg.content
-    }));
+    // Create anthropic messages for chat message component 
+    const anthropicMessages = updatedMessages.map((msg) => ({
+      role: msg.role === "user" ? "human" : "assistant",
+      content: msg.content,
+    }))
 
-    const response = await fetch(`${process.env.NEXT_PUBLIC_AI_WORKER_URL}/api`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        messages: anthropicMessages,
-        context: context || undefined,
-        activeFileContent: activeFileContent,
-      }),
-      signal: abortControllerRef.current.signal,
-    });
+    // Fetch AI response for chat message component 
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_AI_WORKER_URL}/api`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          messages: anthropicMessages,
+          context: context || undefined,
+          activeFileContent: activeFileContent,
+        }),
+        signal: abortControllerRef.current.signal,
+      }
+    )
 
+    // Throw error if response is not ok
     if (!response.ok) {
-      throw new Error('Failed to get AI response');
+      throw new Error("Failed to get AI response")
     }
 
-    const reader = response.body?.getReader();
-    const decoder = new TextDecoder();
-    const assistantMessage = { role: 'assistant' as const, content: '' };
-    setMessages([...updatedMessages, assistantMessage]);
-    setIsLoading(false);
+    // Get reader for chat message component 
+    const reader = response.body?.getReader()
+    const decoder = new TextDecoder()
+    const assistantMessage = { role: "assistant" as const, content: "" }
+    setMessages([...updatedMessages, assistantMessage])
+    setIsLoading(false)
 
-    let buffer = '';
-    const updateInterval = 100;
-    let lastUpdateTime = Date.now();
+    // Initialize buffer for chat message component 
+    let buffer = ""
+    const updateInterval = 100
+    let lastUpdateTime = Date.now()
 
+    // Read response from reader for chat message component 
     if (reader) {
       while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
+        const { done, value } = await reader.read()
+        if (done) break
+        buffer += decoder.decode(value, { stream: true })
 
-        const currentTime = Date.now();
+        const currentTime = Date.now()
         if (currentTime - lastUpdateTime > updateInterval) {
-          setMessages(prev => {
-            const updatedMessages = [...prev];
-            const lastMessage = updatedMessages[updatedMessages.length - 1];
-            lastMessage.content = buffer;
-            return updatedMessages;
-          });
-          lastUpdateTime = currentTime;
+          setMessages((prev) => {
+            const updatedMessages = [...prev]
+            const lastMessage = updatedMessages[updatedMessages.length - 1]
+            lastMessage.content = buffer
+            return updatedMessages
+          })
+          lastUpdateTime = currentTime
         }
       }
 
-      setMessages(prev => {
-        const updatedMessages = [...prev];
-        const lastMessage = updatedMessages[updatedMessages.length - 1];
-        lastMessage.content = buffer;
-        return updatedMessages;
-      });
+      // Update messages for chat message component 
+      setMessages((prev) => {
+        const updatedMessages = [...prev]
+        const lastMessage = updatedMessages[updatedMessages.length - 1]
+        lastMessage.content = buffer
+        return updatedMessages
+      })
     }
   } catch (error: any) {
-    if (error.name === 'AbortError') {
-      console.log('Generation aborted');
+    // Handle abort error for chat message component 
+    if (error.name === "AbortError") {
+      console.log("Generation aborted")
     } else {
-      console.error('Error fetching AI response:', error);
-      const errorMessage = { role: 'assistant' as const, content: 'Sorry, I encountered an error. Please try again.' };
-      setMessages(prev => [...prev, errorMessage]);
+      console.error("Error fetching AI response:", error)
+      const errorMessage = {
+        role: "assistant" as const,
+        content: "Sorry, I encountered an error. Please try again.",
+      }
+      setMessages((prev) => [...prev, errorMessage])
     }
   } finally {
-    setIsGenerating(false);
-    setIsLoading(false);
-    abortControllerRef.current = null;
+    setIsGenerating(false)
+    setIsLoading(false)
+    abortControllerRef.current = null
   }
-};
+}
 
-export const handleStopGeneration = (abortControllerRef: React.MutableRefObject<AbortController | null>) => {
+// Handle stop generation for chat message component 
+export const handleStopGeneration = (
+  abortControllerRef: React.MutableRefObject<AbortController | null>
+) => {
   if (abortControllerRef.current) {
-    abortControllerRef.current.abort();
+    abortControllerRef.current.abort()
   }
+}
+
+// Check if text looks like code for chat message component 
+export const looksLikeCode = (text: string): boolean => {
+  const codeIndicators = [
+    /^import\s+/m,          // import statements
+    /^function\s+/m,        // function declarations
+    /^class\s+/m,           // class declarations
+    /^const\s+/m,           // const declarations
+    /^let\s+/m,             // let declarations
+    /^var\s+/m,             // var declarations
+    /[{}\[\]();]/,          // common code syntax
+    /^\s*\/\//m,            // comments
+    /^\s*\/\*/m,            // multi-line comments
+    /=>/,                   // arrow functions
+    /^export\s+/m,          // export statements
+  ];
+
+  return codeIndicators.some(pattern => pattern.test(text));
 };

frontend/components/editor/AIChat/lib/ignored-paths.ts

@@ -0,0 +1,102 @@
+// Ignore certain folders and files from the file tree 
+
+export const ignoredFolders = [
+    // Package managers
+    'node_modules',
+    'venv',
+    '.env',
+    'env',
+    '.venv',
+    'virtualenv',
+    'pip-wheel-metadata',
+    
+    // Build outputs
+    '.next',
+    'dist',
+    'build',
+    'out',
+    '__pycache__',
+    '.webpack',
+    '.serverless',
+    'storybook-static',
+    
+    // Version control
+    '.git',
+    '.svn',
+    '.hg',  // Mercurial
+    
+    // Cache and temp files
+    '.cache',
+    'coverage',
+    'tmp',
+    '.temp',
+    '.npm',
+    '.pnpm',
+    '.yarn',
+    '.eslintcache',
+    '.stylelintcache',
+    
+    // IDE specific
+    '.idea',
+    '.vscode',
+    '.vs',
+    '.sublime',
+    
+    // Framework specific
+    '.streamlit',
+    '.next',
+    'static',
+    '.pytest_cache',
+    '.nuxt',
+    '.docusaurus',
+    '.remix',
+    '.parcel-cache',
+    'public/build',  // Remix/Rails
+    '.turbo',        // Turborepo
+    
+    // Logs
+    'logs',
+    '*.log',
+    'npm-debug.log*',
+    'yarn-debug.log*',
+    'yarn-error.log*',
+    'pnpm-debug.log*',
+  ] as const;
+  
+  export const ignoredFiles = [
+    '.DS_Store',
+    '.env.local',
+    '.env.development',
+    '.env.production',
+    '.env.test',
+    '.env*.local',
+    '.gitignore',
+    '.npmrc',
+    '.yarnrc',
+    '.editorconfig',
+    '.prettierrc',
+    '.eslintrc',
+    '.browserslistrc',
+    'tsconfig.tsbuildinfo',
+    '*.pyc',
+    '*.pyo',
+    '*.pyd',
+    '*.so',
+    '*.dll',
+    '*.dylib',
+    '*.class',
+    '*.exe',
+    'package-lock.json',
+    'yarn.lock',
+    'pnpm-lock.yaml',
+    'composer.lock',
+    'poetry.lock',
+    'Gemfile.lock',
+    '*.min.js',
+    '*.min.css',
+    '*.map',
+    '*.chunk.*',
+    '*.hot-update.*',
+    '.vercel',
+    '.netlify'
+  ] as const;

frontend/components/editor/AIChat/lib/markdownComponents.tsx

@@ -0,0 +1,79 @@
+import { Components } from "react-markdown"
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
+import { Button } from "../../../ui/button"
+import { CornerUpLeft } from "lucide-react"
+import { stringifyContent } from "./chatUtils"
+
+// Create markdown components for chat message component 
+export const createMarkdownComponents = (
+  renderCopyButton: (text: any) => JSX.Element,
+  renderMarkdownElement: (props: any) => JSX.Element,
+  askAboutCode: (code: any) => void
+): Components => ({
+  code: ({ node, className, children, ...props }: {
+    node?: import('hast').Element,
+    className?: string,
+    children?: React.ReactNode,
+    [key: string]: any,
+  }) => {
+    const match = /language-(\w+)/.exec(className || "")
+
+    return match ? (
+      <div className="relative border border-input rounded-md my-4">
+        <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
+          {match[1]}
+        </div>
+        <div className="absolute top-0 right-0 flex">
+          {renderCopyButton(children)}
+          <Button
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              askAboutCode(children)
+            }}
+            size="sm"
+            variant="ghost"
+            className="p-1 h-6"
+          >
+            <CornerUpLeft className="w-4 h-4" />
+          </Button>
+        </div>
+        <div className="pt-6">
+          <SyntaxHighlighter
+            style={vscDarkPlus as any}
+            language={match[1]}
+            PreTag="div"
+            customStyle={{
+              margin: 0,
+              padding: "0.5rem",
+              fontSize: "0.875rem",
+            }}
+          >
+            {stringifyContent(children)}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    ) : (
+      <code className={className} {...props}>{children}</code>
+    )
+  },
+  // Render markdown elements 
+  p: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h1: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h2: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h3: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h4: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h5: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  h6: ({ node, children, ...props }) => renderMarkdownElement({ node, children, ...props }),
+  ul: (props) => (
+    <ul className="list-disc pl-6 mb-4 space-y-2">
+      {props.children}
+    </ul>
+  ),
+  ol: (props) => (
+    <ol className="list-decimal pl-6 mb-4 space-y-2">
+      {props.children}
+    </ol>
+  ),
+})

frontend/components/editor/AIChat/types/index.ts

@@ -0,0 +1,93 @@
+import * as monaco from 'monaco-editor'
+import { TFile, TFolder } from "@/lib/types"
+import { Socket } from 'socket.io-client';
+
+// Allowed file types for context tabs
+export const ALLOWED_FILE_TYPES = {
+  // Text files
+  'text/plain': true,
+  'text/markdown': true,
+  'text/csv': true,
+  // Code files
+  'application/json': true,
+  'text/javascript': true,
+  'text/typescript': true,
+  'text/html': true,
+  'text/css': true,
+  // Documents
+  'application/pdf': true,
+  // Images
+  'image/jpeg': true,
+  'image/png': true,
+  'image/gif': true,
+  'image/webp': true,
+  'image/svg+xml': true,
+} as const;
+
+// Message interface
+export interface Message {
+  role: "user" | "assistant"
+  content: string
+  context?: string
+}
+
+// Context tab interface
+export interface ContextTab {
+  id: string
+  type: "file" | "code" | "image"
+  name: string
+  content: string
+  lineRange?: { start: number; end: number }
+}
+
+// AIChat props interface
+export interface AIChatProps {
+  activeFileContent: string
+  activeFileName: string
+  onClose: () => void
+  editorRef: React.MutableRefObject<monaco.editor.IStandaloneCodeEditor | undefined>
+  lastCopiedRangeRef: React.MutableRefObject<{ startLine: number; endLine: number } | null>
+  files: (TFile | TFolder)[]
+}
+
+// Chat input props interface
+export interface ChatInputProps {
+  input: string
+  setInput: (input: string) => void
+  isGenerating: boolean
+  handleSend: (useFullContext?: boolean) => void
+  handleStopGeneration: () => void
+  onImageUpload: (file: File) => void
+  addContextTab: (type: string, title: string, content: string, lineRange?: { start: number, end: number }) => void
+  activeFileName?: string
+  editorRef: React.MutableRefObject<monaco.editor.IStandaloneCodeEditor | undefined>
+  lastCopiedRangeRef: React.MutableRefObject<{ startLine: number; endLine: number } | null>
+  contextTabs: { id: string; type: string; title: string; content: string; lineRange?: { start: number; end: number } }[]
+  onRemoveTab: (id: string) => void
+  textareaRef: React.RefObject<HTMLTextAreaElement>
+}
+
+// Chat message props interface
+export interface MessageProps {
+  message: {
+    role: "user" | "assistant"
+    content: string
+    context?: string
+  }
+  setContext: (context: string | null, name: string, range?: { start: number, end: number }) => void
+  setIsContextExpanded: (isExpanded: boolean) => void
+  socket: Socket | null
+}
+
+// Context tabs props interface
+export interface ContextTabsProps {
+  activeFileName: string
+  onAddFile: (tab: ContextTab) => void
+  contextTabs: ContextTab[]
+  onRemoveTab: (id: string) => void
+  isExpanded: boolean
+  onToggleExpand: () => void
+  files?: (TFile | TFolder)[]
+  onFileSelect?: (file: TFile) => void
+  socket: Socket | null
+}

frontend/components/editor/generate.tsx

@@ -1,13 +1,13 @@
 "use client"
 
-import { useCallback, useEffect, useRef, useState } from "react"
-import { Button } from "../ui/button"
-import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react"
-import { Socket } from "socket.io-client"
-import { Editor } from "@monaco-editor/react"
 import { User } from "@/lib/types"
-import { toast } from "sonner"
+import { Editor } from "@monaco-editor/react"
+import { Check, Loader2, RotateCw, Sparkles, X } from "lucide-react"
 import { usePathname, useRouter } from "next/navigation"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Socket } from "socket.io-client"
+import { toast } from "sonner"
+import { Button } from "../ui/button"
 // import monaco from "monaco-editor"
 
 export default function GenerateInput({
@@ -68,10 +68,12 @@ export default function GenerateInput({
     setCurrentPrompt(input)
     socket.emit(
       "generateCode",
-      data.fileName,
-      data.code,
-      data.line,
-      regenerate ? currentPrompt : input,
+      {
+        fileName: data.fileName,
+        code: data.code,
+        line: data.line,
+        instructions: regenerate ? currentPrompt : input
+      },
       (res: { response: string; success: boolean }) => {
         console.log("Generated code", res.response, res.success)
         // if (!res.success) {

frontend/components/editor/index.tsx

@@ -1,43 +1,57 @@
 "use client"
 
-import { SetStateAction, useCallback, useEffect, useRef, useState } from "react"
-import * as monaco from "monaco-editor"
-import Editor, { BeforeMount, OnMount } from "@monaco-editor/react"
-import { toast } from "sonner"
 import { useClerk } from "@clerk/nextjs"
+import Editor, { BeforeMount, OnMount } from "@monaco-editor/react"
 import { AnimatePresence, motion } from "framer-motion"
+import * as monaco from "monaco-editor"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
 
-import * as Y from "yjs"
-import LiveblocksProvider from "@liveblocks/yjs"
-import { MonacoBinding } from "y-monaco"
-import { Awareness } from "y-protocols/awareness"
-import { TypedLiveblocksProvider, useRoom, useSelf } from "@/liveblocks.config"
+// import { TypedLiveblocksProvider, useRoom, useSelf } from "@/liveblocks.config"
+// import LiveblocksProvider from "@liveblocks/yjs"
+// import { MonacoBinding } from "y-monaco"
+// import { Awareness } from "y-protocols/awareness"
+// import * as Y from "yjs"
 
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { FileJson, Loader2, Sparkles, TerminalSquare, ArrowDownToLine, ArrowRightToLine } from "lucide-react"
-import Tab from "../ui/tab"
-import Sidebar from "./sidebar"
-import GenerateInput from "./generate"
-import { Sandbox, User, TFile, TFolder, TTab } from "@/lib/types"
-import { addNew, processFileType, validateName, debounce } from "@/lib/utils"
-import { Cursors } from "./live/cursors"
+import { PreviewProvider, usePreview } from "@/context/PreviewContext"
+import { useSocket } from "@/context/SocketContext"
+import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig"
+import { Sandbox, TFile, TFolder, TTab, User } from "@/lib/types"
+import {
+  addNew,
+  cn,
+  debounce,
+  deepMerge,
+  processFileType,
+  validateName,
+} from "@/lib/utils"
 import { Terminal } from "@xterm/xterm"
+import {
+  ArrowDownToLine,
+  ArrowRightToLine,
+  FileJson,
+  Loader2,
+  Sparkles,
+  TerminalSquare,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import React from "react"
+import { ImperativePanelHandle } from "react-resizable-panels"
+import { Button } from "../ui/button"
+import Tab from "../ui/tab"
+import AIChat from "./AIChat"
+import GenerateInput from "./generate"
+// import { Cursors } from "./live/cursors"
 import DisableAccessModal from "./live/disableModal"
 import Loading from "./loading"
 import PreviewWindow from "./preview"
+import Sidebar from "./sidebar"
 import Terminals from "./terminals"
-import { ImperativePanelHandle } from "react-resizable-panels"
-import { PreviewProvider, usePreview } from "@/context/PreviewContext"
-import { useSocket } from "@/context/SocketContext"
-import { Button } from "../ui/button"
-import React from "react"
-import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig"
-import { deepMerge } from "@/lib/utils"
-import AIChat from "./AIChat"
 
 export default function CodeEditor({
   userData,
@@ -48,7 +62,8 @@ export default function CodeEditor({
 }) {
   //SocketContext functions and effects
   const { socket, setUserAndSandboxId } = useSocket()
-
+  // theme
+  const { theme } = useTheme()
   useEffect(() => {
     // Ensure userData.id and sandboxData.id are available before attempting to connect
     if (userData.id && sandboxData.id) {
@@ -63,9 +78,9 @@ export default function CodeEditor({
   // This heartbeat is critical to preventing the E2B sandbox from timing out
   useEffect(() => {
     // 10000 ms = 10 seconds
-    const interval = setInterval(() => socket?.emit("heartbeat"), 10000);
-    return () => clearInterval(interval);
-  }, [socket]);
+    const interval = setInterval(() => socket?.emit("heartbeat"), 10000)
+    return () => clearInterval(interval)
+  }, [socket])
 
   //Preview Button state
   const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
@@ -75,11 +90,11 @@ export default function CodeEditor({
   })
 
   // Layout state
-  const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
-  const [previousLayout, setPreviousLayout] = useState(false);
+  const [isHorizontalLayout, setIsHorizontalLayout] = useState(false)
+  const [previousLayout, setPreviousLayout] = useState(false)
 
   // AI Chat state
-  const [isAIChatOpen, setIsAIChatOpen] = useState(false);
+  const [isAIChatOpen, setIsAIChatOpen] = useState(false)
 
   // File state
   const [files, setFiles] = useState<(TFolder | TFile)[]>([])
@@ -88,7 +103,7 @@ export default function CodeEditor({
   const [activeFileContent, setActiveFileContent] = useState("")
   const [deletingFolderId, setDeletingFolderId] = useState("")
   // Added this state to track the most recent content for each file
-  const [fileContents, setFileContents] = useState<Record<string, string>>({});
+  const [fileContents, setFileContents] = useState<Record<string, string>>({})
 
   // Editor state
   const [editorLanguage, setEditorLanguage] = useState("plaintext")
@@ -132,20 +147,20 @@ export default function CodeEditor({
   const isOwner = sandboxData.userId === userData.id
   const clerk = useClerk()
 
-  // Liveblocks hooks
-  const room = useRoom()
-  const [provider, setProvider] = useState<TypedLiveblocksProvider>()
-  const userInfo = useSelf((me) => me.info)
+  // // Liveblocks hooks
+  // const room = useRoom()
+  // const [provider, setProvider] = useState<TypedLiveblocksProvider>()
+  // const userInfo = useSelf((me) => me.info)
 
-  // Liveblocks providers map to prevent reinitializing providers
-  type ProviderData = {
-    provider: LiveblocksProvider<never, never, never, never>
-    yDoc: Y.Doc
-    yText: Y.Text
-    binding?: MonacoBinding
-    onSync: (isSynced: boolean) => void
-  }
-  const providersMap = useRef(new Map<string, ProviderData>())
+  // // Liveblocks providers map to prevent reinitializing providers
+  // type ProviderData = {
+  //   provider: LiveblocksProvider<never, never, never, never>
+  //   yDoc: Y.Doc
+  //   yText: Y.Text
+  //   binding?: MonacoBinding
+  //   onSync: (isSynced: boolean) => void
+  // }
+  // const providersMap = useRef(new Map<string, ProviderData>())
 
   // Refs for libraries / features
   const editorContainerRef = useRef<HTMLDivElement>(null)
@@ -153,10 +168,13 @@ export default function CodeEditor({
   const generateRef = useRef<HTMLDivElement>(null)
   const suggestionRef = useRef<HTMLDivElement>(null)
   const generateWidgetRef = useRef<HTMLDivElement>(null)
-  const { previewPanelRef } = usePreview();
+  const { previewPanelRef } = usePreview()
   const editorPanelRef = useRef<ImperativePanelHandle>(null)
   const previewWindowRef = useRef<{ refreshIframe: () => void }>(null)
 
+  // Ref to store the last copied range in the editor to be used in the AIChat component
+  const lastCopiedRangeRef = useRef<{ startLine: number; endLine: number } | null>(null);
+
   const debouncedSetIsSelected = useRef(
     debounce((value: boolean) => {
       setIsSelected(value)
@@ -191,7 +209,7 @@ export default function CodeEditor({
     )
     const fetchFileContent = (fileId: string): Promise<string> => {
       return new Promise((resolve) => {
-        socket?.emit("getFile", fileId, (content: string) => {
+        socket?.emit("getFile", { fileId }, (content: string) => {
           resolve(content)
         })
       })
@@ -203,7 +221,6 @@ export default function CodeEditor({
       let mergedConfig: any = { compilerOptions: {} }
 
       for (const file of tsconfigFiles) {
-        const containerId = file.id.split("/").slice(0, 2).join("/")
         const content = await fetchFileContent(file.id)
 
         try {
@@ -213,8 +230,7 @@ export default function CodeEditor({
           if (tsConfig.references) {
             for (const ref of tsConfig.references) {
               const path = ref.path.replace("./", "")
-              const fileId = `${containerId}/${path}`
-              const refContent = await fetchFileContent(fileId)
+              const refContent = await fetchFileContent(path)
               const referenceTsConfig = JSON.parse(refContent)
 
               // Merge configurations
@@ -241,6 +257,17 @@ export default function CodeEditor({
           updatedOptions
         )
       }
+
+      // Store the last copied range in the editor to be used in the AIChat component
+      editor.onDidChangeCursorSelection((e) => {
+        const selection = editor.getSelection();
+        if (selection) {
+          lastCopiedRangeRef.current = {
+            startLine: selection.startLineNumber,
+            endLine: selection.endLineNumber
+          };
+        }
+      });
     }
 
     // Call the function with your file structure
@@ -470,16 +497,17 @@ export default function CodeEditor({
     const model = editorRef?.getModel()
     // added this because it was giving client side exception - Illegal value for lineNumber when opening an empty file
     if (model) {
-      const totalLines = model.getLineCount();
+      const totalLines = model.getLineCount()
       // Check if the cursorLine is a valid number, If cursorLine is out of bounds, we fall back to 1 (the first line) as a default safe value.
-      const lineNumber = cursorLine > 0 && cursorLine <= totalLines ? cursorLine : 1; // fallback to a valid line number
+      const lineNumber =
+        cursorLine > 0 && cursorLine <= totalLines ? cursorLine : 1 // fallback to a valid line number
       // If for some reason the content doesn't exist, we use an empty string as a fallback.
-      const line = model.getLineContent(lineNumber) ?? "";
+      const line = model.getLineContent(lineNumber) ?? ""
       // Check if the line is not empty or only whitespace (i.e., `.trim()` removes spaces).
       // If the line has content, we clear any decorations using the instance of the `decorations` object.
       // Decorations refer to editor highlights, underlines, or markers, so this clears those if conditions are met.
       if (line.trim() !== "") {
-        decorations.instance?.clear();
+        decorations.instance?.clear()
         return
       }
     }
@@ -505,122 +533,120 @@ export default function CodeEditor({
     debounce((activeFileId: string | undefined) => {
       if (activeFileId) {
         // Get the current content of the file
-        const content = fileContents[activeFileId];
+        const content = fileContents[activeFileId]
 
         // Mark the file as saved in the tabs
         setTabs((prev) =>
           prev.map((tab) =>
             tab.id === activeFileId ? { ...tab, saved: true } : tab
           )
-        );
-        console.log(`Saving file...${activeFileId}`);
-        console.log(`Saving file...${content}`);
-        socket?.emit("saveFile", activeFileId, content);
+        )
+        socket?.emit("saveFile", { fileId: activeFileId, body: content })
       }
     }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
     [socket, fileContents]
-  );
+  )
 
   // Keydown event listener to trigger file save on Ctrl+S or Cmd+S, and toggle AI chat on Ctrl+L or Cmd+L
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
-        debouncedSaveData(activeFileId);
+        debouncedSaveData(activeFileId)
       } else if (e.key === "l" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
-        setIsAIChatOpen(prev => !prev);
+        setIsAIChatOpen((prev) => !prev)
       }
-    };
+    }
 
-    document.addEventListener("keydown", down);
+    document.addEventListener("keydown", down)
 
     // Added this line to prevent Monaco editor from handling Cmd/Ctrl+L
     editorRef?.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyL, () => {
-      setIsAIChatOpen(prev => !prev);
-    });
+      setIsAIChatOpen((prev) => !prev)
+    })
 
     return () => {
       document.removeEventListener("keydown", down)
     }
   }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen, editorRef])
 
-  // Liveblocks live collaboration setup effect
-  useEffect(() => {
-    const tab = tabs.find((t) => t.id === activeFileId)
-    const model = editorRef?.getModel()
+  // // Liveblocks live collaboration setup effect
+  // useEffect(() => {
+  //   const tab = tabs.find((t) => t.id === activeFileId)
+  //   const model = editorRef?.getModel()
 
-    if (!editorRef || !tab || !model) return
+  //   if (!editorRef || !tab || !model) return
 
-    let providerData: ProviderData
+  //   let providerData: ProviderData
 
-    // When a file is opened for the first time, create a new provider and store in providersMap.
-    if (!providersMap.current.has(tab.id)) {
-      const yDoc = new Y.Doc()
-      const yText = yDoc.getText(tab.id)
-      const yProvider = new LiveblocksProvider(room, yDoc)
+  //   // When a file is opened for the first time, create a new provider and store in providersMap.
+  //   if (!providersMap.current.has(tab.id)) {
+  //     const yDoc = new Y.Doc()
+  //     const yText = yDoc.getText(tab.id)
+  //     const yProvider = new LiveblocksProvider(room, yDoc)
 
-      // Inserts the file content into the editor once when the tab is changed.
-      const onSync = (isSynced: boolean) => {
-        if (isSynced) {
-          const text = yText.toString()
-          if (text === "") {
-            if (activeFileContent) {
-              yText.insert(0, activeFileContent)
-            } else {
-              setTimeout(() => {
-                yText.insert(0, editorRef.getValue())
-              }, 0)
-            }
-          }
-        }
-      }
+  //     // Inserts the file content into the editor once when the tab is changed.
+  //     const onSync = (isSynced: boolean) => {
+  //       if (isSynced) {
+  //         const text = yText.toString()
+  //         if (text === "") {
+  //           if (activeFileContent) {
+  //             yText.insert(0, activeFileContent)
+  //           } else {
+  //             setTimeout(() => {
+  //               yText.insert(0, editorRef.getValue())
+  //             }, 0)
+  //           }
+  //         }
+  //       }
+  //     }
 
-      yProvider.on("sync", onSync)
+  //     yProvider.on("sync", onSync)
 
-      // Save the provider to the map.
-      providerData = { provider: yProvider, yDoc, yText, onSync }
-      providersMap.current.set(tab.id, providerData)
-    } else {
-      // When a tab is opened that has been open before, reuse the existing provider.
-      providerData = providersMap.current.get(tab.id)!
-    }
+  //     // Save the provider to the map.
+  //     providerData = { provider: yProvider, yDoc, yText, onSync }
+  //     providersMap.current.set(tab.id, providerData)
+  //   } else {
+  //     // When a tab is opened that has been open before, reuse the existing provider.
+  //     providerData = providersMap.current.get(tab.id)!
+  //   }
 
-    const binding = new MonacoBinding(
-      providerData.yText,
-      model,
-      new Set([editorRef]),
-      providerData.provider.awareness as unknown as Awareness
-    )
+  //   const binding = new MonacoBinding(
+  //     providerData.yText,
+  //     model,
+  //     new Set([editorRef]),
+  //     providerData.provider.awareness as unknown as Awareness
+  //   )
 
-    providerData.binding = binding
-    setProvider(providerData.provider)
+  //   providerData.binding = binding
+  //   setProvider(providerData.provider)
 
-    return () => {
-      // Cleanup logic
-      if (binding) {
-        binding.destroy()
-      }
-      if (providerData.binding) {
-        providerData.binding = undefined
-      }
-    }
-  }, [room, activeFileContent])
+  //   return () => {
+  //     // Cleanup logic
+  //     if (binding) {
+  //       binding.destroy()
+  //     }
+  //     if (providerData.binding) {
+  //       providerData.binding = undefined
+  //     }
+  //   }
+  // }, [room, activeFileContent])
 
-  // Added this effect to clean up when the component unmounts
-  useEffect(() => {
-    return () => {
-      // Clean up all providers when the component unmounts
-      providersMap.current.forEach((data) => {
-        if (data.binding) {
-          data.binding.destroy()
-        }
-        data.provider.disconnect()
-        data.yDoc.destroy()
-      })
-      providersMap.current.clear()
-    }
-  }, [])
+  // // Added this effect to clean up when the component unmounts
+  // useEffect(() => {
+  //   return () => {
+  //     // Clean up all providers when the component unmounts
+  //     providersMap.current.forEach((data) => {
+  //       if (data.binding) {
+  //         data.binding.destroy()
+  //       }
+  //       data.provider.disconnect()
+  //       data.yDoc.destroy()
+  //     })
+  //     providersMap.current.clear()
+  //   }
+  // }, [])
 
   // Connection/disconnection effect
   useEffect(() => {
@@ -698,50 +724,53 @@ export default function CodeEditor({
 
   // Debounced function to get file content
   const debouncedGetFile = (tabId: any, callback: any) => {
-    socket?.emit("getFile", tabId, callback)
+    socket?.emit("getFile", { fileId: tabId }, callback)
   } // 300ms debounce delay, adjust as needed
 
   const selectFile = (tab: TTab) => {
-    if (tab.id === activeFileId) return;
+    if (tab.id === activeFileId) return
 
-    setGenerate((prev) => ({ ...prev, show: false }));
+    setGenerate((prev) => ({ ...prev, show: false }))
 
     // Check if the tab already exists in the list of open tabs
-    const exists = tabs.find((t) => t.id === tab.id);
+    const exists = tabs.find((t) => t.id === tab.id)
     setTabs((prev) => {
       if (exists) {
         // If the tab exists, make it the active tab
-        setActiveFileId(exists.id);
-        return prev;
+        setActiveFileId(exists.id)
+        return prev
       }
       // If the tab doesn't exist, add it to the list of tabs and make it active
-      return [...prev, tab];
-    });
+      return [...prev, tab]
+    })
 
     // If the file's content is already cached, set it as the active content
     if (fileContents[tab.id]) {
-      setActiveFileContent(fileContents[tab.id]);
+      setActiveFileContent(fileContents[tab.id])
     } else {
       // Otherwise, fetch the content of the file and cache it
       debouncedGetFile(tab.id, (response: string) => {
-        setFileContents(prev => ({ ...prev, [tab.id]: response }));
-        setActiveFileContent(response);
-      });
+        setFileContents((prev) => ({ ...prev, [tab.id]: response }))
+        setActiveFileContent(response)
+      })
     }
 
     // Set the editor language based on the file type
-    setEditorLanguage(processFileType(tab.name));
+    setEditorLanguage(processFileType(tab.name))
     // Set the active file ID to the new tab
-    setActiveFileId(tab.id);
-  };
+    setActiveFileId(tab.id)
+  }
 
   // Added this effect to update fileContents when the editor content changes
   useEffect(() => {
     if (activeFileId) {
       // Cache the current active file content using the file ID as the key
-      setFileContents(prev => ({ ...prev, [activeFileId]: activeFileContent }));
+      setFileContents((prev) => ({
+        ...prev,
+        [activeFileId]: activeFileContent,
+      }))
     }
-  }, [activeFileContent, activeFileId]);
+  }, [activeFileContent, activeFileId])
 
   // Close tab and remove from tabs
   const closeTab = (id: string) => {
@@ -815,7 +844,7 @@ export default function CodeEditor({
       return false
     }
 
-    socket?.emit("renameFile", id, newName)
+    socket?.emit("renameFile", { fileId: id, newName })
     setTabs((prev) =>
       prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab))
     )
@@ -824,7 +853,7 @@ export default function CodeEditor({
   }
 
   const handleDeleteFile = (file: TFile) => {
-    socket?.emit("deleteFile", file.id, (response: (TFolder | TFile)[]) => {
+    socket?.emit("deleteFile", { fileId: file.id }, (response: (TFolder | TFile)[]) => {
       setFiles(response)
     })
     closeTab(file.id)
@@ -834,11 +863,11 @@ export default function CodeEditor({
     setDeletingFolderId(folder.id)
     console.log("deleting folder", folder.id)
 
-    socket?.emit("getFolder", folder.id, (response: string[]) =>
+    socket?.emit("getFolder", { folderId: folder.id }, (response: string[]) =>
       closeTabs(response)
     )
 
-    socket?.emit("deleteFolder", folder.id, (response: (TFolder | TFile)[]) => {
+    socket?.emit("deleteFolder", { folderId: folder.id }, (response: (TFolder | TFile)[]) => {
       setFiles(response)
       setDeletingFolderId("")
     })
@@ -846,34 +875,34 @@ export default function CodeEditor({
 
   const togglePreviewPanel = () => {
     if (isPreviewCollapsed) {
-      previewPanelRef.current?.expand();
-      setIsPreviewCollapsed(false);
+      previewPanelRef.current?.expand()
+      setIsPreviewCollapsed(false)
     } else {
-      previewPanelRef.current?.collapse();
-      setIsPreviewCollapsed(true);
+      previewPanelRef.current?.collapse()
+      setIsPreviewCollapsed(true)
     }
-  };
+  }
 
   const toggleLayout = () => {
     if (!isAIChatOpen) {
-      setIsHorizontalLayout(prev => !prev);
+      setIsHorizontalLayout((prev) => !prev)
     }
-  };
+  }
 
   // Add an effect to handle layout changes when AI chat is opened/closed
   useEffect(() => {
     if (isAIChatOpen) {
-      setPreviousLayout(isHorizontalLayout);
-      setIsHorizontalLayout(true);
+      setPreviousLayout(isHorizontalLayout)
+      setIsHorizontalLayout(true)
     } else {
-      setIsHorizontalLayout(previousLayout);
+      setIsHorizontalLayout(previousLayout)
     }
-  }, [isAIChatOpen]);
+  }, [isAIChatOpen])
 
   // Modify the toggleAIChat function
   const toggleAIChat = () => {
-    setIsAIChatOpen(prev => !prev);
-  };
+    setIsAIChatOpen((prev) => !prev)
+  }
 
   // On disabled access for shared users, show un-interactable loading placeholder + info modal
   if (disableAccess.isDisabled)
@@ -910,7 +939,10 @@ export default function CodeEditor({
             )}
           </AnimatePresence>
         </div>
-        <div className="z-50 p-1" ref={generateWidgetRef}>
+        <div
+          className={cn(generate.show && "z-50 p-1")}
+          ref={generateWidgetRef}
+        >
           {generate.show ? (
             <GenerateInput
               user={userData}
@@ -1006,12 +1038,18 @@ export default function CodeEditor({
           setFiles={setFiles}
           addNew={(name, type) => addNew(name, type, setFiles, sandboxData)}
           deletingFolderId={deletingFolderId}
+          toggleAIChat={toggleAIChat}
+          isAIChatOpen={isAIChatOpen}
         />
         {/* Outer ResizablePanelGroup for main layout */}
-        <ResizablePanelGroup direction={isHorizontalLayout ? "horizontal" : "vertical"}>
+        <ResizablePanelGroup
+          direction={isHorizontalLayout ? "horizontal" : "vertical"}
+        >
           {/* Left side: Editor and Preview/Terminal */}
           <ResizablePanel defaultSize={isAIChatOpen ? 80 : 100} minSize={50}>
-            <ResizablePanelGroup direction={isHorizontalLayout ? "vertical" : "horizontal"}>
+            <ResizablePanelGroup
+              direction={isHorizontalLayout ? "vertical" : "horizontal"}
+            >
               <ResizablePanel
                 className="p-2 flex flex-col"
                 maxSize={80}
@@ -1050,9 +1088,9 @@ export default function CodeEditor({
                   ) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643
                     clerk.loaded ? (
                       <>
-                        {provider && userInfo ? (
+                        {/* {provider && userInfo ? (
                           <Cursors yProvider={provider} userInfo={userInfo} />
-                        ) : null}
+                        ) : null} */}
                         <Editor
                           height="100%"
                           language={editorLanguage}
@@ -1061,7 +1099,7 @@ export default function CodeEditor({
                           onChange={(value) => {
                             // If the new content is different from the cached content, update it
                             if (value !== fileContents[activeFileId]) {
-                              setActiveFileContent(value ?? ""); // Update the active file content
+                              setActiveFileContent(value ?? "") // Update the active file content
                               // Mark the file as unsaved by setting 'saved' to false
                               setTabs((prev) =>
                                 prev.map((tab) =>
@@ -1094,7 +1132,7 @@ export default function CodeEditor({
                             fixedOverflowWidgets: true,
                             fontFamily: "var(--font-geist-mono)",
                           }}
-                          theme="vs-dark"
+                          theme={theme === "light" ? "vs" : "vs-dark"}
                           value={activeFileContent}
                         />
                       </>
@@ -1108,18 +1146,23 @@ export default function CodeEditor({
               </ResizablePanel>
               <ResizableHandle />
               <ResizablePanel defaultSize={30}>
-                <ResizablePanelGroup direction={
-                  isAIChatOpen && isHorizontalLayout ? "horizontal" :
-                  isAIChatOpen ? "vertical" :
-                  isHorizontalLayout ? "horizontal" :
-                  "vertical"
-                }>
+                <ResizablePanelGroup
+                  direction={
+                    isAIChatOpen && isHorizontalLayout
+                      ? "horizontal"
+                      : isAIChatOpen
+                        ? "vertical"
+                        : isHorizontalLayout
+                          ? "horizontal"
+                          : "vertical"
+                  }
+                >
                   <ResizablePanel
                     ref={previewPanelRef}
                     defaultSize={isPreviewCollapsed ? 4 : 20}
                     minSize={25}
                     collapsedSize={isHorizontalLayout ? 20 : 4}
-                    className="p-2 flex flex-col"
+                    className="p-2 flex flex-col gap-2"
                     collapsible
                     onCollapse={() => setIsPreviewCollapsed(true)}
                     onExpand={() => setIsPreviewCollapsed(false)}
@@ -1131,8 +1174,12 @@ export default function CodeEditor({
                         variant="ghost"
                         className="mr-2 border"
                         disabled={isAIChatOpen}
-                        >
-                        {isHorizontalLayout ? <ArrowRightToLine className="w-4 h-4" /> : <ArrowDownToLine className="w-4 h-4" />}
+                      >
+                        {isHorizontalLayout ? (
+                          <ArrowRightToLine className="w-4 h-4" />
+                        ) : (
+                          <ArrowDownToLine className="w-4 h-4" />
+                        )}
                       </Button>
                       <PreviewWindow
                         open={togglePreviewPanel}
@@ -1175,10 +1222,16 @@ export default function CodeEditor({
             <>
               <ResizableHandle />
               <ResizablePanel defaultSize={30} minSize={15}>
-                <AIChat 
-                  activeFileContent={activeFileContent} 
-                  activeFileName={tabs.find(tab => tab.id === activeFileId)?.name || 'No file selected'}
+                <AIChat
+                  activeFileContent={activeFileContent}
+                  activeFileName={
+                    tabs.find((tab) => tab.id === activeFileId)?.name ||
+                    "No file selected"
+                  }
                   onClose={toggleAIChat}
+                  editorRef={{ current: editorRef }}
+                  lastCopiedRangeRef={lastCopiedRangeRef}
+                  files={files}
                 />
               </ResizablePanel>
             </>

frontend/components/editor/live/avatars.tsx

@@ -1,6 +1,6 @@
-"use client";
+"use client"
 
-import { useOthers } from "@/liveblocks.config";
+import { useOthers } from "@/liveblocks.config"
 
 const classNames = {
   red: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-red-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-red-950 to-red-600 flex items-center justify-center text-xs font-medium",
@@ -14,10 +14,10 @@ const classNames = {
   purple:
     "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-purple-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-purple-950 to-purple-600 flex items-center justify-center text-xs font-medium",
   pink: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-pink-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-pink-950 to-pink-600 flex items-center justify-center text-xs font-medium",
-};
+}
 
 export function Avatars() {
-  const users = useOthers();
+  const users = useOthers()
 
   return (
     <>
@@ -30,12 +30,12 @@ export function Avatars() {
                 .slice(0, 2)
                 .map((letter) => letter[0].toUpperCase())}
             </div>
-          );
+          )
         })}
       </div>
       {users.length > 0 ? (
         <div className="h-full w-[1px] bg-border mx-2" />
       ) : null}
     </>
-  );
+  )
 }

frontend/components/editor/live/cursors.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useMemo, useState } from "react"
+import { colors } from "@/lib/colors"
 import {
   AwarenessList,
   TypedLiveblocksProvider,
   UserAwareness,
-  useSelf,
 } from "@/liveblocks.config"
-import { colors } from "@/lib/colors"
+import { useEffect, useMemo, useState } from "react"
 
 export function Cursors({
   yProvider,

frontend/components/editor/live/disableModal.tsx

@@ -1,43 +1,35 @@
-"use client";
+"use client"
 
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+} from "@/components/ui/dialog"
 
-import {
-  ChevronRight,
-  FileStack,
-  Globe,
-  Loader2,
-  TextCursor,
-} from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { Loader2 } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 
 export default function DisableAccessModal({
   open,
   setOpen,
   message,
 }: {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  message: string;
+  open: boolean
+  setOpen: (open: boolean) => void
+  message: string
 }) {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
     if (open) {
       const timeout = setTimeout(() => {
-        router.push("/dashboard");
-      }, 5000);
-      return () => clearTimeout(timeout);
+        router.push("/dashboard")
+      }, 5000)
+      return () => clearTimeout(timeout)
     }
-  }, []);
+  }, [])
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -54,5 +46,5 @@ export default function DisableAccessModal({
         </div>
       </DialogContent>
     </Dialog>
-  );
+  )
 }

frontend/components/editor/live/room.tsx

@@ -1,14 +1,13 @@
-"use client";
+"use client"
 
-import { RoomProvider } from "@/liveblocks.config";
-import { ClientSideSuspense } from "@liveblocks/react";
+import { RoomProvider } from "@/liveblocks.config"
 
 export function Room({
   id,
   children,
 }: {
-  id: string;
-  children: React.ReactNode;
+  id: string
+  children: React.ReactNode
 }) {
   return (
     <RoomProvider
@@ -21,5 +20,5 @@ export function Room({
       {children}
       {/* </ClientSideSuspense> */}
     </RoomProvider>
-  );
+  )
 }

frontend/components/editor/loading/index.tsx

@@ -1,9 +1,6 @@
 "use client"
 
-import Image from "next/image"
 import Logo from "@/assets/logo.svg"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Loader2, X } from "lucide-react"
 import {
   Dialog,
   DialogContent,
@@ -11,6 +8,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Loader2, X } from "lucide-react"
+import Image from "next/image"
 import { useEffect, useState } from "react"
 
 export default function Loading({
@@ -84,8 +84,10 @@ export default function Loading({
             </div>
           </div>
           <div className="w-full mt-1 flex flex-col">
-            <div className="w-full flex justify-center">
-              <Loader2 className="w-4 h-4 animate-spin" />
+            <div className="w-full flex flex-col justify-center">
+              {new Array(6).fill(0).map((_, i) => (
+                <Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
+              ))}
             </div>
           </div>
         </div>

frontend/components/editor/navbar/deploy.tsx

@@ -1,34 +1,38 @@
-"use client";
+"use client"
 
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { useTerminal } from "@/context/TerminalContext";
-import { Play, Pause, Globe, Globe2 } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Sandbox, User } from "@/lib/types";
+import { Button } from "@/components/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { useTerminal } from "@/context/TerminalContext"
+import { Sandbox, User } from "@/lib/types"
+import { Globe } from "lucide-react"
+import { useState } from "react"
 
 export default function DeployButtonModal({
   userData,
   data,
 }: {
-  userData: User;
-  data: Sandbox;
+  userData: User
+  data: Sandbox
 }) {
-  const { deploy } = useTerminal();
-  const [isDeploying, setIsDeploying] = useState(false);
+  const { deploy } = useTerminal()
+  const [isDeploying, setIsDeploying] = useState(false)
 
   const handleDeploy = () => {
     if (isDeploying) {
-      console.log("Stopping deployment...");
-      setIsDeploying(false);
+      console.log("Stopping deployment...")
+      setIsDeploying(false)
     } else {
-      console.log("Starting deployment...");
-      setIsDeploying(true);
+      console.log("Starting deployment...")
+      setIsDeploying(true)
       deploy(() => {
-        setIsDeploying(false);
-      });
+        setIsDeploying(false)
+      })
     }
-  };
+  }
 
   return (
     <>
@@ -39,7 +43,10 @@ export default function DeployButtonModal({
             Deploy
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="p-4 w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg shadow-lg" style={{ backgroundColor: 'rgb(10,10,10)', color: 'white' }}>
+        <PopoverContent
+          className="p-4 w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg shadow-lg"
+          style={{ backgroundColor: "rgb(10,10,10)", color: "white" }}
+        >
           <h3 className="font-semibold text-gray-300 mb-2">Domains</h3>
           <div className="flex flex-col gap-4">
             <DeploymentOption
@@ -49,16 +56,30 @@ export default function DeployButtonModal({
               user={userData.name}
             />
           </div>
-          <Button variant="outline" className="mt-4 w-full bg-[#0a0a0a] text-white hover:bg-[#262626]" onClick={handleDeploy}>
-          {isDeploying ? "Deploying..." : "Update"}
+          <Button
+            variant="outline"
+            className="mt-4 w-full bg-[#0a0a0a] text-white hover:bg-[#262626]"
+            onClick={handleDeploy}
+          >
+            {isDeploying ? "Deploying..." : "Update"}
           </Button>
         </PopoverContent>
       </Popover>
     </>
-  );
+  )
 }
 
-function DeploymentOption({ icon, domain, timestamp, user }: { icon: React.ReactNode; domain: string; timestamp: string; user: string }) {
+function DeploymentOption({
+  icon,
+  domain,
+  timestamp,
+  user,
+}: {
+  icon: React.ReactNode
+  domain: string
+  timestamp: string
+  user: string
+}) {
   return (
     <div className="flex flex-col gap-2 w-full text-left p-2 rounded-md border border-gray-700 bg-gray-900">
       <div className="flex items-start gap-2 relative">
@@ -72,7 +93,9 @@ function DeploymentOption({ icon, domain, timestamp, user }: { icon: React.React
           {domain}
         </a>
       </div>
-      <p className="text-sm text-gray-400 mt-0 ml-7">{timestamp} • {user}</p>
+      <p className="text-sm text-gray-400 mt-0 ml-7">
+        {timestamp} • {user}
+      </p>
     </div>
-  );
+  )
 }

frontend/components/editor/navbar/downloadButton.tsx

@@ -0,0 +1,34 @@
+import JSZip from 'jszip'
+import { useSocket } from "@/context/SocketContext"
+import { Button } from "@/components/ui/button"
+import { Download } from "lucide-react"
+
+export default function DownloadButton({ name }: { name: string }) {
+  const { socket } = useSocket()
+
+  const handleDownload = async () => {
+    socket?.emit("downloadFiles", {}, async (response: {files: {path: string, content: string}[]}) => {
+      const zip = new JSZip()
+      
+      response.files.forEach(file => {
+        zip.file(file.path, file.content)
+      })
+      
+      const blob = await zip.generateAsync({type: "blob"})
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${name}.zip`
+      a.click()
+      window.URL.revokeObjectURL(url)
+    })
+  }
+
+
+  return (
+    <Button variant="outline" onClick={handleDownload}>
+      <Download className="w-4 h-4 mr-2" />
+      Download
+    </Button>
+  )
+}

frontend/components/editor/navbar/edit.tsx

@@ -1,60 +1,57 @@
-"use client";
+"use client"
 
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
+} from "@/components/ui/dialog"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
 
+import { Button } from "@/components/ui/button"
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Loader2 } from "lucide-react";
-import { useState } from "react";
-import { Sandbox } from "@/lib/types";
-import { Button } from "@/components/ui/button";
-import { deleteSandbox, updateSandbox } from "@/lib/actions";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+} from "@/components/ui/select"
+import { deleteSandbox, updateSandbox } from "@/lib/actions"
+import { Sandbox } from "@/lib/types"
+import { Loader2 } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+import { toast } from "sonner"
 
 const formSchema = z.object({
   name: z.string().min(1).max(16),
   visibility: z.enum(["public", "private"]),
-});
+})
 
 export default function EditSandboxModal({
   open,
   setOpen,
   data,
 }: {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  data: Sandbox;
+  open: boolean
+  setOpen: (open: boolean) => void
+  data: Sandbox
 }) {
-  const [loading, setLoading] = useState(false);
-  const [loadingDelete, setLoadingDelete] = useState(false);
+  const [loading, setLoading] = useState(false)
+  const [loadingDelete, setLoadingDelete] = useState(false)
 
-  const router = useRouter();
+  const router = useRouter()
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -62,22 +59,22 @@ export default function EditSandboxModal({
       name: data.name,
       visibility: data.visibility,
     },
-  });
+  })
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    setLoading(true);
-    await updateSandbox({ id: data.id, ...values });
+    setLoading(true)
+    await updateSandbox({ id: data.id, ...values })
 
-    toast.success("Sandbox updated successfully");
+    toast.success("Sandbox updated successfully")
 
-    setLoading(false);
+    setLoading(false)
   }
 
   async function onDelete() {
-    setLoadingDelete(true);
-    await deleteSandbox(data.id);
+    setLoadingDelete(true)
+    await deleteSandbox(data.id)
 
-    router.push("/dashboard");
+    router.push("/dashboard")
   }
 
   return (
@@ -153,5 +150,5 @@ export default function EditSandboxModal({
         </Button>
       </DialogContent>
     </Dialog>
-  );
+  )
 }

frontend/components/editor/navbar/index.tsx

@@ -1,33 +1,35 @@
-"use client";
+"use client"
 
-import Image from "next/image";
-import Logo from "@/assets/logo.svg";
-import { Pencil, Users } from "lucide-react";
-import Link from "next/link";
-import { Sandbox, User } from "@/lib/types";
-import UserButton from "@/components/ui/userButton";
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
-import EditSandboxModal from "./edit";
-import ShareSandboxModal from "./share";
-import { Avatars } from "../live/avatars";
-import RunButtonModal from "./run";
-import DeployButtonModal from "./deploy";
+import Logo from "@/assets/logo.svg"
+import { Button } from "@/components/ui/button"
+import { ThemeSwitcher } from "@/components/ui/theme-switcher"
+import UserButton from "@/components/ui/userButton"
+import { Sandbox, User } from "@/lib/types"
+import { Pencil, Users } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import { useState } from "react"
+// import { Avatars } from "../live/avatars"
+import DeployButtonModal from "./deploy"
+import EditSandboxModal from "./edit"
+import RunButtonModal from "./run"
+import ShareSandboxModal from "./share"
+import DownloadButton from "./downloadButton"
 
 export default function Navbar({
   userData,
   sandboxData,
   shared,
 }: {
-  userData: User;
-  sandboxData: Sandbox;
-  shared: { id: string; name: string }[];
+  userData: User
+  sandboxData: Sandbox
+  shared: { id: string; name: string; avatarUrl: string }[]
 }) {
-  const [isEditOpen, setIsEditOpen] = useState(false);
-  const [isShareOpen, setIsShareOpen] = useState(false);
-  const [isRunning, setIsRunning] = useState(false);
+  const [isEditOpen, setIsEditOpen] = useState(false)
+  const [isShareOpen, setIsShareOpen] = useState(false)
+  const [isRunning, setIsRunning] = useState(false)
 
-  const isOwner = sandboxData.userId === userData.id;;
+  const isOwner = sandboxData.userId === userData.id
 
   return (
     <>
@@ -68,23 +70,21 @@ export default function Navbar({
           sandboxData={sandboxData}
         />
         <div className="flex items-center h-full space-x-4">
-          <Avatars />
+          {/* <Avatars /> */}
 
           {isOwner ? (
             <>
-            <DeployButtonModal 
-            data={sandboxData}
-            userData={userData}
-            />
-            <Button variant="outline" onClick={() => setIsShareOpen(true)}>
-              <Users className="w-4 h-4 mr-2" />
-              Share
-            </Button>
-            </>
+              <DeployButtonModal data={sandboxData} userData={userData} />
+              {/* <Button variant="outline" onClick={() => setIsShareOpen(true)}>
+                <Users className="w-4 h-4 mr-2" />
+                Share
+              </Button> */}
+              <DownloadButton name={sandboxData.name} /></>
           ) : null}
+          <ThemeSwitcher />
           <UserButton userData={userData} />
         </div>
       </div>
     </>
-  );
-}
+  )
+}

frontend/components/editor/navbar/run.tsx

@@ -1,73 +1,78 @@
-"use client";
+"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";
-import { usePreview } from "@/context/PreviewContext";
-import { toast } from "sonner";
-import { Sandbox } from "@/lib/types";
+import { Button } from "@/components/ui/button"
+import { usePreview } from "@/context/PreviewContext"
+import { useTerminal } from "@/context/TerminalContext"
+import { Sandbox } from "@/lib/types"
+import { Play, StopCircle } from "lucide-react"
+import { useEffect, useRef } from "react"
+import { toast } from "sonner"
 
 export default function RunButtonModal({
   isRunning,
   setIsRunning,
   sandboxData,
 }: {
-  isRunning: boolean;
-  setIsRunning: (running: boolean) => void;
-  sandboxData: Sandbox;
+  isRunning: boolean
+  setIsRunning: (running: boolean) => void
+  sandboxData: Sandbox
 }) {
-  const { createNewTerminal, closeTerminal, terminals } = useTerminal();
-  const { setIsPreviewCollapsed, previewPanelRef } = usePreview();
+  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 lastCreatedTerminalRef = useRef<string | null>(null)
 
   // Effect to update the lastCreatedTerminalRef when a new terminal is added
   useEffect(() => {
     if (terminals.length > 0 && !isRunning) {
-      const latestTerminal = terminals[terminals.length - 1];
-      if (latestTerminal && latestTerminal.id !== lastCreatedTerminalRef.current) {
-        lastCreatedTerminalRef.current = latestTerminal.id;
+      const latestTerminal = terminals[terminals.length - 1]
+      if (
+        latestTerminal &&
+        latestTerminal.id !== lastCreatedTerminalRef.current
+      ) {
+        lastCreatedTerminalRef.current = latestTerminal.id
       }
     }
-  }, [terminals, isRunning]);
+  }, [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";
-      
+    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"
+          ? "./venv/bin/streamlit run main.py --server.runOnSave true"
+          : "npm run dev"
+
       try {
         // Create a new terminal with the appropriate command
-        await createNewTerminal(command);
-        setIsPreviewCollapsed(false);
-        previewPanelRef.current?.expand();
+        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;
+        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;
+      toast.error("You've reached the maximum number of terminals.")
+      return
     }
 
-    setIsRunning(!isRunning);
-  };
+    setIsRunning(!isRunning)
+  }
 
   return (
     <Button variant="outline" onClick={handleRun}>
-      {isRunning ? <StopCircle className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
-      {isRunning ? 'Stop' : 'Run'}
+      {isRunning ? (
+        <StopCircle className="w-4 h-4 mr-2" />
+      ) : (
+        <Play className="w-4 h-4 mr-2" />
+      )}
+      {isRunning ? "Stop" : "Run"}
     </Button>
-  );
-}
+  )
+}

frontend/components/editor/navbar/share.tsx

@@ -6,10 +6,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
-import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
+import { z } from "zod"
 
+import { Button } from "@/components/ui/button"
 import {
   Form,
   FormControl,
@@ -18,14 +19,13 @@ import {
   FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import { Link, Loader2, UserPlus, X } from "lucide-react"
-import { useState } from "react"
-import { Sandbox } from "@/lib/types"
-import { Button } from "@/components/ui/button"
 import { shareSandbox } from "@/lib/actions"
+import { Sandbox } from "@/lib/types"
+import { DialogDescription } from "@radix-ui/react-dialog"
+import { Link, Loader2, UserPlus } from "lucide-react"
+import { useState } from "react"
 import { toast } from "sonner"
 import SharedUser from "./sharedUser"
-import { DialogDescription } from "@radix-ui/react-dialog"
 
 const formSchema = z.object({
   email: z.string().email(),
@@ -43,6 +43,7 @@ export default function ShareSandboxModal({
   shared: {
     id: string
     name: string
+    avatarUrl: string
   }[]
 }) {
   const [loading, setLoading] = useState(false)
@@ -142,7 +143,11 @@ export default function ShareSandboxModal({
               </DialogHeader>
               <div className="space-y-2">
                 {shared.map((user) => (
-                  <SharedUser key={user.id} user={user} sandboxId={data.id} />
+                  <SharedUser
+                    key={user.id}
+                    user={user}
+                    sandboxId={data.id}
+                  />
                 ))}
               </div>
             </div>

frontend/components/editor/navbar/sharedUser.tsx

@@ -10,7 +10,7 @@ export default function SharedUser({
   user,
   sandboxId,
 }: {
-  user: { id: string; name: string }
+  user: { id: string; name: string; avatarUrl: string }
   sandboxId: string
 }) {
   const [loading, setLoading] = useState(false)
@@ -24,7 +24,7 @@ export default function SharedUser({
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center">
-        <Avatar name={user.name} className="mr-2" />
+        <Avatar name={user.name} avatarUrl={user.avatarUrl} className="mr-2" />
         {user.name}
       </div>
       <Button

frontend/components/editor/preview/index.tsx

@@ -1,66 +1,69 @@
 "use client"
 
+import { Link, RotateCw, UnfoldVertical } from "lucide-react"
 import {
-  Link,
-  RotateCw,
-  TerminalSquare,
-  UnfoldVertical,
-} from "lucide-react"
-import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from "react"
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react"
 import { toast } from "sonner"
 
-export default forwardRef(function PreviewWindow({
-  collapsed,
-  open,
-  src
-}: {
-  collapsed: boolean
-  open: () => void
-  src: string
-},
-ref: React.Ref<{
-  refreshIframe: () => void
-}>) {
+export default forwardRef(function PreviewWindow(
+  {
+    collapsed,
+    open,
+    src,
+  }: {
+    collapsed: boolean
+    open: () => void
+    src: string
+  },
+  ref: React.Ref<{
+    refreshIframe: () => void
+  }>
+) {
   const frameRef = useRef<HTMLIFrameElement>(null)
   const [iframeKey, setIframeKey] = useState(0)
   const refreshIframe = () => {
-    setIframeKey(prev => prev + 1)
+    setIframeKey((prev) => prev + 1)
   }
-  // Refresh the preview when the URL changes. 
+  // Refresh the preview when the URL changes.
   useEffect(refreshIframe, [src])
   // Expose refreshIframe method to the parent.
   useImperativeHandle(ref, () => ({ refreshIframe }))
 
   return (
     <>
-        <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
-          <div className="text-xs">Preview</div>
-          <div className="flex space-x-1 translate-x-1">
-            {collapsed ? (
+      <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
+        <div className="text-xs">Preview</div>
+        <div className="flex space-x-1 translate-x-1">
+          {collapsed ? (
+            <PreviewButton onClick={open}>
+              <UnfoldVertical className="w-4 h-4" />
+            </PreviewButton>
+          ) : (
+            <>
               <PreviewButton onClick={open}>
                 <UnfoldVertical className="w-4 h-4" />
               </PreviewButton>
-            ) : (
-              <>
-                <PreviewButton onClick={open}>
-                  <UnfoldVertical className="w-4 h-4" />
-                </PreviewButton>
 
-                <PreviewButton
-                  onClick={() => {
-                    navigator.clipboard.writeText(src)
-                    toast.info("Copied preview link to clipboard")
-                  }}
-                >
-                  <Link className="w-4 h-4" />
-                </PreviewButton>
-                <PreviewButton onClick={refreshIframe}>
-                  <RotateCw className="w-3 h-3" />
-                </PreviewButton>
-              </>
-            )}
-          </div>
+              <PreviewButton
+                onClick={() => {
+                  navigator.clipboard.writeText(src)
+                  toast.info("Copied preview link to clipboard")
+                }}
+              >
+                <Link className="w-4 h-4" />
+              </PreviewButton>
+              <PreviewButton onClick={refreshIframe}>
+                <RotateCw className="w-3 h-3" />
+              </PreviewButton>
+            </>
+          )}
         </div>
+      </div>
     </>
   )
 })
@@ -76,8 +79,9 @@ function PreviewButton({
 }) {
   return (
     <div
-      className={`${disabled ? "pointer-events-none opacity-50" : ""
-        } p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
+      className={`${
+        disabled ? "pointer-events-none opacity-50" : ""
+      } p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
       onClick={onClick}
     >
       {children}