add ai generations limit + random bug fixes

frontend/components/editor/generate.tsx

@@ -5,9 +5,13 @@ 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 { usePathname, useRouter } from "next/navigation"
 // import monaco from "monaco-editor"
 
 export default function GenerateInput({
+  user,
   socket,
   width,
   data,
@@ -15,6 +19,7 @@ export default function GenerateInput({
   onExpand,
   onAccept,
 }: {
+  user: User
   socket: Socket
   width: number
   data: {
@@ -28,6 +33,8 @@ export default function GenerateInput({
   onExpand: () => void
   onAccept: (code: string) => void
 }) {
+  const pathname = usePathname()
+  const router = useRouter()
   const inputRef = useRef<HTMLInputElement>(null)
 
   const [code, setCode] = useState("")
@@ -50,6 +57,12 @@ export default function GenerateInput({
   }: {
     regenerate?: boolean
   }) => {
+    if (user.generations >= 30) {
+      toast.error(
+        "You reached the maximum # of generations. Contact @ishaandey_ on X/Twitter to reset :)"
+      )
+    }
+
     setLoading({ generate: !regenerate, regenerate })
     setCurrentPrompt(input)
     socket.emit(
@@ -72,6 +85,7 @@ export default function GenerateInput({
         }
 
         setCode(res.result.response)
+        router.refresh()
       }
     )
   }

frontend/components/editor/index.tsx

@@ -34,8 +34,7 @@ import Sidebar from "./sidebar"
 import EditorTerminal from "./terminal"
 import { Button } from "../ui/button"
 import GenerateInput from "./generate"
-import { TFile, TFileData, TFolder, TTab } from "./sidebar/types"
-import { Sandbox, User } from "@/lib/types"
+import { Sandbox, User, TFile, TFileData, TFolder, TTab } from "@/lib/types"
 import { processFileType, validateName } from "@/lib/utils"
 import { Cursors } from "./live/cursors"
 
@@ -455,6 +454,7 @@ export default function CodeEditor({
       <div className="z-50 p-1" ref={generateWidgetRef}>
         {generate.show && ai ? (
           <GenerateInput
+            user={userData}
             socket={socket}
             width={generate.width - 90}
             data={{

frontend/components/editor/sidebar/file.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image"
 import { getIconForFile } from "vscode-icons-js"
-import { TFile, TTab } from "./types"
+import { TFile, TTab } from "@/lib/types"
 import { useEffect, useRef, useState } from "react"
 import {
   ContextMenu,

frontend/components/editor/sidebar/folder.tsx

@@ -3,7 +3,7 @@
 import Image from "next/image"
 import { useEffect, useRef, useState } from "react"
 import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
-import { TFile, TFolder, TTab } from "./types"
+import { TFile, TFolder, TTab } from "@/lib/types"
 import SidebarFile from "./file"
 import {
   ContextMenu,

frontend/components/editor/sidebar/index.tsx

@@ -3,7 +3,7 @@
 import { FilePlus, FolderPlus, Loader2, Search, Sparkles } from "lucide-react"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
-import { TFile, TFolder, TTab } from "./types"
+import { TFile, TFolder, TTab } from "@/lib/types"
 import { useState } from "react"
 import New from "./new"
 import { Socket } from "socket.io-client"

frontend/components/editor/sidebar/types.ts

@@ -1,21 +0,0 @@
-export type TFolder = {
-  id: string
-  type: "folder"
-  name: string
-  children: (TFile | TFolder)[]
-}
-
-export type TFile = {
-  id: string
-  type: "file"
-  name: string
-}
-
-export type TTab = TFile & {
-  saved: boolean
-}
-
-export type TFileData = {
-  id: string
-  data: string
-}

frontend/components/ui/userButton.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { User } from "@/lib/types"
 import { useClerk } from "@clerk/nextjs"
-import { LogOut, Pencil } from "lucide-react"
+import { LogOut, Pencil, Sparkles } from "lucide-react"
 import { useRouter } from "next/navigation"
 
 export default function UserButton({ userData }: { userData: User }) {
@@ -29,7 +29,7 @@ export default function UserButton({ userData }: { userData: User }) {
             .map((name) => name[0].toUpperCase())}
         </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-40" align="end">
+      <DropdownMenuContent className="w-48" align="end">
         <div className="py-1.5 px-2 w-full">
           <div className="font-medium">{userData.name}</div>
           <div className="text-sm w-full overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
@@ -37,6 +37,21 @@ export default function UserButton({ userData }: { userData: User }) {
           </div>
         </div>
 
+        <DropdownMenuSeparator />
+        <div className="py-1.5 px-2 w-full flex flex-col items-start text-sm">
+          <div className="flex items-center">
+            <Sparkles className={`h-4 w-4 mr-2 text-indigo-500`} />
+            AI Usage: {userData.generations}/30
+          </div>
+          <div className="rounded-full w-full mt-2 h-2 overflow-hidden bg-secondary">
+            <div
+              className="h-full bg-indigo-500 rounded-full"
+              style={{
+                width: `${(userData.generations * 100) / 30}%`,
+              }}
+            />
+          </div>
+        </div>
         <DropdownMenuSeparator />
         <DropdownMenuItem className="cursor-pointer">
           <Pencil className="mr-2 h-4 w-4" />