fix: Fix UI issues with the textArea component. (#1133)

src/components/ui/textarea.tsx

@@ -3,15 +3,56 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
-  ({ className, ...props }, ref) => {
+  ({ className, value, ...props }, ref) => {
+    const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
+
+    const adjustHeight = React.useCallback(() => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        const newHeight = Math.min(textarea.scrollHeight, 300);
+        textarea.style.height = `${newHeight}px`;
+      }
+    }, []);
+
+    // Watch for value changes to adjust height
+    React.useLayoutEffect(() => {
+      adjustHeight();
+    }, [value, adjustHeight]);
+
+    React.useEffect(() => {
+      adjustHeight();
+      window.addEventListener("resize", adjustHeight);
+      return () => window.removeEventListener("resize", adjustHeight);
+    }, [adjustHeight]);
+
+    const combinedRef = (node: HTMLTextAreaElement) => {
+      textareaRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+
     return (
       <textarea
         className={cn(
-          "border-solid",
-          "flex min-h-[60px] w-full rounded-md border border-primary-alt bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "border-solid resize-y min-w-fit overflow-auto",
+          "flex min-h-[60px] max-h-[300px] w-full rounded-md border border-primary-alt bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
-        ref={ref}
+        value={value}
+        ref={combinedRef}
+        onChange={(e) => {
+          adjustHeight();
+          props.onChange?.(e);
+        }}
+        onInput={adjustHeight}
+        onCompositionEnd={adjustHeight}
+        onPaste={() => {
+          setTimeout(adjustHeight, 0);
+        }}
         {...props}
       />
     );