refactor: use the method of element-ui

app/components/home.tsx

@@ -37,6 +37,8 @@ import { REPO_URL } from "../constant";
 import { ControllerPool } from "../requests";
 import { Prompt, usePromptStore } from "../store/prompt";
 
+import calcTextareaHeight from "../calcTextareaHeight";
+
 export function Loading(props: { noLogo?: boolean }) {
   return (
     <div className={styles["loading-content"]}>
@@ -108,7 +110,7 @@ export function ChatList() {
       state.currentSessionIndex,
       state.selectSession,
       state.removeSession,
-    ]
+    ],
   );
 
   return (
@@ -179,6 +181,10 @@ export function PromptHints(props: {
 export function Chat(props: {
   showSideBar?: () => void;
   sideBarShowing?: boolean;
+  autoSize: {
+    minRows: number;
+    maxRows: number;
+  };
 }) {
   type RenderMessage = Message & { preview?: boolean };
 
@@ -190,9 +196,10 @@ export function Chat(props: {
   const fontSize = useChatStore((state) => state.config.fontSize);
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
+
   const [userInput, setUserInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [textareaRows, setTextareaRows] = useState(2);
+  const [textareaStyle, setTextareaStyle] = useState({});
   const { submitKey, shouldSubmit } = useSubmitHandler();
 
   // prompt hints
@@ -203,7 +210,7 @@ export function Chat(props: {
       setPromptHints(promptStore.search(text));
     },
     100,
-    { leading: true, trailing: true }
+    { leading: true, trailing: true },
   );
 
   const onPromptSelect = (prompt: Prompt) => {
@@ -217,7 +224,7 @@ export function Chat(props: {
     if (!dom) return;
     const paddingBottomNum: number = parseInt(
       window.getComputedStyle(dom).paddingBottom,
-      10
+      10,
     );
     dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
   };
@@ -239,10 +246,13 @@ export function Chat(props: {
       }
     }
 
-    // textarea rows optimize
+    resizeTextarea();
-    const length = text.split("\n").length - 1;
+  };
-    const rowsLength = length < 2 ? 2 : length > 6 ? 6 : length;
+
-    setTextareaRows(rowsLength > 6 ? 6 : rowsLength);
+  // set style for textarea
+  const resizeTextarea = () => {
+    const { minRows, maxRows } = props.autoSize;
+    setTextareaStyle(calcTextareaHeight(inputRef.current, minRows, maxRows));
   };
 
   // submit user input
@@ -253,7 +263,6 @@ export function Chat(props: {
     setUserInput("");
     setPromptHints([]);
     inputRef.current?.focus();
-    setTextareaRows(2);
   };
 
   // stop response
@@ -311,7 +320,7 @@ export function Chat(props: {
               preview: true,
             },
           ]
-        : []
+        : [],
     )
     .concat(
       userInput.length > 0
@@ -323,7 +332,7 @@ export function Chat(props: {
               preview: true,
             },
           ]
-        : []
+        : [],
     );
 
   // auto scroll
@@ -361,7 +370,7 @@ export function Chat(props: {
               const newTopic = prompt(Locale.Chat.Rename, session.topic);
               if (newTopic && newTopic !== session.topic) {
                 chatStore.updateCurrentSession(
-                  (session) => (session.topic = newTopic!)
+                  (session) => (session.topic = newTopic!),
                 );
               }
             }}
@@ -490,9 +499,9 @@ export function Chat(props: {
         <div className={styles["chat-input-panel-inner"]}>
           <textarea
             ref={inputRef}
+            style={textareaStyle}
             className={styles["chat-input"]}
             placeholder={Locale.Chat.Input(submitKey)}
-            rows={textareaRows}
             onInput={(e) => onInput(e.currentTarget.value)}
             value={userInput}
             onKeyDown={(e) => onInputKeyDown(e as any)}
@@ -610,7 +619,7 @@ export function Home() {
       state.newSession,
       state.currentSessionIndex,
       state.removeSession,
-    ]
+    ],
   );
   const loading = !useHasHydrated();
   const [showSideBar, setShowSideBar] = useState(true);
@@ -709,6 +718,7 @@ export function Home() {
             key="chat"
             showSideBar={() => setShowSideBar(true)}
             sideBarShowing={showSideBar}
+            autoSize={{ minRows: 2, maxRows: 6 }}
           />
         )}
       </div>