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

41
public/script.js
View File

@ -2189,26 +2189,29 @@ function insertSVGIcon(mes, extra) {
modelName = extra.api;
}
const image = new Image();
// 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 = mes.find('.timestamp').next('.timestamp-icon');
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 insertOrReplaceSVG = (image, className, targetSelector, insertBefore) => {
image.onload = async function () {
let existingSVG = insertBefore ? mes.find(targetSelector).prev(`.${className}`) : mes.find(targetSelector).next(`.${className}`);
if (existingSVG.length) {
existingSVG.replaceWith(image);
} else {
if (insertBefore) mes.find(targetSelector).before(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);
}