From a20a2444b3a6ba8028e88c60102a603b4ac6af37 Mon Sep 17 00:00:00 2001
From: Kenji Hikmatullah <43457338+kenjihikmatullah@users.noreply.github.com>
Date: Wed, 19 Feb 2025 03:33:21 +0700
Subject: [PATCH] Improve Mode Tooltip (#1839)

* feat: Improve Mode Tooltip

* Update webview-ui/src/components/chat/ChatTextArea.tsx

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

* fix: typo

---------

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
---
 .changeset/chilly-pandas-retire.md            |  5 +++++
 .../src/components/chat/ChatTextArea.tsx      | 19 ++++++++++++++++---
 webview-ui/src/components/common/Tooltip.tsx  | 10 +++-------
 3 files changed, 24 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/chilly-pandas-retire.md

diff --git a/.changeset/chilly-pandas-retire.md b/.changeset/chilly-pandas-retire.md
new file mode 100644
index 0000000000..a3e0905971
--- /dev/null
+++ b/.changeset/chilly-pandas-retire.md
@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+tooltip for each mode can be shown no matter what the current mode is
diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index 2e642f9a46..c111aebe71 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -22,6 +22,7 @@ import Tooltip from "../common/Tooltip"
 import ApiOptions, { normalizeApiConfiguration } from "../settings/ApiOptions"
 import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import ContextMenu from "./ContextMenu"
+import { ChatSettings } from "../../../../src/shared/ChatSettings"
 
 interface ChatTextAreaProps {
 	inputValue: string
@@ -236,6 +237,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		const buttonRef = useRef<HTMLDivElement>(null)
 		const [arrowPosition, setArrowPosition] = useState(0)
 		const [menuPosition, setMenuPosition] = useState(0)
+		const [shownTooltipMode, setShownTooltipMode] = useState<ChatSettings["mode"] | null>(null)
 
 		const [, metaKeyChar] = useMetaKeyDetection(platform)
 
@@ -1130,12 +1132,23 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						</ModelContainer>
 					</ButtonGroup>
 					<Tooltip
-						tipText={`In ${chatSettings.mode === "act" ? "Act" : "Plan"}  mode, Cline will ${chatSettings.mode === "act" ? "complete the task immediately" : "gather information to architect a plan"}`}
+						visible={shownTooltipMode !== null}
+						tipText={`In ${shownTooltipMode === "act" ? "Act" : "Plan"}  mode, Cline will ${shownTooltipMode === "act" ? "complete the task immediately" : "gather information to architect a plan"}`}
 						hintText={`Toggle w/ ${metaKeyChar}+Shift+A`}>
 						<SwitchContainer data-testid="mode-switch" disabled={false} onClick={onModeToggle}>
 							<Slider isAct={chatSettings.mode === "act"} isPlan={chatSettings.mode === "plan"} />
-							<SwitchOption isActive={chatSettings.mode === "plan"}>Plan</SwitchOption>
-							<SwitchOption isActive={chatSettings.mode === "act"}>Act</SwitchOption>
+							<SwitchOption
+								isActive={chatSettings.mode === "plan"}
+								onMouseOver={() => setShownTooltipMode("plan")}
+								onMouseLeave={() => setShownTooltipMode(null)}>
+								Plan
+							</SwitchOption>
+							<SwitchOption
+								isActive={chatSettings.mode === "act"}
+								onMouseOver={() => setShownTooltipMode("act")}
+								onMouseLeave={() => setShownTooltipMode(null)}>
+								Act
+							</SwitchOption>
 						</SwitchContainer>
 					</Tooltip>
 				</ControlsContainer>
diff --git a/webview-ui/src/components/common/Tooltip.tsx b/webview-ui/src/components/common/Tooltip.tsx
index de3ee05908..595711fdff 100644
--- a/webview-ui/src/components/common/Tooltip.tsx
+++ b/webview-ui/src/components/common/Tooltip.tsx
@@ -9,6 +9,7 @@ import {
 } from "../../utils/vscStyles"
 
 interface TooltipProps {
+	visible: boolean
 	hintText: string
 	tipText: string
 	children: React.ReactNode
@@ -38,14 +39,9 @@ const Hint = styled.div`
 	margin-top: 2px;
 `
 
-const Tooltip: React.FC<TooltipProps> = ({ tipText, hintText, children }) => {
-	const [visible, setVisible] = useState(false)
-
-	const showTooltip = () => setVisible(true)
-	const hideTooltip = () => setVisible(false)
-
+const Tooltip: React.FC<TooltipProps> = ({ visible, tipText, hintText, children }) => {
 	return (
-		<div style={{ position: "relative", display: "inline-block" }} onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
+		<div style={{ position: "relative", display: "inline-block" }}>
 			{children}
 			{visible && (
 				<TooltipBody>