💻 fix(client): Allow Code Filetypes and Suppress Known Vite Warnings (#2492)

* refactor(vite): suppress known warnings

* fix: allow known code filetypes if there is a mismatch of expected type, or originalFile.type is empty

* refactor(useFileHandling): naming, use variable

client/src/hooks/Files/useFileHandling.ts

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import {
   megabyte,
   EModelEndpoint,
+  codeTypeMapping,
   mergeFileConfig,
   fileConfig as defaultFileConfig,
 } from 'librechat-data-provider';
@@ -125,7 +126,11 @@ const useFileHandling = (params?: UseFileHandling) => {
     startUploadTimer(extendedFile.file_id, extendedFile.file?.name || 'File');
 
     const formData = new FormData();
-    formData.append('file', extendedFile.file as File, encodeURIComponent(extendedFile.file?.name || 'File'));
+    formData.append(
+      'file',
+      extendedFile.file as File,
+      encodeURIComponent(extendedFile.file?.name || 'File'),
+    );
     formData.append('file_id', extendedFile.file_id);
     if (extendedFile.width) {
       formData.append('width', extendedFile.width?.toString());
@@ -168,10 +173,12 @@ const useFileHandling = (params?: UseFileHandling) => {
     for (let i = 0; i < fileList.length; i++) {
       let originalFile = fileList[i];
       let fileType = originalFile.type;
+      const extension = originalFile.name.split('.').pop() ?? '';
+      const knownCodeType = codeTypeMapping[extension];
 
-      // Infer MIME type for Markdown files when the type is empty
+      // Infer MIME type for Known Code files when the type is empty or a mismatch
-      if (!fileType && originalFile.name.endsWith('.md')) {
+      if (knownCodeType && (!fileType || fileType !== knownCodeType)) {
-        fileType = 'text/markdown';
+        fileType = knownCodeType;
       }
 
       // Check if the file type is still empty after the extension check

client/vite.config.ts

@@ -1,12 +1,34 @@
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
 import path, { resolve } from 'path';
-import type { Plugin } from 'vite';
+import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
+import { defineConfig, createLogger } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+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,

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/src/file-config.ts

@@ -127,8 +127,24 @@ export const codeInterpreterMimeTypes = [
   imageMimeTypes,
 ];
 
+export const codeTypeMapping: { [key: string]: string } = {
+  c: 'text/x-c',
+  cs: 'text/x-csharp',
+  cpp: 'text/x-c++',
+  md: 'text/markdown',
+  php: 'text/x-php',
+  py: 'text/x-python',
+  rb: 'text/x-ruby',
+  tex: 'text/x-tex',
+  js: 'text/javascript',
+  sh: 'application/x-sh',
+  ts: 'application/typescript',
+  tar: 'application/x-tar',
+  zip: 'application/zip',
+};
+
 export const retrievalMimeTypes = [
-  /^(text\/(x-c|x-c\+\+|html|x-java|markdown|x-php|x-python|x-script\.python|x-ruby|x-tex|plain))$/,
+  /^(text\/(x-c|x-c\+\+|html|x-java|markdown|x-php|x-python|x-script\.python|x-ruby|x-tex|plain|xml))$/,
   /^(application\/(json|pdf|vnd\.openxmlformats-officedocument\.(wordprocessingml\.document|presentationml\.presentation)))$/,
 ];