From 2a79d356674236e4b4e345ae02236d52fd609f73 Mon Sep 17 00:00:00 2001
From: leedom <jld1221@163.com>
Date: Sat, 1 Apr 2023 17:34:38 +0800
Subject: [PATCH 01/12] feat: add optimize textarea height when inputing

---
 app/components/home.module.scss |  2 +-
 app/components/home.tsx         | 23 +++++++++++++++--------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/components/home.module.scss b/app/components/home.module.scss
index 764805d..d88a3d5 100644
--- a/app/components/home.module.scss
+++ b/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;
 }
diff --git a/app/components/home.tsx b/app/components/home.tsx
index de93510..2ff87b3 100644
--- a/app/components/home.tsx
+++ b/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);

From 9ba59351c5f623b5710e56f6c9397d70b9c307ff Mon Sep 17 00:00:00 2001
From: Leedom <30711792+leedom92@users.noreply.github.com>
Date: Sat, 1 Apr 2023 17:48:05 +0800
Subject: [PATCH 02/12] Update home.tsx

---
 app/components/home.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 2ff87b3..6c606ed 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -108,7 +108,7 @@ export function ChatList() {
       state.currentSessionIndex,
       state.selectSession,
       state.removeSession,
-    ],
+    ]
   );
 
   return (
@@ -203,7 +203,7 @@ export function Chat(props: {
       setPromptHints(promptStore.search(text));
     },
     100,
-    { leading: true, trailing: true },
+    { leading: true, trailing: true }
   );
 
   const onPromptSelect = (prompt: Prompt) => {
@@ -217,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;
   };
@@ -311,7 +311,7 @@ export function Chat(props: {
               preview: true,
             },
           ]
-        : [],
+        : []
     )
     .concat(
       userInput.length > 0
@@ -323,7 +323,7 @@ export function Chat(props: {
               preview: true,
             },
           ]
-        : [],
+        : []
     );
 
   // auto scroll
@@ -361,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!)
                 );
               }
             }}
@@ -610,7 +610,7 @@ export function Home() {
       state.newSession,
       state.currentSessionIndex,
       state.removeSession,
-    ],
+    ]
   );
   const loading = !useHasHydrated();
   const [showSideBar, setShowSideBar] = useState(true);

From a811637176219828ea42e7aedb5558292f8539e6 Mon Sep 17 00:00:00 2001
From: leedom <jld1221@163.com>
Date: Sun, 2 Apr 2023 02:40:00 +0800
Subject: [PATCH 03/12] refactor: use the method of element-ui

---
 app/components/home.tsx | 38 ++++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 6c606ed..01f1489 100644
--- a/app/components/home.tsx
+++ b/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
-    const length = text.split("\n").length - 1;
-    const rowsLength = length < 2 ? 2 : length > 6 ? 6 : length;
-    setTextareaRows(rowsLength > 6 ? 6 : rowsLength);
+    resizeTextarea();
+  };
+
+  // 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>

From bce020fc8e701dfcb229d26581e6c03e0ed308c3 Mon Sep 17 00:00:00 2001
From: leedom <jld1221@163.com>
Date: Sun, 2 Apr 2023 02:42:00 +0800
Subject: [PATCH 04/12] feat: add calcTextareaHeight.js from element-ui

---
 app/calcTextareaHeight.js | 103 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 app/calcTextareaHeight.js

