diff --git a/webview-ui/src/components/chat/AutoApproveDropdown.tsx b/webview-ui/src/components/chat/AutoApproveDropdown.tsx index 1fbe8cc0db..a47d097a96 100644 --- a/webview-ui/src/components/chat/AutoApproveDropdown.tsx +++ b/webview-ui/src/components/chat/AutoApproveDropdown.tsx @@ -10,6 +10,7 @@ import { Popover, PopoverContent, PopoverTrigger, StandardTooltip, ToggleSwitch import { AutoApproveSetting, autoApproveSettingsConfig } from "../settings/AutoApproveToggle" import { useAutoApprovalToggles } from "@/hooks/useAutoApprovalToggles" import { useAutoApprovalState } from "@/hooks/useAutoApprovalState" +import { ShortcutHint } from "./ShortcutHint" interface AutoApproveDropdownProps { disabled?: boolean @@ -222,6 +223,7 @@ export const AutoApproveDropdown = ({ disabled = false, triggerClassName = "" }:

{t("chat:autoApprove.description")}

+
{settingsArray.map(({ key, labelKey, descriptionKey, icon }) => { diff --git a/webview-ui/src/components/chat/ShortcutHint.tsx b/webview-ui/src/components/chat/ShortcutHint.tsx new file mode 100644 index 0000000000..5409efaa64 --- /dev/null +++ b/webview-ui/src/components/chat/ShortcutHint.tsx @@ -0,0 +1,43 @@ +import React from "react" +import { Trans } from "react-i18next" + +import { useAppTranslation } from "@/i18n/TranslationContext" +import { usePlatform } from "@/hooks/usePlatform" + +interface ShortcutHintProps { + translationKey: string +} + +export const ShortcutHint: React.FC = ({ translationKey }) => { + const { t } = useAppTranslation() + const platform = usePlatform() + + const getShortcut = () => { + switch (platform) { + case "mac": + return "⌘⌥A" + case "windows": + case "linux": + return "Ctrl+Alt+A" + default: + return "" + } + } + + const shortcut = getShortcut() + + if (!shortcut) { + return null + } + + return ( +

+ {shortcut}, + }} + /> +

+ ) +} diff --git a/webview-ui/src/hooks/usePlatform.ts b/webview-ui/src/hooks/usePlatform.ts new file mode 100644 index 0000000000..6d5cd1a0a9 --- /dev/null +++ b/webview-ui/src/hooks/usePlatform.ts @@ -0,0 +1,20 @@ +import { useState, useEffect } from "react" + +type Platform = "mac" | "windows" | "linux" | "unknown" + +export function usePlatform(): Platform { + const [platform, setPlatform] = useState("unknown") + + useEffect(() => { + const userAgent = window.navigator.userAgent.toLowerCase() + if (userAgent.includes("mac")) { + setPlatform("mac") + } else if (userAgent.includes("win")) { + setPlatform("windows") + } else if (userAgent.includes("linux")) { + setPlatform("linux") + } + }, []) + + return platform +} diff --git a/webview-ui/src/i18n/locales/en/chat.json b/webview-ui/src/i18n/locales/en/chat.json index 6e2cf84f89..f2c5fa3867 100644 --- a/webview-ui/src/i18n/locales/en/chat.json +++ b/webview-ui/src/i18n/locales/en/chat.json @@ -294,7 +294,8 @@ "triggerLabel_zero": "0 auto-approve", "triggerLabel_one": "1 auto-approved", "triggerLabel_other": "{{count}} auto-approved", - "triggerLabelAll": "YOLO" + "triggerLabelAll": "YOLO", + "toggleShortcut": "Toggle with " }, "announcement": { "title": "🎉 Roo Code {{version}} Released",