Merge pull request #2949 from ceruleandeep/feature/clickableWelcome Add clickable buttons in Welcome chat message.

6ecfdea8ef6bb8f3ef3b1afb924a0b478a21042f

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: 23639ce1fe7339605065d67f8c6cb4c026c51988 24300642dd6cdf678b9da03bf2b88874f0d00ac2

public/script.js+119 -71 Viewed

+    }
 });
-DOMPurify.addHook('uponSanitizeAttribute', (_, data, config) => {
+DOMPurify.addHook('uponSanitizeAttribute', (node, data, config) => {
     if (!config['MESSAGE_SANITIZE']) {
         return;
+    }
+    /* Retain the classes on UI elements of messages that interact with the main UI */
+    const permittedNodeTypes = ['BUTTON', 'DIV'];
+    if (config['MESSAGE_ALLOW_SYSTEM_UI'] && node.classList.contains('menu_button') && permittedNodeTypes.includes(node.nodeName)) {
+        return;
+    }
     switch (data.attrName) {
         case 'class': {
             if (data.attrValue) {

             force_avatar: system_avatar,
             is_user: false,
             is_system: true,
+            uses_system_ui: true,
             mes: await renderTemplateAsync('welcome', { displayVersion }),
         },
         group: {

  * @param {boolean} isSystem If the message was sent by the system
  * @param {boolean} isUser If the message was sent by the user
  * @param {number} messageId Message index in chat array
+ * @param {object} [sanitizerOverrides] DOMPurify sanitizer option overrides
  * @returns {string} HTML string
  */
-export function messageFormatting(mes, ch_name, isSystem, isUser, messageId) {
+export function messageFormatting(mes, ch_name, isSystem, isUser, messageId, sanitizerOverrides = {}) {
     if (!mes) {
         return '';
+    }

+    }
     /** @type {any} */
-    const config = { MESSAGE_SANITIZE: true, ADD_TAGS: ['custom-style'] };
+    const config = { MESSAGE_SANITIZE: true, ADD_TAGS: ['custom-style'], ...sanitizerOverrides };
     mes = encodeStyleTags(mes);
     mes = DOMPurify.sanitize(mes, config);
     mes = decodeStyleTags(mes);

+}
+/**
+ * Adds a single message to the chat.
+ * @param {object} mes Message object
+ * @param {object} [options] Options
+ * @param {string} [options.type='normal'] Message type
+ * @param {number} [options.insertAfter=null] Message ID to insert the new message after
+ * @param {boolean} [options.scroll=true] Whether to scroll to the new message
+ * @param {number} [options.insertBefore=null] Message ID to insert the new message before
+ * @param {number} [options.forceId=null] Force the message ID
+ * @param {boolean} [options.showSwipes=true] Whether to show swipe buttons
+ * @returns {void}
+ */
 export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true, insertBefore = null, forceId = null, showSwipes = true } = {}) {
     let messageText = mes['mes'];
     const momentDate = timestampToMoment(mes.send_date);

         } else if (this_chid === undefined) {
             avatarImg = system_avatar;
         } else {
-            if (characters[this_chid].avatar != 'none') {
+            if (characters[this_chid].avatar !== 'none') {
                 avatarImg = getThumbnailUrl('avatar', characters[this_chid].avatar);
             } else {
                 avatarImg = default_avatar;

         avatarImg = mes['force_avatar'];
+    }
+    // if mes.uses_system_ui is true, set an override on the sanitizer options
+    const sanitizerOverrides = mes.uses_system_ui ? { MESSAGE_ALLOW_SYSTEM_UI: true } : {};
     messageText = messageFormatting(
         messageText,
         mes.name,
         isSystem,
         mes.is_user,
         chat.indexOf(mes),
+        sanitizerOverrides,
     );
     const bias = messageFormatting(mes.extra?.bias ?? '', '', false, false, -1);
     let bookmarkLink = mes?.extra?.bookmark_link ?? '';

+    }
     //shows or hides the Prompt display button
-    let mesIdToFind = type == 'swipe' ? params.mesId - 1 : params.mesId;  //Number(newMessage.attr('mesId'));
+    let mesIdToFind = type === 'swipe' ? params.mesId - 1 : params.mesId;  //Number(newMessage.attr('mesId'));
     //if we have itemized messages, and the array isn't null..
     if (params.isUser === false && Array.isArray(itemizedPrompts) && itemizedPrompts.length > 0) {

@@ -2651,7 +2676,7 @@ export function sendSystemMessage(type, text, extra = {}) {
2651	newMessage.mes = text;	2676	newMessage.mes = text;
2652	}	2677	}
2653		2678
2654	if (type == system_message_types.SLASH_COMMANDS) {	2679	if (type === system_message_types.SLASH_COMMANDS) {
2655	newMessage.mes = getSlashCommandsHelp();	2680	newMessage.mes = getSlashCommandsHelp();
2656	}	2681	}
2657		2682

     chat.push(newMessage);
     addOneMessage(newMessage);
     is_send_press = false;
-    if (type == system_message_types.SLASH_COMMANDS) {
+    if (type === system_message_types.SLASH_COMMANDS) {
         const browser = new SlashCommandBrowser();
         const spinner = document.querySelector('#chat .last_mes .custom-slashHelp');
         const parent = spinner.parentElement;

             if (menu_type !== 'create') {
                 await createOrEditCharacter();
+            }
-        }
+        },
     });
     for (let index = 0; index < getArray().length; index++) {

     return '';
+}
+/**
+ * Event handler to open a navbar drawer when a drawer open button is clicked.
+ * Handles click events on .drawer-opener elements.
+ * Opens the drawer associated with the clicked button according to the data-target attribute.
+ * @returns {void}
+ */
+function doDrawerOpenClick() {
+    const targetDrawerID = $(this).attr('data-target');
+    const drawer = $(`#${targetDrawerID}`);
+    const drawerToggle = drawer.find('.drawer-toggle');
+    const drawerWasOpenAlready = drawerToggle.parent().find('.drawer-content').hasClass('openDrawer');
+    if (drawerWasOpenAlready || drawer.hasClass('resizing')) { return; }
+    doNavbarIconClick.call(drawerToggle);
+}
+/**
+ * Event handler to open or close a navbar drawer when a navbar icon is clicked.
+ * Handles click events on .drawer-toggle elements.
+ * @returns {void}
+ */
+function doNavbarIconClick() {
+    var icon = $(this).find('.drawer-icon');
+    var drawer = $(this).parent().find('.drawer-content');
+    if (drawer.hasClass('resizing')) { return; }
+    var drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
+    let targetDrawerID = $(this).parent().find('.drawer-content').attr('id');
+    const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
+    if (!drawerWasOpenAlready) { //to open the drawer
+        $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, 'swing', async function () {
+            await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
+        });
+        $('.openIcon').toggleClass('closedIcon openIcon');
+        $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
+        icon.toggleClass('openIcon closedIcon');
+        drawer.toggleClass('openDrawer closedDrawer');
+        //console.log(targetDrawerID);
+        if (targetDrawerID === 'right-nav-panel') {
+            $(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle({
+                duration: 200,
+                easing: 'swing',
+                start: function () {
+                    jQuery(this).css('display', 'flex'); //flex needed to make charlist scroll
+                },
+                complete: async function () {
+                    favsToHotswap();
+                    await delay(50);
+                    $(this).closest('.drawer-content').removeClass('resizing');
+                    $('#rm_print_characters_block').trigger('scroll');
+                },
+            });
+        } else {
+            $(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle(200, 'swing', async function () {
+                await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
+            });
+        }
+        // Set the height of "autoSetHeight" textareas within the drawer to their scroll height
+        if (!CSS.supports('field-sizing', 'content')) {
+            $(this).closest('.drawer').find('.drawer-content textarea.autoSetHeight').each(async function () {
+                await resetScrollHeight($(this));
+                return;
+            });
+        }
+    } else if (drawerWasOpenAlready) { //to close manually
+        icon.toggleClass('closedIcon openIcon');
+        if (pinnedDrawerClicked) {
+            $(drawer).addClass('resizing').slideToggle(200, 'swing', async function () {
+                await delay(50); $(this).removeClass('resizing');
+            });
+        }
+        else {
+            $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, 'swing', async function () {
+                await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
+            });
+        }
+        drawer.toggleClass('closedDrawer openDrawer');
+    }
+}
 function addDebugFunctions() {
     const doBackfill = async () => {
         for (const message of chat) {

         stopScriptExecution();
     });
-    $('.drawer-toggle').on('click', function () {
+    $(document).on('click', '.drawer-opener', doDrawerOpenClick);
-        var icon = $(this).find('.drawer-icon');
+    $('.drawer-toggle').on('click', doNavbarIconClick);
-        var drawer = $(this).parent().find('.drawer-content');
-        if (drawer.hasClass('resizing')) { return; }
-        var drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer');
-        let targetDrawerID = $(this).parent().find('.drawer-content').attr('id');
-        const pinnedDrawerClicked = drawer.hasClass('pinnedOpen');
-        if (!drawerWasOpenAlready) { //to open the drawer
-            $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, 'swing', async function () {
-                await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
-            });
-            $('.openIcon').not('.drawerPinnedOpen').toggleClass('closedIcon openIcon');
-            $('.openDrawer').not('.pinnedOpen').toggleClass('closedDrawer openDrawer');
-            icon.toggleClass('openIcon closedIcon');
-            drawer.toggleClass('openDrawer closedDrawer');
-            //console.log(targetDrawerID);
-            if (targetDrawerID === 'right-nav-panel') {
-                $(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle({
-                    duration: 200,
-                    easing: 'swing',
-                    start: function () {
-                        jQuery(this).css('display', 'flex'); //flex needed to make charlist scroll
-                    },
-                    complete: async function () {
-                        favsToHotswap();
-                        await delay(50);
-                        $(this).closest('.drawer-content').removeClass('resizing');
-                        $('#rm_print_characters_block').trigger('scroll');
-                    },
-                });
-            } else {
-                $(this).closest('.drawer').find('.drawer-content').addClass('resizing').slideToggle(200, 'swing', async function () {
-                    await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
-                });
-            }
-            // Set the height of "autoSetHeight" textareas within the drawer to their scroll height
-            if (!CSS.supports('field-sizing', 'content')) {
-                $(this).closest('.drawer').find('.drawer-content textarea.autoSetHeight').each(async function () {
-                    await resetScrollHeight($(this));
-                    return;
-                });
-            }
-        } else if (drawerWasOpenAlready) { //to close manually
-            icon.toggleClass('closedIcon openIcon');
-            if (pinnedDrawerClicked) {
-                $(drawer).addClass('resizing').slideToggle(200, 'swing', async function () {
-                    await delay(50); $(this).removeClass('resizing');
-                });
-            }
-            else {
-                $('.openDrawer').not('.pinnedOpen').addClass('resizing').slideToggle(200, 'swing', async function () {
-                    await delay(50); $(this).closest('.drawer-content').removeClass('resizing');
-                });
-            }
-            drawer.toggleClass('closedDrawer openDrawer');
-        }
-    });
     $('html').on('touchstart mousedown', function (e) {
         var clickTarget = $(e.target);

public/scripts/templates/welcome.html+41 -17 Viewed

 <a href="https://docs.sillytavern.app/usage/update/" target="_blank" data-i18n="Want to update?">
     Want to update?
 </a>
-<hr>
 <h3 data-i18n="How to start chatting?">How to start chatting?</h3>
 <ol>
     <li>
-        <span data-i18n="Click _space">Click </span><code><i class="fa-solid fa-plug"></i></code><span data-i18n="and select a"> and select a </span><a href="https://docs.sillytavern.app/usage/api-connections/" target="_blank" data-i18n="Chat API">Chat API</a>.</span>
+        <span data-i18n="Click _space">Click </span>
+        <button class="menu_button menu_button_icon drawer-opener inline-flex" data-target="sys-settings-button">
+            <i class="fa-solid fa-plug"></i>
+            <span data-i18n="[title]API Connections">API Connections</span>
+        </button>
+        <span data-i18n="and connect to an">and connect to an</span>
+        <a href="https://docs.sillytavern.app/usage/api-connections/" target="_blank">
+            <span class="fa-solid fa-circle-question"></span>
+            <span data-i18n="API">API</span></a>.
     </li>
     <li>
-        <span data-i18n="Click _space">Click </span><code><i class="fa-solid fa-address-card"></i></code><span data-i18n="and pick a character."> and pick a character.</span>
+        <span data-i18n="Click _space">Click </span>
+        <button class="menu_button menu_button_icon drawer-opener inline-flex" data-target="rightNavHolder">
+            <i class="fa-solid fa-address-card"></i>
+            <span data-i18n="[title]Character Management">Character Management</span>
+        </button>
+        <span data-i18n="and pick a character."> and pick a character.</span>
     </li>
 </ol>
+<div>
+    <span data-i18n="You can add more">You can add more</span>
+    <button class="open_characters_library menu_button menu_button_icon inline-flex">
+        <i class="fa-solid fa-image-portrait"></i>
+        <span data-i18n="Sample characters">Sample characters</span>
+    </button>
+    <span data-i18n="or">or</span>
+    <button class="external_import_button menu_button menu_button_icon inline-flex">
+        <i class="fa-solid fa-cloud-arrow-down"></i>
+        <span data-i18n="Import Characters">Import characters</span>
+    </button>
+    <span data-i18n="from other websites">from other websites.</span>
+</div>
 <div>
-    <span data-i18n="You can browse a list of bundled characters in the">
+    <span data-i18n="Go to the">Go to the</span>
-        You can browse a list of bundled characters in the
-    </span>
+    <i data-i18n="Download Extensions & Assets">Download Extensions & Assets</i>
-    <i data-i18n="Download Extensions & Assets">
+    <span data-i18n="menu within">menu within</span>
-        Download Extensions & Assets
-    </i>
+    <button class="menu_button menu_button_icon drawer-opener inline-flex" data-target="extensions-settings-button">
-    <span data-i18n="menu within">
+        <i class="fa-solid fa-cubes"></i>
-        menu within
+        <span data-i18n="[title]Extensions">Extensions</span>
-    </span>
+    </button>
-    <code><i class="fa-solid fa-cubes"></i></code>
-    <span>.</span>
+    <span data-i18n="to install additional features.">to install additional features.</span>
 </div>
-<hr>
 <h3 data-i18n="Confused or lost?">Confused or lost?</h3>
 <ul>
     <li>

     </li>
 </ul>
-<hr>
 <h3 data-i18n="Still have questions?">Still have questions?</h3>
 <ul>
     <li>

         </a>
     </li>
 </ul>

public/style.css+9 -2 Viewed

     display: inline-block;
+}
+.mes_text ol,
+.mes_text ul {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
 .mes_text br,
 .mes_bias br {
     content: ' ';

@@ -1208,8 +1214,9 @@ textarea.autoSetHeight {
1208	}	1214	}
1209		1215
1210	input,	1216	input,
1211	select {	1217	select,
1212	font-family: var(--mainFontFamily);	1218	button {
		1219	font-family: var(--mainFontFamily), sans-serif;
1213	font-size: var(--mainFontSize);	1220	font-size: var(--mainFontSize);
1214	color: var(--SmartThemeBodyColor);	1221	color: var(--SmartThemeBodyColor);
1215	}	1222	}