[Feature] Add setting for Enter/Ctrl+Enter to send messages

[maifeeulasad]

closes #549

[maifeeulasad]

@DayuanJiang if you need some changes, please let me know.

[Copilot]

Pull request overview

This PR adds a user preference setting to choose between Enter or Ctrl+Enter as the keyboard shortcut for sending messages in the chat interface, addressing issue #549.

Key changes:

• Added a new storage key for the send shortcut preference
• Implemented UI controls in the settings dialog to toggle between "Enter to send" and "Ctrl+Enter to send" modes
• Updated the chat input keyboard handler to respect the user's preference
• Added translations for the new setting in English, Chinese, and Japanese

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
lib/storage.ts	Adds sendShortcut storage key constant for persisting user preference
lib/i18n/dictionaries/en.json	Adds English translations for the send shortcut setting UI
lib/i18n/dictionaries/zh.json	Adds Chinese translations for the send shortcut setting UI
lib/i18n/dictionaries/ja.json	Adds Japanese translations for the send shortcut setting UI
components/settings-dialog.tsx	Implements select dropdown UI for choosing send shortcut preference
components/chat-input.tsx	Updates keyboard handler to check preference and send message accordingly

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[DayuanJiang]

@maifeeulasad Thanks, please check these 2 comment.

[maifeeulasad]

@DayuanJiang care to take another look please?

[DayuanJiang]

Thanks for the fix, I found another minor issue, could you please also fix this?

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

components/chat-input.tsx:232

• The keyboard shortcut feature lacks test coverage. The repository has e2e tests for keyboard interactions (tests/e2e/keyboard.spec.ts), but there are no tests verifying:

1. That Enter sends messages when "enter" mode is selected
2. That Cmd/Ctrl+Enter sends messages when "ctrl-enter" mode is selected
3. That Shift+Enter creates a new line in "enter" mode
4. That the setting persists across page reloads

Consider adding test coverage for this feature to ensure it works correctly and prevent regressions.

    const handleKeyDown = (e: React.KeyboardEvent) => {
        const shouldSend =
            sendShortcut === "enter"
                ? e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey
                : (e.metaKey || e.ctrlKey) && e.key === "Enter"

        if (shouldSend) {
            e.preventDefault()
            const form = e.currentTarget.closest("form")
            if (form && input.trim() && !isDisabled) {
                form.requestSubmit()
            }
        }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

There are two issues with the sendShortcut state initialization:

1. Direct access to localStorage without checking if window is defined can cause SSR issues during hydration in Next.js, potentially resulting in "localStorage is not defined" errors or hydration mismatches.

2. The state is initialized once on mount but won't react to changes made in the settings dialog. If a user changes the preference while the chat input is mounted, the change won't take effect until page reload.

Consider adding a typeof window check for SSR safety (similar to line 168 in settings-dialog.tsx), and implementing a mechanism to listen for localStorage changes. Note that the 'storage' event only fires for changes from other windows/tabs, so for same-window changes you may need a custom event or context-based solution to propagate the setting change from the settings dialog to the chat input component.

[DayuanJiang]

@maifeeulasad Thanks for the fix. I tested it locally and found it is better to make it work without refreshing the page to keep the setting behavior consistent. I fixed it myself. Merged.

[maifeeulasad]

@DayuanJiang really appreciate it. I was nice contributing to this open source project and working with this really collaborative team! 🥂