Cooler styling for reasoning blocks

e7c799ae2aa4667e33911ffae37e57bc7077a98c

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 6deaa31d4176774dd0e7292ecba8a3bf7cebb286

public/index.html+13 -8 Viewed

                             <div class="mes_edit_cancel menu_button  fa-solid fa-xmark" title="Cancel" data-i18n="[title]Cancel"></div>
                         </div>
                     </div>
                     <details class="mes_reasoning_details" open>
                         <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_actionsmes_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_buttonmes_reasoning_arrow fa-solid fa-xmark" title="Cancel edit" datachevron-i18n="[title]Cancel editup"></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_deletemes_reasoning_edit mes_button fa-solid fa-trash-canpencil" title="RemoveEdit reasoning" data-i18n="[title]RemoveEdit reasoning"></div>
                             </div>
                         </summary>
                         <div class="mes_reasoning"></div>

public/script.js+21 -18 Viewed

         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);
+}

public/style.css+50 -21 Viewed

 .mes_reasoning {
     display: block;
     border-left: 1px2px solid var(--SmartThemeBorderColorSmartThemeEmColor);
 -    background-color: var(--black30a);
 +    border-radius: 2px;
 -    border-radius: 5px;
     padding: 5px;
     marginpadding-left: 5px 014px;
 +    margin-bottom: 0.5rem;
     overflow-y: auto;
 +    color: var(--SmartThemeEmColor);
 +}
++
 +.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_summarymes_reasoning_header_block {
 +    flex-grow: 1;
 +}
++
 +.mes_reasoning_header {
     cursor: pointer;
     position: relative;
     marginuser-select: 2pxnone;
 +    margin: 0.5rem 2px;
 +    padding: 7px 14px;
 +    border-radius: 10px;
 +    background-color: var(--grey30);
 +    font-size: 0.9rem;
+}
 @supports not selector(:has(*)) {

 .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_doneedit_button,
 .mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button:not(.mes_reasoning_edit_cancel,edit_button) {
 -.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.mes_reasoning_edit_done, .mes_reasoning_edit_cancel) {
     display: none;
+}
 .mes_reasoning_actionsmes_reasoning_details .mes_reasoning_arrow {
     positionfont-size: absolute10px;
     rightwidth: 010px;
     topheight: 010px;
 +    margin-top: 5px;
 +}
 -    display: flex;
 +.mes_reasoning_details:not([open]) .mes_reasoning_arrow {
     gaptransform: 4pxrotate(180deg);
 -    flex-wrap: nowrap;
 -    justify-content: flex-end;
 -    transition: all 200ms;
 -    overflow-x: hidden;
 -    padding: 1px;
+}
 .mes_reasoning_summary>span {

     transition: 0.3s ease-in-out;
+}
 .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.5rem;
 +    opacity: 1;
 +    filter: brightness(0.7);
 +}
++
 .mes_reasoning_edit_cancel,
 .mes_edit_cancel.menu_button {
     background-color: var(--crimson70a);