Refactor: drag n drop file works on the entire chat screen

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

@@ -2,10 +2,6 @@ import { Textarea } from "../../../../../../../components/ui/textarea";
 import { classNames } from "../../../../../../../utils/utils";
 
 const TextAreaWrapper = ({
-  dragOver,
-  dragEnter,
-  dragLeave,
-  onDrop,
   checkSendingOk,
   send,
   lockChat,
@@ -54,10 +50,6 @@ const TextAreaWrapper = ({
         e.target.style.borderTopWidth = "0";
       }}
       onBlur={() => setInputFocus(false)}
-      onDragOver={dragOver}
-      onDragEnter={dragEnter}
-      onDragLeave={dragLeave}
-      onDrop={onDrop}
       onKeyDown={(event) => {
         if (checkSendingOk(event)) {
           send();

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

@@ -26,12 +26,13 @@ export default function ChatInput({
   setChatValue,
   inputRef,
   noInput,
+  files,
+  setFiles,
+  isDragging,
 }: chatInputType): JSX.Element {
   const [repeat, setRepeat] = useState(1);
   const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const [files, setFiles] = useState<FilePreviewType[]>([]);
-  const [isDragging, setIsDragging] = useState(false);
   const [inputFocus, setInputFocus] = useState<boolean>(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -40,12 +41,6 @@ export default function ChatInput({
   useUpload(uploadFile, currentFlowId, setFiles);
   const { handleFileChange } = useHandleFileChange(setFiles, currentFlowId);
 
-  const { dragOver, dragEnter, dragLeave, onDrop } = useDragAndDrop(
-    setIsDragging,
-    setFiles,
-    currentFlowId,
-  );
-
   const send = () => {
     sendMessage({
       repeat,
@@ -74,10 +69,6 @@ export default function ChatInput({
     <div className="flex w-full flex-col-reverse">
       <div className="relative w-full">
         <TextAreaWrapper
-          dragOver={dragOver}
-          dragEnter={dragEnter}
-          dragLeave={dragLeave}
-          onDrop={onDrop}
           checkSendingOk={checkSendingOk}
           send={send}
           lockChat={lockChat}
@@ -119,7 +110,9 @@ export default function ChatInput({
               loading={file.loading}
               key={file.id}
               onDelete={() => {
-                setFiles((prev) => prev.filter((f) => f.id !== file.id));
+                setFiles((prev: FilePreviewType[]) =>
+                  prev.filter((f) => f.id !== file.id),
+                );
                 // TODO: delete file on backend
               }}
             />

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

@@ -10,10 +10,11 @@ import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { VertexBuildTypeAPI, sendAllProps } from "../../../../types/api";
 import { ChatMessageType, ChatOutputType } from "../../../../types/chat";
-import { chatViewProps } from "../../../../types/components";
+import { chatViewProps, FilePreviewType } from "../../../../types/components";
 import { classNames } from "../../../../utils/utils";
 import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
+import useDragAndDrop from "./chatInput/hooks/use-drag-and-drop";
 
 export default function ChatView({
   sendMessage,
@@ -141,9 +142,23 @@ export default function ChatView({
     // return newChatHistory;
     // });
   }
+  const [files, setFiles] = useState<FilePreviewType[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const { dragOver, dragEnter, dragLeave, onDrop } = useDragAndDrop(
+    setIsDragging,
+    setFiles,
+    currentFlowId,
+  );
 
   return (
-    <div className="eraser-column-arrangement">
+    <div
+      className="eraser-column-arrangement"
+      onDragOver={dragOver}
+      onDragEnter={dragEnter}
+      onDragLeave={dragLeave}
+      onDrop={onDrop}
+    >
       <div className="eraser-size">
         <div className="eraser-position">
           <button disabled={lockChat} onClick={() => clearChat()}>
@@ -206,6 +221,9 @@ export default function ChatView({
                 setChatValue(value);
               }}
               inputRef={ref}
+              files={files}
+              setFiles={setFiles}
+              isDragging={isDragging}
             />
           </div>
         </div>

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

@@ -485,6 +485,11 @@ export type headerFlowsType = {
 };
 
 export type chatInputType = {
+  isDragging: boolean;
+  files: FilePreviewType[];
+  setFiles: (
+    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[]),
+  ) => void;
   chatValue: string;
   inputRef: {
     current: any;