From b5fc7d6d4d2be896456fb4ee009e77d31991bf1e Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmail.com>
Date: Wed, 12 Feb 2025 22:04:48 +0100
Subject: [PATCH] Add toggle for showing hidden reasoning

---
 public/index.html            |  6 ++++++
 public/scripts/power-user.js |  1 +
 public/scripts/reasoning.js  | 10 +++++++++-
 public/style.css             |  9 ++-------
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index 10f83c90e..d46dab4fd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3810,6 +3810,12 @@
                                             Auto-Expand
                                         </small>
                                     </label>
+                                    <label class="checkbox_label flex1" for="reasoning_show_hidden" title="Show reasoning time for models with hidden reasoning." data-i18n="[title]reasoning_show_hidden">
+                                        <input id="reasoning_show_hidden" type="checkbox" />
+                                        <small data-i18n="Show Hidden">
+                                            Show Hidden
+                                        </small>
+                                    </label>
                                 </div>
                                 <div class="flex-container alignItemsBaseline">
                                     <label class="checkbox_label flex1" for="reasoning_add_to_prompts" title="Add existing reasoning blocks to prompts. To add a new reasoning block, use the message edit menu." data-i18n="[title]reasoning_add_to_prompts">
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 8e71ea76a..e0e04db42 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -258,6 +258,7 @@ let power_user = {
         auto_parse: false,
         add_to_prompts: false,
         auto_expand: false,
+        show_hidden: false,
         prefix: '<think>\n',
         suffix: '\n</think>',
         separator: '\n\n',
diff --git a/public/scripts/reasoning.js b/public/scripts/reasoning.js
index f8702f2cb..5ecc267ea 100644
--- a/public/scripts/reasoning.js
+++ b/public/scripts/reasoning.js
@@ -503,6 +503,15 @@ function loadReasoningSettings() {
         toggleReasoningAutoExpand();
         saveSettingsDebounced();
     });
+    toggleReasoningAutoExpand();
+
+    $('#reasoning_show_hidden').prop('checked', power_user.reasoning.show_hidden);
+    $('#reasoning_show_hidden').on('change', function () {
+        power_user.reasoning.show_hidden = !!$(this).prop('checked');
+        $('#chat').attr('data-show-hidden-reasoning', power_user.reasoning.show_hidden ? 'true' : null);
+        saveSettingsDebounced();
+    });
+    $('#chat').attr('data-show-hidden-reasoning', power_user.reasoning.show_hidden ? 'true' : null);
 }
 
 function registerReasoningSlashCommands() {
@@ -874,7 +883,6 @@ function registerReasoningAppEvents() {
 
 export function initReasoning() {
     loadReasoningSettings();
-    toggleReasoningAutoExpand();
     setReasoningEventHandlers();
     registerReasoningSlashCommands();
     registerReasoningMacros();
diff --git a/public/style.css b/public/style.css
index 6d3a6fa3c..dbb26242b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -428,16 +428,11 @@ input[type='checkbox']:focus-visible {
     background-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 33%, var(--SmartThemeBlurTintColor) 66%);
 }
 
-/** Hide hidden reasoning blocks - revert this selector to show them again */
-.mes.reasoning[data-reasoning-state="hidden"] .mes_reasoning_details {
+/** If hidden reasoning should not be shown, we hide all blocks that don't have content */
+#chat:not([data-show-hidden-reasoning="true"]) .mes:has(.mes_reasoning:empty) .mes_reasoning_details {
     display: none;
 }
 
-/** Show "Thinking..." during generation, even if the reasoning is hidden by default */
-body[data-generating="true"] .last_mes.reasoning[data-reasoning-state="hidden"] .mes_reasoning_details {
-    display: block;
-}
-
 .mes_reasoning_details .mes_reasoning_arrow {
     position: absolute;
     top: 50%;