From 40eaa0903b71dfc0a64e800e46f6f806d8030181 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 29 May 2024 17:48:38 -0300
Subject: [PATCH] Refactor: enhance upload file button UI and enhance File and
 Image preview UI

---
 .../components/textAreaWrapper/index.tsx      |  4 +-
 .../components/uploadFileButton/index.tsx     |  6 ++-
 .../helpers/get-class-file-preview.ts         |  2 +-
 .../components/chatView/chatInput/index.tsx   | 13 +++---
 .../chatView/filePreviewChat/index.tsx        | 43 +++++++++++++++----
 src/frontend/src/utils/styleUtils.ts          |  2 +
 6 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
index 6892373ad..19dbd4550 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
@@ -42,10 +42,10 @@ const TextAreaWrapper = ({
 
   const fileClass =
     files.length > 0
-      ? "rounded-b-md border-t-0 border-border focus:border-t-0 focus:border-ring"
+      ? "rounded-b-lg rounded-t-none border-t-0 border-border focus:border-t-0 focus:border-ring"
       : "rounded-md border-t-2 border-border focus:border-ring";
 
-  const additionalClassNames = "form-modal-lockchat pl-10";
+  const additionalClassNames = "form-modal-lockchat pl-14";
 
   return (
     <Textarea
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
index efa938da2..65f85af61 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
@@ -1,3 +1,5 @@
+import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
+
 const UploadFileButton = ({
   fileInputRef,
   handleFileChange,
@@ -12,10 +14,10 @@ const UploadFileButton = ({
         onChange={handleFileChange}
       />
       <button
-        className="absolute rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+        className="font-bold text-white transition-all hover:text-muted-foreground"
         onClick={handleButtonClick}
       >
-        Upload File
+        <ForwardedIconComponent name="PaperclipIcon" />
       </button>
     </div>
   );
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts b/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts
index e400424a5..3f3cf2762 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/helpers/get-class-file-preview.ts
+++ b/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-2 rounded-t-md bg-background px-10 py-5 ${
+  return `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"
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
index 42c439941..4dbaf6e93 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
@@ -92,7 +92,6 @@ export default function ChatInput({
           files={files}
           isDragging={isDragging}
         />
-
         <div className="form-modal-send-icon-position">
           <ButtonSendWrapper
             send={send}
@@ -103,11 +102,13 @@ export default function ChatInput({
           />
         </div>
 
-        <UploadFileButton
-          fileInputRef={fileInputRef}
-          handleFileChange={handleFileChange}
-          handleButtonClick={handleButtonClick}
-        />
+        <div className="absolute bottom-2 left-4">
+          <UploadFileButton
+            fileInputRef={fileInputRef}
+            handleFileChange={handleFileChange}
+            handleButtonClick={handleButtonClick}
+          />
+        </div>
       </div>
       {files.length > 0 && (
         <div className={classNameFilePreview}>
diff --git a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
index 8b11d5e7f..c5a8f3055 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
@@ -1,5 +1,7 @@
 import { useState } from "react";
-import IconComponent from "../../../../../components/genericIconComponent";
+import IconComponent, {
+  ForwardedIconComponent,
+} from "../../../../../components/genericIconComponent";
 
 export default function FilePreview({
   error,
@@ -12,12 +14,23 @@ export default function FilePreview({
   error: boolean;
   onDelete: () => void;
 }) {
+  const isImage = file.type.toLowerCase().includes("image");
+
   const [isHovered, setIsHovered] = useState(false);
 
+  const formatFileName = (name) => {
+    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, 10)}...${fileExtension}`;
+    }
+    return name;
+  };
+
   return (
     <div className="relative inline-block">
       {loading ? (
-        <div className="flex h-24 w-24 items-center justify-center rounded-md border border-ring bg-background ">
+        <div className="flex h-20 w-20 items-center justify-center rounded-md border border-ring bg-background ">
           <svg
             aria-hidden="true"
             className={`h-10 w-10 animate-spin fill-black  text-muted`}
@@ -39,19 +52,31 @@ export default function FilePreview({
         <div>Error...</div>
       ) : (
         <div
-          className={`relative h-24 w-24 rounded-md border border-ring  bg-background transition duration-300 ${
+          className={`relative ${isImage ? "h-20 w-20" : "h-20 w-48"} cursor-pointer rounded-lg border  border-ring bg-background transition duration-300 ${
             isHovered ? "shadow-md" : ""
           }`}
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
         >
-          <img
-            src={URL.createObjectURL(file)}
-            alt="file"
-            className="block h-full w-full rounded-md border border-border"
-          />
+          {isImage ? (
+            <img
+              src={URL.createObjectURL(file)}
+              alt="file"
+              className="block h-full w-full rounded-md border border-border"
+            />
+          ) : (
+            <div className="ml-3 flex h-full w-full items-center gap-2 text-sm">
+              <ForwardedIconComponent name="File" className="h-8 w-8" />
+              <div className="flex flex-col">
+                <span className="font-bold">{formatFileName(file.name)}</span>
+                <span>File</span>
+              </div>
+            </div>
+          )}
           {isHovered && (
-            <div className="absolute bottom-20 left-20 flex h-5 w-5 items-center justify-center bg-black bg-opacity-30">
+            <div
+              className={`absolute ${isImage ? "bottom-16 left-16" : "bottom-16 left-44"}  flex h-5 w-5 items-center justify-center`}
+            >
               <div
                 className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full bg-gray-200 p-2 transition-all"
                 onClick={onDelete}
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index c73ec5d23..15f46d1ba 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -143,6 +143,7 @@ import {
   X,
   XCircle,
   Zap,
+  PaperclipIcon,
 } from "lucide-react";
 import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -526,4 +527,5 @@ export const nodeIconsLucide: iconsType = {
   FolderPlusIcon,
   FolderIcon,
   Discord: FaDiscord,
+  PaperclipIcon,
 };