Update file preview function in FileCard component

src/frontend/package-lock.json

@@ -6655,9 +6655,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.1.5",
+      "version": "11.1.7",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.7.tgz",
-      "integrity": "sha512-ogK5fc0GBUT3AjzMXPx7f74m5V1ByRqkKQARBVHpdkYTNDxb/WriANYD+5JBo1wklQQJ1HayDZtmofQLqZFcbw==",
+      "integrity": "sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==",
       "dependencies": {
         "tslib": "^2.4.0"
       },

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

@@ -251,21 +251,6 @@ dark:prose-invert"
                       [chat.message, chatMessage]
                     )}
                   </div>
-                  {chat.files && (
-                    <div className="my-2 w-full">
-                      {chat.files.map((file, index) => {
-                        return (
-                          <div key={index} className="my-2 w-full">
-                            <FileCard
-                              fileName={"Generated File"}
-                              fileType={file.data_type}
-                              content={file.data}
-                            />
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
                 </div>
               </div>
             </div>
@@ -335,6 +320,21 @@ dark:prose-invert"
         )}
       </div>
       <div id={lastMessage ? "last-chat-message" : ""}></div>
+      {chat.files && (
+        <div className="my-2 w-full">
+          {chat.files.map((file, index) => {
+            return (
+              <div key={index} className="my-2 w-full">
+                <FileCard
+                  fileName={file.name}
+                  fileType={file.type}
+                  content={file.path}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
     </>
   );
 }

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

@@ -2,6 +2,10 @@ import * as base64js from "base64-js";
 import { useState } from "react";
 import IconComponent from "../../../../../components/genericIconComponent";
 import { fileCardPropsType } from "../../../../../types/components";
+import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
+import { BACKEND_URL, BASE_URL_API } from "../../../../../constants/constants";
+
+const imgTypes = new Set(["png", "jpg"]);
 
 export default function FileCard({
   fileName,
@@ -9,18 +13,10 @@ export default function FileCard({
   fileType,
 }: fileCardPropsType): JSX.Element {
   const handleDownload = (): void => {
-    const byteArray = new Uint8Array(base64js.toByteArray(content));
+    //TODO: update download function
-    const blob = new Blob([byteArray], { type: "application/octet-stream" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = fileName + ".png";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
   };
   const [isHovered, setIsHovered] = useState(false);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   function handleMouseEnter(): void {
     setIsHovered(true);
   }
@@ -28,7 +24,7 @@ export default function FileCard({
     setIsHovered(false);
   }
 
-  if (fileType === "image") {
+  if (imgTypes.has(fileType)) {
     return (
       <div
         className="relative h-1/4 w-1/4"
@@ -36,7 +32,7 @@ export default function FileCard({
         onMouseLeave={handleMouseLeave}
       >
         <img
-          src={`data:image/png;base64,${content}`}
+            src={`${BACKEND_URL.slice(0,BACKEND_URL.length-1)}${BASE_URL_API}files/images/${content}`}
             alt="generated image"
           className="h-full  w-full rounded-lg"
         />
@@ -60,10 +56,10 @@ export default function FileCard({
   return (
     <button onClick={handleDownload} className="file-card-modal-button">
       <div className="file-card-modal-div">
-        ooooooooooooooo{" "}
+        {" "}
-        {fileType === "image" ? (
+        {imgTypes.has(fileType) ? (
           <img
-            src={`data:image/png;base64,${content}`}
+            src={`${BACKEND_URL.slice(0,BACKEND_URL.length-1)}${BASE_URL_API}files/images/${content}`}
             alt=""
             className="h-8 w-8"
           />

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

@@ -67,7 +67,7 @@ export default function ChatView({
       .filter((output) => output.data.messages && output.data.messages.length > 0)
       .map((output, index) => {
         try {
-          const { sender, message, sender_name, stream_url } = output.data
+          const { sender, message, sender_name, stream_url,files } = output.data
             .messages[0] as ChatOutputType;
 
           const is_ai = sender === "Machine" || sender === null;
@@ -77,6 +77,8 @@ export default function ChatView({
             sender_name,
             componentId: output.id,
             stream_url: stream_url,
+            files
+            
           };
         } catch (e) {
           console.error(e);

src/frontend/src/types/chat/index.ts

@@ -6,7 +6,7 @@ export type ChatMessageType = {
   template?: string;
   isSend: boolean;
   thought?: string;
-  files?: Array<{ data: string; type: string; data_type: string }>;
+  files?: Array<{ path: string; type: string; name: string }>;
   prompt?: string;
   chatKey?: string;
   componentId: string;