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">
+                    <details class="mes_reasoning_details" open>
-                        <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+16 -13 Viewed

         modelName = extra.api;
+    }
-    const image = new Image();
+    const insertOrReplaceSVG = (image, className, targetSelector, insertBefore) => {
-    // Add classes for styling and identification
-    image.classList.add('icon-svg', 'timestamp-icon');
-    image.src = `/img/${modelName}.svg`;
-    image.title = `${extra?.api ? extra.api + ' - ' : ''}${extra?.model ?? ''}`;
         image.onload = async function () {
-        // Check if an SVG already exists adjacent to the timestamp
+            let existingSVG = insertBefore ? mes.find(targetSelector).prev(`.${className}`) : mes.find(targetSelector).next(`.${className}`);
-        let existingSVG = mes.find('.timestamp').next('.timestamp-icon');
             if (existingSVG.length) {
-            // Replace existing SVG
                 existingSVG.replaceWith(image);
             } else {
-            // Append the new SVG if none exists
+                if (insertBefore) mes.find(targetSelector).before(image);
-            mes.find('.timestamp').after(image);
+                else mes.find(targetSelector).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: 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.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_summary {
+.mes_reasoning_header_block {
+    flex-grow: 1;
+}
+.mes_reasoning_header {
     cursor: pointer;
     position: relative;
-    margin: 2px;
+    user-select: none;
+    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_done,
+.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .edit_button,
-.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_cancel,
+.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.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_actions {
+.mes_reasoning_details .mes_reasoning_arrow {
-    position: absolute;
+    font-size: 10px;
-    right: 0;
+    width: 10px;
-    top: 0;
+    height: 10px;
+    margin-top: 5px;
+}
-    display: flex;
+.mes_reasoning_details:not([open]) .mes_reasoning_arrow {
-    gap: 4px;
+    transform: rotate(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_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);