♻️ refactor: optimize state management, switch to @tanstack/vue-virtual, and improve performance
- Centralize `useAgents` and `useModels` state within the Nuxt app context to prevent data leaks and improve initialization. - Migrate virtualization from `vue-virtual-scroller` to `@tanstack/vue-virtual` with new `RowVirtualizerFixed` and `RowVirtualizerDynamic` components. - Upgrade Nuxt to v4.3.1 and remove `@vue-macros/nuxt`. - Replace `big.js` with an optimized custom `lshDecimal` string manipulation logic for pricing calculations in the provider API. - Implement automatic focus redirection in `ChatInput` to capture standard keyboard input. - Refactor Sidenav and Settings components to utilize virtualization for long lists (topics, agents, models). - Enhance theme colors and mobile experience. More work to come on both of these.
This commit is contained in:
@@ -1,26 +1,55 @@
|
||||
import type schema from "#triplit/schema";
|
||||
import type { Entity } from "@triplit/client";
|
||||
import type schema from "#triplit/schema";
|
||||
import { nanoid } from "nanoid";
|
||||
import { assert } from "~~/utils/assert";
|
||||
|
||||
export const useAgents = async () => {
|
||||
export type Agent = Readonly<Entity<typeof schema, 'agents'> & { topics: Readonly<Entity<typeof schema, 'topics'>>[] }>;
|
||||
|
||||
export const useAgents = () => {
|
||||
const nuxtApp = useNuxtApp();
|
||||
const triplit = useTriplitClient();
|
||||
|
||||
const { results: agents, unsubscribe } = await useQuery(
|
||||
'agents',
|
||||
triplit,
|
||||
triplit
|
||||
.query('agents')
|
||||
.Include('topics', (rel) => rel('topics').Order('createdAt', 'DESC'))
|
||||
.Order('createdAt', 'ASC')
|
||||
);
|
||||
// dont leaking between different users/requests
|
||||
if (!nuxtApp._agentsState) {
|
||||
nuxtApp._agentsState = {
|
||||
list: ref<Agent[]>([]),
|
||||
initPromise: null as Promise<void> | null,
|
||||
};
|
||||
}
|
||||
|
||||
const createAgent = async (): Promise<Readonly<Entity<typeof schema, 'agents'>> | null> => {
|
||||
const state = nuxtApp._agentsState as {
|
||||
list: Ref<Agent[]>;
|
||||
initPromise: Promise<void> | null;
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
if (state.initPromise) return;
|
||||
|
||||
state.initPromise = (async () => {
|
||||
const query = triplit.query('agents')
|
||||
.Include('topics', (rel) => rel('topics').Order('createdAt', 'DESC'))
|
||||
.Order('createdAt', 'ASC');
|
||||
|
||||
const { results } = await useQuery('agents', triplit, query)
|
||||
watch(results, (newAgents) => {
|
||||
console.log("newAgents", newAgents);
|
||||
state.list.value = newAgents as unknown as Agent[] || [];
|
||||
}, { immediate: true, flush: 'sync' });
|
||||
})();
|
||||
};
|
||||
|
||||
const getAgent = (id: MaybeRef<string>) => {
|
||||
return computed(() => state.list.value.find((agent) => agent.id === id) || null);
|
||||
}
|
||||
|
||||
const createAgent = async () => {
|
||||
const triplit = useTriplitClient();
|
||||
const { user } = useAuth();
|
||||
if (!user.value) {
|
||||
console.error('No user');
|
||||
return null;
|
||||
}
|
||||
if (!user.value) throw new Error('No user');
|
||||
|
||||
return triplit.insert('agents', {
|
||||
const id = nanoid();
|
||||
await triplit.insert('agents', {
|
||||
id,
|
||||
name: 'New Agent',
|
||||
userId: user.value.id,
|
||||
systemPrompt: 'You are a helpful assistant.',
|
||||
@@ -28,14 +57,16 @@ export const useAgents = async () => {
|
||||
imageUrl: null,
|
||||
createdAt: new Date().toISOString(),
|
||||
});
|
||||
};
|
||||
|
||||
assert('flush' in triplit);
|
||||
await triplit.flush();
|
||||
|
||||
return state.list.value.find((agent) => agent.id === id)!;
|
||||
};
|
||||
return {
|
||||
agents,
|
||||
unsubscribe,
|
||||
getAgent: (id: string) => {
|
||||
return agents.value?.find((a: any) => a.id === id);
|
||||
},
|
||||
createAgent,
|
||||
init,
|
||||
agents: state.list,
|
||||
getAgent,
|
||||
createAgent
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,68 +1,78 @@
|
||||
import { schema } from '#triplit/schema';
|
||||
// // composables/useModels.ts
|
||||
import type { Entity } from '@triplit/client';
|
||||
import type schema from '#triplit/schema';
|
||||
|
||||
export type ModelWithProvider = Entity<typeof schema, 'models'> & {
|
||||
provider: Entity<typeof schema, 'providers'>;
|
||||
};
|
||||
type Provider = Entity<typeof schema, 'providers'>;
|
||||
type Model = Entity<typeof schema, 'models'>;
|
||||
|
||||
export type ProviderWithModels = Entity<typeof schema, 'providers'> & {
|
||||
models: Entity<typeof schema, 'models'>[];
|
||||
};
|
||||
export interface ModelWithProvider extends Model {
|
||||
provider: Provider;
|
||||
}
|
||||
|
||||
export const useModels = async () => {
|
||||
const nuxtApp = useNuxtApp() as any;
|
||||
export interface ProviderWithModels extends Provider {
|
||||
models: Model[];
|
||||
}
|
||||
|
||||
if (!nuxtApp._modelsSubscription) {
|
||||
if (!nuxtApp._modelsPromise) {
|
||||
const triplit = useTriplitClient();
|
||||
export const useModels = () => {
|
||||
const nuxtApp = useNuxtApp();
|
||||
const triplit = useTriplitClient();
|
||||
|
||||
const providersQuery = triplit
|
||||
.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;
|
||||
});
|
||||
}
|
||||
await nuxtApp._modelsPromise;
|
||||
if (!nuxtApp._modelsState) {
|
||||
nuxtApp._modelsState = {
|
||||
providers: shallowRef([]),
|
||||
isReady: ref(false)
|
||||
};
|
||||
}
|
||||
|
||||
const { results: providers } = nuxtApp._modelsSubscription;
|
||||
|
||||
if (!nuxtApp._allModels) {
|
||||
nuxtApp._allModels = computed<ModelWithProvider[]>(() => {
|
||||
if (!providers.value) return [];
|
||||
const state = nuxtApp._modelsState as {
|
||||
providers: Ref<ProviderWithModels[]>;
|
||||
initPromise: Promise<void> | null;
|
||||
};
|
||||
|
||||
const list: ModelWithProvider[] = [];
|
||||
const init = () => {
|
||||
if (state.initPromise) return;
|
||||
|
||||
for (const provider of (providers.value as ProviderWithModels[])) {
|
||||
if (!provider.enabled) continue;
|
||||
state.initPromise = (async () => {
|
||||
const query = triplit.query('providers').Include('models');
|
||||
|
||||
for (const model of provider.models) {
|
||||
if (!model.enabled) continue;
|
||||
const { results } = await useQuery('providers', triplit, query)
|
||||
watch(results, (newProviders) => {
|
||||
state.providers.value = newProviders as unknown as ProviderWithModels[] || [];
|
||||
}, { immediate: true, flush: 'sync' });
|
||||
})();
|
||||
};
|
||||
|
||||
list.push({
|
||||
...model,
|
||||
provider
|
||||
} as unknown as ModelWithProvider);
|
||||
}
|
||||
const allModels = computed<ModelWithProvider[]>(() => {
|
||||
const result: ModelWithProvider[] = [];
|
||||
for (const provider of state.providers.value) {
|
||||
if (!provider.enabled) continue;
|
||||
for (const model of provider.models || []) {
|
||||
if (!model.enabled) continue;
|
||||
result.push({ ...model, provider });
|
||||
}
|
||||
return list;
|
||||
});
|
||||
}
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
const getFirstAvailableModel = (): ModelWithProvider | null => {
|
||||
if (nuxtApp._allModels.value.length === 0) return null;
|
||||
return nuxtApp._allModels.value[0]!;
|
||||
const getModel = (id: string): ModelWithProvider | undefined => {
|
||||
return allModels.value.find((model) => model.id === id);
|
||||
};
|
||||
|
||||
const getProvider = (id: string): ProviderWithModels | undefined => {
|
||||
return state.providers.value.find((provider) => provider.id === id);
|
||||
};
|
||||
|
||||
const getFirstAvailableModel = () => {
|
||||
return allModels.value[0] ?? null;
|
||||
};
|
||||
|
||||
return {
|
||||
providers: providers as Ref<ProviderWithModels[]>,
|
||||
allModels: nuxtApp._allModels as ComputedRef<ModelWithProvider[]>,
|
||||
getFirstAvailableModel,
|
||||
unsubscribe: () => { },
|
||||
init,
|
||||
providers: state.providers,
|
||||
allModels,
|
||||
getModel,
|
||||
getProvider,
|
||||
getFirstAvailableModel
|
||||
};
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user