From 811816c8b133f0e7fc998e5884c60a2ba5be3583 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Date: Wed, 7 Aug 2024 15:21:26 -0300
Subject: [PATCH] fix: replace Input with Textarea in TextAreaComponent for
 improved user experience and aesthetics (#3228)

* fix: add 'nowheel' class to Textarea component for enhanced user experience in textarea interactions

* refactor: replace Input with Textarea in TextAreaComponent for improved user experience and aesthetics

* refactor: Update TextAreaComponent to dynamically adjust the number of rows based on the content length for improved user experience

* [autofix.ci] apply automated fixes

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 src/frontend/src/components/textAreaComponent/index.tsx | 9 +++++----
 src/frontend/src/components/ui/textarea.tsx             | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 2ca29ef4c..67e1251ed 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -1,13 +1,12 @@
 import { classNames } from "@/utils/utils";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { EDIT_TEXT_MODAL_TITLE } from "../../constants/constants";
 import { TypeModal } from "../../constants/enums";
 import GenericModal from "../../modals/genericModal";
-import { Case } from "../../shared/components/caseComponent";
 import { TextAreaComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
-import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
 
 export default function TextAreaComponent({
   value,
@@ -28,7 +27,7 @@ export default function TextAreaComponent({
   return (
     <div className={"flex w-full items-center" + (disabled ? "" : "")}>
       <div className="flex w-full items-center gap-3" data-testid={"div-" + id}>
-        <Input
+        <Textarea
           id={id}
           data-testid={id}
           value={value}
@@ -40,7 +39,9 @@ export default function TextAreaComponent({
             editNode ? "input-edit-node" : "",
             password != undefined ? "pr-8" : "",
             "w-full",
+            "resize-none",
           )}
+          rows={Math.min(3, value.split("\n").length)}
           placeholder={"Type something..."}
           onChange={(event) => {
             onChange(event.target.value);
diff --git a/src/frontend/src/components/ui/textarea.tsx b/src/frontend/src/components/ui/textarea.tsx
index 5f26719e0..5d02b0414 100644
--- a/src/frontend/src/components/ui/textarea.tsx
+++ b/src/frontend/src/components/ui/textarea.tsx
@@ -13,7 +13,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <div className="h-full w-full">
         <textarea
           className={cn(
-            "nopan nodelete nodrag noflow textarea-primary",
+            "nopan nodelete nodrag noflow textarea-primary nowheel",
             className,
             password ? "password" : "",
           )}