feat: add better provider support, icons, regen, and a lot more

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { getAgent } = await useAgents();
+const { getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
 const triplit = useTriplitClient();
 
 const route = useRoute();
@@ -35,6 +35,10 @@ const changeSystemPrompt = async (e: Event) => {
         systemPrompt: target.value,
     });
 };
+
+onUnmounted(() => {
+    unsubscribeAgents?.();
+});
 </script>
 
 <template>
@@ -48,8 +52,9 @@ const changeSystemPrompt = async (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 w-full h-full mb-14">
-            <textarea placeholder="System Message..."
+        <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>