From 948d29b676659251320f384dc83e79bd1d4cabb4 Mon Sep 17 00:00:00 2001
From: Zhuoran <yuzhuoran13@gmail.com>
Date: Sun, 4 Aug 2024 09:56:04 +0800
Subject: [PATCH] Add option to toggle scrolling to bottom when switching
 between branches

---
 src/lib/components/chat/Messages.svelte       | 24 ++++++++-------
 .../components/chat/Settings/Interface.svelte | 29 +++++++++++++++++++
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index e46e93143..d2a700b5c 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -146,12 +146,14 @@
 
 		await tick();
 
-		const element = document.getElementById('messages-container');
-		autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
+		if ($settings.scrollOnBranchChange) {
+			const element = document.getElementById('messages-container');
+			autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
 
-		setTimeout(() => {
-			scrollToBottom();
-		}, 100);
+			setTimeout(() => {
+				scrollToBottom();
+			}, 100);
+		}
 	};
 
 	const showNextMessage = async (message) => {
@@ -195,12 +197,14 @@
 
 		await tick();
 
-		const element = document.getElementById('messages-container');
-		autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
+		if ($settings.scrollOnBranchChange) {
+			const element = document.getElementById('messages-container');
+			autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
 
-		setTimeout(() => {
-			scrollToBottom();
-		}, 100);
+			setTimeout(() => {
+				scrollToBottom();
+			}, 100);
+		}
 	};
 
 	const deleteMessageHandler = async (messageId) => {
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index e6eefaefc..d5e198890 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -22,6 +22,7 @@
 	let responseAutoCopy = false;
 	let widescreenMode = false;
 	let splitLargeChunks = false;
+	let scrollOnBranchChange = true;
 	let userLocation = false;
 
 	// Interface
@@ -39,6 +40,11 @@
 		saveSettings({ splitLargeChunks: splitLargeChunks });
 	};
 
+	const togglesScrollOnBranchChange = async () => {
+		scrollOnBranchChange = !scrollOnBranchChange;
+		saveSettings({ scrollOnBranchChange: scrollOnBranchChange });
+	};
+
 	const togglewidescreenMode = async () => {
 		widescreenMode = !widescreenMode;
 		saveSettings({ widescreenMode: widescreenMode });
@@ -141,6 +147,7 @@
 		chatBubble = $settings.chatBubble ?? true;
 		widescreenMode = $settings.widescreenMode ?? false;
 		splitLargeChunks = $settings.splitLargeChunks ?? false;
+		scrollOnBranchChange = $settings.scrollOnBranchChange ?? true;
 		chatDirection = $settings.chatDirection ?? 'LTR';
 		userLocation = $settings.userLocation ?? false;
 
@@ -318,6 +325,28 @@
 				</div>
 			</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs">
+						{$i18n.t('Scroll to bottom when switching between branches')}
+					</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded transition"
+						on:click={() => {
+							togglesScrollOnBranchChange();
+						}}
+						type="button"
+					>
+						{#if scrollOnBranchChange === true}
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
+						{:else}
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
+						{/if}
+					</button>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs">