feat(interface): configurable Enter behavior in chat composer#600
Open
b-client-vm wants to merge 2 commits into
Open
feat(interface): configurable Enter behavior in chat composer#600b-client-vm wants to merge 2 commits into
b-client-vm wants to merge 2 commits into
Conversation
Adds a user-level preference for how the Enter key behaves in the chat composer: - Enter to send (default, current behavior) — Shift+Enter inserts a newline - Enter for new line — Cmd/Ctrl/Alt+Enter sends Persists via localStorage in a new useChatInputPrefs hook, surfaced through a new Settings → Composition section. Wired through PortalComposer (main chat) via the new `enterToSubmit` prop on @spacedrive/ai's ChatComposer, and also applied to CortexChatPanel (the new-agent dialog composer). Closes spacedriveapp#599
Contributor
WalkthroughThis PR adds a configurable Enter key behavior preference for chat input with persistent storage and a new settings UI section. Users can toggle between Enter-to-submit and Enter-for-newline modes; the preference syncs across tabs and is reflected in chat input placeholders and keyboard handling. ChangesEnter key behavior preference and UI
🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
3 tasks
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
interface/src/components/settings/CompositionSection.tsx (1)
38-55: ⚡ Quick winAdd explicit button semantics for toggle options.
Line 38 should set
type="button"and expose selected state (e.g.,aria-pressed) so assistive tech can announce which mode is active.Proposed diff
<button key={String(opt.value)} + type="button" onClick={() => setEnterToSubmit(opt.value)} + aria-pressed={active} className={`flex flex-col items-start rounded-lg border p-4 text-left transition-colors ${🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@interface/src/components/settings/CompositionSection.tsx` around lines 38 - 55, In CompositionSection.tsx update the option button rendered for each opt (the button that calls setEnterToSubmit(opt.value) and uses the active flag) to include explicit button semantics: add type="button" to prevent accidental form submission and add an accessible selected state such as aria-pressed={active} (or aria-checked if you treat it like a toggle) so screen readers announce which mode is active; ensure the same button element that renders opt.title/opt.description uses these attributes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@interface/src/components/settings/CompositionSection.tsx`:
- Around line 38-55: In CompositionSection.tsx update the option button rendered
for each opt (the button that calls setEnterToSubmit(opt.value) and uses the
active flag) to include explicit button semantics: add type="button" to prevent
accidental form submission and add an accessible selected state such as
aria-pressed={active} (or aria-checked if you treat it like a toggle) so screen
readers announce which mode is active; ensure the same button element that
renders opt.title/opt.description uses these attributes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 900effc7-106f-424d-9ab9-e886accc19ce
📒 Files selected for processing (8)
interface/src/components/CortexChatPanel.tsxinterface/src/components/portal/PortalComposer.tsxinterface/src/components/settings/CompositionSection.tsxinterface/src/components/settings/constants.tsinterface/src/components/settings/index.tsinterface/src/components/settings/types.tsinterface/src/hooks/useChatInputPrefs.tsinterface/src/routes/Settings.tsx
- CompositionSection: add type="button" and aria-pressed to the Enter-behavior toggle so assistive tech can announce the active mode. - CortexChatPanel: gate keyboard-triggered submit on canSend (matches the send button's enabled state and mirrors the upstream ChatComposer fix in spaceui#4). Addresses CodeRabbit review on spacedriveapp#600.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@interface/src/components/CortexChatPanel.tsx`:
- Around line 216-219: The Enter-to-submit branch inside the key handler (where
prefs.enterToSubmit is checked) only ignores Shift+Enter but not
Alt/Option+Enter, so Alt+Enter still submits; update the condition in the
handler (the block referencing prefs.enterToSubmit and canSend/onSubmit) to also
return when event.altKey (Option on macOS) is true (e.g., if (event.shiftKey ||
event.altKey) return;) so Shift/Option+Enter inserts a newline instead of
submitting.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1c07bb44-a36f-4393-b6fd-274a5d70f37b
📒 Files selected for processing (2)
interface/src/components/CortexChatPanel.tsxinterface/src/components/settings/CompositionSection.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- interface/src/components/settings/CompositionSection.tsx
Comment on lines
+216
to
+219
| if (prefs.enterToSubmit) { | ||
| if (event.shiftKey) return; | ||
| event.preventDefault(); | ||
| if (canSend) onSubmit(); |
Contributor
There was a problem hiding this comment.
Alt+Enter incorrectly submits in Enter-to-submit mode.
Line 217 only exempts Shift+Enter, so Alt+Enter currently submits. That conflicts with the documented mode-A behavior where Shift/Option+Enter should insert a newline.
Suggested patch
if (prefs.enterToSubmit) {
- if (event.shiftKey) return;
+ if (event.shiftKey || event.altKey) return;
event.preventDefault();
if (canSend) onSubmit();
} else if (hasSubmitModifier) {📝 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.
Suggested change
| if (prefs.enterToSubmit) { | |
| if (event.shiftKey) return; | |
| event.preventDefault(); | |
| if (canSend) onSubmit(); | |
| if (prefs.enterToSubmit) { | |
| if (event.shiftKey || event.altKey) return; | |
| event.preventDefault(); | |
| if (canSend) onSubmit(); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@interface/src/components/CortexChatPanel.tsx` around lines 216 - 219, The
Enter-to-submit branch inside the key handler (where prefs.enterToSubmit is
checked) only ignores Shift+Enter but not Alt/Option+Enter, so Alt+Enter still
submits; update the condition in the handler (the block referencing
prefs.enterToSubmit and canSend/onSubmit) to also return when event.altKey
(Option on macOS) is true (e.g., if (event.shiftKey || event.altKey) return;) so
Shift/Option+Enter inserts a newline instead of submitting.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a user-level preference for how the Enter key behaves in the chat composer:
Persists via `localStorage` in a new `useChatInputPrefs` hook and is surfaced through a new Settings → Composition section. The placeholder text updates to hint at the submit shortcut when in modifier-submit mode.
Closes #599 (auto-expanding textarea, also mentioned in that issue, already exists in `CortexChatPanel`/`ChatComposer` so no change was needed for that item).
Where it's wired
Dependency
Requires the new `enterToSubmit` prop on `@spacedrive/ai`'s `ChatComposer`, added in:
That PR must be merged and a new `@spacedrive/ai` release published before this PR can be merged. The `interface/package.json` dependency on `@spacedrive/ai` (currently `^0.2.3`) will need a bump in a follow-up commit on this branch once the new version is published.
Test plan