fix: auto hegiht for textarea

src/chatbox.tsx

@@ -30,6 +30,7 @@ import getDefaultParams from "./getDefaultParam";
 import { AddImage } from "./addImage";
 import { ListAPIs } from "./listAPIs";
 import { ListToolsTempaltes } from "./listToolsTemplates";
+import { autoHeight } from "./textarea";
 
 export interface TemplateChatStore extends ChatStore {
   name: string;
@@ -832,8 +833,7 @@ export default function ChatBOX(props: {
           value={inputMsg}
           onChange={(event: any) => {
             setInputMsg(event.target.value);
-            event.target.style.height = "auto";
+            autoHeight(event);
-            event.target.style.height = `${event.target.scrollHeight+1}px`;
           }}
           onKeyPress={(event: any) => {
             console.log(event);
@@ -842,9 +842,8 @@ export default function ChatBOX(props: {
               setInputMsg("");
               return;
             }
+            autoHeight(event);
             setInputMsg(event.target.value);
-            event.target.style.height = "auto";
-            event.target.style.height = `${event.target.scrollHeight+1}px`;
           }}
           className="rounded grow m-1 p-1 border-2 border-gray-400 w-0"
           placeholder="Type here..."

src/settings.tsx

@@ -13,6 +13,7 @@ import { tr, Tr, langCodeContext, LANG_OPTIONS } from "./translate";
 import p from "preact-markdown";
 import { isVailedJSON } from "./message";
 import { SetAPIsTemplate } from "./setAPIsTemplate";
+import { autoHeight } from "./textarea";
 
 const TTS_VOICES: string[] = [
   "alloy",
@@ -80,12 +81,10 @@ const LongInput = (props: {
         onChange={(event: any) => {
           props.chatStore[props.field] = event.target.value;
           props.setChatStore({ ...props.chatStore });
-          event.target.style.height = "auto";
+          autoHeight(event);
-          event.target.style.height = `${event.target.scrollHeight + 1}px`;
         }}
         onKeyPress={(event: any) => {
-          event.target.style.height = "auto";
+          autoHeight(event);
-          event.target.style.height = `${event.target.scrollHeight + 1}px`;
         }}
       ></textarea>
     </Help>

src/textarea.tsx

@@ -0,0 +1,8 @@
+export const autoHeight = (event: any) => {
+  event.target.style.height = "auto";
+  // max 70% of screen height
+  event.target.style.height = `${Math.min(
+    event.target.scrollHeight,
+    window.innerHeight * 0.7
+  )}px`;
+};