scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-09 22:31:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Improve Mode Tooltip (#1839)

Browse source 
* 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>
This commit is contained in:
Kenji Hikmatullah 2025-02-19 03:33:21 +07:00 • committed by GitHub
parent cb02277b45
commit a20a2444b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/chilly-pandas-retire.md Normal file
View file

@ -0,0 +1,5 @@
---
"claude-dev": minor
---
tooltip for each mode can be shown no matter what the current mode is

19
webview-ui/src/components/chat/ChatTextArea.tsx
View file

@ -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>

10
webview-ui/src/components/common/Tooltip.tsx
View file

@ -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>