🌟 feat: Enhance User Experience and SEO with Accessibility Updates and robots.txt (#5392)

* 🔈 fix: Refactor AudioRecorder to use button element for improved accessibility

* 🔈 fix: Update conversation menu button ID for improved accessibility

* 🔈 fix: Remove redundant role attribute from SidePanel for improved accessibility

* feat: Add robots.txt to manage web crawler access

* feat: Update index.html with meta description and remove legacy file

* fix: resolve merge conflicts.

* fix: resolve merge conflicts.

* fix: resolve merge conflicts.

* feat: Update index.html with meta description and remove legacy file

* 🔧 feat: Add legacy support and improve SidePanel accessibility

* 🔧 feat: Integrate express-static-gzip for improved static file serving and add new plugins for enhanced functionality

* 🔧 chore: Remove unused HTML ESLint plugin configurations and dependencies

---------

Co-authored-by: Ruben Talstra <RubenTalstra1211@outlook.com>

client/vite.config.ts

@@ -1,38 +1,14 @@
 import path, { resolve } from 'path';
 import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
-import { defineConfig, createLogger } from 'vite';
+import { defineConfig } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import compression from 'vite-plugin-compression';
 import type { Plugin } from 'vite';
 
-const logger = createLogger();
-const originalWarning = logger.warn;
-logger.warn = (msg, options) => {
-  /* Suppresses:
-   [vite:css] Complex selectors in '.group:focus-within .dark\:group-focus-within\:text-gray-300:is(.dark *)' can not be transformed to an equivalent selector without ':is()'.
-   */
-  if (msg.includes('vite:css') && msg.includes('^^^^^^^')) {
-    return;
-  }
-  /* Suppresses:
-(!) Some chunks are larger than 500 kB after minification. Consider:
-- Using dynamic import() to code-split the application
-- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
-- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
-   */
-  if (msg.includes('Use build.rollupOptions.output.manualChunks')) {
-    return;
-  }
-  originalWarning(msg, options);
-};
-
 // https://vitejs.dev/config/
 export default defineConfig({
-  customLogger: logger,
   server: {
-    fs: {
-      cachedChecks: false,
-    },
     host: 'localhost',
     port: 3090,
     strictPort: false,
@@ -47,7 +23,7 @@ export default defineConfig({
       },
     },
   },
-  // All other env variables are filtered out
+  // Set the directory where environment variables are loaded from and restrict prefixes
   envDir: '../',
   envPrefix: ['VITE_', 'SCRIPT_', 'DOMAIN_', 'ALLOW_'],
   plugins: [
@@ -57,11 +33,14 @@ export default defineConfig({
       injectRegister: 'auto', // 'auto' | 'manual' | 'disabled'
       registerType: 'autoUpdate', // 'prompt' | 'autoUpdate'
       devOptions: {
-        enabled: false, // enable/disable registering SW in development mode
+        enabled: false, // disable service worker registration in development mode
       },
       useCredentials: true,
       workbox: {
-        globPatterns: ['assets/**/*.{png,jpg,svg,ico}', '**/*.{js,css,html,ico,woff2}'],
+        globPatterns: [
+          'assets/**/*.{png,jpg,svg,ico}',
+          '**/*.{js,css,html,ico,woff2}',
+        ],
         maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
         navigateFallbackDenylist: [/^\/oauth/],
       },
@@ -103,33 +82,70 @@ export default defineConfig({
       },
     }),
     sourcemapExclude({ excludeNodeModules: true }),
+    compression({
+      verbose: true,
+      disable: false,
+      threshold: 10240, // compress files larger than 10KB
+      algorithm: 'gzip',
+      ext: '.gz',
+    }),
   ],
   publicDir: './public',
   build: {
     sourcemap: process.env.NODE_ENV === 'development',
     outDir: './dist',
+    minify: 'terser',
     rollupOptions: {
+      preserveEntrySignatures: 'strict',
       // external: ['uuid'],
       output: {
-        manualChunks: (id) => {
-          if (id.includes('node_modules/highlight.js')) {
-            return 'markdown_highlight';
-          }
-          if (id.includes('node_modules/hast-util-raw')) {
-            return 'markdown_large';
-          }
-          if (id.includes('node_modules/katex')) {
-            return 'markdown_large';
-          }
+        manualChunks(id: string) {
           if (id.includes('node_modules')) {
+            // Group Radix UI libraries together.
+            if (id.includes('@radix-ui')) {
+              return 'radix-ui';
+            }
+            // Group framer-motion separately.
+            if (id.includes('framer-motion')) {
+              return 'framer-motion';
+            }
+            // Group markdown-related libraries.
+            if (id.includes('node_modules/highlight.js')) {
+              return 'markdown_highlight';
+            }
+            if (
+              id.includes('node_modules/hast-util-raw') ||
+              id.includes('node_modules/katex')
+            ) {
+              return 'markdown_large';
+            }
+            // Group TanStack libraries together.
+            if (id.includes('@tanstack')) {
+              return 'tanstack-vendor';
+            }
+            // Additional grouping for other node_modules:
+            if (id.includes('@headlessui')) {
+              return 'headlessui';
+            }
+
+            // Everything else falls into a generic vendor chunk.
             return 'vendor';
           }
+          // Create a separate chunk for all locale files under src/locales.
+          if (id.includes(path.join('src', 'locales'))) {
+            return 'locales';
+          }
+          // Let Rollup decide automatically for any other files.
+          return null;
         },
         entryFileNames: 'assets/[name].[hash].js',
         chunkFileNames: 'assets/[name].[hash].js',
         assetFileNames: (assetInfo) => {
-          if (assetInfo.name && /\.(woff|woff2|eot|ttf|otf)$/.test(assetInfo.name)) {
-            return 'assets/[name][extname]';
+          if (
+            assetInfo.names &&
+            /\.(woff|woff2|eot|ttf|otf)$/.test(assetInfo.names)
+          ) {
+            return 'assets/fonts/[name][extname]';
           }
           return 'assets/[name].[hash][extname]';
         },
@@ -139,15 +155,13 @@ export default defineConfig({
        * @see {@link https://github.com/TanStack/query/pull/5161#issuecomment-1477389761 Preserve 'use client' directives TanStack/query#5161}
        */
       onwarn(warning, warn) {
-        if (
-          // warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
-          warning.message.includes('Error when using sourcemap')
-        ) {
+        if (warning.message.includes('Error when using sourcemap')) {
           return;
         }
         warn(warning);
       },
     },
+    chunkSizeWarningLimit: 1200,
   },
   resolve: {
     alias: {
@@ -173,4 +187,4 @@ export function sourcemapExclude(opts?: SourcemapExclude): Plugin {
       }
     },
   };
-}
+}