From 6e96dc529bc6fc03fb0f8d36cb0725c2eb1fbb96 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Sat, 20 Jul 2024 17:05:21 -0400
Subject: [PATCH] Fade out buttons without removing from dom after clicking,
 fixing the scroll jumping issue due to the buttons being removed and re-added

---
 webview-ui/src/components/ChatView.tsx | 80 +++++++++++++++-----------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx
index 6ecd6d3..345f557 100644
--- a/webview-ui/src/components/ChatView.tsx
+++ b/webview-ui/src/components/ChatView.tsx
@@ -30,6 +30,7 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 	// 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)
 
+	const [enableButtons, setEnableButtons] = useState<boolean>(false)
 	const [primaryButtonText, setPrimaryButtonText] = useState<string | undefined>(undefined)
 	const [secondaryButtonText, setSecondaryButtonText] = useState<string | undefined>(undefined)
 
@@ -73,24 +74,28 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 						case "request_limit_reached":
 							setTextAreaDisabled(true)
 							setClaudeAsk("request_limit_reached")
+							setEnableButtons(true)
 							setPrimaryButtonText("Proceed")
 							setSecondaryButtonText("Start New Task")
 							break
 						case "followup":
 							setTextAreaDisabled(false)
 							setClaudeAsk("followup")
-							setPrimaryButtonText(undefined)
-							setSecondaryButtonText(undefined)
+							setEnableButtons(false)
+							// setPrimaryButtonText(undefined)
+							// setSecondaryButtonText(undefined)
 							break
 						case "tool":
 							setTextAreaDisabled(true)
 							setClaudeAsk("tool")
+							setEnableButtons(true)
 							setPrimaryButtonText("Approve")
 							setSecondaryButtonText("Cancel")
 							break
 						case "command":
 							setTextAreaDisabled(true)
 							setClaudeAsk("command")
+							setEnableButtons(true)
 							setPrimaryButtonText("Run Command")
 							setSecondaryButtonText("Cancel")
 							break
@@ -98,6 +103,7 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 							// extension waiting for feedback. but we can just present a new task button
 							setTextAreaDisabled(false)
 							setClaudeAsk("completion_result")
+							setEnableButtons(true)
 							setPrimaryButtonText("Start New Task")
 							setSecondaryButtonText(undefined)
 							break
@@ -137,6 +143,7 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 		if (messages.length === 0) {
 			setTextAreaDisabled(false)
 			setClaudeAsk(undefined)
+			setEnableButtons(false)
 			setPrimaryButtonText(undefined)
 			setSecondaryButtonText(undefined)
 		}
@@ -159,8 +166,9 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 			setInputValue("")
 			setTextAreaDisabled(true)
 			setClaudeAsk(undefined)
-			setPrimaryButtonText(undefined)
-			setSecondaryButtonText(undefined)
+			setEnableButtons(false)
+			// setPrimaryButtonText(undefined)
+			// setSecondaryButtonText(undefined)
 		}
 	}
 
@@ -181,8 +189,9 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 		}
 		setTextAreaDisabled(true)
 		setClaudeAsk(undefined)
-		setPrimaryButtonText(undefined)
-		setSecondaryButtonText(undefined)
+		setEnableButtons(false)
+		// setPrimaryButtonText(undefined)
+		// setSecondaryButtonText(undefined)
 	}
 
 	const handleSecondaryButtonClick = () => {
@@ -197,8 +206,9 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 		}
 		setTextAreaDisabled(true)
 		setClaudeAsk(undefined)
-		setPrimaryButtonText(undefined)
-		setSecondaryButtonText(undefined)
+		setEnableButtons(false)
+		// setPrimaryButtonText(undefined)
+		// setSecondaryButtonText(undefined)
 	}
 
 	const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
@@ -313,30 +323,35 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 					<ChatRow key={index} message={message} />
 				))}
 			</div>
-			{(primaryButtonText || secondaryButtonText) && (
-				<div style={{ display: "flex", padding: "10px 15px 0px 15px" }}>
-					{primaryButtonText && (
-						<VSCodeButton
-							appearance="primary"
-							style={{
-								flex: secondaryButtonText ? 1 : 2,
-								marginRight: secondaryButtonText ? "6px" : "0",
-							}}
-							onClick={handlePrimaryButtonClick}>
-							{primaryButtonText}
-						</VSCodeButton>
-					)}
-					{secondaryButtonText && (
-						<VSCodeButton
-							appearance="secondary"
-							style={{ flex: 1, marginLeft: "6px" }}
-							onClick={handleSecondaryButtonClick}>
-							{secondaryButtonText}
-						</VSCodeButton>
-					)}
-				</div>
-			)}
-			<div style={{ padding: "10px 15px", opacity: textAreaDisabled ? 0.7 : 1, position: "relative" }}>
+			<div
+				style={{
+					opacity: primaryButtonText || secondaryButtonText ? (enableButtons ? 1 : 0.5) : 0,
+					display: "flex",
+					padding: "10px 15px 0px 15px",
+				}}>
+				{primaryButtonText && (
+					<VSCodeButton
+						appearance="primary"
+						disabled={!enableButtons}
+						style={{
+							flex: secondaryButtonText ? 1 : 2,
+							marginRight: secondaryButtonText ? "6px" : "0",
+						}}
+						onClick={handlePrimaryButtonClick}>
+						{primaryButtonText}
+					</VSCodeButton>
+				)}
+				{secondaryButtonText && (
+					<VSCodeButton
+						appearance="secondary"
+						disabled={!enableButtons}
+						style={{ flex: 1, marginLeft: "6px" }}
+						onClick={handleSecondaryButtonClick}>
+						{secondaryButtonText}
+					</VSCodeButton>
+				)}
+			</div>
+			<div style={{ padding: "10px 15px", opacity: textAreaDisabled ? 0.5 : 1, position: "relative" }}>
 				<DynamicTextArea
 					ref={textAreaRef}
 					value={inputValue}
@@ -360,6 +375,7 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 						resize: "none",
 						overflow: "hidden",
 						padding: "8px 36px 8px 8px",
+						cursor: textAreaDisabled ? "not-allowed" : undefined,
 					}}
 				/>
 				<div