feat: show page titles on agent and topic pages

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.

app/components/ChatInput.vue

@@ -111,8 +111,10 @@ const handleWindowKeyDown = async (event: KeyboardEvent) => {
         return;
     }
 
-    // redirect all standard keyboard input to the input field
+    if (document.activeElement === document.body) {
-    inputRef.value?.focus();
+        // redirect all standard keyboard input to the input field
+        inputRef.value?.focus();
+    }
 };
 
 watch(inputValue, async () => {

app/components/Sidenav/NavHome.vue

@@ -131,9 +131,10 @@ onMounted(() => {
                                 :aria-label="agent.name"
                                 class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]">
                                 <input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
-                                    @keydown.enter="saveRename" @keydown.escape="cancelRename" @blur="saveRename"
+                                    @keydown.stop.enter="saveRename" @keydown.escape="cancelRename" @blur="saveRename"
                                     class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
-                                <span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
+                                <span v-else
+                                    class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
                                     {{ agent.name }}
                                 </span>
 

app/layouts/default.vue

@@ -17,14 +17,6 @@ useKeyboardShortcuts();
     <Sidenav />
     <main
         class="bg-[var(--bg-surface)] flex flex-col h-full w-full border border-solid border-[var(--color-border)] rounded-lg overflow-hidden">
-        <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-1 overflow-y-auto">
             <slot />
         </div>

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

@@ -7,6 +7,7 @@ const route = useRoute();
 const inputValue = ref('');
 const pendingMessage = ref<Message | null>(null);
 
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { createTopic, sendMessage, autoRename } = useChat(route.params.id as string);
 const { getAgent } = useAgents();
 const { providers } = useModels();
@@ -15,6 +16,8 @@ const agent = getAgent(route.params.id as string);
 
 if (!agent.value) navigateTo('/');
 
+useHead({ title: `${agent.value!.name} | Veridian` });
+
 const handleSubmit = async (message: string, model: ModelWithProvider | null) => {
     if (!model) {
         console.error('No model selected');
@@ -83,22 +86,37 @@ const handleSubmit = async (message: string, model: ModelWithProvider | null) =>
 
 
 <template>
-    <div
+    <div class="flex flex-col h-full w-full">
-        class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
+        <div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
-        <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
+            <div class="flex items-center gap-2">
-            <div class="w-full px-px flex flex-col flex-grow gap-2"
+                <button v-if="!sidebarOpen" @click="openSidebar"
-                :class="pendingMessage === null ? 'justify-end pb-28' : 'pb-9'">
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
-                <div v-if="pendingMessage === null">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
-                    <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
+                </button>
-                    <p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
+                <h4 class="text-lg">
-                </div>
+                    {{ agent?.name }}
-                <div v-else class="opacity-70">
+                </h4>
-                    <Message :message="pendingMessage" />
-                </div>
             </div>
-            <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
+        </div>
-                <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
+
-                    :agent="agent" :providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" />
+        <div ref="chatPaneWrapper"
+            class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
+            <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
+                <div class="w-full px-px flex flex-col flex-grow gap-2"
+                    :class="pendingMessage === null ? 'justify-end pb-28' : 'pb-9'">
+                    <div v-if="pendingMessage === null">
+                        <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
+                        <p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
+                    </div>
+                    <div v-else class="opacity-70">
+                        <Message :message="pendingMessage" />
+                    </div>
+                </div>
+
+                <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
+                    <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
+                        :agent="agent" :providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" />
+                </div>
             </div>
         </div>
     </div>

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

@@ -4,6 +4,8 @@ const triplit = useTriplitClient();
 
 const route = useRoute();
 
+const { open: sidebarOpen, openSidebar } = useSidebar();
+
 const agent = getAgent(route.params.id as string);
 
 if (agent.value === undefined) navigateTo('/');
@@ -32,6 +34,15 @@ const changeSystemPrompt = async (e: Event) => {
 </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>

app/pages/agent/[id]/topic/[topicId].vue

@@ -11,6 +11,7 @@ const inputValue = ref('');
 const route = useRoute();
 const { sendMessage, regenerateMessage } = useChat(route.params.id as string);
 const { getAgent } = useAgents();
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { providers, allModels } = useModels();
 
 const agent = getAgent(route.params.id as string);
@@ -104,6 +105,12 @@ const topic = computed(() => {
     };
 });
 
+watch(() => topic.value?.name, (newTopicName) => {
+    if (newTopicName !== undefined) {
+        useHead({ title: `${newTopicName} | Veridian` });
+    }
+}, { immediate: true });
+
 const submitMessage = async (message: string, model: ModelWithProvider | null) => {
     if (!model) {
         console.error('No model selected');
@@ -271,24 +278,38 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <!-- chat pane -->
+    <div class="flex flex-col h-full w-full">
-    <div ref="chatPaneWrapper"
+        <div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
-        class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
+            <div class="flex items-center gap-2">
-        <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
+                <button v-if="!sidebarOpen" @click="openSidebar"
-            <div class="w-full px-px flex flex-col flex-grow gap-2 pb-9">
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
-                <Suspense>
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
-                    <template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
+                </button>
-                        <Message v-for="message in topic.messages" :key="message.id" :message="message"
+                <h4 class="text-lg">
-                            v-memo="[message.id, message.parts?.length, message.children, message.focusedIndex, message.content]"
+                    {{ topic?.name }}
-                            @delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
+                </h4>
-                    </template>
-                </Suspense>
             </div>
+        </div>
 
-            <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
+        <!-- chat pane -->
-                <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
+        <div ref="chatPaneWrapper"
-                    :loading="activeGeneration !== null" :agent="agent" :providers="providers?.filter(p => p.enabled)"
+            class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
-                    @submit="submitMessage" @cancel="handleCancel" />
+            <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
+                <div class="w-full px-px flex flex-col flex-grow gap-2 pb-9">
+                    <Suspense>
+                        <template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
+                            <Message v-for="message in topic.messages" :key="message.id" :message="message"
+                                v-memo="[message.id, message.parts?.length, message.children, message.focusedIndex, message.content]"
+                                @delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
+                        </template>
+                    </Suspense>
+                </div>
+
+                <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
+                    <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
+                        :loading="activeGeneration !== null" :agent="agent"
+                        :providers="providers?.filter(p => p.enabled)" @submit="submitMessage" @cancel="handleCancel" />
+                </div>
             </div>
         </div>
     </div>

app/pages/index.vue

@@ -4,6 +4,7 @@ import type { Agent } from '~/composables/useAgents';
 
 const triplit = useTriplitClient();
 
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { agents, createAgent } = useAgents();
 const { providers, getFirstAvailableModel, allModels } = useModels();
 
@@ -165,14 +166,25 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="flex flex-col items-center pt-12 px-4 h-full gap-12">
+    <div class="h-full w-full flex flex-col">
-        <h1 class="text-center text-3xl font-semibold">{{ animatedText }}<span
+        <div class="h-14 flex items-center justify-between px-4">
-                class="animate-blink inline-block w-4 h-[0.9em] bg-current align-middle ml-0.5 select-none">&nbsp;</span>
+            <div class="flex items-center gap-2">
-        </h1>
+                <button v-if="!sidebarOpen" @click="openSidebar"
-        <div class="max-w-4xl h-full w-full">
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
-            <!-- TODO: view transitions have caused me issues with the page flashing with no content (so just a black or white screen depending on the theme) so I have disabled them for now.  -->
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
-            <ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
+                </button>
-                :providers="providers" @submit="handleChatSubmit" />
+            </div>
+        </div>
+
+        <div class="flex flex-col items-center pt-12 px-4 h-full gap-12">
+            <h1 class="text-center text-3xl font-semibold">{{ animatedText }}<span
+                    class="animate-blink inline-block w-4 h-[0.9em] bg-current align-middle ml-0.5 select-none">&nbsp;</span>
+            </h1>
+            <div class="max-w-4xl h-full w-full">
+                <!-- TODO: view transitions have caused me issues with the page flashing with no content (so just a black or white screen depending on the theme) so I have disabled them for now.  -->
+                <ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
+                    :providers="providers" @submit="handleChatSubmit" />
+            </div>
         </div>
     </div>
 </template>