Merge pull request #3413 from SillyTavern/thinking-is-stylish Thinking is stylish - if you are not cool, I don't know how to help you

5494e89fdb71d0037c7024e57764e03a4cbadada

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

Signed

Parents: aecbc48d43e5c12bc888823d7da555e7dfdf286a 4ca55d3b9bcc0b3d5966cb23dfc4b06d6a7761c8

public/index.html+18 -7 Viewed

                                         Auto-Parse Reasoning
                                     </small>
                                 </label>
+                                <label class="checkbox_label" for="reasoning_auto_expand" title="Automatically expand reasoning blocks." data-i18n="[title]reasoning_auto_expand">
+                                    <input id="reasoning_auto_expand" type="checkbox" />
+                                    <small data-i18n="Auto-Expand Reasoning">
+                                        Auto-Expand Reasoning
+                                    </small>
+                                </label>
                                 <label class="checkbox_label" 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">
                                     <input id="reasoning_add_to_prompts" type="checkbox" />
                                     <small data-i18n="Add Reasoning to Prompts">

                         </div>
                     </div>
                     <details class="mes_reasoning_details">
-                        <summary class="mes_reasoning_summary">
+                        <summary class="mes_reasoning_summary flex-container">
-                            <span data-i18n="Reasoning">Reasoning</span>
+                            <div class="mes_reasoning_header_block flex-container">
-                            <div class="mes_reasoning_actions">
+                                <div class="mes_reasoning_header flex-container">
-                                <div class="mes_reasoning_edit_done mes_button fa-solid fa-check" title="Confirm" data-i18n="[title]Confirmedit"></div>
+                                    <span class="mes_reasoning_header_title" data-i18n="Thought for some time">Thought for some time</span>
-                                <div class="mes_reasoning_edit_cancel mes_button fa-solid fa-xmark" title="Cancel edit" data-i18n="[title]Cancel edit"></div>
+                                    <div class="mes_reasoning_arrow fa-solid fa-chevron-up"></div>
-                                <div class="mes_reasoning_edit mes_button fa-solid fa-pencil" title="Edit reasoning" data-i18n="[title]Edit reasoning"></div>
+                                </div>
+                            </div>
+                            <div class="mes_reasoning_actions flex-container">
+                                <div class="mes_reasoning_edit_done menu_button edit_button fa-solid fa-check" title="Confirm" data-i18n="[title]Confirmedit"></div>
+                                <div class="mes_reasoning_delete menu_button edit_button fa-solid fa-trash-can" title="Remove reasoning" data-i18n="[title]Remove reasoning"></div>
+                                <div class="mes_reasoning_edit_cancel menu_button edit_button fa-solid fa-xmark" title="Cancel edit" data-i18n="[title]Cancel edit"></div>
                                 <div class="mes_reasoning_copy mes_button fa-solid fa-copy" title="Copy reasoning" data-i18n="[title]Copy reasoning"></div>
-                                <div class="mes_reasoning_delete mes_button fa-solid fa-trash-can" title="Remove reasoning" data-i18n="[title]Remove reasoning"></div>
+                                <div class="mes_reasoning_edit mes_button fa-solid fa-pencil" title="Edit reasoning" data-i18n="[title]Edit reasoning"></div>
                             </div>
                         </summary>
                         <div class="mes_reasoning"></div>

public/script.js+142 -25 Viewed

     instruct_presets,
     selectContextPreset,
 } from './scripts/instruct-mode.js';
