From 93f3334ad0bb7b286ce9535d747d5034106bf018 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmail.com>
Date: Wed, 12 Feb 2025 22:38:26 +0100
Subject: [PATCH] Make hidden reasoning blocks not toggleable

---
 public/scripts/reasoning.js | 16 ++++++++++++++--
 public/style.css            |  4 ++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/public/scripts/reasoning.js b/public/scripts/reasoning.js
index 5ecc267ea..10d01f326 100644
--- a/public/scripts/reasoning.js
+++ b/public/scripts/reasoning.js
@@ -153,7 +153,7 @@ export class ReasoningHandler {
         // Cached DOM elements for reasoning
         /** @type {HTMLElement} Main message DOM element `.mes` */
         this.messageDom = null;
-        /** @type {HTMLElement} Reasoning details DOM element `.mes_reasoning_details` */
+        /** @type {HTMLDetailsElement} Reasoning details DOM element `.mes_reasoning_details` */
         this.messageReasoningDetailsDom = null;
         /** @type {HTMLElement} Reasoning content DOM element `.mes_reasoning` */
         this.messageReasoningContentDom = null;
@@ -336,6 +336,11 @@ export class ReasoningHandler {
         const button = this.messageDom.querySelector('.mes_edit_add_reasoning');
         button.title = this.state === ReasoningState.Hidden ? t`Hidden reasoning - Add reasoning block` : t`Add reasoning block`;
 
+        // Make sure that hidden reasoning headers are collapsed by default, to not show a useless edit button
+        if (this.state === ReasoningState.Hidden) {
+            this.messageReasoningDetailsDom.open = false;
+        }
+
         // Update the reasoning duration in the UI
         this.#updateReasoningTimeUI();
     }
@@ -628,7 +633,14 @@ function setReasoningEventHandlers() {
         }
     });
 
-    $(document).on('click', '.mes_reasoning_header', function () {
+    $(document).on('click', '.mes_reasoning_header', function (e) {
+        const details = $(this).closest('.mes_reasoning_details');
+        // Along with the CSS rules to mark blocks not toggle-able when they are empty, prevent them from actually being toggled, or being edited
+        if (details.find('.mes_reasoning').is(':empty')) {
+            e.preventDefault();
+            return;
+        }
+
         // If we are in message edit mode and reasoning area is closed, a click opens and edits it
         const mes = $(this).closest('.mes');
         const mesEditArea = mes.find('#curEditTextarea');
diff --git a/public/style.css b/public/style.css
index dbb26242b..b56a87cd0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -398,6 +398,10 @@ input[type='checkbox']:focus-visible {
     align-items: baseline;
 }
 
+.mes:has(.mes_reasoning:empty) .mes_reasoning_header {
+    cursor: default;
+}
+
 /* TWIMC: Remove with custom CSS to show the icon */
 .mes_reasoning_header > .icon-svg {
     display: none;