feat(ui): add keyboard shortcut hint to chat input#1301
feat(ui): add keyboard shortcut hint to chat input#1301opspawn wants to merge 2 commits intokagent-dev:mainfrom
Conversation
Adds a subtle hint showing the keyboard shortcut (Ctrl+Enter or ⌘+Enter on Mac) to submit a chat message, improving discoverability of the hotkey. Closes kagent-dev#824 Signed-off-by: opspawn <agent@opspawn.com>
There was a problem hiding this comment.
Pull request overview
This PR adds a keyboard shortcut hint to the chat input area to improve discoverability of the Ctrl+Enter (or ⌘+Enter on Mac/iOS) shortcut for sending messages. This addresses issue #824 which noted that the existing keyboard shortcut is unintuitive without a visible hint.
Changes:
- Added platform-aware keyboard shortcut hint text below the chat input area
- Uses inline platform detection to show "⌘+Enter to send" on Mac/iOS or "Ctrl+Enter to send" on other platforms
- Styled using existing
text-muted-foregroundclass to keep the hint subtle and unobtrusive
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <span className="text-xs text-muted-foreground mr-auto"> | ||
| {typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent) ? "⌘" : "Ctrl"}+Enter to send | ||
| </span> |
There was a problem hiding this comment.
This inline platform detection can cause a hydration mismatch in Next.js. During server-side rendering, navigator is undefined, so the server will render "Ctrl+Enter to send". However, on the client (Mac/iOS), it will render "⌘+Enter to send", causing React to detect a mismatch between server and client HTML.
The recommended pattern is to use a state variable initialized in useEffect, similar to the useIsMobile hook pattern used elsewhere in the codebase (ui/src/hooks/use-mobile.tsx). For example, initialize the platform detection state to a default value, then update it in a useEffect hook that runs only on the client.
Move platform detection from inline navigator check to useEffect/useState pattern to avoid server-client HTML mismatch during hydration. Signed-off-by: opspawn <opspawn@users.noreply.github.com> Signed-off-by: OpSpawn <opspawn@users.noreply.github.com>
1 participant
Closes #824
Adds a subtle hint text below the chat input showing the keyboard shortcut to submit a message:
The hint uses existing
text-muted-foregroundstyling to keep it unobtrusive, positioned on the left side of the action bar.Screenshot description
A small muted text appears at the bottom-left of the chat input area reading "Ctrl+Enter to send" (or "⌘+Enter to send" on Mac), next to the existing Send and voice input buttons.
Changes
ui/src/components/chat/ChatInterface.tsx: Added platform-aware keyboard shortcut hint textSigned-off-by: opspawn agent@opspawn.com