84 lines
3.1 KiB
Vue
84 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
const { getAgent, patchAgentLocally } = await useAgents();
|
|
|
|
const route = useRoute();
|
|
|
|
const { open: sidebarOpen, openSidebar } = useSidebar();
|
|
|
|
const agent = getAgent(route.params.id as string);
|
|
let serverAgent = agent.value;
|
|
|
|
const name = ref<string | null>(agent.value?.name ?? null);
|
|
const systemPrompt = ref<string | null>(agent.value?.systemPrompt ?? null);
|
|
|
|
if (agent.value === undefined) navigateTo('/');
|
|
|
|
let debounceTimeout: NodeJS.Timeout | null = null;
|
|
const debouncedUpdate = async (updates: Partial<Agent>) => {
|
|
if (debounceTimeout !== null) {
|
|
clearTimeout(debounceTimeout);
|
|
}
|
|
|
|
patchAgentLocally(route.params.id as string, updates);
|
|
|
|
debounceTimeout = setTimeout(async () => {
|
|
debounceTimeout = null;
|
|
try {
|
|
await $fetch(`/api/agent/${route.params.id}`, {
|
|
method: 'PATCH',
|
|
body: updates,
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to update agent:', error);
|
|
|
|
if (serverAgent) {
|
|
patchAgentLocally(route.params.id as string, serverAgent);
|
|
name.value = serverAgent.name;
|
|
systemPrompt.value = serverAgent.systemPrompt;
|
|
}
|
|
}
|
|
}, 700);
|
|
};
|
|
|
|
const handleNameInput = async (e: Event) => {
|
|
const name = (e.target as HTMLInputElement).value;
|
|
if (!name.trim()) return;
|
|
|
|
debouncedUpdate({ name });
|
|
};
|
|
|
|
const changeSystemPrompt = async (e: Event) => {
|
|
let systemPrompt = (e.target as HTMLTextAreaElement).value as string | null;
|
|
if (!systemPrompt!.trim()) systemPrompt = null;
|
|
debouncedUpdate({ systemPrompt });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-14 flex items-center justify-between px-4">
|
|
<div class="flex items-center gap-2">
|
|
<button v-if="!sidebarOpen" @click="openSidebar"
|
|
class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent @hover:bg-[var(--color-hover)] transition-colors">
|
|
<span class="i-mynaui-panel-left-open text-5"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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" />
|
|
<span class="text-16 i-mynaui-check-hexagon"></span>
|
|
</div>
|
|
<input v-model="name" @input="handleNameInput" 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" />
|
|
</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 v-model="systemPrompt" placeholder="You are a helpful assistant."
|
|
class="p-4 w-full h-full resize-none bg-transparent rounded-lg border border-[var(--color-border)]"
|
|
@input="changeSystemPrompt"></textarea>
|
|
</div>
|
|
</div>
|
|
</template> |