[eric] chat: restore the model-picker trigger (was inside the removed mode pill)

This commit is contained in:
ciregenz
2026-07-03 03:12:26 -07:00
parent 3dc15c6ed1
commit 3fe8599a22
2 changed files with 52 additions and 0 deletions
@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
import { useElementSelection } from '@/app/components/editor/ElementSelectionContext';
import { ClaudeTokens } from '@/shared/styles/claudeTokens';
import { ContextRing } from './ContextRing';
import { ModelControl } from './ModelControl';
import { ModelPickerMenu } from '../model-picker/ModelPickerMenu';
import { ThinkingLevelControl } from './ThinkingLevelControl';
import { ToolbarActions } from './ToolbarActions';
@@ -93,6 +94,13 @@ export const ChatInputToolbar: React.FC<Props> = (p) => {
pt: 0,
}}
>
<ModelControl
c={c}
setModelAnchor={setModelAnchor}
allModelFlat={allModelFlat}
model={model}
/>
<ModelPickerMenu
c={c}
menuPaperProps={menuPaperProps}
@@ -0,0 +1,44 @@
import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import { ClaudeTokens } from '@/shared/styles/claudeTokens';
import { useAppSelector } from '@/shared/hooks';
import { hasFreeTrialActive, hasModelConnected } from '@/app/components/Onboarding/steps/skipPredicates';
interface Props {
c: ClaudeTokens;
setModelAnchor: (el: HTMLElement | null) => void;
allModelFlat: Array<any>;
model: string;
}
// The model-name trigger that opens ModelPickerMenu. Lived inside ModeControl until modes were hidden from the UI; the picker needs its button regardless of modes.
export const ModelControl: React.FC<Props> = ({ c, setModelAnchor, allModelFlat, model }) => {
// On the free trial the model is fixed server-side, so there's nothing to pick: hide the control. The moment a real model is connected we show it again, even if trial state lingers (gate on !hasModelConnected, not just the trial flag).
const hideModelPicker = useAppSelector((s) => hasFreeTrialActive(s) && !hasModelConnected(s));
if (hideModelPicker) return null;
return (
<Box
onClick={(e) => setModelAnchor(e.currentTarget)}
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.25,
px: 0.75,
py: 0.25,
borderRadius: '6px',
cursor: 'pointer',
userSelect: 'none',
color: c.text.muted,
'&:hover': { bgcolor: 'rgba(0,0,0,0.04)' },
transition: 'background 0.15s',
}}
>
<Typography sx={{ fontSize: '0.82rem', fontWeight: 500, color: 'inherit', lineHeight: 1 }}>
{(() => { const m = allModelFlat.find((m) => m.value === model); return m ? m.label : model; })()}
</Typography>
<KeyboardArrowDownIcon sx={{ fontSize: 14, color: 'inherit', opacity: 0.7 }} />
</Box>
);
};