fix: webui message body do not autoscroll to bottom sometimes (#525)

2 files changed, 27 insertions, 34 deletions

diff --git a/assets/arena.html b/assets/arena.html
index b50ee52..8c6a86f 100644
--- a/assets/arena.html
+++ b/assets/arena.html
@@ -114,7 +114,7 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      width: 100%;
+      width: calc(100% - 1rem);
       margin-top: -2px;
       padding-left: 0.625rem;
       flex-grow: 1;
@@ -674,22 +674,25 @@
 
         handleScrollChatBody(event, index) {
           const chat = this.chats[index];
-          const { scrollTop, clientHeight, scrollHeight } = event.target;
-          if ((event.target._prevScrollTop || 0) > scrollTop + 1) {
+          const $chatBody = event.target;
+          const { scrollTop, clientHeight, scrollHeight, _prevScrollTop = 0 } = $chatBody;
+          if (scrollTop + clientHeight > scrollHeight - 5) {
+            chat.isShowScrollToBottomBtn = false;
+            chat.shouldScrollChatBodyToBottom = true;
+          }
+          if (scrollHeight > clientHeight && _prevScrollTop > 1 && _prevScrollTop > scrollTop + 1) {
             chat.shouldScrollChatBodyToBottom = false;
             chat.isShowScrollToBottomBtn = true;
-          } else if (chat.isShowScrollToBottomBtn && scrollTop + clientHeight > scrollHeight - 5) {
-            chat.isShowScrollToBottomBtn = false;
           }
+          $chatBody._prevScrollTop = scrollTop;
         },
 
         handleScrollToBottom(index) {
           const chat = this.chats[index];
           const $chatBody = document.querySelector('#chat-body-' + index);
           $chatBody.scrollTop = $chatBody.scrollHeight;
-          $chatBody._prevScrollTop = $chatBody.scrollTop;
           chat.isShowScrollToBottomBtn = false;
-          chat.autoScrollChatBodyToBottom = true;
+          chat.shouldScrollChatBodyToBottom = true;
         },
 
         handleNewlineInput(event) {
@@ -743,11 +746,7 @@
           if (chat.shouldScrollChatBodyToBottom) {
             const $chatBody = document.querySelector('#chat-body-' + index);
             if ($chatBody) {
-              const { scrollTop, scrollHeight, clientHeight } = $chatBody;
-              if (scrollTop + clientHeight < scrollHeight - 5) {
-                $chatBody.scrollTop = scrollHeight;
-                $chatBody._prevScrollTop = $chatBody.scrollTop;
-              }
+              $chatBody.scrollTop = $chatBody.scrollHeight;
             }
           }
         },
@@ -774,10 +773,7 @@
         async ask(index) {
           const chat = this.chats[index];
           chat.askAbortController = new AbortController();
-          this.$nextTick(() => {
-            chat.shouldScrollChatBodyToBottom = true;
-            this.autoScrollChatBodyToBottom(index);
-          });
+          chat.shouldScrollChatBodyToBottom = true;
           const lastMessage = chat.messages[chat.messages.length - 1];
           const body = this.buildBody(index);
           let succeed = false;
diff --git a/assets/playground.html b/assets/playground.html
index d8c33f7..ccbc488 100644
--- a/assets/playground.html
+++ b/assets/playground.html
@@ -191,7 +191,7 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      width: 100%;
+      width: calc(100% - 1rem);
       margin-top: -2px;
       padding-left: 0.625rem;
       flex-grow: 1;
@@ -825,21 +825,24 @@
         },
 
         handleScrollChatBody(event) {
-          const { scrollTop, clientHeight, scrollHeight } = event.target;
-          if ((event.target._prevScrollTop || 0) > scrollTop + 1) {
+          const $chatBody = event.target;
+          const { scrollTop, clientHeight, scrollHeight, _prevScrollTop = 0 } = $chatBody;
+          if (scrollTop + clientHeight > scrollHeight - 5) {
+            this.isShowScrollToBottomBtn = false;
+            this.shouldScrollChatBodyToBottom = true;
+          }
+          if (scrollHeight > clientHeight && _prevScrollTop > 1 && _prevScrollTop > scrollTop + 1) {
             this.shouldScrollChatBodyToBottom = false;
             this.isShowScrollToBottomBtn = true;
-          } else if (this.isShowScrollToBottomBtn && scrollTop + clientHeight > scrollHeight - 5) {
-            this.isShowScrollToBottomBtn = false;
           }
+          $chatBody._prevScrollTop = scrollTop;
         },
 
         handleScrollToBottom() {
           const $chatBody = this.$refs["chat-body"];
           $chatBody.scrollTop = $chatBody.scrollHeight;
-          $chatBody._prevScrollTop = $chatBody.scrollTop;
           this.isShowScrollToBottomBtn = false;
-          this.autoScrollChatBodyToBottom = true;
+          this.shouldScrollChatBodyToBottom = true;
         },
 
         handleShowSidebarBtnClick() {
@@ -893,14 +896,11 @@
 
         autoScrollChatBodyToBottom() {
           if (this.shouldScrollChatBodyToBottom) {
-            const $chatBody = this.$refs["chat-body"];
-            if ($chatBody) {
-              const { scrollTop, scrollHeight, clientHeight } = $chatBody;
-              if (scrollTop + clientHeight < scrollHeight - 5) {
-                $chatBody.scrollTop = scrollHeight;
-                $chatBody._prevScrollTop = $chatBody.scrollTop;
-              }
+            let $chatBody = this.$refs["chat-body"];
+            if (!$chatBody) {
+              $chatBody = document.querySelector('[x-ref="chat-body"]')
             }
+            $chatBody.scrollTop = $chatBody.scrollHeight;
           }
         },
 
@@ -925,10 +925,7 @@
 
         async ask() {
           this.askAbortController = new AbortController();
-          this.$nextTick(() => {
-            this.shouldScrollChatBodyToBottom = true;
-            this.autoScrollChatBodyToBottom();
-          });
+          this.shouldScrollChatBodyToBottom = true;
           const lastMessage = this.messages[this.messages.length - 1];
           const body = this.buildBody();
           let succeed = false;