197 lines
9.0 KiB
Vue
197 lines
9.0 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute();
|
|
const topicsListRef = ref<HTMLElement | null>(null);
|
|
const topicsListHeight = ref('auto');
|
|
const topicsListOpacity = ref(1);
|
|
const topicsListScale = ref(1);
|
|
const { getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
|
|
|
|
const triplit = useTriplitClient();
|
|
|
|
const activeAgent = computed(() => getAgent(route.params.id as string));
|
|
|
|
const topics = computed(() => {
|
|
if (activeAgent.value === undefined) return [];
|
|
// return the todos but sorted and in a new array do not add messages or anything to the object, JUST SORT IT
|
|
return activeAgent.value.topics
|
|
.map((topic) => topic)
|
|
.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime())
|
|
.reverse();
|
|
});
|
|
|
|
const routeParts = computed(() => {
|
|
return route.path.replace('/agent/', '').split('/');
|
|
});
|
|
|
|
if (routeParts.value.length < 1) navigateTo('/');
|
|
|
|
const pageInfo = computed(() => {
|
|
// `/agent/agent_[uuid]` or `/agent/agent_[uuid]/topic/...`
|
|
if (route.path.startsWith('/agent/') && !route.path.includes('/profile')) {
|
|
return 'conversation';
|
|
}
|
|
|
|
// `/agent/agent_[uuid]/profile`
|
|
if (route.path.endsWith('/profile')) {
|
|
return 'agent-profile';
|
|
}
|
|
});
|
|
|
|
const topicsOpen = ref(true);
|
|
|
|
function easeInOutQuad(x: number): number {
|
|
return x < 0.5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2;
|
|
}
|
|
|
|
const toggleAgentsList = () => {
|
|
if (!topicsListRef.value) return;
|
|
const animationLength = 200;
|
|
let animationStart: number | null = null;
|
|
|
|
let startHeight: number;
|
|
const startOpacity = topicsListOpacity.value;
|
|
const startScale = topicsListScale.value;
|
|
if (topicsListHeight.value === 'auto') {
|
|
startHeight = topicsListRef.value.clientHeight;
|
|
} else {
|
|
startHeight = Number(topicsListHeight.value.replace('px', ''));
|
|
}
|
|
|
|
const targetHeight = topicsOpen.value ? 0 : topicsListRef.value.scrollHeight;
|
|
const targetOpacity = topicsOpen.value ? 0 : 1;
|
|
const targetScale = topicsOpen.value ? 0.95 : 1;
|
|
topicsOpen.value = !topicsOpen.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);
|
|
|
|
topicsListOpacity.value = currentOpacity;
|
|
topicsListScale.value = currentScale;
|
|
topicsListHeight.value = `${currentHeight}px`;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(animate);
|
|
} else {
|
|
if (topicsOpen.value) {
|
|
topicsListHeight.value = 'auto';
|
|
}
|
|
}
|
|
};
|
|
|
|
requestAnimationFrame(animate);
|
|
};
|
|
|
|
const autoRenameTopic = async (topicId: string) => {
|
|
const { setPage } = useSettings();
|
|
const { autoRename } = useChat(route.params.id as string);
|
|
|
|
const firstMessage = await triplit.fetchOne(triplit.query('messages').Where('topicId', '=', topicId).Order('createdAt', 'ASC').Limit(1));
|
|
if (!firstMessage) return;
|
|
|
|
const success = await autoRename(topicId, firstMessage.content);
|
|
if (!success) {
|
|
setPage('systemAssistants');
|
|
}
|
|
}
|
|
|
|
const renameTopic = (topicId: string) => {
|
|
console.log('renameTopic', topicId);
|
|
};
|
|
|
|
const deleteTopic = async (topicId: string) => {
|
|
if (route.params.topicId === topicId) {
|
|
if (route.params.id) {
|
|
await navigateTo(`/agent/${route.params.id}`);
|
|
} else {
|
|
await navigateTo('/');
|
|
}
|
|
}
|
|
await triplit.delete('topics', topicId);
|
|
|
|
// TODO: deeply delete all messages, generations, and message_parts in the topic
|
|
};
|
|
|
|
onUnmounted(() => {
|
|
unsubscribeAgents?.();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="flex flex-col gap-1">
|
|
|
|
<!-- Agent Info Link -->
|
|
<div class="mt-2 flex flex-col">
|
|
<SidenavItem :to="`/agent/${routeParts[0]}/profile`" name="Agent Info" icon="mynaui:info-square"
|
|
:active="pageInfo === 'agent-profile'" />
|
|
|
|
<!-- Topics Section -->
|
|
<button @click="toggleAgentsList"
|
|
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">
|
|
<span class="text-sm font-medium">Topics</span>
|
|
<Icon name="mynaui:chevron-down" :class="['w-4 h-4', topicsOpen ? '' : '-rotate-90']" />
|
|
</button>
|
|
|
|
<div ref="topicsListRef" :inert="!topicsOpen" :class="{ 'overflow-y-hidden': !topicsOpen }"
|
|
:style="{ height: topicsListHeight, opacity: topicsListOpacity, transform: `scale(${topicsListScale})` }"
|
|
class="mt-1 gap-1 flex flex-col transform-origin-center-top">
|
|
<NuxtLink v-if="activeAgent?.topics !== undefined" v-for="topic in topics"
|
|
:to="`/agent/${activeAgent.id}/topic/${topic.id}`" :aria-label="topic.name" :class="[
|
|
'group relative decoration-none text-[var(--color-muted)] flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9',
|
|
'px-2',
|
|
topic.id === route.params.topicId
|
|
? 'text-[var(--color-text)] bg-[var(--color-highlight)] hover:bg-[var(--color-highlight-high)] focus-visible:bg-[var(--color-highlight-high)]'
|
|
: 'hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)]'
|
|
]">
|
|
<div class="flex items-center gap-2 max-w-full flex-1">
|
|
<div v-if="!topic.renaming" class="flex justify-between items-center w-full">
|
|
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
|
{{ topic.name }}
|
|
</span>
|
|
|
|
<Dropdown class="shrink-0 text-[var(--color-text)]" verticality="descending"
|
|
placement="right">
|
|
<template #trigger="{ toggle }">
|
|
<div dots @click.prevent="toggle"
|
|
class="opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
|
|
viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ -->
|
|
<path fill="currentColor"
|
|
d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" />
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
<template #content="{ toggle }">
|
|
<div class="shadow-lg rounded p-1 flex flex-col min-w-[120px] gap-1">
|
|
<button @click.prevent="autoRenameTopic(topic.id); toggle()"
|
|
class="text-left px-3 py-1.5 text-sm hover:bg-[var(--color-highlight)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
Auto Rename
|
|
</button>
|
|
<button @click.prevent="renameTopic(topic.id); toggle()"
|
|
class="text-left px-3 py-1.5 text-sm hover:bg-[var(--color-highlight)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
Rename
|
|
</button>
|
|
<button @click.prevent="deleteTopic(topic.id); toggle()"
|
|
class="text-left px-3 py-1.5 text-sm text-red-600 hover:bg-red-600/20 rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
<div v-else class="flex w-full">
|
|
<Icon name="svg-spinners:3-dots-fade" class="text-6" />
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|