feat: add shortcut key #5396
feat: add shortcut key #5396
Conversation
|
@DDMeaqua is attempting to deploy a commit to the NextChat Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis pull request introduces enhancements to the chat application, including a new Changes
Poem
Tip Announcements
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 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
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- app/components/chat.module.scss (1 hunks)
- app/components/chat.tsx (3 hunks)
- app/locales/cn.ts (2 hunks)
- app/locales/en.ts (1 hunks)
- app/locales/tw.ts (1 hunks)
Additional comments not posted (5)
app/locales/tw.ts (1)
84-91: Translations for keyboard shortcuts look good.The addition of the
ShortcutKeyobject with its respective translations enhances the user experience by providing localized keyboard shortcuts. Ensure that the translations are accurate and culturally appropriate.Please verify the accuracy of the translations with a native speaker or through user feedback.
app/components/chat.module.scss (1)
650-697: New CSS styles for shortcut keys are well-designed.The addition of
.shortcut-key-container,.shortcut-key-grid,.shortcut-key-item,.shortcut-key-title,.shortcut-key-keys, and.shortcut-keyclasses enhance the layout and presentation of shortcut keys. Ensure that the styles are responsive and compatible across different browsers and devices.Please conduct a cross-browser compatibility test to ensure consistent rendering.
app/locales/cn.ts (1)
85-92: Translations for keyboard shortcuts in Chinese look good.The addition of the
ShortcutKeyobject with its respective translations enhances the user experience by providing localized keyboard shortcuts for Chinese-speaking users. Ensure that the translations are accurate and culturally appropriate.Please verify the accuracy of the translations with a native speaker or through user feedback.
app/locales/en.ts (1)
86-93: Approved: Shortcut keys localization added.The addition of the
ShortcutKeyobject with localized strings for the new shortcut keys is correctly implemented. Ensure that similar updates are made across other locale files to maintain consistency.Verification successful
Localization Consistency Verified: ShortcutKey object is consistent across locales.
The
ShortcutKeyobject is consistently defined across theen.ts,tw.ts, andcn.tslocale files with appropriate translations. This ensures that the shortcut keys are correctly localized for English, Traditional Chinese, and Simplified Chinese users. No further action is required.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that similar updates are made across other locale files. # Test: Search for `ShortcutKey` in other locale files. Expect: Similar entries in other locale files. rg --type ts 'ShortcutKey' --files-with-matchesLength of output: 125
Script:
#!/bin/bash # Extract and display the `ShortcutKey` object from `tw.ts` and `cn.ts` for comparison. # Extract `ShortcutKey` from `tw.ts` echo "ShortcutKey in tw.ts:" rg --type ts --context 5 'ShortcutKey' app/locales/tw.ts # Extract `ShortcutKey` from `cn.ts` echo -e "\nShortcutKey in cn.ts:" rg --type ts --context 5 'ShortcutKey' app/locales/cn.tsLength of output: 1123
app/components/chat.tsx (1)
832-881: Approved: NewShortcutKeyModalcomponent implemented.The implementation of the
ShortcutKeyModalcomponent is correct and uses localized strings effectively. Consider adding accessibility features such as keyboard navigability and ARIA attributes to enhance usability for all users.
app/components/chat.tsx
Outdated
| useEffect(() => { | ||
| const handleKeyDown = (event) => { | ||
| // 打开新聊天 command + shift + o | ||
| if ( | ||
| (event.metaKey || event.ctrlKey) && | ||
| event.shiftKey && | ||
| event.key.toLowerCase() === "o" | ||
| ) { | ||
| event.preventDefault(); | ||
| setTimeout(() => { | ||
| chatStore.newSession(); | ||
| navigate(Path.Chat); | ||
| }, 10); | ||
| } | ||
| // 聚焦聊天输入 shift + esc | ||
| else if (event.shiftKey && event.key.toLowerCase() === "escape") { | ||
| event.preventDefault(); | ||
| inputRef.current?.focus(); | ||
| } | ||
| // 复制最后一个代码块 command + shift + ; | ||
| else if ( | ||
| (event.metaKey || event.ctrlKey) && | ||
| event.shiftKey && | ||
| event.code === "Semicolon" | ||
| ) { | ||
| event.preventDefault(); | ||
| const copyCodeButton = document.querySelectorAll(".copy-code-button"); | ||
| if (copyCodeButton.length > 0) { | ||
| copyCodeButton[copyCodeButton.length - 1].click(); | ||
| } | ||
| } | ||
| // 复制最后一个回复 command + shift + c | ||
| else if ( | ||
| (event.metaKey || event.ctrlKey) && | ||
| event.shiftKey && | ||
| event.key.toLowerCase() === "c" | ||
| ) { | ||
| event.preventDefault(); | ||
| const lastNonUserMessage = messages | ||
| .filter((message) => message.role !== "user") | ||
| .pop(); | ||
| if (lastNonUserMessage) { | ||
| const lastMessageContent = getMessageTextContent(lastNonUserMessage); | ||
| copyToClipboard(lastMessageContent); | ||
| } | ||
| } | ||
| // 展示快捷键 command + / | ||
| else if ((event.metaKey || event.ctrlKey) && event.key === "/") { | ||
| event.preventDefault(); | ||
| setShowShortcutKeyModal(true); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener("keydown", handleKeyDown); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("keydown", handleKeyDown); | ||
| }; | ||
| }, [messages, chatStore, navigate]); | ||
|
|
There was a problem hiding this comment.
Suggest improvement: Refine shortcut handling in _Chat.
The handling of keyboard shortcuts in _Chat is functional but could be improved. Consider removing setTimeout for navigation and exploring more React-centric approaches like state transitions or context for managing UI changes. This could enhance performance and maintainability.
|
|
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- app/components/chat.tsx (3 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/components/chat.tsx
|
Your build has completed! |
|
有ts报错现已修复，快捷键只在 chat 页生效 |
An error reported in ts has been fixed. The shortcut keys only take effect on the chat page. |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- app/components/chat.module.scss (1 hunks)
- app/components/chat.tsx (3 hunks)
Files skipped from review due to trivial changes (1)
- app/components/chat.module.scss
Files skipped from review as they are similar to previous changes (1)
- app/components/chat.tsx
|
编译看了下，是否隐藏手机端的显示？ |
After compiling and reading, do you want to hide the display on the mobile phone? |
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
#5135
📝 补充信息 | Additional Information
Summary by CodeRabbit
New Features
ShortcutKeyModalfor displaying keyboard shortcuts within the chat application.Style