LocalPullAT

.gitattributes

@@ -1 +0,0 @@
-public/banner.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -10,13 +10,10 @@ license: mit
 short_description: Generate any application with DeepSeek
 models:
   - deepseek-ai/DeepSeek-V3-0324
-  - deepseek-ai/DeepSeek-R1-0528
 ---
 
 # DeepSite 🐳
-
 DeepSite is a coding platform powered by DeepSeek AI, designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
 
 ## How to use it locally
-
-Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)
+Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)

components.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/assets/index.css",
-    "baseColor": "neutral",
-    "baseColorLight": "slate",
-    "baseColorDark": "neutral",
-    "cssVariables": false,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}

index.html

@@ -11,29 +11,6 @@
     helps you build websites with AI, no code required. Let's deploy your
     website with DeepSite and enjoy the magic of AI."
     />
-    <meta name="theme-color" content="#000000" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <meta name="apple-mobile-web-app-title" content="DeepSite" />
-    <meta name="msapplication-TileColor" content="#000000" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="DeepSite | Build with AI ✨" />
-    <meta
-      name="twitter:description"
-      content="DeepSite is a web development tool that
-    helps you build websites with AI, no code required. Let's deploy your
-    website with DeepSite and enjoy the magic of AI."
-    />
-    <meta name="twitter:image" content="/banner.png" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="DeepSite | Build with AI ✨" />
-    <meta
-      property="og:description"
-      content="DeepSite is a web development tool that
-    helps you build websites with AI, no code required. Let's deploy your
-    website with DeepSite and enjoy the magic of AI."
-    />
-    <meta property="og:image" content="/banner.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

package-lock.json

@@ -9,30 +9,15 @@
       "version": "0.0.0",
       "dependencies": {
         "@huggingface/hub": "^1.1.1",
-        "@huggingface/inference": "^4.0.2",
+        "@huggingface/inference": "^3.6.1",
         "@monaco-editor/react": "^4.7.0",
-        "@radix-ui/react-avatar": "^1.1.10",
-        "@radix-ui/react-dialog": "^1.1.14",
-        "@radix-ui/react-dropdown-menu": "^2.1.15",
-        "@radix-ui/react-popover": "^1.1.14",
-        "@radix-ui/react-select": "^2.2.5",
-        "@radix-ui/react-slot": "^1.2.3",
-        "@radix-ui/react-switch": "^1.2.5",
-        "@radix-ui/react-tabs": "^1.1.12",
-        "@radix-ui/react-toggle": "^1.1.9",
-        "@radix-ui/react-toggle-group": "^1.1.10",
-        "@radix-ui/react-tooltip": "^1.2.7",
         "@tailwindcss/vite": "^4.0.15",
         "@xenova/transformers": "^2.17.2",
         "body-parser": "^1.20.3",
-        "class-variance-authority": "^0.7.1",
         "classnames": "^2.5.1",
-        "clsx": "^2.1.1",
         "cookie-parser": "^1.4.7",
         "dotenv": "^16.4.7",
         "express": "^4.21.2",
-        "lucide-react": "^0.511.0",
-        "next-themes": "^0.4.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-icons": "^5.5.0",
@@ -40,14 +25,11 @@
         "react-speech-recognition": "^4.0.0",
         "react-toastify": "^11.0.5",
         "react-use": "^17.6.0",
-        "sonner": "^2.0.3",
-        "tailwind-merge": "^3.3.0",
         "tailwindcss": "^4.0.15"
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
         "@types/express": "^5.0.1",
-        "@types/node": "^22.15.21",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@types/react-speech-recognition": "^3.9.6",
@@ -56,7 +38,6 @@
         "eslint-plugin-react-hooks": "^5.1.0",
         "eslint-plugin-react-refresh": "^0.4.19",
         "globals": "^15.15.0",
-        "tw-animate-css": "^1.3.0",
         "typescript": "~5.7.2",
         "typescript-eslint": "^8.24.1",
         "vite": "^6.2.0"
@@ -191,11 +172,10 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
-      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
+      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -865,44 +845,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz",
-      "integrity": "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.9"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.0.tgz",
-      "integrity": "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.7.0",
-        "@floating-ui/utils": "^0.2.9"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
-      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
-      "license": "MIT",
-      "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.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
-      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
-      "license": "MIT"
-    },
     "node_modules/@huggingface/hub": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-1.1.1.tgz",
@@ -920,32 +862,29 @@
       "integrity": "sha512-HK6JTVB/nrgjOnbe77HFSENftfAp67AI4mHMR2x64Os1hvchuTT88M8fKEiyESSvqKFKwW4lQKkHva07p05AXw=="
     },
     "node_modules/@huggingface/inference": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.0.2.tgz",
-      "integrity": "sha512-XuWb8ocH7lA5kSdXrGnqshtRz3ocSBzEzxcp5xeAXLjgM1ocoIHq+RW8/Ti0xq3MeRGQWgUkYPCgDV/xgs8p4g==",
-      "license": "MIT",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-3.6.1.tgz",
+      "integrity": "sha512-EtQlbBqcZycPe+qiTEFI+wNHOMpG0gwNTaZSvYu1juN1p/1dEgqAb2GO31dxLgNev2PzH9d+9nm8GngOsIepJg==",
       "dependencies": {
-        "@huggingface/jinja": "^0.5.0",
-        "@huggingface/tasks": "^0.19.11"
+        "@huggingface/jinja": "^0.3.3",
+        "@huggingface/tasks": "^0.17.8"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@huggingface/jinja": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.5.0.tgz",
-      "integrity": "sha512-Ptc03/jGRiYRoi0bUYKZ14MkDslsBRT24oxmsvUlfYrvQMldrxCevhPnT+hfX8awKTT8/f/0ZBBWldoeAcMHdQ==",
-      "license": "MIT",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.3.3.tgz",
+      "integrity": "sha512-vQQr2JyWvVFba3Lj9es4q9vCl1sAc74fdgnEMoX8qHrXtswap9ge9uO3ONDzQB0cQ0PUyaKY2N6HaVbTBvSXvw==",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@huggingface/tasks": {
-      "version": "0.19.11",
-      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.11.tgz",
-      "integrity": "sha512-oBhSgVlg7Pp643MsH8BiI3OAXIMJNxdSiMtv4mApRZV8dmAz8oasKhg6CVKIplO7vAO7F6dkmMn4bYM64I2A9w==",
-      "license": "MIT"
+      "version": "0.17.9",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.17.9.tgz",
+      "integrity": "sha512-lV6RgCJkqy3p93FFxP9H4SGJmFcHAwr1FO+Zk56q/JWsf7Tdsel1DEo1Xfd3An7ZPWpc2Y9ldRecGo9efDYghg=="
     },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
@@ -1165,891 +1104,6 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
-    "node_modules/@radix-ui/number": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
-      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
-      "license": "MIT"
-    },
-    "node_modules/@radix-ui/primitive": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
-      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
-      "license": "MIT"
-    },
-    "node_modules/@radix-ui/react-arrow": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
-      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3"
-      },
-      "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-avatar": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
-      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-is-hydrated": "0.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "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-collection": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
-      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3"
-      },
-      "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.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-      "license": "MIT",
-      "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.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
-      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
-      "license": "MIT",
-      "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-dialog": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
-      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.7",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
-      },
-      "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-direction": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
-      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
-      "license": "MIT",
-      "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.10",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
-      "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-escape-keydown": "1.1.1"
-      },
-      "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-dropdown-menu": {
-      "version": "2.1.15",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
-      "integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-menu": "2.1.15",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "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.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
-      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
-      "license": "MIT",
-      "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.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
-      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1"
-      },
-      "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.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
-      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "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-menu": {
-      "version": "2.1.15",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
-      "integrity": "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.7",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.7",
-        "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-roving-focus": "1.1.10",
-        "@radix-ui/react-slot": "1.2.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
-      },
-      "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-popover": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",
-      "integrity": "sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.7",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.7",
-        "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
-      },
-      "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.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
-      "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-layout-effect": "1.1.1",
-        "@radix-ui/react-use-rect": "1.1.1",
-        "@radix-ui/react-use-size": "1.1.1",
-        "@radix-ui/rect": "1.1.1"
-      },
-      "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.9",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
-      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "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.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
-      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "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.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
-      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-slot": "1.2.3"
-      },
-      "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-roving-focus": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
-      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "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-select": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz",
-      "integrity": "sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/number": "1.1.1",
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.7",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.7",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.7",
-        "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1",
-        "@radix-ui/react-use-previous": "1.1.1",
-        "@radix-ui/react-visually-hidden": "1.2.3",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
-      },
-      "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.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2"
-      },
-      "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-switch": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.5.tgz",
-      "integrity": "sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-use-previous": "1.1.1",
-        "@radix-ui/react-use-size": "1.1.1"
-      },
-      "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-tabs": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz",
-      "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-roving-focus": "1.1.10",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "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-toggle": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.9.tgz",
-      "integrity": "sha512-ZoFkBBz9zv9GWer7wIjvdRxmh2wyc2oKWw6C6CseWd6/yq1DK/l5lJ+wnsmFwJZbBYqr02mrf8A2q/CVCuM3ZA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "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-toggle-group": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.10.tgz",
-      "integrity": "sha512-kiU694Km3WFLTC75DdqgM/3Jauf3rD9wxeS9XtyWFKsBUeZA337lC+6uUazT7I1DhanZ5gyD5Stf8uf2dbQxOQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-roving-focus": "1.1.10",
-        "@radix-ui/react-toggle": "1.1.9",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "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-tooltip": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.7.tgz",
-      "integrity": "sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.7",
-        "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-visually-hidden": "1.2.3"
-      },
-      "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-use-callback-ref": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
-      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
-      "license": "MIT",
-      "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.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
-      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-effect-event": "0.0.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "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-effect-event": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
-      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "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.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
-      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-callback-ref": "1.1.1"
-      },
-      "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-is-hydrated": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
-      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.5.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.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
-      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-      "license": "MIT",
-      "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-previous": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
-      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
-      "license": "MIT",
-      "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.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
-      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/rect": "1.1.1"
-      },
-      "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.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
-      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "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-visually-hidden": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
-      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3"
-      },
-      "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/rect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
-      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
-      "license": "MIT"
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.36.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.36.0.tgz",
@@ -2648,12 +1702,11 @@
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="
     },
     "node_modules/@types/node": {
-      "version": "22.15.21",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.21.tgz",
-      "integrity": "sha512-EV/37Td6c+MgKAbkcLG6vqZ2zEYHD7bvSrzqqs2RIhbA6w3x+Dqz8MZM3sP6kGTeLrdoOgKZe+Xja7tUB2DNkQ==",
-      "license": "MIT",
+      "version": "22.13.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.13.tgz",
+      "integrity": "sha512-ClsL5nMwKaBRwPcCvH8E7+nU4GxHVx1axNvMZTFHMEfNI7oahimt26P5zjVCRrjiIWj6YFXfE1v3dEp94wLcGQ==",
       "dependencies": {
-        "undici-types": "~6.21.0"
+        "undici-types": "~6.20.0"
       }
     },
     "node_modules/@types/qs": {
@@ -2680,7 +1733,7 @@
       "version": "19.0.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.4.tgz",
       "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
-      "devOptional": true,
+      "dev": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -3048,18 +2101,6 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
-    "node_modules/aria-hidden": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
-      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -3424,18 +2465,6 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
     },
-    "node_modules/class-variance-authority": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
-      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "clsx": "^2.1.1"
-      },
-      "funding": {
-        "url": "https://polar.sh/cva"
-      }
-    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -3445,7 +2474,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -3696,12 +2724,6 @@
         "node": ">=8"
       }
     },
-    "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==",
-      "license": "MIT"
-    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -4370,15 +3392,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "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==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -5088,15 +4101,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "0.511.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
-      "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5854,16 +4858,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/next-themes": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
-      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
-      }
-    },
     "node_modules/node-abi": {
       "version": "3.74.0",
       "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.74.0.tgz",
@@ -6393,53 +5387,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-remove-scroll": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.0.tgz",
-      "integrity": "sha512-sGsQtcjMqdQyijAHytfGEELB8FufGbfXIsvUTe+NLx1GDRJCXtCFLBLUI1eyZCKXXvbEU2C6gai0PZKoIE9Vbg==",
-      "license": "MIT",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.7",
-        "react-style-singleton": "^2.2.3",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.3",
-        "use-sidecar": "^1.1.3"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
-      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
-      "license": "MIT",
-      "dependencies": {
-        "react-style-singleton": "^2.2.2",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-speech-recognition": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/react-speech-recognition/-/react-speech-recognition-4.0.0.tgz",
@@ -6448,28 +5395,6 @@
         "react": ">=16.8.0"
       }
     },
-    "node_modules/react-style-singleton": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
-      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
-      "license": "MIT",
-      "dependencies": {
-        "get-nonce": "^1.0.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-toastify": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
@@ -6950,16 +5875,6 @@
         "is-arrayish": "^0.3.1"
       }
     },
-    "node_modules/sonner": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.3.tgz",
-      "integrity": "sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
-        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -7116,16 +6031,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/tailwind-merge": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.0.tgz",
-      "integrity": "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
     "node_modules/tailwindcss": {
       "version": "4.0.15",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.15.tgz",
@@ -7254,16 +6159,6 @@
         "node": "*"
       }
     },
