From cb50023d7966efa5e61f8af01ff1ca646f231834 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Thu, 5 Dec 2024 17:06:52 -0500
Subject: [PATCH] Fix issue where WaveAI text area would resize on launch
 (#1397)

---
 frontend/app/view/waveai/waveai.tsx | 39 ++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/app/view/waveai/waveai.tsx b/frontend/app/view/waveai/waveai.tsx
index 340162522..cae5b8856 100644
--- a/frontend/app/view/waveai/waveai.tsx
+++ b/frontend/app/view/waveai/waveai.tsx
@@ -572,24 +572,33 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
             model.textAreaRef = textAreaRef;
         }, []);
 
-        const adjustTextAreaHeight = () => {
-            if (textAreaRef.current == null) {
-                return;
-            }
-            // Adjust the height of the textarea to fit the text
-            const textAreaMaxLines = 100;
-            const textAreaLineHeight = termFontSize * 1.5;
-            const textAreaMinHeight = textAreaLineHeight;
-            const textAreaMaxHeight = textAreaLineHeight * textAreaMaxLines;
+        const adjustTextAreaHeight = useCallback(
+            (value: string) => {
+                if (textAreaRef.current == null) {
+                    return;
+                }
 
-            textAreaRef.current.style.height = "1px";
-            const scrollHeight = textAreaRef.current.scrollHeight;
-            const newHeight = Math.min(Math.max(scrollHeight, textAreaMinHeight), textAreaMaxHeight);
-            textAreaRef.current.style.height = newHeight + "px";
-        };
+                // Adjust the height of the textarea to fit the text
+                const textAreaMaxLines = 5;
+                const textAreaLineHeight = termFontSize * 1.5;
+                const textAreaMinHeight = textAreaLineHeight;
+                const textAreaMaxHeight = textAreaLineHeight * textAreaMaxLines;
+
+                if (value === "") {
+                    textAreaRef.current.style.height = `${textAreaLineHeight}px`;
+                    return;
+                }
+
+                textAreaRef.current.style.height = `${textAreaLineHeight}px`;
+                const scrollHeight = textAreaRef.current.scrollHeight;
+                const newHeight = Math.min(Math.max(scrollHeight, textAreaMinHeight), textAreaMaxHeight);
+                textAreaRef.current.style.height = newHeight + "px";
+            },
+            [termFontSize]
+        );
 
         useEffect(() => {
-            adjustTextAreaHeight();
+            adjustTextAreaHeight(value);
         }, [value]);
 
         return (