zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show page titles on agent and topic pages

Browse Source 
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.
This commit is contained in:
Zoe
2026-02-24 16:33:32 +00:00
parent a22b6c07d1
commit ab57af1f23
7 changed files with 108 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ChatInput.vue
+4 -2
View File
@@ -111,8 +111,10 @@ const handleWindowKeyDown = async (event: KeyboardEvent) => {
return;
}
// redirect all standard keyboard input to the input field
inputRef.value?.focus();
if (document.activeElement === document.body) {
// redirect all standard keyboard input to the input field
inputRef.value?.focus();
}
};
watch(inputValue, async () => {
app/components/Sidenav/NavHome.vue
+3 -2
View File
@@ -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
-8
View File
@@ -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
+33 -15
View File
@@ -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
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="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 class="flex flex-col h-full w-full">
<div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
<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>
<h4 class="text-lg">
{{ agent?.name }}
</h4>
</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 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
+11
View File
@@ -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
+37 -16
View File
@@ -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 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">
<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 class="flex flex-col h-full w-full">
<div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
<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>
<h4 class="text-lg">
{{ topic?.name }}
</h4>
</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"
:loading="activeGeneration !== null" :agent="agent" :providers="providers?.filter(p => p.enabled)"
@submit="submitMessage" @cancel="handleCancel" />
<!-- chat pane -->
<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 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
+20 -8
View File
@@ -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">
<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 class="h-full w-full flex flex-col">
<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 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>