Make hidden reasoning blocks not toggleable

93f3334ad0bb7b286ce9535d747d5034106bf018

Wolfsblvt <wolfsblvt@gmail.com>

public/scripts/reasoning.js+14 -2 Viewed

         // 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;

         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();
+    }

+        }
     });
-    $(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');

public/style.css+4 -0 Viewed

     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;