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.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user