-    "node_modules/tw-animate-css": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.0.tgz",
-      "integrity": "sha512-jrJ0XenzS9KVuDThJDvnhalbl4IYiMQ/XvpA0a2FL8KmlK+6CSMviO7ROY/I7z1NnUs5NnDhlM6fXmF40xPxzw==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/Wombosvideo"
-      }
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -7324,10 +6219,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
-      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "license": "MIT"
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="
     },
     "node_modules/unified": {
       "version": "11.0.5",
@@ -7457,58 +6351,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-callback-ref": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
-      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-sidecar": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
-      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
-      "license": "MIT",
-      "dependencies": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -12,30 +12,15 @@
   },
   "dependencies": {
     "@huggingface/hub": "^1.1.1",
-    "@huggingface/inference": "^4.0.2",
+    "@huggingface/inference": "^3.6.1",
     "@monaco-editor/react": "^4.7.0",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.0.15",
     "@xenova/transformers": "^2.17.2",
     "body-parser": "^1.20.3",
-    "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
-    "clsx": "^2.1.1",
     "cookie-parser": "^1.4.7",
     "dotenv": "^16.4.7",
     "express": "^4.21.2",
-    "lucide-react": "^0.511.0",
-    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
@@ -43,14 +28,11 @@
     "react-speech-recognition": "^4.0.0",
     "react-toastify": "^11.0.5",
     "react-use": "^17.6.0",
-    "sonner": "^2.0.3",
-    "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.0.15"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/express": "^5.0.1",
-    "@types/node": "^22.15.21",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@types/react-speech-recognition": "^3.9.6",
@@ -59,7 +41,6 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
-    "tw-animate-css": "^1.3.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0"

server.js

@@ -14,7 +14,7 @@ import { InferenceClient } from "@huggingface/inference";
 import bodyParser from "body-parser";
 
 import checkUser from "./middlewares/checkUser.js";
-import { MODELS, PROVIDERS } from "./utils/providers.js";
+import { PROVIDERS } from "./utils/providers.js";
 import { COLORS } from "./utils/colors.js";
 
 // Load environment variables from .env file
@@ -30,12 +30,9 @@ const __dirname = path.dirname(__filename);
 const PORT = process.env.APP_PORT || 3000;
 const REDIRECT_URI =
   process.env.REDIRECT_URI || `http://localhost:${PORT}/auth/login`;
+const MODEL_ID = "deepseek-ai/DeepSeek-V3-0324";
 const MAX_REQUESTS_PER_IP = 2;
 
-const SEARCH_START = "<<<<<<< SEARCH";
-const DIVIDER = "=======";
-const REPLACE_END = ">>>>>>> REPLACE";
-
 app.use(cookieParser());
 app.use(bodyParser.json());
 app.use(express.static(path.join(__dirname, "dist")));
@@ -204,9 +201,6 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
     await uploadFiles({
       repo,
       files,
-      commitTitle: `${prompts[prompts.length - 1]} - ${
-        prompts.length > 1 ? "Follow Up" : "Initial"
-      } Deployment`,
       accessToken: hf_token,
     });
     return res.status(200).send({ ok: true, path: repo.name });
@@ -219,42 +213,16 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 });
 
 app.post("/api/ask-ai", async (req, res) => {
-  const { prompt, provider, model, redesignMarkdown } = req.body;
-  if (!model) {
+  const { prompt, html, previousPrompt, provider } = req.body;
+  if (!prompt) {
     return res.status(400).send({
       ok: false,
       message: "Missing required fields",
     });
   }
-  if (!redesignMarkdown && !prompt) {
-    return res.status(400).send({
-      ok: false,
-      message: "Missing required fields",
-    });
-  }
-
-  const initialSystemPrompt = `ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. MAKE IT RESPONSIVE USING TAILWINDCSS. Use as much as you can TailwindCSS for the CSS, if you can't do something with TailwindCSS, then use custom CSS (make sure to import <script src="https://cdn.tailwindcss.com"></script> in the head). Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE`;
-
-  const selectedModel = MODELS.find(
-    (m) => m.value === model || m.label === model
-  );
-  if (!selectedModel) {
-    return res.status(400).send({
-      ok: false,
-      message: "Invalid model selected",
-    });
-  }
-  if (!selectedModel.providers.includes(provider) && provider !== "auto") {
-    return res.status(400).send({
-      ok: false,
-      openSelectProvider: true,
-      message: `The selected model does not support the ${provider} provider.`,
-    });
-  }
 
   let { hf_token } = req.cookies;
   let token = hf_token;
-  let billTo = null;
 
   if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
     token = process.env.HF_TOKEN;
@@ -278,7 +246,6 @@ app.post("/api/ask-ai", async (req, res) => {
     }
 
     token = process.env.DEFAULT_HF_TOKEN;
-    billTo = "huggingface";
   }
 
   // Set up response headers for streaming
@@ -290,11 +257,13 @@ app.post("/api/ask-ai", async (req, res) => {
   let completeResponse = "";
 
   let TOKENS_USED = prompt?.length;
+  if (previousPrompt) TOKENS_USED += previousPrompt.length;
+  if (html) TOKENS_USED += html.length;
 
   const DEFAULT_PROVIDER = PROVIDERS.novita;
   const selectedProvider =
     provider === "auto"
-      ? PROVIDERS[selectedModel.autoProvider]
+      ? DEFAULT_PROVIDER
       : PROVIDERS[provider] ?? DEFAULT_PROVIDER;
 
   if (provider !== "auto" && TOKENS_USED >= selectedProvider.max_tokens) {
@@ -304,27 +273,43 @@ app.post("/api/ask-ai", async (req, res) => {
       message: `Context is too long. ${selectedProvider.name} allow ${selectedProvider.max_tokens} max tokens.`,
     });
   }
+
   try {
-    const chatCompletion = client.chatCompletionStream(
-      {
-        model: selectedModel.value,
-        provider: selectedProvider.id,
-        messages: [
-          {
-            role: "system",
-            content: initialSystemPrompt,
-          },
-          {
-            role: "user",
-            content: redesignMarkdown
-              ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown.`
-              : prompt,
-          },
-        ],
-        max_tokens: selectedProvider.max_tokens,
-      },
-      billTo ? { billTo } : {}
-    );
+    const chatCompletion = client.chatCompletionStream({
+      model: MODEL_ID,
+      provider: selectedProvider.id,
+      messages: [
+        {
+          role: "system",
+          content: `ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. Use as much as you can TailwindCSS for the CSS, if you can't do something with TailwindCSS, then use custom CSS (make sure to import <script src="https://cdn.tailwindcss.com"></script> in the head). Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE`,
+        },
+        ...(previousPrompt
+          ? [
+              {
+                role: "user",
+                content: previousPrompt,
+              },
+            ]
+          : []),
+        ...(html
+          ? [
+              {
+                role: "assistant",
+                content: `The current code is: ${html}.`,
+              },
+            ]
+          : []),
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      ...(selectedProvider.id !== "sambanova"
+        ? {
+            max_tokens: selectedProvider.max_tokens,
+          }
+        : {}),
+    });
 
     while (true) {
       const { done, value } = await chatCompletion.next();
@@ -333,37 +318,23 @@ app.post("/api/ask-ai", async (req, res) => {
       }
       const chunk = value.choices[0]?.delta?.content;
       if (chunk) {
-        let newChunk = chunk;
-        if (!selectedModel?.isThinker) {
-          if (provider !== "sambanova") {
-            res.write(chunk);
-            completeResponse += chunk;
-
-            if (completeResponse.includes("</html>")) {
-              break;
-            }
-          } else {
-            let newChunk = chunk;
-            if (chunk.includes("</html>")) {
-              newChunk = newChunk.replace(/<\/html>[\s\S]*/, "</html>");
-            }
-            completeResponse += newChunk;
-            res.write(newChunk);
-            if (newChunk.includes("</html>")) {
-              break;
-            }
+        if (provider !== "sambanova") {
+          res.write(chunk);
+          completeResponse += chunk;
+
+          if (completeResponse.includes("</html>")) {
+            break;
           }
         } else {
-          const lastThinkTagIndex = completeResponse.lastIndexOf("</think>");
+          let newChunk = chunk;
+          if (chunk.includes("</html>")) {
+            // Replace everything after the last </html> tag with an empty string
+            newChunk = newChunk.replace(/<\/html>[\s\S]*/, "</html>");
+          }
           completeResponse += newChunk;
           res.write(newChunk);
-          if (lastThinkTagIndex !== -1) {
-            const afterLastThinkTag = completeResponse.slice(
-              lastThinkTagIndex + "</think>".length
-            );
-            if (afterLastThinkTag.includes("</html>")) {
-              break;
-            }
+          if (newChunk.includes("</html>")) {
+            break;
           }
         }
       }
@@ -391,230 +362,6 @@ app.post("/api/ask-ai", async (req, res) => {
   }
 });
 
-app.put("/api/ask-ai", async (req, res) => {
-  const { prompt, html, previousPrompt } = req.body;
-  if (!prompt || !html) {
-    return res.status(400).send({
-      ok: false,
-      message: "Missing required fields",
-    });
-  }
-  const followUpSystemPrompt = `You are an expert web developer modifying an existing HTML file.
-The user wants to apply changes based on their request.
-You MUST output ONLY the changes required using the following SEARCH/REPLACE block format. Do NOT output the entire file.
-Explain the changes briefly *before* the blocks if necessary, but the code changes THEMSELVES MUST be within the blocks.
-Format Rules:
-1. Start with ${SEARCH_START}
-2. Provide the exact lines from the current code that need to be replaced.
-3. Use ${DIVIDER} to separate the search block from the replacement.
-4. Provide the new lines that should replace the original lines.
-5. End with ${REPLACE_END}
-6. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
-7. To insert code, use an empty SEARCH block (only ${SEARCH_START} and ${DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
-8. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only ${DIVIDER} and ${REPLACE_END} on their lines).
-9. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace.
-Example Modifying Code:
-\`\`\`
-Some explanation...
-${SEARCH_START}
-    <h1>Old Title</h1>
-${DIVIDER}
-    <h1>New Title</h1>
-${REPLACE_END}
-${SEARCH_START}
-  </body>
-${DIVIDER}
-    <script>console.log("Added script");</script>
-  </body>
-${REPLACE_END}
-\`\`\`
-Example Deleting Code:
-\`\`\`
-Removing the paragraph...
-${SEARCH_START}
-  <p>This paragraph will be deleted.</p>
-${DIVIDER}
-${REPLACE_END}
-\`\`\``;
-
-  // force to use deepseek-ai/DeepSeek-V3-0324 model, to avoid thinker models.
-  const selectedModel = MODELS[0];
-
-  let { hf_token } = req.cookies;
-  let token = hf_token;
-  let billTo = null;
-
-  if (process.env.HF_TOKEN && process.env.HF_TOKEN !== "") {
-    token = process.env.HF_TOKEN;
-  }
-
-  const ip =
-    req.headers["x-forwarded-for"]?.split(",")[0].trim() ||
-    req.headers["x-real-ip"] ||
-    req.socket.remoteAddress ||
-    req.ip ||
-    "0.0.0.0";
-
-  if (!token) {
-    ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
-    if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) {
-      return res.status(429).send({
-        ok: false,
-        openLogin: true,
-        message: "Log In to continue using the service",
-      });
-    }
-
-    token = process.env.DEFAULT_HF_TOKEN;
-    billTo = "huggingface";
-  }
-
-  const client = new InferenceClient(token);
-
-  const selectedProvider = PROVIDERS[selectedModel.autoProvider];
-  try {
-    const response = await client.chatCompletion(
-      {
-        model: selectedModel.value,
-        provider: selectedProvider.id,
-        messages: [
-          {
-            role: "system",
-            content: followUpSystemPrompt,
-          },
-          {
-            role: "user",
-            content: previousPrompt
-              ? previousPrompt
-              : "You are modifying the HTML file based on the user's request.",
-          },
-          {
-            role: "assistant",
-            content: `The current code is: \n\`\`\`html\n${html}\n\`\`\``,
-          },
-          {
-            role: "user",
-            content: prompt,
-          },
-        ],
-        ...(selectedProvider.id !== "sambanova"
-          ? {
-              max_tokens: selectedProvider.max_tokens,
-            }
-          : {}),
-      },
-      billTo ? { billTo } : {}
-    );
-
-    const chunk = response.choices[0]?.message?.content;
-    // TO DO: handle the case where there are multiple SEARCH/REPLACE blocks
-    if (!chunk) {
-      return res.status(400).send({
-        ok: false,
-        message: "No content returned from the model",
-      });
-    }
-
-    if (chunk) {
-      let newHtml = html;
-      // array of arrays to hold updated lines (start and end line numbers)
-      const updatedLines = [];
-
-      // Find all search/replace blocks in the chunk
-      let position = 0;
-      let moreBlocks = true;
-
-      while (moreBlocks) {
-        const searchStartIndex = chunk.indexOf(SEARCH_START, position);
-        if (searchStartIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
-
-        const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex);
-        if (dividerIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
-
-        const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex);
-        if (replaceEndIndex === -1) {
-          moreBlocks = false;
-          continue;
-        }
-
-        // Extract the search and replace blocks
-        const searchBlock = chunk.substring(
-          searchStartIndex + SEARCH_START.length,
-          dividerIndex
-        );
-        const replaceBlock = chunk.substring(
-          dividerIndex + DIVIDER.length,
-          replaceEndIndex
-        );
-
-        // Apply the replacement
-        if (searchBlock.trim() === "") {
-          // Inserting at the beginning
-          newHtml = `${replaceBlock}\n${newHtml}`;
-
-          // Track first line as updated
-          updatedLines.push([1, replaceBlock.split("\n").length]);
-        } else {
-          // Find the position of the search block in the HTML
-          const blockPosition = newHtml.indexOf(searchBlock);
-          if (blockPosition !== -1) {
-            // Count lines before the search block
-            const beforeText = newHtml.substring(0, blockPosition);
-            const startLineNumber = beforeText.split("\n").length;
-
-            // Count lines in search and replace blocks
-            const replaceLines = replaceBlock.split("\n").length;
-
-            // Calculate end line (start + length of replaced content)
-            const endLineNumber = startLineNumber + replaceLines - 1;
-
-            // Track the line numbers that were updated
-            updatedLines.push([startLineNumber, endLineNumber]);
-
-            // Perform the replacement
-            newHtml = newHtml.replace(searchBlock, replaceBlock);
-          }
-        }
-
-        // Move position to after this block to find the next one
-        position = replaceEndIndex + REPLACE_END.length;
-      }
-
-      return res.status(200).send({
-        ok: true,
-        html: newHtml,
-        updatedLines,
-      });
-    } else {
-      return res.status(400).send({
-        ok: false,
-        message: "No content returned from the model",
-      });
-    }
-  } catch (error) {
-    if (error.message.includes("exceeded your monthly included credits")) {
-      return res.status(402).send({
-        ok: false,
-        openProModal: true,
-        message: error.message,
-      });
-    }
-    if (!res.headersSent) {
-      res.status(500).send({
-        ok: false,
-        message:
-          error.message || "An error occurred while processing your request.",
-      });
-    }
-  }
-});
-
 app.get("/api/remix/:username/:repo", async (req, res) => {
   const { username, repo } = req.params;
   const { hf_token } = req.cookies;
@@ -683,43 +430,6 @@ app.get("/api/remix/:username/:repo", async (req, res) => {
     });
   }
 });
-
-app.post("/api/re-design", async (req, res) => {
-  const { url } = req.body;
-  if (!url) {
-    return res.status(400).send({
-      ok: false,
-      message: "Missing required fields",
-    });
-  }
-
-  // call the api https://r.jina.ai/{url} and return the response
-  try {
-    const response = await fetch(
-      `https://r.jina.ai/${encodeURIComponent(url)}`,
-      {
-        method: "POST",
-      }
-    );
-    if (!response.ok) {
-      return res.status(500).send({
-        ok: false,
-        message: "Failed to fetch redesign",
-      });
-    }
-    // return the html response
-    const markdown = await response.text();
-    return res.status(200).send({
-      ok: true,
-      markdown,
-    });
-  } catch (error) {
-    return res.status(500).send({
-      ok: false,
-      message: error.message,
-    });
-  }
-});
 app.get("*", (_req, res) => {
   res.sendFile(path.join(__dirname, "dist", "index.html"));
 });

src/assets/index.css

@@ -1,7 +1,4 @@
 @import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
 
 * {
   font-family: "Noto Sans";
@@ -10,133 +7,3 @@
 .font-code {
   font-family: "Source Code Pro";
 }
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-.monaco-editor .margin {
-  @apply !bg-neutral-900;
-}
-.monaco-editor .monaco-editor-background {
-  @apply !bg-neutral-900;
-}
-.monaco-editor .line-numbers {
-  @apply !text-neutral-500;
-}
-
-.matched-line {
-  @apply bg-sky-500/30;
-}

src/{views → components}/App.tsx

@@ -1,50 +1,45 @@
 import { useRef, useState } from "react";
+import Editor from "@monaco-editor/react";
+import classNames from "classnames";
+import { editor } from "monaco-editor";
 import {
-  useCopyToClipboard,
+  useMount,
+  useUnmount,
   useEvent,
   useLocalStorage,
-  useMount,
   useSearchParam,
-  useUnmount,
-  useUpdateEffect,
 } from "react-use";
-import Editor from "@monaco-editor/react";
-import { editor } from "monaco-editor";
-import { toast, Toaster } from "sonner";
-import classNames from "classnames";
-import { CopyIcon } from "lucide-react";
+import { toast } from "react-toastify";
 
-import { ThemeProvider } from "../components/theme/theme-provider";
-import Header from "../components/header/header";
-import { Auth, HtmlHistory } from "../../utils/types";
-import { defaultHTML } from "../../utils/consts";
-import DeployButton from "../components/deploy-button/deploy-button";
-import Preview from "../components/preview/preview";
-import Footer from "../components/footer/footer";
-import AskAI from "../components/ask-ai/ask-ai";
+import Header from "./header/header";
+import DeployButton from "./deploy-button/deploy-button";
+import { defaultHTML } from "./../../utils/consts";
+import Tabs from "./tabs/tabs";
+import AskAI from "./ask-ai/ask-ai";
+import { Auth } from "./../../utils/types";
+import Preview from "./preview/preview";
 
-export default function App() {
+function App() {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
   const remix = useSearchParam("remix");
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, copyToClipboard] = useCopyToClipboard();
 
   const preview = useRef<HTMLDivElement>(null);
   const editor = useRef<HTMLDivElement>(null);
   const resizer = useRef<HTMLDivElement>(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const monacoRef = useRef<any>(null);
 
+  const [isResizing, setIsResizing] = useState(false);
+  const [error, setError] = useState(false);
   const [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
   const [isAiWorking, setisAiWorking] = useState(false);
   const [auth, setAuth] = useState<Auth | undefined>(undefined);
+  const [currentView, setCurrentView] = useState<"editor" | "preview">(
+    "editor"
+  );
   const [prompts, setPrompts] = useState<string[]>([]);
-  const [device, setDevice] = useState<"desktop" | "mobile">("desktop");
-  const [htmlHistory, setHtmlHistory] = useState<HtmlHistory[]>([]);
-  const [currentTab, setCurrentTab] = useState("chat");
-  const [isResizing, setIsResizing] = useState(false);
+  const [htmlHistory, setHtmlHistory] = useState<
+    { html: string; createdAt: Date; prompt: string }[]
+  >([]);
 
   const fetchMe = async () => {
     const res = await fetch("/api/@me");
@@ -132,20 +127,36 @@ export default function App() {
     document.removeEventListener("mouseup", handleMouseUp);
   };
 
+  // Prevent accidental navigation away when AI is working or content has changed
+  useEvent("beforeunload", (e) => {
+    if (isAiWorking || html !== defaultHTML) {
+      e.preventDefault();
+      return "";
+    }
+  });
+
+  // Initialize component on mount
   useMount(() => {
+    // Fetch user data
     fetchMe();
     fetchRemix();
 
+    // Restore content from storage if available
     if (htmlStorage) {
       removeHtmlStorage();
-      toast.warning("Previous HTML content restored from local storage.");
+      toast.warn("Previous HTML content restored from local storage.");
     }
 
+    // Set initial layout based on window size
     resetLayout();
+
+    // Attach event listeners
     if (!resizer.current) return;
     resizer.current.addEventListener("mousedown", handleMouseDown);
     window.addEventListener("resize", resetLayout);
   });
+
+  // Clean up event listeners on unmount
   useUnmount(() => {
     document.removeEventListener("mousemove", handleResize);
     document.removeEventListener("mouseup", handleMouseUp);
@@ -155,178 +166,118 @@ export default function App() {
     window.removeEventListener("resize", resetLayout);
   });
 
-  // Prevent accidental navigation away when AI is working or content has changed
-  useEvent("beforeunload", (e) => {
-    if (isAiWorking || html !== defaultHTML) {
-      e.preventDefault();
-      return "";
-    }
-  });
-
-  useUpdateEffect(() => {
-    if (currentTab === "chat") {
-      // Reset editor width when switching to reasoning tab
-      resetLayout();
-      // re-add the event listener for resizing
-      if (resizer.current) {
-        resizer.current.addEventListener("mousedown", handleMouseDown);
-      }
-    } else {
-      if (preview.current) {
-        // Reset preview width when switching to preview tab
-        preview.current.style.width = "100%";
-      }
-    }
-  }, [currentTab]);
-
   return (
-    <ThemeProvider
-      defaultTheme="dark"
-      storageKey="deepsite-ui-theme"
-      className="h-screen bg-slate-100 dark:bg-neutral-950 flex flex-col"
-    >
-      <Header tab={currentTab} onNewTab={setCurrentTab}>
+    <div className="h-screen bg-gray-950 font-sans overflow-hidden">
+      <Header
+        onReset={() => {
+          if (isAiWorking) {
+            toast.warn("Please wait for the AI to finish working.");
+            return;
+          }
+          if (
+            window.confirm("You're about to reset the editor. Are you sure?")
+          ) {
+            setHtml(defaultHTML);
+            setError(false);
+            removeHtmlStorage();
+            editorRef.current?.revealLine(
+              editorRef.current?.getModel()?.getLineCount() ?? 0
+            );
+          }
+        }}
+      >
         <DeployButton
           html={html}
+          error={error}
           auth={auth}
           setHtml={setHtml}
           prompts={prompts}
         />
       </Header>
-      <main className="bg-neutral-950 flex-1 max-lg:flex-col flex w-full">
-        {currentTab === "chat" && (
-          <>
-            <div ref={editor} className="relative">
-              <CopyIcon
-                className="size-4 absolute top-2 right-5 text-neutral-500 hover:text-neutral-300 z-2 cursor-pointer"
-                onClick={() => {
-                  copyToClipboard(html);
-                  toast.success("HTML copied to clipboard!");
-                }}
-              />
-              <Editor
-                language="html"
-                theme="vs-dark"
-                className={classNames(
-                  "h-[calc(100dvh-98px)] lg:h-full bg-neutral-900 transition-all duration-200 ",
-                  {
-                    "pointer-events-none": isAiWorking,
-                  }
-                )}
-                options={{
-                  colorDecorators: true,
-                  fontLigatures: true,
-                  theme: "vs-dark",
-                  minimap: { enabled: false },
-                  scrollbar: {
-                    horizontal: "hidden",
-                  },
-                }}
-                value={html}
-                onChange={(value) => {
-                  const newValue = value ?? "";
-                  setHtml(newValue);
-                }}
-                onMount={(editor, monaco) => {
-                  editorRef.current = editor;
-                  monacoRef.current = monaco;
-                }}
-              />
-              <AskAI
-                html={html}
-                setHtml={(newHtml: string) => {
-                  setHtml(newHtml);
-                }}
-                htmlHistory={htmlHistory}
-                onSuccess={(
-                  finalHtml: string,
-                  p: string,
-                  updatedLines?: number[][]
-                ) => {
-                  const currentHistory = [...htmlHistory];
-                  currentHistory.unshift({
-                    html: finalHtml,
-                    createdAt: new Date(),
-                    prompt: p,
-                  });
-                  setHtmlHistory(currentHistory);
-                  // if xs or sm
-                  if (window.innerWidth <= 1024) {
-                    setCurrentTab("preview");
-                  }
-                  if (updatedLines && updatedLines?.length > 0) {
-                    const decorations = updatedLines.map((line) => ({
-                      range: new monacoRef.current.Range(
-                        line[0],
-                        1,
-                        line[1],
-                        1
-                      ),
-                      options: {
-                        inlineClassName: "matched-line",
-                      },
-                    }));
-                    setTimeout(() => {
-                      editorRef?.current
-                        ?.getModel()
-                        ?.deltaDecorations([], decorations);
-
-                      editorRef.current?.revealLine(updatedLines[0][0]);
-                    }, 100);
-                  }
-                }}
-                isAiWorking={isAiWorking}
-                setisAiWorking={setisAiWorking}
-                onNewPrompt={(prompt: string) => {
-                  setPrompts((prev) => [...prev, prompt]);
-                }}
-                onScrollToBottom={() => {
-                  editorRef.current?.revealLine(
-                    editorRef.current?.getModel()?.getLineCount() ?? 0
-                  );
-                }}
-              />
-            </div>
-            <div
-              ref={resizer}
-              className="bg-neutral-800 hover:bg-sky-500 active:bg-sky-500 w-1.5 cursor-col-resize h-full max-lg:hidden"
+      <main className="max-lg:flex-col flex w-full">
+        <div
+          ref={editor}
+          className={classNames(
+            "w-full h-[calc(100dvh-49px)] lg:h-[calc(100dvh-54px)] relative overflow-hidden max-lg:transition-all max-lg:duration-200 select-none",
+            {
+              "max-lg:h-0": currentView === "preview",
+            }
+          )}
+        >
+          <Tabs htmlHistory={htmlHistory} setHtml={setHtml} />
+          <div
+            onClick={(e) => {
+              if (isAiWorking) {
+                e.preventDefault();
+                e.stopPropagation();
+                toast.warn("Please wait for the AI to finish working.");
+              }
+            }}
+          >
+            <Editor
+              language="html"
+              theme="vs-dark"
+              className={classNames(
+                "h-[calc(100dvh-90px)] lg:h-[calc(100dvh-96px)]",
+                {
+                  "pointer-events-none": isAiWorking,
+                }
+              )}
+              value={html}
+              onValidate={(markers) => {
+                if (markers?.length > 0) {
+                  setError(true);
+                }
+              }}
+              onChange={(value) => {
+                const newValue = value ?? "";
+                setHtml(newValue);
+                setError(false);
+              }}
+              onMount={(editor) => (editorRef.current = editor)}
             />
-          </>
-        )}
+          </div>
+          <AskAI
+            html={html}
+            setHtml={(newHtml: string) => {
+              setHtml(newHtml);
+            }}
+            onSuccess={(finalHtml: string, p: string) => {
+              const currentHistory = [...htmlHistory];
+              currentHistory.unshift({
+                html: finalHtml,
+                createdAt: new Date(),
+                prompt: p,
+              });
+              setHtmlHistory(currentHistory);
+            }}
+            isAiWorking={isAiWorking}
+            setisAiWorking={setisAiWorking}
+            setView={setCurrentView}
+            onNewPrompt={(prompt) => {
+              setPrompts((prev) => [...prev, prompt]);
+            }}
+            onScrollToBottom={() => {
+              editorRef.current?.revealLine(
+                editorRef.current?.getModel()?.getLineCount() ?? 0
+              );
+            }}
+          />
+        </div>
+        <div
+          ref={resizer}
+          className="bg-gray-700 hover:bg-blue-500 w-2 cursor-col-resize h-[calc(100dvh-53px)] max-lg:hidden"
+        />
         <Preview
           html={html}
           isResizing={isResizing}
           isAiWorking={isAiWorking}
           ref={preview}
-          device={device}
-          currentTab={currentTab}
-          iframeRef={iframeRef}
+          setView={setCurrentView}
         />
       </main>
-      <Footer
-        onReset={() => {
-          if (isAiWorking) {
-            toast.warning("Please wait for the AI to finish working.");
-            return;
-          }
-          if (
-            window.confirm("You're about to reset the editor. Are you sure?")
-          ) {
-            setHtml(defaultHTML);
-            removeHtmlStorage();
-            editorRef.current?.revealLine(
-              editorRef.current?.getModel()?.getLineCount() ?? 0
-            );
-          }
-        }}
-        htmlHistory={htmlHistory}
-        setHtml={setHtml}
-        iframeRef={iframeRef}
-        auth={auth}
-        device={device}
-        setDevice={setDevice}
-      />
-      <Toaster richColors position="bottom-center" />
-    </ThemeProvider>
+    </div>
   );
 }
+
+export default App;

src/components/ask-ai/ask-ai.tsx

@@ -1,23 +1,19 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useRef } from "react";
+import { useState } from "react";
+import { RiSparkling2Fill } from "react-icons/ri";
+import { GrSend } from "react-icons/gr";
 import classNames from "classnames";
-import { toast } from "sonner";
-import { useLocalStorage, useUpdateEffect } from "react-use";
-import { ArrowUp, ChevronDown } from "lucide-react";
-import { FaStopCircle } from "react-icons/fa";
+import { toast } from "react-toastify";
+import { useCopyToClipboard, useLocalStorage } from "react-use";
+import { MdPreview } from "react-icons/md";
+import { IoCopy } from "react-icons/io5";
 
 import Login from "../login/login";
-import { defaultHTML } from "../../../utils/consts";
+import { defaultHTML } from "./../../../utils/consts";
 import SuccessSound from "./../../assets/success.mp3";
 import Settings from "../settings/settings";
 import ProModal from "../pro-modal/pro-modal";
-import { Button } from "../ui/button";
-// @ts-expect-error not needed
-import { MODELS } from "../../../utils/providers";
-import Loading from "../loading/loading";
-import { HtmlHistory } from "../../../utils/types";
-import InviteFriends from "../invite-friends/invite-friends";
-import ReImagine from "../re-imagine/re-imagine";
+// import SpeechPrompt from "../speech-prompt/speech-prompt";
 
 function AskAI({
   html,
@@ -25,6 +21,7 @@ function AskAI({
   onScrollToBottom,
   isAiWorking,
   setisAiWorking,
+  setView,
   onNewPrompt,
   onSuccess,
 }: {
@@ -33,198 +30,115 @@ function AskAI({
   onScrollToBottom: () => void;
   isAiWorking: boolean;
   onNewPrompt: (prompt: string) => void;
-  htmlHistory?: HtmlHistory[];
+  setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
-  onSuccess: (h: string, p: string, n?: number[][]) => void;
+  onSuccess: (h: string, p: string) => void;
 }) {
-  const refThink = useRef<HTMLDivElement | null>(null);
-
   const [open, setOpen] = useState(false);
   const [prompt, setPrompt] = useState("");
   const [hasAsked, setHasAsked] = useState(false);
   const [previousPrompt, setPreviousPrompt] = useState("");
   const [provider, setProvider] = useLocalStorage("provider", "auto");
-  const [model, setModel] = useLocalStorage("model", MODELS[0].value);
   const [openProvider, setOpenProvider] = useState(false);
   const [providerError, setProviderError] = useState("");
   const [openProModal, setOpenProModal] = useState(false);
-  const [think, setThink] = useState<string | undefined>(undefined);
-  const [openThink, setOpenThink] = useState(false);
-  const [isThinking, setIsThinking] = useState(true);
-  const [controller, setController] = useState<AbortController | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, copyToClipboard] = useCopyToClipboard();
 
   const audio = new Audio(SuccessSound);
   audio.volume = 0.5;
 
-  const callAi = async (redesignMarkdown?: string) => {
-    if (isAiWorking) return;
-    if (!redesignMarkdown && !prompt.trim()) return;
+  const callAi = async () => {
+    if (isAiWorking || !prompt.trim()) return;
     setisAiWorking(true);
     setProviderError("");
-    setThink("");
-    setOpenThink(false);
-    setIsThinking(true);
 
     let contentResponse = "";
-    let thinkResponse = "";
     let lastRenderTime = 0;
-
-    const isFollowUp = html !== defaultHTML;
-    const abortController = new AbortController();
-    setController(abortController);
     try {
       onNewPrompt(prompt);
-      if (isFollowUp && !redesignMarkdown) {
-        const request = await fetch("/api/ask-ai", {
-          method: "PUT",
-          body: JSON.stringify({
-            prompt,
-            provider,
-            previousPrompt,
-            html,
-          }),
-          headers: {
-            "Content-Type": "application/json",
-          },
-          signal: abortController.signal,
-        });
-        if (request && request.body) {
+      const request = await fetch("/api/ask-ai", {
+        method: "POST",
+        body: JSON.stringify({
+          prompt,
+          provider,
+          ...(html === defaultHTML ? {} : { html }),
+          ...(previousPrompt ? { previousPrompt } : {}),
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      if (request && request.body) {
+        if (!request.ok) {
           const res = await request.json();
-          if (!request.ok) {
-            if (res.openLogin) {
-              setOpen(true);
-            } else if (res.openSelectProvider) {
-              setOpenProvider(true);
-              setProviderError(res.message);
-            } else if (res.openProModal) {
-              setOpenProModal(true);
-            } else {
-              toast.error(res.message);
-            }
-            setisAiWorking(false);
-            return;
+          if (res.openLogin) {
+            setOpen(true);
+          } else if (res.openSelectProvider) {
+            setOpenProvider(true);
+            setProviderError(res.message);
+          } else if (res.openProModal) {
+            setOpenProModal(true);
+          } else {
+            toast.error(res.message);
           }
-          setHtml(res.html);
-          toast.success("AI responded successfully");
-          setPreviousPrompt(prompt);
-          setPrompt("");
           setisAiWorking(false);
-          onSuccess(res.html, prompt, res.updatedLines);
-          audio.play();
+          return;
         }
-      } else {
-        const request = await fetch("/api/ask-ai", {
-          method: "POST",
-          body: JSON.stringify({
-            prompt,
-            provider,
-            model,
-            redesignMarkdown,
-          }),
-          headers: {
-            "Content-Type": "application/json",
-          },
-          signal: abortController.signal,
-        });
-        if (request && request.body) {
-          if (!request.ok) {
-            const res = await request.json();
-            if (res.openLogin) {
-              setOpen(true);
-            } else if (res.openSelectProvider) {
-              setOpenProvider(true);
-              setProviderError(res.message);
-            } else if (res.openProModal) {
-              setOpenProModal(true);
-            } else {
-              toast.error(res.message);
-            }
+        const reader = request.body.getReader();
+        const decoder = new TextDecoder("utf-8");
+
+        const read = async () => {
+          const { done, value } = await reader.read();
+          if (done) {
+            toast.success("AI responded successfully");
+            setPreviousPrompt(prompt);
+            setPrompt("");
             setisAiWorking(false);
+            setHasAsked(true);
+            audio.play();
+            setView("preview");
+
+            // Now we have the complete HTML including </html>, so set it to be sure
+            const finalDoc = contentResponse.match(
+              /<!DOCTYPE html>[\s\S]*<\/html>/
+            )?.[0];
+            if (finalDoc) {
+              setHtml(finalDoc);
+            }
+            onSuccess(finalDoc ?? contentResponse, prompt);
+
             return;
           }
-          const reader = request.body.getReader();
-          const decoder = new TextDecoder("utf-8");
-          const selectedModel = MODELS.find(
-            (m: { value: string }) => m.value === model
-          );
-          let contentThink: string | undefined = undefined;
-          const read = async () => {
-            const { done, value } = await reader.read();
-            if (done) {
-              toast.success("AI responded successfully");
-              setPreviousPrompt(prompt);
-              setPrompt("");
-              setisAiWorking(false);
-              setHasAsked(true);
-              audio.play();
-
-              // Now we have the complete HTML including </html>, so set it to be sure
-              const finalDoc = contentResponse.match(
-                /<!DOCTYPE html>[\s\S]*<\/html>/
-              )?.[0];
-              if (finalDoc) {
-                setHtml(finalDoc);
-              }
-              onSuccess(finalDoc ?? contentResponse, prompt);
 
-              return;
+          const chunk = decoder.decode(value, { stream: true });
+          contentResponse += chunk;
+          const newHtml = contentResponse.match(/<!DOCTYPE html>[\s\S]*/)?.[0];
+          if (newHtml) {
+            // Force-close the HTML tag so the iframe doesn't render half-finished markup
+            let partialDoc = newHtml;
+            if (!partialDoc.includes("</html>")) {
+              partialDoc += "\n</html>";
             }
 
-            const chunk = decoder.decode(value, { stream: true });
-            thinkResponse += chunk;
-            if (selectedModel?.isThinker) {
-              const thinkMatch = thinkResponse.match(/<think>[\s\S]*/)?.[0];
-              if (thinkMatch && !thinkResponse?.includes("</think>")) {
-                if ((contentThink?.length ?? 0) < 3) {
-                  setOpenThink(true);
-                }
-                setThink(thinkMatch.replace("<think>", "").trim());
-                contentThink += chunk;
-                return read();
-              }
+            // Throttle the re-renders to avoid flashing/flicker
+            const now = Date.now();
+            if (now - lastRenderTime > 300) {
+              setHtml(partialDoc);
+              lastRenderTime = now;
             }
 
-            contentResponse += chunk;
-
-            const newHtml = contentResponse.match(
-              /<!DOCTYPE html>[\s\S]*/
-            )?.[0];
-            if (newHtml) {
-              setIsThinking(false);
-              let partialDoc = newHtml;
-              if (
-                partialDoc.includes("<head>") &&
-                !partialDoc.includes("</head>")
-              ) {
-                partialDoc += "\n</head>";
-              }
-              if (
-                partialDoc.includes("<body") &&
-                !partialDoc.includes("</body>")
-              ) {
-                partialDoc += "\n</body>";
-              }
-              if (!partialDoc.includes("</html>")) {
-                partialDoc += "\n</html>";
-              }
-
-              // Throttle the re-renders to avoid flashing/flicker
-              const now = Date.now();
-              if (now - lastRenderTime > 300) {
-                setHtml(partialDoc);
-                lastRenderTime = now;
-              }
-
-              if (partialDoc.length > 200) {
-                onScrollToBottom();
-              }
+            if (partialDoc.length > 200) {
+              onScrollToBottom();
             }
-            read();
-          };
-
+          }
           read();
-        }
+        };
+
+        read();
       }
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       setisAiWorking(false);
       toast.error(error.message);
@@ -234,124 +148,65 @@ function AskAI({
     }
   };
 
-  const stopController = () => {
-    if (controller) {
-      controller.abort();
-      setController(null);
-      setisAiWorking(false);
-      setThink("");
-      setOpenThink(false);
-      setIsThinking(false);
-    }
-  };
-
-  useUpdateEffect(() => {
-    if (refThink.current) {
-      refThink.current.scrollTop = refThink.current.scrollHeight;
-    }
-  }, [think]);
-
-  useUpdateEffect(() => {
-    if (!isThinking) {
-      setOpenThink(false);
-    }
-  }, [isThinking]);
-
   return (
-    <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-10 absolute bottom-3 left-3 w-[calc(100%-20px)] group">
-      {think && (
-        <div className="w-full border-b border-neutral-700 relative overflow-hidden">
-          <header
-            className="flex items-center justify-between px-5 py-2.5 group hover:bg-neutral-600/20 transition-colors duration-200 cursor-pointer"
-            onClick={() => {
-              setOpenThink(!openThink);
-            }}
-          >
-            <p className="text-sm font-medium text-neutral-300 group-hover:text-neutral-200 transition-colors duration-200">
-              {isThinking ? "DeepSite is thinking..." : "DeepSite's plan"}
-            </p>
-            <ChevronDown
-              className={classNames(
-                "size-4 text-neutral-400 group-hover:text-neutral-300 transition-all duration-200",
-                {
-                  "rotate-180": openThink,
-                }
-              )}
-            />
-          </header>
-          <main
-            ref={refThink}
-            className={classNames(
-              "overflow-y-auto transition-all duration-200 ease-in-out",
-              {
-                "max-h-[0px]": !openThink,
-                "min-h-[250px] max-h-[250px] border-t border-neutral-700":
-                  openThink,
-              }
-            )}
-          >
-            <p className="text-[13px] text-neutral-400 whitespace-pre-line px-5 pb-4 pt-3">
-              {think}
-            </p>
-          </main>
-        </div>
+    <div
+      className={`bg-gray-950 rounded-xl py-2 lg:py-2.5 pl-3.5 lg:pl-4 pr-2 lg:pr-2.5 absolute lg:sticky bottom-3 left-3 lg:bottom-4 lg:left-4 w-[calc(100%-1.5rem)] lg:w-[calc(100%-2rem)] z-10 group ${
+        isAiWorking ? "animate-pulse" : ""
+      }`}
+    >
+      {defaultHTML !== html && (
+        <p
+          className="text-xl text-white/50 hover:text-white/80 -translate-y-[calc(100%+8px)] absolute top-0 right-0 cursor-pointer"
+          onClick={() => {
+            copyToClipboard(html);
+            toast.success("HTML copied to clipboard");
+          }}
+        >
+          <IoCopy />
+        </p>
+      )}
+      {defaultHTML !== html && (
+        <button
+          className="bg-white lg:hidden -translate-y-[calc(100%+8px)] absolute left-0 top-0 shadow-md text-gray-950 text-xs font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-100 hover:brightness-150 transition-all duration-100 cursor-pointer"
+          onClick={() => setView("preview")}
+        >
+          <MdPreview className="text-sm" />
+          View Preview
+        </button>
       )}
       <div className="w-full relative flex items-center justify-between">
-        {isAiWorking && (
-          <div className="absolute bg-neutral-800 rounded-lg bottom-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-center justify-between max-lg:text-sm">
-            <div className="flex items-center justify-start gap-2">
-              <Loading overlay={false} className="!size-4" />
-              <p className="text-neutral-400 text-sm">
-                AI is {isThinking ? "thinking" : "coding"}...{" "}
-              </p>
-            </div>
-            <div
-              className="text-xs text-neutral-400 px-1 py-0.5 rounded-md border border-neutral-600 flex items-center justify-center gap-1.5 bg-neutral-800 hover:brightness-110 transition-all duration-200 cursor-pointer"
-              onClick={stopController}
-            >
-              <FaStopCircle />
-              Stop generation
-            </div>
-          </div>
-        )}
+        <RiSparkling2Fill className="text-lg lg:text-xl text-gray-500 group-focus-within:text-pink-500" />
         <input
           type="text"
           disabled={isAiWorking}
-          className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4"
+          className="w-full bg-transparent max-lg:text-sm outline-none px-3 text-white placeholder:text-gray-500 font-code"
           placeholder={
-            hasAsked ? "Ask DeepSite for edits" : "Ask DeepSite anything..."
+            hasAsked ? "What do you want to ask AI next?" : "Ask AI anything..."
           }
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
           onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
+            if (e.key === "Enter") {
               callAi();
             }
           }}
         />
-      </div>
-      <div className="flex items-center justify-between gap-2 px-4 pb-3">
-        <div className="flex-1 flex items-center justify-start gap-1.5">
-          <ReImagine onRedesign={(md) => callAi(md)} />
-          <InviteFriends />
-        </div>
         <div className="flex items-center justify-end gap-2">
+          {/* <SpeechPrompt setPrompt={setPrompt} /> */}
           <Settings
             provider={provider as string}
-            model={model as string}
             onChange={setProvider}
-            onModelChange={setModel}
             open={openProvider}
             error={providerError}
             onClose={setOpenProvider}
           />
-          <Button
-            size="iconXs"
-            disabled={isAiWorking || !prompt.trim()}
-            onClick={() => callAi()}
+          <button
+            disabled={isAiWorking}
+            className="relative overflow-hidden cursor-pointer flex-none flex items-center justify-center rounded-full text-sm font-semibold size-8 text-center bg-pink-500 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
+            onClick={callAi}
           >
-            <ArrowUp className="size-4" />
-          </Button>
+            <GrSend className="-translate-x-[1px]" />
+          </button>
         </div>
       </div>
       <div
@@ -365,7 +220,7 @@ function AskAI({
       ></div>
       <div
         className={classNames(
-          "absolute top-0 -translate-y-[calc(100%+8px)] right-0 z-10 w-80 border border-neutral-800 !bg-neutral-900 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          "absolute top-0 -translate-y-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
           {
             "opacity-0 pointer-events-none": !open,
           }

src/components/deploy-button/deploy-button.tsx

@@ -1,26 +1,43 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
-import { toast } from "sonner";
+import classNames from "classnames";
+import { toast } from "react-toastify";
+import { FaPowerOff } from "react-icons/fa6";
 
 import SpaceIcon from "@/assets/space.svg";
 import Loading from "../loading/loading";
 import Login from "../login/login";
 import { Auth } from "./../../../utils/types";
 import LoadButton from "../load-button/load-button";
-import { Button } from "../ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+
+const MsgToast = ({ url }: { url: string }) => (
+  <div className="w-full flex items-center justify-center gap-3">
+    Your space is live!
+    <button
+      className="bg-black text-sm block text-white rounded-md px-3 py-1.5 hover:bg-gray-900 cursor-pointer"
+      onClick={() => {
+        window.open(url, "_blank");
+      }}
+    >
+      See Space
+    </button>
+  </div>
+);
 
 function DeployButton({
   html,
+  error = false,
   auth,
   setHtml,
   prompts,
 }: {
   html: string;
+  error: boolean;
   auth?: Auth;
   setHtml: (html: string) => void;
   prompts: string[];
 }) {
+  const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [path, setPath] = useState<string | undefined>(undefined);
 
@@ -46,17 +63,14 @@ function DeployButton({
       });
       const response = await request.json();
       if (response.ok) {
-        toast.success("Your space is live! 🎉", {
-          action: {
-            label: "See Space",
-            onClick: () => {
-              window.open(
-                `https://huggingface.co/spaces/${response.path ?? path}`,
-                "_blank"
-              );
-            },
-          },
-        });
+        toast.success(
+          <MsgToast
+            url={`https://huggingface.co/spaces/${response.path ?? path}`}
+          />,
+          {
+            autoClose: 10000,
+          }
+        );
         setPath(response.path);
       } else {
         toast.error(response.message);
@@ -65,6 +79,7 @@ function DeployButton({
       toast.error(err.message);
     } finally {
       setLoading(false);
+      setOpen(false);
     }
   };
 
@@ -72,85 +87,135 @@ function DeployButton({
     <div className="flex items-center justify-end gap-5">
       <LoadButton auth={auth} setHtml={setHtml} setPath={setPath} />
       <div className="relative flex items-center justify-end">
-        <Popover>
-          <PopoverTrigger asChild>
-            <div>
-              <Button variant="pink" className="max-lg:hidden">
-                {path ? "Update Space" : "Deploy to Space"}
-              </Button>
-              <Button variant="pink" size="sm" className="lg:hidden">
-                {path ? "Update" : "Deploy"}
-              </Button>
-            </div>
-          </PopoverTrigger>
-          <PopoverContent
-            className="!rounded-2xl p-0 overflow-hidden !bg-neutral-900"
-            align="end"
-          >
-            {!auth ? (
-              <Login html={html}>
-                <p className="text-muted-foreground text-sm mb-3">
-                  Host this project for free and share it with your friends.
+        {auth &&
+          (auth.isLocalUse ? (
+            <>
+              <div className="bg-amber-500/10 border border-amber-10 text-amber-500 font-semibold leading-5 lg:leading-6 py-1 px-5 text-xs lg:text-sm rounded-md mr-4 select-none">
+                Local Usage
+              </div>
+            </>
+          ) : (
+            <>
+              <button
+                className="mr-2 cursor-pointer"
+                onClick={() => {
+                  if (confirm("Are you sure you want to log out?")) {
+                    // go to /auth/logout page
+                    window.location.href = "/auth/logout";
+                  }
+                }}
+              >
+                <FaPowerOff className="text-lg text-red-500" />
+              </button>
+              <p className="mr-3 text-xs lg:text-sm text-gray-300">
+                <span className="max-lg:hidden">Connected as </span>
+                <a
+                  href={`https://huggingface.co/${auth.preferred_username}`}
+                  target="_blank"
+                  className="underline hover:text-white"
+                >
+                  {auth.preferred_username}
+                </a>
+              </p>
+            </>
+          ))}
+        <button
+          className={classNames(
+            "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
+            {
+              "bg-pink-400": open,
+              "bg-pink-500": !open,
+            }
+          )}
+          onClick={() => setOpen(!open)}
+        >
+          {path ? "Update Space" : "Deploy to Space"}
+        </button>
+        <div
+          className={classNames(
+            "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
+            {
+              "opacity-0 pointer-events-none": !open,
+            }
+          )}
+          onClick={() => setOpen(false)}
+        ></div>
+        <div
+          className={classNames(
+            "absolute top-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+            {
+              "opacity-0 pointer-events-none": !open,
+            }
+          )}
+        >
+          {!auth ? (
+            <Login html={html}>
+              <p className="text-gray-500 text-sm mb-3">
+                Host this project for free and share it with your friends.
+              </p>
+            </Login>
+          ) : (
+            <>
+              <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+                <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+                  <img src={SpaceIcon} alt="Space Icon" className="size-4" />
+                  Space
+                </span>
+                Configure Deployment
+              </header>
+              <main className="px-4 pt-3 pb-4 space-y-3">
+                <p className="text-xs text-amber-600 bg-amber-500/10 rounded-md p-2">
+                  {path ? (
+                    <span>
+                      Your space is live at{" "}
+                      <a
+                        href={`https://huggingface.co/spaces/${path}`}
+                        target="_blank"
+                        className="underline hover:text-amber-700"
+                      >
+                        huggingface.co/{path}
+                      </a>
+                      . You can update it by deploying again.
+                    </span>
+                  ) : (
+                    "Deploy your project to a space on the Hub. Spaces are a way to share your project with the world."
+                  )}
                 </p>
-              </Login>
-            ) : (
-              <>
-                <header className="flex items-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
-                  <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
-                    <img src={SpaceIcon} alt="Space Icon" className="size-4" />
-                    Space
-                  </span>
-                  Configure Deployment
-                </header>
-                <main className="px-4 pt-3 pb-4 space-y-3">
-                  <p className="text-xs text-amber-600 bg-amber-500/10 rounded-md p-2">
-                    {path ? (
-                      <span>
-                        Your space is live at{" "}
-                        <a
-                          href={`https://huggingface.co/spaces/${path}`}
-                          target="_blank"
-                          className="underline hover:text-amber-700"
-                        >
-                          huggingface.co/{path}
-                        </a>
-                        . You can update it by deploying again.
-                      </span>
-                    ) : (
-                      "Deploy your project to a space on the Hub. Spaces are a way to share your project with the world."
-                    )}
+                {!path && (
+                  <label className="block">
+                    <p className="text-gray-600 text-sm font-medium mb-1.5">
+                      Space Title
+                    </p>
+                    <input
+                      type="text"
+                      value={config.title}
+                      className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
+                      placeholder="My Awesome Space"
+                      onChange={(e) =>
+                        setConfig({ ...config, title: e.target.value })
+                      }
+                    />
+                  </label>
+                )}
+                {error && (
+                  <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2">
+                    Your code has errors. Fix them before deploying.
                   </p>
-                  {!path && (
-                    <label className="block">
-                      <p className="text-muted-foreground text-sm mb-1.5">
-                        Space Title
-                      </p>
-                      <input
-                        type="text"
-                        value={config.title}
-                        className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
-                        placeholder="My Awesome Space"
-                        onChange={(e) =>
-                          setConfig({ ...config, title: e.target.value })
-                        }
-                      />
-                    </label>
-                  )}
-                  <div className="pt-2 text-right">
-                    <button
-                      disabled={loading || (!path && !config.title)}
-                      className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
-                      onClick={createSpace}
-                    >
-                      {path ? "Update Space" : "Create Space"}
-                      {loading && <Loading />}
-                    </button>
-                  </div>
-                </main>
-              </>
-            )}
-          </PopoverContent>
-        </Popover>
+                )}
+                <div className="pt-2 text-right">
+                  <button
+                    disabled={error || loading || (!path && !config.title)}
+                    className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
+                    onClick={createSpace}
+                  >
+                    {path ? "Update Space" : "Create Space"}
+                    {loading && <Loading />}
+                  </button>
+                </div>
+              </main>
+            </>
+          )}
+        </div>
       </div>
     </div>
   );

src/components/footer/footer.tsx

@@ -1,177 +0,0 @@
-import classNames from "classnames";
-import { FaMobileAlt, FaUserCircle } from "react-icons/fa";
-import { ChevronDown, LogOut, RefreshCcw, SparkleIcon } from "lucide-react";
-import { FaLaptopCode } from "react-icons/fa6";
-import { Auth, HtmlHistory } from "../../../utils/types";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-import { Button } from "../ui/button";
-import { MdAdd } from "react-icons/md";
-import History from "../history/history";
-
-const DEVICES = [
-  {
-    name: "desktop",
-    icon: FaLaptopCode,
-  },
-  {
-    name: "mobile",
-    icon: FaMobileAlt,
-  },
-];
-
-function Footer({
-  onReset,
-  auth,
-  htmlHistory,
-  setHtml,
-  device,
-  setDevice,
-  iframeRef,
-}: {
-  onReset: () => void;
-  auth?: Auth;
-  htmlHistory?: HtmlHistory[];
-  device: "desktop" | "mobile";
-  setHtml: (html: string) => void;
-  iframeRef?: React.RefObject<HTMLIFrameElement | null>;
-  setDevice: React.Dispatch<React.SetStateAction<"desktop" | "mobile">>;
-}) {
-  const handleRefreshIframe = () => {
-    if (iframeRef?.current) {
-      const iframe = iframeRef.current;
-      const content = iframe.srcdoc;
-      iframe.srcdoc = "";
-      setTimeout(() => {
-        iframe.srcdoc = content;
-      }, 10);
-    }
-  };
-
-  return (
-    <footer className="border-t bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 py-2 flex items-center justify-between sticky bottom-0 z-20">
-      <div className="flex items-center gap-2">
-        {auth &&
-          (auth?.isLocalUse ? (
-            <>
-              <div className="max-w-max bg-amber-500/10 rounded-full px-3 py-1 text-amber-500 border border-amber-500/20 text-sm font-semibold">
-                Local Usage
-              </div>
-            </>
-          ) : (
-            <>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <p className="mr-3 text-xs lg:text-sm text-gray-300 flex items-center gap-1 cursor-pointer hover:brightness-110">
-                    <ChevronDown className="size-4" />
-                    <Avatar className="size-6 mr-1">
-                      <AvatarImage src={auth?.picture} alt="@shadcn" />
-                      <AvatarFallback className="text-sm">
-                        {auth?.preferred_username?.charAt(0).toUpperCase() ??
-                          "E"}
-                      </AvatarFallback>
-                    </Avatar>
-                    {auth?.preferred_username ?? "enzostvs"}
-                  </p>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-56" align="start">
-                  <DropdownMenuLabel className="font-bold flex items-center gap-2 justify-start">
-                    <FaUserCircle className="" />
-                    My Account
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <a
-                      href="https://huggingface.co/settings/billing"
-                      target="_blank"
-                    >
-                      <DropdownMenuItem>Usage Quota</DropdownMenuItem>
-                    </a>
-                    <a
-                      href={`https://huggingface.co/${auth?.preferred_username}`}
-                      target="_blank"
-                    >
-                      <DropdownMenuItem>Hugging Face profile</DropdownMenuItem>
-                    </a>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onClick={() => {
-                      if (confirm("Are you sure you want to log out?")) {
-                        // go to /auth/logout page
-                        window.location.href = "/auth/logout";
-                      }
-                    }}
-                  >
-                    <LogOut className="size-4 text-red-500" />
-                    Log out
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </>
-          ))}
-        {auth && <p className="text-neutral-700">|</p>}
-        <Button size="sm" variant="secondary" onClick={onReset}>
-          <MdAdd className="text-sm" />
-          <span>New Project</span>
-        </Button>
-        {htmlHistory && htmlHistory.length > 0 && (
-          <>
-            <p className="text-neutral-700">|</p>
-            <History history={htmlHistory} setHtml={setHtml} />
-          </>
-        )}
-      </div>
-      <div className="flex justify-end items-center gap-2.5">
-        <a
-          href="https://huggingface.co/spaces/victor/deepsite-gallery"
-          target="_blank"
-        >
-          <Button size="sm" variant="ghost">
-            <SparkleIcon className="size-3.5" />
-            <span className="max-lg:hidden">DeepSite Gallery</span>
-          </Button>
-        </a>
-        <Button size="sm" variant="default" onClick={handleRefreshIframe}>
-          <RefreshCcw className="size-3.5" />
-          <span className="max-lg:hidden">Refresh Preview</span>
-        </Button>
-        <div className="flex items-center rounded-full p-0.5 bg-neutral-700/70 relative overflow-hidden z-0 max-lg:hidden gap-0.5">
-          <div
-            className={classNames(
-              "absolute left-0.5 top-0.5 rounded-full bg-white size-7 -z-[1] transition-all duration-200",
-              {
-                "translate-x-[calc(100%+2px)]": device === "mobile",
-              }
-            )}
-          />
-          {DEVICES.map((deviceItem) => (
-            <button
-              key={deviceItem.name}
-              className={classNames(
-                "rounded-full text-neutral-300 size-7 flex items-center justify-center cursor-pointer",
-                {
-                  "!text-black": device === deviceItem.name,
-                  "hover:bg-neutral-800": device !== deviceItem.name,
-                }
-              )}
-              onClick={() => setDevice(deviceItem.name as "desktop" | "mobile")}
-            >
-              <deviceItem.icon className="text-sm" />
-            </button>
-          ))}
-        </div>
-      </div>
-    </footer>
-  );
-}
-
-export default Footer;

src/components/header/header.tsx

@@ -1,68 +1,39 @@
 import { ReactNode } from "react";
-import { Eye, MessageCircleCode } from "lucide-react";
+import { MdAdd } from "react-icons/md";
 
 import Logo from "@/assets/logo.svg";
 
-import { Button } from "./../../components/ui/button";
-import classNames from "classnames";
-
-const TABS = [
-  {
-    value: "chat",
-    label: "Chat",
-    icon: MessageCircleCode,
-  },
-  {
-    value: "preview",
-    label: "Preview",
-    icon: Eye,
-  },
-];
-
 function Header({
-  tab,
-  onNewTab,
+  onReset,
   children,
 }: {
-  tab: string;
-  onNewTab: (tab: string) => void;
+  onReset: () => void;
   children?: ReactNode;
 }) {
   return (
-    <header className="border-b bg-slate-200 border-slate-300 dark:bg-neutral-950 dark:border-neutral-800 px-3 lg:px-6 py-2 grid grid-cols-3 sticky top-0 z-20">
+    <header className="border-b border-gray-900 bg-gray-950 px-3 lg:px-6 py-2 flex justify-between items-center sticky top-0 z-20">
       <div className="flex items-center justify-start gap-3">
-        <h1 className="text-neutral-900 dark:text-white text-lg lg:text-xl font-bold flex items-center justify-start">
+        <h1 className="text-white text-lg lg:text-xl font-bold flex items-center justify-start">
           <img
             src={Logo}
             alt="DeepSite Logo"
-            className="size-6 lg:size-8 mr-2 invert-100 dark:invert-0"
+            className="size-6 lg:size-8 mr-2"
           />
-          <p className="max-md:hidden flex items-center justify-start">
-            DeepSite
-            <span className="font-mono bg-gradient-to-br from-sky-500 to-emerald-500 text-neutral-950 rounded-full text-xs ml-2 px-1.5 py-0.5">
-              {" "}
-              v2
-            </span>
-          </p>
+          DeepSite
         </h1>
+        <p className="text-gray-700 max-md:hidden">|</p>
+        <button
+          className="max-md:hidden relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs font-semibold leading-4 py-1.5 px-3 hover:bg-gray-700 text-gray-100 shadow-sm dark:shadow-highlight/20 bg-gray-800"
+          onClick={onReset}
+        >
+          <MdAdd className="mr-1 text-base" />
+          New
+        </button>
+        <p className="text-gray-500 text-sm max-md:hidden">
+          Imagine and Share in 1-Click
+        </p>
       </div>
-      <div className="flex items-center justify-center gap-1">
-        {TABS.map((item) => (
-          <Button
-            key={item.value}
-            variant={tab === item.value ? "secondary" : "ghost"}
-            className={classNames("", {
-              "opacity-60": tab !== item.value,
-            })}
-            size="sm"
-            onClick={() => onNewTab(item.value)}
-          >
-            <item.icon className="size-4" />
-            <span className="hidden md:inline">{item.label}</span>
-          </Button>
-        ))}
-      </div>
-      <div className="flex items-center justify-end gap-3">{children}</div>
+      {children}
     </header>
   );
 }

src/components/history/history.tsx

@@ -1,138 +0,0 @@
-import { HtmlHistory } from "../../../utils/types";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { Button } from "../ui/button";
-
-export default function History({
-  history,
-  setHtml,
-}: {
-  history: HtmlHistory[];
-  setHtml: (html: string) => void;
-}) {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" size="sm" className="max-lg:hidden">
-          {history?.length} edit{history.length !== 1 ? "s" : ""}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="!rounded-2xl !p-0 overflow-hidden !bg-neutral-900"
-        align="start"
-      >
-        <header className="text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
-          History
-        </header>
-        <main className="px-4 space-y-3">
-          <ul className="max-h-[250px] overflow-y-auto">
-            {history?.map((item, index) => (
-              <li
-                key={index}
-                className="text-gray-300 text-xs py-2 border-b border-gray-800 last:border-0 flex items-center justify-between gap-2"
-              >
-                <div className="">
-                  <span className="line-clamp-1">{item.prompt}</span>
-                  <span className="text-gray-500 text-[10px]">
-                    {new Date(item.createdAt).toLocaleDateString("en-US", {
-                      month: "2-digit",
-                      day: "2-digit",
-                      year: "2-digit",
-                    }) +
-                      " " +
-                      new Date(item.createdAt).toLocaleTimeString("en-US", {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                        second: "2-digit",
-                        hour12: false,
-                      })}
-                  </span>
-                </div>
-                <button
-                  className="bg-pink-500 text-white text-xs font-medium rounded-md px-2 py-1 transition-all duration-100 hover:bg-pink-600 cursor-pointer"
-                  onClick={() => {
-                    setHtml(item.html);
-                  }}
-                >
-                  Select
-                </button>
-              </li>
-            ))}
-          </ul>
-        </main>
-      </PopoverContent>
-    </Popover>
-    // <div
-    //         className="relative"
-    //         onMouseEnter={() => setVisible(true)}
-    //         onMouseLeave={() => setVisible(false)}
-    //       >
-    //         <button
-    //           className={classNames(
-    //             "text-gray-400 hover:text-gray-300 cursor-pointer text-sm nderline flex items-center justify-start gap-1",
-    //             {
-    //               "!text-gray-300": visible,
-    //             }
-    //           )}
-    //         >
-    //           <IoTimeOutline />
-    //           {htmlHistory?.length} versions
-    //         </button>
-    //         <div
-    //           className={classNames(
-    //             "absolute bottom-0 left-0 min-w-sm w-full z-10 translate-y-full pt-2 transition-all duration-200",
-    //             {
-    //               "opacity-0 pointer-events-none": !visible,
-    //             }
-    //           )}
-    //         >
-    //           <div className="bg-gray-950 border border-gray-800 rounded-xl shadow-2xs p-4">
-    //             <p className="text-xs font-bold text-white">Version History</p>
-    //             <p className="text-gray-400 text-xs mt-1">
-    //               This is a list of the full history of what AI has done to
-    //               this.
-    //             </p>
-    //             <ul className="mt-2 max-h-[250px] overflow-y-auto">
-    //               {htmlHistory?.map((item, index) => (
-    //                 <li
-    //                   key={index}
-    //                   className="text-gray-300 text-xs py-2 border-b border-gray-800 last:border-0 flex items-center justify-between gap-2"
-    //                 >
-    //                   <div className="">
-    //                     <span className="line-clamp-1">{item.prompt}</span>
-    //                     <span className="text-gray-500 text-[10px]">
-    //                       {new Date(item.createdAt).toLocaleDateString(
-    //                         "en-US",
-    //                         {
-    //                           month: "2-digit",
-    //                           day: "2-digit",
-    //                           year: "2-digit",
-    //                         }
-    //                       ) +
-    //                         " " +
-    //                         new Date(item.createdAt).toLocaleTimeString(
-    //                           "en-US",
-    //                           {
-    //                             hour: "2-digit",
-    //                             minute: "2-digit",
-    //                             second: "2-digit",
-    //                             hour12: false,
-    //                           }
-    //                         )}
-    //                     </span>
-    //                   </div>
-    //                   <button
-    //                     className="bg-pink-500 text-white text-xs font-medium rounded-md px-2 py-1 transition-all duration-100 hover:bg-pink-600 cursor-pointer"
-    //                     onClick={() => {
-    //                       setHtml(item.html);
-    //                     }}
-    //                   >
-    //                     Select
-    //                   </button>
-    //                 </li>
-    //               ))}
-    //             </ul>
-    //           </div>
-    //         </div>
-    //       </div>
-  );
-}

src/components/invite-friends/invite-friends.tsx

@@ -1,78 +0,0 @@
-import { TiUserAdd } from "react-icons/ti";
-import { Link } from "lucide-react";
-import { FaXTwitter } from "react-icons/fa6";
-
-import { Button } from "../ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "../ui/dialog";
-import { useCopyToClipboard } from "react-use";
-import { toast } from "sonner";
-export default function InviteFriends() {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, copyToClipboard] = useCopyToClipboard();
-
-  return (
-    <Dialog>
-      <form>
-        <DialogTrigger asChild>
-          <Button
-            size="iconXs"
-            variant="outline"
-            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
-          >
-            <TiUserAdd className="size-4" />
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
-          <main>
-            <div className="flex items-center justify-start -space-x-4 mb-5">
-              <div className="size-11 rounded-full bg-pink-300 shadow-2xs flex items-center justify-center text-2xl">
-                😎
-              </div>
-              <div className="size-11 rounded-full bg-amber-300 shadow-2xs flex items-center justify-center text-2xl z-2">
-                😇
-              </div>
-              <div className="size-11 rounded-full bg-sky-300 shadow-2xs flex items-center justify-center text-2xl">
-                😜
-              </div>
-            </div>
-            <p className="text-xl font-semibold text-neutral-950 max-w-[200px]">
-              Invite your friends to join us!
-            </p>
-            <p className="text-sm text-neutral-500 mt-2 max-w-sm">
-              Support us and share the love and let them know about our awesome
-              platform.
-            </p>
-            <div className="mt-4 space-x-3.5">
-              <a
-                href="https://x.com/intent/post?url=https://enzostvs-deepsite.hf.space/&text=Checkout%20this%20awesome%20Ai%20Tool!%20Vibe%20coding%20has%20never%20been%20so%20easy✨"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Button
-                  variant="ghostWhite"
-                  size="sm"
-                  className="!text-neutral-700"
-                >
-                  <FaXTwitter className="size-4" />
-                  Share on
-                </Button>
-              </a>
-              <Button
-                variant="ghostWhite"
-                size="sm"
-                className="!text-neutral-700"
-                onClick={() => {
-                  copyToClipboard("https://enzostvs-deepsite.hf.space/");
-                  toast.success("Invite link copied to clipboard!");
-                }}
-              >
-                <Link className="size-4" />
-                Copy Invite Link
-              </Button>
-            </div>
-          </main>
-        </DialogContent>
-      </form>
-    </Dialog>
-  );
-}

src/components/load-button/load-button.tsx

@@ -1,13 +1,10 @@
 import classNames from "classnames";
 import { useState } from "react";
-import { toast } from "sonner";
+import { toast } from "react-toastify";
 
 import SpaceIcon from "@/assets/space.svg";
 import Loading from "../loading/loading";
 import { Auth } from "../../../utils/types";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { Input } from "../ui/input";
-import { Button } from "../ui/button";
 
 function LoadButton({
   auth,
@@ -20,6 +17,7 @@ function LoadButton({
 }) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
   const [url, setUrl] = useState<string | undefined>(undefined);
 
   const loadSpace = async () => {
@@ -40,10 +38,12 @@ function LoadButton({
         setOpen(false);
       } else {
         toast.error(data.message);
+        setError(data.message);
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       toast.error(error.message);
+      setError(error.message);
     }
     setLoading(false);
   };
@@ -54,73 +54,81 @@ function LoadButton({
         "border-r border-gray-700 pr-5": auth,
       })}
     >
-      <Popover>
-        <PopoverTrigger asChild>
-          <p
-            className="underline hover:text-white cursor-pointer text-xs lg:text-sm text-gray-300"
-            onClick={() => setOpen(!open)}
-          >
-            Load Space
-          </p>
-        </PopoverTrigger>
-        <PopoverContent
-          className="!rounded-2xl p-0 overflow-hidden !bg-neutral-900"
-          align="end"
-        >
-          <header className="flex items-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
-            <span className="text-xs bg-pink-500 text-white rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+      <p
+        className="underline hover:text-white cursor-pointer text-xs lg:text-sm text-gray-300"
+        onClick={() => setOpen(!open)}
+      >
+        Load Space
+      </p>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => setOpen(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-[calc(100%+8px)] right-2 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+      >
+        <>
+          <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+            <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
               <img src={SpaceIcon} alt="Space Icon" className="size-4" />
               Space
             </span>
             Load Project
           </header>
           <main className="px-4 pt-3 pb-4 space-y-3">
-            <p className="text-sm text-neutral-300 bg-neutral-300/15 border border-neutral-300/15 rounded-md px-3 py-2">
+            <p className="text-sm text-pink-600 bg-pink-100 rounded-md px-3 py-2">
               Load an existing DeepSite Space to continue working on it.
             </p>
             <label className="block">
-              <p className="text-muted-foreground text-sm mb-1.5">Space URL</p>
-              <Input
+              <p className="text-gray-600 text-sm font-medium mb-1.5">
+                Space URL
+              </p>
+              <input
                 type="text"
                 value={url}
-                onChange={(e) => setUrl(e.target.value)}
+                className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
                 placeholder="https://huggingface.co/spaces/username/space-name"
+                onChange={(e) => setUrl(e.target.value)}
+                onFocus={() => setError(false)}
                 onBlur={(e) => {
-                  if (!e.target.value) {
-                    return setUrl(undefined);
-                  }
-                  if (
-                    !e.target.value.startsWith(
-                      "https://huggingface.co/spaces/"
-                    ) &&
-                    !e.target.value.includes("/")
-                  ) {
-                    toast.error("Please enter a valid Hugging Face Space URL.");
-                    return;
-                  }
                   const pathParts = e.target.value.split("/");
                   setUrl(
                     `${pathParts[pathParts.length - 2]}/${
                       pathParts[pathParts.length - 1]
                     }`
                   );
+                  setError(false);
                 }}
               />
             </label>
+            {error && (
+              <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2 break-all">
+                {error}
+              </p>
+            )}
             <div className="pt-2 text-right">
-              <Button
-                size="sm"
-                variant="default"
-                disabled={loading || !url}
+              <button
+                disabled={error || loading || !url}
+                className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
                 onClick={loadSpace}
               >
-                Load space
+                Load Space
                 {loading && <Loading />}
-              </Button>
+              </button>
             </div>
           </main>
-        </PopoverContent>
-      </Popover>
+        </>
+      </div>
     </div>
   );
 }

src/components/loading/loading.tsx

@@ -1,21 +1,8 @@
-import classNames from "classnames";
-
-function Loading({
-  overlay = true,
-  className,
-}: {
-  overlay?: boolean;
-  className?: string;
-}) {
+function Loading() {
   return (
-    <div
-      className={classNames("", {
-        "absolute left-0 top-0 h-full w-full flex items-center justify-center z-20 bg-black/50 rounded-full":
-          overlay,
-      })}
-    >
+    <div className="absolute left-0 top-0 h-full w-full flex items-center justify-center bg-white/30 z-20">
       <svg
-        className={`size-5 animate-spin text-white ${className}`}
+        className="size-5 animate-spin text-white"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"

src/components/login/login.tsx

@@ -23,17 +23,17 @@ function Login({
 
   return (
     <>
-      <header className="flex items-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
-        <span className="text-xs bg-red-500 text-white rounded-full px-1.5 py-0.5 flex items-center justify-start gap-1.5">
+      <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+        <span className="text-xs bg-red-500/10 text-red-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
           REQUIRED
         </span>
         Login with Hugging Face
       </header>
       <main className="px-4 py-4 space-y-3">
         {children}
-        <button onClick={handleClick} className="cursor-pointer">
+        <button onClick={handleClick}>
           <img
-            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg.svg"
+            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg-dark.svg"
             alt="Sign in with Hugging Face"
             className="mx-auto"
           />

src/components/magicui/grid-pattern.tsx

@@ -1,69 +0,0 @@
-import { useId } from "react";
-import { cn } from "../../lib/utils";
-
-interface GridPatternProps extends React.SVGProps<SVGSVGElement> {
-  width?: number;
-  height?: number;
-  x?: number;
-  y?: number;
-  squares?: Array<[x: number, y: number]>;
-  strokeDasharray?: string;
-  className?: string;
-  [key: string]: unknown;
-}
-
-export function GridPattern({
-  width = 40,
-  height = 40,
-  x = -1,
-  y = -1,
-  strokeDasharray = "0",
-  squares,
-  className,
-  ...props
-}: GridPatternProps) {
-  const id = useId();
-
-  return (
-    <svg
-      aria-hidden="true"
-      className={cn(
-        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-neutral-700 -z-[1]",
-        className
-      )}
-      {...props}
-    >
-      <defs>
-        <pattern
-          id={id}
-          width={width}
-          height={height}
-          patternUnits="userSpaceOnUse"
-          x={x}
-          y={y}
-        >
-          <path
-            d={`M.5 ${height}V.5H${width}`}
-            fill="none"
-            strokeDasharray={strokeDasharray}
-          />
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
-      {squares && (
-        <svg x={x} y={y} className="overflow-visible">
-          {squares.map(([x, y]) => (
-            <rect
-              strokeWidth="0"
-              key={`${x}-${y}`}
-              width={width - 1}
-              height={height - 1}
-              x={x * width + 1}
-              y={y * height + 1}
-            />
-          ))}
-        </svg>
-      )}
-    </svg>
-  );
-}

src/components/preview/preview.tsx

@@ -1,77 +1,83 @@
 import classNames from "classnames";
-
-import { toast } from "sonner";
-import { GridPattern } from "./../magicui/grid-pattern";
-import { cn } from "../../lib/utils";
+import { useRef } from "react";
+import { TbReload } from "react-icons/tb";
+import { toast } from "react-toastify";
+import { FaLaptopCode } from "react-icons/fa6";
+import { defaultHTML } from "../../../utils/consts";
 
 function Preview({
   html,
   isResizing,
   isAiWorking,
+  setView,
   ref,
-  device,
-  currentTab,
-  iframeRef,
 }: {
   html: string;
   isResizing: boolean;
   isAiWorking: boolean;
+  setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
   ref: React.RefObject<HTMLDivElement | null>;
-  iframeRef?: React.RefObject<HTMLIFrameElement | null>;
-  device: "desktop" | "mobile";
-  currentTab: string;
 }) {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  const handleRefreshIframe = () => {
+    if (iframeRef.current) {
+      const iframe = iframeRef.current;
+      const content = iframe.srcdoc;
+      iframe.srcdoc = "";
+      setTimeout(() => {
+        iframe.srcdoc = content;
+      }, 10);
+    }
+  };
+
   return (
     <div
       ref={ref}
-      className={classNames(
-        "w-full border-l border-gray-900 h-full relative z-0 flex items-center justify-center",
-        {
-          "lg:p-4": currentTab !== "preview",
-        }
-      )}
+      className="w-full border-l border-gray-900 bg-white h-[calc(100dvh-49px)] lg:h-[calc(100dvh-53px)] relative"
       onClick={(e) => {
         if (isAiWorking) {
           e.preventDefault();
           e.stopPropagation();
-          toast.warning("Please wait for the AI to finish working.");
+          toast.warn("Please wait for the AI to finish working.");
         }
       }}
     >
-      <GridPattern
-        x={-1}
-        y={-1}
-        strokeDasharray={"4 2"}
-        className={cn(
-          "[mask-image:radial-gradient(900px_circle_at_center,white,transparent)]"
-        )}
-      />
       <iframe
-        id="preview-iframe"
         ref={iframeRef}
         title="output"
-        className={classNames(
-          "w-full select-none transition-all duration-200 bg-black max-lg:h-full",
-          {
-            "pointer-events-none": isResizing || isAiWorking,
-            "lg:max-w-md lg:mx-auto lg:h-[80dvh] lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl":
-              device === "mobile",
-            "h-full": device === "desktop",
-            "lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:rounded-[44px]":
-              currentTab !== "preview" && device === "desktop",
-          }
-        )}
+        className={classNames("w-full h-full select-none", {
+          "pointer-events-none": isResizing || isAiWorking,
+        })}
         srcDoc={html}
-        onLoad={() => {
-          if (iframeRef?.current?.contentWindow?.document?.body) {
-            iframeRef.current.contentWindow.document.body.scrollIntoView({
-              block: isAiWorking ? "end" : "start",
-              inline: "nearest",
-              behavior: isAiWorking ? "instant" : "smooth",
-            });
-          }
-        }}
       />
+      <div className="flex items-center justify-start gap-3 absolute bottom-3 lg:bottom-5 max-lg:left-3 lg:right-5">
+        <button
+          className="lg:hidden bg-gray-950 shadow-md text-white text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer"
+          onClick={() => setView("editor")}
+        >
+          <FaLaptopCode className="text-sm" />
+          Hide preview
+        </button>
+        {html === defaultHTML && (
+          <a
+            href="https://huggingface.co/spaces/victor/deepsite-gallery"
+            target="_blank"
+            className="bg-gray-200 text-gray-950 text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-200 hover:bg-gray-300 transition-all duration-100 cursor-pointer"
+          >
+            🖼️ <span>DeepSite Gallery</span>
+          </a>
+        )}
+        {!isAiWorking && (
+          <button
+            className="bg-white lg:bg-gray-950 shadow-md text-gray-950 lg:text-white text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-100 lg:border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer"
+            onClick={handleRefreshIframe}
+          >
+            <TbReload className="text-sm" />
+            Refresh Preview
+          </button>
+        )}
+      </div>
     </div>
   );
 }

src/components/pro-modal/pro-modal.tsx

@@ -1,8 +1,6 @@
+import classNames from "classnames";
 import { useLocalStorage } from "react-use";
 import { defaultHTML } from "../../../utils/consts";
-import { Dialog, DialogContent } from "../ui/dialog";
-import { Button } from "../ui/button";
-import { CheckCheck } from "lucide-react";
 
 function ProModal({
   open,
@@ -22,73 +20,51 @@ function ProModal({
   };
 
   return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
-        <main className="flex flex-col items-start text-left relative pt-2">
-          <div className="flex items-center justify-start -space-x-4 mb-5">
-            <div className="size-14 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
-              🚀
-            </div>
-            <div className="size-16 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-4xl z-2">
-              🤩
-            </div>
-            <div className="size-14 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
-              🥳
-            </div>
-          </div>
-          <p className="text-2xl font-bold text-neutral-950">
-            Only 9$ for unlimited access!
+    <>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-40",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => onClose(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-40 w-96 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+      >
+        <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+          <span className="bg-linear-to-br shadow-green-500/10 dark:shadow-green-500/20 inline-block -skew-x-12 border border-gray-200 from-pink-300 via-green-200 to-yellow-200 text-xs font-bold text-black shadow-lg dark:from-pink-500 dark:via-green-500 dark:to-yellow-500 dark:text-black rounded-lg px-2.5 py-0.5 ">
+            PRO
+          </span>
+          Your free inference quota is exhausted
+        </header>
+        <main className="px-4 pt-3 pb-4">
+          <p className="text-gray-950 text-sm font-semibold flex items-center justify-between">
+            Upgrade to a PRO account to activate Inference Providers and
+            continue using DeepSite.
           </p>
-          <p className="text-neutral-500 text-base mt-2 max-w-sm">
-            It seems like you have reached the monthly free limit of DeepSite.
+          <p className="text-sm text-pretty text-gray-500 mt-2">
+            It also unlocks thousands of Space apps powered by ZeroGPU for 3d,
+            audio, music, video and more!
           </p>
-          <hr className="bg-neutral-200 w-full max-w-[150px] my-6" />
-          <p className="text-lg mt-3 text-neutral-900 font-semibold">
-            Upgrade to a <ProTag className="mx-1" /> Account, and unlock:
-          </p>
-          <ul className="mt-3 space-y-1 text-neutral-500">
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              DeepSite unlimited access to all Inference Providers
-            </li>
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              Get highest priority and 8x more quota on Spaces ZeroGPU
-            </li>
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              Activate Dataset Viewer on private datasets
-            </li>
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              Get exclusive early access to new features and updates
-            </li>
-            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
-              <CheckCheck className="text-emerald-500 size-4" />
-              Get free credits across all Inference Providers
-            </li>
-            <li className="text-sm text-neutral-500 space-x-2 flex items-center justify-start gap-2 mt-3">
-              ... and much more!
-            </li>
-          </ul>
-          <Button
-            variant="gray"
-            size="lg"
-            className="w-full !text-base !h-11 mt-8"
+          <a
+            href="https://huggingface.co/subscribe/pro"
+            target="_blank"
+            className="mt-4 bg-black text-white cursor-pointer rounded-full py-2 px-3 text-sm font-medium w-full block text-center hover:bg-gray-800 transition duration-200 ease-in-out"
             onClick={handleProClick}
           >
             Subscribe to PRO ($9/month)
-          </Button>
+          </a>
         </main>
-      </DialogContent>
-    </Dialog>
+      </div>
+    </>
   );
 }
-const ProTag = ({ className }: { className?: string }) => (
-  <span
-    className={`${className} bg-linear-to-br shadow-green-500/10 dark:shadow-green-500/20 inline-block -skew-x-12 border border-gray-200 from-pink-300 via-green-200 to-yellow-200 text-xs font-bold text-black shadow-lg rounded-md px-2.5 py-0.5`}
-  >
-    PRO
-  </span>
-);
+
 export default ProModal;

src/components/re-imagine/re-imagine.tsx

@@ -1,136 +0,0 @@
-import { useState } from "react";
-import { Paintbrush } from "lucide-react";
-import { toast } from "sonner";
-
-import { Button } from "../ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { Input } from "../ui/input";
-import Loading from "../loading/loading";
-
-export default function ReImagine({
-  onRedesign,
-}: {
-  onRedesign: (md: string) => void;
-}) {
-  const [url, setUrl] = useState<string>("");
-  const [open, setOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const checkIfUrlIsValid = (url: string) => {
-    const urlPattern = new RegExp(
-      /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/,
-      "i"
-    );
-    return urlPattern.test(url);
-  };
-
-  const handleClick = async () => {
-    if (!url) {
-      toast.error("Please enter a URL.");
-      return;
-    }
-    if (!checkIfUrlIsValid(url)) {
-      toast.error("Please enter a valid URL.");
-      return;
-    }
-    // Here you would typically handle the re-design logic
-    setIsLoading(true);
-    const request = await fetch("/api/re-design", {
-      method: "POST",
-      body: JSON.stringify({ url }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    const response = await request.json();
-    if (response.ok) {
-      setOpen(false);
-      setUrl("");
-      onRedesign(response.markdown);
-      toast.success("DeepSite is re-designing your site! Let him cook... 🔥");
-    } else {
-      toast.error(response.message || "Failed to re-design the site.");
-    }
-    setIsLoading(false);
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <form>
-        <PopoverTrigger asChild>
-          <Button
-            size="iconXs"
-            variant="outline"
-            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
-          >
-            <Paintbrush className="size-4" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          className="!rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden"
-        >
-          <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
-            <div className="flex items-center justify-center -space-x-4 mb-3">
-              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                🎨
-              </div>
-              <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
-                🥳
-              </div>
-              <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
-                💎
-              </div>
-            </div>
-            <p className="text-xl font-semibold text-neutral-950">
-              Redesign your Site!
-            </p>
-            <p className="text-sm text-neutral-500 mt-1.5">
-              Try our new Redesign feature to give your site a fresh look.
-            </p>
-          </header>
-          <main className="space-y-4 p-6">
-            <div>
-              <p className="text-sm text-neutral-700 mb-2">
-                Enter your website URL to get started:
-              </p>
-              <Input
-                type="text"
-                placeholder="https://example.com"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-                onBlur={(e) => {
-                  const inputUrl = e.target.value.trim();
-                  if (!inputUrl) {
-                    setUrl("");
-                    return;
-                  }
-                  if (!checkIfUrlIsValid(inputUrl)) {
-                    toast.error("Please enter a valid URL.");
-                    return;
-                  }
-                  setUrl(inputUrl);
-                }}
-                className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
-              />
-            </div>
-            <div>
-              <p className="text-sm text-neutral-700 mb-2">
-                Then, let's redesign it!
-              </p>
-              <Button
-                variant="gray"
-                onClick={handleClick}
-                className="relative w-full"
-                disabled={isLoading}
-              >
-                Redesign <Paintbrush className="size-4" />
-                {isLoading && <Loading className="ml-2 size-4 animate-spin" />}
-              </Button>
-            </div>
-          </main>
-        </PopoverContent>
-      </form>
-    </Popover>
-  );
-}

src/components/settings/settings.tsx

@@ -1,195 +1,136 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import classNames from "classnames";
-import { PiGearSixFill } from "react-icons/pi";
-import { RiCheckboxCircleFill } from "react-icons/ri";
 
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { PiGearSixFill } from "react-icons/pi";
 // @ts-expect-error not needed
-import { PROVIDERS, MODELS } from "./../../../utils/providers";
-import { Button } from "../ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
-import { useMemo } from "react";
-import { useUpdateEffect } from "react-use";
+import { PROVIDERS } from "./../../../utils/providers";
 
 function Settings({
   open,
   onClose,
   provider,
-  model,
   error,
   onChange,
-  onModelChange,
 }: {
   open: boolean;
   provider: string;
-  model: string;
   error?: string;
   onClose: React.Dispatch<React.SetStateAction<boolean>>;
   onChange: (provider: string) => void;
-  onModelChange: (model: string) => void;
 }) {
-  const modelAvailableProviders = useMemo(() => {
-    const availableProviders = MODELS.find(
-      (m: { value: string }) => m.value === model
-    )?.providers;
-    if (!availableProviders) return Object.keys(PROVIDERS);
-    return Object.keys(PROVIDERS).filter((id) =>
-      availableProviders.includes(id)
-    );
-  }, [model]);
-
-  useUpdateEffect(() => {
-    if (provider !== "auto" && !modelAvailableProviders.includes(provider)) {
-      onChange("auto");
-    }
-  }, [model, provider]);
-
   return (
     <div className="">
-      <Popover open={open} onOpenChange={onClose}>
-        <PopoverTrigger asChild>
-          <Button variant="gray" size="sm">
-            <PiGearSixFill className="size-4" />
-            Settings
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="!rounded-2xl p-0 !w-96 overflow-hidden !bg-neutral-900"
-          align="center"
-        >
-          <header className="flex items-center text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
-            {/* <span className="text-xs bg-blue-500 text-white rounded-full px-1.5 py-0.5">
-              Provider
-            </span> */}
-            Customize Settings
-          </header>
-          <main className="px-4 pt-5 pb-6 space-y-5">
+      <button
+        className="relative overflow-hidden cursor-pointer flex-none flex items-center justify-center rounded-full text-base font-semibold size-8 text-center bg-gray-800 hover:bg-gray-700 text-gray-100 shadow-sm dark:shadow-highlight/20"
+        onClick={() => {
+          onClose((prev) => !prev);
+        }}
+      >
+        <PiGearSixFill />
+      </button>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-40",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => onClose(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-40 w-96 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+      >
+        <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+          <span className="text-xs bg-blue-500/10 text-blue-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+            Provider
+          </span>
+          Customize Settings
+        </header>
+        <main className="px-4 pt-3 pb-4 space-y-4">
+          {/* toggle using tailwind css */}
+          <div>
             <a
               href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/74"
               target="_blank"
-              className="w-full flex items-center justify-between text-neutral-300 bg-neutral-300/15 border border-neutral-300/15 pl-4 p-1.5 rounded-full text-sm font-medium hover:brightness-95"
+              className="w-full flex items-center justify-between text-gray-600 bg-gray-50 border border-gray-100 px-2 py-2 rounded-lg mb-3 text-sm font-medium hover:brightness-95"
             >
               How to use it locally?
-              <Button size="xs">See guide</Button>
+              <button className="bg-black text-white rounded-md px-3 py-1.5 text-xs font-semibold cursor-pointer">
+                See the guide
+              </button>
             </a>
-            {error !== "" && (
-              <p className="text-red-500 text-sm font-medium mb-2 flex items-center justify-between bg-red-500/10 p-2 rounded-md">
-                {error}
+            <div className="flex items-center justify-between">
+              <p className="text-gray-800 text-sm font-medium flex items-center justify-between">
+                Use auto-provider
               </p>
-            )}
-            <label className="block">
-              <p className="text-neutral-300 text-sm mb-2.5">
-                Choose a DeepSeek model
-              </p>
-              <Select defaultValue={model} onValueChange={onModelChange}>
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder="Select a DeepSeek model" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>DeepSeek models</SelectLabel>
-                    {MODELS.map(
-                      ({
-                        value,
-                        label,
-                        isNew = false,
-                      }: {
-                        value: string;
-                        label: string;
-                        isNew?: boolean;
-                      }) => (
-                        <SelectItem key={value} value={value} className="">
-                          {label}
-                          {isNew && (
-                            <span className="text-xs bg-gradient-to-br from-sky-400 to-sky-600 text-white rounded-full px-1.5 py-0.5">
-                              New
-                            </span>
-                          )}
-                        </SelectItem>
-                      )
-                    )}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </label>
-            <div className="flex flex-col gap-3">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-neutral-300 text-sm mb-1.5">
-                    Use auto-provider
-                  </p>
-                  <p className="text-xs text-neutral-400/70">
-                    We'll automatically select the best provider for you based
-                    on your prompt.
-                  </p>
-                </div>
+              <div
+                className={classNames(
+                  "bg-gray-200 rounded-full w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
+                  {
+                    "!bg-blue-500": provider === "auto",
+                  }
+                )}
+                onClick={() => {
+                  onChange(provider === "auto" ? "fireworks-ai" : "auto");
+                }}
+              >
                 <div
                   className={classNames(
-                    "bg-neutral-700 rounded-full min-w-10 w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
+                    "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-white",
                     {
-                      "!bg-sky-500": provider === "auto",
+                      "translate-x-4": provider === "auto",
                     }
                   )}
-                  onClick={() => {
-                    const foundModel = MODELS.find(
-                      (m: { value: string }) => m.value === model
-                    );
-                    if (provider === "auto") {
-                      onChange(foundModel.autoProvider);
-                    } else {
-                      onChange("auto");
+                />
+              </div>
+            </div>
+            <p className="text-xs text-gray-500 mt-2">
+              We'll automatically select the best provider for you based on your
+              prompt.
+            </p>
+          </div>
+          {error !== "" && (
+            <p className="text-red-500 text-sm font-medium mb-2 flex items-center justify-between bg-red-500/10 p-2 rounded-md">
+              {error}
+            </p>
+          )}
+          <label className="block">
+            <p className="text-gray-800 text-sm font-medium mb-2 flex items-center justify-between">
+              Inference Provider
+            </p>
+            <div className="grid grid-cols-2 gap-1.5">
+              {Object.keys(PROVIDERS).map((id: string) => (
+                <div
+                  key={id}
+                  className={classNames(
+                    "text-gray-600 text-sm font-medium cursor-pointer border p-2 rounded-md flex items-center justify-start gap-2",
+                    {
+                      "bg-blue-500/10 border-blue-500/15 text-blue-500":
+                        id === provider,
+                      "hover:bg-gray-100 border-gray-100": id !== provider,
                     }
+                  )}
+                  onClick={() => {
+                    onChange(id);
                   }}
                 >
-                  <div
-                    className={classNames(
-                      "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-neutral-200",
-                      {
-                        "translate-x-4": provider === "auto",
-                      }
-                    )}
+                  <img
+                    src={`/providers/${id}.svg`}
+                    alt={PROVIDERS[id].name}
+                    className="size-5"
                   />
+                  {PROVIDERS[id].name}
                 </div>
-              </div>
-              <label className="block">
-                <p className="text-neutral-300 text-sm mb-2">
-                  Inference Provider
-                </p>
-                <div className="grid grid-cols-2 gap-1.5">
-                  {modelAvailableProviders.map((id: string) => (
-                    <Button
-                      key={id}
-                      variant={id === provider ? "default" : "secondary"}
-                      size="sm"
-                      onClick={() => {
-                        onChange(id);
-                      }}
-                    >
-                      <img
-                        src={`/providers/${id}.svg`}
-                        alt={PROVIDERS[id].name}
-                        className="size-5 mr-2"
-                      />
-                      {PROVIDERS[id].name}
-                      {id === provider && (
-                        <RiCheckboxCircleFill className="ml-2 size-4 text-blue-500" />
-                      )}
-                    </Button>
-                  ))}
-                </div>
-              </label>
+              ))}
             </div>
-          </main>
-        </PopoverContent>
-      </Popover>
+          </label>
+        </main>
+      </div>
     </div>
   );
 }

src/components/tabs/tabs.tsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import classNames from "classnames";
+import { IoTimeOutline } from "react-icons/io5";
+
+import Deepseek from "./../../assets/deepseek-color.svg";
+
+function Tabs({
+  htmlHistory,
+  setHtml,
+  children,
+}: {
+  htmlHistory?: { html: string; createdAt: Date; prompt: string }[];
+  setHtml: (html: string) => void;
+  children?: React.ReactNode;
+}) {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div className="border-b border-gray-800 pl-4 lg:pl-7 pr-3 flex items-center justify-between">
+      <div className="flex items-center justify-start gap-4 flex-1">
+        <div
+          className="
+        space-x-6"
+        >
+          <button className="rounded-md text-sm cursor-pointer transition-all duration-100 font-medium relative py-2.5 text-white">
+            index.html
+            <span className="absolute bottom-0 left-0 h-0.5 w-full transition-all duration-100 bg-white" />
+          </button>
+        </div>
+        {htmlHistory && htmlHistory?.length > 1 && (
+          <div
+            className="relative"
+            onMouseEnter={() => setVisible(true)}
+            onMouseLeave={() => setVisible(false)}
+          >
+            <button
+              className={classNames(
+                "text-gray-400 hover:text-gray-300 cursor-pointer text-sm nderline flex items-center justify-start gap-1",
+                {
+                  "!text-gray-300": visible,
+                }
+              )}
+            >
+              <IoTimeOutline />
+              {htmlHistory?.length} versions
+            </button>
+            <div
+              className={classNames(
+                "absolute bottom-0 left-0 min-w-sm w-full z-10 translate-y-full pt-2 transition-all duration-200",
+                {
+                  "opacity-0 pointer-events-none": !visible,
+                }
+              )}
+            >
+              <div className="bg-gray-950 border border-gray-800 rounded-xl shadow-2xs p-4">
+                <p className="text-xs font-bold text-white">Version History</p>
+                <p className="text-gray-400 text-xs mt-1">
+                  This is a list of the full history of what AI has done to
+                  this.
+                </p>
+                <ul className="mt-2 max-h-[250px] overflow-y-auto">
+                  {htmlHistory?.map((item, index) => (
+                    <li
+                      key={index}
+                      className="text-gray-300 text-xs py-2 border-b border-gray-800 last:border-0 flex items-center justify-between gap-2"
+                    >
+                      <div className="">
+                        <span className="line-clamp-1">{item.prompt}</span>
+                        <span className="text-gray-500 text-[10px]">
+                          {new Date(item.createdAt).toLocaleDateString(
+                            "en-US",
+                            {
+                              month: "2-digit",
+                              day: "2-digit",
+                              year: "2-digit",
+                            }
+                          ) +
+                            " " +
+                            new Date(item.createdAt).toLocaleTimeString(
+                              "en-US",
+                              {
+                                hour: "2-digit",
+                                minute: "2-digit",
+                                second: "2-digit",
+                                hour12: false,
+                              }
+                            )}
+                        </span>
+                      </div>
+                      <button
+                        className="bg-pink-500 text-white text-xs font-medium rounded-md px-2 py-1 transition-all duration-100 hover:bg-pink-600 cursor-pointer"
+                        onClick={() => {
+                          setHtml(item.html);
+                        }}
+                      >
+                        Select
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="flex items-center justify-end gap-3">
+        <a
+          href="https://huggingface.co/deepseek-ai/DeepSeek-V3-0324"
+          target="_blank"
+          className="text-[12px] text-gray-300 hover:brightness-120 flex items-center gap-1 font-code"
+        >
+          Powered by <img src={Deepseek} className="size-5" /> Deepseek
+        </a>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Tabs;

src/components/theme/mode-toggle.tsx

@@ -1,37 +0,0 @@
-import { Moon, Sun } from "lucide-react";
-
-import { Button } from "./../ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./../ui/dropdown-menu";
-import { useTheme } from "./../theme/theme-provider";
-
-export function ModeToggle() {
-  const { setTheme } = useTheme();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

src/components/theme/theme-provider.tsx

@@ -1,75 +0,0 @@
-import { createContext, useContext, useEffect, useState } from "react";
-
-type Theme = "dark" | "light" | "system";
-
-type ThemeProviderProps = {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-  className?: string;
-};
-
-type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
-  theme: "system",
-  setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
-
-export function ThemeProvider({
-  children,
-  defaultTheme = "system",
-  storageKey = "vite-ui-theme",
-  className,
-  ...props
-}: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
-  );
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    root.classList.remove("light", "dark");
-
-    if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-        .matches
-        ? "dark"
-        : "light";
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      <section className={className}>{children}</section>
-    </ThemeProviderContext.Provider>
-  );
-}
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
-
-  if (context === undefined)
-    throw new Error("useTheme must be used within a ThemeProvider");
-
-  return context;
-};

src/components/ui/avatar.tsx

@@ -1,51 +0,0 @@
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "./../../lib/utils";
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-neutral-100 flex size-full items-center justify-center rounded-full dark:bg-neutral-800",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/button.tsx

@@ -1,64 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "./../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 cursor-pointer [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-neutral-900 text-neutral-50 shadow-xs hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
-        destructive: "bg-red-600 text-white shadow-xs hover:bg-red-500",
-        outline:
-          "border bg-white shadow-xs hover:bg-neutral-100 hover:text-neutral-900 dark:bg-neutral-200/30 dark:border-neutral-200 dark:hover:bg-neutral-200/50 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:dark:bg-neutral-800/30 dark:dark:border-neutral-800 dark:dark:hover:bg-neutral-800/50",
-        secondary:
-          "bg-neutral-100 text-neutral-900 shadow-xs hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
-        ghost:
-          "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-100/50 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:dark:hover:bg-neutral-800/50",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
-        pink: "bg-sky-500 text-white hover:brightness-110",
-        gray: "bg-neutral-900 text-neutral-300 hover:brightness-110",
-        ghostWhite: "bg-neutral-200/60 text-neutral-900 hover:bg-neutral-200",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-full text-[13px] gap-1.5 px-3",
-        lg: "h-10 rounded-full px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        iconXs: "size-7",
-        iconXss: "size-6",
-        xs: "h-6 text-xs rounded-full pl-2 pr-2 gap-1",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };

src/components/ui/dialog.tsx

@@ -1,144 +0,0 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-
-import { cn } from "./../../lib/utils";
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 p-6 shadow-lg duration-200 sm:max-w-lg dark:bg-neutral-950 dark:border-neutral-800",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-white focus:ring-neutral-950 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn(
-        "text-neutral-500 text-sm dark:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};

src/components/ui/dropdown-menu.tsx

@@ -1,258 +0,0 @@
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-
-import { cn } from "./../../lib/utils";
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  );
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-neutral-200 p-1 shadow-md dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  );
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  );
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-neutral-100 cursor-pointer focus:text-neutral-900 data-[variant=destructive]:text-red-500 data-[variant=destructive]:focus:bg-red-500/10 dark:data-[variant=destructive]:focus:bg-red-500/20 data-[variant=destructive]:focus:text-red-500 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-neutral-500 relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[variant=destructive]:text-red-900 dark:data-[variant=destructive]:focus:bg-red-900/10 dark:dark:data-[variant=destructive]:focus:bg-red-900/20 dark:data-[variant=destructive]:focus:text-red-900 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-neutral-100 focus:text-neutral-900 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  );
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-neutral-100 focus:text-neutral-900 relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  );
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn(
-        "bg-neutral-200 -mx-1 my-1 h-px dark:bg-neutral-800",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-neutral-500 ml-auto text-xs tracking-widest dark:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  );
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-};

src/components/ui/input.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./../../lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-neutral-950 placeholder:text-neutral-500 selection:bg-neutral-900 selection:text-neutral-50 dark:bg-neutral-200/30 border-neutral-200 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:selection:bg-neutral-50 dark:selection:text-neutral-900 dark:dark:bg-neutral-800/30 dark:border-neutral-800",
-        "focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50",
-        "aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };

src/components/ui/popover.tsx

@@ -1,46 +0,0 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "./../../lib/utils";
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-neutral-200 p-4 shadow-md outline-hidden dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  );
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

src/components/ui/select.tsx

@@ -1,189 +0,0 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-
-import { cn } from "./../../lib/utils";
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />;
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-neutral-200 data-[placeholder]:text-neutral-500 [&_svg:not([class*='text-'])]:text-neutral-500 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:bg-neutral-200/30 dark:hover:bg-neutral-200/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:border-neutral-800 dark:data-[placeholder]:text-neutral-400 dark:[&_svg:not([class*='text-'])]:text-neutral-400 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900 dark:dark:bg-neutral-800/30 dark:dark:hover:bg-neutral-800/50",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-neutral-200 shadow-md dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn(
-        "text-neutral-500 px-2 py-1.5 text-xs dark:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-neutral-100 focus:text-neutral-900 [&_svg:not([class*='text-'])]:text-neutral-500 relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:[&_svg:not([class*='text-'])]:text-neutral-400",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn(
-        "bg-neutral-200 pointer-events-none -mx-1 my-1 h-px dark:bg-neutral-800",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  );
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  );
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-};

src/components/ui/sonner.tsx

@@ -1,23 +0,0 @@
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, ToasterProps } from "sonner"
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  )
-}
-
-export { Toaster }

src/components/ui/tabs.tsx

@@ -1,64 +0,0 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-
-import { cn } from "./../../lib/utils";
-
-function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  );
-}
-
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        "bg-neutral-100 text-neutral-500 inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] dark:bg-neutral-800 dark:text-neutral-400",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "data-[state=active]:bg-white dark:data-[state=active]:text-neutral-950 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:outline-ring dark:data-[state=active]:border-neutral-200 dark:data-[state=active]:bg-neutral-200/30 text-neutral-950 dark:text-neutral-500 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-neutral-200 border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:data-[state=active]:bg-neutral-950 dark:dark:data-[state=active]:text-neutral-50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:dark:data-[state=active]:border-neutral-800 dark:dark:data-[state=active]:bg-neutral-800/30 dark:text-neutral-50 dark:dark:text-neutral-400 dark:border-neutral-800",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
-  );
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };

src/components/ui/toggle-group.tsx

@@ -1,71 +0,0 @@
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
-
-import { cn } from "./../../lib/utils";
-import { toggleVariants } from "./../ui/toggle";
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
-});
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      className={cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        "min-w-0 !pl-3 flex-1 cursor-pointer shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-}
-
-export { ToggleGroup, ToggleGroupItem };

src/components/ui/toggle.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "./../../lib/utils";
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-neutral-100 hover:text-neutral-500 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-neutral-100 data-[state=on]:text-neutral-900 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 whitespace-nowrap dark:hover:bg-neutral-800 dark:hover:text-neutral-400 dark:data-[state=on]:bg-neutral-800 dark:data-[state=on]:text-neutral-50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-neutral-200 bg-transparent shadow-xs hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Toggle, toggleVariants };

src/components/ui/tooltip.tsx

@@ -1,59 +0,0 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "./../../lib/utils";
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-black text-neutral-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-black fill-black z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

src/main.tsx

@@ -1,10 +1,12 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { ToastContainer } from "react-toastify";
 import "./assets/index.css";
-import App from "./views/App.tsx";
+import App from "./components/App.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
+    <ToastContainer className="pt-11 max-md:p-4" />
   </StrictMode>
 );

tsconfig.app.json

@@ -6,7 +6,6 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-    "composite": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",

tsconfig.json

@@ -1,17 +1,13 @@
 {
   "files": [],
   "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
   ],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["src/*"]
     }
   }
 }

utils/consts.ts

@@ -4,17 +4,38 @@ export const defaultHTML = `<!DOCTYPE html>
     <title>My app</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="utf-8">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        height: 100dvh;
+        font-family: "Arial", sans-serif;
+        text-align: center;
+      }
+      .arrow {
+        position: absolute;
+        bottom: 32px;
+        left: 0px;
+        width: 100px;
+        transform: rotate(30deg);
+      }
+      h1 {
+        font-size: 50px;
+      }
+      h1 span {
+        color: #acacac;
+        font-size: 32px;
+      }
+    </style>
   </head>
-  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
-    <div class="w-full">
-      <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
-      <h1 class="text-4xl lg:text-6xl font-bold font-sans">
-        <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
-        Ask me anything.
-      </h1>
-    </div>
-      <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
+  <body>
+    <h1>
+      <span>I'm ready to work,</span><br />
+      Ask me anything.
+    </h1>
+    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
     <script></script>
   </body>
 </html>

utils/providers.js

@@ -11,7 +11,7 @@ export const PROVIDERS = {
   },
   sambanova: {
     name: "SambaNova",
-    max_tokens: 32_000,
+    max_tokens: 8_000,
     id: "sambanova",
   },
   novita: {
@@ -19,38 +19,9 @@ export const PROVIDERS = {
     max_tokens: 16_000,
     id: "novita",
   },
-  hyperbolic: {
-    name: "Hyperbolic",
-    max_tokens: 131_000,
-    id: "hyperbolic",
-  },
-  together: {
-    name: "Together AI",
-    max_tokens: 128_000,
-    id: "together",
-  },
+  // hyperbolic: {
+  //   name: "Hyperbolic",
+  //   max_tokens: 131_000,
+  //   id: "hyperbolic",
+  // },
 };
-
-export const MODELS = [
-  {
-    value: "deepseek-ai/DeepSeek-V3-0324",
-    label: "DeepSeek V3 O324",
-    providers: ["fireworks-ai", "nebius", "sambanova", "novita", "hyperbolic"],
-    autoProvider: "fireworks-ai",
-  },
-  {
-    value: "deepseek-ai/DeepSeek-R1-0528",
-    label: "DeepSeek R1 0528",
-    providers: [
-      "fireworks-ai",
-      "novita",
-      "hyperbolic",
-      "nebius",
-      "together",
-      "sambanova",
-    ],
-    autoProvider: "novita",
-    isNew: true,
-    isThinker: true,
-  },
-];

utils/types.ts

@@ -4,9 +4,3 @@ export interface Auth {
   name: string;
   isLocalUse?: boolean;
 }
-
-export interface HtmlHistory {
-  html: string;
-  createdAt: Date;
-  prompt: string;
-}

vite.config.ts

@@ -1,14 +1,11 @@
-import path from "path";
-import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
+    alias: [{ find: "@", replacement: "/src" }],
   },
 });