kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix model picker UX (#145)

Browse Source
This commit is contained in:
Will Chen
2025-05-12 22:41:53 -07:00
committed by GitHub
parent d1027622b4
commit 843a097e82
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ModelPicker.tsx
View File

@@ -22,6 +22,7 @@ import { useLocalLMSModels } from "@/hooks/useLMStudioModels";
import { useLanguageModelsByProviders } from "@/hooks/useLanguageModelsByProviders"; import { useLanguageModelsByProviders } from "@/hooks/useLanguageModelsByProviders";
import { ChevronDown } from "lucide-react"; import { ChevronDown } from "lucide-react";
import { LocalModel } from "@/ipc/ipc_types"; import { LocalModel } from "@/ipc/ipc_types";
import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
interface ModelPickerProps { interface ModelPickerProps {
selectedModel: LargeLanguageModel; selectedModel: LargeLanguageModel;
onModelSelect: (model: LargeLanguageModel) => void; onModelSelect: (model: LargeLanguageModel) => void;
@@ -34,9 +35,13 @@ export function ModelPicker({
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
// Cloud models from providers // Cloud models from providers
const { data: modelsByProviders, isLoading: providersLoading } = const { data: modelsByProviders, isLoading: modelsByProvidersLoading } =
useLanguageModelsByProviders(); useLanguageModelsByProviders();
const { data: providers, isLoading: providersLoading } =
useLanguageModelProviders();
const loading = modelsByProvidersLoading || providersLoading;
// Ollama Models Hook // Ollama Models Hook
const { const {
models: ollamaModels, models: ollamaModels,
@@ -96,7 +101,7 @@ export function ModelPicker({
// Get auto provider models (if any) // Get auto provider models (if any)
const autoModels = const autoModels =
!providersLoading && modelsByProviders && modelsByProviders["auto"] !loading && modelsByProviders && modelsByProviders["auto"]
? modelsByProviders["auto"] ? modelsByProviders["auto"]
: []; : [];
@@ -126,7 +131,7 @@ export function ModelPicker({
<DropdownMenuSeparator /> <DropdownMenuSeparator />
{/* Cloud models - loading state */} {/* Cloud models - loading state */}
{providersLoading ? ( {loading ? (
<div className="text-xs text-center py-2 text-muted-foreground"> <div className="text-xs text-center py-2 text-muted-foreground">
Loading models... Loading models...
</div> </div>
@@ -190,18 +195,23 @@ export function ModelPicker({
// Skip auto provider as it's already handled // Skip auto provider as it's already handled
if (providerId === "auto") return null; if (providerId === "auto") return null;
const provider = providers?.find((p) => p.id === providerId);
if (models.length === 0) return null;
return ( return (
<DropdownMenuSub key={providerId}> <DropdownMenuSub key={providerId}>
<DropdownMenuSubTrigger className="w-full font-normal"> <DropdownMenuSubTrigger className="w-full font-normal">
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
<span>{providerId}</span> <span>{provider?.name}</span>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
{models.length} models {models.length} models
</span> </span>
</div> </div>
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuSubContent className="w-56"> <DropdownMenuSubContent className="w-56">
<DropdownMenuLabel>{providerId} Models</DropdownMenuLabel> <DropdownMenuLabel>
{provider?.name} Models
</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
{models.map((model) => ( {models.map((model) => (
<Tooltip key={`${providerId}-${model.apiName}`}> <Tooltip key={`${providerId}-${model.apiName}`}>