vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better auto scroll

Browse source
This commit is contained in:
Xuan Son Nguyen 2024-11-06 15:14:58 +01:00
parent e25be408a6
commit 6a21c4d020
1 changed files with 8 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
examples/server/public/index.html
View file

@ -332,9 +332,13 @@
}; };
// scroll to bottom of chat messages // scroll to bottom of chat messages
const chatScrollToBottom = () => { // if requiresNearBottom is true, only auto-scroll if user is near bottom
const chatScrollToBottom = (requiresNearBottom) => {
const msgListElem = document.getElementById('messages-list'); const msgListElem = document.getElementById('messages-list');
setTimeout(() => msgListElem.scrollTo({ top: msgListElem.scrollHeight }), 1); const spaceToBottom = msgListElem.scrollHeight - msgListElem.scrollTop - msgListElem.clientHeight;
if (!requiresNearBottom || (spaceToBottom < 100)) {
setTimeout(() => msgListElem.scrollTo({ top: msgListElem.scrollHeight }), 1);
}
}; };
const mainApp = createApp({ const mainApp = createApp({
@ -364,7 +368,7 @@
// scroll to the bottom when the pending message height is updated // scroll to the bottom when the pending message height is updated
const pendingMsgElem = document.getElementById('pending-msg'); const pendingMsgElem = document.getElementById('pending-msg');
const resizeObserver = new ResizeObserver(() => { const resizeObserver = new ResizeObserver(() => {
if (this.isGenerating) chatScrollToBottom(); if (this.isGenerating) chatScrollToBottom(true);
}); });
resizeObserver.observe(pendingMsgElem); resizeObserver.observe(pendingMsgElem);
}, },
@ -413,6 +417,7 @@
this.inputMsg = ''; this.inputMsg = '';
this.editingMsg = null; this.editingMsg = null;
this.generateMessage(currConvId); this.generateMessage(currConvId);
chatScrollToBottom();
}, },
async generateMessage(currConvId) { async generateMessage(currConvId) {
if (this.isGenerating) return; if (this.isGenerating) return;