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] 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