62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
const { getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
|
|
const triplit = useTriplitClient();
|
|
|
|
const route = useRoute();
|
|
|
|
const agent = computed(() => {
|
|
if (route.params.id === null || typeof route.params.id !== 'string') {
|
|
throw new Error('Invalid agent ID');
|
|
}
|
|
|
|
return getAgent(route.params.id)!;
|
|
});
|
|
|
|
// 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,
|
|
});
|
|
};
|
|
|
|
onUnmounted(() => {
|
|
unsubscribeAgents?.();
|
|
});
|
|
</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(--color-highlight)] w-full bg-transparent rounded-none border-b-4 border-b-[var(--color-highlight-high)] 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(--color-text-subtle)]">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-highlight)]"
|
|
:value="agent?.systemPrompt" @input="changeSystemPrompt"></textarea>
|
|
</div>
|
|
</div>
|
|
</template> |