rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Cooler styling for reasoning blocks

Browse Source
This commit is contained in:
Wolfsblvt
2025-02-02 03:21:52 +01:00
parent 6deaa31d41
commit e7c799ae2a
3 changed files with 85 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
public/index.html
View File

@ -6247,15 +6247,20 @@
<div class="mes_edit_cancel menu_button fa-solid fa-xmark" title="Cancel" data-i18n="[title]Cancel"></div> <div class="mes_edit_cancel menu_button fa-solid fa-xmark" title="Cancel" data-i18n="[title]Cancel"></div>
</div> </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_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> </div>
</summary> </summary>
<div class="mes_reasoning"></div> <div class="mes_reasoning"></div>

41
public/script.js
View File

@ -2189,26 +2189,29 @@ function insertSVGIcon(mes, extra) {
modelName = extra.api; 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);
} }

71
public/style.css
View File

@ -342,18 +342,44 @@ input[type='checkbox']:focus-visible {
.mes_reasoning { .mes_reasoning {
display: block; 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; padding: 5px;
margin: 5px 0; padding-left: 14px;
margin-bottom: 0.5rem;
overflow-y: auto; overflow-y: auto;
color: var(--SmartThemeEmColor);
} }
.mes_reasoning_summary { .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_header {
cursor: pointer; cursor: pointer;
position: relative; 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(*)) { @supports not selector(:has(*)) {
@ -368,24 +394,20 @@ input[type='checkbox']:focus-visible {
.mes_block:has(.edit_textarea) .mes_reasoning_details, .mes_block:has(.edit_textarea) .mes_reasoning_details,
.mes_reasoning_details:not([open]) .mes_reasoning_actions, .mes_reasoning_details:not([open]) .mes_reasoning_actions,
.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning, .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; 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 { .mes_reasoning_summary>span {
@ -4224,7 +4246,8 @@ input[type="range"]::-webkit-slider-thumb {
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
.mes_edit_buttons .menu_button { .mes_edit_buttons .menu_button,
.mes_reasoning_actions .edit_button {
opacity: 0.5; opacity: 0.5;
padding: 0px; padding: 0px;
font-size: 1rem; font-size: 1rem;
@ -4237,6 +4260,12 @@ input[type="range"]::-webkit-slider-thumb {
align-items: center; align-items: center;
} }
.mes_reasoning_actions .edit_button {
margin-bottom: 0.5rem;
opacity: 1;
filter: brightness(0.7);
}
.mes_reasoning_edit_cancel, .mes_reasoning_edit_cancel,
.mes_edit_cancel.menu_button { .mes_edit_cancel.menu_button {
background-color: var(--crimson70a); background-color: var(--crimson70a);