-import { initLocales, t } from './scripts/i18n.js';
+import { getCurrentLocale, initLocales, t } from './scripts/i18n.js';
 import { getFriendlyTokenizerName, getTokenCount, getTokenCountAsync, initTokenizers, saveTokenCache, TOKENIZER_SUPPORTED_KEY } from './scripts/tokenizers.js';
 import {
     user_avatar,

     /** @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',

         modelName = extra.api;
+    }
-    const image = new Image();
+    const insertOrReplaceSVG = (image, className, targetSelector, insertBefore) => {
-    // Add classes for styling and identification
+        image.onload = async function () {
-    image.classList.add('icon-svg', 'timestamp-icon');
+            let existingSVG = insertBefore ? mes.find(targetSelector).prev(`.${className}`) : mes.find(targetSelector).next(`.${className}`);
-    image.src = `/img/${modelName}.svg`;
+            if (existingSVG.length) {
-    image.title = `${extra?.api ? extra.api + ' - ' : ''}${extra?.model ?? ''}`;
+                existingSVG.replaceWith(image);
+            } else {
-    image.onload = async function () {
+                if (insertBefore) mes.find(targetSelector).before(image);
-        // Check if an SVG already exists adjacent to the timestamp
+                else mes.find(targetSelector).after(image);
-        let existingSVG = mes.find('.timestamp').next('.timestamp-icon');
+            }
+            await SVGInject(image);
-        if (existingSVG.length) {
+        };
-            // Replace existing SVG
+    };
-            existingSVG.replaceWith(image);
-        } else {
-            // Append the new SVG if none exists
-            mes.find('.timestamp').after(image);
-        }
-        await SVGInject(image);
+    const createModelImage = (className, targetSelector, insertBefore) => {
+        const image = new Image();
+        image.classList.add('icon-svg', className);
+        image.src = `/img/${modelName}.svg`;
+        image.title = `${extra?.api ? extra.api + ' - ' : ''}${extra?.model ?? ''}`;
+        insertOrReplaceSVG(image, className, targetSelector, insertBefore);
     };
+    createModelImage('timestamp-icon', '.timestamp');
+    createModelImage('thinking-icon', '.mes_reasoning_header_title', true);
+}

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

     timerValue && mes.find('.mes_timer').attr('title', timerTitle).text(timerValue);
     bookmarkLink && updateBookmarkDisplay(mes);
+    if (reasoning) {
+        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);
+    }

     const text = message?.extra?.display_text ?? message.mes;
     messageElement.find('.mes_text').html(messageFormatting(text, message.name, message.is_system, message.is_user, messageId, {}, false));
     messageElement.find('.mes_reasoning').html(messageFormatting(message.extra?.reasoning ?? '', '', false, false, messageId, {}, true));
+    messageElement.toggleClass('reasoning', !!message.extra?.reasoning);
     addCopyToCodeBlocks(messageElement);
     appendMediaToMessage(message, messageElement);
+}

         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) {

@@ -3135,6 +3162,7 @@ class StreamingProcessor {
3135	this.messageTimerDom = this.messageDom?.querySelector('.mes_timer');	3162	this.messageTimerDom = this.messageDom?.querySelector('.mes_timer');
3136	this.messageTokenCounterDom = this.messageDom?.querySelector('.tokenCounterDisplay');	3163	this.messageTokenCounterDom = this.messageDom?.querySelector('.tokenCounterDisplay');
3137	this.messageReasoningDom = this.messageDom?.querySelector('.mes_reasoning');	3164	this.messageReasoningDom = this.messageDom?.querySelector('.mes_reasoning');
		3165	this.messageReasoningHeaderDom = this.messageDom?.querySelector('.mes_reasoning_header_title');
3138	}	3166	}
3139	}	3167	}
3140		3168

         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;
+                }
+                if (this.messageDom instanceof HTMLElement) {
+                    this.messageDom.classList.add('reasoning');
+                }
+            }
             // Don't waste time calculating token count for streaming

+        }
+    }
+    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 = {

@@ -3377,7 +3434,7 @@ class StreamingProcessor {
3377	}	3434	}
3378	this.reasoning = getRegexedString(state?.reasoning ?? '', regex_placement.REASONING);	3435	this.reasoning = getRegexedString(state?.reasoning ?? '', regex_placement.REASONING);
3379	await eventSource.emit(event_types.STREAM_TOKEN_RECEIVED, text);	3436	await eventSource.emit(event_types.STREAM_TOKEN_RECEIVED, text);
3380	await sw.tick(() => this.onProgressStreaming(this.messageId, this.continueMessage + text));	3437	await sw.tick(async () => await this.onProgressStreaming(this.messageId, this.continueMessage + text));
3381	}	3438	}
3382	const seconds = (timestamps[timestamps.length - 1] - timestamps[0]) / 1000;	3439	const seconds = (timestamps[timestamps.length - 1] - timestamps[0]) / 1000;
3383	console.warn(`Stream stats: ${timestamps.length} tokens, ${seconds.toFixed(2)} seconds, rate: ${Number(timestamps.length / seconds).toFixed(2)} TPS`);	3440	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) {
+        const durationStr = moment.duration(duration).locale(getCurrentLocale()).humanize({ s: 50, ss: 9 });
+        element.textContent = t`Thought for ${durationStr}`;
+    } 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

 // Common code for message editor done and auto-save
 function updateMessage(div) {
     const mesBlock = div.closest('.mes_block');
-    let text = mesBlock.find('.edit_textarea').val();
+    let text = mesBlock.find('.edit_textarea').val()
-    const mes = chat[this_edit_mes_id];
+        ?? mesBlock.find('.mes_text').text();
+    const mesElement = div.closest('.mes');
+    const mes = chat[mesElement.attr('mesid')];
     let regexPlacement;
     if (mes.is_user) {

     appendMediaToMessage(mes, div.closest('.mes'));
     addCopyToCodeBlocks(div.closest('.mes'));
+    const reasoningEditDone = mesBlock.find('.mes_reasoning_edit_done:visible');
+    if (reasoningEditDone.length > 0) {
+        reasoningEditDone.trigger('click');
+    }
     await eventSource.emit(event_types.MESSAGE_UPDATED, this_edit_mes_id);
     this_edit_mes_id = undefined;
     await saveChatConditional();

             var edit_mes_id = $(this).closest('.mes').attr('mesid');
             this_edit_mes_id = edit_mes_id;
+            // Also edit reasoning, if it exists
+            const reasoningEdit = $(this).closest('.mes_block').find('.mes_reasoning_edit:visible');
+            if (reasoningEdit.length > 0) {
+                reasoningEdit.trigger('click');
+            }
             var text = chat[edit_mes_id]['mes'];
             if (chat[edit_mes_id]['is_user']) {
                 this_edit_mes_chname = name1;

+        }
     });
+    $(document).on('click', '.mes_reasoning_header', function () {
+        // If we are in message edit mode and reasoning area is closed, a click opens and edits it
+        const mes = $(this).closest('.mes');
+        const mesEditArea = mes.find('#curEditTextarea');
+        if (mesEditArea.length) {
+            const summary = $(mes).find('.mes_reasoning_summary');
+            if (!summary.attr('open')) {
+                summary.find('.mes_reasoning_edit').trigger('click');
+            }
+        }
+    });
     $(document).on('input', '#curEditTextarea', function () {
         if (power_user.auto_save_msg_edits === true) {
             messageEditAuto($(this));

         appendMediaToMessage(chat[this_edit_mes_id], $(this).closest('.mes'));
         addCopyToCodeBlocks($(this).closest('.mes'));
+        const reasoningEditDone = $(this).closest('.mes_block').find('.mes_reasoning_edit_cancel:visible');
+        if (reasoningEditDone.length > 0) {
+            reasoningEditDone.trigger('click');
+        }
         await eventSource.emit(event_types.MESSAGE_UPDATED, this_edit_mes_id);
         this_edit_mes_id = undefined;
     });

+        }
     });
+    $(document).on('click', '.mes_reasoning_summary', function () {
+        // If you toggle summary header while editing reasoning, yup - we just cancel it
+        $(this).closest('.mes').find('.mes_reasoning_edit_cancel:visible').trigger('click');
+    });
+    $(document).on('click', '.mes_reasoning_details', function (e) {
+        if (!e.target.closest('.mes_reasoning_actions') && !e.target.closest('.mes_reasoning_header')) {
+            e.preventDefault();
+        }
+    });
     $(document).keyup(function (e) {
         if (e.key === 'Escape') {
             const isEditVisible = $('#curEditTextarea').is(':visible') || $('.reasoning_edit_textarea').length > 0;

public/scripts/RossAscends-mods.js+12 -3 Viewed

         // Ctrl+Enter for Regeneration Last Response. If editing, accept the edits instead
         if (event.ctrlKey && event.key == 'Enter') {
             const editMesDone = $('.mes_edit_done:visible');
+            const reasoningMesDone = $('.mes_reasoning_edit_done:visible');
             if (editMesDone.length > 0) {
                 console.debug('Accepting edits with Ctrl+Enter');
-                $('#send_textarea').focus();
+                $('#send_textarea').trigger('focus');
                 editMesDone.trigger('click');
                 return;
-            } else if (is_send_press == false) {
+            } else if (reasoningMesDone.length > 0) {
+                console.debug('Accepting edits with Ctrl+Enter');
+                $('#send_textarea').trigger('focus');
+                reasoningMesDone.trigger('click');
+                return;
+            }
+            else if (is_send_press == false) {
                 const skipConfirmKey = 'RegenerateWithCtrlEnter';
                 const skipConfirm = LoadLocalBool(skipConfirmKey);
                 function doRegenerate() {

                     let regenerateWithCtrlEnter = false;
                     const result = await Popup.show.confirm('Regenerate Message', 'Are you sure you want to regenerate the latest message?', {
                         customInputs: [{ id: 'regenerateWithCtrlEnter', label: 'Don\'t ask again' }],
-                        onClose: (popup) => regenerateWithCtrlEnter = popup.inputResults.get('regenerateWithCtrlEnter') ?? false,
+                        onClose: (popup) => {
+                            regenerateWithCtrlEnter = popup.inputResults.get('regenerateWithCtrlEnter') ?? false;
+                        },
                     });
                     if (!result) {
                         return;

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

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

public/scripts/reasoning.js+25 -2 Viewed

+}
 /**
+ * Toggles the auto-expand state of reasoning blocks.
+ */
+function toggleReasoningAutoExpand() {
+    const reasoningBlocks = document.querySelectorAll('details.mes_reasoning_details');
+    reasoningBlocks.forEach((block) => {
+        if (block instanceof HTMLDetailsElement) {
+            block.open = power_user.reasoning.auto_expand;
+        }
+    });
+}
+/**
  * Helper class for adding reasoning to messages.
  * Keeps track of the number of reasoning additions.
  */

         power_user.reasoning.auto_parse = !!$(this).prop('checked');
         saveSettingsDebounced();
     });
