feat: add textarea auto size (#18127)

BrunoQuaresma · web-flow · commit be8474a8a06e · 2025-05-30T11:00:53.000-03:00
Demo: https://github.com/user-attachments/assets/aa179ac2-6f2f-43a6-8d74-8a936eea5a29
diff --git a/site/package.json b/site/package.json
@@ -105,6 +105,7 @@
 		"react-query": "npm:@tanstack/react-query@5.77.0",
 		"react-router-dom": "6.26.2",
 		"react-syntax-highlighter": "15.6.1",
+		"react-textarea-autosize": "8.5.9",
 		"react-virtualized-auto-sizer": "1.0.24",
 		"react-window": "1.8.11",
 		"recharts": "2.15.0",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
@@ -49,6 +49,7 @@ import type { FC, PropsWithChildren, ReactNode } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Link as RouterLink } from "react-router-dom";
+import TextareaAutosize from "react-textarea-autosize";
 import { cn } from "utils/cn";
 import { pageTitle } from "utils/page";
 import { relativeTime } from "utils/time";
@@ -204,15 +205,15 @@ const TaskForm: FC<TaskFormProps> = ({ templates }) => {
 				<label htmlFor="prompt" className="sr-only">
 					Prompt
 				</label>
-				<textarea
+				<TextareaAutosize
 					required
 					id="prompt"
 					name="prompt"
 					placeholder="Write an action for your AI agent to perform..."
 					className={`border-0 resize-none w-full h-full bg-transparent rounded-lg outline-none flex min-h-[60px]
 						text-sm shadow-sm text-content-primary placeholder:text-content-secondary md:text-sm`}
 				/>
-				<div className="flex items-center justify-between">
+				<div className="flex items-center justify-between pt-2">
 					<Select name="templateID" defaultValue={templates[0].id} required>
 						<SelectTrigger className="w-52 text-xs [&_svg]:size-icon-xs border-0 bg-surface-secondary h-8 px-3">
 							<SelectValue placeholder="Select a template" />
