Merge pull request #3444 from SillyTavern/hidden-reasoning-tracking Track reasoning duration for models with hidden reasoning

25a2582d15bf63e86ae590e156a21bd6331eeeaf

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: d076a210a1d3415852dd1e9d8746b0671eefbaf5 b5fc7d6d4d2be896456fb4ee009e77d31991bf1e

public/index.html+8 -2 Viewed

                                             </span>
                                         </div>
                                     </div>
-                                    <div class="range-block" data-source="makersuite,deepseek,openrouter">
+                                    <div class="range-block" data-source="deepseek,openrouter">
                                         <label for="openai_show_thoughts" class="checkbox_label widthFreeExpand">
                                             <input id="openai_show_thoughts" type="checkbox" />
                                             <span>
                                                 <span data-i18n="Request model reasoning">Request model reasoning</span>
-                                                <i class="opacity50p fa-solid fa-circle-info" title="Gemini 2.0 Thinking / DeepSeek Reasoner"></i>
+                                                <i class="opacity50p fa-solid fa-circle-info" title="DeepSeek Reasoner"></i>
                                             </span>
                                         </label>
                                         <div class="toggle-description justifyLeft marginBot5">

                                             Auto-Expand
                                         </small>
                                     </label>
+                                    <label class="checkbox_label flex1" for="reasoning_show_hidden" title="Show reasoning time for models with hidden reasoning." data-i18n="[title]reasoning_show_hidden">
+                                        <input id="reasoning_show_hidden" type="checkbox" />
+                                        <small data-i18n="Show Hidden">
+                                            Show Hidden
+                                        </small>
+                                    </label>
                                 </div>
                                 <div class="flex-container alignItemsBaseline">
                                     <label class="checkbox_label flex1" for="reasoning_add_to_prompts" title="Add existing reasoning blocks to prompts. To add a new reasoning block, use the message edit menu." data-i18n="[title]reasoning_add_to_prompts">

public/script.js+43 -108 Viewed

 import { initBulkEdit } from './scripts/bulk-edit.js';
 import { deriveTemplatesFromChatTemplate } from './scripts/chat-templates.js';
 import { getContext } from './scripts/st-context.js';
-import { extractReasoningFromData, initReasoning, PromptReasoning, removeReasoningFromString, updateReasoningTimeUI } from './scripts/reasoning.js';
+import { extractReasoningFromData, initReasoning, PromptReasoning, ReasoningHandler, removeReasoningFromString, updateReasoningUI } from './scripts/reasoning.js';
 import { accountStorage } from './scripts/util/AccountStorage.js';
 // API OBJECT FOR EXTERNAL WIRING

     isUser,
     avatarImg,
     bias,
-    reasoning,
-    reasoningDuration,
     isSystem,
     title,
     timerValue,

     mes.find('.avatar img').attr('src', avatarImg);
     mes.find('.ch_name .name_text').text(characterName);
     mes.find('.mes_bias').html(bias);
-    mes.find('.mes_reasoning').html(reasoning);
     mes.find('.timestamp').text(timestamp).attr('title', `${extra?.api ? extra.api + ' - ' : ''}${extra?.model ?? ''}`);
     mes.find('.mesIDDisplay').text(`#${mesId}`);
     tokenCount && mes.find('.tokenCounterDisplay').text(`${tokenCount}t`);

     timerValue && mes.find('.mes_timer').attr('title', timerTitle).text(timerValue);
     bookmarkLink && updateBookmarkDisplay(mes);
-    if (reasoning) {
+    updateReasoningUI(mes);
-        mes.addClass('reasoning');
-    }
-    if (reasoningDuration) {
-        updateReasoningTimeUI(mes.find('.mes_reasoning_header_title')[0], reasoningDuration, { forceEnd: true });
-    }
     if (power_user.timestamp_model_icon && extra?.api) {
         insertSVGIcon(mes, extra);

@@ -2285,8 +2277,9 @@ export function updateMessageBlock(messageId, message, { rerenderMessage = true
2285	const text = message?.extra?.display_text ?? message.mes;	2277	const text = message?.extra?.display_text ?? message.mes;
2286	messageElement.find('.mes_text').html(messageFormatting(text, message.name, message.is_system, message.is_user, messageId, {}, false));	2278	messageElement.find('.mes_text').html(messageFormatting(text, message.name, message.is_system, message.is_user, messageId, {}, false));
2287	}	2279	}
2288	messageElement.find('.mes_reasoning').html(messageFormatting(message.extra?.reasoning ?? '', '', false, false, messageId, {}, true));	2280
2289	messageElement.toggleClass('reasoning', !!message.extra?.reasoning);	2281	updateReasoningUI(messageElement);
		2282
2290	addCopyToCodeBlocks(messageElement);	2283	addCopyToCodeBlocks(messageElement);
2291	appendMediaToMessage(message, messageElement);	2284	appendMediaToMessage(message, messageElement);
2292	}	2285	}

         false,
     );
     const bias = messageFormatting(mes.extra?.bias ?? '', '', false, false, -1, {}, false);
