feat(frontend): add keyboard shortcuts for form submission #170
Conversation
WalkthroughThe changes update the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PF as PromptForm Component
User->>PF: Press key (Cmd/Ctrl/Alt+Enter)
PF->>PF: Event listener triggers via useEffect
PF->>PF: Execute handleSubmit()
PF->>Backend: Process form submission (after validation)
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
frontend/src/components/root/prompt-form.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/frontend/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
frontend/src/components/root/prompt-form.tsx (4)
3-3: Consider removing unused imports.The
Commandicon is imported fromlucide-reactbut doesn't appear to be used anywhere in the component.import { SendIcon, FileUp, Sparkles, Globe, Lock, Loader2, Cpu, - Command, } from 'lucide-react';Also applies to: 12-12
134-150: Add TypeScript type for the event parameter.The event parameter in the handleKeyDown function is missing TypeScript typing, which could lead to type-related issues.
- const handleKeyDown = (e) => { + const handleKeyDown = (e: KeyboardEvent) => {
334-336: Update shortcut hint to show all available shortcuts.The UI only shows "Alt+↵" but the code also implements Cmd+Enter and Ctrl+Enter shortcuts. Consider updating the UI hint to inform users about all available shortcuts.
<span className="ml-2 text-xs opacity-80 border-l border-white pl-2"> - Alt+↵ + ⌘/Ctrl+↵, Alt+↵ </span>
132-159: Consider making keyboard shortcuts only work when textarea is focused.Currently, the keyboard shortcuts work globally across the document, which might interfere with other keyboard shortcuts or text entry in different parts of the application. Consider making the shortcuts only trigger when the textarea is focused.
useEffect(() => { const handleKeyDown = (e) => { // Skip if currently loading, regenerating, or enhancing if (isLoading || isRegenerating) { return; } + // Only process shortcuts if the textarea is focused + const activeElement = document.activeElement; + const textarea = document.querySelector('textarea'); + if (activeElement !== textarea) { + return; + } // Check for Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux) if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); handleSubmit(); } // Also support Alt+Enter as an alternative shortcut if (e.altKey && e.key === 'Enter') { e.preventDefault(); handleSubmit(); } }; // Add event listener document.addEventListener('keydown', handleKeyDown); // Clean up return () => { document.removeEventListener('keydown', handleKeyDown); }; }, [isAuthorized, isLoading, isRegenerating]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/components/root/prompt-form.tsx(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Install and Build Frontend
🔇 Additional comments (1)
frontend/src/components/root/prompt-form.tsx (1)
95-103: Good job extracting submission logic.The
handleSubmitfunction properly consolidates the form submission logic and handles both authorization and loading/regenerating states. This improves code maintainability and reduces duplication.
| // Set up keyboard shortcut for submission | ||
| useEffect(() => { | ||
| const handleKeyDown = (e) => { | ||
| // Skip if currently loading, regenerating, or enhancing | ||
| if (isLoading || isRegenerating) { | ||
| return; | ||
| } | ||
|
|
||
| // Check for Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux) | ||
| if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { | ||
| e.preventDefault(); | ||
| handleSubmit(); | ||
| } | ||
| // Also support Alt+Enter as an alternative shortcut | ||
| if (e.altKey && e.key === 'Enter') { | ||
| e.preventDefault(); | ||
| handleSubmit(); | ||
| } | ||
| }; | ||
|
|
||
| // Add event listener | ||
| document.addEventListener('keydown', handleKeyDown); | ||
|
|
||
| // Clean up | ||
| return () => { | ||
| document.removeEventListener('keydown', handleKeyDown); | ||
| }; | ||
| }, [isAuthorized, isLoading, isRegenerating]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add missing dependencies to the useEffect dependency array.
The onSubmit and onAuthRequired functions are used inside the effect via handleSubmit, but they're not included in the dependency array. This could lead to stale closures if these functions change.
- }, [isAuthorized, isLoading, isRegenerating]);
+ }, [isAuthorized, isLoading, isRegenerating, onSubmit, onAuthRequired]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Set up keyboard shortcut for submission | |
| useEffect(() => { | |
| const handleKeyDown = (e) => { | |
| // Skip if currently loading, regenerating, or enhancing | |
| if (isLoading || isRegenerating) { | |
| return; | |
| } | |
| // Check for Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux) | |
| if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { | |
| e.preventDefault(); | |
| handleSubmit(); | |
| } | |
| // Also support Alt+Enter as an alternative shortcut | |
| if (e.altKey && e.key === 'Enter') { | |
| e.preventDefault(); | |
| handleSubmit(); | |
| } | |
| }; | |
| // Add event listener | |
| document.addEventListener('keydown', handleKeyDown); | |
| // Clean up | |
| return () => { | |
| document.removeEventListener('keydown', handleKeyDown); | |
| }; | |
| }, [isAuthorized, isLoading, isRegenerating]); | |
| // Set up keyboard shortcut for submission | |
| useEffect(() => { | |
| const handleKeyDown = (e) => { | |
| // Skip if currently loading, regenerating, or enhancing | |
| if (isLoading || isRegenerating) { | |
| return; | |
| } | |
| // Check for Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux) | |
| if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { | |
| e.preventDefault(); | |
| handleSubmit(); | |
| } | |
| // Also support Alt+Enter as an alternative shortcut | |
| if (e.altKey && e.key === 'Enter') { | |
| e.preventDefault(); | |
| handleSubmit(); | |
| } | |
| }; | |
| // Add event listener | |
| document.addEventListener('keydown', handleKeyDown); | |
| // Clean up | |
| return () => { | |
| document.removeEventListener('keydown', handleKeyDown); | |
| }; | |
| }, [isAuthorized, isLoading, isRegenerating, onSubmit, onAuthRequired]); |
Summary by CodeRabbit
New Features
Refactor