showThoughts hide/show GEN steps
3clyp50 committed
Jan 2, 2026 at 17:57 UTC
370509673965edbf2fba264ac87df6defe2e3289
3 files changed
+20
-17
webui/components/messages/process-group/process-group.css
+1
@@ -834,4 +834,5 @@
834
835
.process-step-detail-content pre.msg-json.show-json {
836
display: block;
837
+ margin-top: var(--spacing-xs);
838
}
webui/components/sidebar/bottom/preferences/preferences-store.js
+15
@@ -95,6 +95,14 @@ const model = {
95
this._collapseProcessGroups = true;
96
}
97
98
+ // Load show thoughts preference
99
+ try {
100
+ const storedShowThoughts = localStorage.getItem("showThoughts");
101
+ this._showThoughts = storedShowThoughts !== "false"; // Default true
102
+ } catch {
103
+ this._showThoughts = true;
104
+ }
105
+
106
// Apply all preferences
107
this._applyDarkMode(this._darkMode);
108
this._applyAutoScroll(this._autoScroll);
@@ -129,6 +137,8 @@ const model = {
137
},
138
139
_applyShowThoughts(value) {
140
+ localStorage.setItem("showThoughts", value);
141
+
142
// For original messages
143
css.toggleCssProperty(
144
".msg-thoughts",
@@ -139,6 +149,11 @@ const model = {
149
document.querySelectorAll(".step-kvp.msg-thoughts").forEach((el) => {
150
el.classList.toggle("hide-thoughts", !value);
151
});
152
+
153
+ // Toggle collapse/expand state for all GEN steps (agent type steps with thoughts)
154
+ document.querySelectorAll('.process-step[data-type="agent"]').forEach((el) => {
155
+ el.classList.toggle("step-expanded", value);
156
+ });
157
},
158
159
_applyShowJson(value) {
webui/js/messages.js
+4
-17
@@ -1215,7 +1215,9 @@ function addProcessStep(group, id, type, heading, content, kvps, timestamp = nul
1215
const title = getStepTitle(heading, kvps, type);
1216
1217
// Check if step should be expanded
1218
- const isStepExpanded = processGroupStore.isStepExpanded(groupId, id);
1218
+ // Agent (GEN) steps expand based on showThoughts preference
1219
+ const isStepExpanded = processGroupStore.isStepExpanded(groupId, id) ||
1220
+ (type === "agent" && preferencesStore.showThoughts);
1221
if (isStepExpanded) {
1222
step.classList.add("step-expanded");
1223
}
@@ -1419,22 +1421,7 @@ function renderStepDetailContent(container, content, kvps, type = null) {
1421
1422
// Special handling for thoughts/reasoning - render with single lightbulb icon
1423
if (lowerKey === "thoughts" || lowerKey === "thinking" || lowerKey === "reflection" || lowerKey === "reasoning") {
1422
- const thoughtsDiv = document.createElement("div");
1423
- thoughtsDiv.classList.add("step-thoughts", "msg-thoughts");
1424
-
1425
- // Apply current preference state - hide if showThoughts is false
1426
- if (!preferencesStore.showThoughts) {
1427
- thoughtsDiv.classList.add("hide-thoughts");
1428
- }
1429
-
1430
- const thoughtText = cleanTextValue(value);
1431
-
1432
- if (thoughtText) {
1433
- // Single icon + text block
1434
- thoughtsDiv.innerHTML = `<span class="thought-icon material-symbols-outlined">lightbulb</span><span class="thought-text">${escapeHTML(thoughtText)}</span>`;
1435
- }
1436
-
1437
- kvpsDiv.appendChild(thoughtsDiv);
1424
+ renderThoughts(kvpsDiv, value);
1425
continue;
1426
}
1427