zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Performance enhancements galore! New themining system

Browse Source 
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.
This commit is contained in:
Zoe
2026-02-19 23:44:23 -06:00
parent 32a4f7f95d
commit 59bb7fbc12
85 changed files with 3523 additions and 2039 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/agent/[id]/index.vue
+47 -23
View File
@@ -1,7 +1,10 @@
<script setup lang="ts">
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
import type { ModelWithProvider } from '~/composables/useModels';
const triplit = useTriplitClient();
const route = useRoute();
const inputValue = ref('');
const pendingMessage = ref<Message | null>(null);
const { createTopic, sendMessage, autoRename } = useChat(route.params.id as string);
@@ -49,11 +52,38 @@ const handleSubmit = async (message: string, model: ModelWithProvider | null) =>
const topic = await createTopic();
if (!topic) throw new Error('Failed to create topic');
autoRename(topic.id, message);
autoRename(topic.id, message).then(async res => {
if (res.ok === false) {
console.error('Failed to auto-rename:', res.error);
await triplit.update('topics', topic.id, {
renaming: false,
});
return;
}
});
await navigateTo(`/agent/${route.params.id}/topic/${topic.id}`);
return sendMessage(message, topic, [], agent.value!, model.provider, model);
return sendMessage(message, topic, [], agent.value!, model.provider, model).then(async res => {
if (res.ok === false) {
console.error('Failed to send message:', res.error);
pendingMessage.value = null;
await navigateTo(`/agent/${route.params.id}`);
await triplit.delete('topics', topic.id);
const chatInput = document.getElementById('chat') as HTMLInputElement;
if (chatInput) {
chatInput.value = message;
chatInput.dispatchEvent(new Event('input'));
nextTick(() => {
chatInput.focus();
});
}
}
});
};
onUnmounted(() => {
@@ -64,28 +94,22 @@ onUnmounted(() => {
<template>
<div class="h-full w-full">
<!-- chat pane -->
<div class="flex flex-col w-full px-4 overflow-y-auto h-full"
style="scrollbar-width: thin; scrollbar-color: #888 transparent;" ref="chatPane">
<div class="flex-grow w-full flex justify-center">
<div class="flex h-full max-w-4xl w-full flex-col gap-2"
:class="pendingMessage === null ? 'justify-end' : ''">
<div v-if="pendingMessage === null">
<h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
<p class="mb-28 text-[var(--color-muted)]">Select a topic to continue or create a new one</p>
</div>
<div class="opacity-70" v-else>
<Message :message="pendingMessage" />
</div>
<div
class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
<div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
<div class="w-full px-px flex flex-col flex-grow gap-2"
:class="pendingMessage === null ? 'justify-end pb-28' : 'pb-9'">
<div v-if="pendingMessage === null">
<h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
<p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
</div>
<div v-else class="opacity-70">
<Message :message="pendingMessage" />
</div>
</div>
<div class="sticky max-h-full z-10 bottom-0 w-full flex justify-center">
<div class="pb-4 w-full max-w-4xl bg-[var(--color-neutral)] rounded-t-2xl">
<ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
:providers="providers.filter(p => p.enabled)" @submit="handleSubmit"></ChatInput>
</div>
<div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
<ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
:agent="agent" :providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" />
</div>
</div>
</div>
app/pages/agent/[id]/profile.vue
+3 -3
View File
@@ -49,13 +49,13 @@ onUnmounted(() => {
<Icon v-else name="mynaui:check-hexagon" class="text-16" />
</div>
<input @input="handleInput" placeholder="Agent Name..."
class="placeholder:text-[var(--color-highlight)] w-full bg-transparent rounded-none border-b-4 border-b-[var(--color-highlight-high)] text-12 p-0"
class="placeholder:text-[var(--text-tertiary)] w-full bg-transparent rounded-none border-b-4 border-b-[var(--color-border)] text-12 p-0"
type="text" :value="agent?.name" />
</div>
<div class="flex flex-col gap-2 w-full h-full mb-14">
<label class="text-sm text-[var(--color-text-subtle)]">System Message</label>
<label class="text-sm text-[var(--text-secondary)]">System Message</label>
<textarea placeholder="You are a helpful assistant."
class="p-4 w-full h-full resize-none bg-transparent rounded-lg border border-[var(--color-highlight)]"
class="p-4 w-full h-full resize-none bg-transparent rounded-lg border border-[var(--color-border)]"
:value="agent?.systemPrompt" @input="changeSystemPrompt"></textarea>
</div>
</div>
app/pages/agent/[id]/topic/[topicId].vue
+81 -68
View File
@@ -1,14 +1,17 @@
<script setup lang="ts">
import type { Message, MessageEntity } from '~/composables/useChat';
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
import type schema from '#triplit/schema';
import type { Entity } from '@triplit/client';
import type { ModelWithProvider } from '~/composables/useModels';
const rootStart = Date.now();
const triplit = useTriplitClient();
const chatPane = ref<HTMLElement | null>(null);
const chatPaneWrapper = ref<HTMLElement | null>(null);
const inputValue = ref('');
const route = useRoute();
const { sendMessage, regenerateMessage } = useChat(route.params.id as string);
const { getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
const { providers, unsubscribe: unsubscribeModels, allModels } = await useModels();
const { providers, allModels, unsubscribe: unsubscribeModels } = await useModels();
const agent = computed(() => {
if (route.params.id === null || typeof route.params.id !== 'string') {
@@ -59,39 +62,42 @@ const [
]);
const topic = computed(() => {
if (!rawMessages.value || !rawTopic.value || !rawTopic.value[0]) return null;
if (!rawMessages.value || !rawTopic.value?.[0]) return null;
// Build the messages tree manually for maximum performance
const messagesMap = new Map();
const partsByMessage = new Map<string, Entity<typeof schema, 'message_parts'>[]>();
// First pass: Create message objects with parts arrays
for (const msg of rawMessages.value) {
messagesMap.set(msg.id, {
...msg,
parts: [],
children: [],
generation: rawGenerations.value?.find(g => g.id === msg.generationId) ?? null
});
}
// Second pass: Attach parts to messages
// Group parts by message ID once
if (rawParts.value) {
for (const part of rawParts.value) {
const msg = messagesMap.get(part.messageId);
if (msg) {
// Filter empty parts here if needed, or just push
if (part.content !== '' || part.toolCall !== null) {
msg.parts.push(part);
}
if (!partsByMessage.has(part.messageId)) {
partsByMessage.set(part.messageId, []);
}
if (part.content !== '' || part.toolCall !== null) {
partsByMessage.get(part.messageId)!.push(part);
}
}
}
// Third pass: Build children relationships
const rootMessages = [];
const generationsMap = new Map(
rawGenerations.value?.map(g => [g.id, g]) ?? []
);
// Single pass to build messages
for (const msg of rawMessages.value) {
messagesMap.set(msg.id, {
...msg,
parts: partsByMessage.get(msg.id) ?? [],
children: [],
generation: generationsMap.get(msg.generationId!) ?? null
});
}
// Build tree
const rootMessages: Message[] = [];
for (const msg of messagesMap.values()) {
if (msg.parentMessageId && messagesMap.has(msg.parentMessageId)) {
messagesMap.get(msg.parentMessageId).children.push(msg);
messagesMap.get(msg.parentMessageId)!.children.push(msg);
} else {
rootMessages.push(msg);
}
@@ -104,26 +110,7 @@ const topic = computed(() => {
};
});
if (!topic.value) navigateTo(`/agent/${route.params.id}`);
const activeGeneration = computed(() => {
if (topic.value === null) return null;
return topic.value?.generations?.find((generation) => generation.status === 'pending') ?? null;
});
const { scrollToBottom } = useAutoScroll(chatPane);
onMounted(() => {
scrollToBottom('instant');
});
const handleCancel = async () => {
await $fetch(`/api/chat/cancel/${activeGeneration.value!.id}`, {
method: 'POST',
});
};
const handleSubmit = async (message: string, model: ModelWithProvider | null) => {
const submitMessage = async (message: string, model: ModelWithProvider | null) => {
if (!model) {
console.error('No model selected');
return;
@@ -132,6 +119,14 @@ const handleSubmit = async (message: string, model: ModelWithProvider | null) =>
const res = await sendMessage(message, topic.value!, focusedMessageTree.value, agent.value!, model.provider, model);
if (!res.ok) {
console.error('Failed to send message:', res.error);
const chatInput = document.getElementById('chat') as HTMLInputElement | null;
console.log("chat input", chatInput, message);
if (chatInput) {
inputValue.value = message;
nextTick(() => {
chatInput.focus();
});
}
return;
}
@@ -139,7 +134,7 @@ const handleSubmit = async (message: string, model: ModelWithProvider | null) =>
};
const focusedMessageTree = computed(() => {
const tree: MessageEntity[] = [];
const tree: Readonly<MessageEntity>[] = [];
for (const message of topic.value?.messages || []) {
if (message.focusedIndex !== undefined && message.focusedIndex !== null) {
if (message.focusedIndex === 0) {
@@ -156,7 +151,7 @@ const focusedMessageTree = computed(() => {
})
const handleRegenerate = async (message: Message) => {
if (!agent.value.defaultModelId) {
if (!agent.value!.defaultModelId) {
console.error('No model selected');
return;
}
@@ -172,7 +167,7 @@ const handleRegenerate = async (message: Message) => {
messageId = message.id;
}
const model = allModels.value.find(m => m.id === agent.value.defaultModelId);
const model = allModels.value.find(m => m.id === agent.value!.defaultModelId);
if (!model) {
console.error('Model not found');
return;
@@ -254,37 +249,55 @@ const handleDelete = async (rootMessage: Message) => {
});
}
const activeGeneration = computed(() => {
if (topic.value === null) return null;
return topic.value?.generations?.find((generation) => generation.status === 'pending') ?? null;
});
const { scrollToBottom } = useAutoScroll(chatPaneWrapper);
onMounted(() => {
scrollToBottom('instant');
});
const handleCancel = async () => {
await $fetch(`/api/chat/cancel/${activeGeneration.value?.id}`, {
method: 'POST',
});
};
console.log("full page render took", Date.now() - rootStart);
onUnmounted(() => {
unsubscribeTopic?.();
unsubscribeAgents?.();
unsubscribeMessages?.();
unsubscribeParts?.();
unsubscribeGenerations?.();
unsubscribeAgents?.();
unsubscribeModels?.();
});
</script>
<template>
<div class="h-full w-full">
<!-- chat pane -->
<div class="flex flex-col w-full px-4 overflow-y-auto h-full"
style="scrollbar-width: thin; scrollbar-color: #888 transparent;" ref="chatPane">
<div class="flex-grow w-full flex justify-center">
<div class="max-w-4xl w-full flex flex-col gap-2 pb-9"
v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
<Message v-for="message in topic.messages" @delete="handleDelete(message)" :key="message.id"
@regenerate="handleRegenerate(message)" :message="message" />
</div>
<!-- chat pane -->
<div ref="chatPaneWrapper"
class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
<div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
<div class="w-full px-px flex flex-col flex-grow gap-2 pb-9">
<Suspense>
<template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
<Message v-for="message in topic.messages" :key="message.id" :message="message"
v-memo="[message.id, message.parts?.length, message.children, message.focusedIndex, message.content]"
@delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
</template>
</Suspense>
</div>
<div class="sticky max-h-full z-10 bottom-0 w-full flex justify-center">
<div class="pb-4 w-full max-w-4xl bg-[var(--color-neutral)] rounded-t-2xl">
<ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
:loading="activeGeneration !== null" :agent="agent"
:providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" @cancel="handleCancel">
</ChatInput>
</div>
<div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
<ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
:loading="activeGeneration !== null" :agent="agent" :providers="providers?.filter(p => p.enabled)"
@submit="submitMessage" @cancel="handleCancel" />
</div>
</div>
</div>
</template>
</template>