Fix input auto sizing

package.json

@@ -2,7 +2,7 @@
 	"name": "wing-man",
 	"displayName": "Wingman-AI",
 	"description": "Wingman - AI powered assistant to help you write your best code, we won't leave you hanging.",
-	"version": "0.7.5",
+	"version": "0.7.6",
 	"publisher": "WingMan",
 	"license": "MIT",
 	"workspaces": [

views-ui/src/Chat/features/Chat/ChatInput.tsx

@@ -3,6 +3,7 @@ import { useAppContext } from "../../context";
 import { useAutoFocus } from "../../hooks/useAutoFocus";
 import { useOnScreen } from "../../hooks/useOnScreen";
 import { useEffect, useState } from "react";
+import { handleAutoResize } from "../../utilities/utils";
 
 interface ChatInputProps {
 	onChatSubmitted: (input: string) => void;
@@ -41,11 +42,6 @@ const ChatInput = ({
 		}
 	};
 
-	const handleAutoGrow = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-		e.target.style.height = "auto";
-		e.target.style.height = `${e.target.scrollHeight}px`;
-	};
-
 	return (
 		<div
 			className="flex-basis-50 py-3 flex flex-col items-stretch"
@@ -57,7 +53,7 @@ const ChatInput = ({
 						<textarea
 							placeholder="Type here to chat with your Wingman."
 							onChange={(e) => setInputValue(e.target.value)}
-							onInput={handleAutoGrow}
+							onInput={handleAutoResize}
 							tabIndex={0}
 							rows={1}
 							autoFocus

views-ui/src/Chat/features/Compose/ChatInput.tsx

@@ -6,6 +6,7 @@ import { AppMessage } from "@shared/types/Message";
 import { FileSearchResult } from "@shared/types/Composer";
 import { useAutoFocus } from "../../hooks/useAutoFocus";
 import { useOnScreen } from "../../hooks/useOnScreen";
+import { handleAutoResize } from "../../utilities/utils";
 
 interface ChatInputProps {
 	onChatSubmitted: (input: string, contextFiles: string[]) => void;
@@ -160,11 +161,6 @@ const ChatInput = ({
 		});
 	};
 
-	const handleAutoGrow = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-		e.target.style.height = "auto";
-		e.target.style.height = `${e.target.scrollHeight}px`;
-	};
-
 	return (
 		<div
 			className="flex-basis-50 py-3 flex flex-col items-stretch"
@@ -203,9 +199,9 @@ const ChatInput = ({
 							value={inputValue}
 							onChange={(e) => {
 								handleInputChange(e);
-								handleAutoGrow(e);
+								handleAutoResize(e);
 							}}
-							onInput={handleAutoGrow}
+							onInput={handleAutoResize}
 							ref={chatInputBox}
 							tabIndex={0}
 							rows={1}

views-ui/src/Chat/utilities/utils.ts

@@ -0,0 +1,10 @@
+export const handleAutoResize = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+	const textarea = e.target;
+
+	// Reset height to auto to get the correct scrollHeight
+	textarea.style.height = "auto";
+
+	// Set the height to either the scrollHeight or the minimum height
+	const newHeight = Math.max(textarea.scrollHeight, 36); // 36px is your current minHeight
+	textarea.style.height = `${newHeight}px`;
+};