sillytavern 1.4.1

package/public/scripts/bookmarks.js

@@ -0,0 +1,130 @@
+import {
+    characters,
+    saveChat,
+    sendSystemMessage,
+    token,
+    system_messages,
+    system_message_types,
+    this_chid,
+    openCharacterChat,
+    chat_metadata,
+    callPopup,
+} from "../script.js";
+import { selected_group } from "./group-chats.js";
+
+import {
+    stringFormat,
+} from "./utils.js";
+
+export {
+    showBookmarksButtons,
+}
+
+const bookmarkNameToken = 'Bookmark #';
+
+async function getExistingChatNames() {
+    const response = await fetch("/getallchatsofcharacter", {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            "X-CSRF-Token": token,
+        },
+        body: JSON.stringify({ avatar_url: characters[this_chid].avatar })
+    });
+
+    if (response.ok) {
+        const data = await response.json();
+        return Object.values(data).map(x => x.file_name.replace('.jsonl', ''));
+    }
+}
+
+async function getBookmarkName() {
+    const chatNames = await getExistingChatNames();
+    const popupText = `<h3>Enter the bookmark name:<h3>
+    <small>Using existing name will overwrite your bookmark chat.
+    <br>Leave empty to auto-generate.</small>`;
+    let name = await callPopup(popupText, 'input');
+
+    if (name === false) {
+        return null;
+    }
+    else if (name === '') {
+        for (let i = 0; i < 1000; i++) {
+            name = bookmarkNameToken + i;
+            if (!chatNames.includes(name)) {
+                break;
+            }
+        }
+    }
+
+    return name;
+}
+
+function getMainChatName() {
+    if (chat_metadata) {
+        if (chat_metadata['main_chat']) {
+            return chat_metadata['main_chat'];
+        }
+        else if (characters[this_chid].chat && characters[this_chid].chat.includes(bookmarkNameToken)) {
+            const tokenIndex = characters[this_chid].chat.lastIndexOf(bookmarkNameToken);
+            chat_metadata['main_chat'] = characters[this_chid].chat.substring(0, tokenIndex).trim();
+            return chat_metadata['main_chat'];
+        }
+    }
+    return null;
+}
+
+function showBookmarksButtons() {
+    try {
+        // In groups or without an active chat
+        if (selected_group || !characters[this_chid].chat) {
+            $("#option_back_to_main").hide();
+            $("#option_new_bookmark").hide();
+        }
+        // In main chat
+        else if (!chat_metadata['main_chat']) {
+            $("#option_back_to_main").hide();
+            $("#option_new_bookmark").show();
+
+        }
+        // In bookmark chat
+        else {
+            $("#option_back_to_main").show();
+            $("#option_new_bookmark").show();
+        }
+    }
+    catch {
+        $("#option_back_to_main").hide();
+        $("#option_new_bookmark").hide();
+    }
+}
+
+$(document).ready(function () {
+    $('#option_new_bookmark').on('click', async function () {
+        if (selected_group) {
+            alert('Chat bookmarks unsupported for groups');
+            throw new Error();
+        }
+
+        let name = await getBookmarkName(characters[this_chid].chat);
+
+        if (!name) {
+            return;
+        }
+
+        const newMetadata = { main_chat: characters[this_chid].chat };
+        saveChat(name, newMetadata);
+        let mainMessage = stringFormat(system_messages[system_message_types.BOOKMARK_CREATED].mes, name, name);
+        sendSystemMessage(system_message_types.BOOKMARK_CREATED, mainMessage);
+        saveChat();
+    });
+
+    $('#option_back_to_main').on('click', async function () {
+        const mainChatName = getMainChatName(characters[this_chid].chat);
+        const allChats = await getExistingChatNames();
+
+        if (allChats.includes(mainChatName)) {
+            openCharacterChat(mainChatName);
+        }
+    });
+});

package/public/scripts/extensions/backgrounds/index.js

