refactor: add use-download-files hook for downloading files on chat

src/frontend/src/controllers/API/queries/files/index.ts

@@ -1,3 +1,4 @@
+export * from "./use-download-files";
 export * from "./use-get-download-images";
 export * from "./use-get-profile-pictures";
 export * from "./use-post-upload-file";

src/frontend/src/controllers/API/queries/files/use-download-files.ts

@@ -0,0 +1,48 @@
+import { keepPreviousData } from "@tanstack/react-query";
+import {
+  useMutationFunctionType,
+  useQueryFunctionType,
+} from "../../../../types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface DownloadImagesQueryParams {
+  path: string;
+  filename: string;
+}
+
+export const useGetDownloadFileMutation: useMutationFunctionType<
+  DownloadImagesQueryParams
+> = (params, options) => {
+  const { mutate } = UseRequestProcessor();
+
+  const getDownloadImagesFn = async () => {
+    if (!params) return;
+    // need to use fetch because axios convert blob data to string, and this convertion can corrupt the file
+    const response = await fetch(`${getURL("FILES")}/download/${params.path}`);
+    console.log(response);
+    const blob = await response.blob();
+    console.log(blob);
+    const url = URL.createObjectURL(blob);
+    console.log(url);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", params.filename); // Set the filename
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    URL.revokeObjectURL(url);
+    return {};
+  };
+
+  const queryResult = mutate(
+    ["useGetDownloadFileMutation", params.path],
+    getDownloadImagesFn,
+    options,
+  );
+
+  return queryResult;
+};

src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx

@@ -24,12 +24,7 @@ export default function FileCardWrapper({
         {formatFileName(name, 50)}
         <ForwardedIconComponent name={show ? "ChevronDown" : "ChevronRight"} />
       </span>
-      <FileCard
-        showFile={show}
-        fileName={name}
-        fileType={type}
-        content={path}
-      />
+      <FileCard showFile={show} fileName={name} fileType={type} path={path} />
     </div>
   );
 }

src/frontend/src/modals/IOModal/components/chatView/fileComponent/index.tsx

@@ -1,3 +1,4 @@
+import { useGetDownloadFileMutation } from "@/controllers/API/queries/files";
 import { useState } from "react";
 import { ForwardedIconComponent } from "../../../../../components/genericIconComponent";
 import { BACKEND_URL, BASE_URL_API } from "../../../../../constants/constants";
@@ -6,18 +7,20 @@ import { fileCardPropsType } from "../../../../../types/components";
 import formatFileName from "../filePreviewChat/utils/format-file-name";
 import DownloadButton from "./components/downloadButton/downloadButton";
 import getClasses from "./utils/get-classes";
-import handleDownload from "./utils/handle-download";
 
 const imgTypes = new Set(["png", "jpg", "jpeg", "gif", "webp", "image"]);
 
 export default function FileCard({
   fileName,
-  content,
+  path,
   fileType,
   showFile = true,
 }: fileCardPropsType): JSX.Element | undefined {
   const [isHovered, setIsHovered] = useState(false);
-  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+  const { mutate } = useGetDownloadFileMutation({
+    filename: fileName,
+    path: path,
+  });
   function handleMouseEnter(): void {
     setIsHovered(true);
   }
@@ -27,7 +30,7 @@ export default function FileCard({
 
   const fileWrapperClasses = getClasses(isHovered);
 
-  const imgSrc = `${BASE_URL_API}files/images/${content}`;
+  const imgSrc = `${BASE_URL_API}files/images/${path}`;
 
   if (showFile) {
     if (imgTypes.has(fileType)) {
@@ -46,7 +49,7 @@ export default function FileCard({
             />
             <DownloadButton
               isHovered={isHovered}
-              handleDownload={() => handleDownload({ fileName, content })}
+              handleDownload={() => mutate(undefined)}
             />
           </div>
         </div>
@@ -56,7 +59,7 @@ export default function FileCard({
     return (
       <div
         className={fileWrapperClasses}
-        onClick={() => handleDownload({ fileName, content })}
+        onClick={() => mutate(undefined)}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
@@ -69,7 +72,7 @@ export default function FileCard({
         </div>
         <DownloadButton
           isHovered={isHovered}
-          handleDownload={() => handleDownload({ fileName, content })}
+          handleDownload={() => mutate(undefined)}
         />
       </div>
     );

src/frontend/src/modals/IOModal/components/chatView/index.tsx

@@ -80,7 +80,6 @@ export default function ChatView({
 
           const is_ai =
             sender === "Machine" || sender === null || sender === undefined;
-
           return {
             isSend: !is_ai,
             message,

src/frontend/src/types/components/index.ts

@@ -617,7 +617,7 @@ export interface Props {
 
 export type fileCardPropsType = {
   fileName: string;
-  content: string;
+  path: string;
   fileType: string;
   showFile?: boolean;
 };