streaming, markdown, model selecting, and lots more

This commit is contained in:
Zoe
2026-02-02 23:16:06 -06:00
parent 8c28946703
commit d5a5945c03
114 changed files with 6109 additions and 2938 deletions
+15 -16
View File
@@ -1,36 +1,35 @@
<script setup lang="ts">
import type { DropdownItem } from '~/types/dropdown'
import type { DropdownItem } from '~/types/dropdown';
type Theme = 'light' | 'dark' | 'system'
type Theme = 'light' | 'dark' | 'system';
const colorMode = useColorMode()
const colorMode = useColorMode();
const themeOptions: DropdownItem[] = [
{ value: 'light', label: 'Light', icon: 'mynaui:sun' },
{ value: 'dark', label: 'Dark', icon: 'mynaui:moon' },
{ value: 'system', label: 'System', icon: 'mynaui:desktop' }
]
{ value: 'system', label: 'System', icon: 'mynaui:desktop' },
];
const currentOption = computed(() =>
themeOptions.find(option => option.value === colorMode.preference) || themeOptions[2]
)
const currentOption = computed(
() => themeOptions.find((option) => option.value === colorMode.preference) || themeOptions[2],
);
const isOpen = ref(false)
const isOpen = ref(false);
const selectTheme = (item: DropdownItem) => {
colorMode.preference = item.value as Theme
}
colorMode.preference = item.value as Theme;
};
</script>
<template>
<Dropdown class="relative" v-model="isOpen" @select="selectTheme" :items="themeOptions" verticality="asscending"
placement="right" width="140px">
<template #trigger="{ toggle, isOpen }">
<button aria-label="Open theme switcher" @click="toggle"
class="p-2 flex items-center justify-center rounded-lg hover:bg-[var(--color-highlight)] transition-colors group"
:class="isOpen ? 'bg-[var(--color-highlight)]' : 'bg-transparent'">
<Icon :name="currentOption!.icon!"
class="text-5 text-[var(--color-subtle)] group-hover:text-[var(--color-text)] transition-colors" />
<button aria-label="Open theme switcher" @click="toggle" :class="[isOpen ? 'bg-[var(--color-highlight)] hover:text-[var(--color-subtle)] focus-visible:text-[var(--color-subtle)]' : 'bg-transparent text-[var(--color-muted)]',
'h-7 w-7 flex items-center justify-center rounded-lg hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] transition-colors active:text-[var(--color-text)]'
]">
<Icon :name="currentOption!.icon!" class="text-4" />
</button>
</template>
</Dropdown>