diff --git a/app/calcTextareaHeight.js b/app/calcTextareaHeight.js
new file mode 100644
index 0000000..4607f2c
--- /dev/null
+++ b/app/calcTextareaHeight.js
@@ -0,0 +1,103 @@
+/**
+ * fork from element-ui
+ */
+
+let hiddenTextarea;
+
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important
+`;
+
+const CONTEXT_STYLE = [
+  "letter-spacing",
+  "line-height",
+  "padding-top",
+  "padding-bottom",
+  "font-family",
+  "font-weight",
+  "font-size",
+  "text-rendering",
+  "text-transform",
+  "width",
+  "text-indent",
+  "padding-left",
+  "padding-right",
+  "border-width",
+  "box-sizing",
+];
+
+function calculateNodeStyling(targetElement) {
+  const style = window.getComputedStyle(targetElement);
+
+  const boxSizing = style.getPropertyValue("box-sizing");
+
+  const paddingSize =
+    parseFloat(style.getPropertyValue("padding-bottom")) +
+    parseFloat(style.getPropertyValue("padding-top"));
+
+  const borderSize =
+    parseFloat(style.getPropertyValue("border-bottom-width")) +
+    parseFloat(style.getPropertyValue("border-top-width"));
+
+  const contextStyle = CONTEXT_STYLE.map(
+    (name) => `${name}:${style.getPropertyValue(name)}`,
+  ).join(";");
+
+  return { contextStyle, paddingSize, borderSize, boxSizing };
+}
+
+export default function calcTextareaHeight(
+  targetElement,
+  minRows = 2,
+  maxRows = 4,
+) {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement("textarea");
+    document.body.appendChild(hiddenTextarea);
+  }
+
+  let { paddingSize, borderSize, boxSizing, contextStyle } =
+    calculateNodeStyling(targetElement);
+
+  hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
+  hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
+
+  let height = hiddenTextarea.scrollHeight;
+  const result = {};
+
+  if (boxSizing === "border-box") {
+    height = height + borderSize;
+  } else if (boxSizing === "content-box") {
+    height = height - paddingSize;
+  }
+
+  hiddenTextarea.value = "";
+  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+
+  if (minRows !== null) {
+    let minHeight = singleRowHeight * minRows;
+    if (boxSizing === "border-box") {
+      minHeight = minHeight + paddingSize + borderSize;
+    }
+    height = Math.max(minHeight, height);
+    result.minHeight = `${minHeight}px`;
+  }
+  if (maxRows !== null) {
+    let maxHeight = singleRowHeight * maxRows;
+    if (boxSizing === "border-box") {
+      maxHeight = maxHeight + paddingSize + borderSize;
+    }
+    height = Math.min(maxHeight, height);
+  }
+  result.height = `${height}px`;
+  hiddenTextarea.parentNode &&
+    hiddenTextarea.parentNode.removeChild(hiddenTextarea);
+  hiddenTextarea = null;
+  return result;
+}

From ad8e09d188f0504e8ce221d56b7910a3ee0894de Mon Sep 17 00:00:00 2001
From: Leedom <30711792+leedom92@users.noreply.github.com>
Date: Sun, 2 Apr 2023 02:54:46 +0800
Subject: [PATCH 05/12] Update home.tsx

---
 app/components/home.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index 01f1489..eed821e 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -110,7 +110,7 @@ export function ChatList() {
       state.currentSessionIndex,
       state.selectSession,
       state.removeSession,
-    ],
+    ]
   );
 
   return (
@@ -210,7 +210,7 @@ export function Chat(props: {
       setPromptHints(promptStore.search(text));
     },
     100,
-    { leading: true, trailing: true },
+    { leading: true, trailing: true }
   );
 
   const onPromptSelect = (prompt: Prompt) => {
@@ -224,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;
   };
@@ -320,7 +320,7 @@ export function Chat(props: {
               preview: true,
             },
           ]
-        : [],
+        : []
     )
     .concat(
       userInput.length > 0
@@ -332,7 +332,7 @@ export function Chat(props: {
               preview: true,
             },
           ]
-        : [],
+        : []
     );
 
   // auto scroll
@@ -370,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!)
                 );
               }
             }}
@@ -618,7 +618,7 @@ export function Home() {
     (state) => [
       state.newSession,
       state.currentSessionIndex,
-      state.removeSession,
+      state.removeSession
     ],
   );
   const loading = !useHasHydrated();

From b419e7d918c7213d865537154866df0faf46f6b5 Mon Sep 17 00:00:00 2001
From: Leedom <30711792+leedom92@users.noreply.github.com>
Date: Sun, 2 Apr 2023 02:56:45 +0800
Subject: [PATCH 06/12] Update home.tsx

---
 app/components/home.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/home.tsx b/app/components/home.tsx
index eed821e..c958cf6 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -618,8 +618,8 @@ export function Home() {
     (state) => [
       state.newSession,
       state.currentSessionIndex,
-      state.removeSession
-    ],
+      state.removeSession,
+    ]
   );
   const loading = !useHasHydrated();
   const [showSideBar, setShowSideBar] = useState(true);

From 4369b26e22d0e53b2ca0a3ed784f26d05bc3c261 Mon Sep 17 00:00:00 2001
From: Leedom <30711792+leedom92@users.noreply.github.com>
Date: Sun, 2 Apr 2023 09:47:55 +0800
Subject: [PATCH 07/12] Update calcTextareaHeight.js

---
 app/calcTextareaHeight.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/calcTextareaHeight.js b/app/calcTextareaHeight.js
index 4607f2c..2324473 100644
--- a/app/calcTextareaHeight.js
+++ b/app/calcTextareaHeight.js
@@ -1,5 +1,6 @@
 /**
  * fork from element-ui
+ * https://github.com/ElemeFE/element/blob/master/packages/input/src/calcTextareaHeight.js
  */
 
 let hiddenTextarea;

From 3656c8458fa955570dff2e0d6cb076e3e5a8e7e9 Mon Sep 17 00:00:00 2001
From: leedom <jld1221@163.com>
Date: Fri, 7 Apr 2023 12:17:37 +0800
Subject: [PATCH 08/12] feat: textarea with adaptive height

---
 app/calcTextareaHeight.js | 104 --------------------------------------
 app/components/chat.tsx   |  24 ++++++++-
 app/components/home.tsx   |   2 -
 app/utils.ts              |   4 ++
 tsconfig.json             |   2 +-
 5 files changed, 28 insertions(+), 108 deletions(-)
 delete mode 100644 app/calcTextareaHeight.js

diff --git a/app/calcTextareaHeight.js b/app/calcTextareaHeight.js
deleted file mode 100644
index 2324473..0000000
--- a/app/calcTextareaHeight.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * fork from element-ui
- * https://github.com/ElemeFE/element/blob/master/packages/input/src/calcTextareaHeight.js
- */
-
-let hiddenTextarea;
-
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  overflow:hidden !important;
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important
-`;
-
-const CONTEXT_STYLE = [
-  "letter-spacing",
-  "line-height",
-  "padding-top",
-  "padding-bottom",
-  "font-family",
-  "font-weight",
-  "font-size",
-  "text-rendering",
-  "text-transform",
-  "width",
-  "text-indent",
-  "padding-left",
-  "padding-right",
-  "border-width",
-  "box-sizing",
-];
-
-function calculateNodeStyling(targetElement) {
-  const style = window.getComputedStyle(targetElement);
-
-  const boxSizing = style.getPropertyValue("box-sizing");
-
-  const paddingSize =
-    parseFloat(style.getPropertyValue("padding-bottom")) +
-    parseFloat(style.getPropertyValue("padding-top"));
-
-  const borderSize =
-    parseFloat(style.getPropertyValue("border-bottom-width")) +
-    parseFloat(style.getPropertyValue("border-top-width"));
-
-  const contextStyle = CONTEXT_STYLE.map(
-    (name) => `${name}:${style.getPropertyValue(name)}`,
-  ).join(";");
-
-  return { contextStyle, paddingSize, borderSize, boxSizing };
-}
-
-export default function calcTextareaHeight(
-  targetElement,
-  minRows = 2,
-  maxRows = 4,
-) {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement("textarea");
-    document.body.appendChild(hiddenTextarea);
-  }
-
-  let { paddingSize, borderSize, boxSizing, contextStyle } =
-    calculateNodeStyling(targetElement);
-
-  hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
-  hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
-
-  let height = hiddenTextarea.scrollHeight;
-  const result = {};
-
-  if (boxSizing === "border-box") {
-    height = height + borderSize;
-  } else if (boxSizing === "content-box") {
-    height = height - paddingSize;
-  }
-
-  hiddenTextarea.value = "";
-  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-
-  if (minRows !== null) {
-    let minHeight = singleRowHeight * minRows;
-    if (boxSizing === "border-box") {
-      minHeight = minHeight + paddingSize + borderSize;
-    }
-    height = Math.max(minHeight, height);
-    result.minHeight = `${minHeight}px`;
-  }
-  if (maxRows !== null) {
-    let maxHeight = singleRowHeight * maxRows;
-    if (boxSizing === "border-box") {
-      maxHeight = maxHeight + paddingSize + borderSize;
-    }
-    height = Math.min(maxHeight, height);
-  }
-  result.height = `${height}px`;
-  hiddenTextarea.parentNode &&
-    hiddenTextarea.parentNode.removeChild(hiddenTextarea);
-  hiddenTextarea = null;
-  return result;
-}
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 4ab6164..b631d53 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -41,6 +41,8 @@ import chatStyle from "./chat.module.scss";
 
 import { Input, Modal, showModal, showToast } from "./ui-lib";
 
