From 2aec4a6250b8e8efe0c199851e255a1ca4f6e194 Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Sun, 5 May 2024 21:35:51 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20refactor:=20improved=20RAG=20ani?= =?UTF-8?q?mations/messages=20(#2616)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: warning slow process rag message * refactor: improved useProgress hook for Files --- .../Chat/Input/Files/FilePreview.tsx | 5 +-- .../src/hooks/Files/useDelayedUploadToast.ts | 20 ++++++++--- client/src/hooks/Files/useFileHandling.ts | 2 +- client/src/hooks/Messages/useProgress.ts | 36 ++++++++++++++++--- 4 files changed, 52 insertions(+), 11 deletions(-) diff --git a/client/src/components/Chat/Input/Files/FilePreview.tsx b/client/src/components/Chat/Input/Files/FilePreview.tsx index fcf4d01f64..55c66b9a82 100644 --- a/client/src/components/Chat/Input/Files/FilePreview.tsx +++ b/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 ( diff --git a/client/src/hooks/Files/useDelayedUploadToast.ts b/client/src/hooks/Files/useDelayedUploadToast.ts index d6bc1ff04f..6e3472a7f5 100644 --- a/client/src/hooks/Files/useDelayedUploadToast.ts +++ b/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>({}); + + 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; + const { [fileId]: _, ...rest } = prev; return rest; }); } diff --git a/client/src/hooks/Files/useFileHandling.ts b/client/src/hooks/Files/useFileHandling.ts index ea7a745c9e..482f6c373c 100644 --- a/client/src/hooks/Files/useFileHandling.ts +++ b/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( diff --git a/client/src/hooks/Messages/useProgress.ts b/client/src/hooks/Messages/useProgress.ts index d76a25b225..0be816d304 100644 --- a/client/src/hooks/Messages/useProgress.ts +++ b/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) { - const [incrementValue] = useState(increment); +export default function useProgress(initialProgress = 0.01, increment = 0.007, fileSize?: number) { + 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; let timer: ReturnType; @@ -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; }