feat: textarea with adaptive height

Author: leedom92

app/calcTextareaHeight.js

@@ -41,6 +41,8 @@ import chatStyle from "./chat.module.scss";
 
 import { Input, Modal, showModal, showToast } from "./ui-lib";
 
+import calcTextareaHeight from "../calcTextareaHeight";
+
 const Markdown = dynamic(
   async () => memo((await import("./markdown")).Markdown),
   {
@@ -331,6 +333,10 @@ function useScrollToBottom() {
 export function Chat(props: {
   showSideBar?: () => void;
   sideBarShowing?: boolean;
+  autoSize: {
+    minRows: number;
+    maxRows?: number;
+  };
 }) {
   type RenderMessage = Message & { preview?: boolean };
 
@@ -347,6 +353,7 @@ export function Chat(props: {
   const { submitKey, shouldSubmit } = useSubmitHandler();
   const { scrollRef, setAutoScroll } = useScrollToBottom();
   const [hitBottom, setHitBottom] = useState(false);
+  const [textareaStyle, setTextareaStyle] = useState({});
 
   const onChatBodyScroll = (e: HTMLElement) => {
     const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 20;
@@ -380,6 +387,16 @@ export function Chat(props: {
     dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
   };
 
+  // textarea has an adaptive height
+  const resizeTextarea = () => {
+    const dom = inputRef.current;
+    if (!dom) return;
+    const { minRows, maxRows } = props.autoSize;
+    setTimeout(() => {
+      setTextareaStyle(calcTextareaHeight(dom, minRows, maxRows));
+    }, 50);
+  };
+
   // only search prompts when user input is short
   const SEARCH_TEXT_LIMIT = 30;
   const onInput = (text: string) => {
@@ -504,6 +521,11 @@ export function Chat(props: {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Textarea Adaptive height
+  useEffect(() => {
+    resizeTextarea();
+  });
+
   return (
     <div className={styles.chat} key={session.id}>
       <div className={styles["window-header"]}>
@@ -659,8 +681,8 @@ export function Chat(props: {
           <textarea
             ref={inputRef}
             className={styles["chat-input"]}
+            style={textareaStyle}
             placeholder={Locale.Chat.Input(submitKey)}
-            rows={2}
             onInput={(e) => onInput(e.currentTarget.value)}
             value={userInput}
             onKeyDown={onInputKeyDown}

app/components/chat.tsx

@@ -25,8 +25,6 @@ import dynamic from "next/dynamic";
 import { REPO_URL } from "../constant";
 import { ErrorBoundary } from "./error";
 
-import calcTextareaHeight from "../calcTextareaHeight";
-
 export function Loading(props: { noLogo?: boolean }) {
   return (
     <div className={styles["loading-content"]}>

app/components/home.tsx

@@ -50,6 +50,10 @@ export function isMobileScreen() {
   return window.innerWidth <= 600;
 }
 
+export function isFirefox() {
+  return /firefox/i.test(navigator.userAgent);
+}
+
 export function selectOrCopy(el: HTMLElement, content: string) {
   const currentSelection = window.getSelection();
 

app/utils.ts

@@ -23,6 +23,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/calcTextareaHeight.ts"],
   "exclude": ["node_modules"]
 }