Skip to content

B
bit-pm
Unverified 提交 a4d3e049 authored 作者: Will Chen's avatar Will Chen 提交者： GitHub
浏览文件
操作

refine model picker (#87)

上级 d0c41085
隐藏空白字符变更
内嵌 并排
正在显示 包含 177 行增加 和 166 行删除
src/components/ModelPicker.tsx
浏览文件 @ a4d3e049
...@@ -61,14 +61,16 @@ export function ModelPicker({ ...@@ -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({ ...@@ -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({ ...@@ -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,177 +156,183 @@ export function ModelPicker({ ...@@ -151,177 +156,183 @@ export function ModelPicker({
<TooltipContent side="right">{model.description}</TooltipContent> <TooltipContent side="right">{model.description}</TooltipContent>
</Tooltip> </Tooltip>
))} ))}
<DropdownMenuSeparator /> <DropdownMenuSeparator />
{/* Local Models Parent SubMenu */}
{/* Ollama Models SubMenu */}
<DropdownMenuSub> <DropdownMenuSub>
<DropdownMenuSubTrigger <DropdownMenuSubTrigger className="w-full font-normal">
disabled={ollamaLoading && !hasOllamaModels} // Disable if loading and no models yet
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>Local models</span>
{ollamaLoading ? ( <span className="text-xs text-muted-foreground">
<span className="text-xs text-muted-foreground"> LM Studio, Ollama
Loading... </span>
</span>
) : ollamaError ? (
<span className="text-xs text-red-500">
Error loading
</span>
): !hasOllamaModels ? (
<span className="text-xs text-muted-foreground">
None available
</span>
) : (
<span className="text-xs text-muted-foreground">
{ollamaModels.length} models
</span>
)}
</div> </div>
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuSubContent className="w-56"> <DropdownMenuSubContent className="w-56">
<DropdownMenuLabel>Ollama Models</DropdownMenuLabel> {/* Ollama Models SubMenu */}
<DropdownMenuSeparator /> <DropdownMenuSub>
<DropdownMenuSubTrigger
{ollamaLoading && ollamaModels.length === 0 ? ( // Show loading only if no models are loaded yet disabled={ollamaLoading && !hasOllamaModels} // Disable if loading and no models yet
<div className="text-xs text-center py-2 text-muted-foreground"> className="w-full font-normal"
Loading models... >
</div> <div className="flex flex-col items-start">
) : ollamaError ? ( <span>Ollama</span>
<div className="px-2 py-1.5 text-sm text-red-600"> {ollamaLoading ? (
<div className="flex flex-col"> <span className="text-xs text-muted-foreground">
<span>Error loading models</span> Loading...
<span className="text-xs text-muted-foreground">
Is Ollama running?
</span>
</div>
</div>
) : !hasOllamaModels ? (
<div className="px-2 py-1.5 text-sm">
<div className="flex flex-col">
<span>No local models found</span>
<span className="text-xs text-muted-foreground">
Ensure Ollama is running and models are pulled.
</span>
</div>
</div>
) : (
ollamaModels.map((model: LocalModel) => (
<DropdownMenuItem
key={`ollama-${model.modelName}`}
className={
selectedModel.provider === "ollama" &&
selectedModel.name === model.modelName
? "bg-secondary"
: ""
}
onClick={() => {
onModelSelect({
name: model.modelName,
provider: "ollama",
});
setOpen(false);
}}
>
<div className="flex flex-col">
<span>{model.displayName}</span>
<span className="text-xs text-muted-foreground truncate">
{model.modelName}
</span> </span>
</div> ) : ollamaError ? (
</DropdownMenuItem> <span className="text-xs text-red-500">Error loading</span>
)) ) : !hasOllamaModels ? (
)} <span className="text-xs text-muted-foreground">
</DropdownMenuSubContent> None available
</DropdownMenuSub> </span>
) : (
<span className="text-xs text-muted-foreground">
{ollamaModels.length} models
</span>
)}
</div>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="w-56">
<DropdownMenuLabel>Ollama Models</DropdownMenuLabel>
<DropdownMenuSeparator />
{/* LM Studio Models SubMenu */} {ollamaLoading && ollamaModels.length === 0 ? ( // Show loading only if no models are loaded yet
<DropdownMenuSub> <div className="text-xs text-center py-2 text-muted-foreground">
<DropdownMenuSubTrigger Loading models...
disabled={lmStudioLoading && !hasLMStudioModels} // Disable if loading and no models yet </div>
className="w-full font-normal" ) : ollamaError ? (
> <div className="px-2 py-1.5 text-sm text-red-600">
<div className="flex flex-col items-start"> <div className="flex flex-col">
<span>Local models (LM Studio)</span> <span>Error loading models</span>
{lmStudioLoading ? ( <span className="text-xs text-muted-foreground">
<span className="text-xs text-muted-foreground"> Is Ollama running?
Loading... </span>
</span> </div>
) : lmStudioError ? ( </div>
<span className="text-xs text-red-500"> ) : !hasOllamaModels ? (
Error loading <div className="px-2 py-1.5 text-sm">
</span> <div className="flex flex-col">
) : !hasLMStudioModels ? ( <span>No local models found</span>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
None available Ensure Ollama is running and models are pulled.
</span> </span>
) : ( </div>
<span className="text-xs text-muted-foreground"> </div>
{lmStudioModels.length} models ) : (
</span> ollamaModels.map((model: LocalModel) => (
)} <DropdownMenuItem
</div> key={`ollama-${model.modelName}`}
</DropdownMenuSubTrigger> className={
<DropdownMenuSubContent className="w-56"> selectedModel.provider === "ollama" &&
<DropdownMenuLabel>LM Studio Models</DropdownMenuLabel> selectedModel.name === model.modelName
<DropdownMenuSeparator /> ? "bg-secondary"
: ""
}
onClick={() => {
onModelSelect({
name: model.modelName,
provider: "ollama",
});
setOpen(false);
}}
>
<div className="flex flex-col">
<span>{model.displayName}</span>
<span className="text-xs text-muted-foreground truncate">
{model.modelName}
</span>
</div>
</DropdownMenuItem>
))
)}
</DropdownMenuSubContent>
</DropdownMenuSub>
{lmStudioLoading && lmStudioModels.length === 0 ? ( // Show loading only if no models are loaded yet {/* LM Studio Models SubMenu */}
<div className="text-xs text-center py-2 text-muted-foreground"> <DropdownMenuSub>
Loading models... <DropdownMenuSubTrigger
</div> disabled={lmStudioLoading && !hasLMStudioModels} // Disable if loading and no models yet
) : lmStudioError ? ( className="w-full font-normal"
<div className="px-2 py-1.5 text-sm text-red-600"> >
<div className="flex flex-col"> <div className="flex flex-col items-start">
<span>Error loading models</span> <span>LM Studio</span>
<span className="text-xs text-muted-foreground"> {lmStudioLoading ? (
{lmStudioError.message} {/* Display specific error */} <span className="text-xs text-muted-foreground">
</span> Loading...
</div>
</div>
) : !hasLMStudioModels ? (
<div className="px-2 py-1.5 text-sm">
<div className="flex flex-col">
<span>No loaded models found</span>
<span className="text-xs text-muted-foreground">
Ensure LM Studio is running and models are loaded.
</span>
</div>
</div>
) : (
lmStudioModels.map((model: LocalModel) => (
<DropdownMenuItem
key={`lmstudio-${model.modelName}`}
className={
selectedModel.provider === "lmstudio" &&
selectedModel.name === model.modelName
? "bg-secondary"
: ""
}
onClick={() => {
onModelSelect({
name: model.modelName,
provider: "lmstudio",
});
setOpen(false);
}}
>
<div className="flex flex-col">
{/* Display the user-friendly name */}
<span>{model.displayName}</span>
{/* Show the path as secondary info */}
<span className="text-xs text-muted-foreground truncate">
{model.modelName}
</span> </span>
) : lmStudioError ? (
<span className="text-xs text-red-500">Error loading</span>
) : !hasLMStudioModels ? (
<span className="text-xs text-muted-foreground">
None available
</span>
) : (
<span className="text-xs text-muted-foreground">
{lmStudioModels.length} models
</span>
)}
</div>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="w-56">
<DropdownMenuLabel>LM Studio Models</DropdownMenuLabel>
<DropdownMenuSeparator />
{lmStudioLoading && lmStudioModels.length === 0 ? ( // Show loading only if no models are loaded yet
<div className="text-xs text-center py-2 text-muted-foreground">
Loading models...
</div>
) : lmStudioError ? (
<div className="px-2 py-1.5 text-sm text-red-600">
<div className="flex flex-col">
<span>Error loading models</span>
<span className="text-xs text-muted-foreground">
{lmStudioError.message} {/* Display specific error */}
</span>
</div>
</div> </div>
</DropdownMenuItem> ) : !hasLMStudioModels ? (
)) <div className="px-2 py-1.5 text-sm">
)} <div className="flex flex-col">
<span>No loaded models found</span>
<span className="text-xs text-muted-foreground">
Ensure LM Studio is running and models are loaded.
</span>
</div>
</div>
) : (
lmStudioModels.map((model: LocalModel) => (
<DropdownMenuItem
key={`lmstudio-${model.modelName}`}
className={
selectedModel.provider === "lmstudio" &&
selectedModel.name === model.modelName
? "bg-secondary"
: ""
}
onClick={() => {
onModelSelect({
name: model.modelName,
provider: "lmstudio",
});
setOpen(false);
}}
>
<div className="flex flex-col">
{/* Display the user-friendly name */}
<span>{model.displayName}</span>
{/* Show the path as secondary info */}
<span className="text-xs text-muted-foreground truncate">
{model.modelName}
</span>
</div>
</DropdownMenuItem>
))
)}
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuSubContent> </DropdownMenuSubContent>
</DropdownMenuSub> </DropdownMenuSub>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论