onSelect(option.id)}
@@ -81,7 +85,10 @@
aliases={option.aliases}
class="flex-1"
{hideOrgName}
+ {modalities}
modelId={option.model}
+ showRawTooltip
+ {supportsThinking}
tags={option.tags}
/>
diff --git a/tools/ui/src/lib/components/app/models/utils.ts b/tools/ui/src/lib/components/app/models/utils.ts
index b78e7085b70..35bfb58a257 100644
--- a/tools/ui/src/lib/components/app/models/utils.ts
+++ b/tools/ui/src/lib/components/app/models/utils.ts
@@ -1,3 +1,4 @@
+import { ModelModality } from '$lib/enums';
import type { ModelOption } from '$lib/types/models';
import { SvelteMap } from 'svelte/reactivity';
@@ -17,6 +18,23 @@ export interface GroupedModelOptions {
available: OrgGroup[];
}
+function matchesModality(option: ModelOption, term: string): boolean {
+ const modalities = option.modalities;
+
+ if (!modalities) return false;
+
+ switch (term) {
+ case ModelModality.VISION.toLowerCase():
+ return modalities.vision;
+ case ModelModality.AUDIO.toLowerCase():
+ return modalities.audio;
+ case ModelModality.VIDEO.toLowerCase():
+ return modalities.video;
+ default:
+ return false;
+ }
+}
+
export function filterModelOptions(options: ModelOption[], searchTerm: string): ModelOption[] {
const term = searchTerm.trim().toLowerCase();
@@ -27,7 +45,8 @@ export function filterModelOptions(options: ModelOption[], searchTerm: string):
option.model.toLowerCase().includes(term) ||
option.name?.toLowerCase().includes(term) ||
option.aliases?.some((alias: string) => alias.toLowerCase().includes(term)) ||
- option.tags?.some((tag: string) => tag.toLowerCase().includes(term))
+ option.tags?.some((tag: string) => tag.toLowerCase().includes(term)) ||
+ matchesModality(option, term)
);
}
diff --git a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
index dfe55b5e290..8bf12279e3c 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
@@ -5,6 +5,7 @@
import {
ActionIcon,
DialogConversationRename,
+ DialogSettingsChat,
Logo,
SidebarNavigationActions,
SidebarNavigationConversationList
@@ -91,6 +92,7 @@
let selectedIds = new SvelteSet
();
let renameDialogOpen = $state(false);
+ let settingsDialogOpen = $state(false);
let renameTargetConversationId = $state(null);
let renameDraft = $state('');
let renameOriginalTitle = $state('');
@@ -308,7 +310,7 @@
-{#if innerWidth > 768 || (!page.url.hash.includes(ROUTES.SETTINGS) && !page.url.hash.includes(ROUTES.MCP_SERVERS) && !page.url.hash.includes(ROUTES.SEARCH))}
+{#if innerWidth > 768 || !page.url.hash.includes(ROUTES.SEARCH)}