always use the latest uploadFile function (#651)

Chainlit · Jan 10, 2024 · ff4cec9 · ff4cec9
1 parent 494b6ff
commit ff4cec9
Showing 1 changed file with 76 additions and 64 deletions.
diff --git a/frontend/src/components/organisms/chat/index.tsx b/frontend/src/components/organisms/chat/index.tsx
@@ -1,5 +1,5 @@
 import { apiClient } from 'api';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { toast } from 'sonner';
 import { v4 as uuidv4 } from 'uuid';
@@ -33,74 +33,86 @@ const Chat = () => {
   const [autoScroll, setAutoScroll] = useState(true);
   const { error, disabled } = useChatData();
   const { uploadFile } = useChatInteract();
+  const uploadFileRef = useRef(uploadFile);
 
   const fileSpec = useMemo(() => ({ max_size_mb: 500 }), []);
 
-  const onFileUpload = useCallback((payloads: File[]) => {
-    const attachements: IAttachment[] = payloads.map((file) => {
-      const id = uuidv4();
-
-      const { xhr, promise } = uploadFile(apiClient, file, (progress) => {
-        setAttachments((prev) =>
-          prev.map((attachment) => {
-            if (attachment.id === id) {
-              return {
-                ...attachment,
-                uploadProgress: progress
-              };
-            }
-            return attachment;
-          })
+  useEffect(() => {
+    uploadFileRef.current = uploadFile;
+  }, [uploadFile]);
+
+  const onFileUpload = useCallback(
+    (payloads: File[]) => {
+      const attachements: IAttachment[] = payloads.map((file) => {
+        const id = uuidv4();
+
+        const { xhr, promise } = uploadFileRef.current(
+          apiClient,
+          file,
+          (progress) => {
+            setAttachments((prev) =>
+              prev.map((attachment) => {
+                if (attachment.id === id) {
+                  return {
+                    ...attachment,
+                    uploadProgress: progress
+                  };
+                }
+                return attachment;
+              })
+            );
+          }
         );
-      });
 
-      promise
-        .then((res) => {
-          setAttachments((prev) =>
-            prev.map((attachment) => {
-              if (attachment.id === id) {
-                return {
-                  ...attachment,
-                  // Update with the server ID
-                  serverId: res.id,
-                  uploaded: true,
-                  uploadProgress: 100,
-                  cancel: undefined
-                };
-              }
-              return attachment;
-            })
-          );
-        })
-        .catch((error) => {
-          toast.error(`Failed to upload ${file.name}: ${error.message}`);
-          setAttachments((prev) =>
-            prev.filter((attachment) => attachment.id !== id)
-          );
-        });
-
-      return {
-        id,
-        type: file.type,
-        name: file.name,
-        size: file.size,
-        uploadProgress: 0,
-        cancel: () => {
-          toast.info(`Cancelled upload of ${file.name}`);
-          xhr.abort();
-          setAttachments((prev) =>
-            prev.filter((attachment) => attachment.id !== id)
-          );
-        },
-        remove: () => {
-          setAttachments((prev) =>
-            prev.filter((attachment) => attachment.id !== id)
-          );
-        }
-      };
-    });
-    setAttachments((prev) => prev.concat(attachements));
-  }, []);
+        promise
+          .then((res) => {
+            setAttachments((prev) =>
+              prev.map((attachment) => {
+                if (attachment.id === id) {
+                  return {
+                    ...attachment,
+                    // Update with the server ID
+                    serverId: res.id,
+                    uploaded: true,
+                    uploadProgress: 100,
+                    cancel: undefined
+                  };
+                }
+                return attachment;
+              })
+            );
+          })
+          .catch((error) => {
+            toast.error(`Failed to upload ${file.name}: ${error.message}`);
+            setAttachments((prev) =>
+              prev.filter((attachment) => attachment.id !== id)
+            );
+          });
+
+        return {
+          id,
+          type: file.type,
+          name: file.name,
+          size: file.size,
+          uploadProgress: 0,
+          cancel: () => {
+            toast.info(`Cancelled upload of ${file.name}`);
+            xhr.abort();
+            setAttachments((prev) =>
+              prev.filter((attachment) => attachment.id !== id)
+            );
+          },
+          remove: () => {
+            setAttachments((prev) =>
+              prev.filter((attachment) => attachment.id !== id)
+            );
+          }
+        };
+      });
+      setAttachments((prev) => prev.concat(attachements));
+    },
+    [uploadFile]
+  );
 
   const onFileUploadError = useCallback(
     () => (error: string) => toast.error(error),