✨ (textAreaWrapper): refactor TextAreaWrapper to improve readability and maintainability

✨ (uploadFileButton): add UploadFileButton component for file uploads in chat input

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(
+      className={classNames(lockClass, fileClass, additionalClassNames)}
-        lockChat || saveLoading
+      placeholder={getPlaceholderText(isDragging, noInput)}
-          ? " 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
-      }
     />
   );
 };

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;