@@ -0,0 +1,129 @@
+import { getContext } from "../../extensions.js";
+export { MODULE_NAME };
+
+const MODULE_NAME = 'backgrounds';
+const METADATA_KEY = 'custom_background';
+const UPDATE_INTERVAL = 1000;
+
+async function moduleWorker() {
+    if (hasCustomBackground()) {
+        $('#unlock_background').show();
+        $('#lock_background').hide();
+        setCustomBackground();
+    }
+    else {
+        $('#unlock_background').hide();
+        $('#lock_background').show();
+        unsetCustomBackground();
+    }
+}
+
+function onLockBackgroundClick() {
+    const bgImage = window.getComputedStyle(document.getElementById('bg1')).backgroundImage;
+
+    // Extract the URL from the CSS string
+    const urlRegex = /url\((['"])?(.*?)\1\)/;
+    const matches = bgImage.match(urlRegex);
+    const url = matches[2];
+
+    // Remove the protocol and host, leaving the relative URL
+    const relativeUrl = new URL(url).pathname;
+    const relativeBgImage = `url("${relativeUrl}")`
+
+    saveBackgroundMetadata(relativeBgImage);
+    setCustomBackground();
+    $('#unlock_background').show();
+    $('#lock_background').hide();
+}
+
+function onUnlockBackgroundClick() {
+    removeBackgroundMetadata();
+    unsetCustomBackground();
+    $('#unlock_background').hide();
+    $('#lock_background').show();
+}
+
+function hasCustomBackground() {
+    const context = getContext();
+    return !!context.chatMetadata[METADATA_KEY];
+}
+
+function saveBackgroundMetadata(file) {
+    const context = getContext();
+    context.chatMetadata[METADATA_KEY] = file;
+    context.saveChat();
+}
+
+function removeBackgroundMetadata() {
+    const context = getContext();
+    delete context.chatMetadata[METADATA_KEY];
+    context.saveChat();
+}
+
+function setCustomBackground() {
+    const context = getContext();
+    const file = context.chatMetadata[METADATA_KEY];
+
+    // bg already set
+    if (document.getElementById("bg_custom").style.backgroundImage == file) {
+        return;
+    }
+
+    $("#bg_custom").css("background-image", file);
+    $("#custom_bg_preview").css("background-image", file);
+}
+
+function unsetCustomBackground() {
+    $("#bg_custom").css("background-image", 'none');
+    $("#custom_bg_preview").css("background-image", 'none');
+}
+
+function onSelectBackgroundClick() {
+    const bgfile = $(this).attr("bgfile");
+
+    if (hasCustomBackground()) {
+        saveBackgroundMetadata(`url("backgrounds/${bgfile}")`);
+        setCustomBackground();
+    }
+}
+
+$(document).ready(function () {
+    function addSettings() {
+        const html = `
+        <div class="background_settings">
+            <div class="inline-drawer">
+                <div class="inline-drawer-toggle inline-drawer-header">
+                    <b>Character Backgrounds</b>
+                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+                </div>
+                <div class="inline-drawer-content">
+                    <div class="background_controls">
+                        <div id="lock_background" class="menu_button">
+                            <i class="fa-solid fa-lock"></i>
+                            Lock
+                        </div>
+                        <div id="unlock_background" class="menu_button">
+                            <i class="fa-solid fa-unlock"></i>
+                            Unlock
+                        </div>
+                        <small>
+                            Press "Lock" to assign a currently selected background to a character or group chat.<br>
+                            Any background image selected while lock is engaged will be saved automatically.
+                        </small>
+                    </div>
+                    <div>Preview</div>
+                    <div id="custom_bg_preview">
+                    </div>
+                </div>
+            </div>
+        </div>
+        `;
+        $('#extensions_settings').append(html);
+        $('#lock_background').on('click', onLockBackgroundClick);
+        $('#unlock_background').on('click', onUnlockBackgroundClick);
+        $(document).on("click", ".bg_example", onSelectBackgroundClick);
+    }
+
+    addSettings();
+    setInterval(moduleWorker, UPDATE_INTERVAL);
+});

package/public/scripts/extensions/backgrounds/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Character Backgrounds",
+    "loading_order": 7,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/Cohee1207/SillyTavern"
+}

package/public/scripts/extensions/backgrounds/style.css

@@ -0,0 +1,45 @@
+#custom_bg_preview {
+    width: 160px;
+    height: 90px;
+    background-color: var(--grey30a);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    border-radius: 20px;
+    border: 1px solid var(--black50a);
+    box-shadow: 0 0 7px var(--black50a);
+    margin: 5px;
+}
+
+#custom_bg_preview::before {
+    content: 'No Background';
+    color: white;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#custom_bg_preview:not([style*="background-image: none"])::before {
+    display: none;
+}
+
+.background_controls .menu_button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+}
+
+.background_controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+}
+
+.background_controls small {
+    flex-grow: 1;
+}