+import calcTextareaHeight from "../calcTextareaHeight";
+
 const Markdown = dynamic(
   async () => memo((await import("./markdown")).Markdown),
   {
@@ -331,6 +333,10 @@ function useScrollToBottom() {
 export function Chat(props: {
   showSideBar?: () => void;
   sideBarShowing?: boolean;
+  autoSize: {
+    minRows: number;
+    maxRows?: number;
+  };
 }) {
   type RenderMessage = Message & { preview?: boolean };
 
@@ -347,6 +353,7 @@ export function Chat(props: {
   const { submitKey, shouldSubmit } = useSubmitHandler();
   const { scrollRef, setAutoScroll } = useScrollToBottom();
   const [hitBottom, setHitBottom] = useState(false);
+  const [textareaStyle, setTextareaStyle] = useState({});
 
   const onChatBodyScroll = (e: HTMLElement) => {
     const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 20;
@@ -380,6 +387,16 @@ export function Chat(props: {
     dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
   };
 
+  // textarea has an adaptive height
+  const resizeTextarea = () => {
+    const dom = inputRef.current;
+    if (!dom) return;
+    const { minRows, maxRows } = props.autoSize;
+    setTimeout(() => {
+      setTextareaStyle(calcTextareaHeight(dom, minRows, maxRows));
+    }, 50);
+  };
+
   // only search prompts when user input is short
   const SEARCH_TEXT_LIMIT = 30;
   const onInput = (text: string) => {
@@ -504,6 +521,11 @@ export function Chat(props: {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Textarea Adaptive height
+  useEffect(() => {
+    resizeTextarea();
+  });
+
   return (
     <div className={styles.chat} key={session.id}>
       <div className={styles["window-header"]}>
@@ -659,8 +681,8 @@ export function Chat(props: {
           <textarea
             ref={inputRef}
             className={styles["chat-input"]}
+            style={textareaStyle}
             placeholder={Locale.Chat.Input(submitKey)}
-            rows={2}
             onInput={(e) => onInput(e.currentTarget.value)}
             value={userInput}
             onKeyDown={onInputKeyDown}
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 7602e52..1d8501e 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -25,8 +25,6 @@ import dynamic from "next/dynamic";
 import { REPO_URL } from "../constant";
 import { ErrorBoundary } from "./error";
 
-import calcTextareaHeight from "../calcTextareaHeight";
-
 export function Loading(props: { noLogo?: boolean }) {
   return (
     <div className={styles["loading-content"]}>
diff --git a/app/utils.ts b/app/utils.ts
index bb44e07..3be76cf 100644
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -50,6 +50,10 @@ export function isMobileScreen() {
   return window.innerWidth <= 600;
 }
 
+export function isFirefox() {
+  return /firefox/i.test(navigator.userAgent);
+}
+
 export function selectOrCopy(el: HTMLElement, content: string) {
   const currentSelection = window.getSelection();
 
diff --git a/tsconfig.json b/tsconfig.json
index 14d1893..c73eef3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/calcTextareaHeight.ts"],
   "exclude": ["node_modules"]
 }

From cb210d82e16cf62b40120857e942d1721f390c7f Mon Sep 17 00:00:00 2001
From: leedom <jld1221@163.com>
Date: Fri, 7 Apr 2023 12:33:09 +0800
Subject: [PATCH 09/12] update: resizeTextarea

---
 app/components/chat.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index b631d53..b3b8fb0 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -392,9 +392,7 @@ export function Chat(props: {
     const dom = inputRef.current;
     if (!dom) return;
     const { minRows, maxRows } = props.autoSize;
-    setTimeout(() => {
-      setTextareaStyle(calcTextareaHeight(dom, minRows, maxRows));
-    }, 50);
+    setTextareaStyle(calcTextareaHeight(dom, minRows, maxRows));
   };
 
   // only search prompts when user input is short

From e5b4cb28fef9f7e1f9b130ed0c0a9ca07927adb8 Mon Sep 17 00:00:00 2001
From: leedom <jld1221@163.com>
Date: Fri, 7 Apr 2023 12:39:27 +0800
Subject: [PATCH 10/12] fix: useEffect hooks

---
 app/components/chat.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index b3b8fb0..689b427 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -522,7 +522,8 @@ export function Chat(props: {
   // Textarea Adaptive height
   useEffect(() => {
     resizeTextarea();
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userInput]);
 
   return (
     <div className={styles.chat} key={session.id}>

From de740ec57fe9c4b11c8b81396c1ef00906aa5bc7 Mon Sep 17 00:00:00 2001
From: leedom <jld1221@163.com>
Date: Fri, 7 Apr 2023 12:42:47 +0800
Subject: [PATCH 11/12] feat: add calcTextareaHeight.ts

---
 app/calcTextareaHeight.ts | 118 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 app/calcTextareaHeight.ts

diff --git a/app/calcTextareaHeight.ts b/app/calcTextareaHeight.ts
new file mode 100644
index 0000000..555c8ce
--- /dev/null
+++ b/app/calcTextareaHeight.ts
@@ -0,0 +1,118 @@
+/**
+ * fork from element-plus
+ * https://github.com/element-plus/element-plus/blob/dev/packages/components/input/src/utils.ts
+ */
+
+import { isFirefox } from "./utils";
+
+let hiddenTextarea: HTMLTextAreaElement | undefined = undefined;
+
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  ${isFirefox() ? "" : "overflow:hidden !important;"}
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important;
+`;
+
+const CONTEXT_STYLE = [
+  "letter-spacing",
+  "line-height",
+  "padding-top",
+  "padding-bottom",
+  "font-family",
+  "font-weight",
+  "font-size",
+  "text-rendering",
+  "text-transform",
+  "width",
+  "text-indent",
+  "padding-left",
+  "padding-right",
+  "border-width",
+  "box-sizing",
+];
+
+type NodeStyle = {
+  contextStyle: string;
+  boxSizing: string;
+  paddingSize: number;
+  borderSize: number;
+};
+
+type TextAreaHeight = {
+  height: string;
+  minHeight?: string;
+};
+
+function calculateNodeStyling(targetElement: Element): NodeStyle {
+  const style = window.getComputedStyle(targetElement);
+
+  const boxSizing = style.getPropertyValue("box-sizing");
+
+  const paddingSize =
+    Number.parseFloat(style.getPropertyValue("padding-bottom")) +
+    Number.parseFloat(style.getPropertyValue("padding-top"));
+
+  const borderSize =
+    Number.parseFloat(style.getPropertyValue("border-bottom-width")) +
+    Number.parseFloat(style.getPropertyValue("border-top-width"));
+
+  const contextStyle = CONTEXT_STYLE.map(
+    (name) => `${name}:${style.getPropertyValue(name)}`,
+  ).join(";");
+
+  return { contextStyle, paddingSize, borderSize, boxSizing };
+}
+
+export default function calcTextareaHeight(
+  targetElement: HTMLTextAreaElement,
+  minRows: number = 2,
+  maxRows?: number,
+): TextAreaHeight {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement("textarea");
+    document.body.appendChild(hiddenTextarea);
+  }
+
+  const { paddingSize, borderSize, boxSizing, contextStyle } =
+    calculateNodeStyling(targetElement);
+
+  hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
+  hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
+
+  let height = hiddenTextarea.scrollHeight;
+  const result = {} as TextAreaHeight;
+
+  if (boxSizing === "border-box") {
+    height = height + borderSize;
+  } else if (boxSizing === "content-box") {
+    height = height - paddingSize;
+  }
+
+  hiddenTextarea.value = "";
+  const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+
+  if (minRows) {
+    let minHeight = singleRowHeight * minRows;
+    if (boxSizing === "border-box") {
+      minHeight = minHeight + paddingSize + borderSize;
+    }
+    height = Math.max(minHeight, height);
+    result.minHeight = `${minHeight}px`;
+  }
+  if (maxRows) {
+    let maxHeight = singleRowHeight * maxRows;
+    if (boxSizing === "border-box") {
+      maxHeight = maxHeight + paddingSize + borderSize;
+    }
+    height = Math.min(maxHeight, height);
+  }
+  result.height = `${height}px`;
+  hiddenTextarea.parentNode?.removeChild(hiddenTextarea);
+  hiddenTextarea = undefined;
+
+  return result;
+}

From 00d45e7cc43c0bd2025cad9fd9e954a57487f888 Mon Sep 17 00:00:00 2001
From: leedom <jld1221@163.com>
Date: Fri, 7 Apr 2023 13:47:34 +0800
Subject: [PATCH 12/12] fix: solve navigator undefined && merge from main

---
 app/utils.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/utils.ts b/app/utils.ts
index fa32535..6d52bb4 100644
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -52,7 +52,9 @@ export function isMobileScreen() {
 }
 
 export function isFirefox() {
-  return /firefox/i.test(navigator.userAgent);
+  return (
+    typeof navigator !== "undefined" && /firefox/i.test(navigator.userAgent)
+  );
 }
 
 export function selectOrCopy(el: HTMLElement, content: string) {