zoeissleeping
6ee4087a29
- Centralize `useAgents` and `useModels` state within the Nuxt app context to prevent data leaks and improve initialization. - Migrate virtualization from `vue-virtual-scroller` to `@tanstack/vue-virtual` with new `RowVirtualizerFixed` and `RowVirtualizerDynamic` components. - Upgrade Nuxt to v4.3.1 and remove `@vue-macros/nuxt`. - Replace `big.js` with an optimized custom `lshDecimal` string manipulation logic for pricing calculations in the provider API. - Implement automatic focus redirection in `ChatInput` to capture standard keyboard input. - Refactor Sidenav and Settings components to utilize virtualization for long lists (topics, agents, models). - Enhance theme colors and mobile experience. More work to come on both of these.
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">
|
|
<div role="button" @click="isOpen = !isOpen" ref="dropdownButton"
|
|
class="cursor-pointer flex items-center w-fit select-none 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 }" />
|
|
</div>
|
|
|
|
|
|
<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>
|