Chore/package bumps and refactor and tailwindcss v4

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "tailwindConfig": "./client/tailwind.config.cjs",
+  "tailwindConfig": "./client/tailwind.config.mjs",
   "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false,

client/package.json

@@ -30,48 +30,49 @@
   "dependencies": {
     "@ariakit/react": "^0.4.15",
     "@ariakit/react-core": "^0.4.15",
-    "@codesandbox/sandpack-react": "^2.19.10",
-    "@dicebear/collection": "^7.0.4",
-    "@dicebear/core": "^7.0.4",
-    "@headlessui/react": "^2.1.2",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.2",
-    "@radix-ui/react-checkbox": "^1.0.3",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-hover-card": "^1.0.5",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.0",
-    "@radix-ui/react-popover": "^1.0.7",
+    "@codesandbox/sandpack-react": "^2.20.0",
+    "@dicebear/collection": "^7.1.3",
+    "@dicebear/core": "^7.1.3",
+    "@headlessui/react": "^2.2.0",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-progress": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.1",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.3",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@tanstack/react-query": "^4.28.0",
-    "@tanstack/react-table": "^8.11.7",
-    "class-variance-authority": "^0.6.0",
-    "clsx": "^1.2.1",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-table": "^8.21.2",
+    "class-variance-authority": "^0.6.1",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "cross-env": "^7.0.3",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "downloadjs": "^1.4.7",
-    "export-from-json": "^1.7.2",
+    "export-from-json": "^1.7.4",
     "filenamify": "^6.0.0",
-    "framer-motion": "^11.5.4",
-    "html-to-image": "^1.11.11",
+    "framer-motion": "^11.18.2",
+    "html-to-image": "^1.11.13",
     "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.3",
+    "i18next-browser-languagedetector": "^8.0.4",
     "input-otp": "^1.4.2",
     "js-cookie": "^3.0.5",
     "librechat-data-provider": "*",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.394.0",
-    "match-sorter": "^6.3.4",
+    "lucide-react": "^0.476.0",
+    "match-sorter": "^8.0.0",
     "msedge-tts": "^1.3.4",
     "qrcode.react": "^4.2.0",
     "rc-input-number": "^7.4.2",
@@ -80,38 +81,39 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-flip-toolkit": "^7.1.0",
+    "react-flip-toolkit": "^7.2.4",
     "react-gtm-module": "^2.0.11",
-    "react-hook-form": "^7.43.9",
-    "react-i18next": "^15.4.0",
-    "react-lazy-load-image-component": "^1.6.0",
-    "react-markdown": "^9.0.1",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.4.1",
+    "react-lazy-load-image-component": "^1.6.3",
+    "react-markdown": "^9.1.0",
     "react-resizable-panels": "^2.1.7",
-    "react-router-dom": "^6.11.2",
+    "react-router-dom": "^6.29.0",
     "react-speech-recognition": "^3.10.0",
-    "react-textarea-autosize": "^8.4.0",
+    "react-textarea-autosize": "^8.5.7",
     "react-transition-group": "^4.4.5",
     "react-virtualized": "^9.22.6",
     "recoil": "^0.7.7",
     "regenerator-runtime": "^0.14.1",
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.3",
-    "remark-directive": "^3.0.0",
-    "remark-gfm": "^4.0.0",
+    "remark-directive": "^3.0.1",
+    "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "remark-supersub": "^1.0.0",
-    "sse.js": "^2.5.0",
-    "tailwind-merge": "^1.9.1",
-    "tailwindcss-animate": "^1.0.5",
-    "tailwindcss-radix": "^2.8.0",
-    "zod": "^3.22.4"
+    "sse.js": "^2.6.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-radix": "^4.0.2",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@tanstack/react-query-devtools": "^4.29.0",
+    "@babel/plugin-transform-runtime": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@tailwindcss/vite": "^4.0.9",
+    "@tanstack/react-query-devtools": "^4.36.1",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -121,7 +123,7 @@
     "@types/node": "^20.3.0",
     "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "babel-plugin-replace-ts-export-assignment": "^0.0.2",
     "babel-plugin-root-import": "^6.6.0",
@@ -134,15 +136,12 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-file-loader": "^1.0.3",
     "jest-junit": "^16.0.0",
-    "postcss": "^8.4.31",
-    "postcss-loader": "^7.1.0",
-    "postcss-preset-env": "^8.2.0",
-    "tailwindcss": "^3.4.1",
-    "ts-jest": "^29.2.5",
+    "tailwindcss": "^4.0.9",
+    "ts-jest": "^29.2.6",
     "typescript": "^5.3.3",
-    "vite": "^6.1.0",
-    "vite-plugin-node-polyfills": "^0.17.0",
+    "vite": "^6.2.0",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-pwa": "^0.21.1"
   }
 }

