feat: chat panel UE done

app/hooks/useRows.ts

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { autoGrowTextArea } from "../utils";
+import useMobileScreen from "./useMobileScreen";
+
+export default function useRows({
+  inputRef,
+}: {
+  inputRef: React.RefObject<HTMLTextAreaElement>;
+}) {
+  const [inputRows, setInputRows] = useState(2);
+  const isMobileScreen = useMobileScreen();
+
+  const measure = useDebouncedCallback(
+    () => {
+      const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
+      const inputRows = Math.min(
+        20,
+        Math.max(2 + (isMobileScreen ? -1 : 1), rows),
+      );
+      setInputRows(inputRows);
+    },
+    100,
+    {
+      leading: true,
+      trailing: true,
+    },
+  );
+
+  return {
+    inputRows,
+    measure,
+  };
+}