Workflow editor (#735)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx

@@ -0,0 +1,38 @@
+import { useLayoutEffect, useRef } from "react";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/util/utils";
+
+type Props = React.ComponentProps<typeof Textarea>;
+
+function AutoResizingTextarea(props: Props) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    // size the textarea correctly on first render
+    if (!ref.current) {
+      return;
+    }
+    ref.current.style.height = `${ref.current.scrollHeight + 2}px`;
+  }, []);
+
+  function setSize() {
+    if (!ref.current) {
+      return;
+    }
+    ref.current.style.height = "auto";
+    ref.current.style.height = `${ref.current.scrollHeight + 2}px`;
+  }
+
+  return (
+    <Textarea
+      {...props}
+      onKeyDown={setSize}
+      onInput={setSize}
+      ref={ref}
+      rows={1}
+      className={cn("min-h-0 resize-none overflow-y-hidden", props.className)}
+    />
+  );
+}
+
+export { AutoResizingTextarea };