xiaohei/socaichat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(input): replace model selector buttons with Select dropdown

Browse Source 
Replace the three pill buttons (Auto/Flash/Pro) in GeminiInput with a
single shadcn/ui Select component. Selection logic and onSelectedModelChange
callback are unchanged; only the UI widget is swapped.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gongzhiyong
2026-04-08 23:47:35 +08:00
co-authored by Claude Sonnet 4.6
parent c54e2be5c4
commit fe8c361127
1 changed files with 22 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/gemini/GeminiInput.tsx
+22 -36
View File
@@ -17,6 +17,13 @@ import {
} from "lucide-react";
import { cn } from "@/lib/utils";
import { uploadAttachment, type AttachmentData } from "@/lib/api";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
interface Tool {
id: string;
@@ -295,43 +302,22 @@ export function GeminiInput({
</div>
{/* Bottom row: Model selector */}
<div className="flex items-center justify-end px-4 pb-3 pt-0 gap-2">
<button
onClick={() => onSelectedModelChange("flash")}
className={cn(
"px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer",
selectedModel === "flash"
? "bg-[var(--gem-blue)] text-white"
: "bg-[var(--gem-surface-2)] text-[var(--gem-text-muted)] hover:bg-[var(--gem-surface-3)] hover:text-[var(--gem-text)]"
)}
aria-pressed={selectedModel === "flash"}
<div className="flex items-center justify-end px-4 pb-3 pt-0">
<Select
value={selectedModel}
onValueChange={(val) =>
onSelectedModelChange(val as "flash" | "auto" | "pro")
}
>
Flash
</button>
<button
onClick={() => onSelectedModelChange("auto")}
className={cn(
"px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer",
selectedModel === "auto"
? "bg-[var(--gem-blue)] text-white"
: "bg-[var(--gem-surface-2)] text-[var(--gem-text-muted)] hover:bg-[var(--gem-surface-3)] hover:text-[var(--gem-text)]"
)}
aria-pressed={selectedModel === "auto"}
>
Auto
</button>
<button
onClick={() => onSelectedModelChange("pro")}
className={cn(
"px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer",
selectedModel === "pro"
? "bg-[var(--gem-purple)] text-white"
: "bg-[var(--gem-surface-2)] text-[var(--gem-text-muted)] hover:bg-[var(--gem-surface-3)] hover:text-[var(--gem-text)]"
)}
aria-pressed={selectedModel === "pro"}
>
Pro
</button>
<SelectTrigger className="h-7 w-24 rounded-full border border-[var(--gem-border)] bg-[var(--gem-surface-2)] text-[var(--gem-text-muted)] text-xs px-3 py-0 focus:ring-0 focus:ring-offset-0 hover:bg-[var(--gem-surface-3)] hover:text-[var(--gem-text)] transition-colors duration-150 cursor-pointer [&>svg]:opacity-60">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-[var(--gem-surface)] border-[var(--gem-border)] text-[var(--gem-text)] text-xs rounded-xl min-w-[6rem]">
<SelectItem value="auto" className="text-xs cursor-pointer focus:bg-[var(--gem-surface-2)]">Auto</SelectItem>
<SelectItem value="flash" className="text-xs cursor-pointer focus:bg-[var(--gem-surface-2)]">Flash</SelectItem>
<SelectItem value="pro" className="text-xs cursor-pointer focus:bg-[var(--gem-surface-2)]">Pro</SelectItem>
</SelectContent>
</Select>
</div>
{/* Tools panel (collapsible, below input) */}