From 8461b92f08755d4ca2a152e803f315cf0cdb16ab Mon Sep 17 00:00:00 2001
From: Jannik Streidl <jannik.stdl@gmail.com>
Date: Fri, 1 Mar 2024 21:18:17 +0100
Subject: [PATCH 1/3] show chat in browser title + scroll to bottom

---
 src/routes/(app)/+page.svelte        | 16 +++++++++++++++-
 src/routes/(app)/c/[id]/+page.svelte | 14 ++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 581db7c0..c35b6cd8 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -14,6 +14,7 @@
 		chats,
 		chatId,
 		config,
+		WEBUI_NAME,
 		tags as _tags
 	} from '$lib/stores';
 	import { copyToClipboard, splitStream } from '$lib/utils';
@@ -38,7 +39,6 @@
 	import { RAGTemplate } from '$lib/utils/rag';
 	import { LITELLM_API_BASE_URL, OPENAI_API_BASE_URL } from '$lib/constants';
 	import { WEBUI_BASE_URL } from '$lib/constants';
-
 	let stopResponseFlag = false;
 	let autoScroll = true;
 	let processing = '';
@@ -69,6 +69,7 @@
 	let tags = [];
 
 	let title = '';
+	let pageTitle = WEBUI_NAME;
 	let prompt = '';
 	let files = [];
 	let messages = [];
@@ -77,6 +78,13 @@
 		currentId: null
 	};
 
+	$: if (title) {
+		const trimmedTitle = title.length > 30 ? `${title.slice(0, 30)}...` : title;
+		pageTitle = `${trimmedTitle} | ${$WEBUI_NAME}`;
+	} else {
+		pageTitle = $WEBUI_NAME;
+	}
+
 	$: if (history.currentId !== null) {
 		let _messages = [];
 
@@ -809,6 +817,12 @@
 	};
 </script>
 
+<svelte:head>
+	<title>
+		{pageTitle}
+	</title>
+</svelte:head>
+
 <div class="h-screen max-h-[100dvh] w-full flex flex-col">
 	<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
 	<div class="flex flex-col flex-auto">
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 32af2b17..bd449652 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -14,6 +14,7 @@
 		chats,
 		chatId,
 		config,
+		WEBUI_NAME,
 		tags as _tags
 	} from '$lib/stores';
 	import { copyToClipboard, splitStream, convertMessagesToHistory } from '$lib/utils';
@@ -71,6 +72,7 @@
 	let tags = [];
 
 	let title = '';
+	let pageTitle = WEBUI_NAME;
 	let prompt = '';
 	let files = [];
 
@@ -80,6 +82,13 @@
 		currentId: null
 	};
 
+	$: if (title) {
+		const trimmedTitle = title.length > 30 ? `${title.slice(0, 30)}...` : title;
+		pageTitle = `${trimmedTitle} | ${$WEBUI_NAME}`;
+	} else {
+		pageTitle = $WEBUI_NAME;
+	}
+
 	$: if (history.currentId !== null) {
 		let _messages = [];
 
@@ -100,6 +109,7 @@
 				await tick();
 				loaded = true;
 
+				window.setTimeout(() => scrollToBottom(), 0);
 				const chatInput = document.getElementById('chat-textarea');
 				chatInput?.focus();
 			} else {
@@ -823,6 +833,10 @@
 	});
 </script>
 
+<svelte:head>
+	<title>{pageTitle}</title>
+</svelte:head>
+
 {#if loaded}
 	<div class="min-h-screen max-h-screen w-full flex flex-col">
 		<Navbar

From e5c812f1d298d9b5a92ae50dac61773d269dfce4 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 1 Mar 2024 22:35:08 -0800
Subject: [PATCH 2/3] refac

---
 src/routes/(app)/+page.svelte        | 12 +++---------
 src/routes/(app)/c/[id]/+page.svelte | 14 +++++---------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index c35b6cd8..e345e2be 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -69,7 +69,6 @@
 	let tags = [];
 
 	let title = '';
-	let pageTitle = WEBUI_NAME;
 	let prompt = '';
 	let files = [];
 	let messages = [];
@@ -78,13 +77,6 @@
 		currentId: null
 	};
 
