Skip to content

🤖 Refine chat controls spacing and visibility #416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+49 −43
Open

🤖 Refine chat controls spacing and visibility #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
694a95d
🤖 Refine chat controls spacing and visibility
ammar-agent Oct 24, 2025
4a3fb8f
🤖 Increase mode toggle hide breakpoint to 800px
ammar-agent Oct 24, 2025
4d19903
🤖 Replace flex with CSS Grid for chat controls layout
ammar-agent Oct 24, 2025
11f0090
🤖 Fix formatting and linting issues
ammar-agent Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 46 additions & 40 deletions src/components/ChatInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -747,49 +747,55 @@ export const ChatInput: React.FC<ChatInputProps> = ({
Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel)
</div>
)}
<div className="flex flex-wrap items-center gap-x-3 gap-y-2">
{/* Model Selector - always visible */}
<div className="flex items-center" data-component="ModelSelectorGroup">
<ModelSelector
ref={modelSelectorRef}
value={preferredModel}
onChange={setPreferredModel}
recentModels={recentModels}
onComplete={() => inputRef.current?.focus()}
/>
<TooltipWrapper inline>
<HelpIndicator>?</HelpIndicator>
<Tooltip className="tooltip" align="left" width="wide">
<strong>Click to edit</strong> or use {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
<br />
<br />
<strong>Abbreviations:</strong>
<br />• <code>/model opus</code> - Claude Opus 4.1
<br />• <code>/model sonnet</code> - Claude Sonnet 4.5
<br />
<br />
<strong>Full format:</strong>
<br />
<code>/model provider:model-name</code>
<br />
(e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
</Tooltip>
</TooltipWrapper>
</div>
<div className="grid grid-cols-[1fr_auto] items-center gap-3">
{/* Left column: Model controls */}
<div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2">
{/* Model Selector - always visible */}
<div className="flex items-center gap-1.5" data-component="ModelSelectorGroup">
<ModelSelector
ref={modelSelectorRef}
value={preferredModel}
onChange={setPreferredModel}
recentModels={recentModels}
onComplete={() => inputRef.current?.focus()}
/>
<TooltipWrapper inline>
<HelpIndicator>?</HelpIndicator>
<Tooltip className="tooltip" align="left" width="wide">
<strong>Click to edit</strong> or use{" "}
{formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
<br />
<br />
<strong>Abbreviations:</strong>
<br />• <code>/model opus</code> - Claude Opus 4.1
<br />• <code>/model sonnet</code> - Claude Sonnet 4.5
<br />
<br />
<strong>Full format:</strong>
<br />
<code>/model provider:model-name</code>
<br />
(e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
</Tooltip>
</TooltipWrapper>
</div>

{/* Thinking Slider - hide on small viewports */}
<div
className="max-@[600px]:hidden flex items-center"
data-component="ThinkingSliderGroup"
>
<ThinkingSliderComponent modelString={preferredModel} />
</div>
{/* Thinking Slider - hide on small viewports */}
<div
className="max-@[600px]:hidden flex items-center"
data-component="ThinkingSliderGroup"
>
<ThinkingSliderComponent modelString={preferredModel} />
</div>

{/* Context 1M Checkbox - hide on smaller viewports */}
<div className="max-@[500px]:hidden flex items-center" data-component="Context1MGroup">
<Context1MCheckbox modelString={preferredModel} />
{/* Context 1M Checkbox - hide on smaller viewports */}
<div className="max-@[500px]:hidden flex items-center" data-component="Context1MGroup">
<Context1MCheckbox modelString={preferredModel} />
</div>
</div>
<div className="max-@[700px]:hidden ml-auto flex items-center gap-1.5">

{/* Right column: Mode toggles */}
<div className="max-@[500px]:hidden flex items-center gap-1.5">
<div
className={cn(
"flex gap-0 bg-toggle-bg rounded",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Context1MCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
<div className="flex items-center gap-1.5">
<label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-white">
<input type="checkbox" checked={use1M} onChange={(e) => setUse1M(e.target.checked)} />
1M Context
1M
</label>
<TooltipWrapper inline>
<span className="text-muted flex cursor-help items-center text-[10px] leading-none">?</span>
Expand Down
4 changes: 2 additions & 2 deletions src/components/ThinkingSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS

return (
<TooltipWrapper>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<span
className="min-w-11 uppercase transition-all duration-200 select-none"
style={textStyle}
Expand Down Expand Up @@ -126,7 +126,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS

return (
<TooltipWrapper>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<input
type="range"
min="0"
Expand Down