client/src/App.jsx

@@ -35,7 +35,7 @@ const App = () => {
                   <RouterProvider router={router} />
                   <ReactQueryDevtools initialIsOpen={false} position="top-right" />
                   <Toast />
-                  <RadixToast.Viewport className="pointer-events-none fixed inset-0 z-[1000] mx-auto my-2 flex max-w-[560px] flex-col items-stretch justify-start md:pb-5" />
+                  <RadixToast.Viewport className="pointer-events-none fixed inset-0 z-1000 mx-auto my-2 flex max-w-[560px] flex-col items-stretch justify-start md:pb-5" />
                 </DndProvider>
               </ToastProvider>
             </RadixToast.Provider>

client/src/components/Artifacts/ArtifactTabs.tsx

@@ -31,7 +31,7 @@ export default function ArtifactTabs({
         ref={contentRef}
         value="code"
         id="artifacts-code"
-        className={cn('flex-grow overflow-auto')}
+        className={cn('grow overflow-auto')}
       >
         <ArtifactCodeEditor
           files={files}
@@ -45,7 +45,7 @@ export default function ArtifactTabs({
       </Tabs.Content>
       <Tabs.Content
         value="preview"
-        className={cn('flex-grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')}
+        className={cn('grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')}
       >
         <ArtifactPreview
           files={files}

client/src/components/Artifacts/Code.tsx

@@ -26,7 +26,7 @@ export const code: React.ElementType = memo(({ inline, className, children }: TC
     );
   }
 
-  return <code className={`hljs language-${lang} !whitespace-pre`}>{children}</code>;
+  return <code className={`hljs language-${lang} whitespace-pre!`}>{children}</code>;
 });
 
 export const CodeMarkdown = memo(

client/src/components/Audio/Voices.tsx

@@ -27,7 +27,7 @@ export function EdgeVoiceDropdown() {
         value={voice ?? ''}
         options={voices}
         onChange={handleVoiceChange}
-        sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
+        sizeClasses="min-w-[200px] max-w-[400px]! [--anchor-max-width:400px]"
         testId="EdgeVoiceDropdown"
       />
     </div>
@@ -55,7 +55,7 @@ export function BrowserVoiceDropdown() {
         value={voice ?? ''}
         options={voices}
         onChange={handleVoiceChange}
-        sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
+        sizeClasses="min-w-[200px] max-w-[400px]! [--anchor-max-width:400px]"
         testId="BrowserVoiceDropdown"
       />
     </div>
@@ -83,7 +83,7 @@ export function ExternalVoiceDropdown() {
         value={voice ?? ''}
         options={voices}
         onChange={handleVoiceChange}
-        sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
+        sizeClasses="min-w-[200px] max-w-[400px]! [--anchor-max-width:400px]"
         testId="ExternalVoiceDropdown"
       />
     </div>

client/src/components/Auth/AuthLayout.tsx

@@ -74,7 +74,7 @@ function AuthLayout({
         <ThemeSelector />
       </div>
 
-      <div className="flex flex-grow items-center justify-center">
+      <div className="flex grow items-center justify-center">
         <div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
           {!hasStartupConfigError && !isFetching && (
             <h1

client/src/components/Auth/ErrorMessage.tsx

@@ -2,7 +2,7 @@ export const ErrorMessage = ({ children }: { children: React.ReactNode }) => (
   <div
     role="alert"
     aria-live="assertive"
-    className="relative mt-6 rounded-lg border border-red-500/20 bg-red-50/50 px-6 py-4 text-red-700 shadow-sm transition-all dark:bg-red-950/30 dark:text-red-100"
+    className="relative mt-6 rounded-lg border border-red-500/20 bg-red-50/50 px-6 py-4 text-red-700 shadow-2xs transition-all dark:bg-red-950/30 dark:text-red-100"
   >
     {children}
   </div>

client/src/components/Auth/LoginForm.tsx

@@ -98,7 +98,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
               aria-invalid={!!errors.email}
               className="
                 webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
+                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
               "
               placeholder=" "
             />
@@ -108,7 +108,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
                 absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
                 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
                 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500
-                rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
+                peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
                 "
             >
               {useUsernameLogin
@@ -133,7 +133,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
               aria-invalid={!!errors.password}
               className="
                 webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
+                bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
                 "
               placeholder=" "
             />
@@ -143,7 +143,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
                 absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
                 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
                 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-600 dark:peer-focus:text-green-500
-                rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
+                peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
                 "
             >
               {localize('com_auth_password')}

client/src/components/Auth/Registration.tsx

@@ -71,7 +71,7 @@ const Registration: React.FC = () => {
           aria-invalid={!!errors[id]}
           className="
             webkit-dark-styles transition-color peer w-full rounded-2xl border border-border-light
-            bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-none
+            bg-surface-primary px-3.5 pb-2.5 pt-3 text-text-primary duration-200 focus:border-green-500 focus:outline-hidden
           "
           placeholder=" "
           data-testid={id}
@@ -82,7 +82,7 @@ const Registration: React.FC = () => {
             absolute start-3 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-surface-primary px-2 text-sm text-text-secondary-alt duration-200
             peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100
             peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-green-500
-            rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4
+            peer-focus:rtl:left-auto peer-focus:rtl:translate-x-1/4
           "
         >
           {localize(label)}
@@ -185,7 +185,7 @@ const Registration: React.FC = () => {
                 aria-label="Submit registration"
                 className="
             w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
-            transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
+            transition-colors hover:bg-green-700 focus:outline-hidden focus:ring-2
             focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
             disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
           "

client/src/components/Auth/RequestPasswordReset.tsx

@@ -10,7 +10,7 @@ import { useLocalize } from '~/hooks';
 const BodyTextWrapper: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div
-      className="relative mt-6 rounded-lg border border-green-500/20 bg-green-50/50 px-6 py-4 text-green-700 shadow-sm transition-all dark:bg-green-950/30 dark:text-green-100"
+      className="relative mt-6 rounded-lg border border-green-500/20 bg-green-50/50 px-6 py-4 text-green-700 shadow-2xs transition-all dark:bg-green-950/30 dark:text-green-100"
       role="alert"
     >
       {children}
@@ -108,7 +108,7 @@ function RequestPasswordReset() {
             className="
               peer w-full rounded-lg border border-gray-300 bg-transparent px-4 py-3
               text-base text-gray-900 placeholder-transparent transition-all
-              focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20
+              focus:border-green-500 focus:outline-hidden focus:ring-2 focus:ring-green-500/20
               dark:border-gray-700 dark:text-white dark:focus:border-green-500
             "
             placeholder="email@example.com"
@@ -138,7 +138,7 @@ function RequestPasswordReset() {
           disabled={!!errors.email}
           className="
             w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
-            transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
+            transition-colors hover:bg-green-700 focus:outline-hidden focus:ring-2
             focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
             disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
           "