Performance enhancements galore! New themining system

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.
2026-02-19 23:44:23 -06:00
parent 32a4f7f95d
commit 59bb7fbc12
85 changed files with 3523 additions and 2039 deletions
@@ -4,7 +4,14 @@ import type { Entity } from "@triplit/client";
 export const useAgents = async () => {
    const triplit = useTriplitClient();

-    const { results: agents, unsubscribe } = await useQuery('agents', triplit, triplit.query('agents').Include('topics'));
+    const { results: agents, unsubscribe } = await useQuery(
+        'agents',
+        triplit,
+        triplit
+            .query('agents')
+            .Include('topics', (rel) => rel('topics').Order('createdAt', 'DESC'))
+            .Order('createdAt', 'ASC')
+    );

    const createAgent = async (): Promise<Readonly<Entity<typeof schema, 'agents'>> | null> => {
        const { user } = useAuth();
@@ -1,8 +1,9 @@
 import type schema from "#triplit/schema";
 import type { Entity } from "@triplit/client";
 import type { ModelMessage } from "ai";
+import { nanoid } from "nanoid";
 import { decrypt, base64ToUint8Array } from "~/utils/crypto";
-import { type Result, Ok, Err } from "~~/types/result";
+import { type Result, Ok, Err, attempt } from "~~/types/result";
 import { assert } from "~~/utils/assert";

 export type MessageEntity = Entity<typeof schema, 'messages'> & {
@@ -22,6 +23,7 @@ export enum ChatErrorType {
    NoAgent,
    NoUser,
    DatabaseOperationFailed,
+    FailedToDecryptProviderApiKey,
    GenerationFailed,
    MarshallFailed,
    NoProviderApiKey,
@@ -195,22 +197,27 @@ export const useChat = (agentId: string) => {
    ): Promise<Result<void, ChatErrorType>> => {
        let providerApiKey: string | undefined = undefined;
        if (provider.config.apiKey !== undefined) {
-            const key = await crypto.subtle.importKey(
-                "jwk",
-                JSON.parse(window.localStorage.getItem("encryptionKey")!),
-                "AES-GCM",
-                false,
-                ["encrypt", "decrypt"]
-            )
+            try {
+                const key = await crypto.subtle.importKey(
+                    "jwk",
+                    JSON.parse(window.localStorage.getItem("encryptionKey")!),
+                    "AES-GCM",
+                    false,
+                    ["encrypt", "decrypt"]
+                )

-            providerApiKey = await decrypt(
-                key,
-                base64ToUint8Array(provider.config.apiKey)
-            );
+                providerApiKey = await decrypt(
+                    key,
+                    base64ToUint8Array(provider.config.apiKey)
+                );
+            } catch (error) {
+                console.error('Failed to decrypt provider API key:', error);
+                return Err(ChatErrorType.FailedToDecryptProviderApiKey);
+            }
        }

        try {
-            $fetch('/api/chat/generate', {
+            await $fetch('/api/chat/generate', {
                method: 'POST',
                body: {
                    messages,
@@ -249,14 +256,17 @@ export const useChat = (agentId: string) => {
            return Err(ChatErrorType.NoUser);
        }

+        const messageId = nanoid();
        const newMessage = await triplit.insert('messages', {
+            id: messageId,
            userId: user.value.id,
            topicId: topic.id,
            createdAt: new Date().toISOString(),
            content: message,
            role: 'user',
-        }).catch(error => {
+        }).catch(async error => {
            console.error('Failed to insert message:', error);
+            await triplit.delete('messages', messageId);
            return Err(ChatErrorType.DatabaseOperationFailed);
        }) as Message;

@@ -278,7 +288,14 @@ export const useChat = (agentId: string) => {
            presence_penalty: 0,
        };

-        return startGeneration(messages.data, args, topic, provider, model)
+        return startGeneration(messages.data, args, topic, provider, model).then(async res => {
+            if (res.ok === false) {
+                console.error('Failed to start generation:', res.error);
+                await triplit.delete('messages', messageId);
+            }
+
+            return res;
+        });
    };

    /**
@@ -373,60 +390,90 @@ export const useChat = (agentId: string) => {
        return startGeneration(messages.data, args, topic, provider, model, parentMessageId);
    }

-    const autoRename = async (topicId: string, prompt: string) => {
+    enum AutoRenameError {
+        AutoRenameDisabled = 0,
+        NoModelSelected,
+        NoModelFound,
+        ModelDisabled,
+        DatabaseOperationFailed,
+        FailedToDecryptProviderApiKey,
+        FailedToGenerate,
+    }
+    const autoRename = async (topicId: string, prompt: string): Promise<Result<string, AutoRenameError>> => {
        const { settings } = await useUserSettings();

        console.log(settings.value);

        if (!settings.value.systemAssistants.rename.enabled) {
-            return false;
+            return Err(AutoRenameError.AutoRenameDisabled);
        }

        if (!settings.value.systemAssistants.rename.modelId) {
-            return false;
+            return Err(AutoRenameError.NoModelSelected);
        }

        await triplit.update('topics', topicId, {
            renaming: true
        });

-        const model = await triplit.fetchOne(triplit.query('models').Where('id', '=', settings.value.systemAssistants.rename.modelId).Include('provider'));
+        const modelResult = await attempt(triplit.fetchOne(triplit.query('models').Where('id', '=', settings.value.systemAssistants.rename.modelId).Include('provider')));
+
+        if (modelResult.ok === false) {
+            return Err(AutoRenameError.DatabaseOperationFailed);
+        }
+
+        const model = modelResult.data;

        if (!model) {
-            return false;
+            return Err(AutoRenameError.NoModelFound);
+        }
+
+        if (model.enabled === false || model.provider?.enabled === false) {
+            return Err(AutoRenameError.ModelDisabled)
        }

        let providerApiKey: string | undefined = undefined;
        if (model.provider!.config.apiKey !== undefined) {
-            const key = await crypto.subtle.importKey(
-                "jwk",
-                JSON.parse(window.localStorage.getItem("encryptionKey")!),
-                "AES-GCM",
-                false,
-                ["encrypt", "decrypt"]
-            )
+            try {
+                const key = await crypto.subtle.importKey(
+                    "jwk",
+                    JSON.parse(window.localStorage.getItem("encryptionKey")!),
+                    "AES-GCM",
+                    false,
+                    ["encrypt", "decrypt"]
+                )

-            providerApiKey = await decrypt(
-                key,
-                base64ToUint8Array(model.provider!.config.apiKey)
-            );
+                providerApiKey = await decrypt(
+                    key,
+                    base64ToUint8Array(model.provider!.config.apiKey)
+                );
+            } catch (error) {
+                console.error('Failed to decrypt provider API key:', error);
+                return Err(AutoRenameError.FailedToDecryptProviderApiKey);
+            }
        }

-        await $fetch(`/api/topic/auto-rename`, {
-            method: 'POST',
-            body: JSON.stringify({
-                modelId: model.id,
-                topicId,
-                prompt,
-                providerApiKey,
-            }),
-        });
+        try {
+            const res = await $fetch(`/api/topic/auto-rename`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    modelId: model.id,
+                    topicId,
+                    prompt,
+                    providerApiKey,
+                }),
+            });

-        return true;
+            return Ok(res.renameId);
+        } catch (error) {
+            console.error('Failed to auto-rename:', error);
+            return Err(AutoRenameError.FailedToGenerate);
+        }
    }

    return {
        sendMessage,
+        AutoRenameError,
        autoRename,
        regenerateMessage,
        createTopic,
@@ -0,0 +1,77 @@
+import type { DropdownItem } from "~/types/dropdown"
+
+interface DropdownOptions {
+    placement?: 'right' | 'left' | 'center';
+    verticality?: 'ascending' | 'descending';
+    width?: string | number;
+    minWidth?: string;
+    maxWidth?: string;
+}
+
+interface DropdownState {
+    open: boolean;
+    x: number;
+    y: number;
+    itemsFactory: (() => DropdownItem[]) | null;
+    options: DropdownOptions | null;
+}
+
+const dropdownState = reactive<DropdownState>({
+    open: false,
+    x: 0,
+    y: 0,
+    itemsFactory: null,
+    options: null,
+})
+
+export const useDropdown = () => {
+    const openDropdown = (e: MouseEvent, itemsFactory: () => DropdownItem[], options?: DropdownOptions) => {
+        // TODO: take in placement logic and prefered verticality, and measure the space
+        // available in the direction of the prefered verticality, and if it doesnt fit
+        // in the direction of the placement, flip the placement
+        const rect = (e.target as HTMLElement).getBoundingClientRect()
+
+        dropdownState.x = rect.left
+        dropdownState.y = rect.bottom
+        if (options) {
+            switch (options.placement) {
+                case 'right':
+                    dropdownState.x = rect.right
+                    dropdownState.y = rect.bottom
+                    break;
+                case 'left':
+                    dropdownState.x = rect.left
+                    dropdownState.y = rect.bottom
+                    break;
+                case 'center':
+                    dropdownState.x = rect.left + rect.width / 2
+                    dropdownState.y = rect.bottom
+                    break;
+            }
+
+            switch (options.verticality) {
+                case 'ascending':
+                    dropdownState.y = rect.top;
+                    break;
+                case 'descending':
+                    dropdownState.y = rect.bottom;
+                    break;
+            }
+        }
+        dropdownState.itemsFactory = itemsFactory
+        dropdownState.options = options ?? null
+        dropdownState.open = true
+    }
+
+    const closeDropdown = () => {
+        dropdownState.open = false
+        dropdownState.itemsFactory = null
+        dropdownState.options = null
+    }
+
+    return {
+        dropdownState,
+        openDropdown,
+        closeDropdown,
+    }
+}
@@ -20,8 +20,10 @@ export const useModels = async () => {
                .query('providers')
                .Include('models');

+            const start = Date.now();
            nuxtApp._modelsPromise = useQuery('providers', triplit, providersQuery).then((sub) => {
                nuxtApp._modelsSubscription = sub;
+                console.log("fetching providers took", Date.now() - start);
                return sub;
            });
        }
@@ -3,7 +3,7 @@ export const useSidebar = () => {
    const sidebarWidth = useState<number>('sidebar:width', () => {
        return Number(
            useCookie('sidebar:width', {
-                default: () => '226',
+                default: () => '250',
                maxAge: 60 * 60 * 24 * 30,
            }).value,
        );
@@ -13,9 +13,64 @@ export const useTheme = () => {
        maxAge: 60 * 60 * 24 * 365,
    });

+    const colorScheme: { preference: Ref<'light' | 'dark' | 'system'>; value: Ref<'light' | 'dark'>; class: Ref<'light' | 'dark' | undefined> } = {
+        preference: useCookie('colorScheme', {
+            default: () => 'system',
+            maxAge: 60 * 60 * 24 * 365,
+        }),
+        value: computed(() => {
+            if (colorScheme.preference.value === 'system') {
+                if (import.meta.client) {
+                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+                    return prefersDark ? 'dark' : 'light';
+                }
+
+                return 'dark';
+            }
+
+            return colorScheme.preference.value as 'light' | 'dark';
+        }),
+        class: ref<undefined | 'light' | 'dark'>(undefined)
+    }
+
+    let listeningToColorScheme = false;
+    const changeSystemColorScheme = (e: MediaQueryListEvent) => {
+        if (colorScheme.preference.value !== 'system') return;
+
+        colorScheme.class.value = e.matches ? 'dark' : 'light';
+    }
+    watch(colorScheme.preference, () => {
+        if (colorScheme.preference.value === 'system') {
+            if (import.meta.client) {
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+                if (!listeningToColorScheme) {
+                    listeningToColorScheme = true;
+                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', changeSystemColorScheme);
+                }
+
+                colorScheme.class.value = prefersDark ? 'dark' : 'light';
+                return;
+            }
+
+            if (listeningToColorScheme) {
+                listeningToColorScheme = false;
+                window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', changeSystemColorScheme);
+            }
+
+            // fallback to dark on the server
+            colorScheme.class.value = 'dark';
+            return;
+        }
+
+        colorScheme.class.value = colorScheme.preference.value as 'light' | 'dark';
+    }, { immediate: true });
+
    return {
        accent,
        neutral,
        hinting,
+        colorScheme
    };
 };
@@ -1,8 +1,142 @@
+import { schema } from '#triplit/schema';
+import { type Entity } from '@triplit/client';
+import { computed, watch } from 'vue';
+
+// TODO: most of this code is generated by gemini 3 flash with fixups, 
+// but its still bad code, so I'm going to clean it up later
 export const useUserSettings = async () => {
-    const user = useAuth().user;
+    const { user, loggedIn } = useAuth();
    const triplit = useTriplitClient();
+    const { accent, neutral, hinting, colorScheme } = useTheme();

-    const { results: settings, unsubscribe } = await useQuery('settings', triplit, triplit.query('settings').Where('userId', '=', user.value!.id));
+    const start = Date.now();
+    const remoteSettings = useState<Entity<typeof schema, 'settings'> | null>('user:settings', () => null);
+    const { results } = await useQuery('settings', triplit, triplit.query('settings'))
+    console.log("fetching settings took", Date.now() - start);

-    return { settings: computed(() => settings.value![0]!), unsubscribe };
-}
+    watch(results, (val) => {
+        if (!val) {
+            remoteSettings.value = null;
+            return;
+        }
+
+        remoteSettings.value = val[0] as any;
+    }, { immediate: true, deep: true })
+
+    // Sync remote settings to local cookies
+    // This bridges the gap between the server state and the local CSS variable application
+    watch(remoteSettings, (newSettings) => {
+        if (!newSettings?.appearance) return;
+        const { appearance } = newSettings;
+
+        if (appearance.colorScheme && appearance.colorScheme !== colorScheme.preference.value) {
+            colorScheme.preference.value = appearance.colorScheme as 'light' | 'dark' | 'system';
+        }
+
+        if (appearance.accent && appearance.accent !== accent.value) {
+            accent.value = appearance.accent;
+        }
+
+        if (appearance.neutral && appearance.neutral !== neutral.value) {
+            neutral.value = appearance.neutral;
+        }
+
+        if (appearance.hinting !== undefined && String(appearance.hinting) !== hinting.value) {
+            hinting.value = String(appearance.hinting);
+        }
+    }, { deep: true });
+
+    // Effective settings with defaults for backwards compatibility
+    const settings = computed(() => {
+        const remote = remoteSettings.value;
+        return {
+            appearance: {
+                colorScheme: remote?.appearance?.colorScheme ?? colorScheme.preference.value,
+                accent: remote?.appearance?.accent ?? accent.value,
+                neutral: remote?.appearance?.neutral ?? neutral.value,
+                hinting: remote?.appearance?.hinting ?? Number(hinting.value),
+                fontSize: remote?.appearance?.fontSize ?? 'medium',
+            },
+            systemAssistants: {
+                rename: {
+                    enabled: remote?.systemAssistants?.rename?.enabled ?? false,
+                    prompt: remote?.systemAssistants?.rename?.prompt ?? null,
+                    modelId: remote?.systemAssistants?.rename?.modelId ?? null,
+                }
+            }
+        };
+    });
+
+    /**
+     * Update settings both locally and on the server
+     */
+    const updateSettings = async (updates: {
+        appearance?: {
+            colorScheme?: 'light' | 'dark' | 'system';
+            accent?: string;
+            neutral?: string;
+            hinting?: number;
+            fontSize?: string;
+        };
+        systemAssistants?: {
+            rename?: {
+                enabled?: boolean;
+                prompt?: string | null;
+                modelId?: string | null;
+            };
+        };
+    }) => {
+        if (updates.appearance) {
+            if (updates.appearance.colorScheme) colorScheme.preference.value = updates.appearance.colorScheme;
+            if (updates.appearance.accent) accent.value = updates.appearance.accent;
+            if (updates.appearance.neutral) neutral.value = updates.appearance.neutral;
+            if (updates.appearance.hinting !== undefined) hinting.value = String(updates.appearance.hinting);
+        }
+
+        if (!loggedIn.value || !user.value?.id) return;
+
+        const current = remoteSettings.value;
+        if (!current) {
+            await triplit.insert('settings', {
+                userId: user.value.id,
+                appearance: {
+                    colorScheme: colorScheme.preference.value,
+                    accent: accent.value,
+                    neutral: neutral.value,
+                    hinting: Number(hinting.value),
+                    ...(updates.appearance || {})
+                },
+                systemAssistants: {
+                    rename: {
+                        enabled: updates.systemAssistants?.rename?.enabled ?? true,
+                        prompt: updates.systemAssistants?.rename?.prompt ?? null,
+                        modelId: updates.systemAssistants?.rename?.modelId ?? null,
+                    }
+                }
+            });
+            return;
+        }
+
+        await triplit.update('settings', current.id, (s) => {
+            if (updates.appearance) {
+                s.appearance = {
+                    ...(s.appearance || {}),
+                    ...updates.appearance
+                };
+            }
+            if (updates.systemAssistants) {
+                // @ts-expect-error
+                s.systemAssistants = {
+                    ...(s.systemAssistants || {}),
+                    ...updates.systemAssistants
+                };
+            }
+        });
+    };
+
+    return {
+        settings,
+        remoteSettings,
+        updateSettings,
+    };
+};