feat: add optimize textarea height when inputing

app/components/home.module.scss

@@ -414,7 +414,7 @@
   background-color: var(--white);
   color: var(--black);
   font-family: inherit;
-  padding: 10px 14px 50px;
+  padding: 10px 90px 10px 14px;
   resize: none;
   outline: none;
 }

app/components/home.tsx

@@ -108,7 +108,7 @@ export function ChatList() {
       state.currentSessionIndex,
       state.selectSession,
       state.removeSession,
-    ]
+    ],
   );
 
   return (
@@ -192,6 +192,7 @@ export function Chat(props: {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [userInput, setUserInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [textareaRows, setTextareaRows] = useState(2);
   const { submitKey, shouldSubmit } = useSubmitHandler();
 
   // prompt hints
@@ -202,7 +203,7 @@ export function Chat(props: {
       setPromptHints(promptStore.search(text));
     },
     100,
-    { leading: true, trailing: true }
+    { leading: true, trailing: true },
   );
 
   const onPromptSelect = (prompt: Prompt) => {
@@ -216,7 +217,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;
   };
@@ -237,6 +238,11 @@ export function Chat(props: {
         onSearch(text.slice(1));
       }
     }
+
+    // textarea rows optimize
+    const length = text.split("\n").length - 1;
+    const rowsLength = length < 2 ? 2 : length > 6 ? 6 : length;
+    setTextareaRows(rowsLength > 6 ? 6 : rowsLength);
   };
 
   // submit user input
@@ -247,6 +253,7 @@ export function Chat(props: {
     setUserInput("");
     setPromptHints([]);
     inputRef.current?.focus();
+    setTextareaRows(2);
   };
 
   // stop response
@@ -304,7 +311,7 @@ export function Chat(props: {
               preview: true,
             },
           ]
-        : []
+        : [],
     )
     .concat(
       userInput.length > 0
@@ -316,7 +323,7 @@ export function Chat(props: {
               preview: true,
             },
           ]
-        : []
+        : [],
     );
 
   // auto scroll
@@ -354,7 +361,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!),
                 );
               }
             }}
@@ -485,7 +492,7 @@ export function Chat(props: {
             ref={inputRef}
             className={styles["chat-input"]}
             placeholder={Locale.Chat.Input(submitKey)}
-            rows={4}
+            rows={textareaRows}
             onInput={(e) => onInput(e.currentTarget.value)}
             value={userInput}
             onKeyDown={(e) => onInputKeyDown(e as any)}
@@ -603,7 +610,7 @@ export function Home() {
       state.newSession,
       state.currentSessionIndex,
       state.removeSession,
-    ]
+    ],
   );
   const loading = !useHasHydrated();
   const [showSideBar, setShowSideBar] = useState(true);