zoeissleeping
6ee4087a29
- 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.
52 lines
1.8 KiB
Vue
52 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
const { getAgent } = useAgents();
|
|
const triplit = useTriplitClient();
|
|
|
|
const route = useRoute();
|
|
|
|
const agent = getAgent(route.params.id as string);
|
|
|
|
if (agent.value === undefined) navigateTo('/');
|
|
|
|
const handleInput = async (e: Event) => {
|
|
const target = e.target as HTMLInputElement;
|
|
if (target.value.trimStart().length === 0) {
|
|
return;
|
|
}
|
|
|
|
await triplit.update('agents', agent.value!.id, { name: target.value });
|
|
};
|
|
|
|
const changeSystemPrompt = async (e: Event) => {
|
|
const target = e.target as HTMLTextAreaElement;
|
|
let value: string | undefined = target.value;
|
|
|
|
if (value.trimStart().length === 0) {
|
|
value = undefined;
|
|
}
|
|
|
|
await triplit.update('agents', agent.value!.id, {
|
|
systemPrompt: target.value,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-4 px-14 w-full h-full">
|
|
<div class="flex items-center gap-4">
|
|
<div>
|
|
<img v-if="agent?.imageUrl" :src="agent.imageUrl" class="w-16 h-16 rounded-full object-cover" />
|
|
<Icon v-else name="mynaui:check-hexagon" class="text-16" />
|
|
</div>
|
|
<input @input="handleInput" placeholder="Agent Name..."
|
|
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(--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-border)]"
|
|
:value="agent?.systemPrompt" @input="changeSystemPrompt"></textarea>
|
|
</div>
|
|
</div>
|
|
</template> |