3818290e · permissionBRICK/SillyTavern

     /** @deprecated The event is aliased to STREAM_TOKEN_RECEIVED. */
     SMOOTH_STREAM_TOKEN_RECEIVED: 'stream_token_received',
     STREAM_TOKEN_RECEIVED: 'stream_token_received',
+    STREAM_REASONING_DONE: 'stream_reasoning_done',
     FILE_ATTACHMENT_DELETED: 'file_attachment_deleted',
     WORLDINFO_FORCE_ACTIVATE: 'worldinfo_force_activate',
     OPEN_CHARACTER_LIBRARY: 'open_character_library',

     avatarImg,
     bias,
     reasoning,
+    reasoningDuration,
     isSystem,
     title,
     timerValue,

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

         avatarImg: avatarImg,
         bias: bias,
         reasoning: reasoning,
+        reasoningDuration: mes.extra?.reasoning_duration,
         isSystem: isSystem,
         title: title,
         bookmarkLink: bookmarkLink,

         this.messageDom = null;
         this.messageTextDom = null;
         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;

         this.messageLogprobs = [];
         this.toolCalls = [];
         this.reasoning = '';
+        this.reasoningStartTime = null;
+        this.reasoningEndTime = null;
+    }
+    #reasoningDuration() {
+        if (this.reasoningStartTime && this.reasoningEndTime) {
+            return (this.reasoningEndTime - this.reasoningStartTime);
+        }
+        return null;
+    }
     #checkDomElements(messageId) {

@@ -3138,6 +3158,7 @@ class StreamingProcessor {
3138	this.messageTimerDom = this.messageDom?.querySelector('.mes_timer');	3158	this.messageTimerDom = this.messageDom?.querySelector('.mes_timer');
3139	this.messageTokenCounterDom = this.messageDom?.querySelector('.tokenCounterDisplay');	3159	this.messageTokenCounterDom = this.messageDom?.querySelector('.tokenCounterDisplay');
3140	this.messageReasoningDom = this.messageDom?.querySelector('.mes_reasoning');	3160	this.messageReasoningDom = this.messageDom?.querySelector('.mes_reasoning');
		3161	this.messageReasoningHeaderDom = this.messageDom?.querySelector('.mes_reasoning_header_title');
3141	}	3162	}
3142	}	3163	}
3143		3164

         return messageId;
+    }
-    onProgressStreaming(messageId, text, isFinal) {
+    async onProgressStreaming(messageId, text, isFinal) {
         const isImpersonate = this.type == 'impersonate';
         const isContinue = this.type == 'continue';

             this.sendTextarea.dispatchEvent(new Event('input', { bubbles: true }));
+        }
         else {
+            const mesChanged = chat[messageId]['mes'] !== processedText;
             this.#checkDomElements(messageId);
             this.#updateMessageBlockVisibility();
             const currentTime = new Date();

+            }
             if (this.reasoning) {
-                chat[messageId]['extra']['reasoning'] = power_user.trim_spaces ? this.reasoning.trim() : this.reasoning;
+                const reasoning = power_user.trim_spaces ? this.reasoning.trim() : this.reasoning;
+                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) {
                     const formattedReasoning = messageFormatting(this.reasoning, '', false, false, messageId, {}, true);
                     this.messageReasoningDom.innerHTML = formattedReasoning;

+        }
+    }
+    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.onProgressStreaming(messageId, text, true);
+        await this.onProgressStreaming(messageId, text, true);
         addCopyToCodeBlocks($(`#chat .mes[mesid="${messageId}"]`));
+        // Ensure reasoning finish time is recorded if not already
+        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];
             const swipeInfo = {

@@ -3380,7 +3427,7 @@ class StreamingProcessor {
3380	}	3427	}
3381	this.reasoning = getRegexedString(state?.reasoning ?? '', regex_placement.REASONING);	3428	this.reasoning = getRegexedString(state?.reasoning ?? '', regex_placement.REASONING);
3382	await eventSource.emit(event_types.STREAM_TOKEN_RECEIVED, text);	3429	await eventSource.emit(event_types.STREAM_TOKEN_RECEIVED, text);
3383	await sw.tick(() => this.onProgressStreaming(this.messageId, this.continueMessage + text));	3430	await sw.tick(async () => await this.onProgressStreaming(this.messageId, this.continueMessage + text));
3384	}	3431	}
3385	const seconds = (timestamps[timestamps.length - 1] - timestamps[0]) / 1000;	3432	const seconds = (timestamps[timestamps.length - 1] - timestamps[0]) / 1000;
3386	console.warn(`Stream stats: ${timestamps.length} tokens, ${seconds.toFixed(2)} seconds, rate: ${Number(timestamps.length / seconds).toFixed(2)} TPS`);	3433	console.warn(`Stream stats: ${timestamps.length} tokens, ${seconds.toFixed(2)} seconds, rate: ${Number(timestamps.length / seconds).toFixed(2)} TPS`);

+}
 /**
+ * Updates the Reasoning controls
+ * @param {HTMLElement} element The element to update
+ * @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
+ */
+function updateReasoningTimeUI(element, duration, { forceEnd = false } = {}) {
+    if (duration) {
+        element.textContent = t`Thought for ${moment.duration(duration).humanize({ s: 50, ss: 9 })}`;
+    } else if (forceEnd) {
+        element.textContent = t`Thought for some time`;
+    } else {
+        element.textContent = t`Thinking...`;
+    }
+}
+/**
  * Extracts multiswipe swipes from the response data.
  * @param {Object} data Response data
  * @param {string} type Type of generation

Add reasoning time duration - Add reasoning time calculation, saved in message metadata - Add event when reasoning streaming is finished