From 0d1721117756bf2277c75229dc6de2eac455bd98 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 29 May 2024 16:01:13 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(textAreaWrapper):=20refactor=20Tex?=
 =?UTF-8?q?tAreaWrapper=20to=20improve=20readability=20and=20maintainabili?=
 =?UTF-8?q?ty=20=E2=9C=A8=20(uploadFileButton):=20add=20UploadFileButton?=
 =?UTF-8?q?=20component=20for=20file=20uploads=20in=20chat=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/textAreaWrapper/index.tsx      | 48 ++++++++++++-------
 .../components/uploadFileButton/index.tsx     | 24 ++++++++++
 2 files changed, 54 insertions(+), 18 deletions(-)
 create mode 100644 src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx

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 9bdf14638..6892373ad 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
@@ -18,7 +18,35 @@ const TextAreaWrapper = ({
   inputRef,
   setInputFocus,
   files,
+  isDragging,
 }) => {
+  const getPlaceholderText = (
+    isDragging: boolean,
+    noInput: boolean,
+  ): string => {
+    if (isDragging) {
+      return "Drop here";
+    } else if (noInput) {
+      return CHAT_INPUT_PLACEHOLDER;
+    } else {
+      return CHAT_INPUT_PLACEHOLDER_SEND;
+    }
+  };
+
+  const lockClass =
+    lockChat || saveLoading
+      ? "form-modal-lock-true bg-input"
+      : noInput
+        ? "form-modal-no-input bg-input"
+        : "form-modal-lock-false bg-background";
+
+  const fileClass =
+    files.length > 0
+      ? "rounded-b-md 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";
+
   return (
     <Textarea
       onFocus={(e) => {
@@ -52,24 +80,8 @@ const TextAreaWrapper = ({
       onChange={(event): void => {
         setChatValue(event.target.value);
       }}
-      className={classNames(
-        lockChat || saveLoading
-          ? " form-modal-lock-true bg-input"
-          : noInput
-            ? "form-modal-no-input bg-input"
-            : " form-modal-lock-false bg-background",
-
-        "form-modal-lockchat",
-        `${
-          files.length > 0
-            ? "rounded-b-md border-t-0 border-border focus:border-t-0 focus:border-ring"
-            : "rounded-md border-t-2 border-border focus:border-ring"
-        }`,
-        "pl-10",
-      )}
-      placeholder={
-        noInput ? CHAT_INPUT_PLACEHOLDER : CHAT_INPUT_PLACEHOLDER_SEND
-      }
+      className={classNames(lockClass, fileClass, additionalClassNames)}
+      placeholder={getPlaceholderText(isDragging, noInput)}
     />
   );
 };
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
new file mode 100644
index 000000000..efa938da2
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
@@ -0,0 +1,24 @@
+const UploadFileButton = ({
+  fileInputRef,
+  handleFileChange,
+  handleButtonClick,
+}) => {
+  return (
+    <div>
+      <input
+        type="file"
+        ref={fileInputRef}
+        style={{ display: "none" }}
+        onChange={handleFileChange}
+      />
+      <button
+        className="absolute rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+        onClick={handleButtonClick}
+      >
+        Upload File
+      </button>
+    </div>
+  );
+};
+
+export default UploadFileButton;