-	$: if (title) {
-		const trimmedTitle = title.length > 30 ? `${title.slice(0, 30)}...` : title;
-		pageTitle = `${trimmedTitle} | ${$WEBUI_NAME}`;
-	} else {
-		pageTitle = $WEBUI_NAME;
-	}
-
 	$: if (history.currentId !== null) {
 		let _messages = [];
 
@@ -819,7 +811,9 @@
 
 <svelte:head>
 	<title>
-		{pageTitle}
+		{title
+			? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}`
+			: `${$WEBUI_NAME}`}
 	</title>
 </svelte:head>
 
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index bd449652..8448339f 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -72,7 +72,6 @@
 	let tags = [];
 
 	let title = '';
-	let pageTitle = WEBUI_NAME;
 	let prompt = '';
 	let files = [];
 
@@ -82,13 +81,6 @@
 		currentId: null
 	};
 
-	$: if (title) {
-		const trimmedTitle = title.length > 30 ? `${title.slice(0, 30)}...` : title;
-		pageTitle = `${trimmedTitle} | ${$WEBUI_NAME}`;
-	} else {
-		pageTitle = $WEBUI_NAME;
-	}
-
 	$: if (history.currentId !== null) {
 		let _messages = [];
 
@@ -834,7 +826,11 @@
 </script>
 
 <svelte:head>
-	<title>{pageTitle}</title>
+	<title>
+		{title
+			? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}`
+			: `${$WEBUI_NAME}`}
+	</title>
 </svelte:head>
 
 {#if loaded}

From 78d9c469a2792a82500105abd7c004dedac0905b Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 1 Mar 2024 22:38:04 -0800
Subject: [PATCH 3/3] feat: title for all routes

---
 src/routes/(app)/admin/+page.svelte      | 8 +++++++-
 src/routes/(app)/documents/+page.svelte  | 8 +++++++-
 src/routes/(app)/modelfiles/+page.svelte | 8 +++++++-
 src/routes/(app)/prompts/+page.svelte    | 8 +++++++-
 src/routes/auth/+page.svelte             | 6 ++++++
 5 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/routes/(app)/admin/+page.svelte b/src/routes/(app)/admin/+page.svelte
index b1169709..32234b03 100644
--- a/src/routes/(app)/admin/+page.svelte
+++ b/src/routes/(app)/admin/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
-	import { config, user } from '$lib/stores';
+	import { WEBUI_NAME, config, user } from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 
@@ -61,6 +61,12 @@
 	});
 </script>
 
+<svelte:head>
+	<title>
+		{`Admin Panel | ${$WEBUI_NAME}`}
+	</title>
+</svelte:head>
+
 {#key selectedUser}
 	<EditUserModal
 		bind:show={showEditUserModal}
diff --git a/src/routes/(app)/documents/+page.svelte b/src/routes/(app)/documents/+page.svelte
index 79fe691b..c91a9726 100644
--- a/src/routes/(app)/documents/+page.svelte
+++ b/src/routes/(app)/documents/+page.svelte
@@ -4,7 +4,7 @@
 	const { saveAs } = fileSaver;
 
 	import { onMount } from 'svelte';
-	import { documents } from '$lib/stores';
+	import { WEBUI_NAME, documents } from '$lib/stores';
 	import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents';
 
 	import { SUPPORTED_FILE_TYPE, SUPPORTED_FILE_EXTENSIONS } from '$lib/constants';
@@ -148,6 +148,12 @@
 	);
 </script>
 
+<svelte:head>
+	<title>
+		{`Documents | ${$WEBUI_NAME}`}
+	</title>
+</svelte:head>
+
 {#if dragged}
 	<div
 		class="fixed w-full h-full flex z-50 touch-none pointer-events-none"
diff --git a/src/routes/(app)/modelfiles/+page.svelte b/src/routes/(app)/modelfiles/+page.svelte
index 14398417..ea3bde91 100644
--- a/src/routes/(app)/modelfiles/+page.svelte
+++ b/src/routes/(app)/modelfiles/+page.svelte
@@ -5,7 +5,7 @@
 
 	import { onMount } from 'svelte';
 
-	import { modelfiles, settings, user } from '$lib/stores';
+	import { WEBUI_NAME, modelfiles, settings, user } from '$lib/stores';
 	import { createModel, deleteModel } from '$lib/apis/ollama';
 	import {
 		createNewModelfile,
@@ -69,6 +69,12 @@
 	});
 </script>
 
+<svelte:head>
+	<title>
+		{`Modelfiles | ${$WEBUI_NAME}`}
+	</title>
+</svelte:head>
+
 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
 	<div class="flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
diff --git a/src/routes/(app)/prompts/+page.svelte b/src/routes/(app)/prompts/+page.svelte
index 784c8693..6f0bc0e1 100644
--- a/src/routes/(app)/prompts/+page.svelte
+++ b/src/routes/(app)/prompts/+page.svelte
@@ -4,7 +4,7 @@
 	const { saveAs } = fileSaver;
 
 	import { onMount } from 'svelte';
-	import { prompts } from '$lib/stores';
+	import { WEBUI_NAME, prompts } from '$lib/stores';
 	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
 	import { error } from '@sveltejs/kit';
 	import { goto } from '$app/navigation';
@@ -36,6 +36,12 @@
 	};
 </script>
 
+<svelte:head>
+	<title>
+		{`Prompts | ${$WEBUI_NAME}`}
+	</title>
+</svelte:head>
+
 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
 	<div class="flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 30c5a93e..a2237794 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -57,6 +57,12 @@
 	});
 </script>
 
+<svelte:head>
+	<title>
+		{`${$WEBUI_NAME}`}
+	</title>
+</svelte:head>
+
 {#if loaded}
 	<div class="fixed m-10 z-50">
 		<div class="flex space-x-2">