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.
101 lines
4.6 KiB
Vue
101 lines
4.6 KiB
Vue
<script setup lang="ts">
|
|
import { Providers } from '~/types/model';
|
|
import { providerIcons } from '~/utils/model-mapping';
|
|
|
|
const triplit = useTriplitClient();
|
|
const { providers, unsubscribe: unsubscribeModels } = await useModels();
|
|
|
|
if (providers.value === undefined) throw new Error('Providers not loaded');
|
|
|
|
// TODO: sometimes this code can create duplicate providers
|
|
const { user } = useAuth();
|
|
for (const provider of Providers) {
|
|
if (!providers.value?.find(p => p.type === provider)) {
|
|
// create a new provider
|
|
await triplit.insert('providers', {
|
|
name: provider,
|
|
userId: user.value!.id,
|
|
type: provider,
|
|
enabled: false,
|
|
config: {},
|
|
});
|
|
}
|
|
}
|
|
|
|
for (const provider of providers.value) {
|
|
if (!Providers.includes(provider.type)) {
|
|
await triplit.delete('providers', provider.id);
|
|
}
|
|
}
|
|
|
|
const toggleProvider = async (id: string) => {
|
|
const provider = providers.value!.find(p => p.id === id);
|
|
if (!provider) return;
|
|
|
|
await triplit.update('providers', provider.id, {
|
|
enabled: !provider.enabled,
|
|
});
|
|
};
|
|
|
|
onUnmounted(() => {
|
|
unsubscribeModels?.();
|
|
});
|
|
|
|
defineEmits(['navigate']);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-1">
|
|
<h2 class="text-lg font-semibold flex items-center gap-2">
|
|
Enabled <span class="text-sm bg-[var(--bg-container)] px-2 rounded-md py-0.5 text-[var(--text-secondary)]">
|
|
{{providers?.filter(p => p.enabled).length}}
|
|
</span>
|
|
</h2>
|
|
<div
|
|
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
|
|
<button @click="$emit('navigate', 'providers', p.id)" v-for="p in providers?.filter(p => p.enabled)"
|
|
:key="p.id"
|
|
class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-border)] hover:border-[var(--color-border-active)]">
|
|
<div class="flex flex-col flex-grow">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
|
class="w-8 h-8 text-[var(--text-primary)]" />
|
|
<h3 class="text-md font-semibold text-start capitalize">{{ p.name }}</h3>
|
|
</div>
|
|
<hr class="border-t border-[var(--color-border)]" />
|
|
</div>
|
|
<div class="flex items-center justify-end">
|
|
<!-- <input type="checkbox"
|
|
class="w-4 h-4 text-blue-600 bg-transparent checked:bg-blue-600 checked:text-white checked:border-transparent focus:ring-0 border-2 border-[var(--color-border)]" /> -->
|
|
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<h2 class="text-lg font-semibold flex items-center gap-2">
|
|
Disabled <span class="text-sm bg-[var(--bg-container)] px-2 rounded-md py-0.5 text-[var(--text-secondary)]">
|
|
{{providers?.filter(p => !p.enabled).length}}
|
|
</span>
|
|
</h2>
|
|
<div
|
|
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
|
|
<button @click="$emit('navigate', 'providers', p.id)" v-for="p in providers?.filter(p => !p.enabled)"
|
|
:key="p.id"
|
|
class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-border)] hover:border-[var(--color-border-active)]">
|
|
<div class="flex flex-col flex-grow">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
|
class="w-8 h-8 text-[var(--text-primary)]" />
|
|
<h3 class="text-md font-semibold text-start capitalize">{{ p.name }}</h3>
|
|
</div>
|
|
<hr class="border-t border-[var(--color-border)]" />
|
|
</div>
|
|
<div class="flex items-center justify-end">
|
|
<!-- <input type="checkbox"
|
|
class="w-4 h-4 text-blue-600 bg-transparent checked:bg-blue-600 checked:text-white checked:border-transparent focus:ring-0 border-2 border-[var(--color-border)]" /> -->
|
|
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template> |