🔄 refactor: improved RAG animations/messages (#2616)

* fix: warning slow process rag  message

* refactor: improved useProgress hook for Files

client/src/components/Chat/Input/Files/FilePreview.tsx

@@ -20,12 +20,13 @@ const FilePreview = ({
 }) => {
   const radius = 55; // Radius of the SVG circle
   const circumference = 2 * Math.PI * radius;
-  const progress = useProgress(file?.['progress'] ?? 1, 0.001);
+  const progress = useProgress(file?.['progress'] ?? 1, 0.001, file?.size ?? 1);
+  console.log(progress);
 
   // Calculate the offset based on the loading progress
   const offset = circumference - progress * circumference;
   const circleCSSProperties = {
-    transition: 'stroke-dashoffset 0.3s linear',
+    transition: 'stroke-dashoffset 0.5s linear',
   };
 
   return (

client/src/hooks/Files/useDelayedUploadToast.ts

@@ -5,9 +5,21 @@ import useLocalize from '~/hooks/useLocalize';
 export const useDelayedUploadToast = () => {
   const localize = useLocalize();
   const { showToast } = useToastContext();
-  const [uploadTimers, setUploadTimers] = useState({});
+  const [uploadTimers, setUploadTimers] = useState<Record<string, NodeJS.Timeout>>({});
+
+  const determineDelay = (fileSize: number): number => {
+    const baseDelay = 5000;
+    const additionalDelay = Math.floor(fileSize / 1000000) * 2000;
+    return baseDelay + additionalDelay;
+  };
+
+  const startUploadTimer = (fileId: string, fileName: string, fileSize: number) => {
+    const delay = determineDelay(fileSize);
+
+    if (uploadTimers[fileId]) {
+      clearTimeout(uploadTimers[fileId]);
+    }
 
-  const startUploadTimer = (fileId: string, fileName: string) => {
     const timer = setTimeout(() => {
       const message = localize('com_ui_upload_delay', fileName);
       showToast({
@@ -15,7 +27,7 @@ export const useDelayedUploadToast = () => {
         status: 'warning',
         duration: 7000,
       });
-    }, 3000); // 3 seconds delay
+    }, delay);
 
     setUploadTimers((prev) => ({ ...prev, [fileId]: timer }));
   };
@@ -24,7 +36,7 @@ export const useDelayedUploadToast = () => {
     if (uploadTimers[fileId]) {
       clearTimeout(uploadTimers[fileId]);
       setUploadTimers((prev) => {
-        const { [fileId]: _, ...rest } = prev as Record<string, unknown>;
+        const { [fileId]: _, ...rest } = prev;
         return rest;
       });
     }

client/src/hooks/Files/useFileHandling.ts

@@ -123,7 +123,7 @@ const useFileHandling = (params?: UseFileHandling) => {
       return;
     }
 
-    startUploadTimer(extendedFile.file_id, extendedFile.file?.name || 'File');
+    startUploadTimer(extendedFile.file_id, extendedFile.file?.name || 'File', extendedFile.size);
 
     const formData = new FormData();
     formData.append(

client/src/hooks/Messages/useProgress.ts

@@ -1,9 +1,36 @@
 import { useState, useEffect } from 'react';
 
-export default function useProgress(initialProgress = 0.01, increment = 0.007) {
+export default function useProgress(initialProgress = 0.01, increment = 0.007, fileSize?: number) {
-  const [incrementValue] = useState(increment);
+  const calculateIncrement = (size?: number) => {
+    const baseRate = 0.05;
+    const minRate = 0.002;
+    const sizeMB = size ? size / (1024 * 1024) : 0;
+
+    if (!size) {
+      return increment;
+    }
+
+    if (sizeMB <= 1) {
+      return baseRate * 2;
+    } else {
+      return Math.max(baseRate / Math.sqrt(sizeMB), minRate);
+    }
+  };
+
+  const incrementValue = calculateIncrement(fileSize);
   const [progress, setProgress] = useState(initialProgress);
 
+  const getDynamicIncrement = (currentProgress: number) => {
+    if (!fileSize) {
+      return incrementValue;
+    }
+    if (currentProgress < 0.7) {
+      return incrementValue;
+    } else {
+      return Math.max(0.0005, incrementValue * (1 - currentProgress));
+    }
+  };
+
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout>;
     let timer: ReturnType<typeof setInterval>;
@@ -21,7 +48,8 @@ export default function useProgress(initialProgress = 0.01, increment = 0.007) {
             clearInterval(timer);
             return 1;
           }
-          return Math.min(prevProgress + incrementValue, 0.95);
+          const currentIncrement = getDynamicIncrement(prevProgress);
+          return Math.min(prevProgress + currentIncrement, 0.95);
         });
       }, 200);
     }
@@ -30,7 +58,7 @@ export default function useProgress(initialProgress = 0.01, increment = 0.007) {
       clearInterval(timer);
       clearTimeout(timeout);
     };
-  }, [progress, initialProgress, incrementValue]);
+  }, [progress, initialProgress, incrementValue, fileSize]);
 
   return progress;
 }