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 @@
\ 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 @@
+
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 => {