package/public/scripts/extensions/caption/index.js

@@ -0,0 +1,117 @@
+import { getBase64Async } from "../../utils.js";
+import { getContext, getApiUrl } from "../../extensions.js";
+export { MODULE_NAME };
+
+const MODULE_NAME = 'caption';
+const UPDATE_INTERVAL = 1000;
+
+async function moduleWorker() {
+    const context = getContext();
+
+    context.onlineStatus === 'no_connection'
+        ? $('#send_picture').hide(200)
+        : $('#send_picture').show(200);
+}
+
+async function setImageIcon() {
+    try {
+        const sendButton = document.getElementById('send_picture');
+        sendButton.classList.add('fa-image');
+        sendButton.classList.remove('fa-hourglass-half', 'fa-fade');
+    }
+    catch (error) {
+        console.log(error);
+    }
+}
+
+async function setSpinnerIcon() {
+    try {
+        const sendButton = document.getElementById('send_picture');
+        sendButton.classList.remove('fa-image');
+        sendButton.classList.add('fa-hourglass-half', 'fa-fade');
+    }
+    catch (error) {
+        console.log(error);
+    }
+}
+
+async function sendCaptionedMessage(caption, image) {
+    const context = getContext();
+    const messageText = `[${context.name1} sends ${context.name2 ?? ''} a picture that contains: ${caption}]`;
+    const message = {
+        name: context.name1,
+        is_user: true,
+        is_name: true,
+        send_date: Date.now(),
+        mes: messageText,
+        extra: { image: image },
+        title: caption
+    };
+    context.chat.push(message);
+    context.addOneMessage(message);
+    await context.generate();
+}
+
+async function onSelectImage(e) {
+    setSpinnerIcon();
+    const file = e.target.files[0];
+
+    if (!file) {
+        return;
+    }
+
+    try {
+        const base64Img = await getBase64Async(file);
+        const url = new URL(getApiUrl());
+        url.pathname = '/api/caption';
+
+        const apiResult = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Bypass-Tunnel-Reminder': 'bypass',
+            },
+            body: JSON.stringify({ image: base64Img.split(',')[1] })
+        });
+
+        if (apiResult.ok) {
+            const data = await apiResult.json();
+            const caption = data.caption;
+            const imageToSave = data.thumbnail ? `data:image/jpeg;base64,${data.thumbnail}` : base64Img;
+            await sendCaptionedMessage(caption, imageToSave);
+        }
+    }
+    catch (error) {
+        console.log(error);
+    }
+    finally {
+        e.target.form.reset();
+        setImageIcon();
+    }
+}
+
+$(document).ready(function () {
+    function addSendPictureButton() {
+        const sendButton = document.createElement('div');
+        sendButton.id = 'send_picture';
+        sendButton.classList.add('fa-solid');
+        $(sendButton).hide();
+        $(sendButton).on('click', () => $('#img_file').click());
+        $('#send_but_sheld').prepend(sendButton);
+    }
+    function addPictureSendForm() {
+        const inputHtml = `<input id="img_file" type="file" accept="image/*">`;
+        const imgForm = document.createElement('form');
+        imgForm.id = 'img_form';
+        $(imgForm).append(inputHtml);
+        $(imgForm).hide();
+        $('#form_sheld').append(imgForm);
+        $('#img_file').on('change', onSelectImage);
+    }
+
+    addPictureSendForm();
+    addSendPictureButton();
+    setImageIcon();
+    moduleWorker();
+    setInterval(moduleWorker, UPDATE_INTERVAL);
+});

