From 95154af0744730554075b32e414172918ce15f48 Mon Sep 17 00:00:00 2001 From: James Murdza Date: Fri, 1 Nov 2024 07:59:29 -0600 Subject: [PATCH 01/20] docs: add note about Cloudflare Worker URLs --- frontend/.env.example | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/.env.example b/frontend/.env.example index e81c748..e63adeb 100644 --- a/frontend/.env.example +++ b/frontend/.env.example @@ -8,6 +8,7 @@ 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_WORKERS_KEY= From 60c5345753431525cfe95fffa8b3bfd7f4355818 Mon Sep 17 00:00:00 2001 From: omar rashed Date: Thu, 31 Oct 2024 10:27:23 +0300 Subject: [PATCH 02/20] feat: add download button --- backend/server/src/Sandbox.ts | 16 ++++++++- .../editor/navbar/downloadButton.tsx | 33 +++++++++++++++++++ frontend/components/editor/navbar/index.tsx | 2 ++ 3 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 frontend/components/editor/navbar/downloadButton.tsx diff --git a/backend/server/src/Sandbox.ts b/backend/server/src/Sandbox.ts index fda2237..e7dd1bf 100644 --- a/backend/server/src/Sandbox.ts +++ b/backend/server/src/Sandbox.ts @@ -15,7 +15,7 @@ import { SecureGitClient } from "./SecureGitClient" import { TerminalManager } from "./TerminalManager" import { TFile, TFolder } from "./types" import { LockManager } from "./utils" - +import { TFileData } from "./types" const lockManager = new LockManager() // Define a type for SocketHandler functions @@ -218,9 +218,23 @@ export class Sandbox { 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, diff --git a/frontend/components/editor/navbar/downloadButton.tsx b/frontend/components/editor/navbar/downloadButton.tsx new file mode 100644 index 0000000..6b2c9c7 --- /dev/null +++ b/frontend/components/editor/navbar/downloadButton.tsx @@ -0,0 +1,33 @@ +import JSZip from 'jszip' +import { useSocket } from "@/context/SocketContext" +import { Button } from "@/components/ui/button" +import { Download } from "lucide-react" + +export default function DownloadButton() { + 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 = 'sandbox-files.zip' + a.click() + window.URL.revokeObjectURL(url) + }) + } + + return ( + + ) +} diff --git a/frontend/components/editor/navbar/index.tsx b/frontend/components/editor/navbar/index.tsx index 4605dd3..a7170b6 100644 --- a/frontend/components/editor/navbar/index.tsx +++ b/frontend/components/editor/navbar/index.tsx @@ -14,6 +14,7 @@ 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, @@ -78,6 +79,7 @@ export default function Navbar({ Share + ) : null} From ebb270911b1c0fa9b348a83695b12b1b38631326 Mon Sep 17 00:00:00 2001 From: omar rashed Date: Fri, 1 Nov 2024 17:05:41 +0200 Subject: [PATCH 03/20] fix: add jszip --- package-lock.json | 89 ++++++++++++++++++++++++++++++++++++++++++++++- package.json | 3 +- 2 files changed, 90 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index fe34884..8ff35d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,8 @@ "packages": { "": { "dependencies": { - "@radix-ui/react-popover": "^1.1.1" + "@radix-ui/react-popover": "^1.1.1", + "jszip": "^3.10.1" } }, "node_modules/@floating-ui/core": { @@ -442,6 +443,11 @@ "node": ">=10" } }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" + }, "node_modules/detect-node-es": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", @@ -455,6 +461,16 @@ "node": ">=6" } }, + "node_modules/immediate": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", + "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -463,11 +479,35 @@ "loose-envify": "^1.0.0" } }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, + "node_modules/jszip": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", + "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==", + "dependencies": { + "lie": "~3.3.0", + "pako": "~1.0.2", + "readable-stream": "~2.3.6", + "setimmediate": "^1.0.5" + } + }, + "node_modules/lie": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", + "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", + "dependencies": { + "immediate": "~3.0.5" + } + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -479,6 +519,16 @@ "loose-envify": "cli.js" } }, + "node_modules/pako": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", + "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==" + }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" + }, "node_modules/react": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", @@ -571,6 +621,25 @@ } } }, + "node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, "node_modules/scheduler": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", @@ -580,6 +649,19 @@ "loose-envify": "^1.1.0" } }, + "node_modules/setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==" + }, + "node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, "node_modules/tslib": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", @@ -625,6 +707,11 @@ "optional": true } } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" } } } diff --git a/package.json b/package.json index c7fda41..975af24 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { - "@radix-ui/react-popover": "^1.1.1" + "@radix-ui/react-popover": "^1.1.1", + "jszip": "^3.10.1" } } From 9197050ca31740257e9c817484fc29e816232dc8 Mon Sep 17 00:00:00 2001 From: omar rashed Date: Fri, 1 Nov 2024 17:48:05 +0200 Subject: [PATCH 04/20] feat: add name of the project --- frontend/components/editor/navbar/downloadButton.tsx | 5 +++-- frontend/components/editor/navbar/index.tsx | 3 +-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/components/editor/navbar/downloadButton.tsx b/frontend/components/editor/navbar/downloadButton.tsx index 6b2c9c7..c036ffc 100644 --- a/frontend/components/editor/navbar/downloadButton.tsx +++ b/frontend/components/editor/navbar/downloadButton.tsx @@ -3,7 +3,7 @@ import { useSocket } from "@/context/SocketContext" import { Button } from "@/components/ui/button" import { Download } from "lucide-react" -export default function DownloadButton() { +export default function DownloadButton({ name }: { name: string }) { const { socket } = useSocket() const handleDownload = async () => { @@ -18,12 +18,13 @@ export default function DownloadButton() { const url = window.URL.createObjectURL(blob) const a = document.createElement('a') a.href = url - a.download = 'sandbox-files.zip' + a.download = `${name}.zip` a.click() window.URL.revokeObjectURL(url) }) } + return ( - - + ) : null} From f35330ba4fdc684d8bdafb98204ae89afab66040 Mon Sep 17 00:00:00 2001 From: James Murdza Date: Fri, 1 Nov 2024 10:35:09 -0600 Subject: [PATCH 05/20] chore: add missing entries to .env.example --- backend/server/.env.example | 1 + frontend/.env.example | 1 + 2 files changed, 2 insertions(+) diff --git a/backend/server/.env.example b/backend/server/.env.example index e9e502a..2cb1ec1 100644 --- a/backend/server/.env.example +++ b/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= diff --git a/frontend/.env.example b/frontend/.env.example index e63adeb..b1f3451 100644 --- a/frontend/.env.example +++ b/frontend/.env.example @@ -11,6 +11,7 @@ NEXT_PUBLIC_APP_URL=http://localhost:3000 # 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 From 39911e9ef28699fbd1114dc328aaf0027f172834 Mon Sep 17 00:00:00 2001 From: James Murdza Date: Sat, 2 Nov 2024 03:34:17 -0600 Subject: [PATCH 06/20] fix: add jszip to frontend --- frontend/package-lock.json | 82 ++++++++++++++++++++++++++++++++++++++ frontend/package.json | 1 + 2 files changed, 83 insertions(+) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 89cd1fa..96076f4 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -43,6 +43,7 @@ "framer-motion": "^11.2.3", "fs": "^0.0.1-security", "geist": "^1.3.0", + "jszip": "^3.10.1", "lucide-react": "^0.365.0", "monaco-themes": "^0.4.4", "next": "14.1.3", @@ -2984,6 +2985,11 @@ "node": ">= 0.6" } }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" + }, "node_modules/crelt": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", @@ -3625,6 +3631,16 @@ } ] }, + "node_modules/immediate": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", + "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, "node_modules/inline-style-parser": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz", @@ -3752,6 +3768,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==" + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -3828,6 +3849,17 @@ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, + "node_modules/jszip": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", + "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==", + "dependencies": { + "lie": "~3.3.0", + "pako": "~1.0.2", + "readable-stream": "~2.3.6", + "setimmediate": "^1.0.5" + } + }, "node_modules/lib0": { "version": "0.2.93", "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.93.tgz", @@ -3848,6 +3880,14 @@ "url": "https://github.com/sponsors/dmonad" } }, + "node_modules/lie": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", + "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", + "dependencies": { + "immediate": "~3.0.5" + } + }, "node_modules/lilconfig": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", @@ -5039,6 +5079,11 @@ "node": ">= 6" } }, + "node_modules/pako": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", + "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==" + }, "node_modules/parse-entities": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz", @@ -5332,6 +5377,11 @@ "node": ">=6" } }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" + }, "node_modules/property-information": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz", @@ -5589,6 +5639,20 @@ "pify": "^2.3.0" } }, + "node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -5834,6 +5898,11 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -5847,6 +5916,11 @@ "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz", "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==" }, + "node_modules/setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -5965,6 +6039,14 @@ "node": ">=10.0.0" } }, + "node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, "node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 5deb7c6..3aa0e85 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -44,6 +44,7 @@ "framer-motion": "^11.2.3", "fs": "^0.0.1-security", "geist": "^1.3.0", + "jszip": "^3.10.1", "lucide-react": "^0.365.0", "monaco-themes": "^0.4.4", "next": "14.1.3", From 5633727bdb31c7edacfaf3d0cdedd62cc2daa49f Mon Sep 17 00:00:00 2001 From: James Murdza Date: Sat, 2 Nov 2024 13:27:20 -0600 Subject: [PATCH 07/20] chore: update template types --- backend/server/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/server/src/types.ts b/backend/server/src/types.ts index 93e45e6..9711824 100644 --- a/backend/server/src/types.ts +++ b/backend/server/src/types.ts @@ -12,7 +12,7 @@ export type User = { export type Sandbox = { id: string name: string - type: "react" | "node" + type: "reactjs" | "vanillajs" | "nextjs" | "streamlit" visibility: "public" | "private" createdAt: Date userId: string From 5a63ab7265454ae59548b6f50f4226dd732c9ba9 Mon Sep 17 00:00:00 2001 From: James Murdza Date: Sat, 2 Nov 2024 13:27:11 -0600 Subject: [PATCH 08/20] feat: load project templates from custom E2B sandboxes instead of from Cloudflare --- backend/server/src/FileManager.ts | 11 +++++++-- backend/server/src/Sandbox.ts | 15 ++++++++---- backend/server/src/index.ts | 2 ++ backend/server/src/socketAuth.ts | 14 ++++++++++- backend/storage/src/index.ts | 29 +---------------------- frontend/components/editor/navbar/run.tsx | 4 ++-- 6 files changed, 37 insertions(+), 38 deletions(-) diff --git a/backend/server/src/FileManager.ts b/backend/server/src/FileManager.ts index 88d53f3..3d62918 100644 --- a/backend/server/src/FileManager.ts +++ b/backend/server/src/FileManager.ts @@ -140,6 +140,12 @@ export class FileManager { }) 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.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() @@ -348,8 +354,9 @@ export class FileManager { // Get file content async getFile(fileId: string): Promise { - const file = this.fileData.find((f) => f.id === fileId) - return file?.data + const filePath = path.posix.join(this.dirName, fileId) + const fileContent = await this.sandbox.files.read(filePath) + return fileContent } // Get folder content diff --git a/backend/server/src/Sandbox.ts b/backend/server/src/Sandbox.ts index e7dd1bf..5de7754 100644 --- a/backend/server/src/Sandbox.ts +++ b/backend/server/src/Sandbox.ts @@ -13,9 +13,8 @@ import { } from "./ratelimit" import { SecureGitClient } from "./SecureGitClient" import { TerminalManager } from "./TerminalManager" -import { TFile, TFolder } from "./types" +import { TFile, TFileData, TFolder } from "./types" import { LockManager } from "./utils" -import { TFileData } from "./types" const lockManager = new LockManager() // Define a type for SocketHandler functions @@ -38,6 +37,7 @@ type ServerContext = { export class Sandbox { // Sandbox properties: sandboxId: string; + type: string; fileManager: FileManager | null; terminalManager: TerminalManager | null; container: E2BSandbox | null; @@ -46,9 +46,10 @@ export class Sandbox { gitClient: SecureGitClient | null; aiWorker: AIWorker; - constructor(sandboxId: string, { aiWorker, dokkuClient, gitClient }: ServerContext) { + 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; @@ -69,8 +70,12 @@ export class Sandbox { console.log(`Found existing container ${this.sandboxId}`) } else { console.log("Creating container", this.sandboxId) - // Create a new container with a specified timeout - this.container = await E2BSandbox.create({ + // 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, }) } diff --git a/backend/server/src/index.ts b/backend/server/src/index.ts index cf95824..e1e5eda 100644 --- a/backend/server/src/index.ts +++ b/backend/server/src/index.ts @@ -96,6 +96,7 @@ io.on("connection", async (socket) => { userId: string sandboxId: string isOwner: boolean + type: string } // Register the connection @@ -111,6 +112,7 @@ io.on("connection", async (socket) => { // Create or retrieve the sandbox manager for the given sandbox ID const sandbox = sandboxes[data.sandboxId] ?? new Sandbox( data.sandboxId, + data.type, { aiWorker, dokkuClient, gitClient, } diff --git a/backend/server/src/socketAuth.ts b/backend/server/src/socketAuth.ts index 3bd83b1..030a89b 100644 --- a/backend/server/src/socketAuth.ts +++ b/backend/server/src/socketAuth.ts @@ -1,6 +1,6 @@ import { Socket } from "socket.io" import { z } from "zod" -import { User } from "./types" +import { Sandbox, User } from "./types" // Middleware for socket authentication export const socketAuth = async (socket: Socket, next: Function) => { @@ -33,6 +33,17 @@ export const socketAuth = async (socket: Socket, next: Function) => { ) 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.")) @@ -56,6 +67,7 @@ export const socketAuth = async (socket: Socket, next: Function) => { userId, sandboxId: sandboxId, isOwner: sandbox !== undefined, + type: dbSandboxJSON.type } // Allow the connection diff --git a/backend/storage/src/index.ts b/backend/storage/src/index.ts index e7a7294..22def5d 100644 --- a/backend/storage/src/index.ts +++ b/backend/storage/src/index.ts @@ -1,4 +1,3 @@ -import pLimit from "p-limit" import { z } from "zod" export interface Env { @@ -136,33 +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 diff --git a/frontend/components/editor/navbar/run.tsx b/frontend/components/editor/navbar/run.tsx index 2d11008..c6020aa 100644 --- a/frontend/components/editor/navbar/run.tsx +++ b/frontend/components/editor/navbar/run.tsx @@ -44,8 +44,8 @@ export default function RunButtonModal({ } 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" + ? "./venv/bin/streamlit run main.py --server.runOnSave true" + : "npm run dev" try { // Create a new terminal with the appropriate command From 474102aa14b1394e6abc46ca9d3888c451e0b8a1 Mon Sep 17 00:00:00 2001 From: James Murdza Date: Sat, 2 Nov 2024 13:28:21 -0600 Subject: [PATCH 09/20] fix: use new project directory path to find tsconfig files --- frontend/components/editor/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx index 59e7a21..fdf2f98 100644 --- a/frontend/components/editor/index.tsx +++ b/frontend/components/editor/index.tsx @@ -218,7 +218,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 { @@ -228,8 +227,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 From c669babb2fc732faf08af50e3392a34dd65586fb Mon Sep 17 00:00:00 2001 From: James Murdza Date: Sun, 3 Nov 2024 12:28:17 -0600 Subject: [PATCH 10/20] fix: use posix paths when converting paths to relative format --- backend/server/src/FileManager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/server/src/FileManager.ts b/backend/server/src/FileManager.ts index 3d62918..abc48f2 100644 --- a/backend/server/src/FileManager.ts +++ b/backend/server/src/FileManager.ts @@ -143,7 +143,7 @@ export class FileManager { // 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.relative(this.dirName, filePath)); // Convert absolute paths to relative paths + 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 From 9c98e41ebbef3231817d4998994312416d7ba8bb Mon Sep 17 00:00:00 2001 From: James Murdza Date: Sun, 3 Nov 2024 12:50:58 -0600 Subject: [PATCH 11/20] chore: delete unused files --- package-lock.json | 717 ---------------------------------------------- package.json | 6 - 2 files changed, 723 deletions(-) delete mode 100644 package-lock.json delete mode 100644 package.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 8ff35d1..0000000 --- a/package-lock.json +++ /dev/null @@ -1,717 +0,0 @@ -{ - "name": "sandbox", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "dependencies": { - "@radix-ui/react-popover": "^1.1.1", - "jszip": "^3.10.1" - } - }, - "node_modules/@floating-ui/core": { - "version": "1.6.7", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz", - "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", - "dependencies": { - "@floating-ui/utils": "^0.2.7" - } - }, - "node_modules/@floating-ui/dom": { - "version": "1.6.10", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz", - "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", - "dependencies": { - "@floating-ui/core": "^1.6.0", - "@floating-ui/utils": "^0.2.7" - } - }, - "node_modules/@floating-ui/react-dom": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz", - "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==", - "dependencies": { - "@floating-ui/dom": "^1.0.0" - }, - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, - "node_modules/@floating-ui/utils": { - "version": "0.2.7", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", - "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" - }, - "node_modules/@radix-ui/primitive": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", - "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==" - }, - "node_modules/@radix-ui/react-arrow": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz", - "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==", - "dependencies": { - "@radix-ui/react-primitive": "2.0.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-compose-refs": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", - "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-context": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", - "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-dismissable-layer": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz", - "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==", - "dependencies": { - "@radix-ui/primitive": "1.1.0", - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-use-callback-ref": "1.1.0", - "@radix-ui/react-use-escape-keydown": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-focus-guards": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz", - "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-focus-scope": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz", - "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==", - "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-use-callback-ref": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-id": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", - "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", - "dependencies": { - "@radix-ui/react-use-layout-effect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-popover": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz", - "integrity": "sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==", - "dependencies": { - "@radix-ui/primitive": "1.1.0", - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.0", - "@radix-ui/react-dismissable-layer": "1.1.0", - "@radix-ui/react-focus-guards": "1.1.0", - "@radix-ui/react-focus-scope": "1.1.0", - "@radix-ui/react-id": "1.1.0", - "@radix-ui/react-popper": "1.2.0", - "@radix-ui/react-portal": "1.1.1", - "@radix-ui/react-presence": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-slot": "1.1.0", - "@radix-ui/react-use-controllable-state": "1.1.0", - "aria-hidden": "^1.1.1", - "react-remove-scroll": "2.5.7" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-popper": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz", - "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==", - "dependencies": { - "@floating-ui/react-dom": "^2.0.0", - "@radix-ui/react-arrow": "1.1.0", - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-use-callback-ref": "1.1.0", - "@radix-ui/react-use-layout-effect": "1.1.0", - "@radix-ui/react-use-rect": "1.1.0", - "@radix-ui/react-use-size": "1.1.0", - "@radix-ui/rect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-portal": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz", - "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==", - "dependencies": { - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-use-layout-effect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-presence": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz", - "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==", - "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-use-layout-effect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-primitive": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", - "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", - "dependencies": { - "@radix-ui/react-slot": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-slot": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", - "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", - "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", - "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-controllable-state": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", - "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", - "dependencies": { - "@radix-ui/react-use-callback-ref": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-escape-keydown": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz", - "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==", - "dependencies": { - "@radix-ui/react-use-callback-ref": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-layout-effect": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", - "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-rect": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz", - "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==", - "dependencies": { - "@radix-ui/rect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-use-size": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz", - "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==", - "dependencies": { - "@radix-ui/react-use-layout-effect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/rect": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz", - "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==" - }, - "node_modules/aria-hidden": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz", - "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==", - "dependencies": { - "tslib": "^2.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/core-util-is": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", - "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" - }, - "node_modules/detect-node-es": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", - "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" - }, - "node_modules/get-nonce": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", - "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", - "engines": { - "node": ">=6" - } - }, - "node_modules/immediate": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", - "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" - }, - "node_modules/inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" - }, - "node_modules/invariant": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", - "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, - "node_modules/isarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==" - }, - "node_modules/js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" - }, - "node_modules/jszip": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", - "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==", - "dependencies": { - "lie": "~3.3.0", - "pako": "~1.0.2", - "readable-stream": "~2.3.6", - "setimmediate": "^1.0.5" - } - }, - "node_modules/lie": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", - "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", - "dependencies": { - "immediate": "~3.0.5" - } - }, - "node_modules/loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dependencies": { - "js-tokens": "^3.0.0 || ^4.0.0" - }, - "bin": { - "loose-envify": "cli.js" - } - }, - "node_modules/pako": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", - "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==" - }, - "node_modules/process-nextick-args": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" - }, - "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" - }, - "peerDependencies": { - "react": "^18.3.1" - } - }, - "node_modules/react-remove-scroll": { - "version": "2.5.7", - "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz", - "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==", - "dependencies": { - "react-remove-scroll-bar": "^2.3.4", - "react-style-singleton": "^2.2.1", - "tslib": "^2.1.0", - "use-callback-ref": "^1.3.0", - "use-sidecar": "^1.1.2" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/react-remove-scroll-bar": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz", - "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==", - "dependencies": { - "react-style-singleton": "^2.2.1", - "tslib": "^2.0.0" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/react-style-singleton": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", - "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", - "dependencies": { - "get-nonce": "^1.0.0", - "invariant": "^2.2.4", - "tslib": "^2.0.0" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/readable-stream": { - "version": "2.3.8", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", - "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", - "dependencies": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - }, - "node_modules/safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" - }, - "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0" - } - }, - "node_modules/setimmediate": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==" - }, - "node_modules/string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dependencies": { - "safe-buffer": "~5.1.0" - } - }, - "node_modules/tslib": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", - "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==" - }, - "node_modules/use-callback-ref": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz", - "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==", - "dependencies": { - "tslib": "^2.0.0" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/use-sidecar": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", - "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", - "dependencies": { - "detect-node-es": "^1.1.0", - "tslib": "^2.0.0" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" - } - } -} diff --git a/package.json b/package.json deleted file mode 100644 index 975af24..0000000 --- a/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "dependencies": { - "@radix-ui/react-popover": "^1.1.1", - "jszip": "^3.10.1" - } -} From 9c6067dcd9f30c7c269d09d2c4c44cdddd597d07 Mon Sep 17 00:00:00 2001 From: Akhileshrangani4 Date: Tue, 29 Oct 2024 01:37:46 -0400 Subject: [PATCH 12/20] feat: enhance AI Chat with context management, file integration, image support, and improved code handling - Added context tabs system for managing multiple types of context (files, code snippets, images) - Added preview functionality for context items - Added ability to expand/collapse context previews - Added file selection popup/dropdown - Added file search functionality - Added image upload button - Added image paste support - Added image preview in context tabs - Added automatic code detection on paste - Added line number tracking for code snippets - Added source file name preservation - Added line range display for code contexts - Added model selection dropdown (Claude 3.5 Sonnet/Claude 3) - Added Ctrl+Enter for sending with full context - Added Backspace to remove last context tab when input is empty - Added smart code detection on paste --- .../components/editor/AIChat/ChatInput.tsx | 286 ++++++++++++++++-- .../components/editor/AIChat/ChatMessage.tsx | 77 +++-- .../components/editor/AIChat/ContextTabs.tsx | 167 ++++++++++ frontend/components/editor/AIChat/index.tsx | 201 ++++++++++-- frontend/components/editor/index.tsx | 17 ++ frontend/components/ui/tab-preview.tsx | 0 6 files changed, 665 insertions(+), 83 deletions(-) create mode 100644 frontend/components/editor/AIChat/ContextTabs.tsx create mode 100644 frontend/components/ui/tab-preview.tsx diff --git a/frontend/components/editor/AIChat/ChatInput.tsx b/frontend/components/editor/AIChat/ChatInput.tsx index 380b6a4..499591b 100644 --- a/frontend/components/editor/AIChat/ChatInput.tsx +++ b/frontend/components/editor/AIChat/ChatInput.tsx @@ -1,12 +1,26 @@ -import { Send, StopCircle } from "lucide-react" +import { Send, StopCircle, AtSign, Image as ImageIcon } from "lucide-react" import { Button } from "../../ui/button" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select" +import { useRef, useEffect, useState } from "react" +import * as monaco from 'monaco-editor' +import { TFile, TFolder } from "@/lib/types" interface ChatInputProps { input: string setInput: (input: string) => void isGenerating: boolean - handleSend: () => void + handleSend: (useFullContext?: boolean) => void handleStopGeneration: () => void + onImageUpload: (file: File) => void + onFileMention: (fileName: string) => void + addContextTab: (type: string, title: string, content: string, lineRange?: { start: number, end: number }) => void + activeFileName?: string + editorRef: React.MutableRefObject + 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 + files: (TFile | TFolder)[] } export default function ChatInput({ @@ -15,37 +29,249 @@ export default function ChatInput({ isGenerating, handleSend, handleStopGeneration, + onImageUpload, + onFileMention, + addContextTab, + activeFileName, + editorRef, + lastCopiedRangeRef, + contextTabs, + onRemoveTab, + textareaRef, + files, }: 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]) + + 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) + } + } + + 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 { + const reader = new FileReader(); + reader.onload = () => { + const base64String = reader.result as string; + addContextTab( + "image", + `Image ${new Date().toLocaleTimeString()}`, + base64String + ); + }; + reader.readAsDataURL(file); + } catch (error) { + console.error('Error processing pasted image:', error); + } + return; + } + } + + const text = e.clipboardData.getData('text'); + + // Helper function to detect if text looks like code + 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)); + }; + + // 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'); + + // 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 } + ); + }; + + 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() + } + + const handleMentionClick = () => { + if (textareaRef.current) { + const cursorPosition = textareaRef.current.selectionStart + const newValue = input.slice(0, cursorPosition) + '@' + input.slice(cursorPosition) + setInput(newValue) + // Focus and move cursor after the @ + textareaRef.current.focus() + const newPosition = cursorPosition + 1 + textareaRef.current.setSelectionRange(newPosition, newPosition) + } + } + + // Handle @ mentions in input + useEffect(() => { + const match = input.match(/@(\w+)$/) + if (match) { + const fileName = match[1] + const allFiles = getAllFiles(files) + const file = allFiles.find(file => file.name === fileName) + if (file) { + onFileMention(file.name) + } + } + }, [input, onFileMention, files]) + + // Add this 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 + }, []) + } + return ( -
- 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 ? ( - - ) : ( -