refine model picker (#87)

This commit is contained in:
Will Chen
2025-05-05 16:03:36 -07:00
committed by GitHub
parent d0c410859d
commit a4d3e04996

View File

@@ -61,14 +61,16 @@ export function ModelPicker({
const getModelDisplayName = () => { const getModelDisplayName = () => {
if (selectedModel.provider === "ollama") { if (selectedModel.provider === "ollama") {
return ( return (
ollamaModels.find((model: LocalModel) => model.modelName === selectedModel.name) ollamaModels.find(
?.displayName || selectedModel.name (model: LocalModel) => model.modelName === selectedModel.name
)?.displayName || selectedModel.name
); );
} }
if (selectedModel.provider === "lmstudio") { if (selectedModel.provider === "lmstudio") {
return ( return (
lmStudioModels.find((model: LocalModel) => model.modelName === selectedModel.name) lmStudioModels.find(
?.displayName || selectedModel.name // Fallback to path if not found (model: LocalModel) => model.modelName === selectedModel.name
)?.displayName || selectedModel.name // Fallback to path if not found
); );
} }
@@ -92,8 +94,10 @@ export function ModelPicker({
); );
// Determine availability of local models // Determine availability of local models
const hasOllamaModels = !ollamaLoading && !ollamaError && ollamaModels.length > 0; const hasOllamaModels =
const hasLMStudioModels = !lmStudioLoading && !lmStudioError && lmStudioModels.length > 0; !ollamaLoading && !ollamaError && ollamaModels.length > 0;
const hasLMStudioModels =
!lmStudioLoading && !lmStudioError && lmStudioModels.length > 0;
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen}> <DropdownMenu open={open} onOpenChange={setOpen}>
@@ -110,10 +114,11 @@ export function ModelPicker({
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-64" align="start"> {/* Increased width slightly */} <DropdownMenuContent className="w-64" align="start">
{" "}
{/* Increased width slightly */}
<DropdownMenuLabel>Cloud Models</DropdownMenuLabel> <DropdownMenuLabel>Cloud Models</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
{/* Cloud models */} {/* Cloud models */}
{cloudModels.map((model) => ( {cloudModels.map((model) => (
<Tooltip key={`${model.provider}-${model.name}`}> <Tooltip key={`${model.provider}-${model.name}`}>
@@ -151,9 +156,18 @@ export function ModelPicker({
<TooltipContent side="right">{model.description}</TooltipContent> <TooltipContent side="right">{model.description}</TooltipContent>
</Tooltip> </Tooltip>
))} ))}
<DropdownMenuSeparator /> <DropdownMenuSeparator />
{/* Local Models Parent SubMenu */}
<DropdownMenuSub>
<DropdownMenuSubTrigger className="w-full font-normal">
<div className="flex flex-col items-start">
<span>Local models</span>
<span className="text-xs text-muted-foreground">
LM Studio, Ollama
</span>
</div>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="w-56">
{/* Ollama Models SubMenu */} {/* Ollama Models SubMenu */}
<DropdownMenuSub> <DropdownMenuSub>
<DropdownMenuSubTrigger <DropdownMenuSubTrigger
@@ -161,16 +175,14 @@ export function ModelPicker({
className="w-full font-normal" className="w-full font-normal"
> >
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
<span>Local models (Ollama)</span> <span>Ollama</span>
{ollamaLoading ? ( {ollamaLoading ? (
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
Loading... Loading...
</span> </span>
) : ollamaError ? ( ) : ollamaError ? (
<span className="text-xs text-red-500"> <span className="text-xs text-red-500">Error loading</span>
Error loading ) : !hasOllamaModels ? (
</span>
): !hasOllamaModels ? (
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
None available None available
</span> </span>
@@ -244,15 +256,13 @@ export function ModelPicker({
className="w-full font-normal" className="w-full font-normal"
> >
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
<span>Local models (LM Studio)</span> <span>LM Studio</span>
{lmStudioLoading ? ( {lmStudioLoading ? (
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
Loading... Loading...
</span> </span>
) : lmStudioError ? ( ) : lmStudioError ? (
<span className="text-xs text-red-500"> <span className="text-xs text-red-500">Error loading</span>
Error loading
</span>
) : !hasLMStudioModels ? ( ) : !hasLMStudioModels ? (
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
None available None available
@@ -321,7 +331,8 @@ export function ModelPicker({
)} )}
</DropdownMenuSubContent> </DropdownMenuSubContent>
</DropdownMenuSub> </DropdownMenuSub>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );