feat(textarea): overflow-y-auto

Author: xx-yoke

src/sender.tsx

@@ -122,11 +122,11 @@ export function Sender({
   const [isSending, setIsSending] = useState(false);
 
   useEffect(() => {
+    onMessageChange?.(message);
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
       textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
     }
-    onMessageChange?.(message);
   }, [message, onMessageChange]);
 
   const [controller, setController] = useState<AbortController | null>(null);
@@ -180,7 +180,9 @@ export function Sender({
       data-slot="sender"
       className={twMerge(
         clsx(
-          "flex flex-col items-center border border-gray-200 dark:border-gray-700 rounded-2xl shadow-sm transition-all duration-300 hover:shadow-md focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
+          "flex flex-col items-center border rounded-2xl",
+          "border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-300 hover:shadow-md",
+          "focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
           className,
         ),
       )}
@@ -192,7 +194,11 @@ export function Sender({
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
-        className="w-full pt-4 px-4 border-0 rounded-2xl !resize-none focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400"
+        className={clsx(
+          "w-full pt-4 px-4 border-0 rounded-2xl !resize-none",
+          "focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400",
+          "overflow-y-auto max-h-32"
+        )}
         rows={2}
       />
       <div className="flex items-center w-full px-4 py-2 gap-4">
@@ -205,4 +211,4 @@ export function Sender({
       </div>
     </div>
   );
-}
+}