From 8109861a77677619440c6377c7f5dfe1695f4994 Mon Sep 17 00:00:00 2001
From: Huy Tran <kingbazoka@gmail.com>
Date: Sun, 29 Dec 2024 23:10:30 -0800
Subject: [PATCH] fix: make input area auto-resizable

---
 components/ui/form-component.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/ui/form-component.tsx b/components/ui/form-component.tsx
index 9e6f1dd..b8c02f3 100644
--- a/components/ui/form-component.tsx
+++ b/components/ui/form-component.tsx
@@ -634,8 +634,20 @@ const FormComponent: React.FC<FormComponentProps> = ({
     const postSubmitFileInputRef = useRef<HTMLInputElement>(null);
     const [isFocused, setIsFocused] = useState(false);
 
+    const autoResizeInput = (target: HTMLTextAreaElement) => {
+        if (target) {
+            target.style.height = 'auto'; // trigger recalculate scrollHeight
+            let additionalLineHeight = 0;
+            if (target.value) {
+                additionalLineHeight = parseFloat(window.getComputedStyle(target).lineHeight);
+            }
+            target.style.height = `${target.scrollHeight + additionalLineHeight}px`;
+        }
+    };
+
     const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         setInput(event.target.value);
+        autoResizeInput(event.target);
     };
 
     const handleFocus = () => {
@@ -800,7 +812,7 @@ const FormComponent: React.FC<FormComponentProps> = ({
                     onFocus={handleFocus}
                     onBlur={handleBlur}
                     className={cn(
-                        "min-h-[40px] max-h-[200px] w-full resize-none rounded-lg",
+                        "min-h-[40px] w-full resize-none rounded-lg",
                         "overflow-y-auto overflow-x-hidden",
                         "text-base leading-relaxed",
                         "bg-neutral-100 dark:bg-neutral-900",
@@ -889,4 +901,4 @@ const FormComponent: React.FC<FormComponentProps> = ({
     );
 };
 
-export default FormComponent;
\ No newline at end of file
+export default FormComponent;