void ms.showBackendModels(backend.id)}
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte
index 8cd58135b8..f5886efa1c 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte
@@ -20,7 +20,6 @@
activeId: string | null;
sectionHeaderClass?: string;
onSelect: (modelId: string) => void;
- onInfoClick: (modelName: string) => void;
renderOption?: import('svelte').Snippet<[ModelItem, boolean]>;
/** Favorite models of every backend, listed in their own section. */
favorites?: ModelItem[];
@@ -40,7 +39,6 @@
favorites = [],
groups,
loaded = [],
- onInfoClick,
onProviderBack,
onProviderOpen,
onSelect,
@@ -114,7 +112,6 @@
{isFav}
isHighlighted={false}
{isSelected}
- {onInfoClick}
onKeyDown={() => {}}
onMouseEnter={() => {}}
{onSelect}
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte
index 91b4857ce8..c7828875a1 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte
@@ -17,7 +17,6 @@
onSelect: (modelId: string) => void;
onMouseEnter: () => void;
onKeyDown: (e: KeyboardEvent) => void;
- onInfoClick?: (modelName: string) => void;
/** Show the base model's org as the main avatar and the repo (quant) org as the corner badge; resolves the base org lazily via HF. */
showBaseModelAvatar?: boolean;
}
@@ -27,7 +26,6 @@
isFav,
isHighlighted,
isSelected,
- onInfoClick,
onKeyDown,
onMouseEnter,
onSelect,
@@ -103,7 +101,7 @@
/>
-
+
-{#if ms.showModelDialog}
- ms.setShowModelDialog(v)}
- open={ms.showModelDialog}
- />
-{/if}
-
void ms.showBackendModels(backend.id)}
diff --git a/tools/ui/src/lib/hooks/use-models-selector.svelte.ts b/tools/ui/src/lib/hooks/use-models-selector.svelte.ts
index ba92f8b818..ef8a5502c2 100644
--- a/tools/ui/src/lib/hooks/use-models-selector.svelte.ts
+++ b/tools/ui/src/lib/hooks/use-models-selector.svelte.ts
@@ -10,7 +10,7 @@ import {
LOCAL_BACKEND_ID,
REMOTE_PROVIDER_MODEL_LIMIT
} from '$lib/constants';
-import { backendsModelsStore, backendsStore, modelsStore, serverStore } from '$lib/stores';
+import { backendsModelsStore, backendsStore, modelsStore, serverStore, uiStore } from '$lib/stores';
import type { ModelOption } from '$lib/types/models';
import { getBackend } from '$lib/utils/api-base';
import { getBackendCapabilities } from '$lib/utils/backend';
@@ -53,14 +53,10 @@ export interface UseModelsSelectorReturn {
readonly groupedFilteredOptions: ReturnType;
readonly isLoadingModel: boolean;
readonly searchTerm: string;
- readonly showModelDialog: boolean;
- readonly infoModelId: string | null;
closeProvider(): void;
openProvider(backendId: string): void;
setSearchTerm(value: string): void;
showBackendModels(backendId: string): Promise;
- setShowModelDialog(value: boolean): void;
- handleInfoClick(modelName: string): void;
handleSelect(modelId: string): Promise;
handleOpenChange(open: boolean): void;
isFavorite(model: string): boolean;
@@ -124,8 +120,6 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
let isLoadingModel = $state(false);
let searchTerm = $state('');
- let showModelDialog = $state(false);
- let infoModelId = $state(null);
const visibleOptions = $derived(allOptions.filter((option) => !modelsStore.isHidden(option.id)));
const filteredOptions = $derived(filterModelOptions(options, searchTerm));
@@ -196,11 +190,6 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
);
const emptyMessage = $derived(searchTerm ? 'No models found.' : 'No models yet.');
- function handleInfoClick(modelName: string) {
- infoModelId = modelName;
- showModelDialog = true;
- }
-
onMount(() => {
modelsStore.fetch().catch((error) => {
console.error('Unable to load models:', error);
@@ -210,10 +199,10 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
function handleOpenChange(open: boolean) {
if (loading || updating) return;
- // a single-model llama.cpp server with no other backend has no list to
- // show, so the trigger opens the model info dialog instead
+ // a single-model llama.cpp server with no other backend has no list to show,
+ // so the trigger opens the manager, which holds the one model's configuration
if (!isMultiModel) {
- showModelDialog = open;
+ if (open) uiStore.openModelsManager();
return;
}
@@ -362,16 +351,10 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
return groupedFilteredOptions;
},
- handleInfoClick,
-
handleOpenChange,
handleSelect,
- get infoModelId() {
- return infoModelId;
- },
-
get isCurrentModelInCache() {
return isCurrentModelInCache;
},
@@ -430,16 +413,8 @@ export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSele
searchTerm = value;
},
- setShowModelDialog(value: boolean) {
- showModelDialog = value;
- },
-
showBackendModels,
- get showModelDialog() {
- return showModelDialog;
- },
-
get updating() {
return updating;
}
diff --git a/tools/ui/tests/stories/ModelsSelector.stories.svelte b/tools/ui/tests/stories/ModelsSelector.stories.svelte
index 800d185f53..263d1ed010 100644
--- a/tools/ui/tests/stories/ModelsSelector.stories.svelte
+++ b/tools/ui/tests/stories/ModelsSelector.stories.svelte
@@ -126,7 +126,6 @@
currentModel={selectedModel}
favorites={favoriteModels}
groups={groupedOptions}
- onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
onSelect={handleSelect}
/>
@@ -142,7 +141,6 @@
loaded: [loadedModels[0]],
providers: []
}}
- onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
onSelect={handleSelect}
/>
@@ -159,7 +157,6 @@
loaded: [],
providers: []
}}
- onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
onSelect={handleSelect}
/>