scroll bottom and top

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 {

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>

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>

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 => {