fix: code-exe autoscroll
Rafael Uzarowski committed
Aug 1, 2025 at 17:06 UTC
c7613f8b7d6e41d6d2bcab45cfb241560fc5f666
2 files changed
+50
webui/css/messages.css
+3
@@ -202,11 +202,14 @@
202
203
.message-code-exe .message-body {
204
min-height: 5em;
205
+ max-height: 30em; /* Limit height to make it scrollable */
206
width: 100%;
207
background-color: var(--color-panel);
208
border-radius: 0.5em;
209
margin-top: 0.5em;
210
padding: 0.3em;
211
+ overflow-y: auto; /* Make it scrollable */
212
+ overflow-x: hidden; /* Prevent horizontal scroll */
213
}
214
215
/* Agent and AI Info */
webui/js/messages.js
+47
@@ -35,6 +35,17 @@ class ScrollPositionManager {
35
};
36
}
37
38
+ // Store message body scroll position (for terminal messages)
39
+ const msgBody = messageContainer.querySelector('.message-body');
40
+ if (msgBody && msgBody.scrollHeight > msgBody.clientHeight) {
41
+ positions.msgBody = {
42
+ scrollTop: msgBody.scrollTop,
43
+ scrollHeight: msgBody.scrollHeight,
44
+ clientHeight: msgBody.clientHeight,
45
+ isAtBottom: this.isAtBottom(msgBody)
46
+ };
47
+ }
48
+
49
// Store KVP scroll positions
50
const kvpValues = messageContainer.querySelectorAll('.kvps-val');
51
kvpValues.forEach((kvp, index) => {
@@ -73,6 +84,20 @@ class ScrollPositionManager {
84
}
85
}
86
87
+ // Restore message body scroll position (for terminal messages)
88
+ if (positions.msgBody) {
89
+ const msgBody = messageContainer.querySelector('.message-body');
90
+ if (msgBody) {
91
+ if (this.autoscrollDisabled || !positions.msgBody.isAtBottom) {
92
+ // User had scrolled up, restore their position
93
+ msgBody.scrollTop = positions.msgBody.scrollTop;
94
+ } else {
95
+ // User was at bottom, keep at bottom (autoscroll)
96
+ msgBody.scrollTop = msgBody.scrollHeight;
97
+ }
98
+ }
99
+ }
100
+
101
// Restore KVP scroll positions
102
const kvpValues = messageContainer.querySelectorAll('.kvps-val');
103
kvpValues.forEach((kvp, index) => {
@@ -111,6 +136,19 @@ class ScrollPositionManager {
136
});
137
}
138
139
+ // Add scroll listeners for message-body elements (terminal messages)
140
+ const msgBody = messageContainer.querySelector('.message-body');
141
+ if (msgBody) {
142
+ msgBody.addEventListener('scroll', () => {
143
+ if (!this.isAtBottom(msgBody)) {
144
+ this.disableAutoscroll();
145
+ } else {
146
+ // Re-enable autoscroll if user scrolls back to bottom
147
+ this.checkGlobalScrollState();
148
+ }
149
+ });
150
+ }
151
+
152
const kvpValues = messageContainer.querySelectorAll('.kvps-val');
153
kvpValues.forEach(kvp => {
154
kvp.addEventListener('scroll', () => {
@@ -154,6 +192,15 @@ class ScrollPositionManager {
192
}
193
}
194
195
+ // Check all message body areas (terminal messages)
196
+ const allMsgBody = document.querySelectorAll('.message-body');
197
+ for (let element of allMsgBody) {
198
+ if (element.scrollHeight > element.clientHeight && !this.isAtBottom(element)) {
199
+ this.autoscrollDisabled = true;
200
+ return;
201
+ }
202
+ }
203
+
204
// Check all KVP areas
205
const allKvpValues = document.querySelectorAll('.kvps-val');
206
for (let element of allKvpValues) {