collapsible msgs fix
3clyp50 committed
Jan 31, 2026 at 17:24 UTC
8ed4563b79c9ef430591add869b10da2c5dd2ef9
1 file changed
+20
-20
webui/js/messages.js
+20
-20
@@ -460,8 +460,6 @@ function drawStandaloneMessage({
460
mainClass,
461
});
462
463
- // Collapsible with action buttons
464
- setupCollapsible(messageDiv, ".step-action-buttons", false, actionButtons);
463
// Collapsible with action buttons
464
setupCollapsible(messageDiv, ".step-action-buttons", false, actionButtons);
465
@@ -526,6 +524,7 @@ export function _drawMessage({
524
}
525
526
// reapply scroll position or autoscroll
527
+ bodyDiv.dataset.scrollStabilization = "1";
528
const scroller = new Scroller(bodyDiv, { smooth: !isMassRender() });
529
530
// Handle KVPs incrementally
@@ -599,8 +598,10 @@ export function _drawMessage({
598
}
599
}
600
602
- // reapply scroll position or autoscroll
603
- scroller.reApplyScroll();
601
+ // reapply scroll position or reset for collapsed
602
+ messageDiv.classList.contains("expanded")
603
+ ? scroller.reApplyScroll()
604
+ : (bodyDiv.scrollTop = 0);
605
606
return messageDiv;
607
}
@@ -2065,25 +2066,24 @@ function setupCollapsible(messageDiv, containerSelector, initialExpanded, action
2066
btn.classList.toggle("show-more-btn", !exp);
2067
};
2068
syncBtn();
2068
- btn.onclick = () => { messageDiv.classList.toggle("expanded"); syncBtn(); };
2069
+ btn.onclick = () => {
2070
+ messageDiv.classList.toggle("expanded");
2071
+ syncBtn();
2072
+ messageDiv.classList.contains("expanded")
2073
+ || (messageDiv.querySelector(".message-body").scrollTop = 0);
2074
+ };
2075
2076
actionButtons.filter(Boolean).forEach((b) => container.appendChild(b));
2077
2072
- // Detect overflow after render (skip if already detected to avoid scroll disruption)
2073
- if (!messageDiv.classList.contains("has-overflow")) {
2074
- requestAnimationFrame(() => {
2075
- const body = messageDiv.querySelector(".message-body");
2076
- if (!body) return;
2077
-
2078
- // calculate max height without touching DOM (no scroll jitter)
2079
- const fontSize = parseFloat(getComputedStyle(body).fontSize || "16");
2080
- const maxHeight = messageDiv.classList.contains("expanded")
2081
- ? fontSize * 15
2082
- : body.clientHeight;
2083
-
2084
- messageDiv.classList.toggle("has-overflow", body.scrollHeight > maxHeight);
2085
- });
2086
- }
2078
+ // Detect overflow after render
2079
+ requestAnimationFrame(() => {
2080
+ const body = messageDiv.querySelector(".message-body");
2081
+ const fontSize = parseFloat(getComputedStyle(body || document.documentElement).fontSize || "16");
2082
+ const maxHeight = messageDiv.classList.contains("expanded")
2083
+ ? fontSize * 15
2084
+ : (body?.clientHeight || 0);
2085
+ messageDiv.classList.toggle("has-overflow", (body?.scrollHeight || 0) > maxHeight);
2086
+ });
2087
}
2088
2089
// returns true if this is the initial render of a chat eg. when reloading window, switching chat or catching up after a break