From dea725e17c007e5963d2351c5cd0845f5ab72a4d Mon Sep 17 00:00:00 2001
From: Laura <milanbartky@gmail.com>
Date: Sat, 23 Aug 2025 17:43:37 +0200
Subject: [PATCH] scroll bottom and top

---
 static/css/chat.css                   | 16 +++++++++++++---
 static/css/icons/{down.svg => up.svg} |  2 +-
 static/index.html                     |  1 +
 static/js/chat.js                     | 20 ++++++++++++++------
 4 files changed, 29 insertions(+), 10 deletions(-)
 rename static/css/icons/{down.svg => up.svg} (71%)

diff --git a/static/css/chat.css b/static/css/chat.css
index 3b99e26..8045261 100644
--- a/static/css/chat.css
+++ b/static/css/chat.css
@@ -724,6 +724,7 @@ body.loading #version,
 .modal.loading .content::after,
 .reasoning .toggle::before,
 .reasoning .toggle::after,
+#top,
 #bottom,
 .files .file::before,
 .files .file .remove,
@@ -853,15 +854,24 @@ label[for="reasoning-tokens"] {
 	background-image: url(icons/amount.svg);
 }
 
+#top,
 #bottom {
 	top: -38px;
 	right: 20px;
-	width: 28px;
-	height: 28px;
-	background-image: url(icons/down.svg);
+	width: 20px;
+	height: 20px;
+	background-image: url(icons/up.svg);
 	transition: 150ms;
 }
 
+#bottom {
+	transform: rotate(180deg);
+}
+
+#top:not(.hidden)+#bottom {
+	right: 40px;
+}
+
 #upload,
 #add,
 #send {
diff --git a/static/css/icons/down.svg b/static/css/icons/up.svg
similarity index 71%
rename from static/css/icons/down.svg
rename to static/css/icons/up.svg
index cc2afb5..a02686b 100644
--- a/static/css/icons/down.svg
+++ b/static/css/icons/up.svg
@@ -3,5 +3,5 @@
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
 
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
<g id="SVGRepo_iconCarrier"> <path d="M12 17L12 7M12 17L8 13M12 17L16 13" stroke="#cad3f5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
<g id="SVGRepo_iconCarrier"> <path d="M12 4V20M12 4L18 10M12 4L6 10" stroke="#cad3f5" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> </g>
 
</svg>
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index f372c3a..7162e51 100644
--- a/static/index.html
+++ b/static/index.html
@@ -27,6 +27,7 @@
 		<div id="page">
 			<div id="messages"></div>
 			<div id="chat">
+				<button id="top" class="hidden" title="Scroll to top"></button>
 				<button id="bottom" class="hidden" title="Scroll to bottom"></button>
 
 				<div id="resize-bar"></div>
diff --git a/static/js/chat.js b/static/js/chat.js
index b90beef..219fd3f 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -3,6 +3,7 @@
 		$messages = document.getElementById("messages"),
 		$chat = document.getElementById("chat"),
 		$message = document.getElementById("message"),
+		$top = document.getElementById("top"),
 		$bottom = document.getElementById("bottom"),
 		$resizeBar = document.getElementById("resize-bar"),
 		$attachments = document.getElementById("attachments"),
@@ -45,11 +46,8 @@
 	function updateScrollButton() {
 		const bottom = $messages.scrollHeight - ($messages.scrollTop + $messages.offsetHeight);
 
-		if (bottom >= 80) {
-			$bottom.classList.remove("hidden");
-		} else {
-			$bottom.classList.add("hidden");
-		}
+		$top.classList.toggle("hidden", $messages.scrollTop < 80);
+		$bottom.classList.toggle("hidden", bottom < 80);
 	}
 
 	function scroll(force = false, instant = false) {
@@ -1230,7 +1228,17 @@
 	});
 
 	$bottom.addEventListener("click", () => {
-		scroll(true);
+		$messages.scroll({
+			top: $messages.scrollHeight,
+			behavior: "smooth",
+		});
+	});
+
+	$top.addEventListener("click", () => {
+		$messages.scroll({
+			top: 0,
+			behavior: "smooth",
+		});
 	});
 
 	$resizeBar.addEventListener("mousedown", event => {