-    const reasoning = messageFormatting(mes.extra?.reasoning ?? '', '', false, false, chat.indexOf(mes), {}, true);
     let bookmarkLink = mes?.extra?.bookmark_link ?? '';
     let params = {

         isUser: mes.is_user,
         avatarImg: avatarImg,
         bias: bias,
-        reasoning: reasoning,
-        reasoningDuration: mes.extra?.reasoning_duration,
         isSystem: isSystem,
         title: title,
         bookmarkLink: bookmarkLink,

         timestamp: timestamp,
         extra: mes.extra,
         tokenCount: mes.extra?.token_count ?? 0,
-        ...formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count),
+        ...formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count, mes.extra?.reasoning_duration),
     };
     const renderedMessage = getMessageFromTemplate(params);

         const swipeMessage = chatElement.find(`[mesid="${chat.length - 1}"]`);
         swipeMessage.attr('swipeid', params.swipeId);
         swipeMessage.find('.mes_text').html(messageText).attr('title', title);
-        swipeMessage.find('.mes_reasoning').html(reasoning);
         swipeMessage.find('.timestamp').text(timestamp).attr('title', `${params.extra.api} - ${params.extra.model}`);
+        updateReasoningUI(swipeMessage);
         appendMediaToMessage(mes, swipeMessage);
         if (power_user.timestamp_model_icon && params.extra?.api) {
             insertSVGIcon(swipeMessage, params.extra);

  * @param {Date} gen_started Date when generation was started
  * @param {Date} gen_finished Date when generation was finished
  * @param {number} tokenCount Number of tokens generated (0 if not available)
+ * @param {number?} [reasoningDuration=null] Reasoning duration (null if no reasoning was done)
  * @returns {Object} Object containing the formatted timer value and title
  * @example
  * const { timerValue, timerTitle } = formatGenerationTimer(gen_started, gen_finished, tokenCount);
  * console.log(timerValue); // 1.2s
  * console.log(timerTitle); // Generation queued: 12:34:56 7 Jan 2021\nReply received: 12:34:57 7 Jan 2021\nTime to generate: 1.2 seconds\nToken rate: 5 t/s
  */
-function formatGenerationTimer(gen_started, gen_finished, tokenCount) {
+function formatGenerationTimer(gen_started, gen_finished, tokenCount, reasoningDuration = null) {
     if (!gen_started || !gen_finished) {
         return {};
+    }

         `Generation queued: ${start.format(dateFormat)}`,
         `Reply received: ${finish.format(dateFormat)}`,
         `Time to generate: ${seconds} seconds`,
+        reasoningDuration > 0 ? `Time to think: ${reasoningDuration / 1000} seconds` : '',
         tokenCount > 0 ? `Token rate: ${Number(tokenCount / seconds).toFixed(1)} t/s` : '',
-    ].join('\n');
+    ].filter(x => x).join('\n').trim();
     if (isNaN(seconds) || seconds < 0) {
         return { timerValue: '', timerTitle };

     constructor(type, forceName2, timeStarted, continueMessage) {
         this.result = '';
         this.messageId = -1;
+        /** @type {HTMLElement} */
         this.messageDom = null;
+        /** @type {HTMLElement} */
         this.messageTextDom = null;
+        /** @type {HTMLElement} */
         this.messageTimerDom = null;
         /** @type {HTMLElement} */
         this.messageTokenCounterDom = null;
-        /** @type {HTMLElement} */
-        this.messageReasoningDom = null;
-        /** @type {HTMLElement} */
-        this.messageReasoningHeaderDom = null;
         /** @type {HTMLTextAreaElement} */
         this.sendTextarea = document.querySelector('#send_textarea');
         this.type = type;

         /** @type {import('./scripts/logprobs.js').TokenLogprobs[]} */
         this.messageLogprobs = [];
         this.toolCalls = [];
-        this.reasoning = '';
+        // Initialize reasoning in its own handler
-        this.reasoningStartTime = null;
+        this.reasoningHandler = new ReasoningHandler(timeStarted);
-        this.reasoningEndTime = null;
-    }
-    #reasoningDuration() {
-        if (this.reasoningStartTime && this.reasoningEndTime) {
-            return (this.reasoningEndTime - this.reasoningStartTime);
-        }
-        return null;
+    }
     #checkDomElements(messageId) {

@@ -3167,9 +3150,8 @@ class StreamingProcessor {
3167	this.messageTextDom = this.messageDom?.querySelector('.mes_text');	3150	this.messageTextDom = this.messageDom?.querySelector('.mes_text');
3168	this.messageTimerDom = this.messageDom?.querySelector('.mes_timer');	3151	this.messageTimerDom = this.messageDom?.querySelector('.mes_timer');
3169	this.messageTokenCounterDom = this.messageDom?.querySelector('.tokenCounterDisplay');	3152	this.messageTokenCounterDom = this.messageDom?.querySelector('.tokenCounterDisplay');
3170	this.messageReasoningDom = this.messageDom?.querySelector('.mes_reasoning');
3171	this.messageReasoningHeaderDom = this.messageDom?.querySelector('.mes_reasoning_header_title');
3172	}	3153	}
		3154	this.reasoningHandler.updateDom(messageId);
3173	}	3155	}
3174		3156
3175	#updateMessageBlockVisibility() {	3157	#updateMessageBlockVisibility() {

