feat: custom models
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user