zoeissleeping
59bb7fbc12
This is once again a huge commit, but its mostly performance improvements along with some bug fixes and refactoring. It also includes changes to the theming systems. I'm still not 100% happy with the theming system, but its better than before. Model fetching has been dramatically improved! Nearly all the important computation and pre-processing has been moved to the server. This has also somehow fixed the way model details are loaded, which was causing many models to be missing their details despite models.dev having them. The markdown renderer has once again been changed, but I'm mostly certain that this is the last time major changes will be made to it. The renderer is not spamming components, bloating memory usage, and its not using a bug prone custom written chunking system. There's also a lot more that I haven't mentioned and honestly forgot. I need to get better commit hygiene tbh.
274 lines
12 KiB
Vue
274 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, watch, nextTick } from 'vue';
|
|
import type { Entity } from '@triplit/client';
|
|
import type schema from '#triplit/schema';
|
|
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
|
|
import { sortByReleaseDate } from '~/utils/sort';
|
|
|
|
const { setPage } = useSettings();
|
|
const { allModels } = await useModels();
|
|
|
|
const props = defineProps<{
|
|
providers: ProviderWithModels[];
|
|
}>();
|
|
|
|
const isOpen = ref(false);
|
|
const selectedModel = defineModel<ModelWithProvider | null>();
|
|
|
|
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 navigatingWithKeyboard = ref(false);
|
|
const focusedOptionId = ref<string | null>(null);
|
|
|
|
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(() => {
|
|
return filterProvidersWithModel(props.providers, searchQuery.value).filter(p => p.enabled);
|
|
});
|
|
|
|
const flatOptions = computed(() => {
|
|
const options: { id: string; model: Entity<typeof schema, 'models'>; provider: Entity<typeof schema, 'providers'> }[] = [];
|
|
for (const provider of filteredProviders.value) {
|
|
const enabledModels = provider.models.filter(m => m.enabled).sort((a, b) => b.releasedAt && a.releasedAt ? b.releasedAt.getTime() - a.releasedAt.getTime() : 0);
|
|
for (const model of enabledModels) {
|
|
options.push({ id: model.id, model, provider });
|
|
}
|
|
}
|
|
return options;
|
|
});
|
|
|
|
const focusedIndex = computed(() => {
|
|
if (!focusedOptionId.value) return -1;
|
|
return flatOptions.value.findIndex(o => o.id === focusedOptionId.value);
|
|
});
|
|
|
|
const setFocusToOption = (index: number) => {
|
|
if (flatOptions.value.length === 0) return;
|
|
navigatingWithKeyboard.value = true;
|
|
|
|
const clampedIndex = Math.max(0, Math.min(index, flatOptions.value.length - 1));
|
|
focusedOptionId.value = flatOptions.value[clampedIndex]!.id;
|
|
scrollFocusedIntoView();
|
|
};
|
|
|
|
const scrollFocusedIntoView = () => {
|
|
nextTick(() => {
|
|
const focusedEl = document.getElementById(`model-option-${focusedOptionId.value}`);
|
|
focusedEl?.scrollIntoView({ block: 'nearest' });
|
|
});
|
|
};
|
|
|
|
const selectModel = (model: Entity<typeof schema, 'models'>, provider: Entity<typeof schema, 'providers'>) => {
|
|
selectedModel.value = { ...model, provider };
|
|
closeDropdown();
|
|
};
|
|
|
|
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();
|
|
});
|
|
} else {
|
|
focusedOptionId.value = null;
|
|
searchQuery.value = '';
|
|
}
|
|
});
|
|
|
|
const closeDropdown = () => {
|
|
isOpen.value = false;
|
|
navigatingWithKeyboard.value = false;
|
|
};
|
|
|
|
const handleSearchKeyDown = (event: KeyboardEvent) => {
|
|
if (flatOptions.value.length === 0) return;
|
|
|
|
switch (event.key) {
|
|
case 'Escape':
|
|
closeDropdown();
|
|
event.preventDefault();
|
|
break;
|
|
case 'ArrowDown':
|
|
event.preventDefault();
|
|
if (focusedIndex.value === -1 || focusedIndex.value === flatOptions.value.length - 1) {
|
|
setFocusToOption(0);
|
|
} else {
|
|
setFocusToOption(focusedIndex.value + 1);
|
|
}
|
|
break;
|
|
case 'ArrowUp':
|
|
event.preventDefault();
|
|
if (focusedIndex.value === -1 || focusedIndex.value === 0) {
|
|
setFocusToOption(flatOptions.value.length - 1);
|
|
} else {
|
|
setFocusToOption(focusedIndex.value - 1);
|
|
}
|
|
break;
|
|
case 'Home':
|
|
event.preventDefault();
|
|
setFocusToOption(0);
|
|
break;
|
|
case 'End':
|
|
event.preventDefault();
|
|
setFocusToOption(flatOptions.value.length - 1);
|
|
break;
|
|
case 'Enter':
|
|
event.preventDefault();
|
|
console.log("enter", focusedOptionId.value, flatOptions.value[0]);
|
|
if (focusedOptionId.value) {
|
|
const option = flatOptions.value.find(o => o.id === focusedOptionId.value);
|
|
if (option) {
|
|
selectModel(option.model, option.provider);
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (flatOptions.value.length > 0) {
|
|
selectModel(flatOptions.value[0]!.model, flatOptions.value[0]!.provider);
|
|
}
|
|
|
|
break;
|
|
}
|
|
};
|
|
|
|
useClickOutside(dropdownRef, closeDropdown);
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="dropdownRef" class="relative">
|
|
<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-hover)] text-[var(--text-primary)]'
|
|
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)]',
|
|
]">
|
|
<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>
|
|
<Icon name="mynaui:chevron-down" class="text-3.5 transition-transform duration-200"
|
|
: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" ref="dropdownContentRef" role="listbox" aria-label="Select model"
|
|
:aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined" :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-border)] bg-[var(--bg-surface)] 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(--text-secondary)]" />
|
|
<input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search"
|
|
@keydown="handleSearchKeyDown" type="text" placeholder="Search models..."
|
|
class="placeholder:text-[var(--text-tertiary)] w-full pl-9 pr-3 py-2 text-sm text-[var(--text-primary)] bg-transparent placeholder-[var(--text-secondary)] outline-none" />
|
|
</div>
|
|
</div>
|
|
|
|
<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(--text-secondary)]">
|
|
No models found
|
|
</div>
|
|
|
|
<div v-for="provider in filteredProviders" :key="provider.id" class="mb-2">
|
|
<div v-if="provider.models.filter(m => m.enabled).length > 0"
|
|
class="px-4 py-1.5 text-[13px] font-medium text-[var(--text-secondary)] capitalize tracking-wider flex justify-between">
|
|
{{ provider.name }}
|
|
<button @click="isOpen = true; setPage('providers', provider.id)"
|
|
class="flex h-5 w-5 items-center justify-center hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<Icon name="mynaui:cog-four" class="text-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<button v-for="model in provider.models.filter(m => m.enabled).sort(sortByReleaseDate)"
|
|
:key="model.id" :id="`model-option-${model.id}`" role="option"
|
|
:aria-selected="focusedOptionId === 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-hover)] transition-colors duration-150"
|
|
:class="{
|
|
'bg-[var(--color-hover)]': selectedModel?.id === model.id,
|
|
'ring-2 ring-inset ring-[var(--color-accent)]': focusedOptionId === model.id && navigatingWithKeyboard
|
|
}">
|
|
<ModelInfo :model="model" size="medium" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-1 border-t border-[var(--color-border)]">
|
|
<button
|
|
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
|
|
@click="isOpen = false; setPage('providers');">
|
|
<Icon name="mynaui:cog-four" class="text-4.5" />
|
|
<span>Manage Providers</span>
|
|
<Icon name="mynaui:arrow-right" class="text-4 ml-auto" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|