Skip to main content

The send button is disabled while generation is in progress

ab-000144 · ai-chat-visibility.loading-and-streaming.input-disabled-during-generation
Severity: lowactive

Why it matters

An always-enabled send button during generation lets users submit multiple messages in rapid succession, producing race conditions where two in-flight completions interleave in the UI, one overwrites the other's state, or both consume tokens against the same conversation. This also hides the current app state from the user, who has no visual signal that a generation is already in progress and assumes their first click did not register.

Severity rationale

Low because the damage is mostly wasted tokens and occasional UI glitches rather than data loss or security impact.

Remediation

In src/components/chat/ChatInput.tsx, bind the button's disabled attribute to the loading state and add visible disabled styling (reduced opacity, not-allowed cursor) so the state change is obvious. Optionally disable the textarea itself during generation.

<Button type="submit" disabled={isLoading} className="disabled:opacity-50 disabled:cursor-not-allowed">
  Send
</Button>

Detection

  • ID: ai-chat-visibility.loading-and-streaming.input-disabled-during-generation

  • Severity: low

  • What to look for: Check the submit button of the message input form. While loading or generating, the send button should be disabled or replaced by a stop button. Check whether the button element has a disabled attribute conditional on loading state.

  • Pass criteria: The send button has disabled={isLoading} or equivalent. It is visually distinct in the disabled state (at least 50% reduced opacity, different cursor). Count all submit buttons and verify each is disabled during generation. Optionally, the input field is also disabled during generation.

  • Fail criteria: The send button is always enabled, allowing users to submit multiple messages during generation and potentially causing race conditions or duplicate messages.

  • Skip (N/A) when: The UI replaces the send button entirely with a stop button during generation (an acceptable alternative pattern that is covered by stop-generation-button).

  • Detail on fail: "Send button has no disabled state during generation — multiple submissions possible during active streaming"

  • Remediation: In your input component at src/components/chat/ChatInput.tsx, add the disabled state:

    <Button type="submit" disabled={isLoading} className="disabled:opacity-50 disabled:cursor-not-allowed">
  Send
</Button>

Taxons

user-experience

History