improve copilot + fix minor bugs

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>
-  );
+  )
 }