Rework reasoning CSS selectors and fixes - Remove reliance on :empty state of reasoning textbox, now using the actual css class on mes (".mes.reasoning") - Fix reasoning add not working when Auto-Expand is not enabled - Clean setting of dataset attributes, now removing when null

21af0243d6f8475ef09d7a59b68e773b7354a23c

Wolfsblvt <wolfsblvt@gmail.com>

public/scripts/reasoning.js+11 -11 Viewed

 import { commonEnumProviders } from './slash-commands/SlashCommandCommonEnumsProvider.js';
 import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
 import { textgen_types, textgenerationwebui_settings } from './textgen-settings.js';
 import { copyText, escapeRegex, isFalseBoolean, setDatasetProperty } from './utils.js';
 /**
  * Gets a message from a jQuery element.

         this.messageDom.classList.toggle('reasoning', this.state !== ReasoningState.None);
         // Update states to the relevant DOM elements
         setDatasetProperty(this.messageDom.dataset.reasoningState, ='reasoningState', this.state !== ReasoningState.None ? this.state : null);
         setDatasetProperty(this.messageReasoningDetailsDom.dataset.state, ='state', this.state);
         // Update the reasoning message
         const reasoning = power_user.trim_spaces ? this.reasoning.trim() : this.reasoning;

@@ -391,8 +391,8 @@ export class ReasoningHandler {
391	391	data = null;
392	392	}
393	393
394	394	setDatasetProperty(this.messageReasoningDetailsDom.dataset.duration, ='duration', data);
395		- element.dataset.duration = data;
	395	+ setDatasetProperty(element, 'duration', data);
396	396	}
397	397	}
398	398

         const textarea = messageBlock.find('.reasoning_edit_textarea');
         textarea.remove();
         // MakeIf surewe cancel, we might have to remove the fakereasong placeholderclass fromagain theif reasoningthis stringis an unsaved empty reasoning
 -        const text = messageBlock.find('.mes_reasoning').text();
 +        if (!messageBlock.attr('data--reasoning-state')) {
 -        if (text === PromptReasoning.REASONING_UI_PLACEHOLDER) {
 +            messageBlock.removeClass('reasoning');
 -            messageBlock.find('.mes_reasoning').text('');
+        }
         messageBlock.find('.mes_reasoning_edit_cancel:visible').trigger('click');

             return;
+        }
 -        // To be able to edit, we need to "fake" content being there inside the reasoning string
 +        messageBlock.addClass('reasoning');
 -        messageBlock.find('.mes_reasoning').text(PromptReasoning.REASONING_UI_PLACEHOLDER);
 +        // Open the reasoning area so we can actually edit it
 +        messageBlock.find('.mes_reasoning_details').attr('open', '');
         messageBlock.find('.mes_reasoning_edit').trigger('click');
         await saveChatConditional();
     });

public/scripts/utils.js+17 -0 Viewed

+    }
+}
 +/**
 + * Sets or removes a dataset property on an HTMLElement
 + *
 + * Utility function to make it easier to reset dataset properties on null, without them being "null" as value.
 + *
 + * @param {HTMLElement} element - The element to modify
 + * @param {string} name - The name of the dataset property
 + * @param {string|null} value - The value to set - If null, the dataset property will be removed
 + */
 +export function setDatasetProperty(element, name, value) {
 +    if (value === null) {
 +        delete element.dataset[name];
 +    } else {
 +        element.dataset[name] = value;
 +    }
 +}
++
 export async function fetchFaFile(name) {
     const style = document.createElement('style');
     style.innerHTML = await (await fetch(`/css/${name}`)).text();

public/style.css+6 -6 Viewed

+}
 .mes_bias:empty,
 -.mes_reasoning:empty,
 +.mes:not(.reasoning) .mes_reasoning_details,
 -.mes_reasoning_details:has(.mes_reasoning:empty),
 .mes_reasoning_details:not([open]) .mes_reasoning_actions,
 .mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning,
 .mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_header,
 -.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .edit_button,
 .mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.edit_button),
 +.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .edit_button,
 .mes_block:has(.edit_textarea):has(.reasoning_edit_textarea) .mes_reasoning_actions,
 .mes.reasoning:not([data-reasoning-state="none"]) .mes_edit_add_reasoning,
 .mes[data-reasoning-state="nonehidden"] .mes_reasoning_arrow,
 .mes[data-reasoning-state="nonehidden"] .mes_reasoning_actions {mes_reasoning,
 +.mes[data-reasoning-state="hidden"] .mes_reasoning_copy {
     display: none;
+}