From 67a8140a01e5dfe4ad6964cc7de2095be1cb1ef2 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Sun, 14 Jan 2024 14:33:05 +0800
Subject: [PATCH] fix: auto hegiht for textarea

---
 src/chatbox.tsx  | 7 +++----
 src/settings.tsx | 7 +++----
 src/textarea.tsx | 8 ++++++++
 3 files changed, 14 insertions(+), 8 deletions(-)
 create mode 100644 src/textarea.tsx

diff --git a/src/chatbox.tsx b/src/chatbox.tsx
index 72c491e..2d7cd1e 100644
--- a/src/chatbox.tsx
+++ b/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";
-            event.target.style.height = `${event.target.scrollHeight+1}px`;
+            autoHeight(event);
           }}
           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..."
diff --git a/src/settings.tsx b/src/settings.tsx
index e62e9c9..6afc6bf 100644
--- a/src/settings.tsx
+++ b/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";
-          event.target.style.height = `${event.target.scrollHeight + 1}px`;
+          autoHeight(event);
         }}
         onKeyPress={(event: any) => {
-          event.target.style.height = "auto";
-          event.target.style.height = `${event.target.scrollHeight + 1}px`;
+          autoHeight(event);
         }}
       ></textarea>
     </Help>
diff --git a/src/textarea.tsx b/src/textarea.tsx
new file mode 100644
index 0000000..256426c
--- /dev/null
+++ b/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`;
+};