Add thinking time for hidden reasoning models - Streamline reasoning UI update functionality - Add helper function to identify hidden reasoning models - Fix/update reasoning time calculation to actually utilize start gen time - Fix reasoning UI update on swipe - add CSS class for hidden reasoning blocks (to make it possible to hide for users)

d94ac48b6595310281e244d4e89e79cc96e47e65

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 5886bb6b3a9f150a45e0157ccc59404bc928fe9f

public/script.js+26 -20 Viewed

     loadProxyPresets,
     selected_proxy,
     initOpenAI,
+    isHiddenReasoningModel,
 } from './scripts/openai.js';
 import {

 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, updateReasoningTimeUI } from './scripts/reasoning.js';
+import { extractReasoningFromData, initReasoning, PromptReasoning, updateReasoningTimeUI, updateReasoningUI } from './scripts/reasoning.js';
 // API OBJECT FOR EXTERNAL WIRING
 globalThis.SillyTavern = {

     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, reasoning, reasoningDuration, { forceEnd: true });
-        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);

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

     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;

         this.messageLogprobs = [];
         this.toolCalls = [];
         this.reasoning = '';
+        /** @type {Date} */
         this.reasoningStartTime = null;
+        /** @type {Date} */
         this.reasoningEndTime = null;
+        this.isHiddenReasoning = isHiddenReasoningModel();
+    }
+    /** @type {() => number} Reasoning duration in milliseconds */
     #reasoningDuration() {
         if (this.reasoningStartTime && this.reasoningEndTime) {
-            return (this.reasoningEndTime - this.reasoningStartTime);
+            return (this.reasoningEndTime.getTime() - this.reasoningStartTime.getTime());
+        }
         return null;
+    }

@@ -3168,6 +3171,8 @@ class StreamingProcessor {
3168	this.messageReasoningDom = this.messageDom?.querySelector('.mes_reasoning');	3171	this.messageReasoningDom = this.messageDom?.querySelector('.mes_reasoning');
3169	this.messageReasoningHeaderDom = this.messageDom?.querySelector('.mes_reasoning_header_title');	3172	this.messageReasoningHeaderDom = this.messageDom?.querySelector('.mes_reasoning_header_title');
3170	}	3173	}
		3174
		3175	this.messageDom.classList.toggle('reasoning_hidden', this.isHiddenReasoning);
3171	}	3176	}
3172		3177
3173	#updateMessageBlockVisibility() {	3178	#updateMessageBlockVisibility() {

