From 719c0312126c360c88d126535a5676481d008bc1 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Sat, 8 Jun 2024 13:41:29 -0300
Subject: [PATCH] feat: Add drag and drop file upload functionality to chat
 input

This commit adds the drag and drop file upload functionality to the chat input component in the IOModal. It allows users to drag and drop files into the chat input area for uploading. The files are then processed and added to the chat message.

Files are validated to ensure they have the correct file extensions (png, jpg, jpeg, gif, bmp, webp) before uploading. If an invalid file is dropped, an error message is displayed.

This feature improves the user experience by providing a convenient way to upload files in the chat input.

Fixes #2115
---
 .../components/buttonSendWrapper/index.tsx    | 26 +++++++++++++++---
 .../chatInput/hooks/use-drag-and-drop.tsx     | 27 ++++++++++++++++---
 .../components/chatView/chatInput/index.tsx   |  1 +
 .../IOModal/components/chatView/index.tsx     |  3 ++-
 4 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
index ff93a9f7b..52a3ff4dc 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
@@ -1,14 +1,25 @@
 import IconComponent from "../../../../../../../components/genericIconComponent";
 import { Case } from "../../../../../../../shared/components/caseComponent";
+import { FilePreviewType } from "../../../../../../../types/components";
 import { classNames } from "../../../../../../../utils/utils";
 
+type ButtonSendWrapperProps = {
+  send: () => void;
+  lockChat: boolean;
+  noInput: boolean;
+  saveLoading: boolean;
+  chatValue: string;
+  files: FilePreviewType[];
+};
+
 const ButtonSendWrapper = ({
   send,
   lockChat,
   noInput,
   saveLoading,
   chatValue,
-}) => {
+  files,
+}: ButtonSendWrapperProps) => {
   return (
     <button
       className={classNames(
@@ -22,7 +33,11 @@ const ButtonSendWrapper = ({
       disabled={lockChat || saveLoading}
       onClick={(): void => send()}
     >
-      <Case condition={lockChat || saveLoading}>
+      <Case
+        condition={
+          lockChat || saveLoading || files.some((file) => file.loading)
+        }
+      >
         <IconComponent
           name="Lock"
           className="form-modal-lock-icon"
@@ -38,7 +53,12 @@ const ButtonSendWrapper = ({
         />
       </Case>
 
-      <Case condition={!(lockChat || saveLoading) && !noInput}>
+      <Case
+        condition={
+          !(lockChat || saveLoading || files.some((file) => file.loading)) &&
+          !noInput
+        }
+      >
         <IconComponent
           name="LucideSend"
           className="form-modal-send-icon "
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
index c374cf550..b9f1e2635 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
@@ -1,7 +1,17 @@
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
+import useAlertStore from "../../../../../../stores/alertStore";
 
-const useDragAndDrop = (setIsDragging, setFiles, currentFlowId) => {
+const fsErrorText =
+  "Please ensure your file has one of the following extensions:";
+const snErrorTxt = "png, jpg, jpeg, gif, bmp, webp";
+
+const useDragAndDrop = (
+  setIsDragging,
+  setFiles,
+  currentFlowId,
+  setErrorData,
+) => {
   const dragOver = (e) => {
     e.preventDefault();
     if (e.dataTransfer.types.some((type) => type === "Files")) {
@@ -24,7 +34,7 @@ const useDragAndDrop = (setIsDragging, setFiles, currentFlowId) => {
   const onDrop = (e) => {
     e.preventDefault();
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      handleFiles(e.dataTransfer.files, setFiles, currentFlowId);
+      handleFiles(e.dataTransfer.files, setFiles, currentFlowId, setErrorData);
       e.dataTransfer.clearData();
     }
     setIsDragging(false);
@@ -37,8 +47,19 @@ const useDragAndDrop = (setIsDragging, setFiles, currentFlowId) => {
   };
 };
 
-const handleFiles = (files, setFiles, currentFlowId) => {
+const handleFiles = (files, setFiles, currentFlowId, setErrorData) => {
   if (files) {
+    const allowedExtensions = ["png", "jpg", "jpeg", "gif", "bmp", "webp"];
+    const file = files?.[0];
+    const fileExtension = file.name.split(".").pop()?.toLowerCase();
+    if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+      console.log("Error uploading file");
+      setErrorData({
+        title: "Error uploading file",
+        list: [fsErrorText, snErrorTxt],
+      });
+      return;
+    }
     const uid = new ShortUniqueId({ length: 3 });
     const id = uid();
     const type = files[0].type.split("/")[0];
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 22d8d4ea3..8af591df9 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
@@ -89,6 +89,7 @@ export default function ChatInput({
             noInput={noInput}
             saveLoading={saveLoading}
             chatValue={chatValue}
+            files={files}
           />
         </div>
 
diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
index f183c830e..067cf525c 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@@ -25,7 +25,7 @@ export default function ChatView({
   setLockChat,
 }: chatViewProps): JSX.Element {
   const { flowPool, outputs, inputs, CleanFlowPool } = useFlowStore();
-  const { setNoticeData } = useAlertStore();
+  const { setErrorData } = useAlertStore();
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const messagesRef = useRef<HTMLDivElement | null>(null);
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
@@ -161,6 +161,7 @@ export default function ChatView({
     setIsDragging,
     setFiles,
     currentFlowId,
+    setErrorData,
   );
 
   return (