improve copilot + fix minor bugs

backend/ai/src/index.ts

@@ -19,7 +19,7 @@ export default {
 				{
 					role: "system",
 					content:
-						"You are an expert coding assistant. You read code from a file, and you suggest new code to add to the file. You may be given instructions on what to generate, which you should follow. You should generate code that is correct, efficient, and follows best practices. You should also generate code that is clear and easy to read. When you generate code, you should only return the code, and nothing else. You should not include backticks in the code you generate.",
+						"You are an expert coding assistant. You read code from a file, and you suggest new code to add to the file. You may be given instructions on what to generate, which you should follow. You should generate code that is CORRECT, efficient, and follows best practices. You may generate multiple lines of code if necessary. When you generate code, you should ONLY return the code, and nothing else. You MUST NOT include backticks in the code you generate.",
 				},
 				{
 					role: "user",

backend/server/src/index.ts

@@ -17,8 +17,6 @@ import {
   getSandboxFiles,
   renameFile,
   saveFile,
-  stopServer,
-  testDescribe,
 } from "./utils";
 import { IDisposable, IPty, spawn } from "node-pty";
 import {
@@ -453,24 +451,22 @@ io.on("connection", async (socket) => {
       );
     }
 
-    const sockets = await io.fetchSockets();
-    if (inactivityTimeout) {
-      clearTimeout(inactivityTimeout);
-    }
-    if (sockets.length === 0) {
-      console.log("STARTING TIMER");
-      inactivityTimeout = setTimeout(() => {
-        io.fetchSockets().then(async (sockets) => {
-          if (sockets.length === 0) {
-            console.log("Closing server due to inactivity.");
-            const res = await stopServer(data.sandboxId);
-            console.log("Server stopped", res);
-          }
-        });
-      }, 20000);
-    } else {
-      console.log("number of sockets", sockets.length);
-    }
+    // const sockets = await io.fetchSockets();
+    // if (inactivityTimeout) {
+    //   clearTimeout(inactivityTimeout);
+    // }
+    // if (sockets.length === 0) {
+    //   console.log("STARTING TIMER");
+    //   inactivityTimeout = setTimeout(() => {
+    //     io.fetchSockets().then(async (sockets) => {
+    //       if (sockets.length === 0) {
+    //         console.log("Server stopped", res);
+    //       }
+    //     });
+    //   }, 20000);
+    // } else {
+    //   console.log("number of sockets", sockets.length);
+    // }
   });
 });
 

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

@@ -67,8 +67,6 @@ export default async function CodePage({ params }: { params: { id: string } }) {
     return notFound()
   }
 
-  console.log("sandboxes: ", sandboxData)
-
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Room id={sandboxId}>

frontend/app/globals.css

@@ -102,10 +102,6 @@
 .inline-decoration::before {
   content: "Generate";
   color: #525252;
-  /* border: 1px solid #525252; */
-  /* padding: 2px 4px; */
-  /* border-radius: 4px; */
-  margin-left: 36px;
 }
 .inline-decoration::after {
   content: "⌘G";

frontend/components/editor/index.tsx

@@ -11,7 +11,7 @@ import * as Y from "yjs"
 import LiveblocksProvider from "@liveblocks/yjs"
 import { MonacoBinding } from "y-monaco"
 import { Awareness } from "y-protocols/awareness"
-import { TypedLiveblocksProvider, useRoom } from "@/liveblocks.config"
+import { TypedLiveblocksProvider, useRoom, useSelf } from "@/liveblocks.config"
 
 import {
   ResizableHandle,
@@ -94,6 +94,7 @@ export default function CodeEditor({
   // Liveblocks hooks
   const room = useRoom()
   const [provider, setProvider] = useState<TypedLiveblocksProvider>()
+  const userInfo = useSelf((me) => me.info)
 
   // Refs for libraries / features
   const editorContainerRef = useRef<HTMLDivElement>(null)
@@ -263,6 +264,14 @@ export default function CodeEditor({
 
     if (!ai) return
 
+    const model = editorRef?.getModel()
+    const line = model?.getLineContent(cursorLine)
+
+    if (line === undefined || line.trim() !== "") {
+      decorations.instance?.clear()
+      return
+    }
+
     if (decorations.instance) {
       decorations.instance.set(decorations.options)
     } else {
@@ -663,7 +672,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 ? <Cursors yProvider={provider} /> : null}
+                {provider && userInfo ? (
+                  <Cursors yProvider={provider} userInfo={userInfo} />
+                ) : null}
                 <Editor
                   height="100%"
                   language={editorLanguage}

frontend/components/editor/live/cursors.tsx

@@ -7,11 +7,18 @@ import {
 } from "@/liveblocks.config"
 import { colors } from "@/lib/colors"
 
-export function Cursors({ yProvider }: { yProvider: TypedLiveblocksProvider }) {
+export function Cursors({
+  yProvider,
+  userInfo,
+}: {
+  yProvider: TypedLiveblocksProvider
+  userInfo: {
+    name: string
+    email: string
+    color: "red" | "orange" | "yellow" | "green" | "blue" | "purple" | "pink"
+  }
+}) {
   // Get user info from Liveblocks authentication endpoint
-  const userInfo = useSelf((me) => me.info)
-
-  if (!userInfo) return null
 
   const [awarenessUsers, setAwarenessUsers] = useState<AwarenessList>([])
 

frontend/components/editor/loading/index.tsx

@@ -1,15 +1,17 @@
-import Image from "next/image";
-import Logo from "@/assets/logo.svg";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Loader2, X } from "lucide-react";
+"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,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { useEffect, useState } from "react";
+} from "@/components/ui/dialog"
+import { useEffect, useState } from "react"
 
 export default function Loading({
   didFail = false,
@@ -17,18 +19,18 @@ export default function Loading({
   text = "",
   description = "",
 }: {
-  didFail?: boolean;
-  withNav?: boolean;
-  text?: string;
-  description?: string;
+  didFail?: boolean
+  withNav?: boolean
+  text?: string
+  description?: string
 }) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     if (text) {
-      setOpen(true);
+      setOpen(true)
     }
-  }, [text]);
+  }, [text])
 
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col justify-center items-center z-0 h-screen bg-background relative">
@@ -98,5 +100,5 @@ export default function Loading({
         </div>
       </div>
     </div>
-  );
+  )
 }