@@ -3254,16 +3259,17 @@ class StreamingProcessor {
3254	chat[messageId]['extra'] = {};	3259	chat[messageId]['extra'] = {};
3255	}	3260	}
3256		3261
3257	if (this.reasoning) {	3262	if (this.reasoning \|\| this.isHiddenReasoning) {
3258	const reasoning = power_user.trim_spaces ? this.reasoning.trim() : this.reasoning;	3263	const reasoning = power_user.trim_spaces ? this.reasoning.trim() : this.reasoning;
3259	const reasoningChanged = chat[messageId]['extra']['reasoning'] !== reasoning;	3264	const reasoningChanged = chat[messageId]['extra']['reasoning'] !== reasoning;
3260	chat[messageId]['extra']['reasoning'] = reasoning;	3265	chat[messageId]['extra']['reasoning'] = reasoning;
3261		3266
3262	if (reasoningChanged && this.reasoningStartTime === null) {	3267	if ((this.isHiddenReasoning \|\| reasoningChanged) && this.reasoningStartTime === null) {
3263	this.reasoningStartTime = Date.now();	3268	this.reasoningStartTime = this.timeStarted;
3264	}	3269	}
3265	if (!reasoningChanged && mesChanged && this.reasoningStartTime !== null && this.reasoningEndTime === null) {	3270	if ((this.isHiddenReasoning \|\| !reasoningChanged) && mesChanged && this.reasoningStartTime !== null && this.reasoningEndTime === null) {
3266	this.reasoningEndTime = Date.now();	3271	this.reasoningEndTime = currentTime;
		3272	await eventSource.emit(event_types.STREAM_REASONING_DONE, this.reasoning, this.#reasoningDuration);
3267	}	3273	}
3268	await this.#updateReasoningTime(messageId);	3274	await this.#updateReasoningTime(messageId);
3269		3275

     async #updateReasoningTime(messageId, { forceEnd = false } = {}) {
         const duration = this.#reasoningDuration();
         chat[messageId]['extra']['reasoning_duration'] = duration;
-        updateReasoningTimeUI(this.messageReasoningHeaderDom, duration, { forceEnd: forceEnd });
+        updateReasoningUI(this.messageDom, this.reasoning, duration, { forceEnd: forceEnd });
-        await eventSource.emit(event_types.STREAM_REASONING_DONE, this.reasoning, duration);
+    }
     async onFinishStreaming(messageId, text) {

         // Ensure reasoning finish time is recorded if not already
         if (this.reasoningStartTime !== null && this.reasoningEndTime === null) {
-            this.reasoningEndTime = Date.now();
+            this.reasoningEndTime = new Date();
+            await eventSource.emit(event_types.STREAM_REASONING_DONE, this.reasoning, this.#reasoningDuration);
             await this.#updateReasoningTime(messageId, { forceEnd: true });
+        }

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

public/scripts/openai.js+47 -0 Viewed

+    }
+}
+/**
+ * Check if the model supports reasoning, but does not send back the reasoning
+ * @returns {boolean} True if the model supports reasoning
+ */
+export function isHiddenReasoningModel() {
+    if (main_api !== 'openai') {
+        return false;
+    }
+    /** @typedef {Object.<chat_completion_sources, { currentModel: string; models: ({ name: string; startsWith: boolean?; matchingFunc: (model: string) => boolean?; }|string)[]; }>} */
+    const hiddenReasoningModels = {
+        [chat_completion_sources.OPENAI]: {
+            currentModel: oai_settings.openai_model,
+            models: [
+                { name: 'o1', startsWith: true },
+                { name: 'o3', startsWith: true },
+            ],
+        },
+        [chat_completion_sources.MAKERSUITE]: {
+            currentModel: oai_settings.google_model,
+            models: [
+                { name: 'gemini-2.0-flash-thinking-exp', startsWith: true },
+            ],
+        },
+    };
+    const sourceConfig = hiddenReasoningModels[oai_settings.chat_completion_source];
+    if (!sourceConfig) {
+        return false;
+    }
+    return sourceConfig.models.some(model => {
+        if (typeof model === 'string') {
+            return sourceConfig.currentModel === model;
+        }
+        if (model.startsWith) {
+            return (sourceConfig.currentModel).startsWith(model.name);
+        }
+        if (model.matchingFunc) {
+            return model.matchingFunc(sourceConfig.currentModel);
+        }
+        return false;
+    });
+}
 /**
  * Proxy stuff
  */

public/scripts/reasoning.js+30 -2 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, isHiddenReasoningModel, oai_settings } from './openai.js';
 import { Popup } from './popup.js';
 import { power_user } from './power-user.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';

+}
 /**
+ * Updates the Reasoning UI.
+ * @param {number|JQuery<HTMLElement>|HTMLElement} messageIdOrElement The message ID or the message element.
+ * @param {string|null} [reasoning=null] The reasoning content.
+ * @param {number|null} [reasoningDuration=null] 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 updateReasoningUI(messageIdOrElement, reasoning = null, reasoningDuration = null, { forceEnd = false } = {}) {
+    const messageElement = typeof messageIdOrElement === 'number'
+        ? $(`#chat [mesid="${messageIdOrElement}"]`)
+        : $(messageIdOrElement);
+    const mesReasoningElement = messageElement.find('.mes_reasoning');
+    const mesReasoningHeaderTitle = messageElement.find('.mes_reasoning_header_title');
+    const mesId = Number(messageElement.attr('mesid'));
+    mesReasoningElement.html(messageFormatting(reasoning ?? '', '', false, false, mesId, {}, true));
+    const reasoningText = mesReasoningElement.text().trim();
+    const hasReasoningText = !!reasoningText;
+    const isReasoningHidden = (!!reasoningDuration && !hasReasoningText) || (!forceEnd && isHiddenReasoningModel());
+    const isReasoning = hasReasoningText || isReasoningHidden;
+    messageElement.toggleClass('reasoning', isReasoning);
+    messageElement.toggleClass('reasoning_hidden', isReasoningHidden);
+    updateReasoningTimeUI(mesReasoningHeaderTitle[0], reasoningDuration, { forceEnd });
+}
+/**
  * Updates the Reasoning controls
  * @param {HTMLElement} element The element to update
  * @param {number?} duration The duration of the reasoning in milliseconds

public/style.css+11 -5 Viewed

 .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_block:has(.edit_textarea):has(.reasoning_edit_textarea) .mes_reasoning_actions,
+.mes.reasoning:not(.reasoning_hidden) .mes_edit_add_reasoning,
+.mes.reasoning_hidden .mes_reasoning_arrow,
+.mes.reasoning_hidden .mes_reasoning_actions {
     display: none;
+}
+.mes.reasoning_hidden .mes_reasoning_details {
+    display: block;
+}
+.mes.reasoning_hidden .mes_reasoning_header {
+    cursor: initial;
+}
 .mes_reasoning_details .mes_reasoning_arrow {
     position: absolute;
     top: 50%;

@@ -4315,10 +4325,6 @@ input[type="range"]::-webkit-slider-thumb {
4315	field-sizing: content;	4325	field-sizing: content;
4316	}	4326	}
4317		4327
4318	.mes.reasoning .mes_edit_add_reasoning {
4319	display: none;
4320	}
4321
4322	#anchor_order {	4328	#anchor_order {
4323	margin-bottom: 15px;	4329	margin-bottom: 15px;
4324	}	4330	}