Merge branch #enzostvs/deepsite' into 'nomadicsynth/deepsite'

README.md

@@ -16,10 +16,13 @@ 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

@@ -0,0 +1,23 @@
+{
+  "$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"
+}

package-lock.json

@@ -11,13 +11,26 @@
         "@huggingface/hub": "^1.1.1",
         "@huggingface/inference": "^3.6.1",
         "@monaco-editor/react": "^4.7.0",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@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",
         "@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",
@@ -25,11 +38,14 @@
         "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",
@@ -38,6 +54,7 @@
         "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"
@@ -845,6 +862,44 @@
         "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",
@@ -1104,6 +1159,821 @@
       "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-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-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",
@@ -1702,11 +2572,12 @@
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="
     },
     "node_modules/@types/node": {
-      "version": "22.13.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.13.tgz",
-      "integrity": "sha512-ClsL5nMwKaBRwPcCvH8E7+nU4GxHVx1axNvMZTFHMEfNI7oahimt26P5zjVCRrjiIWj6YFXfE1v3dEp94wLcGQ==",
+      "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",
       "dependencies": {
-        "undici-types": "~6.20.0"
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/@types/qs": {
@@ -1733,7 +2604,7 @@
       "version": "19.0.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.4.tgz",
       "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
-      "dev": true,
+      "devOptional": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -2101,6 +2972,18 @@
       "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",
@@ -2465,6 +3348,18 @@
       "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",
@@ -2474,6 +3369,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -2724,6 +3620,12 @@
         "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",
@@ -3392,6 +4294,15 @@
         "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",
@@ -4101,6 +5012,15 @@
         "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",
@@ -4858,6 +5778,16 @@
         "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",
@@ -5387,6 +6317,53 @@
         "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",
@@ -5395,6 +6372,28 @@
         "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",
@@ -5875,6 +6874,16 @@
         "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",
@@ -6031,6 +7040,16 @@
         "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",
@@ -6159,6 +7178,16 @@
         "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",
@@ -6219,9 +7248,10 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.20.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
-      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "license": "MIT"
     },
     "node_modules/unified": {
       "version": "11.0.5",
@@ -6351,6 +7381,58 @@
         "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

@@ -14,13 +14,26 @@
     "@huggingface/hub": "^1.1.1",
     "@huggingface/inference": "^3.6.1",
     "@monaco-editor/react": "^4.7.0",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@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",
     "@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",
@@ -28,11 +41,14 @@
     "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",
@@ -41,6 +57,7 @@
     "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 { PROVIDERS } from "./utils/providers.js";
+import { MODELS, PROVIDERS } from "./utils/providers.js";
 import { COLORS } from "./utils/colors.js";
 
 // Load environment variables from .env file
@@ -30,7 +30,6 @@ 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;
 
 app.use(cookieParser());
@@ -213,7 +212,7 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 });
 
 app.post("/api/ask-ai", async (req, res) => {
-  const { prompt, html, previousPrompt, provider } = req.body;
+  const { prompt, html, previousPrompt, provider, model } = req.body;
   if (!prompt) {
     return res.status(400).send({
       ok: false,
@@ -221,6 +220,30 @@ app.post("/api/ask-ai", async (req, res) => {
     });
   }
 
+  if (!model) {
+    return res.status(400).send({
+      ok: false,
+      message: "Missing model field",
+    });
+  }
+
+  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;
 
@@ -263,7 +286,7 @@ app.post("/api/ask-ai", async (req, res) => {
   const DEFAULT_PROVIDER = PROVIDERS.novita;
   const selectedProvider =
     provider === "auto"
-      ? DEFAULT_PROVIDER
+      ? PROVIDERS[selectedModel.autoProvider]
       : PROVIDERS[provider] ?? DEFAULT_PROVIDER;
 
   if (provider !== "auto" && TOKENS_USED >= selectedProvider.max_tokens) {
@@ -276,12 +299,12 @@ app.post("/api/ask-ai", async (req, res) => {
 
   try {
     const chatCompletion = client.chatCompletionStream({
-      model: MODEL_ID,
+      model: selectedModel.value,
       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`,
+          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. 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`,
         },
         ...(previousPrompt
           ? [
@@ -318,23 +341,39 @@ app.post("/api/ask-ai", async (req, res) => {
       }
       const chunk = value.choices[0]?.delta?.content;
       if (chunk) {
-        if (provider !== "sambanova") {
-          res.write(chunk);
-          completeResponse += chunk;
-
-          if (completeResponse.includes("</html>")) {
-            break;
+        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>")) {
+              // Replace everything after the last </html> tag with an empty string
+              newChunk = newChunk.replace(/<\/html>[\s\S]*/, "</html>");
+            }
+            completeResponse += newChunk;
+            res.write(newChunk);
+            if (newChunk.includes("</html>")) {
+              break;
+            }
           }
         } else {
-          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>");
-          }
+          // check if in the completeResponse there is already a </html> tag but after the last </think> tag, if yes break the loop
+          const lastThinkTagIndex = completeResponse.lastIndexOf("</think>");
           completeResponse += newChunk;
           res.write(newChunk);
-          if (newChunk.includes("</html>")) {
-            break;
+          if (lastThinkTagIndex !== -1) {
+            const afterLastThinkTag = completeResponse.slice(
+              lastThinkTagIndex + "</think>".length
+            );
+            if (afterLastThinkTag.includes("</html>")) {
+              break;
+            }
           }
         }
       }

src/assets/index.css

@@ -1,4 +1,7 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
 
 * {
   font-family: "Noto Sans";
@@ -7,3 +10,129 @@
 .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;
+}

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

@@ -1,19 +1,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { RiSparkling2Fill } from "react-icons/ri";
 import { GrSend } from "react-icons/gr";
 import classNames from "classnames";
-import { toast } from "react-toastify";
-import { useCopyToClipboard, useLocalStorage } from "react-use";
-import { MdPreview } from "react-icons/md";
-import { IoCopy } from "react-icons/io5";
+import { toast } from "sonner";
+import { useLocalStorage, useUpdateEffect } from "react-use";
+import { ChevronDown } from "lucide-react";
 
 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 SpeechPrompt from "../speech-prompt/speech-prompt";
+import { Button } from "../ui/button";
+// @ts-expect-error not needed
+import { MODELS } from "./../../../utils/providers";
 
 function AskAI({
   html,
@@ -21,27 +22,31 @@ function AskAI({
   onScrollToBottom,
   isAiWorking,
   setisAiWorking,
-  setView,
   onNewPrompt,
+  onSuccess,
 }: {
   html: string;
   setHtml: (html: string) => void;
   onScrollToBottom: () => void;
   isAiWorking: boolean;
   onNewPrompt: (prompt: string) => void;
-  setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
+  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);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, copyToClipboard] = useCopyToClipboard();
+  const [think, setThink] = useState<string | undefined>(undefined);
+  const [openThink, setOpenThink] = useState(false);
+  const [isThinking, setIsThinking] = useState(true);
 
   const audio = new Audio(SuccessSound);
   audio.volume = 0.5;
@@ -50,6 +55,9 @@ function AskAI({
     if (isAiWorking || !prompt.trim()) return;
     setisAiWorking(true);
     setProviderError("");
+    setThink("");
+    setOpenThink(false);
+    setIsThinking(true);
 
     let contentResponse = "";
     let lastRenderTime = 0;
@@ -60,6 +68,7 @@ function AskAI({
         body: JSON.stringify({
           prompt,
           provider,
+          model,
           ...(html === defaultHTML ? {} : { html }),
           ...(previousPrompt ? { previousPrompt } : {}),
         }),
@@ -85,17 +94,19 @@ function AskAI({
         }
         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");
-            setPrompt("");
             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(
@@ -104,15 +115,27 @@ function AskAI({
             if (finalDoc) {
               setHtml(finalDoc);
             }
+            onSuccess(finalDoc ?? contentResponse, prompt);
 
             return;
           }
 
           const chunk = decoder.decode(value, { stream: true });
           contentResponse += chunk;
+          if (selectedModel?.isThinker) {
+            const thinkMatch = contentResponse.match(/<think>[\s\S]*/)?.[0];
+            if (thinkMatch && !contentResponse?.includes("</think>")) {
+              if ((contentThink?.length ?? 0) < 3) {
+                setOpenThink(true);
+              }
+              setThink(thinkMatch.replace("<think>", "").trim());
+              contentThink += 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
+            setIsThinking(false);
             let partialDoc = newHtml;
             if (!partialDoc.includes("</html>")) {
               partialDoc += "\n</html>";
@@ -134,8 +157,6 @@ function AskAI({
 
         read();
       }
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       setisAiWorking(false);
       toast.error(error.message);
@@ -145,39 +166,79 @@ function AskAI({
     }
   };
 
+  useUpdateEffect(() => {
+    if (refThink.current) {
+      refThink.current.scrollTop = refThink.current.scrollHeight;
+    }
+  }, [think]);
+
+  useUpdateEffect(() => {
+    if (!isThinking) {
+      setOpenThink(false);
+    }
+  }, [isThinking]);
+
+  // TODO: auto scroll is not working properly, fix it
+
   return (
-    <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-2xl 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");
-            audio.play();
-          }}
-        >
-          <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="bg-neutral-800 border border-neutral-700 rounded-lg ring-[5px] focus-within:ring-sky-500/50 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 ? "AI is thinking..." : "AI'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="w-full relative flex items-center justify-between">
-        <RiSparkling2Fill className="text-lg lg:text-xl text-gray-500 group-focus-within:text-pink-500" />
+      <div
+        className={classNames(
+          "w-full relative flex items-center justify-between pl-3.5 p-2 lg:p-2 lg:pl-4",
+          {
+            "animate-pulse": isAiWorking,
+          }
+        )}
+      >
+        {isAiWorking && (
+          <div className="absolute bg-neutral-800 rounded-lg bottom-0 left-10 w-[calc(100%-92px)] h-full z-1 flex items-center justify-start max-lg:text-sm">
+            <p className="text-neutral-400 font-code">
+              AI is {isThinking ? "thinking" : "coding"}...
+            </p>
+          </div>
+        )}
+        <RiSparkling2Fill className="size-5 text-neutral-400 group-focus-within:text-sky-500" />
         <input
           type="text"
           disabled={isAiWorking}
-          className="w-full bg-transparent max-lg:text-sm outline-none px-3 text-white placeholder:text-gray-500 font-code"
+          className="w-full bg-transparent max-lg:text-sm outline-none px-3 text-white placeholder:text-neutral-400 font-code"
           placeholder={
             hasAsked ? "What do you want to ask AI next?" : "Ask AI anything..."
           }
@@ -193,18 +254,21 @@ function AskAI({
           {/* <SpeechPrompt setPrompt={setPrompt} /> */}
           <Settings
             provider={provider as string}
+            model={model as string}
             onChange={setProvider}
+            onModelChange={setModel}
             open={openProvider}
             error={providerError}
             onClose={setOpenProvider}
           />
-          <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"
+          <Button
+            variant="pink"
+            size="icon"
+            disabled={isAiWorking || !prompt.trim()}
             onClick={callAi}
           >
             <GrSend className="-translate-x-[1px]" />
-          </button>
+          </Button>
         </div>
       </div>
       <div

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

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
-import classNames from "classnames";
-import { toast } from "react-toastify";
-import { FaPowerOff } from "react-icons/fa6";
+import { toast } from "sonner";
 
 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">
@@ -26,18 +26,15 @@ const MsgToast = ({ url }: { url: string }) => (
 
 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);
 
@@ -66,10 +63,7 @@ function DeployButton({
         toast.success(
           <MsgToast
             url={`https://huggingface.co/spaces/${response.path ?? path}`}
-          />,
-          {
-            autoClose: 10000,
-          }
+          />
         );
         setPath(response.path);
       } else {
@@ -79,7 +73,6 @@ function DeployButton({
       toast.error(err.message);
     } finally {
       setLoading(false);
-      setOpen(false);
     }
   };
 
@@ -87,135 +80,85 @@ 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">
-        {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."
-                  )}
+        <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 Space" : "Deploy to Space"}
+              </Button>
+            </div>
+          </PopoverTrigger>
+          <PopoverContent
+            className="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.
                 </p>
-                {!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.
+              </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>
-                )}
-                <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>
+                  {!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>
+                  )}
+                  <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>
     </div>
   );

src/components/footer/footer.tsx

@@ -0,0 +1,177 @@
+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-7">
+                      <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,39 +1,66 @@
 import { ReactNode } from "react";
-import { MdAdd } from "react-icons/md";
+import { Eye, MessageCircleCode } from "lucide-react";
 
 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({
-  onReset,
+  tab,
+  onNewTab,
   children,
 }: {
-  onReset: () => void;
+  tab: string;
+  onNewTab: (tab: string) => void;
   children?: ReactNode;
 }) {
   return (
-    <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">
+    <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">
       <div className="flex items-center justify-start gap-3">
-        <h1 className="text-white text-lg lg:text-xl font-bold flex items-center justify-start">
+        <h1 className="text-neutral-900 dark: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"
+            className="size-6 lg:size-8 mr-2 invert-100 dark:invert-0"
           />
           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>
         </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>
-      {children}
+      <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>
     </header>
   );
 }

src/components/history/history.tsx

@@ -0,0 +1,138 @@
+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} versions
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="!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">
+          Version 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/load-button/load-button.tsx

@@ -1,10 +1,13 @@
 import classNames from "classnames";
 import { useState } from "react";
-import { toast } from "react-toastify";
+import { toast } from "sonner";
 
 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,
@@ -17,7 +20,6 @@ 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 () => {
@@ -38,12 +40,10 @@ 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,81 +54,73 @@ function LoadButton({
         "border-r border-gray-700 pr-5": auth,
       })}
     >
-      <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">
+      <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="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">
               <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-pink-600 bg-pink-100 rounded-md px-3 py-2">
+            <p className="text-sm text-neutral-300 bg-neutral-300/15 border border-neutral-300/15 rounded-md px-3 py-2">
               Load an existing DeepSite Space to continue working on it.
             </p>
             <label className="block">
-              <p className="text-gray-600 text-sm font-medium mb-1.5">
-                Space URL
-              </p>
-              <input
+              <p className="text-muted-foreground text-sm mb-1.5">Space URL</p>
+              <Input
                 type="text"
                 value={url}
-                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)}
+                placeholder="https://huggingface.co/spaces/username/space-name"
                 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
-                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"
+              <Button
+                size="sm"
+                variant="default"
+                disabled={loading || !url}
                 onClick={loadSpace}
               >
-                Load Space
+                Load space
                 {loading && <Loading />}
-              </button>
+              </Button>
             </div>
           </main>
-        </>
-      </div>
+        </PopoverContent>
+      </Popover>
     </div>
   );
 }

src/components/login/login.tsx

@@ -23,17 +23,17 @@ function Login({
 
   return (
     <>
-      <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">
+      <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">
           REQUIRED
         </span>
         Login with Hugging Face
       </header>
       <main className="px-4 py-4 space-y-3">
         {children}
-        <button onClick={handleClick}>
+        <button onClick={handleClick} className="cursor-pointer">
           <img
-            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg-dark.svg"
+            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg.svg"
             alt="Sign in with Hugging Face"
             className="mx-auto"
           />

src/components/magicui/grid-pattern.tsx

@@ -0,0 +1,69 @@
+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,83 +1,67 @@
 import classNames from "classnames";
-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";
+
+import { toast } from "sonner";
+import { GridPattern } from "./../magicui/grid-pattern";
+import { cn } from "../../lib/utils";
 
 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="w-full border-l border-gray-900 bg-white h-[calc(100dvh-49px)] lg:h-[calc(100dvh-53px)] relative"
+      className={classNames(
+        "w-full border-l border-gray-900 h-full relative z-0 flex items-center justify-center",
+        {
+          "lg:p-4": currentTab !== "preview",
+        }
+      )}
       onClick={(e) => {
         if (isAiWorking) {
           e.preventDefault();
           e.stopPropagation();
-          toast.warn("Please wait for the AI to finish working.");
+          toast.warning("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
         ref={iframeRef}
         title="output"
-        className={classNames("w-full h-full select-none", {
-          "pointer-events-none": isResizing || isAiWorking,
-        })}
+        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-[64px] 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",
+          }
+        )}
         srcDoc={html}
       />
-      <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/settings/settings.tsx

@@ -1,136 +1,194 @@
 /* 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";
 // @ts-expect-error not needed
-import { PROVIDERS } from "./../../../utils/providers";
+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";
 
 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="">
-      <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>
+      <Popover open={open} onOpenChange={onClose}>
+        <PopoverTrigger asChild>
+          <Button variant="gray" size="icon">
+            <PiGearSixFill className="size-5" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="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">
             <a
               href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/74"
               target="_blank"
-              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"
+              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"
             >
               How to use it locally?
-              <button className="bg-black text-white rounded-md px-3 py-1.5 text-xs font-semibold cursor-pointer">
-                See the guide
-              </button>
+              <Button size="xs">See guide</Button>
             </a>
-            <div className="flex items-center justify-between">
-              <p className="text-gray-800 text-sm font-medium flex items-center justify-between">
-                Use auto-provider
+            {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>
-              <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(
-                    "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-white",
-                    {
-                      "translate-x-4": provider === "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) => (
+            )}
+            <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 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
-                  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-neutral-700 rounded-full min-w-10 w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
                     {
-                      "bg-blue-500/10 border-blue-500/15 text-blue-500":
-                        id === provider,
-                      "hover:bg-gray-100 border-gray-100": id !== provider,
+                      "!bg-sky-500": provider === "auto",
                     }
                   )}
                   onClick={() => {
-                    onChange(id);
+                    const foundModel = MODELS.find(
+                      (m: { value: string }) => m.value === model
+                    );
+                    if (provider === "auto") {
+                      onChange(foundModel.providers[0]);
+                    } else {
+                      onChange("auto");
+                    }
                   }}
                 >
-                  <img
-                    src={`/providers/${id}.svg`}
-                    alt={PROVIDERS[id].name}
-                    className="size-5"
+                  <div
+                    className={classNames(
+                      "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-neutral-200",
+                      {
+                        "translate-x-4": provider === "auto",
+                      }
+                    )}
                   />
-                  {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>
-          </label>
-        </main>
-      </div>
+          </main>
+        </PopoverContent>
+      </Popover>
     </div>
   );
 }

src/components/tabs/tabs.tsx

@@ -1,29 +0,0 @@
-import Deepseek from "./../../assets/deepseek-color.svg";
-
-function Tabs({ children }: { children?: React.ReactNode }) {
-  return (
-    <div className="border-b border-gray-800 pl-4 lg:pl-7 pr-3 flex items-center justify-between">
-      <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>
-      <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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,63 @@
+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-500 text-white shadow-xs hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-500/60 dark:bg-red-900 dark:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40 dark:dark:bg-red-900/60",
+        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",
+      },
+      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",
+        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/dropdown-menu.tsx

@@ -0,0 +1,258 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,189 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,47 @@
+"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/lib/utils.ts

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

src/main.tsx

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

src/{components → views}/App.tsx

@@ -1,42 +1,48 @@
 import { useRef, useState } from "react";
-import Editor from "@monaco-editor/react";
-import classNames from "classnames";
-import { editor } from "monaco-editor";
 import {
-  useMount,
-  useUnmount,
+  useCopyToClipboard,
   useEvent,
   useLocalStorage,
+  useMount,
   useSearchParam,
+  useUnmount,
+  useUpdateEffect,
 } from "react-use";
-import { toast } from "react-toastify";
+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 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";
+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";
 
-function App() {
+export default 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);
 
-  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 fetchMe = async () => {
     const res = await fetch("/api/@me");
@@ -124,36 +130,20 @@ 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.warn("Previous HTML content restored from local storage.");
+      toast.warning("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);
@@ -163,107 +153,143 @@ 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();
+    } else {
+      if (preview.current) {
+        // Reset preview width when switching to preview tab
+        preview.current.style.width = "100%";
+      }
+    }
+  }, [currentTab]);
+
   return (
-    <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
-            );
-          }
-        }}
-      >
+    <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}>
         <DeployButton
           html={html}
-          error={error}
           auth={auth}
           setHtml={setHtml}
           prompts={prompts}
         />
       </Header>
-      <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 />
-          <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)}
+      <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 },
+                }}
+                value={html}
+                onChange={(value) => {
+                  const newValue = value ?? "";
+                  setHtml(newValue);
+                }}
+                onMount={(editor) => (editorRef.current = editor)}
+              />
+              <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);
+                  // if xs or sm
+                  if (window.innerWidth <= 1024) {
+                    setCurrentTab("preview");
+                  }
+                }}
+                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"
             />
-          </div>
-          <AskAI
-            html={html}
-            setHtml={setHtml}
-            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}
-          setView={setCurrentView}
+          device={device}
+          currentTab={currentTab}
+          iframeRef={iframeRef}
         />
       </main>
-    </div>
+      <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>
   );
 }
-
-export default App;

tsconfig.app.json

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

tsconfig.json

@@ -1,13 +1,17 @@
 {
   "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

@@ -13,6 +13,7 @@ export const defaultHTML = `<!DOCTYPE html>
         height: 100dvh;
         font-family: "Arial", sans-serif;
         text-align: center;
+        background-color: #fff;
       }
       .arrow {
         position: absolute;

utils/providers.js

@@ -19,9 +19,26 @@ export const PROVIDERS = {
     max_tokens: 16_000,
     id: "novita",
   },
-  // hyperbolic: {
-  //   name: "Hyperbolic",
-  //   max_tokens: 131_000,
-  //   id: "hyperbolic",
-  // },
+  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: "novita",
+  },
+  {
+    value: "deepseek-ai/DeepSeek-R1-0528",
+    label: "DeepSeek R1 0528",
+    providers: ["fireworks-ai", "novita", "hyperbolic", "nebius"],
+    autoProvider: "novita",
+    isNew: true,
+    isThinker: true,
+  },
+];

utils/types.ts

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

vite.config.ts

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