🤖 feat: responsive ChatInput controls with compact display #517
Conversation
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
Changes chat controls to use compact display on narrow viewports instead of hiding elements entirely: 1. **1M Context Label**: Changed from '1M Context' to just '1M' (always) 2. **Thinking Slider**: Slider hidden on narrow viewports (<550px), but text label remains visible and is always clickable to cycle through levels (off → low → medium → high → off) 3. **Mode Switch**: Shows both Exec/Plan buttons on wide viewports, shows only active mode as clickable toggle on narrow viewports (<550px) All controls remain functional at all viewport sizes. Compact versions use click-to-cycle pattern to switch between options. _Generated with `cmux`_
ammar-agent
force-pushed
the
chat-controls-responsive
branch
from
77b670d to
11f60ea
Compare
Changed from 'rounded' to 'rounded-sm' to match the regular toggle buttons and overall UI aesthetic. _Generated with `cmux`_
This comment was marked as outdated.
This comment was marked as outdated.
Removed redundant wrapper div around compact ToggleGroup. The button already has the correct styling applied via activeClassName. _Generated with `cmux`_
Applied Prettier formatting. _Generated with `cmux`_
Extracted MODE_OPTIONS constant and ModeHelpTooltip component to eliminate duplication between full and compact mode switch sections. _Generated with `cmux`_
ammar-agent
force-pushed
the
chat-controls-responsive
branch
from
d446ed5 to
bac3f09
Compare
ibetitsmike
pushed a commit
that referenced
this pull request
Nov 7, 2025
Changes chat controls to use compact display on narrow viewports instead of hiding elements entirely. ## Changes ### 1. **1M Context Label** - Changed from "1M Context" to just "1M" (always, not viewport dependent) - Reduces horizontal space usage while keeping meaning clear ### 2. **Thinking Slider** - Wide viewports (>550px): Full slider with visual feedback - Narrow viewports (≤550px): Compact clickable badge that cycles through levels (off → low → medium → high → off) - Badge maintains the same visual styling (color, glow) as the slider label - Tooltip explains click-to-cycle behavior ### 3. **Mode Switch** - Wide viewports (>550px): Shows both "Exec" and "Plan" buttons in toggle group - Narrow viewports (≤550px): Shows only the active mode as a clickable badge that cycles to the other mode - Maintains same color styling (exec mode = blue, plan mode = purple) ## Technical Implementation - Added `compact` prop to `ThinkingSliderComponent` and `ToggleGroup` components - Both full and compact versions are rendered in DOM, CSS handles show/hide with `max-[550px]:hidden` and `max-[550px]:flex` - Compact controls use click-to-cycle pattern for toggling between states - All controls remain fully functional at any viewport size ## Testing - ✅ `make typecheck` passes - ✅ `make lint` passes - ✅ `make test` passes (955 tests) - Verified responsive behavior at 400px, 500px, 550px, and 800px viewport widths _Generated with `cmux`_
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.
Changes chat controls to use compact display on narrow viewports instead of hiding elements entirely.
Changes
1. 1M Context Label
2. Thinking Slider
3. Mode Switch
Technical Implementation
compactprop toThinkingSliderComponentandToggleGroupcomponentsmax-[550px]:hiddenandmax-[550px]:flexTesting
make typecheckpassesmake lintpassesmake testpasses (955 tests)Generated with
cmux