204 lines
8.6 KiB
Vue
204 lines
8.6 KiB
Vue
<script setup lang="ts">
|
|
import { useFloating, offset, flip, shift, autoUpdate } from '@floating-ui/vue';
|
|
|
|
const { agents, createAgent } = useAgents();
|
|
const agentsOpen = ref(true);
|
|
const creatingAgent = ref(false);
|
|
|
|
const dropdownOpen = ref(false);
|
|
const dropdownTrigger = ref<HTMLElement | null>(null);
|
|
const dropdownContent = ref(null);
|
|
const activeMenuAgentId = ref<string | null>(null);
|
|
|
|
const triplit = useTriplitClient();
|
|
|
|
const navRef = ref<HTMLElement | null>(null);
|
|
const toggleAgentsList = () => {
|
|
agentsOpen.value = !agentsOpen.value;
|
|
};
|
|
|
|
const newAgent = async () => {
|
|
creatingAgent.value = true;
|
|
try {
|
|
const agent = await createAgent();
|
|
return navigateTo(`/agent/${agent.id}`);
|
|
} finally {
|
|
creatingAgent.value = false;
|
|
}
|
|
};
|
|
|
|
const renameAgentId = ref<string | null>(null);
|
|
const newAgentName = ref('');
|
|
|
|
const startRename = (agentId: string, currentName: string) => {
|
|
renameAgentId.value = agentId;
|
|
newAgentName.value = currentName;
|
|
nextTick(() => {
|
|
const input = document.getElementById('agent-rename-input') as HTMLInputElement | null;
|
|
if (input) {
|
|
input.focus();
|
|
}
|
|
})
|
|
};
|
|
|
|
const saveRename = async () => {
|
|
if (renameAgentId.value && newAgentName.value.trim()) {
|
|
await triplit.update('agents', renameAgentId.value, {
|
|
name: newAgentName.value.trim()
|
|
});
|
|
}
|
|
cancelRename();
|
|
};
|
|
|
|
const cancelRename = () => {
|
|
renameAgentId.value = null;
|
|
newAgentName.value = '';
|
|
};
|
|
|
|
const deleteAgent = async (agentId: string) => {
|
|
await triplit.delete('agents', agentId);
|
|
}
|
|
|
|
const { floatingStyles, placement } = useFloating(dropdownTrigger, dropdownContent, {
|
|
placement: 'bottom-end',
|
|
whileElementsMounted: autoUpdate,
|
|
middleware: [offset(6), flip(), shift({ padding: 10 })],
|
|
transform: false,
|
|
});
|
|
|
|
const transformOrigin = computed(() =>
|
|
placement.value.startsWith('top')
|
|
? 'transform-origin-bottom-center'
|
|
: 'transform-origin-top-center'
|
|
);
|
|
|
|
const closeDropdown = () => {
|
|
dropdownOpen.value = false;
|
|
activeMenuAgentId.value = null;
|
|
dropdownTrigger.value = null;
|
|
};
|
|
|
|
const menuAgent = computed(() =>
|
|
agents.value.find(t => t.id === activeMenuAgentId.value)
|
|
);
|
|
|
|
const handleNavClick = (e: MouseEvent) => {
|
|
const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
|
|
if (!trigger) return;
|
|
|
|
const agentId = trigger.dataset.agentId || (trigger.closest('[data-agent-id]') as HTMLElement | null)?.dataset.agentId;
|
|
if (!agentId) return;
|
|
|
|
const action = trigger.dataset.action;
|
|
switch (action) {
|
|
case 'navigate':
|
|
if (e.metaKey || e.ctrlKey || e.shiftKey) return;
|
|
e.preventDefault();
|
|
return navigateTo(`/agent/${agentId}`);
|
|
|
|
case 'toggle-dropdown':
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (activeMenuAgentId.value === agentId && dropdownOpen.value) {
|
|
closeDropdown();
|
|
return;
|
|
}
|
|
|
|
activeMenuAgentId.value = agentId;
|
|
dropdownTrigger.value = trigger;
|
|
dropdownOpen.value = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
// simply preload the topic page
|
|
preloadRouteComponents(`/agent/42`);
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<nav ref="navRef" class="flex flex-col gap-1 overflow-auto">
|
|
<SidenavItem name="Search" icon="i-mynaui-search" />
|
|
<SidenavItem to="/" name="Home" icon="i-mynaui-home" />
|
|
|
|
<!-- Header Toggle -->
|
|
<button
|
|
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg hover:bg-[var(--color-hover)] transition-colors w-full"
|
|
@click="toggleAgentsList">
|
|
<span class="text-sm">Agents</span>
|
|
<span
|
|
class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
:class="{ '-rotate-90': !agentsOpen }"></span>
|
|
</button>
|
|
|
|
<!-- Animated Section -->
|
|
<Collapsible :is-open="agentsOpen">
|
|
<div class="mt-1 gap-1 flex flex-col transform-origin-top pt-1 pb-1 px-1">
|
|
<button @click="newAgent" :disabled="creatingAgent"
|
|
class="flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--text-secondary)] hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
|
|
<div class="h-7 w-7 flex items-center justify-center">
|
|
<span v-if="creatingAgent" class="i-svg-spinners-ring-resize text-4.5"></span>
|
|
<span v-else class="i-mynaui-plus text-4.5"></span>
|
|
</div>
|
|
<span>New Agent</span>
|
|
</button>
|
|
|
|
<div @click="handleNavClick" class="flex flex-col">
|
|
<RowVirtualizerFixed :scroll-element="navRef" key-field="id" :items="agents" :prerender="50"
|
|
:item-size="40" :overscan="20">
|
|
<template v-slot="{ item: agent }">
|
|
<a data-action="navigate" :data-agent-id="agent.id" :href="`/agent/${agent.id}`"
|
|
:aria-label="agent.name"
|
|
class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]">
|
|
<input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
|
|
@keydown.stop.enter="saveRename" @keydown.escape="cancelRename" @blur="saveRename"
|
|
class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
|
|
<span v-else
|
|
class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
|
{{ agent.name }}
|
|
</span>
|
|
|
|
<div data-action="toggle-dropdown"
|
|
class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<span class="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
</RowVirtualizerFixed>
|
|
</div>
|
|
</div>
|
|
</Collapsible>
|
|
|
|
<Teleport to="body">
|
|
<Transition
|
|
enter-active-class="transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
enter-from-class="opacity-0 scale-95 translate-y-1" enter-to-class="opacity-100 scale-100 translate-y-0"
|
|
leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
leave-from-class="opacity-100 scale-100 translate-y-0"
|
|
leave-to-class="opacity-0 scale-95 translate-y-1">
|
|
<div v-if="dropdownOpen" ref="dropdownContent" :style="floatingStyles" class="fixed z-15"
|
|
:class="transformOrigin">
|
|
<div v-click-outside="closeDropdown"
|
|
class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1 min-w-40">
|
|
|
|
<template v-if="menuAgent">
|
|
<button @click="startRename(menuAgent.id, menuAgent.name); closeDropdown()"
|
|
class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
|
|
Rename
|
|
</button>
|
|
|
|
<div class="h-px bg-[var(--color-border)] my-1" />
|
|
|
|
<button @click="deleteAgent(menuAgent.id); closeDropdown()"
|
|
class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 text-red-500">
|
|
Delete
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</nav>
|
|
</template>
|