140 lines
6.4 KiB
Vue
140 lines
6.4 KiB
Vue
<script setup lang="ts">
|
|
import { type Model } from '~/types/model';
|
|
|
|
const props = withDefaults(defineProps<{
|
|
model: Model;
|
|
size?: 'small' | 'medium' | 'large';
|
|
details?: boolean;
|
|
showCost?: boolean;
|
|
showEdit?: boolean;
|
|
showExternalId?: boolean;
|
|
showReleaseDate?: boolean;
|
|
}>(), {
|
|
size: 'large',
|
|
details: false,
|
|
showCost: false,
|
|
showExternalId: false,
|
|
showReleaseDate: false,
|
|
showEdit: false,
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
edit: [model: Model];
|
|
}>();
|
|
|
|
const triplit = useTriplitClient();
|
|
|
|
const formatContextWindow = (window: number | null | undefined): string => {
|
|
if (!window) return '';
|
|
if (window >= 1000000) return `${(window / 1000000).toFixed(0)}M`;
|
|
if (window >= 1000) return `${(window / 1000).toFixed(0)}K`;
|
|
return window.toString();
|
|
};
|
|
|
|
const hasCapability = (capability: string): boolean => {
|
|
return props.model.attributes.capabilities.has(capability);
|
|
};
|
|
|
|
const hasInputModality = (modality: string): boolean => {
|
|
return (props.model.attributes.inputModalities as ReadonlySet<string>).has(modality);
|
|
};
|
|
|
|
const showCost = computed(() => {
|
|
return props.showCost && (props.model.cost.prompt || props.model.cost.completion || props.model.cost.request);
|
|
});
|
|
|
|
const toggleModel = async (id: string) => {
|
|
await triplit.update('models', id, {
|
|
enabled: !props.model.enabled,
|
|
});
|
|
};
|
|
|
|
const deleteModel = async () => {
|
|
await triplit.delete('models', props.model.id);
|
|
};
|
|
|
|
const handleEdit = () => {
|
|
emit('edit', props.model);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-between w-full" v-bind="$attrs">
|
|
<div class="flex items-center gap-2 min-w-0 flex-1">
|
|
<ModelIcon :class="{
|
|
'rounded-lg overflow-hidden': size === 'large',
|
|
'rounded-md overflow-hidden': size === 'medium' || size === 'small',
|
|
}" :avatar="true" variant="color" :key="model.externalId" :model-id="model.externalId"
|
|
:size="size === 'small' ? '20' : size === 'medium' ? '26' : '32'" />
|
|
|
|
<div class="flex flex-col gap-1 min-w-0 flex-1">
|
|
<div class="flex items-center gap-1 min-w-0">
|
|
<span class="text-[15px] font-medium text-[var(--text-primary)] truncate min-w-0">
|
|
{{ model.name }}
|
|
</span>
|
|
<span v-if="showExternalId" :title="model.externalId"
|
|
class="text-xs text-[var(--text-secondary)] px-1 py-0.5 rounded bg-[var(--bg-container)] whitespace-nowrap truncate max-w-[240px]">
|
|
{{ 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 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>
|
|
|
|
<div v-if="details" class="flex items-center gap-1.5 flex-wrap text-[var(--text-tertiary)]">
|
|
<span v-if="showReleaseDate && model.releasedAt" class="text-xs whitespace-nowrap">
|
|
Released on {{ model.releasedAt.toISOString().split('T')[0] }}
|
|
</span>
|
|
<template v-if="showCost">
|
|
<span v-if="model.cost.prompt" class="text-xs whitespace-nowrap flex items-center">
|
|
<span class="w-1 h-1 rounded-full bg-[var(--text-secondary)] inline-block mr-1"></span>
|
|
${{ model.cost.prompt }}/M input
|
|
</span>
|
|
<span v-if="model.cost.completion" class="text-xs whitespace-nowrap flex items-center">
|
|
<span class="w-1 h-1 rounded-full bg-[var(--text-secondary)] inline-block mr-1"></span>
|
|
${{ model.cost.completion }}/M output
|
|
</span>
|
|
<span v-if="model.cost.request && model.cost.request !== '0'"
|
|
class="text-xs whitespace-nowrap flex items-center">
|
|
<span class="w-1 h-1 rounded-full bg-[var(--text-secondary)] inline-block mr-1"></span>
|
|
${{ model.cost.request }}/K request
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1 shrink-0">
|
|
<div class="flex items-center gap-0.5">
|
|
<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"></span>
|
|
</div>
|
|
<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)]"></span>
|
|
</div>
|
|
<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"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<span v-if="model.attributes.contextWindow"
|
|
class="text-xs font-mono text-[var(--text-secondary)] px-1.5 py-0.5 rounded bg-[var(--bg-container)]">
|
|
{{ formatContextWindow(model.attributes.contextWindow) }}
|
|
</span>
|
|
|
|
<Slider v-if="showEdit" :checked="model.enabled" @click="toggleModel(model.id)" />
|
|
</div>
|
|
</div>
|
|
</template>
|