zoeissleeping
57e7a92cd1
- Add animate-pulse CSS animation for loading states - Add Ctrl+I/Ctrl+B markdown shortcuts in chat input - Improve chat input resize with mirror element - Add reasoning duration display and shimmer effect - Add confirmation dialog for deleting all models - Simplify RowVirtualizerDynamic resize handling - Fix DialogType imports (type -> value) - Fix ollama cloud model name resolution - Make vllm auth header optional - Various icon and styling fixes
56 lines
3.1 KiB
Vue
56 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { navigateTo } from '#app';
|
|
const route = useRoute();
|
|
const { agents, getAgent } = await useAgents();
|
|
|
|
const agentId = computed(() => route.params.id as string);
|
|
const activeAgent = getAgent(agentId);
|
|
|
|
const { isHovered } = useSidenavContext();
|
|
</script>
|
|
|
|
<template>
|
|
<header class="flex items-center rounded-lg overflow-hidden flex-1 min-w-0">
|
|
<div :class="[
|
|
'w-10 flex flex-shrink-0 opacity-100 scale-100 transform-origin-left-center items-center overflow-hidden transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
|
|
isHovered ? 'md:w-8' : 'md:w-0 md:opacity-0 md:scale-95',
|
|
]">
|
|
<NuxtLink to="/"
|
|
class="flex @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg decoration-none transition-inherit text-[var(--text-secondary)] p-1.5">
|
|
<span class="i-mynaui-chevron-left text-5.5 md:text-4.5"></span>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<Dropdown placement="bottom" dropdown-class="max-w-48">
|
|
<template #default="{ toggle, setRef }">
|
|
<button :ref="setRef" @click="toggle"
|
|
class="shrink-1 max-w-full min-w-0 transition duration-200 pr-2 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg">
|
|
<div class="pointer-events-none flex items-center gap-1.5 max-w-full">
|
|
<div
|
|
:class="['w-9 h-9 md:w-7 md:h-7 flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
|
|
<img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl"
|
|
class="w-full h-full object-cover" />
|
|
<span v-else
|
|
class="w-5.5 h-5.5 md:h-4 md:w-4 i-mynaui-check-hexagon text-[var(--color-accent)]"></span>
|
|
</div>
|
|
<span
|
|
class="min-w-0 md:text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
|
|
{{ activeAgent?.name }}
|
|
</span>
|
|
<div class="shrink-0 w-5 h-5 md:w-4 md:h-4 text-[var(--text-secondary)]">
|
|
<span
|
|
class="i-mynaui-chevron-up-down inline-block text-5 md:text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"></span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<template #dropdown="{ close }">
|
|
<button v-for="agent in agents" :key="agent.id" @click="navigateTo(`/agent/${agent.id}`); close()"
|
|
class="truncate block w-full text-left px-3 py-1.5 items-center gap-1 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
|
|
{{ agent.name }}
|
|
</button>
|
|
</template>
|
|
</Dropdown>
|
|
</header>
|
|
</template> |