+    $('#reasoning_auto_expand').prop('checked', power_user.reasoning.auto_expand);
+    $('#reasoning_auto_expand').on('change', function () {
+        power_user.reasoning.auto_expand = !!$(this).prop('checked');
+        toggleReasoningAutoExpand();
+        saveSettingsDebounced();
+    });
+}
 function registerReasoningSlashCommands() {

         await saveChatConditional();
         updateMessageBlock(messageId, message);
         textarea.remove();
+        messageBlock.find('.mes_edit_done:visible').trigger('click');
     });
     $(document).on('click', '.mes_reasoning_edit_cancel', function (e) {

         const { messageBlock } = getMessageFromJquery(this);
         const textarea = messageBlock.find('.reasoning_edit_textarea');
         textarea.remove();
+        messageBlock.find('.mes_reasoning_edit_cancel:visible').trigger('click');
     });
     $(document).on('click', '.mes_edit_add_reasoning', async function () {

+        }
         message.extra.reasoning = PromptReasoning.REASONING_PLACEHOLDER;
-        await saveChatConditional();
-        closeMessageEditor();
         updateMessageBlock(messageId, message);
+        await saveChatConditional();
     });
     $(document).on('click', '.mes_reasoning_delete', async function (e) {

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

public/style.css+84 -28 Viewed

     --tool-cool-color-picker-btn-bg: transparent;
     --tool-cool-color-picker-btn-border-color: transparent;
+    --mes-right-spacing: 30px;
     --avatar-base-height: 50px;
     --avatar-base-width: 50px;
     --avatar-base-border-radius: 2px;

 .mes_reasoning {
     display: block;
-    border: 1px solid var(--SmartThemeBorderColor);
+    border-left: 2px solid var(--SmartThemeEmColor);
-    background-color: var(--black30a);
+    border-radius: 2px;
-    border-radius: 5px;
     padding: 5px;
-    margin: 5px 0;
+    padding-left: 14px;
+    margin-bottom: 0.5em;
     overflow-y: auto;
+    color: var(--SmartThemeEmColor);
+}
+.mes_reasoning_details {
+    margin-right: var(--mes-right-spacing);
+}
+.mes_reasoning_details .mes_reasoning_summary {
+    margin-right: calc(var(--mes-right-spacing) * -1);
+}
+.mes_reasoning *:last-child {
+    margin-bottom: 0;
+}
+.mes_reasoning em,
+.mes_reasoning i,
+.mes_reasoning u,
+.mes_reasoning q,
+.mes_reasoning blockquote {
+    filter: saturate(0.5);
+}
+.mes_reasoning_details .mes_reasoning em {
+    color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%)
+}
+.mes_reasoning_header_block {
+    flex-grow: 1;
+}
-.mes_reasoning_summary {
+.mes_reasoning_header {
     cursor: pointer;
     position: relative;
-    margin: 2px;
+    user-select: none;
+    margin: 0.5em 2px;
+    padding: 7px 14px;
+    padding-right: calc(0.7em + 14px);
+    border-radius: 10px;
+    background-color: var(--grey30);
+    font-size: calc(var(--mainFontSize) * 0.9);
+    align-items: baseline;
+}
+/* TWIMC: Remove with custom CSS to show the icon */
+.mes_reasoning_header > .icon-svg {
+    display: none;
+}
 @supports not selector(:has(*)) {

 .mes_bias:empty,
 .mes_reasoning:empty,
 .mes_reasoning_details:has(.mes_reasoning:empty),
-.mes_block:has(.edit_textarea) .mes_reasoning_details,
 .mes_reasoning_details:not([open]) .mes_reasoning_actions,
 .mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning,
-.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_done,
+.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_header,
-.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_cancel,
+.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(.mes_reasoning_edit_done, .mes_reasoning_edit_cancel) {
+.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 {
     display: none;
+}
-.mes_reasoning_actions {
+.mes_reasoning_details .mes_reasoning_arrow {
     position: absolute;
-    right: 0;
+    top: 50%;
-    top: 0;
+    right: 7px;
+    transform: translateY(-50%);
+    font-size: calc(var(--mainFontSize) * 0.7);
+    width: calc(var(--mainFontSize) * 0.7);
+    height: calc(var(--mainFontSize) * 0.7);
+}
-    display: flex;
+.mes_reasoning_details:not([open]) .mes_reasoning_arrow {
-    gap: 4px;
+    transform: translateY(-50%) rotate(180deg);
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    transition: all 200ms;
-    overflow-x: hidden;
-    padding: 1px;
+}
 .mes_reasoning_summary>span {

     /*only affects bubblechat to make it sit nicely at the bottom*/
+}
-.last_mes:has(.mes_text:empty):has(.mes_reasoning_details[open]) .mes_reasoning:not(:empty) {
+.last_mes:has(.mes_text:empty):has(.mes_reasoning_details) .mes_reasoning:not(:empty) {
-    margin-bottom: 30px;
+    margin-bottom: var(--mes-right-spacing);
-}
-.last_mes .mes_reasoning,
-.last_mes .mes_text {
-    padding-right: 30px;
+}
 /* SWIPE RELATED STYLES*/

     padding-left: 0;
     padding-top: 5px;
     padding-bottom: 5px;
+    padding-right: var(--mes-right-spacing);
+}
 br {

 .mes_block .ch_name {
     max-width: 100%;
     min-height: 22px;
+    align-items: flex-start;
+}
 /*applies to both groups and solos chars in the char list*/

     transition: 0.3s ease-in-out;
+}
-.mes_edit_buttons .menu_button {
+.mes_reasoning_actions {
+    margin: 0;
+    margin-top: 0.5em;
+}
+.mes_edit_buttons .menu_button,
+.mes_reasoning_actions .edit_button {
     opacity: 0.5;
     padding: 0px;
     font-size: 1rem;

     align-items: center;
+}
+.mes_reasoning_actions .edit_button {
+    margin-bottom: 0.5em;
+    opacity: 1;
+    filter: brightness(0.7);
+}
 .mes_reasoning_edit_cancel,
 .mes_edit_cancel.menu_button {
     background-color: var(--crimson70a);

@@ -4263,6 +4315,10 @@ input[type="range"]::-webkit-slider-thumb {
4263	field-sizing: content;	4315	field-sizing: content;
4264	}	4316	}
4265		4317
		4318	.mes.reasoning .mes_edit_add_reasoning {
		4319	display: none;
		4320	}
		4321
4266	#anchor_order {	4322	#anchor_order {
4267	margin-bottom: 15px;	4323	margin-bottom: 15px;
4268	}	4324	}