@@ -3179,22 +3161,12 @@ class StreamingProcessor {
3179	}	3161	}
3180	}	3162	}
3181		3163
3182	showMessageButtons(messageId) {	3164	markUIGenStarted() {
3183	if (messageId == -1) {	3165	deactivateSendButtons();
3184	return;
3185	}
3186
3187	showStopButton();
3188	$(`#chat .mes[mesid="${messageId}"] .mes_buttons`).css({ 'display': 'none' });
3189	}	3166	}
3190		3167
3191	hideMessageButtons(messageId) {	3168	markUIGenStopped() {
3192	if (messageId == -1) {	3169	activateSendButtons();
3193	return;
3194	}
3195
3196	hideStopButton();
3197	$(`#chat .mes[mesid="${messageId}"] .mes_buttons`).css({ 'display': 'flex' });
3198	}	3170	}
3199		3171
3200	async onStartStreaming(text) {	3172	async onStartStreaming(text) {

         if (this.type == 'impersonate') {
             this.sendTextarea.value = '';
             this.sendTextarea.dispatchEvent(new Event('input', { bubbles: true }));
-        }
+        } else {
-        else {
             await saveReply(this.type, text, true, '', [], '');
             messageId = chat.length - 1;
             this.#checkDomElements(messageId);
-            this.showMessageButtons(messageId);
+            this.markUIGenStarted();
+        }
         hideSwipeButtons();
         scrollChatToBottom();
         return messageId;

         let processedText = cleanUpMessage(text, isImpersonate, isContinue, !isFinal, this.stoppingStrings);
-        // Predict unbalanced asterisks / quotes during streaming
         const charsToBalance = ['*', '"', '```'];
         for (const char of charsToBalance) {
             if (!isFinal && isOdd(countOccurrences(processedText, char))) {
-                // Add character at the end to balance it
                 const separator = char.length > 1 ? '\n' : '';
                 processedText = processedText.trimEnd() + separator + char;
+            }

         if (isImpersonate) {
             this.sendTextarea.value = processedText;
             this.sendTextarea.dispatchEvent(new Event('input', { bubbles: true }));
-        }
+        } else {
-        else {
             const mesChanged = chat[messageId]['mes'] !== processedText;
             this.#checkDomElements(messageId);
             this.#updateMessageBlockVisibility();
             const currentTime = new Date();
             chat[messageId]['mes'] = processedText;
             chat[messageId]['gen_started'] = this.timeStarted;
             chat[messageId]['gen_finished'] = currentTime;
             if (!chat[messageId]['extra']) {
                 chat[messageId]['extra'] = {};
+            }
-            if (this.reasoning) {
+            // Update reasoning
-                const reasoning = power_user.trim_spaces ? this.reasoning.trim() : this.reasoning;
+            await this.reasoningHandler.process(messageId, mesChanged);
-                const reasoningChanged = chat[messageId]['extra']['reasoning'] !== reasoning;
-                chat[messageId]['extra']['reasoning'] = reasoning;
-                if (reasoningChanged && this.reasoningStartTime === null) {
-                    this.reasoningStartTime = Date.now();
-                }
-                if (!reasoningChanged && mesChanged && this.reasoningStartTime !== null && this.reasoningEndTime === null) {
-                    this.reasoningEndTime = Date.now();
-                }
-                await this.#updateReasoningTime(messageId);
-                if (this.messageReasoningDom instanceof HTMLElement) {
+            // Token count update.
-                    const formattedReasoning = messageFormatting(this.reasoning, '', false, false, messageId, {}, true);
+            const tokenCountText = this.reasoningHandler.reasoning + processedText;
-                    this.messageReasoningDom.innerHTML = formattedReasoning;
-                }
-                if (this.messageDom instanceof HTMLElement) {
-                    this.messageDom.classList.add('reasoning');
-                }
-            }
-            // Don't waste time calculating token count for streaming
-            const tokenCountText = (this.reasoning || '') + processedText;
             const currentTokenCount = isFinal && power_user.message_token_count_enabled ? getTokenCount(tokenCountText, 0) : 0;
             if (currentTokenCount) {
                 chat[messageId]['extra']['token_count'] = currentTokenCount;
                 if (this.messageTokenCounterDom instanceof HTMLElement) {

                 this.messageTextDom.innerHTML = formattedText;
+            }
-            const timePassed = formatGenerationTimer(this.timeStarted, currentTime, currentTokenCount);
+            const timePassed = formatGenerationTimer(this.timeStarted, currentTime, currentTokenCount, this.reasoningHandler.getDuration());
             if (this.messageTimerDom instanceof HTMLElement) {
                 this.messageTimerDom.textContent = timePassed.timerValue;
                 this.messageTimerDom.title = timePassed.timerTitle;

+        }
+    }
-    async #updateReasoningTime(messageId, { forceEnd = false } = {}) {
-        const duration = this.#reasoningDuration();
-        chat[messageId]['extra']['reasoning_duration'] = duration;
-        updateReasoningTimeUI(this.messageReasoningHeaderDom, duration, { forceEnd: forceEnd });
-        await eventSource.emit(event_types.STREAM_REASONING_DONE, this.reasoning, duration);
-    }
     async onFinishStreaming(messageId, text) {
-        this.hideMessageButtons(this.messageId);
+        this.markUIGenStopped();
         await this.onProgressStreaming(messageId, text, true);
         addCopyToCodeBlocks($(`#chat .mes[mesid="${messageId}"]`));
-        // Ensure reasoning finish time is recorded if not already
+        await this.reasoningHandler.finish(messageId);
-        if (this.reasoningStartTime !== null && this.reasoningEndTime === null) {
-            this.reasoningEndTime = Date.now();
-            await this.#updateReasoningTime(messageId, { forceEnd: true });
-        }
         if (Array.isArray(this.swipes) && this.swipes.length > 0) {
             const message = chat[messageId];

         this.abortController.abort();
         this.isStopped = true;
-        this.hideMessageButtons(this.messageId);
+        this.markUIGenStopped();
         generatedPromptCache = '';
         unblockGeneration();

@@ -3438,7 +3372,8 @@ class StreamingProcessor {
3438	if (logprobs) {	3372	if (logprobs) {
3439	this.messageLogprobs.push(...(Array.isArray(logprobs) ? logprobs : [logprobs]));	3373	this.messageLogprobs.push(...(Array.isArray(logprobs) ? logprobs : [logprobs]));
3440	}	3374	}
3441	this.reasoning = getRegexedString(state?.reasoning ?? '', regex_placement.REASONING);	3375	// Get the updated reasoning string into the handler
		3376	this.reasoningHandler.updateReasoning(this.messageId, state?.reasoning ?? '');
3442	await eventSource.emit(event_types.STREAM_TOKEN_RECEIVED, text);	3377	await eventSource.emit(event_types.STREAM_TOKEN_RECEIVED, text);
3443	await sw.tick(async () => await this.onProgressStreaming(this.messageId, this.continueMessage + text));	3378	await sw.tick(async () => await this.onProgressStreaming(this.messageId, this.continueMessage + text));
3444	}	3379	}

     return { getMessage, image, title };
+}
+/**
+ * A function mainly used to switch 'generating' state - setting it to false and activating the buttons again
+ */
 export function activateSendButtons() {
     is_send_press = false;
-    $('#send_but').removeClass('displayNone');
-    $('#mes_continue').removeClass('displayNone');
-    $('#mes_impersonate').removeClass('displayNone');
-    $('.mes_buttons:last').show();
     hideStopButton();
+    delete document.body.dataset.generating;
+}
+/**
+ * A function mainly used to switch 'generating' state - setting it to true and deactivating the buttons
+ */
 export function deactivateSendButtons() {
-    $('#send_but').addClass('displayNone');
-    $('#mes_continue').addClass('displayNone');
-    $('#mes_impersonate').addClass('displayNone');
     showStopButton();
+    document.body.dataset.generating = 'true';
+}
 export function resetChatState() {

                     // resets the timer
                     swipeMessage.find('.mes_timer').html('');
                     swipeMessage.find('.tokenCounterDisplay').text('');
-                    swipeMessage.find('.mes_reasoning').html('');
+                    updateReasoningUI(swipeMessage, { reset: true });
                 } else {
                     //console.log('showing previously generated swipe candidate, or "..."');
                     //console.log('onclick right swipe calling addOneMessage');

                                 if (run_generate && !is_send_press && parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) {
                                     console.debug('caught here 2');
                                     is_send_press = true;
-                                    $('.mes_buttons:last').hide();
                                     await Generate('swipe');
                                 } else {
                                     if (parseInt(chat[chat.length - 1]['swipe_id']) !== chat[chat.length - 1]['swipes'].length) {

public/scripts/openai.js+1 -2 Viewed

     setOpenAIMessageExamples,
     setupChatCompletionPromptManager,
     sendOpenAIRequest,
-    getChatCompletionModel,
     TokenHandler,
     IdentifierNotFoundError,
     Message,

@@ -1498,7 +1497,7 @@ async function sendWindowAIRequest(messages, signal, stream) {
1498	}	1497	}
1499	}	1498	}
1500		1499
1501	function getChatCompletionModel() {	1500	export function getChatCompletionModel() {
1502	switch (oai_settings.chat_completion_source) {	1501	switch (oai_settings.chat_completion_source) {
1503	case chat_completion_sources.CLAUDE:	1502	case chat_completion_sources.CLAUDE:
1504	return oai_settings.claude_model;	1503	return oai_settings.claude_model;

public/scripts/power-user.js+1 -0 Viewed

         auto_parse: false,
         add_to_prompts: false,
         auto_expand: false,
+        show_hidden: false,
         prefix: '<think>\n',
         suffix: '\n</think>',
         separator: '\n\n',

public/scripts/reasoning.js+356 -27 Viewed

 import {
     moment,
 } from '../lib.js';
-import { chat, closeMessageEditor, event_types, eventSource, main_api, saveChatConditional, saveSettingsDebounced, substituteParams, updateMessageBlock } from '../script.js';
+import { chat, closeMessageEditor, event_types, eventSource, main_api, messageFormatting, saveChatConditional, saveSettingsDebounced, substituteParams, updateMessageBlock } from '../script.js';
 import { getRegexedString, regex_placement } from './extensions/regex/engine.js';
 import { getCurrentLocale, t } from './i18n.js';
 import { MacrosParser } from './macros.js';
-import { chat_completion_sources, oai_settings } from './openai.js';
+import { chat_completion_sources, getChatCompletionModel, oai_settings } from './openai.js';
 import { Popup } from './popup.js';
 import { power_user } from './power-user.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';

 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.

+}
 /**
- * Updates the Reasoning controls
+ * Check if the model supports reasoning, but does not send back the reasoning
- * @param {HTMLElement} element The element to update
+ * @returns {boolean} True if the model supports reasoning
- * @param {number?} duration The duration of the reasoning in milliseconds
- * @param {object} [options={}] Options for the function
- * @param {boolean} [options.forceEnd=false] If true, there will be no "Thinking..." when no duration exists
  */
-export function updateReasoningTimeUI(element, duration, { forceEnd = false } = {}) {
+export function isHiddenReasoningModel() {
-    if (duration) {
+    if (main_api !== 'openai') {
-        const durationStr = moment.duration(duration).locale(getCurrentLocale()).humanize({ s: 50, ss: 3 });
+        return false;
-        const secondsStr = moment.duration(duration).asSeconds();
+    }
-        element.innerHTML = t`Thought for <span title="${secondsStr} seconds">${durationStr}</span>`;
-    } else if (forceEnd) {
+    /** @typedef {{ (currentModel: string, supportedModel: string): boolean }} MatchingFunc */
-        element.textContent = t`Thought for some time`;
+    /** @type {Record.<string, MatchingFunc>} */
-    } else {
+    const FUNCS = {
-        element.textContent = t`Thinking...`;
+        equals: (currentModel, supportedModel) => currentModel === supportedModel,
+        startsWith: (currentModel, supportedModel) => currentModel.startsWith(supportedModel),
+    };
+    /** @type {{ name: string; func: MatchingFunc; }[]} */
+    const hiddenReasoningModels = [
+        { name: 'o1', func: FUNCS.startsWith },
+        { name: 'o3', func: FUNCS.startsWith },
+        { name: 'gemini-2.0-flash-thinking-exp', func: FUNCS.startsWith },
+        { name: 'gemini-2.0-pro-exp', func: FUNCS.startsWith },
+    ];
+    const model = getChatCompletionModel();
+    const isHidden = hiddenReasoningModels.some(({ name, func }) => func(model, name));
+    return isHidden;
+}
+/**
+ * Updates the Reasoning UI for a specific message
+ * @param {number|JQuery<HTMLElement>|HTMLElement} messageIdOrElement The message ID or the message element
+ * @param {Object} [options={}] - Optional arguments
+ * @param {boolean} [options.reset=false] - Whether to reset state, and not take the current mess properties (for example when swiping)
+ */
+export function updateReasoningUI(messageIdOrElement, { reset = false } = {}) {
+    const handler = new ReasoningHandler();
+    handler.initHandleMessage(messageIdOrElement, { reset });
+}
+/**
+ * Enum for representing the state of reasoning
+ * @enum {string}
+ * @readonly
+ */
+export const ReasoningState = {
+    None: 'none',
+    Thinking: 'thinking',
+    Done: 'done',
+    Hidden: 'hidden',
+};
+/**
+ * Handles reasoning-specific logic and DOM updates for messages.
+ * This class is used inside the {@link StreamingProcessor} to manage reasoning states and UI updates.
+ */
+export class ReasoningHandler {
+    #isHiddenReasoningModel;
+    /**
+     * @param {Date?} [timeStarted=null] - When the generation started
+     */
+    constructor(timeStarted = null) {
+        /** @type {ReasoningState} The current state of the reasoning process */
+        this.state = ReasoningState.None;
+        /** @type {string} The reasoning output */
+        this.reasoning = '';
+        /** @type {Date} When the reasoning started */
+        this.startTime = null;
+        /** @type {Date} When the reasoning ended */
+        this.endTime = null;
+        /** @type {Date} Initial starting time of the generation */
+        this.initialTime = timeStarted ?? new Date();
+        /** @type {boolean} True if the model supports reasoning, but hides the reasoning output */
+        this.#isHiddenReasoningModel = isHiddenReasoningModel();
+        // Cached DOM elements for reasoning
+        /** @type {HTMLElement} Main message DOM element `.mes` */
+        this.messageDom = null;
+        /** @type {HTMLElement} Reasoning details DOM element `.mes_reasoning_details` */
+        this.messageReasoningDetailsDom = null;
+        /** @type {HTMLElement} Reasoning content DOM element `.mes_reasoning` */
+        this.messageReasoningContentDom = null;
+        /** @type {HTMLElement} Reasoning header DOM element `.mes_reasoning_header_title` */
+        this.messageReasoningHeaderDom = null;
+    }
+    /**
+     * Initializes the reasoning handler for a specific message.
+     *
+     * Can be used to update the DOM elements or read other reasoning states.
+     * It will internally take the message-saved data and write the states back into the handler, as if during streaming of the message.
+     * The state will always be either done/hidden or none.
+     *
+     * @param {number|JQuery<HTMLElement>|HTMLElement} messageIdOrElement - The message ID or the message element
+     * @param {Object} [options={}] - Optional arguments
+     * @param {boolean} [options.reset=false] - Whether to reset state of the handler, and not take the current mess properties (for example when swiping)
+     */
+    initHandleMessage(messageIdOrElement, { reset = false } = {}) {
+        /** @type {HTMLElement} */
+        const messageElement = typeof messageIdOrElement === 'number'
+            ? document.querySelector(`#chat [mesid="${messageIdOrElement}"]`)
+            : messageIdOrElement instanceof HTMLElement
+                ? messageIdOrElement
+                : $(messageIdOrElement)[0];
+        const messageId = Number(messageElement.getAttribute('mesid'));
+        if (isNaN(messageId)) return;
+        const extra = chat[messageId].extra;
+        if (extra.reasoning) {
+            this.state = ReasoningState.Done;
+        } else if (extra.reasoning_duration) {
+            this.state = ReasoningState.Hidden;
+        }
+        this.reasoning = extra?.reasoning ?? '';
+        if (this.state !== ReasoningState.None) {
+            this.initialTime = new Date(chat[messageId].gen_started);
+            this.startTime = this.initialTime;
+            this.endTime = new Date(this.startTime.getTime() + (extra?.reasoning_duration ?? 0));
+        }
+        // Prefill main dom element, as message might not have been rendered yet
+        this.messageDom = messageElement;
+        // Make sure reset correctly clears all relevant states
+        if (reset) {
+            this.state = this.#isHiddenReasoningModel ? ReasoningState.Thinking : ReasoningState.None;
+            this.reasoning = '';
+            this.initialTime = new Date();
+            this.startTime = null;
+            this.endTime = null;
+        }
+        this.updateDom(messageId);
+    }
+    /**
+     * Gets the duration of the reasoning in milliseconds.
+     *
+     * @returns {number?} The duration in milliseconds, or null if the start or end time is not set
+     */
+    getDuration() {
+        if (this.startTime && this.endTime) {
+            return this.endTime.getTime() - this.startTime.getTime();
+        }
+        return null;
+    }
+    /**
+     * Updates the reasoning text/string for a message.
+     *
+     * @param {number} messageId - The ID of the message to update
+     * @param {string?} [reasoning=null] - The reasoning text to update - If null, uses the current reasoning
+     * @param {Object} [options={}] - Optional arguments
+     * @param {boolean} [options.persist=false] - Whether to persist the reasoning to the message object
+     * @returns {boolean} - Returns true if the reasoning was changed, otherwise false
+     */
+    updateReasoning(messageId, reasoning = null, { persist = false } = {}) {
+        reasoning = reasoning ?? this.reasoning;
+        reasoning = power_user.trim_spaces ? reasoning.trim() : reasoning;
+        // Ensure the chat extra exists
+        if (!chat[messageId].extra) {
+            chat[messageId].extra = {};
+        }
+        const extra = chat[messageId].extra;
+        const reasoningChanged = extra.reasoning !== reasoning;
+        this.reasoning = getRegexedString(reasoning ?? '', regex_placement.REASONING);
+        if (persist) {
+            // Build and save the reasoning data to message extras
+            extra.reasoning = this.reasoning;
+            extra.reasoning_duration = this.getDuration();
+        }
+        return reasoningChanged;
+    }
+    /**
+     * Handles processing of reasoning for a message.
+     *
+     * This is usually called by the message processor when a message is changed.
+     *
+     * @param {number} messageId - The ID of the message to process
+     * @param {boolean} mesChanged - Whether the message has changed
+     * @returns {Promise<void>}
+     */
+    async process(messageId, mesChanged) {
+        if (!this.reasoning && !this.#isHiddenReasoningModel) return;
+        // Ensure reasoning string is updated and regexes are applied correctly
+        const reasoningChanged = this.updateReasoning(messageId, null, { persist: true });
+        if ((this.#isHiddenReasoningModel || reasoningChanged) && this.state === ReasoningState.None) {
+            this.state = ReasoningState.Thinking;
+            this.startTime = this.initialTime;
+        }
+        if ((this.#isHiddenReasoningModel || !reasoningChanged) && mesChanged && this.state === ReasoningState.Thinking) {
+            this.endTime = new Date();
+            await this.finish(messageId);
+        }
+    }
+    /**
+     * Completes the reasoning process for a message.
+     *
+     * Records the finish time if it was not set during streaming and updates the reasoning state.
+     * Emits an event to signal the completion of reasoning and updates the DOM elements accordingly.
+     *
+     * @param {number} messageId - The ID of the message to complete reasoning for
+     * @returns {Promise<void>}
+     */
+    async finish(messageId) {
+        if (this.state === ReasoningState.None) return;
+        // Make sure the finish time is recorded if a reasoning was in process and it wasn't ended correctly during streaming
+        if (this.startTime !== null && this.endTime === null) {
+            this.endTime = new Date();
+        }
+        if (this.state === ReasoningState.Thinking) {
+            this.state = this.#isHiddenReasoningModel ? ReasoningState.Hidden : ReasoningState.Done;
+            this.updateReasoning(messageId, null, { persist: true });
+            await eventSource.emit(event_types.STREAM_REASONING_DONE, this.reasoning, this.getDuration(), messageId, this.state);
+        }
+        this.updateDom(messageId);
+    }
+    /**
+     * Updates the reasoning UI elements for a message.
+     *
+     * Toggles the CSS class, updates states, reasoning message, and duration.
+     *
+     * @param {number} messageId - The ID of the message to update
+     */
+    updateDom(messageId) {
+        this.#checkDomElements(messageId);
+        // Main CSS class to show this message includes reasoning
+        this.messageDom.classList.toggle('reasoning', this.state !== ReasoningState.None);
+        // Update states to the relevant DOM elements
+        setDatasetProperty(this.messageDom, 'reasoningState', this.state !== ReasoningState.None ? this.state : null);
+        setDatasetProperty(this.messageReasoningDetailsDom, 'state', this.state);
+        // Update the reasoning message
+        const reasoning = power_user.trim_spaces ? this.reasoning.trim() : this.reasoning;
+        const displayReasoning = messageFormatting(reasoning, '', false, false, messageId, {}, true);
+        this.messageReasoningContentDom.innerHTML = displayReasoning;
+        // Update tooltip for hidden reasoning edit
+        /** @type {HTMLElement} */
+        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`;
+        // Update the reasoning duration in the UI
+        this.#updateReasoningTimeUI();
+    }
+    /**
+     * Finds and caches reasoning-related DOM elements for the given message.
+     *
+     * @param {number} messageId - The ID of the message to cache the DOM elements for
+     */
+    #checkDomElements(messageId) {
+        // Make sure we reset dom elements if we are checking for a different message (shouldn't happen, but be sure)
+        if (this.messageDom !== null && this.messageDom.getAttribute('mesid') !== messageId.toString()) {
+            this.messageDom = null;
+        }
+        // Cache the DOM elements once
+        if (this.messageDom === null) {
+            this.messageDom = document.querySelector(`#chat .mes[mesid="${messageId}"]`);
+            if (this.messageDom === null) throw new Error('message dom does not exist');
+        }
+        if (this.messageReasoningDetailsDom === null) {
+            this.messageReasoningDetailsDom = this.messageDom.querySelector('.mes_reasoning_details');
+        }
+        if (this.messageReasoningContentDom === null) {
+            this.messageReasoningContentDom = this.messageDom.querySelector('.mes_reasoning');
+        }
+        if (this.messageReasoningHeaderDom === null) {
+            this.messageReasoningHeaderDom = this.messageDom.querySelector('.mes_reasoning_header_title');
+        }
+    }
+    /**
+     * Updates the reasoning time display in the UI.
+     *
+     * Shows the duration in a human-readable format with a tooltip for exact seconds.
+     * Displays "Thinking..." if still processing, or a generic message otherwise.
+     */
+    #updateReasoningTimeUI() {
+        const element = this.messageReasoningHeaderDom;
+        const duration = this.getDuration();
+        let data = null;
+        if (duration) {
+            const durationStr = moment.duration(duration).locale(getCurrentLocale()).humanize({ s: 50, ss: 3 });
+            const secondsStr = moment.duration(duration).asSeconds();
+            const span = document.createElement('span');
+            span.title = t`${secondsStr} seconds`;
+            span.textContent = durationStr;
+            element.textContent = t`Thought for `;
+            element.appendChild(span);
+            data = String(secondsStr);
+        } else if ([ReasoningState.Done, ReasoningState.Hidden].includes(this.state)) {
+            element.textContent = t`Thought for some time`;
+            data = 'unknown';
+        } else {
+            element.textContent = t`Thinking...`;
+            data = null;
+        }
+        setDatasetProperty(this.messageReasoningDetailsDom, 'duration', data);
+        setDatasetProperty(element, 'duration', data);
+    }
+}

  */
 export class PromptReasoning {
     static REASONING_PLACEHOLDER = '\u200B';
-    static REASONING_PLACEHOLDER_REGEX = new RegExp(`${PromptReasoning.REASONING_PLACEHOLDER}$`);
     constructor() {
         this.counter = 0;

@@ -126,7 +437,7 @@ export class PromptReasoning {
126	return content;	437	return content;
127	}	438	}
128		439
129	// No reasoning provided or a placeholder	440	// No reasoning provided or a legacy placeholder
130	if (!reasoning \|\| reasoning === PromptReasoning.REASONING_PLACEHOLDER) {	441	if (!reasoning \|\| reasoning === PromptReasoning.REASONING_PLACEHOLDER) {
131	return content;	442	return content;
132	}	443	}

         toggleReasoningAutoExpand();
         saveSettingsDebounced();
     });
+    toggleReasoningAutoExpand();
+    $('#reasoning_show_hidden').prop('checked', power_user.reasoning.show_hidden);
+    $('#reasoning_show_hidden').on('change', function () {
+        power_user.reasoning.show_hidden = !!$(this).prop('checked');
+        $('#chat').attr('data-show-hidden-reasoning', power_user.reasoning.show_hidden ? 'true' : null);
+        saveSettingsDebounced();
+    });
+    $('#chat').attr('data-show-hidden-reasoning', power_user.reasoning.show_hidden ? 'true' : null);
+}
 function registerReasoningSlashCommands() {

             const messageId = !isNaN(parseInt(value.toString())) ? parseInt(value.toString()) : chat.length - 1;
             const message = chat[messageId];
             const reasoning = String(message?.extra?.reasoning ?? '');
-            return reasoning.replace(PromptReasoning.REASONING_PLACEHOLDER_REGEX, '');
+            return reasoning;
         },
     }));

         const textarea = document.createElement('textarea');
         const reasoningBlock = messageBlock.find('.mes_reasoning');
         textarea.classList.add('reasoning_edit_textarea');
-        textarea.value = reasoning.replace(PromptReasoning.REASONING_PLACEHOLDER_REGEX, '');
+        textarea.value = reasoning;
         $(textarea).insertBefore(reasoningBlock);
         if (!CSS.supports('field-sizing', 'content')) {

         textarea.remove();
         messageBlock.find('.mes_reasoning_edit_cancel:visible').trigger('click');
+        updateReasoningUI(messageBlock);
     });
     $(document).on('click', '.mes_edit_add_reasoning', async function () {
-        const { message, messageId, messageBlock } = getMessageFromJquery(this);
+        const { message, messageBlock } = getMessageFromJquery(this);
         if (!message?.extra) {
             return;
+        }

             return;
+        }
-        message.extra.reasoning = PromptReasoning.REASONING_PLACEHOLDER;
+        messageBlock.addClass('reasoning');
-        updateMessageBlock(messageId, message, { rerenderMessage: false });
+        // To make hidden reasoning blocks editable, we just set them to "Done" here already.
+        // They will be done on save anyway - and on cancel the reasoning block gets rerendered too.
+        if (messageBlock.attr('data-reasoning-state') === ReasoningState.Hidden) {
+            messageBlock.attr('data-reasoning-state', ReasoningState.Done);
+        }
+        // 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();
     });

         e.stopPropagation();
         e.preventDefault();
-        const confirm = await Popup.show.confirm(t`Are you sure you want to clear the reasoning?`, t`Visible message contents will stay intact.`);
+        const confirm = await Popup.show.confirm(t`Remove Reasoning`, t`Are you sure you want to clear the reasoning?<br />Visible message contents will stay intact.`);
         if (!confirm) {
             return;

     $(document).on('pointerup', '.mes_reasoning_copy', async function () {
         const { message } = getMessageFromJquery(this);
-        const reasoning = String(message?.extra?.reasoning ?? '').replace(PromptReasoning.REASONING_PLACEHOLDER_REGEX, '');
+        const reasoning = String(message?.extra?.reasoning ?? '');
         if (!reasoning) {
             return;

 export function initReasoning() {
     loadReasoningSettings();
-    toggleReasoningAutoExpand();
     setReasoningEventHandlers();
     registerReasoningSlashCommands();
     registerReasoningMacros();

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+21 -5 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_block:has(.edit_textarea):has(.reasoning_edit_textarea) .mes_reasoning_actions {
+.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="hidden"]) .mes_edit_add_reasoning,
+.mes:has(.mes_reasoning:empty) .mes_reasoning_arrow,
+.mes:has(.mes_reasoning:empty) .mes_reasoning,
+.mes:has(.mes_reasoning:empty) .mes_reasoning_copy {
+    display: none;
+}
+.mes[data-reasoning-state="hidden"] .mes_edit_add_reasoning {
+    background-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 33%, var(--SmartThemeBlurTintColor) 66%);
+}
+/** If hidden reasoning should not be shown, we hide all blocks that don't have content */
+#chat:not([data-show-hidden-reasoning="true"]) .mes:has(.mes_reasoning:empty) .mes_reasoning_details {
     display: none;
+}

@@ -4319,7 +4331,11 @@ input[type="range"]::-webkit-slider-thumb {
4319	field-sizing: content;	4331	field-sizing: content;
4320	}	4332	}
4321		4333
4322	.mes.reasoning .mes_edit_add_reasoning {	4334	body[data-generating="true"] #send_but,
		4335	body[data-generating="true"] #mes_continue,
		4336	body[data-generating="true"] #mes_impersonate,
		4337	body[data-generating="true"] #chat .last_mes .mes_buttons,
		4338	body[data-generating="true"] #chat .last_mes .mes_reasoning_actions {
4323	display: none;	4339	display: none;
4324	}	4340	}
4325		4341

src/endpoints/backends/chat-completions.js+0 -7 Viewed

     const model = String(request.body.model);
     const stream = Boolean(request.body.stream);
-    const showThoughts = Boolean(request.body.include_reasoning);
     const isThinking = model.includes('thinking');
     const generationConfig = {

@@ -337,12 +336,6 @@ async function sendMakerSuiteRequest(request, response) {
337	body.systemInstruction = prompt.system_instruction;	336	body.systemInstruction = prompt.system_instruction;
338	}	337	}
339		338
340	if (isThinking && showThoughts) {
341	generationConfig.thinkingConfig = {
342	includeThoughts: true,
343	};
344	}
345
346	return body;	339	return body;
347	}	340	}
348		341