add ai generations limit + random bug fixes

2024-05-05 16:51:30 -07:00
parent 09ead6073b
commit 47ce5db223
20 changed files with 330 additions and 122 deletions
--- a/frontend/components/editor/generate.tsx
+++ b/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()
      }
    )
  }
--- a/frontend/components/editor/index.tsx
+++ b/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={{
--- a/frontend/components/editor/sidebar/file.tsx
+++ b/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,
--- a/frontend/components/editor/sidebar/folder.tsx
+++ b/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,
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/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"
--- a/frontend/components/editor/sidebar/types.ts
+++ b/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
-}
--- a/frontend/components/ui/userButton.tsx
+++ b/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" />
--- a/frontend/lib/types.ts
+++ b/frontend/lib/types.ts
@ -4,6 +4,7 @@ export type User = {
  id: string
  name: string
  email: string
+  generations: number
  sandbox: Sandbox[]
  usersToSandboxes: UsersToSandboxes[]
 }
@ -38,3 +39,25 @@ export type R2FileData = {
  version: string
  key: string
 }
+
+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
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -54,6 +54,8 @@
        "@types/react-dom": "^18",
        "autoprefixer": "^10.0.1",
        "postcss": "^8",
+        "postcss-import": "^16.1.0",
+        "postcss-nesting": "^12.1.2",
        "tailwindcss": "^3.3.0",
        "typescript": "^5"
      }
@ -247,6 +249,50 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
    },
+    "node_modules/@csstools/selector-resolve-nested": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz",
+      "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.3.tgz",
+      "integrity": "sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
    "node_modules/@floating-ui/core": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
@ -2810,16 +2856,17 @@
      }
    },
    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz",
+      "integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==",
+      "dev": true,
      "dependencies": {
        "postcss-value-parser": "^4.0.0",
        "read-cache": "^1.0.0",
        "resolve": "^1.1.7"
      },
      "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
      },
      "peerDependencies": {
        "postcss": "^8.0.0"
@ -2906,6 +2953,33 @@
        "postcss": "^8.2.14"
      }
    },
+    "node_modules/postcss-nesting": {
+      "version": "12.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.2.tgz",
+      "integrity": "sha512-FUmTHGDNundodutB4PUBxt/EPuhgtpk8FJGRsBhOuy+6FnkR2A8RZWIsyyy6XmhvX2DZQQWIkvu+HB4IbJm+Ew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/selector-resolve-nested": "^1.1.0",
+        "@csstools/selector-specificity": "^3.0.3",
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
    "node_modules/postcss-selector-parser": {
      "version": "6.0.16",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
@ -3476,6 +3550,22 @@
        "tailwindcss": ">=3.0.0 || insiders"
      }
    },
+    "node_modules/tailwindcss/node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
    "node_modules/thenify": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -55,6 +55,8 @@
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
+    "postcss-import": "^16.1.0",
+    "postcss-nesting": "^12.1.2",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@ -1,6 +1,9 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+  plugins: [
+    "postcss-import",
+    "tailwindcss/nesting",
+    "postcss-nesting",
+    "autoprefixer",
+    "tailwindcss",
+  ],
+}