Feat: enhance sending files UI

src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts

@@ -1,5 +1,5 @@
 export const getClassNamesFilePreview = (inputFocus) => {
-  return `flex w-full items-center gap-4 rounded-t-lg bg-background px-14 py-5 overflow-auto custom-scroll ${
+  return `transition-all duration-300 flex w-full items-center gap-4 rounded-t-lg bg-background px-14 py-5 overflow-auto custom-scroll ${
     inputFocus
       ? "border-2 border-b-0 border-ring"
       : "border border-b-0 border-border"

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

@@ -7,7 +7,9 @@ import remarkMath from "remark-math";
 import MaleTechnology from "../../../../../assets/male-technologist.png";
 import Robot from "../../../../../assets/robot.png";
 import CodeTabsComponent from "../../../../../components/codeTabsComponent";
-import IconComponent from "../../../../../components/genericIconComponent";
+import IconComponent, {
+  ForwardedIconComponent,
+} from "../../../../../components/genericIconComponent";
 import SanitizedHTMLWrapper from "../../../../../components/sanitizedHTMLWrapper";
 import useAlertStore from "../../../../../stores/alertStore";
 import useFlowStore from "../../../../../stores/flowStore";
@@ -22,6 +24,7 @@ export default function ChatMessage({
   updateChat,
   setLockChat,
 }: chatMessagePropsType): JSX.Element {
+  const [showFile, setShowFile] = useState<boolean>(true);
   const convert = new Convert({ newline: true });
   const [hidden, setHidden] = useState(true);
   const template = chat.template;
@@ -291,7 +294,7 @@ dark:prose-invert"
                             parts.push(
                               <span className="chat-message-highlight">
                                 {chat.message[match[1]]}
-                            </span>
+                              </span>,
                             );
                           }
 
@@ -308,6 +311,7 @@ dark:prose-invert"
                 </span>
               </>
             ) : (
+              <div className="flex flex-col">
                 <span
                   className="prose text-primary word-break-break-word dark:prose-invert"
                   data-testid={
@@ -316,17 +320,22 @@ dark:prose-invert"
                 >
                   {chatMessage}
                 </span>
-            )}
-          </div>
-        )}
-      </div>
-      <div id={lastMessage ? "last-chat-message" : ""}></div>
                 {chat.files && (
-        <div className="my-2 w-full">
+                  <div className="my-2">
                     {chat.files.map((file, index) => {
                       return (
-              <div key={index} className="my-2 w-full">
+                        <div key={index} className="flex flex-col gap-2">
+                          <span
+                            onClick={() => setShowFile(!showFile)}
+                            className="flex cursor-pointer gap-2 text-sm text-muted-foreground"
+                          >
+                            {file.name}
+                            <ForwardedIconComponent
+                              name={showFile ? "ChevronDown" : "ChevronRight"}
+                            />
+                          </span>
                           <FileCard
+                            showFile={showFile}
                             fileName={file.name}
                             fileType={file.type}
                             content={file.path}
@@ -336,6 +345,12 @@ dark:prose-invert"
                     })}
                   </div>
                 )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+      <div id={lastMessage ? "last-chat-message" : ""}></div>
     </>
   );
 }

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

@@ -1,9 +1,12 @@
 import * as base64js from "base64-js";
 import { useState } from "react";
-import IconComponent from "../../../../../components/genericIconComponent";
+import IconComponent, {
+  ForwardedIconComponent,
+} from "../../../../../components/genericIconComponent";
 import { fileCardPropsType } from "../../../../../types/components";
 import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
 import { BACKEND_URL, BASE_URL_API } from "../../../../../constants/constants";
+import formatFileName from "../filePreviewChat/utils/format-file-name";
 
 const imgTypes = new Set(["png", "jpg"]);
 
@@ -11,10 +14,9 @@ export default function FileCard({
   fileName,
   content,
   fileType,
-}: fileCardPropsType): JSX.Element {
+  showFile = true,
-  const handleDownload = (): void => {
+}: fileCardPropsType): JSX.Element | undefined {
-    //TODO: update download function
+  const handleDownload = (): void => {};
-  };
   const [isHovered, setIsHovered] = useState(false);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   function handleMouseEnter(): void {
@@ -24,22 +26,29 @@ export default function FileCard({
     setIsHovered(false);
   }
 
+  const imgSrc = `${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/images/${content}`;
+
+  if (showFile) {
     if (imgTypes.has(fileType)) {
       return (
         <div
-        className="relative ml-20 h-auto w-auto border border-border"
+          className="inline-block w-full rounded-lg transition-all"
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
+          style={{ display: "inline-block" }}
         >
+          <div className="relative w-[80%] rounded-lg border border-border">
             <img
-          src={`${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/images/${content}`}
+              src={imgSrc}
               alt="generated image"
-          className="h-auto  w-auto rounded-lg border border-border"
+              className="m-0  h-auto w-auto rounded-lg border border-border p-0 transition-all"
             />
             {isHovered && (
-          <div className={`file-card-modal-image-div `}>
+              <div
+                className={`absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground `}
+              >
                 <button
-              className="file-card-modal-image-button "
+                  className="px-2 py-1 text-ring "
                   onClick={handleDownload}
                 >
                   <IconComponent
@@ -50,32 +59,30 @@ export default function FileCard({
               </div>
             )}
           </div>
+        </div>
       );
     }
 
     return (
-    <button onClick={handleDownload} className="file-card-modal-button">
+      <div
-      <div className="file-card-modal-div">
+        className={`relative ${false ? "h-20 w-20" : "h-20 w-80"} cursor-pointer rounded-lg border  border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${
-        {" "}
+          isHovered ? "shadow-md" : ""
-        {imgTypes.has(fileType) ? (
+        }`}
-          <img
+        onClick={handleDownload}
-            src={`${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/images/${content}`}
+      >
-            alt=""
+        <div className="ml-3 flex h-full w-full items-center gap-2 text-sm">
-            className="h-8 w-8"
+          <ForwardedIconComponent name="File" className="h-8 w-8" />
-          />
+          <div className="flex flex-col">
-        ) : (
+            <span className="font-bold">{formatFileName(fileName, 20)}</span>
-          <IconComponent name="File" className="h-8 w-8" />
+            <span>File</span>
-        )}
+          </div>
-        <div className="file-card-modal-footer">
-          {" "}
-          <div className="file-card-modal-name">{fileName}</div>
-          <div className="file-card-modal-type">{fileType}</div>
         </div>
         <IconComponent
           name="DownloadCloud"
-          className="ml-auto h-6 w-6 text-current"
+          className="absolute right-2 top-2 ml-auto h-6 w-6 text-current"
         />
       </div>
-    </button>
     );
   }
+  return undefined;
+}

src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/utils/format-file-name.tsx

@@ -1,8 +1,11 @@
-export default function formatFileName(name: string): string {
+export default function formatFileName(
+  name: string,
+  numberToTruncate: number = 29,
+): string {
   const fileExtension = name.split(".").pop(); // Get the file extension
   const baseName = name.slice(0, name.lastIndexOf(".")); // Get the base name without the extension
   if (baseName.length > 6) {
-    return `${baseName.slice(0, 29)}...${fileExtension}`;
+    return `${baseName.slice(0, numberToTruncate)}...${fileExtension}`;
   }
   return name;
 }

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

@@ -523,6 +523,7 @@ export type fileCardPropsType = {
   fileName: string;
   content: string;
   fileType: string;
+  showFile?: boolean;
 };
 
 export type nodeToolbarPropsType = {