zoeissleeping
59bb7fbc12
This is once again a huge commit, but its mostly performance improvements along with some bug fixes and refactoring. It also includes changes to the theming systems. I'm still not 100% happy with the theming system, but its better than before. Model fetching has been dramatically improved! Nearly all the important computation and pre-processing has been moved to the server. This has also somehow fixed the way model details are loaded, which was causing many models to be missing their details despite models.dev having them. The markdown renderer has once again been changed, but I'm mostly certain that this is the last time major changes will be made to it. The renderer is not spamming components, bloating memory usage, and its not using a bug prone custom written chunking system. There's also a lot more that I haven't mentioned and honestly forgot. I need to get better commit hygiene tbh.
236 lines
8.9 KiB
Vue
236 lines
8.9 KiB
Vue
<script setup lang="ts">
|
|
import { assert } from '~~/utils/assert';
|
|
|
|
const route = useRoute();
|
|
const { openDropdown, dropdownState, closeDropdown } = useDropdown();
|
|
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 activeAgent.value.topics;
|
|
});
|
|
|
|
const topicsOpen = ref(true);
|
|
let activeAutoRenames = reactive(new Map<string, string>());
|
|
|
|
const autoRenameTopic = async (topicId: string) => {
|
|
const { setPage } = useSettings();
|
|
const { autoRename, AutoRenameError } = 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 res = await autoRename(topicId, firstMessage.content);
|
|
if (res.ok) {
|
|
activeAutoRenames.set(topicId, res.data);
|
|
return;
|
|
}
|
|
|
|
switch (res.error) {
|
|
case AutoRenameError.NoModelSelected:
|
|
case AutoRenameError.ModelDisabled:
|
|
case AutoRenameError.AutoRenameDisabled: {
|
|
setPage('systemAssistants');
|
|
} break;
|
|
case AutoRenameError.NoModelFound:
|
|
case AutoRenameError.DatabaseOperationFailed:
|
|
case AutoRenameError.FailedToGenerate:
|
|
case AutoRenameError.FailedToDecryptProviderApiKey: {
|
|
console.error('Failed to auto-rename:', res.error);
|
|
|
|
await triplit.update('topics', topicId, {
|
|
renaming: false,
|
|
});
|
|
|
|
assert('flush' in triplit);
|
|
await triplit.flush();
|
|
} break;
|
|
}
|
|
}
|
|
|
|
const cancelAutoRename = async (topicId: string) => {
|
|
await triplit.update('topics', topicId, {
|
|
renaming: false,
|
|
});
|
|
|
|
const renameId = activeAutoRenames.get(topicId);
|
|
if (!renameId) return;
|
|
|
|
await $fetch(`/api/topic/auto-rename/cancel/${renameId}`, {
|
|
method: 'POST',
|
|
});
|
|
|
|
activeAutoRenames.delete(topicId);
|
|
}
|
|
|
|
const renameTopicId = ref<string | null>(null);
|
|
const newTopicName = ref('');
|
|
|
|
const startRename = (topicId: string, currentName: string) => {
|
|
renameTopicId.value = topicId;
|
|
newTopicName.value = currentName;
|
|
nextTick(() => {
|
|
const input = document.getElementById('topic-rename-input') as HTMLInputElement | null;
|
|
if (input) {
|
|
input.focus();
|
|
}
|
|
})
|
|
};
|
|
|
|
const saveRename = async () => {
|
|
if (renameTopicId.value && newTopicName.value.trim()) {
|
|
await triplit.update('topics', renameTopicId.value, {
|
|
name: newTopicName.value.trim()
|
|
});
|
|
}
|
|
cancelRename();
|
|
};
|
|
|
|
const cancelRename = () => {
|
|
renameTopicId.value = null;
|
|
newTopicName.value = '';
|
|
};
|
|
|
|
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
|
|
};
|
|
|
|
const handleNavClick = (e: MouseEvent) => {
|
|
const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
|
|
if (!trigger) return;
|
|
|
|
const topicId = trigger.dataset.topicId || (trigger.closest('[data-topic-id]') as HTMLElement | null)?.dataset.topicId;
|
|
if (!topicId) return;
|
|
|
|
const action = trigger.dataset.action;
|
|
if (action === 'navigate') {
|
|
if (e.metaKey || e.ctrlKey || e.shiftKey) return;
|
|
|
|
e.preventDefault();
|
|
return navigateTo(`/agent/${route.params.id}/topic/${topicId}`);
|
|
}
|
|
|
|
if (action === 'toggle-dropdown') {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (dropdownState.open) {
|
|
closeDropdown();
|
|
return;
|
|
}
|
|
|
|
const itemsFactory = () => {
|
|
const items = [];
|
|
const isRenaming = activeAutoRenames.has(topicId) && topics.value?.find(t => t.id === topicId)?.renaming;
|
|
|
|
if (isRenaming) {
|
|
items.push({
|
|
label: 'Cancel Auto Rename',
|
|
onClick: () => cancelAutoRename(topicId)
|
|
});
|
|
} else {
|
|
items.push({
|
|
label: 'Auto Rename',
|
|
onClick: () => autoRenameTopic(topicId)
|
|
});
|
|
}
|
|
|
|
items.push({
|
|
label: 'Rename',
|
|
disabled: isRenaming ?? false,
|
|
onClick: () => startRename(topicId, topics.value?.find(t => t.id === topicId)?.name || '')
|
|
});
|
|
|
|
items.push({
|
|
label: 'Delete',
|
|
danger: true,
|
|
onClick: () => deleteTopic(topicId)
|
|
});
|
|
|
|
return items;
|
|
};
|
|
|
|
openDropdown(e, itemsFactory, { minWidth: '120px', placement: 'right' });
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
// simply preload the topic page
|
|
preloadRouteComponents(`/agent/${route.params.id}/topic/42`);
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
unsubscribeAgents?.();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="flex flex-col gap-1">
|
|
|
|
<!-- Agent Info Link -->
|
|
<div class="mt-2 flex flex-col">
|
|
<SidenavItem :to="`/agent/${route.params.id}/profile`" name="Agent Info" icon="mynaui:info-square"
|
|
:active="route.path.endsWith('/profile')" />
|
|
|
|
<!-- Topics Section -->
|
|
<button @click="topicsOpen = !topicsOpen"
|
|
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] 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>
|
|
|
|
<Collapsible :is-open="topicsOpen">
|
|
<div @click="handleNavClick"
|
|
class="mt-1 gap-1 flex flex-col transform-origin-center-top [content-visibility:auto] [contain-intrinsic-size:0_36px]">
|
|
<a v-for="topic in topics" :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
|
|
:href="`/agent/${route.params.id}/topic/${topic.id}`" :aria-label="topic.name" :class="[
|
|
'group relative decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9',
|
|
'px-2',
|
|
topic.id === route.params.topicId
|
|
? 'text-[var(--text-primary)] bg-[var(--color-hover)]'
|
|
: 'text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
|
|
]">
|
|
<div class="flex items-center gap-2 max-w-full flex-1">
|
|
<div class="flex justify-between items-center w-full">
|
|
<input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
|
|
v-model="newTopicName" @keydown.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" />
|
|
<div v-else-if="topic.renaming" class="flex w-full">
|
|
<Icon name="svg-spinners:3-dots-fade" class="text-6" />
|
|
</div>
|
|
<span v-else
|
|
class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
|
{{ topic.name }}
|
|
</span>
|
|
|
|
<div data-action="toggle-dropdown"
|
|
class="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-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<svg class="pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="18"
|
|
height="18" viewBox="0 0 24 24">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</Collapsible>
|
|
</div>
|
|
</nav>
|
|
</template>
|