feat: add better provider support, icons, regen, and a lot more
This commit is contained in:
@@ -1,79 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
|
||||
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
|
||||
import { schema } from '#triplit/schema';
|
||||
import type { Entity } from '@triplit/client';
|
||||
import type schema from '#triplit/schema';
|
||||
|
||||
const { setPage } = useSettings();
|
||||
const { allModels } = await useModels();
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: ModelWithProvider | null;
|
||||
providers: ProviderWithModels[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [model: ModelWithProvider | null];
|
||||
}>();
|
||||
|
||||
const isOpen = ref(false);
|
||||
const searchQuery = ref('');
|
||||
const dropdownRef = ref<HTMLDivElement | null>(null);
|
||||
const searchInputRef = ref<HTMLInputElement | null>(null);
|
||||
const selectedModel = defineModel<ModelWithProvider | null>();
|
||||
|
||||
const selectedModel = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value),
|
||||
});
|
||||
const dropdownRef = ref<HTMLDivElement | null>(null);
|
||||
const dropdownButton = ref<HTMLButtonElement | null>(null);
|
||||
const searchInputRef = ref<HTMLInputElement | null>(null);
|
||||
const dropdownDirection = ref<'up' | 'down'>('up');
|
||||
const dropdownMaxHeight = ref<number | undefined>(undefined);
|
||||
|
||||
const findContainer = (startingElement: HTMLElement): HTMLElement | null => {
|
||||
let container: HTMLElement | null = startingElement;
|
||||
while (container) {
|
||||
const computedStyle = getComputedStyle(container);
|
||||
if (computedStyle.overflow !== 'visible') {
|
||||
return container;
|
||||
}
|
||||
container = container.parentElement;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const calculateDropdownPosition = () => {
|
||||
if (!dropdownButton.value) return;
|
||||
|
||||
const buttonRect = dropdownButton.value.getBoundingClientRect();
|
||||
const container = findContainer(dropdownButton.value) || document.body;
|
||||
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
|
||||
const spaceAbove = buttonRect.top - containerRect.top;
|
||||
const spaceBelow = containerRect.bottom - buttonRect.bottom;
|
||||
|
||||
if (spaceAbove > spaceBelow) {
|
||||
dropdownDirection.value = 'up';
|
||||
dropdownMaxHeight.value = Math.min(spaceAbove - 20, 460);
|
||||
} else {
|
||||
dropdownDirection.value = 'down';
|
||||
dropdownMaxHeight.value = Math.min(spaceBelow - 20, 460);
|
||||
}
|
||||
};
|
||||
|
||||
const searchQuery = ref('');
|
||||
|
||||
const filteredProviders = computed(() => {
|
||||
if (!searchQuery.value.trim()) {
|
||||
return props.providers;
|
||||
}
|
||||
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return props.providers
|
||||
.map((provider) => ({
|
||||
...provider,
|
||||
models: provider.models.filter((model) =>
|
||||
model.name.toLowerCase().includes(query)
|
||||
),
|
||||
}))
|
||||
.filter((provider) => provider.models.length > 0);
|
||||
return filterProvidersWithModel(props.providers, searchQuery.value).filter(p => p.enabled);
|
||||
});
|
||||
|
||||
const formatContextWindow = (window: number | null | undefined): string => {
|
||||
if (!window) return '';
|
||||
if (window >= 1000000) return `${(window / 1000000).toFixed(0)}M`;
|
||||
if (window >= 1000) return `${(window / 1000).toFixed(0)}K`;
|
||||
return window.toString();
|
||||
};
|
||||
|
||||
const hasCapability = (model: Entity<typeof schema, 'models'>, capability: string): boolean => {
|
||||
return model.attributes.capabilities.has(capability);
|
||||
};
|
||||
|
||||
const hasInputModality = (model: Entity<typeof schema, 'models'>, modality: string): boolean => {
|
||||
return model.attributes.inputModalities.has(modality);
|
||||
};
|
||||
|
||||
const selectModel = (model: Entity<typeof schema, 'models'>, provider: Entity<typeof schema, 'providers'>) => {
|
||||
selectedModel.value = { ...model, provider };
|
||||
isOpen.value = false;
|
||||
searchQuery.value = '';
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
isOpen.value = false;
|
||||
watch(() => props.providers, () => {
|
||||
if (selectedModel.value) {
|
||||
const modelStillExists = allModels.value.some(model => model.id === selectedModel.value?.id);
|
||||
|
||||
if (!modelStillExists) {
|
||||
let firstEnabled: ModelWithProvider | null = null;
|
||||
|
||||
for (const provider of props.providers) {
|
||||
const enabledModel = provider.models.find(m => m.enabled);
|
||||
if (enabledModel) {
|
||||
firstEnabled = { ...enabledModel, provider };
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
selectedModel.value = firstEnabled;
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
watch(isOpen, (open) => {
|
||||
if (open) {
|
||||
calculateDropdownPosition();
|
||||
nextTick(() => {
|
||||
searchInputRef.value?.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const handleInputKeypress = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
isOpen.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
// TODO: in the settings page, pressing escape closes BOTH
|
||||
// the settings modal and the model selector dropdown
|
||||
if (event.key === 'Escape') {
|
||||
isOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
useClickOutside(dropdownRef, () => {
|
||||
isOpen.value = false;
|
||||
});
|
||||
@@ -89,16 +121,15 @@ onUnmounted(() => {
|
||||
|
||||
<template>
|
||||
<div ref="dropdownRef" class="relative">
|
||||
<button @click="isOpen = !isOpen"
|
||||
<button @click="isOpen = !isOpen" ref="dropdownButton"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-200"
|
||||
:class="[
|
||||
isOpen
|
||||
? 'bg-[var(--color-highlight)] text-[var(--color-text)]'
|
||||
: 'text-[var(--color-text-subtle)] hover:text-[var(--color-text)] hover:bg-[var(--color-highlight-low)]',
|
||||
]">
|
||||
<ModelIcon v-if="selectedModel" :avatar="true" variant="color" :model-id="selectedModel.externalId"
|
||||
size="16" />
|
||||
<Icon v-else name="mynaui:warning-circle" class="text-4" />
|
||||
<ModelIcon v-if="selectedModel" class="text-white" :avatar="true" variant="color"
|
||||
:model-id="selectedModel.externalId" size="22" />
|
||||
<span class="max-w-[150px] truncate">
|
||||
{{ selectedModel ? selectedModel.name : 'Select a model' }}
|
||||
</span>
|
||||
@@ -106,74 +137,59 @@ onUnmounted(() => {
|
||||
:class="{ 'rotate-180': isOpen }" />
|
||||
</button>
|
||||
|
||||
|
||||
<Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
enter-from-class="opacity-0 scale-95 translate-y-1" enter-to-class="opacity-100 scale-100 translate-y-0"
|
||||
leave-active-class="transition-all duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
leave-from-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 translate-y-1">
|
||||
<div v-if="isOpen"
|
||||
class="transform-origin-bottom-center absolute bottom-full left-0 mb-2 max-w-[420px] w-full max-h-[460px] flex flex-col rounded-xl border border-[var(--color-highlight)] bg-[var(--color-neutral)] shadow-lg overflow-hidden z-50">
|
||||
<div v-show="isOpen" ref="dropdownContentRef" :class="[
|
||||
dropdownDirection === 'up' ? 'bottom-full mb-2 origin-bottom' : 'top-full mt-2 origin-top',
|
||||
]" :style="{ maxHeight: dropdownMaxHeight ? `${dropdownMaxHeight}px` : '460px', height: 'auto' }"
|
||||
class="absolute left-0 max-w-[420px] w-full flex flex-col rounded-xl border border-[var(--color-highlight)] bg-[var(--color-neutral)] shadow-lg overflow-hidden z-50">
|
||||
<div>
|
||||
<div class="relative">
|
||||
<Icon name="mynaui:search"
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--color-text-subtle)]" />
|
||||
<input ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search models..."
|
||||
<input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search"
|
||||
@keypress="handleInputKeypress" type="text" placeholder="Search models..."
|
||||
class="w-full pl-9 pr-3 py-2 text-sm text-[var(--color-text)] bg-transparent placeholder-[var(--color-text-subtle)] outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto py-2 select-none">
|
||||
<div class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none max-w-full overflow-hidden">
|
||||
<div v-if="filteredProviders.length === 0"
|
||||
class="px-4 py-8 text-center text-sm text-[var(--color-muted)]">
|
||||
No models found
|
||||
</div>
|
||||
|
||||
<div v-for="provider in filteredProviders" :key="provider.id" class="mb-2">
|
||||
<div class="px-4 py-1.5 text-xs font-medium text-[var(--color-muted)] uppercase tracking-wider">
|
||||
<div
|
||||
class="px-4 py-1.5 text-xs font-medium text-[var(--color-muted)] capitalize tracking-wider flex justify-between">
|
||||
{{ provider.name }}
|
||||
<button @click="isOpen = true; setPage('providers', provider.id)"
|
||||
class="flex h-4.5 w-4.5 items-center justify-center hover:bg-[var(--color-highlight)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<Icon name="mynaui:cog-four" class="text-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button v-for="model in provider.models.filter(m => m.enabled)" :key="model.id"
|
||||
@click="selectModel(model, provider)"
|
||||
class="w-full px-4 py-2 flex items-center gap-3 hover:bg-[var(--color-highlight-low)] transition-colors duration-150"
|
||||
<button
|
||||
v-for="model in provider.models.filter(m => m.enabled).sort((a, b) => b.releasedAt && a.releasedAt ? b.releasedAt.getTime() - a.releasedAt.getTime() : 0)"
|
||||
:key="model.id" @click="selectModel(model, provider); isOpen = false"
|
||||
class="text-white w-full min-h-9 px-4 py-2 flex items-center justify-between hover:bg-[var(--color-highlight-low)] transition-colors duration-150"
|
||||
:class="{ 'bg-[var(--color-highlight-low)]': selectedModel?.id === model.id }">
|
||||
<ModelIcon :avatar="true" variant="color" :model-id="model.externalId" size="20" />
|
||||
|
||||
<span class="flex-1 text-sm text-left text-[var(--color-text)] truncate">
|
||||
{{ model.name }}
|
||||
</span>
|
||||
|
||||
<div class="flex items-center gap-0.5">
|
||||
<div v-if="hasInputModality(model, 'image')"
|
||||
class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
|
||||
<Icon name="mynaui:image" class="text-2.5 text-emerald" title="Vision" />
|
||||
</div>
|
||||
<div v-if="hasCapability(model, 'reasoning')"
|
||||
class="w-4.5 h-4.5 bg-[color-mix(in_srgb,_transparent_90%,_var(--reasoning-accent)_10%)] rounded flex items-center justify-center">
|
||||
<Icon name="mynaui:atom" class="text-2.5 text-[var(--reasoning-accent)]"
|
||||
title="Reasoning" />
|
||||
</div>
|
||||
<div v-if="hasCapability(model, 'tools')"
|
||||
class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
|
||||
<Icon name="mynaui:tool" class="text-2.5 text-sky" title="Tools" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span v-if="model.attributes.contextWindow"
|
||||
class="text-xs font-mono text-[var(--color-subtle)] px-1.5 py-0.5 rounded bg-[var(--color-highlight)]">
|
||||
{{ formatContextWindow(model.attributes.contextWindow) }}
|
||||
</span>
|
||||
<ModelInfo :model="model" size="small" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-1 border-t border-[var(--color-highlight-low)]">
|
||||
<NuxtLink to="/settings/providers"
|
||||
class="flex items-center gap-2 px-3 py-2 text-sm text-[var(--color-text-subtle)] hover:text-[var(--color-text)] hover:bg-[var(--color-highlight-low)] rounded-lg transition-colors duration-150"
|
||||
@click="isOpen = false">
|
||||
<button
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--color-text-subtle)] hover:text-[var(--color-text)] hover:bg-[var(--color-highlight-low)] rounded-lg transition-colors duration-150"
|
||||
@click="isOpen = false; setPage('providers');">
|
||||
<Icon name="mynaui:cog-four" class="text-4" />
|
||||
<span>Manage Provider</span>
|
||||
<span>Manage Providers</span>
|
||||
<Icon name="mynaui:arrow-right" class="text-3.5 ml-auto" />
|
||||
</NuxtLink>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
Reference in New Issue
Block a user