package/public/scripts/extensions/caption/manifest.json

@@ -0,0 +1,13 @@
+{
+    "display_name": "Image Captioning",
+    "loading_order": 4,
+    "requires": [
+        "caption"
+    ],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/Cohee1207/SillyTavern"
+}

package/public/scripts/extensions/caption/style.css

@@ -0,0 +1,23 @@
+#send_picture {
+    order: 200;
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    padding: 1px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s;
+    filter: brightness(0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#send_picture:hover {
+    opacity: 1;
+}
+
+#img_form {
+    display: none;
+}

package/public/scripts/extensions/dice/droll.js

@@ -0,0 +1,108 @@
+// Borrowed from the Droll library by thebinarypenguin
+// https://github.com/thebinarypenguin/droll
+// Licensed under MIT license
+var droll = {};
+
+// Define a "class" to represent a formula
+function DrollFormula() {
+    this.numDice = 0;
+    this.numSides = 0;
+    this.modifier = 0;
+
+    this.minResult = 0;
+    this.maxResult = 0;
+    this.avgResult = 0;
+}
+
+// Define a "class" to represent the results of the roll
+function DrollResult() {
+    this.rolls = [];
+    this.modifier = 0;
+    this.total = 0;
+}
+
+/**
+ * Returns a string representation of the roll result
+ */
+DrollResult.prototype.toString = function () {
+    if (this.rolls.length === 1 && this.modifier === 0) {
+        return this.rolls[0] + '';
+    }
+
+    if (this.rolls.length > 1 && this.modifier === 0) {
+        return this.rolls.join(' + ') + ' = ' + this.total;
+    }
+
+    if (this.rolls.length === 1 && this.modifier > 0) {
+        return this.rolls[0] + ' + ' + this.modifier + ' = ' + this.total;
+    }
+
+    if (this.rolls.length > 1 && this.modifier > 0) {
+        return this.rolls.join(' + ') + ' + ' + this.modifier + ' = ' + this.total;
+    }
+
+    if (this.rolls.length === 1 && this.modifier < 0) {
+        return this.rolls[0] + ' - ' + Math.abs(this.modifier) + ' = ' + this.total;
+    }
+
+    if (this.rolls.length > 1 && this.modifier < 0) {
+        return this.rolls.join(' + ') + ' - ' + Math.abs(this.modifier) + ' = ' + this.total;
+    }
+};
+
+/**
+ * Parse the formula into its component pieces.
+ * Returns a DrollFormula object on success or false on failure.
+ */
+droll.parse = function (formula) {
+    var pieces = null;
+    var result = new DrollFormula();
+
+    pieces = formula.match(/^([1-9]\d*)?d([1-9]\d*)([+-]\d+)?$/i);
+    if (!pieces) { return false; }
+
+    result.numDice = (pieces[1] - 0) || 1;
+    result.numSides = (pieces[2] - 0);
+    result.modifier = (pieces[3] - 0) || 0;
+
+    result.minResult = (result.numDice * 1) + result.modifier;
+    result.maxResult = (result.numDice * result.numSides) + result.modifier;
+    result.avgResult = (result.maxResult + result.minResult) / 2;
+
+    return result;
+};
+
+/**
+ * Test the validity of the formula.
+ * Returns true on success or false on failure.
+ */
+droll.validate = function (formula) {
+    return (droll.parse(formula)) ? true : false;
+};
+
+/**
+ * Roll the dice defined by the formula.
+ * Returns a DrollResult object on success or false on failure.
+ */
+droll.roll = function (formula) {
+    var pieces = null;
+    var result = new DrollResult();
+
+    pieces = droll.parse(formula);
+    if (!pieces) { return false; }
+
+    for (var a = 0; a < pieces.numDice; a++) {
+        result.rolls[a] = (1 + Math.floor(Math.random() * pieces.numSides));
+    }
+
+    result.modifier = pieces.modifier;
+
+    for (var b = 0; b < result.rolls.length; b++) {
+        result.total += result.rolls[b];
+    }
+    result.total += result.modifier;
+
+    return result;
+};
+
+// END OF DROLL CODE

