feat: custom models

This commit is contained in:
Zoe
2026-03-03 10:23:25 -06:00
parent ea17ee2313
commit 1d83b40fe0
4 changed files with 416 additions and 51 deletions
+25 -13
View File
@@ -1,9 +1,8 @@
<script setup lang="ts">
import type { Entity } from '@triplit/client';
import type schema from '#triplit/schema';
import { type Model } from '~/types/model';
const props = withDefaults(defineProps<{
model: Entity<typeof schema, 'models'>;
model: Model;
size?: 'small' | 'medium' | 'large';
details?: boolean;
showCost?: boolean;
@@ -19,6 +18,10 @@ const props = withDefaults(defineProps<{
showEdit: false,
});
const emit = defineEmits<{
edit: [model: Model];
}>();
const triplit = useTriplitClient();
const formatContextWindow = (window: number | null | undefined): string => {
@@ -33,7 +36,7 @@ const hasCapability = (capability: string): boolean => {
};
const hasInputModality = (modality: string): boolean => {
return (props.model.attributes.inputModalities as Readonly<Set<string>>).has(modality);
return (props.model.attributes.inputModalities as ReadonlySet<string>).has(modality);
};
const showCost = computed(() => {
@@ -49,6 +52,10 @@ const toggleModel = async (id: string) => {
const deleteModel = async () => {
await triplit.delete('models', props.model.id);
};
const handleEdit = () => {
emit('edit', props.model);
};
</script>
<template>
@@ -70,9 +77,14 @@ const deleteModel = async () => {
{{ model.externalId }}
</span>
<div v-if="showEdit" class="flex items-center gap-2">
<!-- Edit button - only for custom models -->
<button v-if="model.isCustom" @click="handleEdit"
class="rounded h-5 w-5 flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-[var(--color-accent)]/30 text-[var(--color-accent)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="i-mynaui-pencil text-3.5"></span>
</button>
<button @click="deleteModel"
class="rounded h-5 w-5 flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-red-500/30 text-red-500 trannsition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="i-mynaui-trash text-3.5"></span>
class="rounded h-5 w-5 flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-red-500/30 text-red-500 transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="i-mynaui-trash text-3.5"></span>
</button>
</div>
</div>
@@ -102,17 +114,17 @@ const deleteModel = async () => {
<div class="flex items-center gap-1 shrink-0">
<div class="flex items-center gap-0.5">
<div v-if="hasInputModality('image')"
<div v-if="hasInputModality('image')" title="Vision"
class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
<span class="i-mynaui-image text-2.5 text-emerald" title="Vision"></span>
<span class="i-mynaui-image text-2.5 text-emerald"></span>
</div>
<div v-if="hasCapability('reasoning')"
<div v-if="hasCapability('reasoning')" title="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">
<span class="i-mynaui-atom text-2.5 text-[var(--reasoning-accent)]" title="Reasoning"></span>
<span class="i-mynaui-atom text-2.5 text-[var(--reasoning-accent)]"></span>
</div>
<div v-if="hasCapability('tools')"
<div v-if="hasCapability('tools')" title="Tools"
class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
<span class="i-mynaui-tool text-2.5 text-sky" title="Tools"></span>
<span class="i-mynaui-tool text-2.5 text-sky"></span>
</div>
</div>
@@ -124,4 +136,4 @@ const deleteModel = async () => {
<Slider v-if="showEdit" :checked="model.enabled" @click="toggleModel(model.id)" />
</div>
</div>
</template>
</template>