From 4a3ebd49af61581583b17ecfbcc52309ac66b67c Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Mon, 2 Sep 2024 10:51:54 -0400
Subject: [PATCH] Set icons position based on text area base height

---
 package.json                           |  2 +-
 webview-ui/src/components/ChatView.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 517b39c..545bfc1 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "claude-dev",
   "displayName": "Claude Dev",
   "description": "Autonomous coding agent right in your IDE, capable of creating/editing files, executing commands, and more with your permission every step of the way.",
-  "version": "1.5.16",
+  "version": "1.5.17",
   "icon": "icon.png",
   "engines": {
     "vscode": "^1.84.0"
diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx
index 5b4a203..0982ca5 100644
--- a/webview-ui/src/components/ChatView.tsx
+++ b/webview-ui/src/components/ChatView.tsx
@@ -57,6 +57,7 @@ const ChatView = ({
 	const [isTextAreaFocused, setIsTextAreaFocused] = useState(false)
 	const [selectedImages, setSelectedImages] = useState<string[]>([])
 	const [thumbnailsHeight, setThumbnailsHeight] = useState(0)
+	const [textAreaBaseHeight, setTextAreaBaseHeight] = useState<number | undefined>(undefined)
 
 	// we need to hold on to the ask because useEffect > lastMessage will always let us know when an ask comes in and handle it, but by the time handleMessage is called, the last message might not be the ask anymore (it could be a say that followed)
 	const [claudeAsk, setClaudeAsk] = useState<ClaudeAsk | undefined>(undefined)
@@ -606,10 +607,13 @@ const ChatView = ({
 					onFocus={() => setIsTextAreaFocused(true)}
 					onBlur={() => setIsTextAreaFocused(false)}
 					onPaste={handlePaste}
-					onHeightChange={() =>
+					onHeightChange={(height, meta) => {
+						if (textAreaBaseHeight === undefined || height < textAreaBaseHeight) {
+							setTextAreaBaseHeight(height)
+						}
 						//virtuosoRef.current?.scrollToIndex({ index: "LAST", align: "end", behavior: "auto" })
 						virtuosoRef.current?.scrollTo({ top: Number.MAX_SAFE_INTEGER, behavior: "auto" })
-					}
+					}}
 					placeholder={placeholderText}
 					maxRows={10}
 					autoFocus={true}
@@ -657,7 +661,7 @@ const ChatView = ({
 						right: 20,
 						display: "flex",
 						alignItems: "flex-center",
-						top: 10,
+						height: textAreaBaseHeight || 31,
 						bottom: 10,
 					}}>
 					<div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>