Revert index.js scrolling logic + css infinite scroll fix
Alessandro committed
Nov 7, 2024 at 03:40 UTC
3c40c86d07e3f1a4554575983bb8c38aba120c7f
2 files changed
+24
-38
webui/index.css
+5
-6
@@ -372,7 +372,7 @@ pre {
372
flex-direction: column;
373
flex-grow: 1;
374
overflow-y: scroll;
375
- scroll-behavior: smooth;
375
+ scroll-behavior: auto !important; /* avoid infinite scrolling! */
376
overflow-x: hidden;
377
padding: var(--spacing-md) var(--spacing-md) 0;
378
transition: all 0.3s ease;
@@ -392,18 +392,15 @@ pre {
392
}
393
394
#chat-history::-webkit-scrollbar-track {
395
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
395
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
396
border-radius: 3px;
397
}
398
399
#chat-history::-webkit-scrollbar-thumb {
400
border-radius: 3px;
402
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
401
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
402
background-color: #555;
403
transition: background-color var(--transition-speed) ease-in-out;
406
- -webkit-transition: background-color var(--transition-speed) ease-in-out;
404
}
405
406
#chat-history::-webkit-scrollbar-thumb:hover {
@@ -776,7 +773,7 @@ pre {
773
display: flex;
774
flex-direction: column;
775
gap: var(--spacing-xs);
779
- padding: var(--spacing-sm) var(--spacing-md);
776
+ padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 0.8rem;
777
background-color: var(--color-panel);
778
}
779
@@ -832,6 +829,7 @@ pre {
829
width: 100%;
830
display: flex;
831
padding-top: var(--spacing-xs);
832
+ margin-left: 0.7rem;
833
gap: var(--spacing-xs);
834
white-space: pre-wrap;
835
}
@@ -1051,7 +1049,8 @@ input:checked + .slider:before {
1049
cursor: pointer;
1050
font-size: var(--font-size-normal);
1051
height: 2.525rem;
1054
- margin-left: var(--spacing-sm);
1052
+ margin-left: var(--spacing-xs);
1053
+ margin-right: 0.18rem;
1054
transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
1055
transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
1056
-webkit-transition: background-color var(--transition-speed), transform 0.1s ease-in-out;
webui/index.js
+19
-32
@@ -197,9 +197,8 @@ function setMessage(id, type, heading, content, temp, kvps = null) {
197
if (!document.getElementById(`message-${id}`)) {
198
chatHistory.appendChild(messageContainer);
199
}
200
-
201
- // Remove the automatic scrolling
202
- // if (autoScroll) chatHistory.scrollTop = chatHistory.scrollHeight;
200
+
201
+ if (autoScroll) chatHistory.scrollTop = chatHistory.scrollHeight;
202
}
203
204
@@ -237,29 +236,31 @@ let lastLogVersion = 0;
236
let lastLogGuid = ""
237
238
async function poll() {
240
- let updated = false;
239
+ let updated = false
240
try {
241
const response = await sendJsonData("/poll", { log_from: lastLogVersion, context });
242
+ //console.log(response)
243
244
if (response.ok) {
245
- if (!context) setContext(response.context);
246
- if (response.context != context) return; // Skip if context changed
245
+
246
+ if (!context) setContext(response.context)
247
+ if (response.context != context) return //skip late polls after context change
248
249
if (lastLogGuid != response.log_guid) {
249
- chatHistory.innerHTML = "";
250
- lastLogVersion = 0;
250
+ chatHistory.innerHTML = ""
251
+ lastLogVersion = 0
252
}
253
254
if (lastLogVersion != response.log_version) {
254
- updated = true;
255
+ updated = true
256
for (const log of response.logs) {
257
setMessage(log.no, log.type, log.heading, log.content, log.temp, log.kvps);
258
}
259
}
260
260
- updateProgress(response.log_progress);
261
+ updateProgress(response.log_progress)
262
262
- // Set UI model vars from backend
263
+ //set ui model vars from backend
264
const inputAD = Alpine.$data(inputSection);
265
inputAD.paused = response.paused;
266
const statusAD = Alpine.$data(statusSection);
@@ -269,22 +270,17 @@ async function poll() {
270
271
lastLogVersion = response.log_version;
272
lastLogGuid = response.log_guid;
273
+
274
+
275
}
276
+
277
} catch (error) {
278
console.error('Error:', error);
279
const statusAD = Alpine.$data(statusSection);
280
statusAD.connected = false;
281
}
282
279
- if (updated && autoScroll) {
280
- const lastMessage = chatHistory.lastElementChild;
281
- if (lastMessage) {
282
- // Scroll the last message into view
283
- lastMessage.scrollIntoView({ behavior: 'auto' });
284
- }
285
- }
286
-
287
- return updated;
283
+ return updated
284
}
285
286
function updateProgress(progress) {
@@ -348,17 +344,8 @@ window.killChat = async function (id) {
344
}
345
346
window.selectChat = async function (id) {
351
- setContext(id);
352
- updateAfterScroll();
353
-
354
- // Optionally, wait for poll to load messages and then scroll
355
- const updated = await poll();
356
- if (updated && autoScroll) {
357
- const lastMessage = chatHistory.lastElementChild;
358
- if (lastMessage) {
359
- lastMessage.scrollIntoView({ behavior: 'auto' });
360
- }
361
- }
347
+ setContext(id)
348
+ updateAfterScroll()
349
}
350
351
const setContext = function (id) {
@@ -631,4 +618,4 @@ async function startPolling() {
618
_doPoll();
619
}
620
634
-document.addEventListener("DOMContentLoaded", startPolling);
621
+document.addEventListener("DOMContentLoaded", startPolling);
\ No newline at end of file