diff options
| author | sigoden <sigoden@gmail.com> | 2024-05-20 07:56:57 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-05-20 07:56:57 +0800 |
| commit | 482822da5358a052761dda3767a6cdddca72ac59 (patch) | |
| tree | c9a686fc68fa2517536a08581b1a314c5fb6c2b3 /assets/arena.html | |
| parent | 9b7d93ee84435ac5eeb765662a08eae9cb4140ef (diff) | |
| download | aichat-482822da5358a052761dda3767a6cdddca72ac59.tar.gz | |
fix: webui message body do not autoscroll to bottom sometimes (#525)
Diffstat (limited to 'assets/arena.html')
| -rw-r--r-- | assets/arena.html | 28 |
1 files changed, 12 insertions, 16 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; |