Make hidden reasoning blocks not toggleable
| @@ -153,7 +153,7 @@ export class ReasoningHandler { | ||
| 153 | 153 | // Cached DOM elements for reasoning |
| 154 | 154 | /** @type {HTMLElement} Main message DOM element `.mes` */ |
| 155 | 155 | this.messageDom = null; |
| 156 | 156 | /** @type {HTMLElementHTMLDetailsElement} Reasoning details DOM element `.mes_reasoning_details` */ |
| 157 | 157 | this.messageReasoningDetailsDom = null; |
| 158 | 158 | /** @type {HTMLElement} Reasoning content DOM element `.mes_reasoning` */ |
| 159 | 159 | this.messageReasoningContentDom = null; |
| @@ -336,6 +336,11 @@ export class ReasoningHandler { | ||
| 336 | 336 | const button = this.messageDom.querySelector('.mes_edit_add_reasoning'); |
| 337 | 337 | button.title = this.state === ReasoningState.Hidden ? t`Hidden reasoning - Add reasoning block` : t`Add reasoning block`; |
| 338 | 338 | |
| 339 | + // Make sure that hidden reasoning headers are collapsed by default, to not show a useless edit button | |
| 340 | + if (this.state === ReasoningState.Hidden) { | |
| 341 | + this.messageReasoningDetailsDom.open = false; | |
| 342 | + } | |
| 343 | + | |
| 339 | 344 | // Update the reasoning duration in the UI |
| 340 | 345 | this.#updateReasoningTimeUI(); |
| 341 | 346 | } |
| @@ -628,7 +633,14 @@ function setReasoningEventHandlers() { | ||
| 628 | 633 | } |
| 629 | 634 | }); |
| 630 | 635 | |
| 631 | 636 | $(document).on('click', '.mes_reasoning_header', function (e) { |
| 637 | + const details = $(this).closest('.mes_reasoning_details'); | |
| 638 | + // Along with the CSS rules to mark blocks not toggle-able when they are empty, prevent them from actually being toggled, or being edited | |
| 639 | + if (details.find('.mes_reasoning').is(':empty')) { | |
| 640 | + e.preventDefault(); | |
| 641 | + return; | |
| 642 | + } | |
| 643 | + | |
| 632 | 644 | // If we are in message edit mode and reasoning area is closed, a click opens and edits it |
| 633 | 645 | const mes = $(this).closest('.mes'); |
| 634 | 646 | const mesEditArea = mes.find('#curEditTextarea'); |
| @@ -398,6 +398,10 @@ input[type='checkbox']:focus-visible { | ||
| 398 | 398 | align-items: baseline; |
| 399 | 399 | } |
| 400 | 400 | |
| 401 | +.mes:has(.mes_reasoning:empty) .mes_reasoning_header { | |
| 402 | + cursor: default; | |
| 403 | +} | |
| 404 | + | |
| 401 | 405 | /* TWIMC: Remove with custom CSS to show the icon */ |
| 402 | 406 | .mes_reasoning_header > .icon-svg { |
| 403 | 407 | display: none; |