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( const buttonRef = useRef(null) const [arrowPosition, setArrowPosition] = useState(0) const [menuPosition, setMenuPosition] = useState(0) + const [shownTooltipMode, setShownTooltipMode] = useState(null) const [, metaKeyChar] = useMetaKeyDetection(platform) @@ -1130,12 +1132,23 @@ const ChatTextArea = forwardRef( - Plan - Act + setShownTooltipMode("plan")} + onMouseLeave={() => setShownTooltipMode(null)}> + Plan + + setShownTooltipMode("act")} + onMouseLeave={() => setShownTooltipMode(null)}> + Act + 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 = ({ tipText, hintText, children }) => { - const [visible, setVisible] = useState(false) - - const showTooltip = () => setVisible(true) - const hideTooltip = () => setVisible(false) - +const Tooltip: React.FC = ({ visible, tipText, hintText, children }) => { return ( -
+
{children} {visible && (