122 lines
4.6 KiB
Vue
122 lines
4.6 KiB
Vue
<script setup lang="ts">
|
|
const { agents } = await useAgents();
|
|
const agentsListRef = ref<HTMLElement | null>(null);
|
|
const agentsOpen = ref(true);
|
|
const agentsListHeight = ref('auto');
|
|
const agentsListOpacity = ref(1);
|
|
const agentsListScale = ref(1);
|
|
const creatingAgent = ref(false);
|
|
|
|
function easeInOutQuad(x: number): number {
|
|
return x < 0.5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2;
|
|
}
|
|
|
|
const toggleAgentsList = () => {
|
|
if (!agentsListRef.value) return;
|
|
const animationLength = 200;
|
|
let animationStart: number | null = null;
|
|
|
|
let startHeight: number;
|
|
const startOpacity = agentsListOpacity.value;
|
|
const startScale = agentsListScale.value;
|
|
if (agentsListHeight.value === 'auto') {
|
|
startHeight = agentsListRef.value.clientHeight;
|
|
} else {
|
|
startHeight = Number(agentsListHeight.value.replace('px', ''));
|
|
}
|
|
|
|
const targetHeight = agentsOpen.value ? 0 : agentsListRef.value.scrollHeight;
|
|
const targetOpacity = agentsOpen.value ? 0 : 1;
|
|
const targetScale = agentsOpen.value ? 0.95 : 1;
|
|
agentsOpen.value = !agentsOpen.value;
|
|
|
|
const animate = (timestamp: number) => {
|
|
if (!animationStart) animationStart = timestamp;
|
|
|
|
const elapsed = timestamp - animationStart;
|
|
const progress = Math.min(elapsed / animationLength, 1);
|
|
|
|
const currentHeight = startHeight + (targetHeight - startHeight) * easeInOutQuad(progress);
|
|
const currentOpacity = startOpacity + (targetOpacity - startOpacity) * easeInOutQuad(progress);
|
|
const currentScale = startScale + (targetScale - startScale) * easeInOutQuad(progress);
|
|
|
|
agentsListOpacity.value = currentOpacity;
|
|
agentsListScale.value = currentScale;
|
|
agentsListHeight.value = `${currentHeight}px`;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(animate);
|
|
} else {
|
|
if (agentsOpen.value) {
|
|
agentsListHeight.value = 'auto';
|
|
}
|
|
}
|
|
};
|
|
|
|
requestAnimationFrame(animate);
|
|
};
|
|
|
|
const newAgent = async () => {
|
|
const triplit = useTriplitClient();
|
|
const { user } = useAuth();
|
|
|
|
if (!user.value) throw new Error('User not logged in');
|
|
|
|
const agent = await triplit.insert('agents', {
|
|
name: 'New Agent',
|
|
userId: user.value.id,
|
|
systemPrompt: 'You are a helpful assistant.',
|
|
imageUrl: null,
|
|
createdAt: new Date(),
|
|
});
|
|
|
|
console.log(agents.value, agent);
|
|
if (!agent) throw new Error('Failed to create agent');
|
|
|
|
let agentExists: () => void;
|
|
const agentExistsPromise = new Promise<void>((resolve) => {
|
|
agentExists = resolve;
|
|
});
|
|
|
|
watch(agents, () => {
|
|
agentExists();
|
|
});
|
|
|
|
await agentExistsPromise;
|
|
|
|
navigateTo(`/agent/${agent.id}`);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="flex flex-col gap-1">
|
|
<SidenavItem name="Search" icon="mynaui:search" />
|
|
<SidenavItem to="/" :active="true" name="Home" icon="mynaui:home" />
|
|
|
|
<!-- Agents Section -->
|
|
<button
|
|
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] transition-colors w-full text-left"
|
|
@click="toggleAgentsList()">
|
|
<span class="text-sm">Agents</span>
|
|
<Icon name="mynaui:chevron-down"
|
|
:class="['w-4 h-4 transition-transform duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transform-origin-center', agentsOpen ? '' : '-rotate-90']" />
|
|
</button>
|
|
|
|
<div ref="agentsListRef" :inert="!agentsOpen"
|
|
:style="{ height: agentsListHeight, opacity: agentsListOpacity, transform: `scale(${agentsListScale})` }"
|
|
class="mt-1 gap-1 flex flex-col transform-origin-center-top overflow-y-hidden">
|
|
<button @click="newAgent" :disabled="creatingAgent"
|
|
class="flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--color-muted)] bg-transparent hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] transition-colors disabled:opacity-50 w-full">
|
|
<div class="h-7 w-7 flex items-center justify-center">
|
|
<Icon v-if="creatingAgent" class="text-4.5" name="svg-spinners:ring-resize" />
|
|
<Icon v-else class="text-4.5" name="mynaui:plus" />
|
|
</div>
|
|
<span>New Agent</span>
|
|
</button>
|
|
|
|
<SidenavItem
|
|
v-for="agent in agents?.map((agent) => agent)?.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime())"
|
|
:to="`/agent/${agent.id}`" :key="agent.id" :name="agent.name" icon="mynaui:check-hexagon" />
|
|
</div>
|
|
</nav>
|
|
</template> |