package/public/scripts/extensions/dice/index.js

@@ -0,0 +1,96 @@
+import { callPopup } from "../../../script.js";
+import { getContext } from "../../extensions.js";
+export { MODULE_NAME };
+
+const MODULE_NAME = 'dice';
+const UPDATE_INTERVAL = 1000;
+
+function setDiceIcon() {
+    const sendButton = document.getElementById('roll_dice');
+    /* sendButton.style.backgroundImage = `url(/img/dice-solid.svg)`; */
+    sendButton.classList.remove('spin');
+}
+
+async function doDiceRoll() {
+    let value = $(this).data('value');
+
+    if (value == 'custom') {
+        value = await callPopup('Enter the dice formula:<br><i>(for example, <tt>2d6</tt>)</i>', 'input');
+    }
+
+    const isValid = droll.validate(value);
+
+    if (isValid) {
+        const result = droll.roll(value);
+        const context = getContext();
+        context.sendSystemMessage('generic', `${context.name1} rolls a ${value}. The result is: ${result.total}`);
+    }
+}
+
+function addDiceRollButton() {
+    const buttonHtml = `
+        <div id="roll_dice" class="fa-solid fa-dice" /></div>
+        `;
+    const dropdownHtml = `
+    <div id="dice_dropdown">
+        <ul class="list-group">
+            <li class="list-group-item" data-value="d4">d4</li>
+            <li class="list-group-item" data-value="d6">d6</li>
+            <li class="list-group-item" data-value="d8">d8</li>
+            <li class="list-group-item" data-value="d10">d10</li>
+            <li class="list-group-item" data-value="d12">d12</li>
+            <li class="list-group-item" data-value="d20">d20</li>
+            <li class="list-group-item" data-value="d100">d100</li>
+            <li class="list-group-item" data-value="custom">...</li>
+        </ul>
+    </div>`;
+
+    $('#send_but_sheld').prepend(buttonHtml);
+    $(document.body).append(dropdownHtml)
+    $('#dice_dropdown li').on('click', doDiceRoll);
+    const button = $('#roll_dice');
+    const dropdown = $('#dice_dropdown');
+    dropdown.hide();
+    button.hide();
+
+    let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
+        placement: 'top-start',
+    });
+
+    $(document).on('click touchend', function (e) {
+        const target = $(e.target);
+        if (target.is(dropdown)) return;
+        if (target.is(button) && !dropdown.is(":visible")) {
+            e.preventDefault();
+
+            dropdown.show(200);
+            popper.update();
+        } else {
+            dropdown.hide(200);
+        }
+    });
+}
+
+function addDiceScript() {
+    if (!window.droll) {
+        const script = document.createElement('script');
+        script.src = "/scripts/extensions/dice/droll.js";
+        document.body.appendChild(script);
+    }
+}
+
+async function moduleWorker() {
+    const context = getContext();
+
+    context.onlineStatus === 'no_connection'
+        ? $('#roll_dice').hide(200)
+        : $('#roll_dice').show(200);
+}
+
+$(document).ready(function () {
+    addDiceScript();
+    addDiceRollButton();
+    setDiceIcon();
+    moduleWorker();
+    setInterval(moduleWorker, UPDATE_INTERVAL);
+});

package/public/scripts/extensions/dice/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "D&D Dice",
+    "loading_order": 5,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/Cohee1207/SillyTavern"
+}