zoeissleeping
ab57af1f23
This commit moves the actions bar out of the default template and into the individual pages so that they can display their titles at the top. this commit also has pages set the meta title so tabs are labeled nicely.
63 lines
2.3 KiB
Vue
63 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
const { getAgent } = useAgents();
|
|
const triplit = useTriplitClient();
|
|
|
|
const route = useRoute();
|
|
|
|
const { open: sidebarOpen, openSidebar } = useSidebar();
|
|
|
|
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="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">
|
|
<Icon class="text-5" name="mynaui:panel-left-open" />
|
|
</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" />
|
|
<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> |