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,14 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch, computed } from 'vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
|
||||
import type { Entity } from '@triplit/client';
|
||||
import { schema } from '#triplit/schema';
|
||||
|
||||
const { allModels } = await useModels();
|
||||
|
||||
const inputHeight: Ref<string> = ref('auto');
|
||||
const inputRef = ref<HTMLTextAreaElement | null>(null);
|
||||
let tempInput = '';
|
||||
const inputValue = ref('');
|
||||
const inputValue = defineModel<string>({ required: false, default: '' });
|
||||
const triplit = useTriplitClient();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -22,10 +23,8 @@ const props = defineProps<{
|
||||
providers?: ProviderWithModels[];
|
||||
}>();
|
||||
|
||||
// Model selection state
|
||||
const selectedModel = ref<ModelWithProvider | null>(null);
|
||||
|
||||
// Initialize model selection based on agent's defaultModelId or first available
|
||||
const initializeModel = () => {
|
||||
if (selectedModel.value) return;
|
||||
if (!props.providers || !props.agent) return;
|
||||
@@ -42,12 +41,10 @@ const initializeModel = () => {
|
||||
// Fall back to first available model
|
||||
if (allModels.value.length > 0) {
|
||||
selectedModel.value = allModels.value[0]!;
|
||||
// Update agent's default model
|
||||
updateAgentDefaultModel(selectedModel.value.id);
|
||||
}
|
||||
};
|
||||
|
||||
// Update agent's default model in Triplit
|
||||
const updateAgentDefaultModel = async (modelId: string) => {
|
||||
if (!props.agent) return;
|
||||
try {
|
||||
@@ -103,8 +100,6 @@ const handleKeyDown = async (event: KeyboardEvent) => {
|
||||
|
||||
inputValue.value =
|
||||
inputValue.value.slice(0, cursorPosition) + '\n' + inputValue.value.slice(cursorPosition);
|
||||
await nextTick();
|
||||
handleInput();
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
@@ -112,11 +107,12 @@ const handleKeyDown = async (event: KeyboardEvent) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleInput = () => {
|
||||
watch(inputValue, async () => {
|
||||
const textarea = inputRef.value;
|
||||
if (!textarea) return;
|
||||
|
||||
textarea.style.height = 'auto';
|
||||
inputHeight.value = 'auto';
|
||||
await nextTick();
|
||||
|
||||
const lineHeight = 24;
|
||||
const maxLines = 10;
|
||||
@@ -125,11 +121,11 @@ const handleInput = () => {
|
||||
const newHeight = textarea.scrollHeight;
|
||||
|
||||
if (newHeight > maxHeight) {
|
||||
textarea.style.height = `${maxHeight}px`;
|
||||
inputHeight.value = `${maxHeight}px`;
|
||||
} else {
|
||||
textarea.style.height = `${newHeight}px`;
|
||||
inputHeight.value = `${newHeight}px`;
|
||||
}
|
||||
};
|
||||
}, { immediate: true });
|
||||
|
||||
let hasCommandKey = false;
|
||||
if (import.meta.server) {
|
||||
@@ -145,40 +141,34 @@ onBeforeMount(() => {
|
||||
|
||||
onMounted(() => {
|
||||
inputValue.value = tempInput;
|
||||
nextTick(() => {
|
||||
handleInput();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['w-full flex max-h-full', $attrs.class]">
|
||||
<div class="relative w-full flex flex-shrink-1 flex-col gap-3 p-3 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--color-input)]
|
||||
border-[var(--color-highlight)] focus-within:border-[var(--color-highlight-high)]">
|
||||
<!-- Text Input -->
|
||||
<div class="relative w-full flex flex-shrink-1 flex-col gap-3 p-3 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--bg-container)]
|
||||
border-[var(--color-border)] focus-within:border-[var(--color-border-active)]">
|
||||
<div class="flex-1 min-w-0 max-h-full">
|
||||
<!-- Grammarly literally breaks everything, go fuck yourself -->
|
||||
<!-- It is absolutely paramount that the closing tag for the textare has ZERO whitespace between the end of the textarea opening tag, otherwise there will be hydration errors -->
|
||||
<textarea data-gramm="false" id="chat" v-model="inputValue" ref="inputRef"
|
||||
:placeholder="`Start something great. Press ${hasCommandKey ? '⌘ + Enter' : 'ctrl + Enter'} to insert a new line.`"
|
||||
@keydown="handleKeyDown" @input="handleInput"
|
||||
class="[scrollbar-width:none] w-full bg-transparent text-[var(--color-text)] resize-none outline-none text-[15px] leading-6 min-h-0 overflow-y-auto">
|
||||
</textarea>
|
||||
@keydown="handleKeyDown" :style="{ height: inputHeight }"
|
||||
class="[scrollbar-width:none] w-full bg-transparent resize-none text-[0.95em] placeholder:text-[var(--text-tertiary)]"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<!-- TODO: since we dont want to model selector dropdown to potentially overflow, it has max-width: 100%, so, we need to maake the trigger large enough to fit the entire width of the dropdown -->
|
||||
<div class="flex-1">
|
||||
<ModelSelector v-if="providers !== undefined" v-model="selectedModel" :providers="providers">
|
||||
</ModelSelector>
|
||||
<ModelSelector v-if="providers !== undefined" v-model="selectedModel" :providers="providers" />
|
||||
</div>
|
||||
<!-- Send/Stop Button -->
|
||||
<button aria-label="Send message" @click="handleSubmit" :disabled="!inputValue.trim() && !loading"
|
||||
:class="[
|
||||
'h-8 w-8 rounded-xl transition-all duration-200 flex items-center justify-center disabled:cursor-not-allowed disabled:bg-transparent',
|
||||
inputValue.trim() && !loading
|
||||
? 'bg-[var(--color-accent)] text-[var(--color-accent-text)] hover:bg-[var(--color-accent-hover)]'
|
||||
: 'text-[var(--color-highlight-high)]',
|
||||
loading && 'bg-[var(--color-highlight)] hover:bg-[var(--color-highlight-high)]',
|
||||
: 'text-[var(--text-dim)]',
|
||||
loading && 'bg-[var(--color-hover)] hover:bg-[var(--color-active)]',
|
||||
]">
|
||||
<Icon v-if="loading" name="mynaui:stop-solid" class="text-6.5" />
|
||||
<Icon v-else name="mynaui:send-solid" class="text-5" />
|
||||
|
||||
Reference in New Issue
Block a user