Users can submit messages with the Enter key

Forcing users to mouse over to a send button for every message is both slow and jarring — it breaks the typing flow that everyone has been trained on by every messaging product in existence. Keyboard power users will bounce off a chat interface that requires a click per submit, and on tablet and laptop users the friction accumulates across hundreds of messages per session. This also affects accessibility: users who rely on keyboard-only navigation per WCAG 2.2 SC 2.1.1 (Keyboard) must have a keyboard submit path.

In src/components/chat/ChatInput.tsx, add an onKeyDown handler that submits on Enter (without Shift), prevents the default newline, guards against empty input and in-flight generation, and reserves Shift+Enter for newline. Surface the shortcut with a visible hint near the input.

onKeyDown={(e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    if (!isLoading && input.trim()) handleSubmit(e);
  }
}}

• ID: ai-chat-visibility.input-and-history.keyboard-submit

• Severity: high

• What to look for: Find the onKeyDown handler on the message input. Quote the actual key check logic if found (e.g., quote the e.key === 'Enter' && !e.shiftKey condition). Verify that pressing Enter (without Shift) submits the form. Check that the handler calls e.preventDefault() to prevent a newline being added on submit. Confirm that pressing Enter while isLoading is true does not send a duplicate message.

• Pass criteria: Pressing Enter submits the message. Pressing Shift+Enter adds a newline. The handler prevents default form behavior on Enter to avoid newline insertion at submit time. The handler must also guard against submitting empty messages (at least 1 character required) or submitting while loading. Count all keyboard event handlers on the input to verify coverage.

• Fail criteria: Enter only adds a newline with no submit shortcut at all, or Enter is entirely ignored. Users can only submit via mouse click on the send button.

• Skip (N/A) when: The interface uses Ctrl+Enter or Cmd+Enter as the submit shortcut and this is clearly communicated to users. Signal: a visible keyboard shortcut hint shows the alternative submit key.

• Detail on fail: "No onKeyDown handler found on message input — Enter key does not submit; button click required for every message"

• Remediation: In src/components/chat/ChatInput.tsx, add an onKeyDown handler:

  onKeyDown={(e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      if (!isLoading && input.trim()) handleSubmit(e);
    }
  }}
  

  Show a visible hint near the input so users know the keyboard behavior.

• Cross-reference: For a deeper analysis of keyboard accessibility in interactive components, the Accessibility Fundamentals Audit covers keyboard navigation in detail.