From 3f6ef5adcf593c5fb55af9fcac5e9328a93807d0 Mon Sep 17 00:00:00 2001
From: arcticfly <41524992+arcticfly@users.noreply.github.com>
Date: Sat, 1 Jul 2023 08:52:20 -0700
Subject: [PATCH] Add AutoResizeTextArea (#7)

---
 src/components/AutoResizeTextArea.tsx         | 24 +++++++++++++++++++
 .../OutputsTable/ScenarioEditor.tsx           |  9 +++----
 src/components/OutputsTable/VariantHeader.tsx |  6 +++--
 3 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 src/components/AutoResizeTextArea.tsx

diff --git a/src/components/AutoResizeTextArea.tsx b/src/components/AutoResizeTextArea.tsx
new file mode 100644
index 0000000..54ec2e1
--- /dev/null
+++ b/src/components/AutoResizeTextArea.tsx
@@ -0,0 +1,24 @@
+import { Textarea, type TextareaProps } from "@chakra-ui/react";
+import ResizeTextarea from "react-textarea-autosize";
+import React from "react";
+
+export const AutoResizeTextarea: React.ForwardRefRenderFunction<
+  HTMLTextAreaElement,
+  TextareaProps
+> = (props, ref) => {
+  return (
+    <Textarea
+      minH="unset"
+      overflow="hidden"
+      w="100%"
+      resize="none"
+      ref={ref}
+      minRows={1}
+      transition="height none"
+      as={ResizeTextarea}
+      {...props}
+    />
+  );
+};
+
+export default React.forwardRef(AutoResizeTextarea);
diff --git a/src/components/OutputsTable/ScenarioEditor.tsx b/src/components/OutputsTable/ScenarioEditor.tsx
index d94783d..fd5af5b 100644
--- a/src/components/OutputsTable/ScenarioEditor.tsx
+++ b/src/components/OutputsTable/ScenarioEditor.tsx
@@ -4,12 +4,12 @@ import { isEqual } from "lodash";
 import { type Scenario } from "./types";
 import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
 import { useState } from "react";
-import ResizeTextarea from "react-textarea-autosize";
 
-import { Box, Button, Flex, HStack, Icon, Stack, Textarea, Tooltip } from "@chakra-ui/react";
+import { Box, Button, Flex, HStack, Icon, Stack, Tooltip } from "@chakra-ui/react";
 import { cellPadding } from "../constants";
 import { BsX } from "react-icons/bs";
 import { RiDraggable } from "react-icons/ri";
+import AutoResizeTextArea from "../AutoResizeTextArea";
 
 export default function ScenarioEditor({
   scenario,
@@ -132,7 +132,7 @@ export default function ScenarioEditor({
                 <Box bgColor="blue.100" color="blue.600" px={2} my="3px" fontSize="xs" fontWeight="bold">
                   {key}
                 </Box>
-                <Textarea
+                <AutoResizeTextArea
                   px={2}
                   py={1}
                   placeholder="empty"
@@ -150,9 +150,6 @@ export default function ScenarioEditor({
                   }}
                   resize="none"
                   overflow="hidden"
-                  minRows={1}
-                  minH="unset"
-                  as={ResizeTextarea}
                   flex={layoutDirection === "row" ? 1 : undefined}
                   borderColor={hasChanged ? "blue.300" : "transparent"}
                   _hover={{ borderColor: "gray.300" }}
diff --git a/src/components/OutputsTable/VariantHeader.tsx b/src/components/OutputsTable/VariantHeader.tsx
index e448622..6fb923e 100644
--- a/src/components/OutputsTable/VariantHeader.tsx
+++ b/src/components/OutputsTable/VariantHeader.tsx
@@ -2,10 +2,11 @@ import { useState, type DragEvent } from "react";
 import { type PromptVariant } from "./types";
 import { api } from "~/utils/api";
 import { useHandledAsyncCallback } from "~/utils/hooks";
-import { Button, HStack, Input, Icon, Tooltip } from "@chakra-ui/react"; // Changed here
+import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react"; // Changed here
 import { BsX } from "react-icons/bs";
 import { RiDraggable } from "react-icons/ri";
 import { cellPadding, headerMinHeight } from "../constants";
+import AutoResizeTextArea from "../AutoResizeTextArea";
 
 export default function VariantHeader(props: { variant: PromptVariant }) {
   const utils = api.useContext();
@@ -76,11 +77,12 @@ export default function VariantHeader(props: { variant: PromptVariant }) {
         color="gray.400"
         _hover={{ color: "gray.800", cursor: "pointer" }}
       />
-      <Input // Changed to Input
+      <AutoResizeTextArea // Changed to Input
         size="sm"
         value={label}
         onChange={(e) => setLabel(e.target.value)}
         onBlur={onSaveLabel}
+        placeholder="Variant Name"
         borderWidth={1}
         borderColor="transparent"
         fontWeight="bold"