feat(ui): add keyboard shortcut hint to chat input#1402
feat(ui): add keyboard shortcut hint to chat input#1402fl-sean03 wants to merge 2 commits intokagent-dev:mainfrom
Conversation
Display a subtle "Ctrl+Enter to send" (or "⌘+Enter to send" on macOS) hint next to the Send button so users discover the keyboard shortcut. - OS-aware: detects macOS via navigator.userAgent and shows ⌘ symbol - Uses muted foreground color and extra-small text to stay unobtrusive - Positioned left of the action buttons with mr-auto for alignment Closes kagent-dev#824 Signed-off-by: Sean Florez <sean@opspawn.com>
There was a problem hiding this comment.
Pull request overview
Adds an OS-specific keyboard shortcut hint next to the chat Send button to make the “submit” hotkey more discoverable (issue #824), matching the existing Ctrl/Cmd + Enter key handling in the input.
Changes:
- Detects platform to choose between
⌘(macOS/iOS) andCtrl(Windows/Linux) for the displayed hint. - Renders a subtle shortcut hint (
{shortcutKey}+Enter to send) in the chat input action row.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const shortcutKey = useMemo(() => { | ||
| if (typeof navigator !== "undefined") { | ||
| return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? "⌘" : "Ctrl"; | ||
| } | ||
| return "Ctrl"; |
There was a problem hiding this comment.
shortcutKey is computed during render with a server fallback of "Ctrl" but will compute to "⌘" on macOS/iOS in the browser, which can cause a server/client HTML mismatch (hydration warning) and a visible text flip. Consider initializing state to "Ctrl" and updating it in a useEffect after mount, or render the hint only after mount (or use suppressHydrationWarning on the span) so server and first client render match.
| const shortcutKey = useMemo(() => { | |
| if (typeof navigator !== "undefined") { | |
| return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? "⌘" : "Ctrl"; | |
| } | |
| return "Ctrl"; | |
| const [shortcutKey, setShortcutKey] = useState<"Ctrl" | "⌘">("Ctrl"); | |
| useEffect(() => { | |
| if (typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)) { | |
| setShortcutKey("⌘"); | |
| } |
Replace useMemo with useState + useEffect to detect the OS-specific shortcut key (⌘ vs Ctrl). The server always renders "Ctrl" as the default, and the client updates to "⌘" on Mac after mount, avoiding a server/client HTML mismatch. Signed-off-by: fl-sean03 <fl.sean03@gmail.com>
fl-sean03
force-pushed
the
feat/hotkey-submit-hint-v2
branch
from
c535819 to
9166b51
Compare
Summary
Adds a subtle text hint next to the Send button showing the keyboard shortcut to submit a message:
⌘+Enter to sendCtrl+Enter to sendThe hint uses
text-xs text-muted-foregroundstyling to stay unobtrusive, and is positioned to the left of the action buttons usingmr-auto.Implementation
useMemohook withnavigator.userAgentdetection to determine OS<span>element in the existing button row — no layout changesCloses #824
Signed-off-by: Sean Florez sean@opspawn.com