From 4f3f6bd5448e53e7a50b689806ba0a72333615f9 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Fri, 12 Jan 2024 17:17:48 +0800
Subject: [PATCH] change textarea auto height method

---
 src/chatbox.tsx  | 9 +++++++--
 src/settings.tsx | 6 ++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/chatbox.tsx b/src/chatbox.tsx
index 3462f83..72c491e 100644
--- a/src/chatbox.tsx
+++ b/src/chatbox.tsx
@@ -829,9 +829,12 @@ export default function ChatBOX(props: {
           />
         )}
         <textarea
-          rows={Math.min(10, (inputMsg.match(/\n/g) || []).length + 2)}
           value={inputMsg}
-          onChange={(event: any) => setInputMsg(event.target.value)}
+          onChange={(event: any) => {
+            setInputMsg(event.target.value);
+            event.target.style.height = "auto";
+            event.target.style.height = `${event.target.scrollHeight+1}px`;
+          }}
           onKeyPress={(event: any) => {
             console.log(event);
             if (event.ctrlKey && event.code === "Enter") {
@@ -840,6 +843,8 @@ export default function ChatBOX(props: {
               return;
             }
             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 093a7a6..e62e9c9 100644
--- a/src/settings.tsx
+++ b/src/settings.tsx
@@ -80,6 +80,12 @@ 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`;
+        }}
+        onKeyPress={(event: any) => {
+          event.target.style.height = "auto";
+          event.target.style.height = `${event.target.scrollHeight + 1}px`;
         }}
       ></textarea>
     </Help>