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 } from './utils.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
-        this.messageDom.dataset.reasoningState = this.state !== ReasoningState.None ? this.state : null;
+        setDatasetProperty(this.messageDom, 'reasoningState', this.state !== ReasoningState.None ? this.state : null);
-        this.messageReasoningDetailsDom.dataset.state = this.state;
+        setDatasetProperty(this.messageReasoningDetailsDom, '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	data = null;	391	data = null;
392	}	392	}
393		393
394	this.messageReasoningDetailsDom.dataset.duration = data;	394	setDatasetProperty(this.messageReasoningDetailsDom, '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();
-        // Make sure we remove the fake placeholder from the reasoning string
+        // If we cancel, we might have to remove the reasong class again if this is 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.reasoning .mes_edit_add_reasoning,
-.mes[data-reasoning-state="none"] .mes_reasoning_arrow,
+.mes[data-reasoning-state="hidden"] .mes_reasoning_arrow,
-.mes[data-reasoning-state="none"] .mes_reasoning_actions {
+.mes[data-reasoning-state="hidden"] .mes_reasoning,
+.mes[data-reasoning-state="hidden"] .mes_reasoning_copy {
     display: none;
+}