streaming, markdown, model selecting, and lots more

app/pages/agent/[id]/profile.vue

@@ -1,21 +1,44 @@
 <script setup lang="ts">
-const { activeAgent: agent, updateAgent } = await useAgents();
-const route = useRoute()
+const { getAgent } = 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 = (e: Event) => {
+const handleInput = async (e: Event) => {
     const target = e.target as HTMLInputElement;
-    if (target.value.length === 0) {
+    if (target.value.trimStart().length === 0) {
         return;
     }
 
-    updateAgent(agent.value!.id, { name: target.value });
+    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">
+    <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" />
@@ -25,9 +48,10 @@ const handleInput = (e: Event) => {
                 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 items-center gap-2">
-            <span class="text-sm text-[var(--color-subtle)]">Agent ID:</span>
-            <span class="text-sm font-semibold">{{ route.params.id }}</span>
+        <div class="flex items-center gap-2 w-full h-full mb-14">
+            <textarea placeholder="System Message..."
+                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>