fix: Fix Auto Approve UI Closing #2579

.gitignore

@@ -4,10 +4,13 @@ out
 out-*
 node_modules
 coverage/
-mock/
 
 .DS_Store
 
+# Webview UI specific ignores
+webview-ui/node_modules
+webview-ui/dist
+
 # IDEs
 .idea
 

webview-ui/src/components/chat/AutoApproveMenu.tsx

@@ -6,6 +6,7 @@ import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { AutoApproveToggle, AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle"
+import { useAutoApproveState } from "@src/hooks/useAutoApproveState"
 
 interface AutoApproveMenuProps {
 	style?: React.CSSProperties
@@ -39,61 +40,18 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 
 	const { t } = useAppTranslation()
 
-	const onAutoApproveToggle = useCallback(
-		(key: AutoApproveSetting, value: boolean) => {
-			vscode.postMessage({ type: key, bool: value })
-
-			switch (key) {
-				case "alwaysAllowReadOnly":
-					setAlwaysAllowReadOnly(value)
-					break
-				case "alwaysAllowWrite":
-					setAlwaysAllowWrite(value)
-					break
-				case "alwaysAllowExecute":
-					setAlwaysAllowExecute(value)
-					break
-				case "alwaysAllowBrowser":
-					setAlwaysAllowBrowser(value)
-					break
-				case "alwaysAllowMcp":
-					setAlwaysAllowMcp(value)
-					break
-				case "alwaysAllowModeSwitch":
-					setAlwaysAllowModeSwitch(value)
-					break
-				case "alwaysAllowSubtasks":
-					setAlwaysAllowSubtasks(value)
-					break
-				case "alwaysApproveResubmit":
-					setAlwaysApproveResubmit(value)
-					break
-			}
-		},
-		[
-			setAlwaysAllowReadOnly,
-			setAlwaysAllowWrite,
-			setAlwaysAllowExecute,
-			setAlwaysAllowBrowser,
-			setAlwaysAllowMcp,
-			setAlwaysAllowModeSwitch,
-			setAlwaysAllowSubtasks,
-			setAlwaysApproveResubmit,
-		],
-	)
-
 	const toggleExpanded = useCallback(() => setIsExpanded((prev) => !prev), [])
 
 	const toggles = useMemo(
 		() => ({
-			alwaysAllowReadOnly: alwaysAllowReadOnly,
-			alwaysAllowWrite: alwaysAllowWrite,
-			alwaysAllowExecute: alwaysAllowExecute,
-			alwaysAllowBrowser: alwaysAllowBrowser,
-			alwaysAllowMcp: alwaysAllowMcp,
-			alwaysAllowModeSwitch: alwaysAllowModeSwitch,
-			alwaysAllowSubtasks: alwaysAllowSubtasks,
-			alwaysApproveResubmit: alwaysApproveResubmit,
+			alwaysAllowReadOnly,
+			alwaysAllowWrite,
+			alwaysAllowExecute,
+			alwaysAllowBrowser,
+			alwaysAllowMcp,
+			alwaysAllowModeSwitch,
+			alwaysAllowSubtasks,
+			alwaysApproveResubmit,
 		}),
 		[
 			alwaysAllowReadOnly,
@@ -107,10 +65,47 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 		],
 	)
 
-	const enabledActionsList = Object.entries(toggles)
-		.filter(([_key, value]) => !!value)
-		.map(([key]) => t(autoApproveSettingsConfig[key as AutoApproveSetting].labelKey))
-		.join(", ")
+	// Memoize setters object to prevent recreating it on every render
+	const setters = useMemo(
+		() => ({
+			setAlwaysAllowReadOnly,
+			setAlwaysAllowWrite,
+			setAlwaysAllowExecute,
+			setAlwaysAllowBrowser,
+			setAlwaysAllowMcp,
+			setAlwaysAllowModeSwitch,
+			setAlwaysAllowSubtasks,
+			setAlwaysApproveResubmit,
+			setAutoApprovalEnabled,
+		}),
+		[
+			setAlwaysAllowReadOnly,
+			setAlwaysAllowWrite,
+			setAlwaysAllowExecute,
+			setAlwaysAllowBrowser,
+			setAlwaysAllowMcp,
+			setAlwaysAllowModeSwitch,
+			setAlwaysAllowSubtasks,
+			setAlwaysApproveResubmit,
+			setAutoApprovalEnabled,
+		],
+	)
+
+	// Use the centralized auto-approve state hook
+	const { hasAnyAutoApprovedAction, updateAutoApprovalState, handleMasterToggle } = useAutoApproveState({
+		toggles,
+		setters,
+	})
+
+	const displayedAutoApproveText = useMemo(() => {
+		if (hasAnyAutoApprovedAction) {
+			return Object.entries(toggles)
+				.filter(([_key, value]) => !!value)
+				.map(([key]) => t(autoApproveSettingsConfig[key as AutoApproveSetting].labelKey))
+				.join(", ")
+		}
+		return t("chat:autoApprove.none")
+	}, [hasAnyAutoApprovedAction, toggles, t])
 
 	const handleOpenSettings = useCallback(
 		() =>
@@ -140,12 +135,9 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 				onClick={toggleExpanded}>
 				<div onClick={(e) => e.stopPropagation()}>
 					<VSCodeCheckbox
-						checked={autoApprovalEnabled ?? false}
-						onChange={() => {
-							const newValue = !(autoApprovalEnabled ?? false)
-							setAutoApprovalEnabled(newValue)
-							vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
-						}}
+						checked={hasAnyAutoApprovedAction}
+						disabled={false}
+						onChange={() => handleMasterToggle()}
 					/>
 				</div>
 				<div
@@ -172,7 +164,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							flex: 1,
 							minWidth: 0,
 						}}>
-						{enabledActionsList || t("chat:autoApprove.none")}
+						{displayedAutoApproveText}
 					</span>
 					<span
 						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}
@@ -199,7 +191,11 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 						/>
 					</div>
 
-					<AutoApproveToggle {...toggles} onToggle={onAutoApproveToggle} />
+					<AutoApproveToggle
+						{...toggles}
+						onToggle={updateAutoApprovalState}
+						isOverallApprovalEnabled={autoApprovalEnabled}
+					/>
 
 					{/* Auto-approve API request count limit input row inspired by Cline */}
 					<div

webview-ui/src/components/chat/ChatView.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"
-import { useDeepCompareEffect, useEvent, useMount } from "react-use"
+import { useEvent, useMount } from "react-use"
 import debounce from "debounce"
 import { Virtuoso, type VirtuosoHandle } from "react-virtuoso"
 import removeMd from "remove-markdown"
@@ -215,7 +215,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		vscode.postMessage({ type: "playTts", text })
 	}
 
-	useDeepCompareEffect(() => {
+	useEffect(() => {
 		// if last message is an ask, show user ask UI
 		// if user finished a task, then start a new task with a new conversation history since in this moment that the extension is waiting for user response, the user could close the extension and the conversation history would be lost.
 		// basically as long as a task is active, the conversation history will be persisted
@@ -390,7 +390,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 					break
 			}
 		}
-	}, [lastMessage, secondLastMessage])
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- isAutoApproved is defined later in the file
+	}, [lastMessage, secondLastMessage, t, playSound])
 
 	useEffect(() => {
 		if (messages.length === 0) {