feat: ditch triplit, move to postgresql + drizzle orm
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { assert } from '~~/utils/assert';
|
||||
import RowVirtualizerFixed from '~/components/RowVirtualizerFixed.vue';
|
||||
import { useFloating, offset, flip, shift, autoUpdate } from '@floating-ui/vue';
|
||||
import { useFloating, offset, flip, shift, autoUpdate, hide } from '@floating-ui/vue';
|
||||
|
||||
const dropdownOpen = ref(false);
|
||||
const dropdownTrigger = ref<HTMLElement | null>(null);
|
||||
@@ -9,9 +8,8 @@ const dropdownContent = ref(null);
|
||||
const activeMenuTopicId = ref<string | null>(null);
|
||||
|
||||
const route = useRoute();
|
||||
const { getAgent } = useAgents();
|
||||
|
||||
const triplit = useTriplitClient();
|
||||
const { getAgent, patchTopicLocally, deleteTopic: deleteAgentTopic } = await useAgents();
|
||||
const { autoRename } = useTopic();
|
||||
|
||||
const navRef = ref<HTMLElement | null>(null);
|
||||
const agentId = computed(() => route.params.id as string);
|
||||
@@ -27,10 +25,10 @@ const topics = computed(() => {
|
||||
return activeAgent.value?.topics || [];
|
||||
})
|
||||
|
||||
const { floatingStyles, placement } = useFloating(dropdownTrigger, dropdownContent, {
|
||||
const { floatingStyles, placement, middlewareData } = useFloating(dropdownTrigger, dropdownContent, {
|
||||
placement: 'bottom-end',
|
||||
whileElementsMounted: autoUpdate,
|
||||
middleware: [offset(6), flip(), shift({ padding: 10 })],
|
||||
middleware: [offset(6), flip(), shift({ padding: 10 }), hide()],
|
||||
transform: false,
|
||||
});
|
||||
|
||||
@@ -52,59 +50,16 @@ const menuTopic = computed(() =>
|
||||
);
|
||||
|
||||
const topicsOpen = ref(true);
|
||||
let activeAutoRenames = reactive(new Map<string, string>());
|
||||
|
||||
const autoRenameTopic = async (topicId: string) => {
|
||||
const { setPage } = useSettings();
|
||||
const { autoRename, AutoRenameError } = useChat(agentId.value);
|
||||
|
||||
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;
|
||||
}
|
||||
autoRename(topicId);
|
||||
}
|
||||
|
||||
const cancelAutoRename = async (topicId: string) => {
|
||||
await triplit.update('topics', topicId, {
|
||||
renaming: false,
|
||||
});
|
||||
|
||||
const renameId = activeAutoRenames.get(topicId);
|
||||
if (!renameId) return;
|
||||
|
||||
await $fetch(`/api/auto-rename/cancel`, {
|
||||
body: {
|
||||
renameId,
|
||||
},
|
||||
// TODO: make this more optimistic
|
||||
await $fetch(`/api/topic/${topicId}/auto-rename/cancel`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
activeAutoRenames.delete(topicId);
|
||||
}
|
||||
|
||||
const renameTopicId = ref<string | null>(null);
|
||||
@@ -123,10 +78,16 @@ const startRename = (topicId: string, currentName: string) => {
|
||||
|
||||
const saveRename = async () => {
|
||||
if (renameTopicId.value && newTopicName.value.trim()) {
|
||||
await triplit.update('topics', renameTopicId.value, {
|
||||
name: newTopicName.value.trim()
|
||||
patchTopicLocally(renameTopicId.value, { name: newTopicName.value.trim() });
|
||||
|
||||
$fetch(`/api/topic/${renameTopicId.value}`, {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
name: newTopicName.value.trim(),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
cancelRename();
|
||||
};
|
||||
|
||||
@@ -143,9 +104,8 @@ const deleteTopic = async (topicId: string) => {
|
||||
await navigateTo('/');
|
||||
}
|
||||
}
|
||||
await triplit.delete('topics', topicId);
|
||||
|
||||
// TODO: deeply delete all messages, generations, and message_parts in the topic
|
||||
deleteAgentTopic(agentId.value!, topicId);
|
||||
};
|
||||
|
||||
const handleNavClick = (e: MouseEvent) => {
|
||||
@@ -193,7 +153,7 @@ onMounted(() => {
|
||||
|
||||
<!-- 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">
|
||||
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>
|
||||
<span
|
||||
class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
@@ -207,7 +167,7 @@ onMounted(() => {
|
||||
<template v-slot="{ item: topic }">
|
||||
<a :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
|
||||
:href="`/agent/${agentId}/topic/${topic.id}`" :aria-label="topic.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)]"
|
||||
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)]"
|
||||
:class="{ 'bg-[var(--color-hover)]': route.params.topicId === topic.id }">
|
||||
<input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
|
||||
v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
|
||||
@@ -221,7 +181,7 @@ onMounted(() => {
|
||||
</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)]">
|
||||
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>
|
||||
@@ -237,32 +197,37 @@ onMounted(() => {
|
||||
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-if="dropdownOpen" ref="dropdownContent" :style="{
|
||||
...floatingStyles,
|
||||
visibility: middlewareData.hide?.referenceHidden
|
||||
? 'hidden'
|
||||
: 'visible',
|
||||
}" 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">
|
||||
|
||||
|
||||
<!-- Dynamic content based on menuTopic -->
|
||||
<template v-if="menuTopic">
|
||||
<button v-if="menuTopic.renaming" @click="cancelAutoRename(menuTopic.id); closeDropdown()"
|
||||
class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
|
||||
class="text-left px-3 py-1.5 text-sm rounded-lg @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
|
||||
Cancel Auto Rename
|
||||
</button>
|
||||
<button v-else @click="autoRenameTopic(menuTopic.id); closeDropdown()"
|
||||
class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
|
||||
class="text-left px-3 py-1.5 text-sm rounded-lg @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
|
||||
Auto Rename
|
||||
</button>
|
||||
|
||||
<button :disabled="menuTopic.renaming ?? false"
|
||||
@click="startRename(menuTopic.id, menuTopic.name); closeDropdown()"
|
||||
class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
|
||||
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="deleteTopic(menuTopic.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">
|
||||
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>
|
||||
@@ -271,4 +236,4 @@ onMounted(() => {
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</nav>
|
||||
</template>
|
||||
</template>
|
||||
Reference in New Issue
Block a user