step expansion fix and timeout
3clyp50 committed
Jan 21, 2026 at 14:58 UTC
91304a58d5d9546792463661c0a8a3c074d9d632
3 files changed
+30
-15
webui/components/messages/process-group/process-group-store.js
+3
-2
@@ -1,4 +1,5 @@
1
import { createStore } from "/js/AlpineStore.js";
2
+import { store as preferencesStore } from "/components/sidebar/bottom/preferences/preferences-store.js";
3
4
// Process Group Store - manages collapsible process groups in chat
5
@@ -179,7 +180,7 @@ const model = {
180
181
// Get current detail mode from preferences
182
_getDetailMode() {
182
- return window.Alpine?.store("preferences")?.detailMode || "current";
183
+ return preferencesStore.detailMode || "current";
184
},
185
186
expandGroup(groupId, isActiveAndGenerating = false) {
@@ -203,7 +204,7 @@ const model = {
204
// Apply current mode to all existing DOM elements
205
applyModeSteps() {
206
const mode = this._getDetailMode();
206
- const showUtils = window.Alpine?.store("preferences")?.showUtils || false;
207
+ const showUtils = preferencesStore.showUtils || false;
208
const allGroups = document.querySelectorAll(".process-group");
209
210
// Find the last VISIBLE step using targeted selector
webui/index.js
-2
@@ -415,8 +415,6 @@ function afterMessagesUpdate(logs) {
415
if (localStorage.getItem("speech") == "true") {
416
speakMessages(logs);
417
}
418
- // Apply messages expansion mode after rendering
419
- processGroupStore.applyModeSteps();
418
}
419
420
function speakMessages(logs) {
webui/js/messages.js
+27
-11
@@ -852,7 +852,7 @@ export function drawMessageError(
852
messageDiv.appendChild(errorGroup);
853
854
// Check detail mode and expand if needed
855
- const detailMode = window.Alpine?.store("preferences")?.detailMode || "current";
855
+ const detailMode = preferencesStore.detailMode || "current";
856
if (detailMode === "current" || detailMode === "expanded") {
857
errorGroup.classList.add("expanded");
858
}
@@ -1426,19 +1426,27 @@ function addProcessStep(group, id, type, heading, content, kvps, timestamp = nul
1426
// Get step info from heading (single source of truth: backend)
1427
const title = getStepTitle(heading, kvps, type);
1428
1429
- // Check if step should be expanded
1430
- const isActiveStep = !isGroupCompleted && group.id === activeProcessGroupId;
1431
- const isStepExpanded = processGroupStore.expandStep(groupId, id, isActiveStep);
1432
-
1433
- // In "current" mode, collapse all other steps
1429
+ // Determine if this new step should be expanded
1430
const detailMode = preferencesStore.detailMode;
1435
- if (detailMode === "current" && isStepExpanded) {
1436
- document.querySelectorAll(".process-step.step-expanded").forEach(s => {
1437
- s.classList.remove("step-expanded");
1438
- });
1431
+ let shouldExpand = false;
1432
+
1433
+ if (detailMode === "expanded") {
1434
+ shouldExpand = true;
1435
+ } else if (detailMode === "current" && !isGroupCompleted) {
1436
+ // In "current" mode: expand new step, delay-collapse previous
1437
+ shouldExpand = true;
1438
+
1439
+ // Find the currently expanded step (the previous one) to collapse after delay
1440
+ const previousExpandedStep = stepsContainer.querySelector(".process-step.step-expanded");
1441
+ if (previousExpandedStep) {
1442
+ setTimeout(() => {
1443
+ previousExpandedStep.classList.remove("step-expanded");
1444
+ }, 2000);
1445
+ }
1446
}
1447
+ // In "collapsed" mode: shouldExpand stays false
1448
1441
- if (isStepExpanded) {
1449
+ if (shouldExpand) {
1450
step.classList.add("step-expanded");
1451
}
1452
@@ -2165,6 +2173,14 @@ function markProcessGroupComplete(group, responseTitle) {
2173
// Add completed class to group
2174
group.classList.add("process-group-completed");
2175
2176
+ // Collapse the last expanded step when processing is done (in "current" mode)
2177
+ const detailMode = preferencesStore.detailMode;
2178
+ if (detailMode === "current") {
2179
+ const expandedStep = group.querySelector(".process-step.step-expanded");
2180
+ if (expandedStep) {
2181
+ expandedStep.classList.remove("step-expanded");
2182
+ }
2183
+ }
2184
2185
// Calculate final duration from backend data (sum of all step durations)
2186
const steps = group.querySelectorAll(".process-step");