From 56699384abe6914a6bf76b5d4b0bd62b80e92ca6 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 29 May 2024 10:47:22 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(frontend):=20add=20TextAreaWrapper?=
 =?UTF-8?q?=20component=20for=20chat=20input=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/textAreaWrapper/index.tsx      | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/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
new file mode 100644
index 000000000..147fa2cd6
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
@@ -0,0 +1,64 @@
+import { Textarea } from "../../../../../../../components/ui/textarea";
+import { classNames } from "../../../../../../../utils/utils";
+
+const TextAreaWrapper = ({
+  dragOver,
+  dragEnter,
+  dragLeave,
+  onDrop,
+  checkSendingOk,
+  send,
+  lockChat,
+  noInput,
+  saveLoading,
+  chatValue,
+  setChatValue,
+  CHAT_INPUT_PLACEHOLDER,
+  CHAT_INPUT_PLACEHOLDER_SEND,
+  inputRef,
+}) => {
+  return (
+    <Textarea
+      onDragOver={dragOver}
+      onDragEnter={dragEnter}
+      onDragLeave={dragLeave}
+      onDrop={onDrop}
+      onKeyDown={(event) => {
+        if (checkSendingOk(event)) {
+          send();
+        }
+      }}
+      rows={1}
+      ref={inputRef}
+      disabled={lockChat || noInput || saveLoading}
+      style={{
+        resize: "none",
+        bottom: `${inputRef?.current?.scrollHeight}px`,
+        maxHeight: "150px",
+        overflow: `${
+          inputRef.current && inputRef.current.scrollHeight > 150
+            ? "auto"
+            : "hidden"
+        }`,
+      }}
+      value={lockChat ? "Thinking..." : saveLoading ? "Saving..." : chatValue}
+      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",
+      )}
+      placeholder={
+        noInput ? CHAT_INPUT_PLACEHOLDER : CHAT_INPUT_PLACEHOLDER_SEND
+      }
+    />
+  );
+};
+
+export default TextAreaWrapper;