Merge branch 'staging' into DarokCx/release

.dockerignore

@@ -8,3 +8,5 @@ Start.bat
 cloudflared.exe
 access.log
 /data
+/cache
+.DS_Store

.editorconfig

@@ -5,7 +5,7 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{js, conf, json}]
+[*.{js, conf, json, css, less, html}]
 charset = utf-8
 indent_style = space
 indent_size = 4

.github/workflows/update-i18n.yaml

@@ -1,7 +1,6 @@
 name: Update i18n data
 
-on:
+on: workflow_dispatch
-  workflow_dispatch:
 
 jobs:
   build:

.npmignore

@@ -5,4 +5,6 @@ node_modules/
 secrets.json
 /dist
 /backups/
+/data
+/cache
 access.log

.vscode/extensions.json

@@ -4,7 +4,8 @@
     // List of extensions which should be recommended for users of this workspace.
     "recommendations": [
         "dbaeumer.vscode-eslint",
-        "EditorConfig.EditorConfig"
+        "EditorConfig.EditorConfig",
+        "mrcrowl.easy-less"
     ],
     // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
     "unwantedRecommendations": []

default/content/index.json

@@ -11,6 +11,14 @@
         "filename": "themes/Cappuccino.json",
         "type": "theme"
     },
+    {
+        "filename": "themes/Celestial Macaron.json",
+        "type": "theme"
+    },
+    {
+        "filename": "themes/Dark V 1.0.json",
+        "type": "theme"
+    },
     {
         "filename": "backgrounds/__transparent.png",
         "type": "background"
@@ -476,7 +484,11 @@
         "type": "context"
     },
     {
-        "filename": "presets/context/DreamGen Role-Play V1.json",
+        "filename": "presets/context/DreamGen Role-Play V1 ChatML.json",
+        "type": "context"
+    },
+    {
+        "filename": "presets/context/DreamGen Role-Play V1 Llama3.json",
         "type": "context"
     },
     {
@@ -556,7 +568,11 @@
         "type": "instruct"
     },
     {
-        "filename": "presets/instruct/DreamGen Role-Play V1.json",
+        "filename": "presets/instruct/DreamGen Role-Play V1 ChatML.json",
+        "type": "instruct"
+    },
+    {
+        "filename": "presets/instruct/DreamGen Role-Play V1 Llama3.json",
         "type": "instruct"
     },
     {

default/content/presets/context/DreamGen Role-Play V1 ChatML.json

@@ -8,5 +8,5 @@
     "trim_sentences": true,
     "include_newline": false,
     "single_line": false,
-    "name": "DreamGen Role-Play V1"
+    "name": "DreamGen Role-Play V1 ChatML"
 }

default/content/presets/context/DreamGen Role-Play V1 Llama3.json

@@ -0,0 +1,12 @@
+{
+    "story_string": "<|start_header_id|>system<|end_header_id|>\n\n{{#if system}}{{system}}\n\n\n{{/if}}## Overall plot description:\n\n{{#if scenario}}{{scenario}}{{else}}Conversation between {{char}} and {{user}}.{{/if}}{{#if wiBefore}}\n\n{{wiBefore}}{{/if}}\n\n\n## Characters:\n\n### {{char}}\n\n{{#if description}}{{description}}\n\n{{/if}}{{#if personality}}{{personality}}\n\n{{/if}}### {{user}}\n\n{{#if persona}}{{persona}}{{else}}{{user}} is the protagonist of the role-play.{{/if}}{{#if wiAfter}}\n\n{{wiAfter}}{{/if}}{{#if mesExamples}}\n\n{{mesExamples}}{{/if}}",
+    "example_separator": "<|eot_id|>\n<|start_header_id|>user<|end_header_id|>\n\nWrite an example narrative / conversation that is not part of the main story.",
+    "chat_start": "<|eot_id|>\n<|start_header_id|>user<|end_header_id|>\n\nStart the role-play between {{char}} and {{user}}.",
+    "use_stop_strings": false,
+    "allow_jailbreak": false,
+    "always_force_name2": false,
+    "trim_sentences": true,
+    "include_newline": false,
+    "single_line": false,
+    "name": "DreamGen Role-Play V1 Llama3"
+}

default/content/presets/instruct/DreamGen Role-Play V1 ChatML.json

@@ -20,5 +20,5 @@
     "user_alignment_message": "",
     "system_same_as_user": true,
     "last_system_sequence": "",
-    "name": "DreamGen Role-Play V1"
+    "name": "DreamGen Role-Play V1 ChatML"
 }

default/content/presets/instruct/DreamGen Role-Play V1 Llama3.json

@@ -0,0 +1,18 @@
+{
+    "system_prompt": "You are an intelligent, skilled, versatile writer.\n\nYour task is to write a role-play based on the information below.",
+    "input_sequence": "<|eot_id|>\n<|start_header_id|>writer character: {{user}}<|end_header_id|>\n\n",
+    "output_sequence": "<|eot_id|>\n<|start_header_id|>writer character: {{char}}<|end_header_id|>\n\n",
+    "first_output_sequence": "",
+    "last_output_sequence": "",
+    "system_sequence_prefix": "",
+    "system_sequence_suffix": "",
+    "stop_sequence": "",
+    "separator_sequence": "",
+    "wrap": false,
+    "macro": true,
+    "names": false,
+    "names_force_groups": false,
+    "activation_regex": "",
+    "skip_examples": false,
+    "name": "DreamGen Role-Play V1 Llama3"
+}

default/content/themes/Cappuccino.json

@@ -1,7 +1,7 @@
 {
     "name": "Cappuccino",
     "blur_strength": 3,
-    "main_text_color": "rgba(255, 255, 255, 1)",
+    "main_text_color": "rgba(235, 235, 235, 1)",
     "italics_text_color": "rgba(230, 210, 190, 1)",
     "underline_text_color": "rgba(205, 180, 160, 1)",
     "quote_text_color": "rgba(165, 140, 115, 1)",

default/content/themes/Celestial Macaron.json

@@ -0,0 +1,37 @@
+{
+    "name": "Celestial Macaron",
+    "blur_strength": 10,
+    "main_text_color": "rgba(229, 175, 162, 1)",
+    "italics_text_color": "rgba(146, 147, 161, 1)",
+    "underline_text_color": "rgba(157, 215, 198, 1)",
+    "quote_text_color": "rgba(197, 202, 206, 1)",
+    "blur_tint_color": "rgba(23, 36, 55, 0.9)",
+    "chat_tint_color": "rgba(18, 26, 40, 0.9)",
+    "user_mes_blur_tint_color": "rgba(51, 67, 90, 0.7)",
+    "bot_mes_blur_tint_color": "rgba(23, 36, 55, 0.75)",
+    "shadow_color": "rgba(0, 0, 0, 0.3)",
+    "shadow_width": 1,
+    "border_color": "rgba(60, 74, 110, 0.93)",
+    "font_scale": 1,
+    "fast_ui_mode": false,
+    "waifuMode": false,
+    "avatar_style": 0,
+    "chat_display": 1,
+    "noShadows": true,
+    "chat_width": 58,
+    "timer_enabled": true,
+    "timestamps_enabled": true,
+    "timestamp_model_icon": false,
+    "mesIDDisplay_enabled": true,
+    "hideChatAvatars_enabled": false,
+    "message_token_count_enabled": true,
+    "expand_message_actions": true,
+    "enableZenSliders": false,
+    "enableLabMode": false,
+    "hotswap_enabled": true,
+    "custom_css": "",
+    "bogus_folders": true,
+    "zoomed_avatar_magnification": false,
+    "reduced_motion": false,
+    "compact_input_area": true
+}

default/content/themes/Dark V 1.0.json

@@ -0,0 +1,37 @@
+{
+    "name": "Dark V 1.0",
+    "blur_strength": 13,
+    "main_text_color": "rgba(207, 207, 197, 1)",
+    "italics_text_color": "rgba(145, 145, 145, 1)",
+    "underline_text_color": "rgba(145, 145, 145, 1)",
+    "quote_text_color": "rgba(198, 193, 151, 1)",
+    "blur_tint_color": "rgba(29, 33, 40, 0.9)",
+    "chat_tint_color": "rgba(29, 33, 40, 0.9)",
+    "user_mes_blur_tint_color": "rgba(29, 33, 40, 0.9)",
+    "bot_mes_blur_tint_color": "rgba(29, 33, 40, 0.9)",
+    "shadow_color": "rgba(0, 0, 0, 0.9)",
+    "shadow_width": 2,
+    "border_color": "rgba(0, 0, 0, 1)",
+    "font_scale": 1,
+    "fast_ui_mode": false,
+    "waifuMode": false,
+    "avatar_style": 0,
+    "chat_display": 0,
+    "noShadows": false,
+    "chat_width": 55,
+    "timer_enabled": false,
+    "timestamps_enabled": false,
+    "timestamp_model_icon": false,
+    "mesIDDisplay_enabled": false,
+    "hideChatAvatars_enabled": false,
+    "message_token_count_enabled": false,
+    "expand_message_actions": false,
+    "enableZenSliders": false,
+    "enableLabMode": false,
+    "hotswap_enabled": true,
+    "custom_css": "",
+    "bogus_folders": true,
+    "zoomed_avatar_magnification": true,
+    "reduced_motion": true,
+    "compact_input_area": false
+}

public/css/animations.css

@@ -0,0 +1,122 @@
+/* Fade animations with opacity */
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Pop animations with opacity and vertical scaling */
+@keyframes pop-in {
+    0% {
+        opacity: 0;
+        transform: scaleY(0);
+    }
+
+    /* Make the scaling faster on pop-in, otherwise it looks a bit weird */
+    33% {
+        transform: scaleY(1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes pop-out {
+    0% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scaleY(0);
+    }
+}
+
+/* Flashing for highlighting animation */
+@keyframes flash {
+
+    20%,
+    60%,
+    100% {
+        opacity: 1;
+    }
+
+    0%,
+    40%,
+    80% {
+        opacity: 0.2;
+    }
+}
+
+/* Pulsing highlight, slightly resizing the element */
+@keyframes pulse {
+    from {
+        transform: scale(1);
+        filter: brightness(1.1);
+    }
+
+    to {
+        transform: scale(1.01);
+        filter: brightness(1.3);
+    }
+}
+
+/* Ellipsis animation */
+@keyframes ellipsis {
+    0% {
+        content: ""
+    }
+
+    25% {
+        content: "."
+    }
+
+    50% {
+        content: ".."
+    }
+
+    75% {
+        content: "..."
+    }
+}
+
+/* HEINOUS */
+@keyframes infinite-spinning {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* STscript animation */
+@keyframes script_progress_pulse {
+
+    0%,
+    100% {
+        border-top-color: var(--progColor);
+    }
+
+    50% {
+        border-top-color: var(--progFlashColor);
+    }
+}

public/css/extensions-panel.css

@@ -36,7 +36,6 @@ label[for="extensions_autoconnect"] {
 
 .extensions_info {
     text-align: left;
-    margin: 0 1em;
 }
 
 .extensions_info h3 {
@@ -97,114 +96,11 @@ input.extension_missing[type="checkbox"] {
     flex-direction: column;
 }
 
-/** LEFT COLUMN **/
+/* Fixes order of settings for extensions */
-/* Must be always on top */
+.extension_container {
-#extensions_settings>#assets_ui {
+    display: contents;
-    order: -1;
 }
 
-#extensions_settings>.expression_settings {
+#extensionsMenu>div.extension_container:empty {
-    order: 2;
+    display: none;
-}
-
-#extensions_settings>.background_settings {
-    order: 3;
-}
-
-#extensions_settings>.sd_settings {
-    order: 4;
-}
-
-#extensions_settings>#tts_settings {
-    order: 5;
-}
-
-#extensions_settings>#rvc_settings {
-    order: 6;
-}
-
-#extensions_settings>.objective-settings {
-    order: 7;
-}
-
-#extensions_settings>#speech_recognition_settings {
-    order: 8;
-}
-
-#extensions_settings>#audio_settings {
-    order: 9;
-}
-
-/** RIGHT COLUMN **/
-#extensions_settings2>.translation_settings {
-    order: 1;
-}
-
-#extensions_settings2>.caption_settings {
-    order: 2;
-}
-
-#extensions_settings2>.quickReplySettings {
-    order: 3;
-}
-
-#extensions_settings2>.idle-settings {
-    order: 4;
-}
-
-#extensions_settings2>#memory_settings {
-    order: 5;
-}
-
-#extensions_settings2>.hypebot_settings {
-    order: 6;
-}
-
-#extensions_settings2>.regex_settings {
-    order: 7;
-}
-
-#extensions_settings2>.vectors_settings {
-    order: 8;
-}
-
-#extensions_settings2>.chromadb_settings {
-    order: 9;
-}
-
-#extensions_settings2>.randomizer_settings {
-    order: 10;
-}
-
-/** WAND MENU **/
-#extensionsMenu>#ttsExtensionMenuItem {
-    order: 1;
-}
-
-#extensionsMenu>#sd_gen {
-    order: 2;
-}
-
-#extensionsMenu>#send_picture {
-    order: 3;
-}
-
-#extensionsMenu>#token_counter {
-    order: 4;
-}
-
-#extensionsMenu>#objective-task-manual-check-menu-item {
-    order: 5;
-}
-
-#extensionsMenu>#roll_dice {
-    order: 6;
-}
-
-#extensionsMenu>#translate_chat {
-    order: 7;
-}
-
-#extensionsMenu>#translate_input_message {
-    order: 8;
 }

public/css/logprobs.css

@@ -98,7 +98,7 @@
     font-weight: bold;
 }
 
-.logprobs_top_candidate:not([disabled]):hover, .logprobs_top_candidate:not([disabled]):focus {
+.logprobs_top_candidate:not([disabled]):hover {
     background-color: rgba(0, 0, 0, 0.3);
 }
 

public/css/popup.css

@@ -0,0 +1,172 @@
+dialog {
+    color: var(--SmartThemeBodyColor);
+}
+
+/* Closed state of the dialog */
+.popup {
+    width: 500px;
+    text-align: center;
+    box-shadow: 0px 0px 14px var(--black70a);
+    border: 1px solid var(--SmartThemeBorderColor);
+    padding: 4px 14px;
+    background-color: var(--SmartThemeBlurTintColor);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+
+    max-height: calc(100svh - 2em);
+    max-width: calc(100svw - 2em);
+    min-height: fit-content;
+
+    /* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup-body' is hiding overflow for the real content. */
+    overflow: visible;
+
+    /* Fix weird animation issue with font-scaling during popup open */
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.popup .popup-body {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: auto;
+    padding: 1px;
+}
+
+.popup .popup-content {
+    margin-top: 10px;
+    padding: 0 8px;
+    overflow: hidden;
+    flex-grow: 1;
+}
+
+.popup .popup-content h3:first-child {
+    /* No double spacing for the first heading needed, the .popup-content already has margin */
+    margin-top: 0px;
+}
+
+.popup.vertical_scrolling_dialogue_popup .popup-content {
+    overflow-y: auto;
+}
+
+.popup.horizontal_scrolling_dialogue_popup .popup-content {
+    overflow-x: auto;
+}
+
+/* Opening animation */
+.popup[opening] {
+    animation: pop-in var(--animation-duration-slow) ease-in-out;
+}
+
+.popup[opening]::backdrop {
+    animation: fade-in var(--animation-duration-slow) ease-in-out;
+}
+
+/* Open state of the dialog */
+.popup[open] {
+    color: var(--SmartThemeBodyColor);
+}
+
+.popup[open]::backdrop {
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    background-color: var(--black30a);
+}
+
+body.no-blur .popup[open]::backdrop {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+
+/* Closing animation */
+.popup[closing] {
+    animation: pop-out var(--animation-duration-slow) ease-in-out;
+}
+
+.popup[closing]::backdrop {
+    animation: fade-out var(--animation-duration-slow) ease-in-out;
+}
+
+.popup #toast-container {
+    /* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
+    height: 100svh;
+    top: calc(50% + var(--topBarBlockSize));
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    /* Fix text align, popups are centered by default. toasts should not. */
+    text-align: left;
+}
+
+.popup-crop-wrap {
+    margin: 10px auto;
+    max-height: 75vh;
+    max-height: 75svh;
+    max-width: 100%;
+}
+
+.popup-crop-wrap img {
+    max-width: 100%;
+    /* This rule is very important, please do not ignore this! */
+}
+
+.popup-inputs {
+    margin-top: 10px;
+    font-size: smaller;
+    opacity: 0.7;
+}
+
+.popup-input {
+    margin-top: 10px;
+}
+
+.popup-controls {
+    margin-top: 10px;
+    display: flex;
+    align-self: center;
+    gap: 20px;
+}
+
+.menu_button.menu_button_default {
+    box-shadow: 0 0 5px var(--white20a);
+}
+
+.menu_button.popup-button-ok {
+    background-color: var(--crimson70a);
+}
+
+.menu_button.popup-button-ok:hover {
+    background-color: var(--crimson-hover);
+}
+
+.popup-controls .menu_button {
+    /* Popup buttons should not scale to smallest size, otherwise they will always break to multiline if multiple words */
+    width: unset;
+
+    /* Fix weird animation issue with fonts on brightness filter */
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.popup-controls .menu_button:hover:focus-visible {
+    filter: brightness(1.3) saturate(1.3);
+}
+
+.popup .popup-button-close {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 24px;
+    height: 24px;
+    font-size: 20px;
+    padding: 2px 3px 3px 2px;
+
+    filter: brightness(0.8);
+
+    /* Fix weird animation issue with font-scaling during popup open */
+    backface-visibility: hidden;
+}

public/css/select2-overrides.css

@@ -23,6 +23,14 @@
     opacity: 0.8;
 }
 
+.select2-selection--single .select2-selection__placeholder {
+    color: var(--SmartThemeEmColor);
+}
+
+.select2-container--classic .select2-selection--single .select2-selection__placeholder {
+    color: var(--SmartThemeEmColor);
+}
+
 .select2-container .select2-selection--single .select2-selection__rendered {
     color: var(--SmartThemeBodyColor);
     line-height: revert;
@@ -49,7 +57,7 @@
     color: var(--SmartThemeBodyColor);
     border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 7px;
-    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    font-family: var(--mainFontFamily);
     padding: 3px 5px;
 }
 
@@ -77,7 +85,7 @@
     color: var(--SmartThemeBodyColor);
     border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 7px;
-    font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+    font-family: var(--mainFontFamily);
     padding: 3px 5px;
 }
 
@@ -173,8 +181,9 @@
 }
 
 .select2-selection__choice__display {
-    /* Fix weird alignment on the left side */
+    /* Fix weird alignment of the inside block */
-    margin-left: 1px;
+    margin-left: 3px;
+    margin-right: 1px;
 }
 
 /* Styling for choice remove icon */
@@ -194,6 +203,7 @@ span.select2.select2-container .select2-selection__choice__remove:hover {
 .select2_choice_clickable+span.select2-container .select2-selection__choice__display {
     cursor: pointer;
 }
+
 .select2_choice_clickable_buttonstyle+span.select2-container .select2-selection__choice__display {
     cursor: pointer;
     transition: background-color 0.3s;
@@ -211,7 +221,9 @@ span.select2.select2-container .select2-selection__choice__remove:hover {
 .select2_multi_sameline+span.select2-container .select2-selection--multiple {
     display: flex;
     flex-wrap: wrap;
-}.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search--inline {
+}
+
+.select2_multi_sameline+span.select2-container .select2-selection--multiple .select2-search--inline {
     /* Allow search placeholder to take up all space if needed */
     flex-grow: 1;
 }

public/css/st-tailwind.css

@@ -220,7 +220,7 @@
 }
 
 .monospace {
-    font-family: monospace;
+    font-family: var(--monoFontFamily);
 }
 
 .expander {
@@ -292,6 +292,14 @@
     flex-wrap: nowrap;
 }
 
+.inline-flex {
+    display: inline-flex;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
 .alignitemscenter,
 .alignItemsCenter {
     align-items: center;
@@ -348,6 +356,10 @@
     margin-right: 5px;
 }
 
+.margin-r2 {
+    margin-right: 2px;
+}
+
 .flex0 {
     flex: 0;
 }

public/css/tags.css

@@ -14,7 +14,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 10px;
+    gap: 6px;
     margin-bottom: 5px;
 }
 
@@ -27,8 +27,19 @@
     flex: 1;
 }
 
+.tag_view_color_picker {
+    position: relative;
+}
+
+.tag_view_color_picker .link_icon {
+    position: absolute;
+    top: 50%;
+    right: 0px;
+    opacity: 0.5;
+}
+
 .tag_delete {
-    padding-right: 0;
+    padding: 2px 4px;
     color: var(--SmartThemeBodyColor) !important;
 }
 
@@ -108,6 +119,14 @@
     opacity: 0.6;
 }
 
+#tagList .tag:has(.tag_remove:hover) {
+    opacity: 1;
+}
+
+#tagList .tag:has(.tag_remove:hover) .tag_name {
+    opacity: 0.6;
+}
+
 .tags.tags_inline {
     opacity: 0.6;
     column-gap: 0.2rem;

public/img/01ai.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="363.44339"
+   height="375.68854"
+   viewBox="0 0 363.44339 375.68854"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="Yi_logo_icon_dark.svg"
+   inkscape:version="1.3 (0e150ed, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.1073359"
+     inkscape:cx="192.35355"
+     inkscape:cy="196.86889"
+     inkscape:window-width="1512"
+     inkscape:window-height="857"
+     inkscape:window-x="0"
+     inkscape:window-y="38"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <rect
+     x="287.14771"
+     y="224.04056"
+     width="42.3862"
+     height="151.64799"
+     rx="21.1931"
+     id="rect1" />
+  <path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="m 299.41969,17.362538 c -8.916,-7.5830004 -22.291,-6.503 -29.874,2.414 l -118.432,139.253002 c -3.056,3.593 -4.705,7.911 -5.001,12.281 -0.166,1.069 -0.252,2.164 -0.252,3.279 v 178.022 c 0,11.705 9.488,21.193 21.193,21.193 11.705,0 21.193,-9.488 21.193,-21.193 v -171.819 l 113.587,-133.556002 c 7.583,-8.916 6.502,-22.291 -2.414,-29.874 z"
+     id="path1" />
+  <rect
+     x="-18.236605"
+     y="8.6596518"
+     width="42.3862"
+     height="174.745"
+     rx="21.1931"
+     transform="rotate(-39.3441)"
+     id="rect2" />
+  <circle
+     cx="337.54071"
+     cy="163.28656"
+     r="25.9027"
+     id="circle2" />
+</svg>

public/img/huggingface.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="88.001465mm"
+   height="81.280983mm"
+   version="1.1"
+   id="svg9"
+   sodipodi:docname="huggingface.svg"
+   inkscape:version="1.3 (0e150ed, 2023-07-21)"
+   viewBox="0 0 88.001465 81.280983"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs9" />
+  <sodipodi:namedview
+     id="namedview9"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.68605868"
+     inkscape:cx="424.16197"
+     inkscape:cy="154.50573"
+     inkscape:window-width="1512"
+     inkscape:window-height="857"
+     inkscape:window-x="0"
+     inkscape:window-y="38"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg9"
+     inkscape:clip-to-page="false"
+     inkscape:document-units="mm" />
+  <path
+     id="path2-9"
+     style="display:inline;"
+     d="M 40.855186,0.10840487 A 38.75,38.75 0 0 0 5.0016702,38.750983 a 38.75,38.75 0 0 0 1.7871095,11.589844 7.1,7.1 0 0 1 1.871094,0.291015 5.97,5.97 0 0 1 1.330078,-3.761718 c 0.02089,-0.02502 0.04515,-0.04576 0.06641,-0.07031 a 34.75,34.75 0 0 1 -1.0547201,-8.048831 34.750014,34.750014 0 0 1 69.5000291,0 34.75,34.75 0 0 1 -0.957032,7.630859 c 0.163358,0.152193 0.321565,0.31255 0.466797,0.488282 a 5.97,5.97 0 0 1 1.330078,3.761718 7.1,7.1 0 0 1 1.337891,-0.207031 A 38.75,38.75 0 0 0 82.501671,38.750983 38.75,38.75 0 0 0 40.855186,0.10840487 Z M 48.015342,73.165045 a 34.75,34.75 0 0 1 -8.044921,0.03906 c -0.396448,0.901178 -0.898324,1.811009 -1.529297,2.736328 -0.233308,0.342701 -0.489288,0.664577 -0.75586,0.974609 a 38.75,38.75 0 0 0 12.574219,-0.06641 c -0.245421,-0.290144 -0.482504,-0.589875 -0.699219,-0.908203 -0.639915,-0.938432 -1.14623,-1.86177 -1.544922,-2.775391 z M 73.940733,45.000983 c 1.62,0 3.07,0.66 4.07,1.87 a 5.97,5.97 0 0 1 1.33,3.76 7.1,7.1 0 0 1 1.95,-0.3 c 1.55,0 2.95,0.59 3.94,1.66 a 5.8,5.8 0 0 1 0.8,7 5.3,5.3 0 0 1 1.78,2.82 c 0.24,0.9 0.48,2.8 -0.8,4.74 a 5.22,5.22 0 0 1 0.37,5.02 c -1.02,2.32 -3.57,4.14 -8.51,6.1 -3.08,1.22 -5.9,2 -5.92,2.01 a 44.33,44.33 0 0 1 -10.93,1.6 c -5.86,0 -10.05,-1.8 -12.46,-5.34 -3.88,-5.69 -3.33,-10.9 1.7,-15.92 2.78,-2.78 4.63,-6.87 5.01,-7.77 0.78,-2.66 2.83,-5.62 6.24,-5.62 a 5.7,5.7 0 0 1 4.6,2.46 c 1,-1.26 1.98,-2.25 2.87,-2.82 a 7.4,7.4 0 0 1 3.96,-1.27 z m 0,4 c -0.51,0 -1.13,0.22 -1.82,0.65 -2.13,1.36 -6.25,8.43 -7.76,11.18 a 2.43,2.43 0 0 1 -2.14,1.31 c -1.54,0 -2.75,-1.53 -0.14,-3.48 3.91,-2.93 2.54,-7.72 0.67,-8.01 a 1.54,1.54 0 0 0 -0.24,-0.02 c -1.7,0 -2.45,2.93 -2.45,2.93 0,0 -2.2,5.52 -5.97,9.3 -3.78,3.77 -3.98,6.8 -1.22,10.83 1.87,2.75 5.47,3.58 9.15,3.58 3.82,0 7.73,-0.9 9.93,-1.46 0.1,-0.03 13.45,-3.8 11.76,-7 -0.29,-0.54 -0.75,-0.76 -1.34,-0.76 -2.38,0 -6.71,3.54 -8.57,3.54 -0.42,0 -0.71,-0.17 -0.83,-0.6 -0.8,-2.85 12.05,-4.05 10.97,-8.17 -0.19,-0.73 -0.7,-1.02 -1.44,-1.02 -3.14,0 -10.2,5.53 -11.68,5.53 -0.1,0 -0.19,-0.03 -0.23,-0.1 -0.74,-1.2 -0.34,-2.04 4.88,-5.2 5.23,-3.16 8.9,-5.06 6.8,-7.33 -0.23,-0.26 -0.57,-0.38 -0.98,-0.38 -3.18,0 -10.67,6.82 -10.67,6.82 0,0 -2.02,2.1 -3.24,2.1 a 0.74,0.74 0 0 1 -0.68,-0.38 c -0.87,-1.46 8.05,-8.22 8.55,-11.01 0.34,-1.9 -0.24,-2.85 -1.31,-2.85 z m -6.69,-15 a 3.25,3.25 0 1 0 0,-6.5 3.25,3.25 0 0 0 0,6.5 z m -46.5,0 a 3.25,3.25 0 1 0 0,-6.5 3.25,3.25 0 0 0 0,6.5 z m -6.69,11 c -1.62,0 -3.06,0.66 -4.0700003,1.87 a 5.97,5.97 0 0 0 -1.33,3.76 7.1,7.1 0 0 0 -1.94,-0.3 c -1.55,0 -2.95,0.59 -3.94,1.66 a 5.8,5.8 0 0 0 -0.8,7 5.3,5.3 0 0 0 -1.79000004,2.82 c -0.24,0.9 -0.48,2.8 0.8,4.74 a 5.22,5.22 0 0 0 -0.37,5.02 c 1.02000004,2.32 3.57000004,4.14 8.52000004,6.1 3.0700003,1.22 5.8900003,2 5.9100003,2.01 a 44.33,44.33 0 0 0 10.93,1.6 c 5.86,0 10.05,-1.8 12.46,-5.34 3.88,-5.69 3.33,-10.9 -1.7,-15.92 -2.77,-2.78 -4.62,-6.87 -5,-7.77 -0.78,-2.66 -2.84,-5.62 -6.25,-5.62 a 5.7,5.7 0 0 0 -4.6,2.46 c -1,-1.26 -1.98,-2.25 -2.86,-2.82 a 7.4,7.4 0 0 0 -3.97,-1.27 z m 0,4 c 0.51,0 1.14,0.22 1.82,0.65 2.14,1.36 6.25,8.43 7.76,11.18 0.5,0.92 1.37,1.31 2.14,1.31 1.55,0 2.75,-1.53 0.15,-3.48 -3.92,-2.93 -2.55,-7.72 -0.68,-8.01 0.08,-0.02 0.17,-0.02 0.24,-0.02 1.7,0 2.45,2.93 2.45,2.93 0,0 2.2,5.52 5.98,9.3 3.77,3.77 3.97,6.8 1.22,10.83 -1.88,2.75 -5.47,3.58 -9.16,3.58 -3.81,0 -7.73,-0.9 -9.92,-1.46 -0.11,-0.03 -13.4500003,-3.8 -11.7600003,-7 0.28,-0.54 0.75,-0.76 1.34,-0.76 2.38,0 6.7000003,3.54 8.5700003,3.54 0.41,0 0.7,-0.17 0.83,-0.6 0.79,-2.85 -12.0600003,-4.05 -10.9800003,-8.17 0.2,-0.73 0.71,-1.02 1.44,-1.02 3.14,0 10.2000003,5.53 11.6800003,5.53 0.11,0 0.2,-0.03 0.24,-0.1 0.74,-1.2 0.33,-2.04 -4.9,-5.2 -5.2100003,-3.16 -8.8800003,-5.06 -6.8000003,-7.33 0.24,-0.26 0.58,-0.38 1,-0.38 3.17,0 10.6600003,6.82 10.6600003,6.82 0,0 2.02,2.1 3.25,2.1 0.28,0 0.52,-0.1 0.68,-0.38 0.86,-1.46 -8.06,-8.22 -8.56,-11.01 -0.34,-1.9 0.24,-2.85 1.31,-2.85 z m 21.91,2 a 8.7,8.7 0 0 1 5.3,-4.49 c 0.4,-0.12 0.81,0.57 1.24,1.28 0.4,0.68 0.82,1.37 1.24,1.37 0.45,0 0.9,-0.68 1.33,-1.35 0.45,-0.7 0.89,-1.38 1.32,-1.25 a 8.61,8.61 0 0 1 5,4.17 c 3.73,-2.94 5.1,-7.74 5.1,-10.7 0,-2.34 -1.57,-1.6 -4.09,-0.36 l -0.14,0.07 c -2.31,1.15 -5.39,2.67 -8.77,2.67 -3.38,0 -6.45,-1.52 -8.77,-2.67 -2.6,-1.29 -4.23,-2.1 -4.23,0.29 0,3.05 1.46,8.06 5.47,10.97 z m 19.07,-21.7 c 1.28,0.44 1.78,3.06 3.07,2.38 a 5,5 0 1 0 -6.76,-2.07 c 0.61,1.15 2.55,-0.72 3.7,-0.32 z m -23.55,0 c -1.28,0.44 -1.79,3.06 -3.07,2.38 a 5,5 0 1 1 6.76,-2.07 c -0.61,1.15 -2.56,-0.72 -3.7,-0.32 z" />
+</svg>

public/img/manual.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3252 3.05011L8.66765 20.4323L10.5995 20.9499L15.257 3.56775L13.3252 3.05011Z" />
+<path d="M7.61222 18.3608L8.97161 16.9124L8.9711 16.8933L3.87681 12.1121L8.66724 7.00798L7.20892 5.63928L1.0498 12.2017L7.61222 18.3608Z" />
+<path d="M16.3883 18.3608L15.0289 16.9124L15.0294 16.8933L20.1237 12.1121L15.3333 7.00798L16.7916 5.63928L22.9507 12.2017L16.3883 18.3608Z" />
+</svg>

public/index.html

@@ -18,6 +18,7 @@
     <link rel="preload" as="style" href="style.css">
     <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
     <link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
+    <link href="webfonts/NotoSansMono/stylesheet.css" rel="stylesheet">
     <link href="css/fontawesome.min.css" rel="stylesheet">
     <link href="css/solid.min.css" rel="stylesheet">
     <link href="css/brands.min.css" rel="stylesheet">
@@ -32,7 +33,6 @@
     <link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png" />
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="stylesheet" type="text/css" href="css/st-tailwind.css">
-    <link rel="stylesheet" type="text/css" href="css/tags.css">
     <link rel="stylesheet" type="text/css" href="css/rm-groups.css">
     <link rel="stylesheet" type="text/css" href="css/group-avatars.css">
     <link rel="stylesheet" type="text/css" href="css/toggle-dependent.css">
@@ -72,8 +72,8 @@
                 <div id="lm_button_panel_pin_div" title="Locked = AI Configuration panel will stay open" data-i18n="[title]AI Configuration panel will stay open">
                     <input type="checkbox" id="lm_button_panel_pin">
                     <label for="lm_button_panel_pin">
-                        <div class="unchecked fa-solid fa-unlock "></div>
+                        <div class="unchecked fa-solid fa-unlock right_menu_button"></div>
-                        <div class="checked fa-solid fa-lock "></div>
+                        <div class="checked fa-solid fa-lock right_menu_button"></div>
                     </label>
                 </div>
                 <div id="clickSlidersTips" data-i18n="clickslidertips" class="toggle-description wide100p editable-slider-notification">
@@ -423,7 +423,7 @@
                                         </span>
                                     </div>
                                 </div>
-                                <div class="range-block" data-source="openai,claude,windowai,openrouter,ai21,scale,makersuite,mistralai,custom,cohere,perplexity,groq">
+                                <div class="range-block" data-source="openai,claude,windowai,openrouter,ai21,scale,makersuite,mistralai,custom,cohere,perplexity,groq,01ai">
                                     <div class="range-block-title" data-i18n="Temperature">
                                         Temperature
                                     </div>
@@ -488,7 +488,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div data-newbie-hidden class="range-block" data-source="openai,claude,openrouter,ai21,scale,makersuite,mistralai,custom,cohere,perplexity,groq">
+                                <div data-newbie-hidden class="range-block" data-source="openai,claude,openrouter,ai21,scale,makersuite,mistralai,custom,cohere,perplexity,groq,01ai">
                                     <div class="range-block-title" data-i18n="Top P">
                                         Top P
                                     </div>
@@ -1141,7 +1141,7 @@
                                         <div class="fa-solid fa-circle-info opacity50p" title="Customize displayed samplers or add custom samplers." data-i18n="[title]Customize displayed samplers or add custom samplers."></div>
                                     </small>
                                 </div>
-                                <div data-newbie-hidden data-tg-type="mancer, vllm, aphrodite, tabby" class="flex-container flexFlowColumn alignitemscenter flexBasis100p flexGrow flexShrink gap0">
+                                <div data-newbie-hidden data-tg-type="mancer, vllm, aphrodite, tabby, infermaticai" class="flex-container flexFlowColumn alignitemscenter flexBasis100p flexGrow flexShrink gap0">
                                     <small data-i18n="Multiple swipes per generation">Multiple swipes per generation</small>
                                     <input type="number" id="n_textgenerationwebui" class="text_pole textAlignCenter" min="1" value="1" step="1" />
                                 </div>
@@ -1263,7 +1263,7 @@
                                         <input class="neo-range-slider" type="range" id="skew_textgenerationwebui" name="volume" min="-5" max="5" step="0.01" />
                                         <input class="neo-range-input" type="number" min="-5" max="5" step="0.01" data-for="skew_textgenerationwebui" id="skew_counter_textgenerationwebui">
                                     </div>
-                                    <div data-newbie-hidden data-tg-type="mancer, ooba, tabby, dreamgen" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
+                                    <div data-newbie-hidden data-tg-type="mancer, ooba, tabby, dreamgen, infermaticai" class="alignitemscenter flex-container flexFlowColumn flexBasis30p flexGrow flexShrink gap0">
                                         <small data-i18n="Min Length">Min Length</small>
                                         <input class="neo-range-slider" type="range" id="min_length_textgenerationwebui" name="volume" min="0" max="2000" step="1" />
                                         <input class="neo-range-input" type="number" min="0" max="2000" step="1" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui">
@@ -1446,7 +1446,7 @@
                                                     <div class="fa-solid fa-circle-info opacity50p " data-i18n="[title]Ban the eos_token. This forces the model to never end the generation prematurely" title="Ban the eos_token. This forces the model to never end the generation prematurely."></div>
                                                 </label>
                                             </label>
-                                            <label data-tg-type="vllm, aphrodite" class="checkbox_label" for="ignore_eos_token_textgenerationwebui">
+                                            <label data-tg-type="vllm, aphrodite, infermaticai" class="checkbox_label" for="ignore_eos_token_textgenerationwebui">
                                                 <input type="checkbox" id="ignore_eos_token_textgenerationwebui" />
                                                 <small data-i18n="Ignore EOS Token">Ignore EOS Token
                                                     <div class="fa-solid fa-circle-info opacity50p " data-i18n="[title]Ignore the EOS Token even if it generates." title="Ignore the EOS Token even if it generates."></div>
@@ -1471,13 +1471,13 @@
                                                 </label>
                                             </label>
 
-                                            <label data-tg-type="vllm, aphrodite" class="checkbox_label" for="spaces_between_special_tokens_textgenerationwebui">
+                                            <label data-tg-type="vllm, aphrodite, infermaticai" class="checkbox_label" for="spaces_between_special_tokens_textgenerationwebui">
                                                 <input type="checkbox" id="spaces_between_special_tokens_textgenerationwebui" />
                                                 <small data-i18n="Spaces Between Special Tokens">Spaces Between Special Tokens</small>
                                             </label>
                                         </div>
                                     </div>
-                                    <div data-tg-type="mancer, ooba, koboldcpp, vllm, aphrodite, llamacpp, ollama" data-newbie-hidden class="flex-container flexFlowColumn alignitemscenter flexBasis48p flexGrow flexShrink gap0">
+                                    <div data-tg-type="mancer, ooba, koboldcpp, vllm, aphrodite, llamacpp, ollama, infermaticai, huggingface" data-newbie-hidden class="flex-container flexFlowColumn alignitemscenter flexBasis48p flexGrow flexShrink gap0">
                                         <small data-i18n="Seed" class="textAlignCenter">Seed</small>
                                         <input type="number" id="seed_textgenerationwebui" class="text_pole textAlignCenter" min="-1" value="-1" maxlength="100" />
                                     </div>
@@ -1753,8 +1753,8 @@
                                             <input id="openai_function_calling" type="checkbox" />
                                             <span data-i18n="Enable function calling">Enable function calling</span>
                                             <div class="flexBasis100p toggle-description justifyLeft">
-                                                Allows using <a href="https://platform.openai.com/docs/guides/function-calling" target="_blank">function tools</a>.
+                                                <span data-i18n="enable_functions_desc_1">Allows using </span><a href="https://platform.openai.com/docs/guides/function-calling" target="_blank" data-i18n="enable_functions_desc_2">function tools</a>.
-                                                Can be utilized by various extensions to provide additional functionality.
+                                                <span data-i18n="enable_functions_desc_3">Can be utilized by various extensions to provide additional functionality.</span>
                                             </div>
                                         </label>
                                     </div>
@@ -1863,7 +1863,7 @@
                                             <div id="openai_logit_bias_new_entry" class="menu_button wide100p flex-container justifyCenter" data-i18n="Add bias entry">
                                                 Add bias entry
                                             </div>
-                                            <div class="openai_logit_bias_list"></div>
+                                            <div class="openai_logit_bias_list" no_items_text="No items" data-i18n="[no_items_text]openai_logit_bias_no_items"></div>
                                             <div class="m-t-1">
                                                 <small>
                                                     <i class="fa-solid fa-lightbulb"></i>
@@ -1887,7 +1887,7 @@
         </div>
         <div id="sys-settings-button" class="drawer">
             <div class="drawer-toggle drawer-header">
-                <div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation  closedIcon" title="API Connections" data-i18n="[title]API Connections"></div>
+                <div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation  closedIcon" title="API Connections" data-i18n="[title]API Connections;[no_connection_text]api_no_connection" no_connection_text="No connection..."></div>
             </div>
             <div id="rm_api_block" class="drawer-content closedDrawer">
                 <h3 class="margin0" id="title_api">API</h3>
@@ -2029,6 +2029,7 @@
                                     <option value="ooba" data-i18n="Default (completions compatible)">Default [OpenAI /completions compatible: oobabooga, LM Studio, etc.]</option>
                                     <option value="aphrodite">Aphrodite</option>
                                     <option value="dreamgen">DreamGen</option>
+                                    <option value="huggingface">HuggingFace (Inference Endpoint)</option>
                                     <option value="infermaticai">InfermaticAI</option>
                                     <option value="koboldcpp">KoboldCpp</option>
                                     <option value="llamacpp">llama.cpp</option>
@@ -2245,6 +2246,22 @@
                                     </select>
                                 </div>
                             </div>
+                            <div data-tg-type="huggingface">
+                                <h4 data-i18n="HuggingFace Token">HuggingFace Token</h4>
+                                <div class="flex-container">
+                                    <input id="api_key_huggingface" name="api_key_huggingface" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
+                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_huggingface">
+                                    </div>
+                                </div>
+                                <div data-for="api_key_huggingface" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
+                                    For privacy reasons, your API key will be hidden after you reload the page.
+                                </div>
+                                <div class="flex1">
+                                    <h4 data-i18n="Endpoint URL">Endpoint URL</h4>
+                                    <small data-i18n="Example: https://****.endpoints.huggingface.cloud">Example: https://****.endpoints.huggingface.cloud</small>
+                                    <input id="huggingface_api_url_text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="huggingface">
+                                </div>
+                            </div>
 
                             <div data-tg-type="aphrodite">
                                 <div class="flex-container flexFlowColumn">
@@ -2366,7 +2383,7 @@
                                 </div>
                             </div>
                             <div class="flex-container">
-                                <div id="api_button_textgenerationwebui" class="api_button menu_button" type="submit" data-i18n="Connect" data-server-connect="ooba_blocking,vllm,aphrodite,tabby,koboldcpp,ollama,llamacpp">Connect</div>
+                                <div id="api_button_textgenerationwebui" class="api_button menu_button" type="submit" data-i18n="Connect" data-server-connect="ooba_blocking,vllm,aphrodite,tabby,koboldcpp,ollama,llamacpp,huggingface">Connect</div>
                                 <div data-tg-type="openrouter" class="menu_button menu_button_icon openrouter_authorize" title="Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai" data-i18n="Authorize;[title]Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai">Authorize</div>
                                 <div class="api_loading menu_button" data-i18n="Cancel">Cancel</div>
                             </div>
@@ -2391,9 +2408,10 @@
                         <select id="chat_completion_source">
                             <optgroup>
                                 <option value="openai">OpenAI</option>
-                                <option value="custom">Custom (OpenAI-compatible)</option>
+                                <option value="custom" data-i18n="Custom (OpenAI-compatible)">Custom (OpenAI-compatible)</option>
                             </optgroup>
                             <optgroup>
+                                <option value="01ai">01.AI (Yi)</option>
                                 <option value="ai21">AI21</option>
                                 <option value="claude">Claude</option>
                                 <option value="cohere">Cohere</option>
@@ -2585,6 +2603,7 @@
                                 <h4 data-i18n="Claude Model">Claude Model</h4>
                                 <select id="model_claude_select">
                                     <optgroup label="Versions">
+                                        <option value="claude-3-5-sonnet-20240620">claude-3-5-sonnet-20240620</option>
                                         <option value="claude-3-opus-20240229">claude-3-opus-20240229</option>
                                         <option value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</option>
                                         <option value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
@@ -2890,16 +2909,16 @@
                         <form id="custom_form" data-source="custom">
                             <h4 data-i18n="Custom Endpoint (Base URL)">Custom Endpoint (Base URL)</h4>
                             <div class="flex-container">
-                                <input id="custom_api_url_text" class="text_pole wide100p" maxlength="5000" value="" autocomplete="off" placeholder="Example: http://localhost:1234/v1">
+                                <input id="custom_api_url_text" class="text_pole wide100p" maxlength="5000" value="" autocomplete="off" data-i18n="[placeholder]Example: http://localhost:1234/v1" placeholder="Example: http://localhost:1234/v1">
                             </div>
                             <div>
                                 <small>
-                                    Doesn't work? Try adding <code>/v1</code> at the end of the URL!
+                                    <span data-i18n="Doesn't work? Try adding">Doesn't work? Try adding</span> <code>/v1</code> <span data-i18n="at the end of the URL!">at the end of the URL!</span>
                                 </small>
                             </div>
                             <h4>
                                 <span data-i18n="Custom API Key">Custom API Key</span>
-                                <small>(Optional)</small>
+                                <small data-i18n="(Optional)">(Optional)</small>
                             </h4>
                             <div class="flex-container">
                                 <input id="api_key_custom" name="api_key_custom" class="text_pole flex1" maxlength="5000" value="" type="text" autocomplete="off">
@@ -2908,24 +2927,42 @@
                             <div data-for="api_key_custom" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
                                 For privacy reasons, your API key will be hidden after you reload the page.
                             </div>
-                            <h4>Enter a Model ID</h4>
+                            <h4 data-i18n="Enter a Model ID">Enter a Model ID</h4>
                             <div class="flex-container">
-                                <input id="custom_model_id" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" placeholder="Example: gpt-3.5-turbo">
+                                <input list="model_custom_select_fill" id="custom_model_id" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-i18n="[placeholder]Example: gpt-3.5-turbo" placeholder="Example: gpt-3.5-turbo">
+                                <datalist id="model_custom_select_fill" class="text_pole model_custom_select"></datalist>
                             </div>
                             <h4 data-i18n="Available Models">Available Models</h4>
                             <div class="flex-container">
-                                <select id="model_custom_select" class="text_pole"></select>
+                                <select id="model_custom_select" class="text_pole model_custom_select"></select>
                             </div>
                             <h4 data-i18n="Prompt Post-Processing">Prompt Post-Processing</h4>
                             <select id="custom_prompt_post_processing" class="text_pole" title="Applies additional processing to the prompt before sending it to the API." data-i18n="[title]Applies additional processing to the prompt before sending it to the API.">
-                                <option value="">None</option>
+                                <option data-i18n="prompt_post_processing_none" value="">None</option>
                                 <option value="claude">Claude</option>
                             </select>
                         </form>
+                        <div id="01ai_form" data-source="01ai">
+                            <h4>
+                                <a data-i18n="01.AI API Key" href="https://platform.01.ai/" target="_blank" rel="noopener noreferrer">
+                                    01.AI API Key
+                                </a>
+                            </h4>
+                            <div class="flex-container">
+                                <input id="api_key_01ai" name="api_key_01ai" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
+                                <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_01ai"></div>
+                            </div>
+                            <div data-for="api_key_01ai" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
+                                For privacy reasons, your API key will be hidden after you reload the page.
+                            </div>
+                            <h4 data-i18n="01.AI Model">01.AI Model</h4>
+                            <select id="model_01ai_select">
+                            </select>
+                        </div>
                         <div class="flex-container flex">
                             <div id="api_button_openai" class="api_button menu_button menu_button_icon" type="submit" data-i18n="Connect">Connect</div>
                             <div class="api_loading menu_button" data-i18n="Cancel">Cancel</div>
-                            <div data-source="custom" id="customize_additional_parameters" class="menu_button menu_button_icon">Additional Parameters</div>
+                            <div data-source="custom" id="customize_additional_parameters" class="menu_button menu_button_icon" data-i18n="Additional Parameters">Additional Parameters</div>
                             <div data-source="openrouter" class="menu_button menu_button_icon openrouter_authorize" title="Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai" data-i18n="Authorize;[title]Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai">Authorize</div>
                             <div id="test_api_button" class="menu_button menu_button_icon" title="Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!" data-i18n="[title]Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!"><span data-i18n="Test Message">Test Message</span></div>
                         </div>
@@ -3781,95 +3818,6 @@
                                     <input class="neo-range-slider" type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
                                     <input class="neo-range-input" type="number" min="0" max="5" step="1" data-for="shadow_width" id="shadow_width_counter">
                                 </div>
-
-
-
-                                <!--                                 <div data-newbie-hidden class="range-block">
-                                    <label for="compact_input_area" class="range-block-title">
-                                        <span data-i18n="Chat Width (PC)">
-                                            Chat Width
-                                        </span>
-                                        <i class="fa-solid fa-desktop"></i>
-                                    </label>
-                                    <div class="range-block-range-and-counter">
-                                        <div class="range-block-range">
-                                            <input id="chat_width_slider" class="wide100p" type="range" min="25" max="100" step="1" value="50">
-                                        </div>
-                                        <div class="range-block-counter">
-                                            <input type="number" min="25" max="100" step="1" value="50" data-for="chat_width_slider" id="chat_width_slider_counter">
-                                        </div>
-                                    </div>
-                                </div> -->
-
-                                <!--                                 <div id="font-scale-block" class="range-block">
-                                    <div class="range-block-title" data-i18n="Font Scale">
-                                        Font Scale
-                                    </div>
-                                    <div class="range-block-range-and-counter">
-                                        <div class="range-block-range">
-                                            <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.01">
-                                        </div>
-                                        <div class="range-block-counter">
-                                            <input type="number" min="0.8" max="1.2" step="0.01" data-for="font_scale" id="font_scale_counter">
-                                        </div>
-                                    </div>
-                                </div> -->
-                                <!--                                 <div id="blur-strength-block" class="range-block">
-                                    <div class="range-block-title" data-i18n="Blur Strength">
-                                        Blur Strength
-                                    </div>
-                                    <div class="range-block-range-and-counter">
-                                        <div class="range-block-range">
-                                            <input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
-                                        </div>
-                                        <div class="range-block-counter">
-                                            <input type="number" min="0" max="30" step="1" data-for="blur_strength" id="blur_strength_counter">
-                                        </div>
-                                    </div>
-                                </div> -->
-                                <!--                                 <div id="shadow-width-block" class="range-block">
-                                    <div class="range-block-title" data-i18n="Text Shadow Width">
-                                        Text Shadow Width
-                                    </div>
-                                    <div class="range-block-range-and-counter">
-                                        <div class="range-block-range">
-                                            <input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
-                                        </div>
-                                        <div class="range-block-counter">
-                                            <input type="number" min="0" max="5" step="1" data-for="shadow_width" id="shadow_width_counter">
-                                        </div>
-                                    </div>
-                                </div> -->
-                                <!--                                 <div id="chat-truncation-block" class="range-block">
-                                    <label for="compact_input_area" class="range-block-title">
-                                        <span data-i18n="Chat Truncation">
-                                            Chat Truncation
-                                        </span>
-                                        <small data-i18n="(0 = unlimited)">(0 = unlimited)</small>
-                                    </label>
-                                    <div class="range-block-range-and-counter">
-                                        <div class="range-block-range">
-                                            <input type="range" id="chat_truncation" name="chat_truncation" min="0" max="1000" step="25">
-                                        </div>
-                                        <div class="range-block-counter">
-                                            <input type="number" min="0" max="1000" step="1" data-for="chat_truncation" id="chat_truncation_counter">
-                                        </div>
-                                    </div>
-                                </div> -->
-                                <!--                                 <div id="streaming-fps" class="range-block">
-                                    <div class="range-block-title" data-i18n="Streaming FPS">
-                                        Streaming FPS
-                                    </div>
-                                    <div class="range-block-range-and-counter">
-                                        <div class="range-block-range">
-                                            <input type="range" id="streaming_fps" name="streaming_fps" min="5" max="100" step="5">
-                                        </div>
-                                        <div class="range-block-counter">
-                                            <input type="number" min="5" max="100" step="1" data-for="streaming_fps" id="streaming_fps_counter">
-                                        </div>
-                                    </div>
-                                </div> -->
-
                             </div>
                             <hr>
                             <div name="themeToggles">
@@ -3956,13 +3904,22 @@
                             <h4 data-i18n="Character Handling">
                                 Character Handling
                             </h4>
-                            <div title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list.">
+                            <div class="flex-container alignitemscenter" title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list.">
                                 <label for="aux_field"><small data-i18n="Char List Subheader">Char List Subheader</small></label>
-                                <select id="aux_field">
+                                <select id="aux_field" class="widthNatural flex1 margin0">
                                     <option data-i18n="Character Version" value="character_version">Character Version</option>
                                     <option data-i18n="Created by" value="creator">Created by</option>
                                 </select>
                             </div>
+                            <div data-newbie-hidden class="flex-container alignitemscenter" title="Defines on importing cards which action should be chosen for importing its listed tags. 'Ask' will always display the dialog." data-i18n="[title]Defines on importing cards which action should be chosen for importing its listed tags. 'Ask' will always display the dialog.">
+                                <label for="tag_import_setting"><small data-i18n="Import Card Tags">Import Card Tags</small></label>
+                                <select id="tag_import_setting" class="widthNatural flex1 margin0">
+                                    <option data-i18n="Ask" value="1">Ask</option>
+                                    <option data-i18n="None" value="2">None</option>
+                                    <option data-i18n="All" value="3">All</option>
+                                    <option data-i18n="Existing" value="4">Existing</option>
+                                </select>
+                            </div>
                             <label data-newbie-hidden class="checkbox_label" for="fuzzy_search_checkbox" title="Use fuzzy matching, and search characters in the list by all data fields, not just by a name substring." data-i18n="[title]Use fuzzy matching, and search characters in the list by all data fields, not just by a name substring">
                                 <input id="fuzzy_search_checkbox" type="checkbox" />
                                 <small data-i18n="Advanced Character Search">Advanced Character Search</small>
@@ -3983,10 +3940,6 @@
                                 <input id="show_card_avatar_urls" type="checkbox" />
                                 <small data-i18n="Show avatar filenames">Show avatar filenames</small>
                             </label>
-                            <label data-newbie-hidden class="checkbox_label" for="import_card_tags" title="Prompt to import embedded card tags on character import. Otherwise embedded tags are ignored." data-i18n="[title]Prompt to import embedded card tags on character import. Otherwise embedded tags are ignored">
-                                <input id="import_card_tags" type="checkbox" />
-                                <small data-i18n="Import Card Tags">Import Card Tags</small>
-                            </label>
                             <label data-newbie-hidden class="checkbox_label" for="spoiler_free_mode" title="Hide character definitions from the editor panel behind a spoiler button." data-i18n="[title]Hide character definitions from the editor panel behind a spoiler button">
                                 <input id="spoiler_free_mode" type="checkbox" />
                                 <small data-i18n="Spoiler Free Mode">Spoiler Free Mode</small>
@@ -4280,7 +4233,7 @@
                             <div name="STscriptToggles">
                                 <h4 data-i18n="STscript Settings">STscript Settings</h4>
                                 <div title="Sets default flags for the STscript parser." data-i18n="[title]Sets default flags for the STscript parser.">
-                                    <label data-i18n="Parser Flags"><small>Parser Flags</small></label>
+                                    <label><small data-i18n="Parser Flags">Parser Flags</small></label>
                                     <label class="checkbox_label" title="Switch to stricter escaping, allowing all delimiting characters to be escaped with a backslash, and backslashes to be escaped as well." data-i18n="[title]Switch to stricter escaping, allowing all delimiting characters to be escaped with a backslash, and backslashes to be escaped as well.">
                                         <input id="stscript_parser_flag_strict_escaping" type="checkbox" />
                                         <span data-i18n="STRICT_ESCAPING"><small>STRICT_ESCAPING</small></span>
@@ -4361,8 +4314,33 @@
                         </div>
                     </div>
                     <div id="extensions_settings" class="flex1 wide50p">
+                        <div id="assets_container" class="extension_container"></div>
+                        <div id="expressions_container" class="extension_container"></div>
+                        <div id="sd_container" class="extension_container"></div>
+                        <div id="tts_container" class="extension_container"></div>
+                        <div id="rvc_container" class="extension_container"></div>
+                        <div id="stt_container" class="extension_container"></div>
+                        <div id="audio_container" class="extension_container"></div>
+                        <div id="silence_container" class="extension_container"></div>
+                        <div id="objective_container" class="extension_container"></div>
+                        <div id="blip_container" class="extension_container"></div>
+                        <div id="live2d_container" class="extension_container"></div>
+                        <div id="vrm_container" class="extension_container"></div>
+                        <div id="timelines_container" class="extension_container"></div>
                     </div>
                     <div id="extensions_settings2" class="flex1 wide50p">
+                        <div id="websearch_container" class="extension_container"></div>
+                        <div id="emulatorjs_container" class="extension_container"></div>
+                        <div id="qr_container" class="extension_container"></div>
+                        <div id="translation_container" class="extension_container"></div>
+                        <div id="caption_container" class="extension_container"></div>
+                        <div id="idle_container" class="extension_container"></div>
+                        <div id="summarize_container" class="extension_container"></div>
+                        <div id="hypebot_container" class="extension_container"></div>
+                        <div id="regex_container" class="extension_container"></div>
+                        <div id="vectors_container" class="extension_container"></div>
+                        <div id="randomizer_container" class="extension_container"></div>
+                        <div id="chromadb_container" class="extension_container"></div>
                     </div>
                     <hr class="wide100p margin0">
                     <div class="alignitemscenter flex-container justifyCenter wide100p" style="justify-content: space-between;">
@@ -4509,14 +4487,14 @@
                         <div id="rm_button_panel_pin_div" class="alignitemsflexstart" title="Locked = Character Management panel will stay open" data-i18n="[title]Locked = Character Management panel will stay open">
                             <input type="checkbox" id="rm_button_panel_pin">
                             <label for="rm_button_panel_pin">
-                                <div class="fa-solid unchecked  fa-unlock" alt=""></div>
+                                <div class="fa-solid unchecked fa-unlock right_menu_button" alt=""></div>
-                                <div class="fa-solid checked  fa-lock" alt=""></div>
+                                <div class="fa-solid checked fa-lock right_menu_button" alt=""></div>
                             </label>
                         </div>
                         <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
                     </div>
                     <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
-                        <div class="hotswap avatars_inline flex-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
+                        <div class="hotswap avatars_inline flex-container scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
                     </div>
                 </div>
                 <hr>
@@ -4524,7 +4502,7 @@
                 <div id="rm_PinAndTabs">
                     <div id="right-nav-panel-tabs" class="">
                         <div id="rm_button_selected_ch">
-                            <h2></h2>
+                            <h2 class="interactable"></h2>
                         </div>
                         <div id="result_info" class="flex-container" style="display: none;">
                             <div id="result_info_text" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">
@@ -4748,7 +4726,7 @@
                                         <div class="flex1 flexGap5" title="Inserted before each part of the joined fields." data-i18n="[title]Inserted before each part of the joined fields.">
                                             <label for="rm_group_generation_mode_join_prefix" class="flexnowrap width100p whitespacenowrap">
                                                 <span data-i18n="Join Prefix">Join Prefix</span>
-                                                <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]When 'Join character cards' is selected, all respective fields of the characters are being joined together.&#13;This means that in the story string for example all character descriptions will be joined to one big text.&#13;If you want those fields to be separated, you can define a prefix or suffix here.&#13;&#13;This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)" title="When 'Join character cards' is selected, all respective fields of the characters are being joined together.&#13;This means that in the story string for example all character descriptions will be joined to one big text.&#13;If you want those fields to be separated, you can define a prefix or suffix here.&#13;&#13;This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)">
+                                                <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)" title="When 'Join character cards' is selected, all respective fields of the characters are being joined together.&#13;This means that in the story string for example all character descriptions will be joined to one big text.&#13;If you want those fields to be separated, you can define a prefix or suffix here.&#13;&#13;This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)">
                                                 </div>
                                             </label>
                                             <textarea id="rm_group_generation_mode_join_prefix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
@@ -4756,7 +4734,7 @@
                                         <div class="flex1 flexGap5" title="Inserted after each part of the joined fields." data-i18n="[title]Inserted after each part of the joined fields.">
                                             <label for="rm_group_generation_mode_join_suffix" class="flexnowrap width100p whitespacenowrap">
                                                 <span data-i18n="Join Suffix">Join Suffix</span>
-                                                <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]When 'Join character cards' is selected, all respective fields of the characters are being joined together.&#13;This means that in the story string for example all character descriptions will be joined to one big text.&#13;If you want those fields to be separated, you can define a prefix or suffix here.&#13;&#13;This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)" title="When 'Join character cards' is selected, all respective fields of the characters are being joined together.&#13;This means that in the story string for example all character descriptions will be joined to one big text.&#13;If you want those fields to be separated, you can define a prefix or suffix here.&#13;&#13;This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)">
+                                                <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)" title="When 'Join character cards' is selected, all respective fields of the characters are being joined together.&#13;This means that in the story string for example all character descriptions will be joined to one big text.&#13;If you want those fields to be separated, you can define a prefix or suffix here.&#13;&#13;This value supports normal macros and will also replace {{char}} with the relevant char's name and &lt;FIELDNAME&gt; with the name of the part (e.g.: description, personality, scenario, etc.)">
                                                 </div>
                                             </label>
                                             <textarea id="rm_group_generation_mode_join_suffix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
@@ -4875,21 +4853,24 @@
         </div>
     </div>
     <!-- various fullscreen popups -->
-    <template id="shadow_popup_template" data-i18n="[popup_text_save]popup_text_save;[popup_text_yes]popup_text_yes;[popup_text_no]popup_text_no;[popup_text_cancel]popup_text_cancel;[popup_text_import]popup_text_import" popup_text_save="Save" popup_text_yes="Yes" popup_text_no="No" popup_text_cancel="Cancel" popup_text_import="Import"> <!-- localization data holder for popups -->
+    <template id="popup_template" data-i18n="[popup-button-save]popup-button-save;[popup-button-yes]popup-button-yes;[popup-button-no]popup-button-no;[popup-button-cancel]popup-button-cancel;[popup-button-import]popup-button-import;[popup-button-crop]popup-button-crop" popup-button-save="Save" popup-button-yes="Yes" popup-button-no="No" popup-button-cancel="Cancel" popup-button-import="Import" popup-button-crop="Crop"> <!-- localization data holder for popups -->
-        <div class="shadow_popup">
+        <dialog class="popup">
-            <div class="dialogue_popup">
+            <div class="popup-body">
-                <div class="dialogue_popup_holder">
+                <div class="popup-content">
-                    <div class="dialogue_popup_text">
+                    <h3 class="popup-header">text</h3>
-                        <h3 class="margin0">text</h3>
+                </div>
-                    </div>
+                <div class="popup-crop-wrap">
-                    <textarea class="dialogue_popup_input text_pole" rows="1"></textarea>
+                    <img class="popup-crop-image" src="">
-                    <div class="dialogue_popup_controls">
+                </div>
-                        <div class="dialogue_popup_ok menu_button" data-i18n="Delete">Delete</div>
+                <textarea class="popup-input text_pole result-control" rows="1" data-result="1" data-result-event="submit"></textarea>
-                        <div class="dialogue_popup_cancel menu_button" data-i18n="Cancel">Cancel</div>
+                <div class="popup-inputs"></div>
-                    </div>
+                <div class="popup-controls">
+                    <div class="popup-button-ok menu_button result-control" data-result="1" data-i18n="Delete">Delete</div>
+                    <div class="popup-button-cancel menu_button result-control" data-result="0" data-i18n="Cancel">Cancel</div>
                 </div>
             </div>
-        </div>
+            <div class="popup-button-close right_menu_button fa-solid fa-circle-xmark" data-result="0" title="Close popup" data-i18n="[title]Close popup"></div>
+        </dialog>
     </template>
     <div id="shadow_popup">
         <div id="dialogue_popup">
@@ -4899,15 +4880,15 @@
                 </div>
                 <textarea id="dialogue_popup_input" class="text_pole" rows="1"></textarea>
                 <div id="dialogue_popup_controls">
-                    <div id="dialogue_popup_ok" class="menu_button" data-i18n="Delete">Delete</div>
+                    <div id="dialogue_popup_ok" class="menu_button" data-i18n="Delete" data-result="1">Delete</div>
-                    <div id="dialogue_popup_cancel" class="menu_button" data-i18n="Cancel">Cancel</div>
+                    <div id="dialogue_popup_cancel" class="menu_button" data-i18n="Cancel" data-result="0">Cancel</div>
                 </div>
             </div>
         </div>
     </div>
     <div id="character_popup" class="flex-container flexFlowColumn flexNoGap">
         <div id="character_popup_text">
-            <h3 id="character_popup_text_h3" class="margin0"></h3> <span data-i18n="Advanced Defininitions">- Advanced
+            <h3 id="character_popup-button-h3" class="margin0"></h3> <span data-i18n="Advanced Defininitions">- Advanced
                 Definitions</span>
         </div>
         <hr class="margin-bot-10px">
@@ -5226,8 +5207,8 @@
             <div title="Tag as folder" class="tag_as_folder fa-solid fa-folder-open right_menu_button" data-i18n="[title]Use tag as folder">
                 <span class="tag_folder_indicator"></span>
             </div>
-            <div class="tagColorPickerHolder"></div>
+            <div class="tag_view_color_picker" data-value="color"></div>
-            <div class="tagColorPicker2Holder"></div>
+            <div class="tag_view_color_picker" data-value="color2"></div>
             <div class="tag_view_name" contenteditable="true"></div>
             <div class="tag_view_counter"><span class="tag_view_counter_value"></span>&nbsp;entries</div>
             <div title="Delete tag" class="tag_delete fa-solid fa-trash-can right_menu_button" data-i18n="[title]Delete tag"></div>
@@ -5424,6 +5405,79 @@
                             <div class="world_entry_thin_controls commentContainer">
                             </div>
                         </div>
+                        <div class="flex-container wide100p flexGap10">
+                            <div class="flex4 flex-container flexFlowColumn flexNoGap">
+                                <div class="flex-container justifySpaceBetween">
+                                    <small for="group">
+                                        <span data-i18n="Inclusion Group">Inclusion Group</span>
+                                        <a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/#inclusion-group" class="notes-link" target="_blank" title="Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.&#13;Supports multiple comma-separated groups.&#13;&#13;Documentation: World Info - Inclusion Group" data-i18n="[title]Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group">
+                                            <span class="fa-solid fa-circle-question note-link-span"></span>
+                                        </a>
+                                    </small>
+                                    <label class="checkbox_label flexNoGap margin-r5" for="groupOverride">
+                                        <input type="checkbox" name="groupOverride" />
+                                        <span>
+                                            <small title="Prioritize this entry: When checked, this entry is prioritized out of all selections.&#13;If multiple are prioritized, the one with the highest 'Order' is chosen.&#13;" data-i18n="[title]Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.">
+                                                <span data-i18n="Prioritize">Prioritize</span>
+                                                <div class="fa-solid fa-circle-info opacity50p"></div>
+                                            </small>
+                                        </span>
+                                    </label>
+                                </div>
+                                <div class="range-block-range">
+                                    <input type="text" class="text_pole margin0" name="group" rows="1" data-i18n="[placeholder]Only one entry with the same label will be activated" placeholder="Only one entry with the same label will be activated">
+                                </div>
+                            </div>
+                            <div class="flex2 flex-container flexFlowColumn flexNoGap" data-i18n="[title]A relative likelihood of entry activation within the group" title="A relative likelihood of entry activation within the group">
+                                <div class="flex-container justifySpaceBetween marginBot5">
+                                    <small for="groupWeight" data-i18n="Group Weight">
+                                        Group Weight
+                                    </small>
+                                </div>
+                                <div class="range-block-range">
+                                    <input type="number" class="text_pole margin0" name="groupWeight" rows="1" placeholder="100" min="1" max="999999">
+                                </div>
+                            </div>
+                            <div class="flex2 flex-container flexFlowColumn flexNoGap" data-i18n="[title]Sticky entries will stay active for N messages after being triggered." title="Sticky entries will stay active for N messages after being triggered.">
+                                <div class="flex-container justifySpaceBetween marginBot5">
+                                    <small class="flex-container alignItemsBaseline" for="sticky" data-i18n="Sticky">
+                                        <span data-i18n="Sticky">
+                                            Sticky
+                                        </span>
+                                        <i class="fa-solid fa-comments fa-xs"></i>
+                                    </small>
+                                </div>
+                                <div class="range-block-range">
+                                    <input class="text_pole margin0" name="sticky" type="number" placeholder="Non-sticky" min="0" max="999999">
+                                </div>
+                            </div>
+                            <div class="flex2 flex-container flexFlowColumn flexNoGap" data-i18n="[title]Entries with a cooldown can't be activated N messages after being triggered." title="Entries with a cooldown can't be activated N messages after being triggered.">
+                                <div class="flex-container justifySpaceBetween marginBot5">
+                                    <small class="flex-container alignItemsBaseline" for="cooldown" data-i18n="Cooldown">
+                                        <span data-i18n="Cooldown">
+                                            Cooldown
+                                        </span>
+                                        <i class="fa-solid fa-comments fa-xs"></i>
+                                    </small>
+                                </div>
+                                <div class="range-block-range">
+                                    <input class="text_pole margin0" name="cooldown" type="number" placeholder="No cooldown" min="0" max="999999">
+                                </div>
+                            </div>
+                            <div class="flex2 flex-container flexFlowColumn flexNoGap" data-i18n="[title]Entries with a delay can't be activated until there are N messages present in the chat." title="Entries with a delay can't be activated until there are N messages present in the chat.">
+                                <div class="flex-container justifySpaceBetween marginBot5">
+                                    <small class="flex-container alignItemsBaseline" for="delay" data-i18n="Delay">
+                                        <span data-i18n="Delay">
+                                            Delay
+                                        </span>
+                                        <i class="fa-solid fa-comments fa-xs"></i>
+                                    </small>
+                                </div>
+                                <div class="range-block-range">
+                                    <input class="text_pole margin0" name="delay" type="number" placeholder="No delay" min="0" max="999999">
+                                </div>
+                            </div>
+                        </div>
                         <div class="flex-container wide100p flexGap10">
                             <div class="flex4 flex-container flexFlowColumn flexNoGap">
                                 <div class="flex-container justifySpaceBetween">
@@ -5445,38 +5499,6 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="flex3 flex-container flexFlowColumn flexNoGap">
-                                <div class="flex-container justifySpaceBetween">
-                                    <small for="group">
-                                        <span data-i18n="Inclusion Group">Inclusion Group</span>
-                                        <a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/#inclusion-group" class="notes-link" target="_blank" title="Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.&#13;Supports multiple comma-separated groups.&#13;&#13;Documentation: World Info - Inclusion Group" data-i18n="[title]Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.&#13;&#13;Documentation: World Info - Inclusion Group">
-                                            <span class="fa-solid fa-circle-question note-link-span"></span>
-                                        </a>
-                                    </small>
-                                    <label class="checkbox_label flexNoGap margin-r5" for="groupOverride">
-                                        <input type="checkbox" name="groupOverride" />
-                                        <span>
-                                            <small data-i18n="Prioritize Inclusion" title="Prioritize this entry: When checked, this entry is prioritized out of all selections.&#13;If multiple are prioritized, the one with the highest 'Order' is chosen.&#13;" data-i18n="[title]Prioritize this entry: When checked, this entry is prioritized out of all selections.&#13;If multiple are prioritized, the one with the highest 'Order' is chosen.">
-                                                Prioritize Inclusion
-                                                <div class="fa-solid fa-circle-info opacity50p"></div>
-                                            </small>
-                                        </span>
-                                    </label>
-                                </div>
-                                <div class="range-block-range">
-                                    <input type="text" class="text_pole margin0" name="group" rows="1" data-i18n="[placeholder]Only one entry with the same label will be activated" placeholder="Only one entry with the same label will be activated">
-                                </div>
-                            </div>
-                            <div class="flex1 flex-container flexFlowColumn flexNoGap" data-i18n="[title]A relative likelihood of entry activation within the group" title="A relative likelihood of entry activation within the group">
-                                <div class="flex-container justifySpaceBetween marginBot5">
-                                    <small for="groupWeight" data-i18n="Group Weight">
-                                        Group Weight
-                                    </small>
-                                </div>
-                                <div class="range-block-range">
-                                    <input type="number" class="text_pole margin0" name="groupWeight" rows="1" placeholder="100" min="1" max="999999">
-                                </div>
-                            </div>
                         </div>
                         <div name="WIEntryBottomControls" class="flex-container flex1 justifySpaceBetween world_entry_form_horizontal">
                             <div class="flex-container flexFlowColumn flexNoGap  wi-enter-footer-text  ">
@@ -5500,7 +5522,7 @@
         </div>
     </div>
     <div id="character_template" class="template_element">
-        <div class="character_select flex-container wide100p alignitemsflexstart" chid="" id="">
+        <div class="character_select entity_block flex-container wide100p alignitemsflexstart" chid="" id="">
             <div class="avatar" title="">
                 <img src="">
             </div>
@@ -5532,7 +5554,6 @@
             </form>
         </div>
     </div>
-    </div>
     <div id="logit_bias_template" class="template_element">
         <div class="logit_bias_form">
             <input class="logit_bias_text text_pole" data-i18n="[placeholder]Type here..." placeholder="type here..." />
@@ -5650,21 +5671,21 @@
                         </div>
                     </div>
                     <div class="mes_buttons">
-                        <div title="Message Actions" class="extraMesButtonsHint fa-solid fa-ellipsis" data-i18n="[title]Message Actions"></div>
+                        <div title="Message Actions" class="mes_button extraMesButtonsHint fa-solid fa-ellipsis" data-i18n="[title]Message Actions"></div>
                         <div class="extraMesButtons">
-                            <div title="Translate message" class="mes_translate fa-solid fa-language" data-i18n="[title]Translate message"></div>
+                            <div title="Translate message" class="mes_button mes_translate fa-solid fa-language" data-i18n="[title]Translate message"></div>
-                            <div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush" data-i18n="[title]Generate Image"></div>
+                            <div title="Generate Image" class="mes_button sd_message_gen fa-solid fa-paintbrush" data-i18n="[title]Generate Image"></div>
-                            <div title="Narrate" class="mes_narrate fa-solid fa-bullhorn" data-i18n="[title]Narrate"></div>
+                            <div title="Narrate" class="mes_button mes_narrate fa-solid fa-bullhorn" data-i18n="[title]Narrate"></div>
-                            <div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal " data-i18n="[title]Prompt" style="display: none;"></div>
+                            <div title="Prompt" class="mes_button mes_prompt fa-solid fa-square-poll-horizontal " data-i18n="[title]Prompt" style="display: none;"></div>
-                            <div title="Exclude message from prompts" class="mes_hide fa-solid fa-eye" data-i18n="[title]Exclude message from prompts"></div>
+                            <div title="Exclude message from prompts" class="mes_button mes_hide fa-solid fa-eye" data-i18n="[title]Exclude message from prompts"></div>
-                            <div title="Include message in prompts" class="mes_unhide fa-solid fa-eye-slash" data-i18n="[title]Include message in prompts"></div>
+                            <div title="Include message in prompts" class="mes_button mes_unhide fa-solid fa-eye-slash" data-i18n="[title]Include message in prompts"></div>
-                            <div title="Embed file or image" class="mes_embed fa-solid fa-paperclip" data-i18n="[title]Embed file or image"></div>
+                            <div title="Embed file or image" class="mes_button mes_embed fa-solid fa-paperclip" data-i18n="[title]Embed file or image"></div>
-                            <div title="Create checkpoint" class="mes_create_bookmark fa-regular fa-solid fa-flag-checkered" data-i18n="[title]Create checkpoint"></div>
+                            <div title="Create checkpoint" class="mes_button mes_create_bookmark fa-regular fa-solid fa-flag-checkered" data-i18n="[title]Create checkpoint"></div>
-                            <div title="Create branch" class="mes_create_branch fa-regular fa-code-branch" data-i18n="[title]Create Branch"></div>
+                            <div title="Create branch" class="mes_button mes_create_branch fa-regular fa-code-branch" data-i18n="[title]Create Branch"></div>
-                            <div title="Copy" class="mes_copy fa-solid fa-copy " data-i18n="[title]Copy"></div>
+                            <div title="Copy" class="mes_button mes_copy fa-solid fa-copy " data-i18n="[title]Copy"></div>
                         </div>
-                        <div title="Open checkpoint chat" class="mes_bookmark fa-solid fa-flag" data-i18n="[title]Open checkpoint chat"></div>
+                        <div title="Open checkpoint chat" class="mes_button mes_bookmark fa-solid fa-flag" data-i18n="[title]Open checkpoint chat"></div>
-                        <div title="Edit" class="mes_edit fa-solid fa-pencil " data-i18n="[title]Edit"></div>
+                        <div title="Edit" class="mes_button mes_edit fa-solid fa-pencil " data-i18n="[title]Edit"></div>
                     </div>
                     <div class="mes_edit_buttons">
                         <div class="mes_edit_done menu_button  fa-solid fa-check" title="Confirm" data-i18n="[title]Confirm"></div>
@@ -5802,7 +5823,7 @@
         </div>
     </div>
     <div id="group_list_template" class="template_element">
-        <div class="group_select flex-container wide100p alignitemsflexstart">
+        <div class="group_select entity_block flex-container wide100p alignitemsflexstart">
             <div class="avatar">
                 <img src="">
             </div>
@@ -5820,7 +5841,7 @@
         </div>
     </div>
     <div id="bogus_folder_template" class="template_element">
-        <div class="bogus_folder_select flex-container wide100p alignitemsflexstart">
+        <div class="bogus_folder_select entity_block flex-container wide100p alignitemsflexstart">
             <div class="avatar flex alignitemscenter textAlignCenter">
                 <i class="bogus_folder_icon fa-solid fa-xl"></i>
             </div>
@@ -5866,8 +5887,8 @@
             </small>
             <hr>
             <div class="alternate_greetings_list flexFlowColumn flex-container wide100p">
-                <strong class="alternate_grettings_hint margin-bot-10px" data-i18n="Alternate Greetings Hint">
+                <strong class="alternate_grettings_hint margin-bot-10px">
-                    Click the <i class="fa-solid fa-plus"></i> button to get started!
+                    <span data-i18n="alternate_greetings_hint_1">Click the</span> <i class="fa-solid fa-plus"></i> <span data-i18n="alternate_greetings_hint_2">button to get started!</span>
                 </strong>
             </div>
         </div>
@@ -5875,38 +5896,13 @@
     <div id="alternate_greeting_form_template" class="template_element">
         <div class="alternate_greeting">
             <div class="title_restorable">
-                <strong>Alternate Greeting #<span class="greeting_index"></span></strong>
+                <strong><span data-i18n="Alternate Greeting #">Alternate Greeting #</span><span class="greeting_index"></span></strong>
                 <div class="menu_button fa-solid fa-trash-alt delete_alternate_greeting"></div>
             </div>
             <textarea name="alternate_greetings" data-i18n="[placeholder](This will be the first message from the character that starts every chat)" placeholder="(This will be the first message from the character that starts every chat)" class="text_pole textarea_compact alternate_greeting_text" maxlength="50000" value="" autocomplete="off" rows="16"></textarea>
         </div>
     </div>
-    <div id="forbid_media_override_template" class="template_element">
+
-        <div class="forbid_media_override flex-container flexFlowColumn">
-            <h4 data-i18n="Forbid Media Override explanation" class="margin0">
-                Ability of the current character/group to use external media in chats.
-            </h4>
-            <small data-i18n="Forbid Media Override subtitle" class="marginBot5">
-                Media: images, videos, audio. External: not hosted on the local server.
-            </small>
-            <label class="checkbox_label" for="forbid_media_override_global">
-                <input type="radio" id="forbid_media_override_global" name="forbid_media_override" />
-                <span>
-                    <span data-i18n="Use global setting">Use global setting</span>
-                    <b class="forbid_media_global_state_forbidden">(forbidden)</b>
-                    <b class="forbid_media_global_state_allowed">(allowed)</b>
-                </span>
-            </label>
-            <label class="checkbox_label" for="forbid_media_override_forbidden">
-                <input type="radio" id="forbid_media_override_forbidden" name="forbid_media_override" />
-                <span data-i18n="Always forbidden">Always forbidden</span>
-            </label>
-            <label class="checkbox_label" for="forbid_media_override_allowed">
-                <input type="radio" id="forbid_media_override_allowed" name="forbid_media_override" />
-                <span data-i18n="Always allowed">Always allowed</span>
-            </label>
-        </div>
-    </div>
     <!-- chat and input bar -->
     <div id="typing_indicator_template" class="template_element">
         <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
@@ -6284,7 +6280,7 @@
                 </form>
                 <div id="nonQRFormItems">
                     <div id="leftSendForm" class="alignContentCenter">
-                        <div id="options_button" class="fa-solid fa-bars"></div>
+                        <div id="options_button" class="fa-solid fa-bars interactable"></div>
                     </div>
                     <textarea id="send_textarea" name="text" data-i18n="[no_connection_text]Not connected to API!;[connected_text]Type a message, or /? for help" placeholder="Not connected to API!" no_connection_text="Not connected to API!" connected_text="Type a message, or /? for help"></textarea>
                     <div id="rightSendForm" class="alignContentCenter">
@@ -6300,8 +6296,8 @@
                         <div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
                             <i class="fa-solid fa-circle-stop"></i>
                         </div>
-                        <div id="mes_continue" class="fa-fw fa-solid fa-arrow-right displayNone" title="Continue the last message" data-i18n="[title]Continue the last message"></div>
+                        <div id="mes_continue" class="fa-fw fa-solid fa-arrow-right interactable displayNone" title="Continue the last message" data-i18n="[title]Continue the last message"></div>
-                        <div id="send_but" class="fa-solid fa-paper-plane displayNone" title="Send a message" data-i18n="[title]Send a message"></div>
+                        <div id="send_but" class="fa-solid fa-paper-plane interactable displayNone" title="Send a message" data-i18n="[title]Send a message"></div>
                     </div>
                 </div>
             </div>
@@ -6398,9 +6394,6 @@
             </div>
         </div>
     </template>
-    <div id="rawPromptPopup" class="list-group">
-        <div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
-    </div>
     <div id="user_avatar_template" class="template_element">
         <div class="avatar-container">
             <div imgfile="" class="avatar">
@@ -6465,15 +6458,6 @@
     <script type="module" src="scripts/setting-search.js"></script>
     <script type="module" src="scripts/server-history.js"></script>
     <script type="module" src="script.js"></script>
-    <script>
-        // Configure toast library:
-        toastr.options.escapeHtml = true; // Prevent raw HTML inserts
-        toastr.options.timeOut = 4000; // How long the toast will display without user interaction
-        toastr.options.extendedTimeOut = 10000; // How long the toast will display after a user hovers over it
-        toastr.options.progressBar = true; // Visually indicate how long before a toast expires.
-        toastr.options.closeButton = true; // enable a close button
-        toastr.options.positionClass = "toast-top-center"; // Where to position the toast container
-    </script>
     <script>
         window.addEventListener('load', (event) => {
             const documentHeight = () => {

public/jsconfig.json

@@ -3,6 +3,7 @@
         "checkJs": true,
         "target": "ESNext",
         "module": "ESNext",
+        "moduleResolution": "node",
         "allowUmdGlobalAccess": true,
         "allowSyntheticDefaultImports": true
     },

public/locales/ar-sa.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "انضم إلى بطاقات الشخصيات (بما في ذلك البطاقات الصامتة)",
     "Inserted before each part of the joined fields.": "تم إدراجه قبل كل جزء من الحقول المرتبطة.",
     "Join Prefix": "الانضمام إلى البادئة",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "عند تحديد \"الانضمام إلى بطاقات الأحرف\"، يتم ضم كافة الحقول الخاصة بالأحرف معًا.\rوهذا يعني أنه في سلسلة القصة على سبيل المثال، سيتم دمج جميع أوصاف الشخصيات في نص واحد كبير.\rإذا كنت تريد فصل هذه الحقول، فيمكنك تحديد بادئة أو لاحقة هنا.\r\rتدعم هذه القيمة وحدات الماكرو العادية وستستبدل أيضًا {{char}} باسم الحرف ذي الصلة و<FIELDNAME> باسم الجزء (على سبيل المثال: الوصف، والشخصية، والسيناريو، وما إلى ذلك)",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "عند تحديد \"الانضمام إلى بطاقات الأحرف\"، يتم ضم كافة الحقول الخاصة بالأحرف معًا.\rوهذا يعني أنه في سلسلة القصة على سبيل المثال، سيتم دمج جميع أوصاف الشخصيات في نص واحد كبير.\rإذا كنت تريد فصل هذه الحقول، فيمكنك تحديد بادئة أو لاحقة هنا.\r\rتدعم هذه القيمة وحدات الماكرو العادية وستستبدل أيضًا {{char}} باسم الحرف ذي الصلة و<FIELDNAME> باسم الجزء (على سبيل المثال: الوصف، والشخصية، والسيناريو، وما إلى ذلك)",
     "Inserted after each part of the joined fields.": "يتم إدراجه بعد كل جزء من الحقول المرتبطة.",
     "Join Suffix": "انضم إلى لاحقة",
     "Set a group chat scenario": "تعيين سيناريو للمحادثة الجماعية",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "تحرير الشخصيات جميعها",
     "Bulk select all characters": "تحديد كافة الشخصيات بالجملة",
     "Bulk delete characters": "حذف الشخصيات جميعها",
-    "popup_text_save": "يحفظ",
+    "popup-button-save": "يحفظ",
-    "popup_text_yes": "نعم",
+    "popup-button-yes": "نعم",
-    "popup_text_no": "لا",
+    "popup-button-no": "لا",
-    "popup_text_cancel": "يلغي",
+    "popup-button-cancel": "يلغي",
-    "popup_text_import": "يستورد",
+    "popup-button-import": "يستورد",
     "Advanced Defininitions": "تعريفات متقدمة",
     "Prompt Overrides": "التجاوزات السريعة",
     "(For Chat Completion and Instruct Mode)": "(لاستكمال الدردشة ووضع التعليمات)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "استبعاد الشخصيات",
     "-- Characters not found --": "-- الشخصيات غير موجودة --",
     "Inclusion Group": "مجموعة الإدراج",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "تضمن مجموعات التضمين تنشيط إدخال واحد فقط من المجموعة في المرة الواحدة، إذا تم تشغيل عدة إدخالات.\rيدعم مجموعات متعددة مفصولة بفواصل.\r\rالتوثيق: معلومات العالم - مجموعة الإدماج",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "تضمن مجموعات التضمين تنشيط إدخال واحد فقط من المجموعة في المرة الواحدة، إذا تم تشغيل عدة إدخالات.\rيدعم مجموعات متعددة مفصولة بفواصل.\r\rالتوثيق: معلومات العالم - مجموعة الإدماج",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "إعطاء الأولوية لهذا الإدخال: عند تحديده، يتم إعطاء الأولوية لهذا الإدخال من بين جميع التحديدات.\rإذا تم تحديد الأولوية لأكثر من مجموعة، فسيتم اختيار \"الترتيب\" الأعلى.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "إعطاء الأولوية لهذا الإدخال: عند تحديده، يتم إعطاء الأولوية لهذا الإدخال من بين جميع التحديدات.\rإذا تم تحديد الأولوية لأكثر من مجموعة، فسيتم اختيار \"الترتيب\" الأعلى.",
     "Only one entry with the same label will be activated": "سيتم تنشيط مدخل واحد فقط بنفس العلامة",
     "A relative likelihood of entry activation within the group": "احتمال نسبي لتفعيل الدخول داخل المجموعة",
     "Group Weight": "وزن المجموعة",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "إعادة تعيين الرمز:",
     "Want to update?": "هل ترغب في التحديث؟",
     "How to start chatting?": "كيف تبدأ في المحادثة؟",
-    "Click ": "انقر",
+    "Click _space": "انقر",
     "and select a": "وحدد أ",
     "Chat API": "واجهة برمجة تطبيقات الدردشة",
     "and pick a character.": "واختر شخصية.",

public/locales/de-de.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "Charakterkarten beitreten (auch stummgeschaltet)",
     "Inserted before each part of the joined fields.": "Wird vor jedem Teil der verbundenen Felder eingefügt.",
     "Join Prefix": "Präfix beitreten",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Wenn „Charakterkarten zusammenfügen“ ausgewählt ist, werden alle entsprechenden Felder der Charaktere zusammengefügt. Das bedeutet, dass im Story-String beispielsweise alle Charakterbeschreibungen zu einem großen Text zusammengefügt werden. Wenn Sie möchten, dass diese Felder getrennt werden, können Sie hier ein Präfix oder Suffix definieren. Dieser Wert unterstützt normale Makros und ersetzt außerdem {{char}} durch den Namen des entsprechenden Charakters und <FIELDNAME> durch den Namen des Teils (z. B.: Beschreibung, Persönlichkeit, Szenario usw.).",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Wenn „Charakterkarten zusammenfügen“ ausgewählt ist, werden alle entsprechenden Felder der Charaktere zusammengefügt. Das bedeutet, dass im Story-String beispielsweise alle Charakterbeschreibungen zu einem großen Text zusammengefügt werden. Wenn Sie möchten, dass diese Felder getrennt werden, können Sie hier ein Präfix oder Suffix definieren. Dieser Wert unterstützt normale Makros und ersetzt außerdem {{char}} durch den Namen des entsprechenden Charakters und <FIELDNAME> durch den Namen des Teils (z. B.: Beschreibung, Persönlichkeit, Szenario usw.).",
     "Inserted after each part of the joined fields.": "Wird nach jedem Teil der verbundenen Felder eingefügt.",
     "Join Suffix": "Join-Suffix",
     "Set a group chat scenario": "Setze ein Gruppenchat-Szenario",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "Massenbearbeitung von Charakteren",
     "Bulk select all characters": "Massenauswahl aller Zeichen",
     "Bulk delete characters": "Massenlöschung von Charakteren",
-    "popup_text_save": "Speichern",
+    "popup-button-save": "Speichern",
-    "popup_text_yes": "Ja",
+    "popup-button-yes": "Ja",
-    "popup_text_no": "NEIN",
+    "popup-button-no": "NEIN",
-    "popup_text_cancel": "Stornieren",
+    "popup-button-cancel": "Stornieren",
-    "popup_text_import": "Importieren",
+    "popup-button-import": "Importieren",
     "Advanced Defininitions": "Erweiterte Definitionen",
     "Prompt Overrides": "Eingabeaufforderungsüberschreibungen",
     "(For Chat Completion and Instruct Mode)": "(Für Chat-Abschluss und Anweisungsmodus)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "Charakterausschluss",
     "-- Characters not found --": "-- Charaktere nicht gefunden --",
     "Inclusion Group": "Einschlussgruppe",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "Inklusionsgruppen stellen sicher, dass immer nur ein Eintrag aus einer Gruppe aktiviert wird, wenn mehrere ausgelöst werden. Unterstützt mehrere durch Kommas getrennte Gruppen. Dokumentation: World Info - Inclusion Group",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "Inklusionsgruppen stellen sicher, dass immer nur ein Eintrag aus einer Gruppe aktiviert wird, wenn mehrere ausgelöst werden. Unterstützt mehrere durch Kommas getrennte Gruppen. Dokumentation: World Info - Inclusion Group",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "Diesen Eintrag priorisieren: Wenn diese Option aktiviert ist, wird dieser Eintrag aus allen Auswahlen priorisiert. Wenn mehrere priorisiert sind, wird der Eintrag mit der höchsten „Reihenfolge“ ausgewählt.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "Diesen Eintrag priorisieren: Wenn diese Option aktiviert ist, wird dieser Eintrag aus allen Auswahlen priorisiert. Wenn mehrere priorisiert sind, wird der Eintrag mit der höchsten „Reihenfolge“ ausgewählt.",
     "Only one entry with the same label will be activated": "Nur ein Eintrag mit demselben Label wird aktiviert",
     "A relative likelihood of entry activation within the group": "Eine relative Wahrscheinlichkeit der Eintrittsaktivierung innerhalb der Gruppe",
     "Group Weight": "Gruppengewicht",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "Code zurücksetzen:",
     "Want to update?": "Möchten Sie aktualisieren?",
     "How to start chatting?": "Wie fange ich an zu chatten?",
-    "Click ": "Klicken",
+    "Click _space": "Klicken",
     "and select a": "und wähle eine",
     "Chat API": "Chat-API",
     "and pick a character.": "und wähle einen Charakter aus.",

public/locales/es-es.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "Unirse a tarjetas de personajes (incluidas silenciadas)",
     "Inserted before each part of the joined fields.": "Insertado antes de cada parte de los campos unidos.",
     "Join Prefix": "Unirse al prefijo",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Cuando se selecciona 'Unir tarjetas de personajes', todos los campos respectivos de los personajes se unen.\rEsto significa que en la cadena de la historia, por ejemplo, todas las descripciones de los personajes se unirán en un texto grande.\rSi desea que esos campos estén separados, puede definir un prefijo o sufijo aquí.\r\rEste valor admite macros normales y también reemplazará {{char}} con el nombre del personaje relevante y <FIELDNAME> con el nombre de la parte (por ejemplo: descripción, personalidad, escenario, etc.)",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Cuando se selecciona 'Unir tarjetas de personajes', todos los campos respectivos de los personajes se unen.\rEsto significa que en la cadena de la historia, por ejemplo, todas las descripciones de los personajes se unirán en un texto grande.\rSi desea que esos campos estén separados, puede definir un prefijo o sufijo aquí.\r\rEste valor admite macros normales y también reemplazará {{char}} con el nombre del personaje relevante y <FIELDNAME> con el nombre de la parte (por ejemplo: descripción, personalidad, escenario, etc.)",
     "Inserted after each part of the joined fields.": "Insertado después de cada parte de los campos unidos.",
     "Join Suffix": "Unirse al sufijo",
     "Set a group chat scenario": "Establecer un escenario de chat grupal",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "Editar personajes masivamente",
     "Bulk select all characters": "Seleccionar de forma masiva todos los personajes",
     "Bulk delete characters": "Eliminar personajes masivamente",
-    "popup_text_save": "Ahorrar",
+    "popup-button-save": "Ahorrar",
-    "popup_text_yes": "Sí",
+    "popup-button-yes": "Sí",
-    "popup_text_no": "No",
+    "popup-button-no": "No",
-    "popup_text_cancel": "Cancelar",
+    "popup-button-cancel": "Cancelar",
-    "popup_text_import": "Importar",
+    "popup-button-import": "Importar",
     "Advanced Defininitions": "Definiciones avanzadas",
     "Prompt Overrides": "Anulaciones rápidas",
     "(For Chat Completion and Instruct Mode)": "(Para completar el chat y el modo de instrucción)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "Exclusión de Personaje",
     "-- Characters not found --": "-- Personajes no encontrados --",
     "Inclusion Group": "Grupo de Inclusión",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "Los grupos de inclusión garantizan que solo se active una entrada de un grupo a la vez, si se activan varias.\rAdmite múltiples grupos separados por comas.\r\rDocumentación: World Info - Grupo de Inclusión",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "Los grupos de inclusión garantizan que solo se active una entrada de un grupo a la vez, si se activan varias.\rAdmite múltiples grupos separados por comas.\r\rDocumentación: World Info - Grupo de Inclusión",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "Priorizar esta entrada: cuando está marcada, esta entrada tiene prioridad entre todas las selecciones.\rSi se priorizan varios, se elige el que tenga el 'Orden' más alto.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "Priorizar esta entrada: cuando está marcada, esta entrada tiene prioridad entre todas las selecciones.\rSi se priorizan varios, se elige el que tenga el 'Orden' más alto.",
     "Only one entry with the same label will be activated": "Solo se activará una entrada con la misma etiqueta",
     "A relative likelihood of entry activation within the group": "Una probabilidad relativa de activación de entrada dentro del grupo.",
     "Group Weight": "Peso del grupo",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "Restablecer Código:",
     "Want to update?": "¿Quieres actualizar?",
     "How to start chatting?": "¿Cómo empezar a chatear?",
-    "Click ": "Hacer clic",
+    "Click _space": "Hacer clic",
     "and select a": "y selecciona una",
     "Chat API": " API de chat",
     "and pick a character.": "y elige un personaje.",

public/locales/fr-fr.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "Rejoignez les cartes de personnage (y compris en sourdine)",
     "Inserted before each part of the joined fields.": "Inséré avant chaque partie des champs joints.",
     "Join Prefix": "Rejoindre le préfixe",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Lorsque « Rejoindre les cartes de personnage » est sélectionné, tous les champs respectifs des personnages sont réunis.\rCela signifie que dans la chaîne d'histoire, par exemple, toutes les descriptions des personnages seront réunies en un seul grand texte.\rSi vous souhaitez que ces champs soient séparés, vous pouvez définir ici un préfixe ou un suffixe.\r\rCette valeur prend en charge les macros normales et remplacera également {{char}} par le nom du caractère concerné et <FIELDNAME> par le nom de la pièce (par exemple : description, personnalité, scénario, etc.)",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Lorsque « Rejoindre les cartes de personnage » est sélectionné, tous les champs respectifs des personnages sont réunis.\rCela signifie que dans la chaîne d'histoire, par exemple, toutes les descriptions des personnages seront réunies en un seul grand texte.\rSi vous souhaitez que ces champs soient séparés, vous pouvez définir ici un préfixe ou un suffixe.\r\rCette valeur prend en charge les macros normales et remplacera également {{char}} par le nom du caractère concerné et <FIELDNAME> par le nom de la pièce (par exemple : description, personnalité, scénario, etc.)",
     "Inserted after each part of the joined fields.": "Inséré après chaque partie des champs joints.",
     "Join Suffix": "Rejoindre le suffixe",
     "Set a group chat scenario": "Définir un scénario de discussion de groupe",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "Édition en masse des personnages",
     "Bulk select all characters": "Sélection groupée de tous les caractères",
     "Bulk delete characters": "Suppression en masse des personnages",
-    "popup_text_save": "Sauvegarder",
+    "popup-button-save": "Sauvegarder",
-    "popup_text_yes": "Oui",
+    "popup-button-yes": "Oui",
-    "popup_text_no": "Non",
+    "popup-button-no": "Non",
-    "popup_text_cancel": "Annuler",
+    "popup-button-cancel": "Annuler",
-    "popup_text_import": "Importer",
+    "popup-button-import": "Importer",
     "Advanced Defininitions": "Définitions avancées",
     "Prompt Overrides": "Remplacements d'invite",
     "(For Chat Completion and Instruct Mode)": "(Pour l'achèvement du chat et le mode instruction)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "Exclusion de personnage",
     "-- Characters not found --": "-- Personnages non trouvés --",
     "Inclusion Group": "Groupe d'inclusion",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "Les groupes d'inclusion garantissent qu'une seule entrée d'un groupe est activée à la fois, si plusieurs sont déclenchées.\rPrend en charge plusieurs groupes séparés par des virgules.\r\rDocumentation : Info Monde - Groupe Inclusion",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "Les groupes d'inclusion garantissent qu'une seule entrée d'un groupe est activée à la fois, si plusieurs sont déclenchées.\rPrend en charge plusieurs groupes séparés par des virgules.\r\rDocumentation : Info Monde - Groupe Inclusion",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "Prioriser cette entrée : Lorsque cette case est cochée, cette entrée est prioritaire parmi toutes les sélections.\rSi plusieurs sont prioritaires, celui avec l'ordre le plus élevé est choisi.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "Prioriser cette entrée : Lorsque cette case est cochée, cette entrée est prioritaire parmi toutes les sélections.\rSi plusieurs sont prioritaires, celui avec l'ordre le plus élevé est choisi.",
     "Only one entry with the same label will be activated": "Seule une entrée avec la même étiquette sera activée",
     "A relative likelihood of entry activation within the group": "Une probabilité relative d’activation d’entrée au sein du groupe",
     "Group Weight": "Poids du groupe",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "Code de réinitialisation :",
     "Want to update?": "Envie de mettre à jour ?",
     "How to start chatting?": "Comment commencer à discuter ?",
-    "Click ": "Cliquez sur",
+    "Click _space": "Cliquez sur",
     "and select a": "et sélectionnez un",
     "Chat API": "API de chat",
     "and pick a character.": "et choisissez un personnage.",

public/locales/is-is.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "Tengdu persónuspjöld (innifalin þögguð)",
     "Inserted before each part of the joined fields.": "Sett inn fyrir hvern hluta sameinaðra reita.",
     "Join Prefix": "Skráðu þig í Forskeyti",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Þegar 'Tengdu persónukort' er valið er verið að tengja saman alla viðkomandi reitir persónanna.\rÞetta þýðir að í sögustrengnum verða til dæmis allar persónulýsingar sameinaðar í einn stóran texta.\rEf þú vilt að þessir reitir séu aðskildir geturðu skilgreint forskeyti eða viðskeyti hér.\r\rÞetta gildi styður venjulega fjölva og mun einnig skipta út {{char}} fyrir viðkomandi bleikjunafni og <FIELDNAME> fyrir nafn hlutans (t.d.: lýsing, persónuleiki, atburðarás osfrv.)",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Þegar 'Tengdu persónukort' er valið er verið að tengja saman alla viðkomandi reitir persónanna.\rÞetta þýðir að í sögustrengnum verða til dæmis allar persónulýsingar sameinaðar í einn stóran texta.\rEf þú vilt að þessir reitir séu aðskildir geturðu skilgreint forskeyti eða viðskeyti hér.\r\rÞetta gildi styður venjulega fjölva og mun einnig skipta út {{char}} fyrir viðkomandi bleikjunafni og <FIELDNAME> fyrir nafn hlutans (t.d.: lýsing, persónuleiki, atburðarás osfrv.)",
     "Inserted after each part of the joined fields.": "Sett inn á eftir hverjum hluta sameinaðra reita.",
     "Join Suffix": "Skráðu þig í viðskeyti",
     "Set a group chat scenario": "Setja hópspjallsskipulag",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "Breyta mörgum persónum í einu",
     "Bulk select all characters": "Velja alla stafi í magni",
     "Bulk delete characters": "Eyða mörgum persónum í einu",
-    "popup_text_save": "Vista",
+    "popup-button-save": "Vista",
-    "popup_text_yes": "Já",
+    "popup-button-yes": "Já",
-    "popup_text_no": "Nei",
+    "popup-button-no": "Nei",
-    "popup_text_cancel": "Hætta við",
+    "popup-button-cancel": "Hætta við",
-    "popup_text_import": "Flytja inn",
+    "popup-button-import": "Flytja inn",
     "Advanced Defininitions": "Ítarleg skilgreiningar",
     "Prompt Overrides": "Hnekkja hvetjandi",
     "(For Chat Completion and Instruct Mode)": "(Til að ljúka spjalli og leiðbeiningarham)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "Persónuúteslutningur",
     "-- Characters not found --": "-- Persónur finnast ekki --",
     "Inclusion Group": "Innifólgur Hópur",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "Inntökuhópar tryggja að aðeins ein færsla úr hópi sé virkjuð í einu, ef margar eru ræstar.\rStyður marga hópa aðskilda með kommum.\r\rSkjöl: World Info - Inclusion Group",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "Inntökuhópar tryggja að aðeins ein færsla úr hópi sé virkjuð í einu, ef margar eru ræstar.\rStyður marga hópa aðskilda með kommum.\r\rSkjöl: World Info - Inclusion Group",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "Forgangsraða þessari færslu: Þegar hakað er við þá er þessari færslu forgangsraðað úr öllu vali.\rEf mörgum er forgangsraðað er sá sem hefur hæstu 'pöntun' valin.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "Forgangsraða þessari færslu: Þegar hakað er við þá er þessari færslu forgangsraðað úr öllu vali.\rEf mörgum er forgangsraðað er sá sem hefur hæstu 'pöntun' valin.",
     "Only one entry with the same label will be activated": "Aðeins ein skrá með sömu merki verður virk",
     "A relative likelihood of entry activation within the group": "Hlutfallslegar líkur á inngönguvirkjun innan hópsins",
     "Group Weight": "Þyngd hópa",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "Endurstilla kóða:",
     "Want to update?": "Viltu uppfæra?",
     "How to start chatting?": "Hvernig á að byrja að spjalla?",
-    "Click ": "Smellur",
+    "Click _space": "Smellur",
     "and select a": "og veldu",
     "Chat API": "Spjall API",
     "and pick a character.": "og veldu karakter.",

public/locales/it-it.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "Unisci le carte dei personaggi (includi disattivate)",
     "Inserted before each part of the joined fields.": "Inserito prima di ogni parte dei campi uniti.",
     "Join Prefix": "Unisciti al prefisso",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Quando viene selezionato \"Unisci carte personaggio\", tutti i rispettivi campi dei personaggi verranno uniti.\rCiò significa che nella stringa della storia, ad esempio, tutte le descrizioni dei personaggi verranno unite in un unico grande testo.\rSe desideri che questi campi siano separati, puoi definire un prefisso o un suffisso qui.\r\rQuesto valore supporta le macro normali e sostituirà anche {{char}} con il nome del carattere rilevante e <FIELDNAME> con il nome della parte (es.: descrizione, personalità, scenario, ecc.)",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Quando viene selezionato \"Unisci carte personaggio\", tutti i rispettivi campi dei personaggi verranno uniti.\rCiò significa che nella stringa della storia, ad esempio, tutte le descrizioni dei personaggi verranno unite in un unico grande testo.\rSe desideri che questi campi siano separati, puoi definire un prefisso o un suffisso qui.\r\rQuesto valore supporta le macro normali e sostituirà anche {{char}} con il nome del carattere rilevante e <FIELDNAME> con il nome della parte (es.: descrizione, personalità, scenario, ecc.)",
     "Inserted after each part of the joined fields.": "Inserito dopo ogni parte dei campi uniti.",
     "Join Suffix": "Unisciti al suffisso",
     "Set a group chat scenario": "Imposta uno scenario di chat di gruppo",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "Modifica personaggi in blocco",
     "Bulk select all characters": "Seleziona in blocco tutti i personaggi",
     "Bulk delete characters": "Elimina personaggi in blocco",
-    "popup_text_save": "Salva",
+    "popup-button-save": "Salva",
-    "popup_text_yes": "SÌ",
+    "popup-button-yes": "SÌ",
-    "popup_text_no": "NO",
+    "popup-button-no": "NO",
-    "popup_text_cancel": "Annulla",
+    "popup-button-cancel": "Annulla",
-    "popup_text_import": "Importare",
+    "popup-button-import": "Importare",
     "Advanced Defininitions": "Definizioni avanzate",
     "Prompt Overrides": "Sostituzioni richieste",
     "(For Chat Completion and Instruct Mode)": "(Per il completamento della chat e la modalità istruzione)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "Esclusione Personaggio",
     "-- Characters not found --": "-- Personaggi non trovati --",
     "Inclusion Group": "Gruppo di Inclusione",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "I gruppi di inclusione garantiscono che venga attivata solo una voce di un gruppo alla volta, se ne vengono attivate più.\rSupporta più gruppi separati da virgole.\r\rDocumentazione: World Info – Gruppo Inclusione",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "I gruppi di inclusione garantiscono che venga attivata solo una voce di un gruppo alla volta, se ne vengono attivate più.\rSupporta più gruppi separati da virgole.\r\rDocumentazione: World Info – Gruppo Inclusione",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "Dai priorità a questa voce: se selezionata, questa voce ha la priorità tra tutte le selezioni. Se vengono date priorità a più voci, viene scelta quella con l'\"Ordine\" più alto.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "Dai priorità a questa voce: se selezionata, questa voce ha la priorità tra tutte le selezioni. Se vengono date priorità a più voci, viene scelta quella con l'\"Ordine\" più alto.",
     "Only one entry with the same label will be activated": "Sarà attivato solo un unico ingresso con lo stesso etichetta",
     "A relative likelihood of entry activation within the group": "Una probabilità relativa di attivazione dell'ingresso all'interno del gruppo",
     "Group Weight": "Peso del gruppo",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "Codice di ripristino:",
     "Want to update?": "Vuoi aggiornare?",
     "How to start chatting?": "Come iniziare a chattare?",
-    "Click ": "Clic",
+    "Click _space": "Clic",
     "and select a": " e seleziona un",
     "Chat API": " API di chat",
     "and pick a character.": "e scegli un personaggio.",

public/locales/ja-jp.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "キャラクターカードに参加（ミュート含む）",
     "Inserted before each part of the joined fields.": "結合されたフィールドの各部分の前に挿入されます。",
     "Join Prefix": "結合プレフィックス",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "「キャラクターカードを結合」を選択すると、キャラクターのそれぞれのフィールドがすべて結合されます。つまり、たとえばストーリー文字列では、すべてのキャラクターの説明が 1 つの大きなテキストに結合されます。これらのフィールドを分離したい場合は、ここでプレフィックスまたはサフィックスを定義できます。この値は通常のマクロをサポートし、{{char}} を関連するキャラクターの名前に置き換え、<FIELDNAME> をパーツの名前 (例: 説明、性格、シナリオなど) に置き換えます。",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "「キャラクターカードを結合」を選択すると、キャラクターのそれぞれのフィールドがすべて結合されます。つまり、たとえばストーリー文字列では、すべてのキャラクターの説明が 1 つの大きなテキストに結合されます。これらのフィールドを分離したい場合は、ここでプレフィックスまたはサフィックスを定義できます。この値は通常のマクロをサポートし、{{char}} を関連するキャラクターの名前に置き換え、<FIELDNAME> をパーツの名前 (例: 説明、性格、シナリオなど) に置き換えます。",
     "Inserted after each part of the joined fields.": "結合されたフィールドの各部分の後に挿入されます。",
     "Join Suffix": "結合サフィックス",
     "Set a group chat scenario": "グループチャットのシナリオを設定",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "キャラクターを一括編集",
     "Bulk select all characters": "すべての文字を一括選択",
     "Bulk delete characters": "キャラクターを一括削除",
-    "popup_text_save": "保存",
+    "popup-button-save": "保存",
-    "popup_text_yes": "はい",
+    "popup-button-yes": "はい",
-    "popup_text_no": "いいえ",
+    "popup-button-no": "いいえ",
-    "popup_text_cancel": "キャンセル",
+    "popup-button-cancel": "キャンセル",
-    "popup_text_import": "輸入",
+    "popup-button-import": "輸入",
     "Advanced Defininitions": "高度な定義",
     "Prompt Overrides": "プロンプトのオーバーライド",
     "(For Chat Completion and Instruct Mode)": "（チャット補完と指示モード用）",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "キャラクターの除外",
     "-- Characters not found --": "-- キャラクターが見つかりません --",
     "Inclusion Group": "含蓋グループ",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "包含グループにより、複数のエントリがトリガーされた場合、一度に 1 つのグループから 1 つのエントリのみがアクティブ化されます。カンマで区切られた複数のグループをサポートします。ドキュメント: World Info - 包含グループ",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "包含グループにより、複数のエントリがトリガーされた場合、一度に 1 つのグループから 1 つのエントリのみがアクティブ化されます。カンマで区切られた複数のグループをサポートします。ドキュメント: World Info - 包含グループ",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "このエントリを優先する: チェックすると、このエントリがすべての選択項目の中で優先されます。複数のエントリを優先する場合は、「順序」が最も高いエントリが選択されます。",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "このエントリを優先する: チェックすると、このエントリがすべての選択項目の中で優先されます。複数のエントリを優先する場合は、「順序」が最も高いエントリが選択されます。",
     "Only one entry with the same label will be activated": "同じラベルのエントリが1つだけ有効になります",
     "A relative likelihood of entry activation within the group": "グループ内でのエントリー活性化の相対的な可能性",
     "Group Weight": "グループの重み",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "リセットコード:",
     "Want to update?": "更新しますか？",
     "How to start chatting?": "チャットを開始する方法は？",
-    "Click ": "クリック",
+    "Click _space": "クリック",
     "and select a": "そして選択します ",
     "Chat API": "チャットAPI",
     "and pick a character.": "キャラクターを選択します。",

public/locales/ko-kr.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "캐릭터 카드 가입(뮤트 포함)",
     "Inserted before each part of the joined fields.": "결합된 필드의 각 부분 앞에 삽입됩니다.",
     "Join Prefix": "접두사 가입",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "'캐릭터 카드 합치기'를 선택하면 캐릭터의 모든 해당 필드가 합쳐집니다. 즉, 스토리 문자열에서 예를 들어 모든 캐릭터 설명이 하나의 큰 텍스트로 합쳐집니다. 이러한 필드를 분리하려면 여기에서 접두사나 접미사를 정의할 수 있습니다. 이 값은 일반 매크로를 지원하고 {{char}}를 해당 캐릭터의 이름으로, <FIELDNAME>을 해당 부분의 이름(예: 설명, 성격, 시나리오 등)으로 대체합니다.",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "'캐릭터 카드 합치기'를 선택하면 캐릭터의 모든 해당 필드가 합쳐집니다. 즉, 스토리 문자열에서 예를 들어 모든 캐릭터 설명이 하나의 큰 텍스트로 합쳐집니다. 이러한 필드를 분리하려면 여기에서 접두사나 접미사를 정의할 수 있습니다. 이 값은 일반 매크로를 지원하고 {{char}}를 해당 캐릭터의 이름으로, <FIELDNAME>을 해당 부분의 이름(예: 설명, 성격, 시나리오 등)으로 대체합니다.",
     "Inserted after each part of the joined fields.": "결합된 필드의 각 부분 뒤에 삽입됩니다.",
     "Join Suffix": "접미사 가입",
     "Set a group chat scenario": "그룹 채팅 시나리오 설정",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "대량 캐릭터 편집",
     "Bulk select all characters": "모든 문자 일괄 선택",
     "Bulk delete characters": "대량 캐릭터 삭제",
-    "popup_text_save": "구하다",
+    "popup-button-save": "구하다",
-    "popup_text_yes": "예",
+    "popup-button-yes": "예",
-    "popup_text_no": "아니요",
+    "popup-button-no": "아니요",
-    "popup_text_cancel": "취소",
+    "popup-button-cancel": "취소",
-    "popup_text_import": "수입",
+    "popup-button-import": "수입",
     "Advanced Defininitions": "고급 정의",
     "Prompt Overrides": "프롬프트 무시",
     "(For Chat Completion and Instruct Mode)": "(채팅 완료 및 지시 모드의 경우)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "캐릭터 제외",
     "-- Characters not found --": "-- 캐릭터를 찾을 수 없음 --",
     "Inclusion Group": "포함 그룹",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "포함 그룹은 여러 항목이 트리거되는 경우 그룹에서 한 번에 하나의 항목만 활성화되도록 합니다.\r쉼표로 구분된 여러 그룹을 지원합니다.\r\r문서: 세계 정보 - 포함 그룹",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "포함 그룹은 여러 항목이 트리거되는 경우 그룹에서 한 번에 하나의 항목만 활성화되도록 합니다.\r쉼표로 구분된 여러 그룹을 지원합니다.\r\r문서: 세계 정보 - 포함 그룹",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "이 항목 우선순위 지정: 선택하면 모든 선택 항목 중에서 이 항목의 우선순위가 지정됩니다.\r여러 항목의 우선순위가 높은 경우 '순서'가 가장 높은 항목이 선택됩니다.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "이 항목 우선순위 지정: 선택하면 모든 선택 항목 중에서 이 항목의 우선순위가 지정됩니다.\r여러 항목의 우선순위가 높은 경우 '순서'가 가장 높은 항목이 선택됩니다.",
     "Only one entry with the same label will be activated": "동일한 라벨을 가진 항목은 하나만 활성화됩니다",
     "A relative likelihood of entry activation within the group": "그룹 내 항목 활성화의 상대적 가능성",
     "Group Weight": "그룹 가중치",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "재설정 코드:",
     "Want to update?": "업데이트 하시겠습니까?",
     "How to start chatting?": "채팅을 시작하는 방법은?",
-    "Click ": "딸깍 하는 소리",
+    "Click _space": "딸깍 하는 소리",
     "and select a": "그리고 선택하십시오",
     "Chat API": "채팅 API",
     "and pick a character.": "그리고 캐릭터를 선택하세요.",

public/locales/nl-nl.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "Sluit je aan bij karakterkaarten (inclusief gedempt)",
     "Inserted before each part of the joined fields.": "Ingevoegd vóór elk deel van de samengevoegde velden.",
     "Join Prefix": "Sluit je aan bij Voorvoegsel",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Wanneer 'Verbind karakterkaarten' is geselecteerd, worden alle respectieve velden van de karakters samengevoegd.\rDit betekent dat in de verhaalreeks bijvoorbeeld alle karakterbeschrijvingen worden samengevoegd tot één grote tekst.\rAls u wilt dat deze velden gescheiden worden, kunt u hier een voor- of achtervoegsel definiëren.\r\rDeze waarde ondersteunt normale macro's en zal ook {{char}} vervangen door de relevante naam van het char en <FIELDNAME> door de naam van het onderdeel (bijvoorbeeld: beschrijving, persoonlijkheid, scenario, etc.)",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Wanneer 'Verbind karakterkaarten' is geselecteerd, worden alle respectieve velden van de karakters samengevoegd.\rDit betekent dat in de verhaalreeks bijvoorbeeld alle karakterbeschrijvingen worden samengevoegd tot één grote tekst.\rAls u wilt dat deze velden gescheiden worden, kunt u hier een voor- of achtervoegsel definiëren.\r\rDeze waarde ondersteunt normale macro's en zal ook {{char}} vervangen door de relevante naam van het char en <FIELDNAME> door de naam van het onderdeel (bijvoorbeeld: beschrijving, persoonlijkheid, scenario, etc.)",
     "Inserted after each part of the joined fields.": "Ingevoegd na elk deel van de samengevoegde velden.",
     "Join Suffix": "Sluit je aan bij het achtervoegsel",
     "Set a group chat scenario": "Stel een scenario voor groepschat in",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "Massaal bewerken personages",
     "Bulk select all characters": "Selecteer alle tekens in bulk",
     "Bulk delete characters": "Massaal verwijderen personages",
-    "popup_text_save": "Redden",
+    "popup-button-save": "Redden",
-    "popup_text_yes": "Ja",
+    "popup-button-yes": "Ja",
-    "popup_text_no": "Nee",
+    "popup-button-no": "Nee",
-    "popup_text_cancel": "Annuleren",
+    "popup-button-cancel": "Annuleren",
-    "popup_text_import": "Importeren",
+    "popup-button-import": "Importeren",
     "Advanced Defininitions": "Geavanceerde definities",
     "Prompt Overrides": "Prompt-overschrijvingen",
     "(For Chat Completion and Instruct Mode)": "(Voor voltooiing van chat en instructiemodus)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "Personage uitsluiting",
     "-- Characters not found --": "-- Personages niet gevonden --",
     "Inclusion Group": "Insluitingsgroep",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "Inclusiegroepen zorgen ervoor dat slechts één item uit een groep tegelijk wordt geactiveerd, als er meerdere worden geactiveerd.\rOndersteunt meerdere door komma's gescheiden groepen.\r\rDocumentatie: World Info - Inclusion Group",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "Inclusiegroepen zorgen ervoor dat slechts één item uit een groep tegelijk wordt geactiveerd, als er meerdere worden geactiveerd.\rOndersteunt meerdere door komma's gescheiden groepen.\r\rDocumentatie: World Info - Inclusion Group",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "Geef prioriteit aan deze invoer: Als dit selectievakje is aangevinkt, krijgt deze invoer prioriteit boven alle selecties. Als er meerdere items prioriteit hebben, wordt de invoer met de hoogste 'volgorde' gekozen.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "Geef prioriteit aan deze invoer: Als dit selectievakje is aangevinkt, krijgt deze invoer prioriteit boven alle selecties. Als er meerdere items prioriteit hebben, wordt de invoer met de hoogste 'volgorde' gekozen.",
     "Only one entry with the same label will be activated": "Slechts één item met hetzelfde label zal worden geactiveerd",
     "A relative likelihood of entry activation within the group": "Een relatieve waarschijnlijkheid van activatie binnen de groep",
     "Group Weight": "Groepsgewicht",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "Reset code:",
     "Want to update?": "Wil je SillyTavern updaten?",
     "How to start chatting?": "Hoe begin je met chatten?",
-    "Click ": "Klik",
+    "Click _space": "Klik",
     "and select a": " en selecteer een",
     "Chat API": " Chat-API",
     "and pick a character.": "en kies een personage.",

public/locales/pt-pt.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "Junte-se a cartões de personagem (inclua silenciado)",
     "Inserted before each part of the joined fields.": "Inserido antes de cada parte dos campos unidos.",
     "Join Prefix": "Prefixo de adesão",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Quando 'Unir cartas de personagem' é selecionado, todos os respectivos campos dos personagens são unidos.\rIsto significa que na sequência da história, por exemplo, todas as descrições dos personagens serão unidas a um grande texto.\rSe quiser que esses campos sejam separados, você pode definir um prefixo ou sufixo aqui.\r\rEste valor suporta macros normais e também substituirá {{char}} pelo nome do char relevante e <FIELDNAME> pelo nome da parte (por exemplo: descrição, personalidade, cenário, etc.)",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Quando 'Unir cartas de personagem' é selecionado, todos os respectivos campos dos personagens são unidos.\rIsto significa que na sequência da história, por exemplo, todas as descrições dos personagens serão unidas a um grande texto.\rSe quiser que esses campos sejam separados, você pode definir um prefixo ou sufixo aqui.\r\rEste valor suporta macros normais e também substituirá {{char}} pelo nome do char relevante e <FIELDNAME> pelo nome da parte (por exemplo: descrição, personalidade, cenário, etc.)",
     "Inserted after each part of the joined fields.": "Inserido após cada parte dos campos unidos.",
     "Join Suffix": "Junte-se ao sufixo",
     "Set a group chat scenario": "Definir um cenário de bate-papo em grupo",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "Editar personagens em massa",
     "Bulk select all characters": "Selecione em massa todos os caracteres",
     "Bulk delete characters": "Excluir personagens em massa",
-    "popup_text_save": "Salvar",
+    "popup-button-save": "Salvar",
-    "popup_text_yes": "Sim",
+    "popup-button-yes": "Sim",
-    "popup_text_no": "Não",
+    "popup-button-no": "Não",
-    "popup_text_cancel": "Cancelar",
+    "popup-button-cancel": "Cancelar",
-    "popup_text_import": "Importar",
+    "popup-button-import": "Importar",
     "Advanced Defininitions": "Definições Avançadas",
     "Prompt Overrides": "Substituições de prompt",
     "(For Chat Completion and Instruct Mode)": "(Para conclusão de bate-papo e modo de instrução)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "Exclusão de personagem",
     "-- Characters not found --": "-- Personagens não encontrados --",
     "Inclusion Group": "Grupo de inclusão",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "Os Grupos de Inclusão garantem que apenas uma entrada de um grupo seja ativada por vez, se várias forem acionadas.\rSuporta vários grupos separados por vírgula.\r\rDocumentação: World Info - Grupo de Inclusão",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "Os Grupos de Inclusão garantem que apenas uma entrada de um grupo seja ativada por vez, se várias forem acionadas.\rSuporta vários grupos separados por vírgula.\r\rDocumentação: World Info - Grupo de Inclusão",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "Priorizar esta entrada: quando marcada, esta entrada é priorizada entre todas as seleções.\rSe vários forem priorizados, aquele com a “Ordem” mais alta será escolhido.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "Priorizar esta entrada: quando marcada, esta entrada é priorizada entre todas as seleções.\rSe vários forem priorizados, aquele com a “Ordem” mais alta será escolhido.",
     "Only one entry with the same label will be activated": "Apenas uma entrada com o mesmo rótulo será ativada",
     "A relative likelihood of entry activation within the group": "Uma probabilidade relativa de ativação de entrada dentro do grupo",
     "Group Weight": "Peso do grupo",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "Reiniciar código:",
     "Want to update?": "Quer atualizar?",
     "How to start chatting?": "Como começar a conversar?",
-    "Click ": "Clique",
+    "Click _space": "Clique",
     "and select a": "e selecione um",
     "Chat API": "API de Chat",
     "and pick a character.": "e escolha um personagem.",

public/locales/uk-ua.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "Приєднатися до карток персонажів (включно з приглушеними)",
     "Inserted before each part of the joined fields.": "Вставляється перед кожною частиною об’єднаних полів.",
     "Join Prefix": "Префікс приєднання",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Якщо вибрано «Об’єднати картки персонажів», усі відповідні поля персонажів об’єднуються.\rЦе означає, що, наприклад, у рядку історії всі описи персонажів будуть об’єднані в один великий текст.\rЯкщо ви хочете, щоб ці поля були розділені, ви можете визначити тут префікс або суфікс.\r\rЦе значення підтримує звичайні макроси, а також замінює {{char}} на ім’я відповідного символу, а <FIELDNAME> — на назву частини (наприклад, опис, особистість, сценарій тощо).",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Якщо вибрано «Об’єднати картки персонажів», усі відповідні поля персонажів об’єднуються.\rЦе означає, що, наприклад, у рядку історії всі описи персонажів будуть об’єднані в один великий текст.\rЯкщо ви хочете, щоб ці поля були розділені, ви можете визначити тут префікс або суфікс.\r\rЦе значення підтримує звичайні макроси, а також замінює {{char}} на ім’я відповідного символу, а <FIELDNAME> — на назву частини (наприклад, опис, особистість, сценарій тощо).",
     "Inserted after each part of the joined fields.": "Вставляється після кожної частини об’єднаних полів.",
     "Join Suffix": "Суфікс приєднання",
     "Set a group chat scenario": "Встановити сценарій групового чату",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "Масове редагування персонажів",
     "Bulk select all characters": "Масове виділення всіх символів",
     "Bulk delete characters": "Масове видалення персонажів",
-    "popup_text_save": "зберегти",
+    "popup-button-save": "зберегти",
-    "popup_text_yes": "Так",
+    "popup-button-yes": "Так",
-    "popup_text_no": "Немає",
+    "popup-button-no": "Немає",
-    "popup_text_cancel": "Скасувати",
+    "popup-button-cancel": "Скасувати",
-    "popup_text_import": "Імпорт",
+    "popup-button-import": "Імпорт",
     "Advanced Defininitions": "Розширені визначення",
     "Prompt Overrides": "Перевизначення підказок",
     "(For Chat Completion and Instruct Mode)": "(Для завершення чату та режиму інструктажу)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "Виключення персонажів",
     "-- Characters not found --": "-- Персонажі не знайдені --",
     "Inclusion Group": "Група включення",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "Групи включення гарантують, що одночасно активується лише один запис із групи, якщо їх активовано декілька.\rПідтримує кілька груп, розділених комами.\r\rДокументація: World Info - Inclusion Group",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "Групи включення гарантують, що одночасно активується лише один запис із групи, якщо їх активовано декілька.\rПідтримує кілька груп, розділених комами.\r\rДокументація: World Info - Inclusion Group",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "Пріоритезувати цей запис: якщо позначено, цей запис має пріоритет серед усіх вибраних.\rЯкщо кілька пріоритетів, вибирається той, який має найвищий «порядок».",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "Пріоритезувати цей запис: якщо позначено, цей запис має пріоритет серед усіх вибраних.\rЯкщо кілька пріоритетів, вибирається той, який має найвищий «порядок».",
     "Only one entry with the same label will be activated": "Буде активовано лише один запис з однією міткою",
     "A relative likelihood of entry activation within the group": "Відносна ймовірність активації входу в групу",
     "Group Weight": "Вага групи",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "Скинути код:",
     "Want to update?": "Хочете оновити?",
     "How to start chatting?": "Як почати спілкування?",
-    "Click ": "Натисніть",
+    "Click _space": "Натисніть",
     "and select a": "і виберіть",
     "Chat API": "API чату",
     "and pick a character.": "і виберіть персонажа.",

public/locales/vi-vn.json

@@ -853,7 +853,7 @@
     "Join character cards (include muted)": "Tham gia thẻ nhân vật (bao gồm cả tắt tiếng)",
     "Inserted before each part of the joined fields.": "Được chèn trước mỗi phần của các trường đã nối.",
     "Join Prefix": "Tham gia tiền tố",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Khi chọn 'Tham gia thẻ nhân vật', tất cả các trường tương ứng của các nhân vật sẽ được nối với nhau.\rĐiều này có nghĩa là trong chuỗi câu chuyện chẳng hạn, tất cả các mô tả nhân vật sẽ được nối thành một văn bản lớn.\rNếu muốn tách các trường đó, bạn có thể xác định tiền tố hoặc hậu tố tại đây.\r\rGiá trị này hỗ trợ các macro thông thường và cũng sẽ thay thế {{char}} bằng tên của char có liên quan và <FIELDNAME> bằng tên của phần đó (ví dụ: mô tả, tính cách, kịch bản, v.v.)",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "Khi chọn 'Tham gia thẻ nhân vật', tất cả các trường tương ứng của các nhân vật sẽ được nối với nhau.\rĐiều này có nghĩa là trong chuỗi câu chuyện chẳng hạn, tất cả các mô tả nhân vật sẽ được nối thành một văn bản lớn.\rNếu muốn tách các trường đó, bạn có thể xác định tiền tố hoặc hậu tố tại đây.\r\rGiá trị này hỗ trợ các macro thông thường và cũng sẽ thay thế {{char}} bằng tên của char có liên quan và <FIELDNAME> bằng tên của phần đó (ví dụ: mô tả, tính cách, kịch bản, v.v.)",
     "Inserted after each part of the joined fields.": "Được chèn sau mỗi phần của các trường đã nối.",
     "Join Suffix": "Tham gia hậu tố",
     "Set a group chat scenario": "Đặt một kịch bản trò chuyện nhóm",
@@ -885,11 +885,11 @@
     "Bulk_edit_characters": "Chỉnh sửa nhân vật theo lô",
     "Bulk select all characters": "Chọn hàng loạt tất cả các ký tự",
     "Bulk delete characters": "Xóa nhân vật theo lô",
-    "popup_text_save": "Cứu",
+    "popup-button-save": "Cứu",
-    "popup_text_yes": "Đúng",
+    "popup-button-yes": "Đúng",
-    "popup_text_no": "KHÔNG",
+    "popup-button-no": "KHÔNG",
-    "popup_text_cancel": "Hủy bỏ",
+    "popup-button-cancel": "Hủy bỏ",
-    "popup_text_import": "Nhập khẩu",
+    "popup-button-import": "Nhập khẩu",
     "Advanced Defininitions": "Các Định nghĩa Nâng cao",
     "Prompt Overrides": "Ghi đè nhắc nhở",
     "(For Chat Completion and Instruct Mode)": "(Đối với chế độ hoàn thành trò chuyện và hướng dẫn)",
@@ -1005,8 +1005,8 @@
     "Character Exclusion": "Loại trừ Nhân vật",
     "-- Characters not found --": "-- Không tìm thấy Nhân vật --",
     "Inclusion Group": "Nhóm Bao gồm",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "Nhóm Bao gồm đảm bảo chỉ một mục từ một nhóm được kích hoạt tại một thời điểm, nếu nhiều mục được kích hoạt.\rHỗ trợ nhiều nhóm được phân tách bằng dấu phẩy.\r\rTài liệu: World Info - Inclusion Group",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "Nhóm Bao gồm đảm bảo chỉ một mục từ một nhóm được kích hoạt tại một thời điểm, nếu nhiều mục được kích hoạt.\rHỗ trợ nhiều nhóm được phân tách bằng dấu phẩy.\r\rTài liệu: World Info - Inclusion Group",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "Ưu tiên mục nhập này: Khi được chọn, mục nhập này được ưu tiên trong số tất cả các lựa chọn.\rNếu nhiều ưu tiên được ưu tiên thì cái có 'Thứ tự' cao nhất sẽ được chọn.",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "Ưu tiên mục nhập này: Khi được chọn, mục nhập này được ưu tiên trong số tất cả các lựa chọn.\rNếu nhiều ưu tiên được ưu tiên thì cái có 'Thứ tự' cao nhất sẽ được chọn.",
     "Only one entry with the same label will be activated": "Chỉ một mục có cùng nhãn sẽ được kích hoạt",
     "A relative likelihood of entry activation within the group": "Khả năng tương đối của việc kích hoạt mục nhập trong nhóm",
     "Group Weight": "Trọng lượng nhóm",
@@ -1436,7 +1436,7 @@
     "Reset Code:": "Đặt lại mã:",
     "Want to update?": "Muốn cập nhật?",
     "How to start chatting?": "Làm thế nào để bắt đầu trò chuyện?",
-    "Click ": "Nhấp chuột",
+    "Click _space": "Nhấp chuột",
     "and select a": "và chọn một",
     "Chat API": "API Trò chuyện",
     "and pick a character.": "và chọn một nhân vật.",

public/locales/zh-tw.json

@@ -854,7 +854,7 @@
     "Join character cards (include muted)": "加入角色人物卡(包括靜音)",
     "Inserted before each part of the joined fields.": "插入在合併欄位的每一部分之前。",
     "Join Prefix": "加入前綴",
-    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.\rThis means that in the story string for example all character descriptions will be joined to one big text.\rIf you want those fields to be separated, you can define a prefix or suffix here.\r\rThis value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "當選擇“加入角色卡”時，角色的所有對應欄位將連接在一起。\r這意味著，例如在故事字串中，所有角色描述都將連接到一個大文字中。\r如果您希望分隔這些字段，可以在此處定義前綴或後綴。\r\r該值支援普通宏，並且還將 {{char}} 替換為相關字元的名稱，並將 <FIELDNAME> 替換為部分的名稱（例如：描述、個性、場景等）",
+    "When 'Join character cards' is selected, all respective fields of the characters are being joined together.This means that in the story string for example all character descriptions will be joined to one big text.If you want those fields to be separated, you can define a prefix or suffix here.This value supports normal macros and will also replace {{char}} with the relevant char's name and <FIELDNAME> with the name of the part (e.g.: description, personality, scenario, etc.)": "當選擇“加入角色卡”時，角色的所有對應欄位將連接在一起。\r這意味著，例如在故事字串中，所有角色描述都將連接到一個大文字中。\r如果您希望分隔這些字段，可以在此處定義前綴或後綴。\r\r該值支援普通宏，並且還將 {{char}} 替換為相關字元的名稱，並將 <FIELDNAME> 替換為部分的名稱（例如：描述、個性、場景等）",
     "Inserted after each part of the joined fields.": "插入在合併欄位的每一部分之後。",
     "Join Suffix": "加入後綴",
     "Set a group chat scenario": "設定群組聊天情境",
@@ -886,11 +886,11 @@
     "Bulk_edit_characters": "批量編輯角色人物\n\n點選以切換角色人物\nShift + 點選以選擇/取消選擇一範圍的角色人物\n右鍵以查看動作",
     "Bulk select all characters": "全選所有角色人物",
     "Bulk delete characters": "批量刪除角色人物",
-    "popup_text_save": "儲存",
+    "popup-button-save": "儲存",
-    "popup_text_yes": "是",
+    "popup-button-yes": "是",
-    "popup_text_no": "否",
+    "popup-button-no": "否",
-    "popup_text_cancel": "取消",
+    "popup-button-cancel": "取消",
-    "popup_text_import": "匯入",
+    "popup-button-import": "匯入",
     "Advanced Defininitions": "- 進階定義",
     "Prompt Overrides": "提示詞覆寫",
     "(For Chat Completion and Instruct Mode)": "(用於聊天補充和指令模式)",
@@ -1007,8 +1007,8 @@
     "Character Exclusion": "角色人物排除",
     "-- Characters not found --": "-- 未找到角色人物 --",
     "Inclusion Group": "包含的群組",
-    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.\r\rDocumentation: World Info - Inclusion Group": "如果觸發多個條目，包含群組可確保一次僅啟動一組中的一個條目。\r支援多個以逗號分隔的群組。\r\r文件：世界資訊 - 包容性集團",
+    "Inclusion Groups ensure only one entry from a group is activated at a time, if multiple are triggered.Documentation: World Info - Inclusion Group": "如果觸發多個條目，包含群組可確保一次僅啟動一組中的一個條目。\r支援多個以逗號分隔的群組。\r\r文件：世界資訊 - 包容性集團",
-    "Prioritize this entry: When checked, this entry is prioritized out of all selections.\rIf multiple are prioritized, the one with the highest 'Order' is chosen.": "優先考慮此條目：選取後，此條目將在所有選擇中優先。\r如果有多個優先級，則選擇「順序」最高的一個。",
+    "Prioritize this entry: When checked, this entry is prioritized out of all selections.If multiple are prioritized, the one with the highest 'Order' is chosen.": "優先考慮此條目：選取後，此條目將在所有選擇中優先。\r如果有多個優先級，則選擇「順序」最高的一個。",
     "Only one entry with the same label will be activated": "僅會啟用具有相同標籤的一個條目",
     "A relative likelihood of entry activation within the group": "群組內條目啟用的相對可能性",
     "Group Weight": "群組權重",
@@ -1439,7 +1439,7 @@
     "Reset Code:": "重設驗證碼：",
     "Want to update?": "想要更新嗎？",
     "How to start chatting?": "如何開始聊天？",
-    "Click ": "點選",
+    "Click _space": "點選",
     "and select a": "並選擇一個",
     "Chat API": "聊天 API",
     "and pick a character.": "並選擇一個角色人物。",

public/login.html

@@ -26,6 +26,7 @@
     <link rel="stylesheet" type="text/css" href="css/login.css">
     <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
     <link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
+    <link href="webfonts/NotoSansMono/stylesheet.css" rel="stylesheet">
     <!-- fontawesome webfonts-->
     <link href="css/fontawesome.min.css" rel="stylesheet">
     <link href="css/solid.min.css" rel="stylesheet">

public/scripts/PromptManager.js

@@ -685,6 +685,23 @@ class PromptManager {
         this.log('Initialized');
     }
 
+    /**
+     * Get the scroll position of the prompt manager
+     * @returns {number} - Scroll position of the prompt manager
+     */
+    #getScrollPosition() {
+        return document.getElementById(this.configuration.prefix + 'prompt_manager')?.closest('.scrollableInner')?.scrollTop;
+    }
+
+    /**
+     * Set the scroll position of the prompt manager
+     * @param {number} scrollPosition - The scroll position to set
+     */
+    #setScrollPosition(scrollPosition) {
+        if (scrollPosition === undefined || scrollPosition === null) return;
+        document.getElementById(this.configuration.prefix + 'prompt_manager')?.closest('.scrollableInner')?.scrollTo(0, scrollPosition);
+    }
+
     /**
      * Main rendering function
      *
@@ -703,17 +720,21 @@ class PromptManager {
                 this.tryGenerate().finally(async () => {
                     this.profileEnd('filling context');
                     this.profileStart('render');
+                    const scrollPosition = this.#getScrollPosition();
                     await this.renderPromptManager();
                     await this.renderPromptManagerListItems();
                     this.makeDraggable();
+                    this.#setScrollPosition(scrollPosition);
                     this.profileEnd('render');
                 });
             } else {
                 // Executed during live communication
                 this.profileStart('render');
+                const scrollPosition = this.#getScrollPosition();
                 await this.renderPromptManager();
                 await this.renderPromptManagerListItems();
                 this.makeDraggable();
+                this.#setScrollPosition(scrollPosition);
                 this.profileEnd('render');
             }
         }).catch(() => {

public/scripts/RossAscends-mods.js

@@ -16,7 +16,6 @@ import {
     eventSource,
     menu_type,
     substituteParams,
-    callPopup,
     sendTextareaMessage,
 } from '../script.js';
 
@@ -39,6 +38,7 @@ import { textgen_types, textgenerationwebui_settings as textgen_settings, getTex
 import { debounce_timeout } from './constants.js';
 
 import Bowser from '../lib/bowser.min.js';
+import { Popup } from './popup.js';
 
 var RPanelPin = document.getElementById('rm_button_panel_pin');
 var LPanelPin = document.getElementById('lm_button_panel_pin');
@@ -303,7 +303,7 @@ export async function favsToHotswap() {
         return;
     }
 
-    buildAvatarList(container, favs, { selectable: true, highlightFavs: false });
+    buildAvatarList(container, favs, { interactable: true, highlightFavs: false });
 }
 
 //changes input bar and send button display depending on connection status
@@ -380,6 +380,7 @@ function RA_autoconnect(PrevApi) {
                     || (secret_state[SECRET_KEYS.COHERE] && oai_settings.chat_completion_source == chat_completion_sources.COHERE)
                     || (secret_state[SECRET_KEYS.PERPLEXITY] && oai_settings.chat_completion_source == chat_completion_sources.PERPLEXITY)
                     || (secret_state[SECRET_KEYS.GROQ] && oai_settings.chat_completion_source == chat_completion_sources.GROQ)
+                    || (secret_state[SECRET_KEYS.ZEROONEAI] && oai_settings.chat_completion_source == chat_completion_sources.ZEROONEAI)
                     || (isValidUrl(oai_settings.custom_url) && oai_settings.chat_completion_source == chat_completion_sources.CUSTOM)
                 ) {
                     $('#api_button_openai').trigger('click');
@@ -477,8 +478,8 @@ export function dragElement(elmnt) {
         }
 
         const style = getComputedStyle(target);
-        height = parseInt(style.height)
+        height = parseInt(style.height);
-        width = parseInt(style.width)
+        width = parseInt(style.width);
         top = parseInt(style.top);
         left = parseInt(style.left);
         right = parseInt(style.right);
@@ -927,8 +928,8 @@ export function initRossMods() {
         return false;
     }
 
-    $(document).on('keydown', function (event) {
+    $(document).on('keydown', async function (event) {
-        processHotkeys(event.originalEvent);
+        await processHotkeys(event.originalEvent);
     });
 
     const hotkeyTargets = {
@@ -940,7 +941,7 @@ export function initRossMods() {
     /**
      * @param {KeyboardEvent} event
      */
-    function processHotkeys(event) {
+    async function processHotkeys(event) {
         //Enter to send when send_textarea in focus
         if (document.activeElement == hotkeyTargets['send_textarea']) {
             const sendOnEnter = shouldSendOnEnter();
@@ -1004,20 +1005,17 @@ export function initRossMods() {
                 if (skipConfirm) {
                     doRegenerate();
                 } else {
-                    const popupText = `
+                    let regenerateWithCtrlEnter = false;
-                    <div class="marginBot10">Are you sure you want to regenerate the latest message?</div>
+                    const result = await Popup.show.confirm('Regenerate Message', 'Are you sure you want to regenerate the latest message?', {
-                    <label class="checkbox_label justifyCenter" for="regenerateWithCtrlEnter">
+                        customInputs: [{ id: 'regenerateWithCtrlEnter', label: 'Don\'t ask again' }],
-                        <input type="checkbox" id="regenerateWithCtrlEnter">
+                        onClose: (popup) => regenerateWithCtrlEnter = popup.inputResults.get('regenerateWithCtrlEnter') ?? false,
-                        Don't ask again
-                    </label>`;
-                    callPopup(popupText, 'confirm').then(result => {
-                        if (!result) {
-                            return;
-                        }
-                        const regenerateWithCtrlEnter = $('#regenerateWithCtrlEnter').prop('checked');
-                        SaveLocal(skipConfirmKey, regenerateWithCtrlEnter);
-                        doRegenerate();
                     });
+                    if (!result) {
+                        return;
+                    }
+
+                    SaveLocal(skipConfirmKey, regenerateWithCtrlEnter);
+                    doRegenerate();
                 }
                 return;
             } else {
@@ -1097,6 +1095,9 @@ export function initRossMods() {
         }
 
         if (event.key == 'Escape') { //closes various panels
+            // Do not close panels if we are currently inside a popup
+            if (Popup.util.isPopupOpen())
+                return;
 
             //dont override Escape hotkey functions from script.js
             //"close edit box" and "cancel stream generation".

public/scripts/authors-note.js

@@ -38,6 +38,7 @@ const chara_note_position = {
 function setNoteTextCommand(_, text) {
     $('#extension_floating_prompt').val(text).trigger('input');
     toastr.success('Author\'s Note text updated');
+    return '';
 }
 
 function setNoteDepthCommand(_, text) {
@@ -50,6 +51,7 @@ function setNoteDepthCommand(_, text) {
 
     $('#extension_floating_depth').val(Math.abs(value)).trigger('input');
     toastr.success('Author\'s Note depth updated');
+    return '';
 }
 
 function setNoteIntervalCommand(_, text) {
@@ -62,6 +64,7 @@ function setNoteIntervalCommand(_, text) {
 
     $('#extension_floating_interval').val(Math.abs(value)).trigger('input');
     toastr.success('Author\'s Note frequency updated');
+    return '';
 }
 
 function setNotePositionCommand(_, text) {
@@ -79,6 +82,7 @@ function setNotePositionCommand(_, text) {
 
     $(`input[name="extension_floating_position"][value="${position}"]`).prop('checked', true).trigger('input');
     toastr.info('Author\'s Note position updated');
+    return '';
 }
 
 function updateSettings() {

public/scripts/autocomplete/AutoComplete.js

@@ -6,6 +6,7 @@ import { BlankAutoCompleteOption } from './BlankAutoCompleteOption.js';
 // eslint-disable-next-line no-unused-vars
 import { AutoCompleteNameResult } from './AutoCompleteNameResult.js';
 import { AutoCompleteSecondaryNameResult } from './AutoCompleteSecondaryNameResult.js';
+import { Popup, getTopmostModalLayer } from '../popup.js';
 
 /**@readonly*/
 /**@enum {Number}*/
@@ -386,11 +387,15 @@ export class AutoComplete {
                 // no result and no input? hide autocomplete
                 return this.hide();
             }
+            if (this.effectiveParserResult instanceof AutoCompleteSecondaryNameResult && !this.effectiveParserResult.forceMatch) {
+                // no result and matching is no forced? hide autocomplete
+                return this.hide();
+            }
             // otherwise add "no match" notice
             const option = new BlankAutoCompleteOption(
                 this.name.length ?
                     this.effectiveParserResult.makeNoMatchText()
-                    : this.effectiveParserResult.makeNoOptionstext()
+                    : this.effectiveParserResult.makeNoOptionsText()
                 ,
             );
             this.result.push(option);
@@ -438,7 +443,7 @@ export class AutoComplete {
             }
             this.dom.append(frag);
             this.updatePosition();
-            document.body.append(this.domWrap);
+            getTopmostModalLayer().append(this.domWrap);
         } else {
             this.domWrap.remove();
         }
@@ -453,7 +458,7 @@ export class AutoComplete {
         if (!this.isShowingDetails && this.isReplaceable) return this.detailsWrap.remove();
         this.detailsDom.innerHTML = '';
         this.detailsDom.append(this.selectedItem?.renderDetails() ?? 'NO ITEM');
-        document.body.append(this.detailsWrap);
+        getTopmostModalLayer().append(this.detailsWrap);
         this.updateDetailsPositionDebounced();
     }
 
@@ -469,7 +474,7 @@ export class AutoComplete {
             const rect = {};
             rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
             rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
-            rect[AUTOCOMPLETE_WIDTH.FULL] = document.body.getBoundingClientRect();
+            rect[AUTOCOMPLETE_WIDTH.FULL] = getTopmostModalLayer().getBoundingClientRect();
             this.domWrap.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
             this.dom.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
             this.domWrap.style.bottom = `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`;
@@ -481,8 +486,8 @@ export class AutoComplete {
                 this.domWrap.style.setProperty('--leftOffset', `max(1vw, ${rect[power_user.stscript.autocomplete.width.left].left}px)`);
                 this.domWrap.style.setProperty('--rightOffset', `calc(100vw - min(99vw, ${rect[power_user.stscript.autocomplete.width.right].right}px)`);
             }
-            this.updateDetailsPosition();
         }
+        this.updateDetailsPosition();
     }
 
     /**
@@ -496,7 +501,7 @@ export class AutoComplete {
                 const rect = {};
                 rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
                 rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
-                rect[AUTOCOMPLETE_WIDTH.FULL] = document.body.getBoundingClientRect();
+                rect[AUTOCOMPLETE_WIDTH.FULL] = getTopmostModalLayer().getBoundingClientRect();
                 if (this.isReplaceable) {
                     this.detailsWrap.classList.remove('full');
                     const selRect = this.selectedItem.dom.children[0].getBoundingClientRect();
@@ -592,7 +597,7 @@ export class AutoComplete {
             }
             this.clone.style.position = 'fixed';
             this.clone.style.visibility = 'hidden';
-            document.body.append(this.clone);
+            getTopmostModalLayer().append(this.clone);
             const mo = new MutationObserver(muts=>{
                 if (muts.find(it=>Array.from(it.removedNodes).includes(this.textarea))) {
                     this.clone.remove();
@@ -745,8 +750,10 @@ export class AutoComplete {
         }
         // autocomplete shown or not, cursor anywhere
         switch (evt.key) {
+            // The first is a non-breaking space, the second is a regular space.
+            case ' ':
             case ' ': {
-                if (evt.ctrlKey) {
+                if (evt.ctrlKey || evt.altKey) {
                     if (this.isActive && this.isReplaceable) {
                         // ctrl-space to toggle details for selected item
                         this.toggleDetails();
@@ -754,6 +761,8 @@ export class AutoComplete {
                         // ctrl-space to force show autocomplete
                         this.show(false, true);
                     }
+                    evt.preventDefault();
+                    evt.stopPropagation();
                     return;
                 }
                 break;

public/scripts/autocomplete/AutoCompleteNameResult.js

@@ -10,7 +10,7 @@ export class AutoCompleteNameResult {
     /**@type {AutoCompleteOption[]} */ optionList = [];
     /**@type {boolean} */ canBeQuoted = false;
     /**@type {()=>string} */ makeNoMatchText = ()=>`No matches found for "${this.name}"`;
-    /**@type {()=>string} */ makeNoOptionstext = ()=>'No options';
+    /**@type {()=>string} */ makeNoOptionsText = ()=>'No options';
 
 
     /**
@@ -27,7 +27,7 @@ export class AutoCompleteNameResult {
         this.optionList = optionList;
         this.canBeQuoted = canBeQuoted;
         this.noMatchText = makeNoMatchText ?? this.makeNoMatchText;
-        this.noOptionstext = makeNoOptionsText ?? this.makeNoOptionstext;
+        this.noOptionstext = makeNoOptionsText ?? this.makeNoOptionsText;
     }
 
 

public/scripts/autocomplete/AutoCompleteOption.js

@@ -6,6 +6,7 @@ import { AutoCompleteFuzzyScore } from './AutoCompleteFuzzyScore.js';
 export class AutoCompleteOption {
     /**@type {string}*/ name;
     /**@type {string}*/ typeIcon;
+    /**@type {string}*/ type;
     /**@type {number}*/ nameOffset = 0;
     /**@type {AutoCompleteFuzzyScore}*/ score;
     /**@type {string}*/ replacer;
@@ -24,9 +25,10 @@ export class AutoCompleteOption {
     /**
      * @param {string} name
      */
-    constructor(name, typeIcon = ' ') {
+    constructor(name, typeIcon = ' ', type = '') {
         this.name = name;
         this.typeIcon = typeIcon;
+        this.type = type;
     }
 
 
@@ -141,6 +143,11 @@ export class AutoCompleteOption {
                 }
                 li.append(specs);
             }
+            const stopgap = document.createElement('span'); {
+                stopgap.classList.add('stopgap');
+                stopgap.textContent = '';
+                li.append(stopgap);
+            }
             const help = document.createElement('span'); {
                 help.classList.add('help');
                 const content = document.createElement('span'); {
@@ -181,6 +188,7 @@ export class AutoCompleteOption {
         let li;
         li = this.makeItem(this.name, this.typeIcon, true);
         li.setAttribute('data-name', this.name);
+        li.setAttribute('data-option-type', this.type);
         return li;
     }
 

public/scripts/autocomplete/AutoCompleteSecondaryNameResult.js

@@ -2,4 +2,5 @@ import { AutoCompleteNameResult } from './AutoCompleteNameResult.js';
 
 export class AutoCompleteSecondaryNameResult extends AutoCompleteNameResult {
     /**@type {boolean}*/ isRequired = false;
+    /**@type {boolean}*/ forceMatch = true;
 }

public/scripts/backgrounds.js

@@ -95,7 +95,7 @@ function onLockBackgroundClick(e) {
 
     if (!chatName) {
         toastr.warning('Select a chat to lock the background for it');
-        return;
+        return '';
     }
 
     const relativeBgImage = getUrlParameter(this);
@@ -103,6 +103,7 @@ function onLockBackgroundClick(e) {
     saveBackgroundMetadata(relativeBgImage);
     setCustomBackground();
     highlightLockedBackground();
+    return '';
 }
 
 function onUnlockBackgroundClick(e) {
@@ -110,6 +111,7 @@ function onUnlockBackgroundClick(e) {
     removeBackgroundMetadata();
     unsetCustomBackground();
     highlightLockedBackground();
+    return '';
 }
 
 function hasCustomBackground() {
@@ -319,7 +321,7 @@ async function autoBackgroundCommand() {
     const options = bgTitles.map(x => ({ element: x, text: x.innerText.trim() })).filter(x => x.text.length > 0);
     if (options.length == 0) {
         toastr.warning('No backgrounds to choose from. Please upload some images to the "backgrounds" folder.');
-        return;
+        return '';
     }
 
     const list = options.map(option => `- ${option.text}`).join('\n');
@@ -330,11 +332,12 @@ async function autoBackgroundCommand() {
 
     if (bestMatch.length == 0) {
         toastr.warning('No match found. Please try again.');
-        return;
+        return '';
     }
 
     console.debug('Automatically choosing background:', bestMatch);
     bestMatch[0].item.element.click();
+    return '';
 }
 
 export async function getBackgrounds() {

public/scripts/bookmarks.js

@@ -24,6 +24,7 @@ import {
     saveGroupBookmarkChat,
     selected_group,
 } from './group-chats.js';
+import { Popup } from './popup.js';
 import { createTagMapFromList } from './tags.js';
 
 import {
@@ -239,8 +240,7 @@ async function convertSoloToGroupChat() {
         return;
     }
 
-    const confirm = await callPopup('Are you sure you want to convert this chat to a group chat?', 'confirm');
+    const confirm = await Popup.show.confirm('Convert to group chat', 'Are you sure you want to convert this chat to a group chat?<br />This cannot be reverted.');
-
     if (!confirm) {
         return;
     }
@@ -336,6 +336,7 @@ async function convertSoloToGroupChat() {
 
     if (!createChatResponse.ok) {
         console.error('Group chat creation unsuccessful');
+        toastr.error('Group chat creation unsuccessful');
         return;
     }
 

public/scripts/bulk-edit.js

@@ -94,6 +94,9 @@ function enableBulkSelect() {
         });
         $(el).prepend(checkbox);
     });
+    $('#rm_print_characters_block.group_overlay_mode_select .bogus_folder_select, #rm_print_characters_block.group_overlay_mode_select .group_select')
+        .addClass('disabled');
+
     $('#rm_print_characters_block').addClass('bulk_select');
     // We also need to disable the default click event for the character_select divs
     $(document).on('click', '.bulk_select_checkbox', function (event) {
@@ -106,6 +109,8 @@ function enableBulkSelect() {
  */
 function disableBulkSelect() {
     $('.bulk_select_checkbox').remove();
+    $('#rm_print_characters_block.group_overlay_mode_select .bogus_folder_select, #rm_print_characters_block.group_overlay_mode_select .group_select')
+        .removeClass('disabled');
     $('#rm_print_characters_block').removeClass('bulk_select');
 }
 

public/scripts/chats.js

@@ -4,7 +4,6 @@ import css from '../lib/css-parser.mjs';
 import {
     addCopyToCodeBlocks,
     appendMediaToMessage,
-    callPopup,
     characters,
     chat,
     eventSource,
@@ -35,8 +34,10 @@ import {
     extractTextFromOffice,
 } from './utils.js';
 import { extension_settings, renderExtensionTemplateAsync, saveMetadataDebounced } from './extensions.js';
-import { POPUP_RESULT, POPUP_TYPE, callGenericPopup } from './popup.js';
+import { POPUP_RESULT, POPUP_TYPE, Popup, callGenericPopup } from './popup.js';
 import { ScraperManager } from './scrapers.js';
+import { DragAndDropHandler } from './dragdrop.js';
+import { renderTemplateAsync } from './templates.js';
 
 /**
  * @typedef {Object} FileAttachment
@@ -523,7 +524,7 @@ async function openExternalMediaOverridesDialog() {
         return;
     }
 
-    const template = $('#forbid_media_override_template > .forbid_media_override').clone();
+    const template = $(await renderTemplateAsync('forbidMedia'));
     template.find('.forbid_media_global_state_forbidden').toggle(power_user.forbid_external_media);
     template.find('.forbid_media_global_state_allowed').toggle(!power_user.forbid_external_media);
 
@@ -537,7 +538,7 @@ async function openExternalMediaOverridesDialog() {
         template.find('#forbid_media_override_global').prop('checked', true);
     }
 
-    callPopup(template, 'text', '', { wide: false, large: false });
+    callGenericPopup(template, POPUP_TYPE.TEXT, '', { wide: false, large: false });
 }
 
 export function getCurrentEntityId() {
@@ -565,7 +566,7 @@ export function isExternalMediaAllowed() {
     return !power_user.forbid_external_media;
 }
 
-function enlargeMessageImage() {
+async function enlargeMessageImage() {
     const mesBlock = $(this).closest('.mes');
     const mesId = mesBlock.attr('mesid');
     const message = chat[mesId];
@@ -579,14 +580,28 @@ function enlargeMessageImage() {
     const img = document.createElement('img');
     img.classList.add('img_enlarged');
     img.src = imgSrc;
+    const imgHolder = document.createElement('div');
+    imgHolder.classList.add('img_enlarged_holder');
+    imgHolder.append(img);
     const imgContainer = $('<div><pre><code></code></pre></div>');
-    imgContainer.prepend(img);
+    imgContainer.prepend(imgHolder);
     imgContainer.addClass('img_enlarged_container');
     imgContainer.find('code').addClass('txt').text(title);
     const titleEmpty = !title || title.trim().length === 0;
     imgContainer.find('pre').toggle(!titleEmpty);
     addCopyToCodeBlocks(imgContainer);
-    callGenericPopup(imgContainer, POPUP_TYPE.TEXT, '', { wide: true, large: true });
+
+    const popup = new Popup(imgContainer, POPUP_TYPE.DISPLAY, '', { large: true, transparent: true });
+
+    popup.dlg.style.width = 'unset';
+    popup.dlg.style.height = 'unset';
+
+    img.addEventListener('click', () => {
+        const shouldZoom = !img.classList.contains('zoomed');
+        img.classList.toggle('zoomed', shouldZoom);
+    });
+
+    await popup.show();
 }
 
 async function deleteMessageImage() {
@@ -991,49 +1006,24 @@ async function openAttachmentManager() {
         template.find('.chatAttachmentsName').text(chatName);
     }
 
-    function addDragAndDrop() {
+    const dragDropHandler = new DragAndDropHandler('.popup', async (files, event) => {
-        $(document.body).on('dragover', '.dialogue_popup', (event) => {
+        let selectedTarget = ATTACHMENT_SOURCE.GLOBAL;
-            event.preventDefault();
+        const targets = getAvailableTargets();
-            event.stopPropagation();
+
-            $(event.target).closest('.dialogue_popup').addClass('dragover');
+        const targetSelectTemplate = $(await renderExtensionTemplateAsync('attachments', 'files-dropped', { count: files.length, targets: targets }));
+        targetSelectTemplate.find('.droppedFilesTarget').on('input', function () {
+            selectedTarget = String($(this).val());
         });
-
+        const result = await callGenericPopup(targetSelectTemplate, POPUP_TYPE.CONFIRM, '', { wide: false, large: false, okButton: 'Upload', cancelButton: 'Cancel' });
-        $(document.body).on('dragleave', '.dialogue_popup', (event) => {
+        if (result !== POPUP_RESULT.AFFIRMATIVE) {
-            event.preventDefault();
+            console.log('File upload cancelled');
-            event.stopPropagation();
+            return;
-            $(event.target).closest('.dialogue_popup').removeClass('dragover');
+        }
-        });
+        for (const file of files) {
-
+            await uploadFileAttachmentToServer(file, selectedTarget);
-        $(document.body).on('drop', '.dialogue_popup', async (event) => {
+        }
-            event.preventDefault();
+        renderAttachments();
-            event.stopPropagation();
+    });
-            $(event.target).closest('.dialogue_popup').removeClass('dragover');
-
-            const files = Array.from(event.originalEvent.dataTransfer.files);
-            let selectedTarget = ATTACHMENT_SOURCE.GLOBAL;
-            const targets = getAvailableTargets();
-
-            const targetSelectTemplate = $(await renderExtensionTemplateAsync('attachments', 'files-dropped', { count: files.length, targets: targets }));
-            targetSelectTemplate.find('.droppedFilesTarget').on('input', function () {
-                selectedTarget = String($(this).val());
-            });
-            const result = await callGenericPopup(targetSelectTemplate, POPUP_TYPE.CONFIRM, '', { wide: false, large: false, okButton: 'Upload', cancelButton: 'Cancel' });
-            if (result !== POPUP_RESULT.AFFIRMATIVE) {
-                console.log('File upload cancelled');
-                return;
-            }
-            for (const file of files) {
-                await uploadFileAttachmentToServer(file, selectedTarget);
-            }
-            renderAttachments();
-        });
-    }
-
-    function removeDragAndDrop() {
-        $(document.body).off('dragover', '.shadow_popup');
-        $(document.body).off('dragleave', '.shadow_popup');
-        $(document.body).off('drop', '.shadow_popup');
-    }
 
     let sortField = localStorage.getItem('DataBank_sortField') || 'created';
     let sortOrder = localStorage.getItem('DataBank_sortOrder') || 'desc';
@@ -1056,43 +1046,61 @@ async function openAttachmentManager() {
         localStorage.setItem('DataBank_sortOrder', sortOrder);
         renderAttachments();
     });
-    template.find('.bulkActionDelete').on('click', async () => {
+    function handleBulkAction(action) {
-        const selectedAttachments =  document.querySelectorAll('.attachmentListItemCheckboxContainer .attachmentListItemCheckbox:checked');
+        return async () => {
+            const selectedAttachments = document.querySelectorAll('.attachmentListItemCheckboxContainer .attachmentListItemCheckbox:checked');
 
-        if (selectedAttachments.length === 0) {
+            if (selectedAttachments.length === 0) {
-            toastr.info('No attachments selected.', 'Data Bank');
+                toastr.info('No attachments selected.', 'Data Bank');
-            return;
-        }
-
-        const confirm = await callGenericPopup('Are you sure you want to delete the selected attachments?', POPUP_TYPE.CONFIRM);
-
-        if (confirm !== POPUP_RESULT.AFFIRMATIVE) {
-            return;
-        }
-
-        const attachments = getDataBankAttachments();
-        selectedAttachments.forEach(async (checkbox) => {
-            const listItem = checkbox.closest('.attachmentListItem');
-            if (!(listItem instanceof HTMLElement)) {
                 return;
             }
-            const url = listItem.dataset.attachmentUrl;
-            const source = listItem.dataset.attachmentSource;
-            const attachment = attachments.find(a => a.url === url);
-            if (!attachment) {
-                return;
-            }
-            await deleteAttachment(attachment, source, () => {}, false);
-        });
 
-        document.querySelectorAll('.attachmentListItemCheckbox, .attachmentsBulkEditCheckbox').forEach(checkbox => {
+            if (action.confirmMessage) {
-            if (checkbox instanceof HTMLInputElement) {
+                const confirm = await callGenericPopup(action.confirmMessage, POPUP_TYPE.CONFIRM);
-                checkbox.checked = false;
+                if (confirm !== POPUP_RESULT.AFFIRMATIVE) {
+                    return;
+                }
             }
-        });
 
-        await renderAttachments();
+            const includeDisabled = true;
-    });
+            const attachments = getDataBankAttachments(includeDisabled);
+            selectedAttachments.forEach(async (checkbox) => {
+                const listItem = checkbox.closest('.attachmentListItem');
+                if (!(listItem instanceof HTMLElement)) {
+                    return;
+                }
+                const url = listItem.dataset.attachmentUrl;
+                const source = listItem.dataset.attachmentSource;
+                const attachment = attachments.find(a => a.url === url);
+                if (!attachment) {
+                    return;
+                }
+                await action.perform(attachment, source);
+            });
+
+            document.querySelectorAll('.attachmentListItemCheckbox, .attachmentsBulkEditCheckbox').forEach(checkbox => {
+                if (checkbox instanceof HTMLInputElement) {
+                    checkbox.checked = false;
+                }
+            });
+
+            await renderAttachments();
+        };
+    }
+
+    template.find('.bulkActionDisable').on('click', handleBulkAction({
+        perform: (attachment) => disableAttachment(attachment, () => { }),
+    }));
+
+    template.find('.bulkActionEnable').on('click', handleBulkAction({
+        perform: (attachment) => enableAttachment(attachment, () => { }),
+    }));
+
+    template.find('.bulkActionDelete').on('click', handleBulkAction({
+        confirmMessage: 'Are you sure you want to delete the selected attachments?',
+        perform: async (attachment, source) => await deleteAttachment(attachment, source, () => { }, false),
+    }));
+
     template.find('.bulkActionSelectAll').on('click', () => {
         $('.attachmentListItemCheckbox:visible').each((_, checkbox) => {
             if (checkbox instanceof HTMLInputElement) {
@@ -1111,11 +1119,10 @@ async function openAttachmentManager() {
     const cleanupFn = await renderButtons();
     await verifyAttachments();
     await renderAttachments();
-    addDragAndDrop();
+    await callGenericPopup(template, POPUP_TYPE.TEXT, '', { wide: true, large: true, okButton: 'Close', allowVerticalScrolling: true });
-    await callGenericPopup(template, POPUP_TYPE.TEXT, '', { wide: true, large: true, okButton: 'Close' });
 
     cleanupFn();
-    removeDragAndDrop();
+    dragDropHandler.destroy();
 }
 
 /**
@@ -1458,7 +1465,7 @@ jQuery(function () {
             });
         }
 
-        callPopup(wrapper, 'text', '', { wide: true, large: true });
+        callGenericPopup(wrapper, POPUP_TYPE.TEXT, '', { wide: true, large: true });
     });
 
     $(document).on('click', 'body.documentstyle .mes .mes_text', function () {

public/scripts/dragdrop.js

@@ -0,0 +1,107 @@
+import { debounce_timeout } from './constants.js';
+
+/**
+ * Drag and drop handler
+ *
+ * Can be used on any element, enabling drag&drop styling and callback on drop.
+ */
+export class DragAndDropHandler {
+    /** @private @type {JQuery.Selector} */ selector;
+    /** @private @type {(files: File[], event:JQuery.DropEvent<HTMLElement, undefined, any, any>) => void} */ onDropCallback;
+    /** @private @type {NodeJS.Timeout} Remark: Not actually NodeJS timeout, but it's close */ dragLeaveTimeout;
+
+    /** @private @type {boolean} */ noAnimation;
+
+    /**
+     * Create a DragAndDropHandler
+     * @param {JQuery.Selector} selector - The CSS selector for the elements to enable drag and drop
+     * @param {(files: File[], event:JQuery.DropEvent<HTMLElement, undefined, any, any>) => void} onDropCallback - The callback function to handle the drop event
+     */
+    constructor(selector, onDropCallback, { noAnimation = false } = {}) {
+        this.selector = selector;
+        this.onDropCallback = onDropCallback;
+        this.dragLeaveTimeout = null;
+
+        this.noAnimation = noAnimation;
+
+        this.init();
+    }
+
+    /**
+     * Destroy the drag and drop functionality
+     */
+    destroy() {
+        if (this.selector === 'body') {
+            $(document.body).off('dragover', this.handleDragOver.bind(this));
+            $(document.body).off('dragleave', this.handleDragLeave.bind(this));
+            $(document.body).off('drop', this.handleDrop.bind(this));
+        } else {
+            $(document.body).off('dragover', this.selector, this.handleDragOver.bind(this));
+            $(document.body).off('dragleave', this.selector, this.handleDragLeave.bind(this));
+            $(document.body).off('drop', this.selector, this.handleDrop.bind(this));
+        }
+
+        $(this.selector).remove('drop_target no_animation');
+    }
+
+    /**
+     * Initialize the drag and drop functionality
+     * Automatically called on construction
+     * @private
+     */
+    init() {
+        if (this.selector === 'body') {
+            $(document.body).on('dragover', this.handleDragOver.bind(this));
+            $(document.body).on('dragleave', this.handleDragLeave.bind(this));
+            $(document.body).on('drop', this.handleDrop.bind(this));
+        } else {
+            $(document.body).on('dragover', this.selector, this.handleDragOver.bind(this));
+            $(document.body).on('dragleave', this.selector, this.handleDragLeave.bind(this));
+            $(document.body).on('drop', this.selector, this.handleDrop.bind(this));
+        }
+
+        $(this.selector).addClass('drop_target');
+        if (this.noAnimation) $(this.selector).addClass('no_animation');
+    }
+
+    /**
+     * @param {JQuery.DragOverEvent<HTMLElement, undefined, any, any>} event - The dragover event
+     * @private
+     */
+    handleDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        clearTimeout(this.dragLeaveTimeout);
+        $(this.selector).addClass('drop_target dragover');
+        if (this.noAnimation) $(this.selector).addClass('no_animation');
+    }
+
+    /**
+     * @param {JQuery.DragLeaveEvent<HTMLElement, undefined, any, any>} event - The dragleave event
+     * @private
+     */
+    handleDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        // Debounce the removal of the class, so it doesn't "flicker" on dragging over
+        clearTimeout(this.dragLeaveTimeout);
+        this.dragLeaveTimeout = setTimeout(() => {
+            $(this.selector).removeClass('dragover');
+        }, debounce_timeout.quick);
+    }
+
+    /**
+     * @param {JQuery.DropEvent<HTMLElement, undefined, any, any>} event - The drop event
+     * @private
+     */
+    handleDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        clearTimeout(this.dragLeaveTimeout);
+        $(this.selector).removeClass('dragover');
+
+        const files = Array.from(event.originalEvent.dataTransfer.files);
+        this.onDropCallback(files, event);
+    }
+}

public/scripts/dynamic-styles.js

@@ -0,0 +1,162 @@
+/** @type {CSSStyleSheet} */
+let dynamicStyleSheet = null;
+/** @type {CSSStyleSheet} */
+let dynamicExtensionStyleSheet = null;
+
+/**
+ * An observer that will check if any new stylesheets are added to the head
+ * @type {MutationObserver}
+ */
+const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+        if (mutation.type !== 'childList') return;
+
+        mutation.addedNodes.forEach(node => {
+            if (node instanceof HTMLLinkElement && node.tagName === 'LINK' && node.rel === 'stylesheet') {
+                node.addEventListener('load', () => {
+                    try {
+                        applyDynamicFocusStyles(node.sheet);
+                    } catch (e) {
+                        console.warn('Failed to process new stylesheet:', e);
+                    }
+                });
+            }
+        });
+    });
+});
+
+/**
+ * Generates dynamic focus styles based on the given stylesheet, taking its hover styles as reference
+ *
+ * @param {CSSStyleSheet} styleSheet - The stylesheet to process
+ * @param {object} [options] - Optional configuration options
+ * @param {boolean} [options.fromExtension=false] - Indicates if the styles are from an extension
+ */
+function applyDynamicFocusStyles(styleSheet, { fromExtension = false } = {}) {
+    /** @type {{baseSelector: string, rule: CSSStyleRule}[]} */
+    const hoverRules = [];
+    /** @type {Set<string>} */
+    const focusRules = new Set();
+
+    const PLACEHOLDER = ':__PLACEHOLDER__';
+
+    /**
+     * Processes the CSS rules and separates selectors for hover and focus
+     * @param {CSSRuleList} rules - The CSS rules to process
+     */
+    function processRules(rules) {
+        Array.from(rules).forEach(rule => {
+            if (rule instanceof CSSImportRule) {
+                // Make sure that @import rules are processed recursively
+                processImportedStylesheet(rule.styleSheet);
+            } else if (rule instanceof CSSStyleRule) {
+                // Separate multiple selectors on a rule
+                const selectors = rule.selectorText.split(',').map(s => s.trim());
+
+                // We collect all hover and focus rules to be able to later decide which hover rules don't have a matching focus rule
+                selectors.forEach(selector => {
+                    const isHover = selector.includes(':hover'), isFocus = selector.includes(':focus');
+                    if (isHover && isFocus) {
+                        // We currently do nothing here. Rules containing both hover and focus are very specific and should never be automatically touched
+                    }
+                    else if (isHover) {
+                        const baseSelector = selector.replace(':hover', PLACEHOLDER).trim();
+                        hoverRules.push({ baseSelector, rule });
+                    } else if (isFocus) {
+                        // We need to make sure that we remember all existing :focus, :focus-within and :focus-visible rules
+                        const baseSelector = selector.replace(':focus-within', PLACEHOLDER).replace(':focus-visible', PLACEHOLDER).replace(':focus', PLACEHOLDER).trim();
+                        focusRules.add(baseSelector);
+                    }
+                });
+            } else if (rule instanceof CSSMediaRule || rule instanceof CSSSupportsRule) {
+                // Recursively process nested rules
+                processRules(rule.cssRules);
+            }
+        });
+    }
+
+    /**
+     * Processes the CSS rules of an imported stylesheet recursively
+     * @param {CSSStyleSheet} sheet - The imported stylesheet to process
+     */
+    function processImportedStylesheet(sheet) {
+        if (sheet && sheet.cssRules) {
+            processRules(sheet.cssRules);
+        }
+    }
+
+    processRules(styleSheet.cssRules);
+
+    /** @type {CSSStyleSheet} */
+    let targetStyleSheet = null;
+
+    // Now finally create the dynamic focus rules
+    hoverRules.forEach(({ baseSelector, rule }) => {
+        if (!focusRules.has(baseSelector)) {
+            // Only initialize the dynamic stylesheet if needed
+            targetStyleSheet ??= getDynamicStyleSheet({ fromExtension });
+
+            // The closest keyboard-equivalent to :hover styling is utilizing the :focus-visible rule from modern browsers.
+            // It let's the browser decide whether a focus highlighting is expected and makes sense.
+            // So we take all :hover rules that don't have a manually defined focus rule yet, and create their
+            // :focus-visible counterpart, which will make the styling work the same for keyboard and mouse.
+            // If something like :focus-within or a more specific selector like `.blah:has(:focus-visible)` for elements inside,
+            // it should be manually defined in CSS.
+            const focusSelector = rule.selectorText.replace(/:hover/g, ':focus-visible');
+            const focusRule = `${focusSelector} { ${rule.style.cssText} }`;
+
+            try {
+                targetStyleSheet.insertRule(focusRule, targetStyleSheet.cssRules.length);
+            } catch (e) {
+                console.warn('Failed to insert focus rule:', e);
+            }
+        }
+    });
+}
+
+/**
+ * Retrieves the stylesheet that should be used for dynamic rules
+ *
+ * @param {object} options - The options object
+ * @param {boolean} [options.fromExtension=false] - Indicates whether the rules are coming from extensions
+ * @return {CSSStyleSheet} The dynamic stylesheet
+ */
+function getDynamicStyleSheet({ fromExtension = false } = {}) {
+    if (fromExtension) {
+        if (!dynamicExtensionStyleSheet) {
+            const styleSheetElement = document.createElement('style');
+            styleSheetElement.setAttribute('id', 'dynamic-extension-styles');
+            document.head.appendChild(styleSheetElement);
+            dynamicExtensionStyleSheet = styleSheetElement.sheet;
+        }
+        return dynamicExtensionStyleSheet;
+    } else {
+        if (!dynamicStyleSheet) {
+            const styleSheetElement = document.createElement('style');
+            styleSheetElement.setAttribute('id', 'dynamic-styles');
+            document.head.appendChild(styleSheetElement);
+            dynamicStyleSheet = styleSheetElement.sheet;
+        }
+        return dynamicStyleSheet;
+    }
+}
+
+/**
+ * Initializes dynamic styles for ST
+ */
+export function initDynamicStyles() {
+    // Start observing the head for any new added stylesheets
+    observer.observe(document.head, {
+        childList: true,
+        subtree: true
+    });
+
+    // Process all stylesheets on initial load
+    Array.from(document.styleSheets).forEach(sheet => {
+        try {
+            applyDynamicFocusStyles(sheet, { fromExtension: sheet.href.toLowerCase().includes('scripts/extensions') });
+        } catch (e) {
+            console.warn('Failed to process stylesheet on initial load:', e);
+        }
+    });
+}

public/scripts/extensions.js

@@ -1,5 +1,6 @@
-import { callPopup, eventSource, event_types, saveSettings, saveSettingsDebounced, getRequestHeaders, animation_duration } from '../script.js';
+import { eventSource, event_types, saveSettings, saveSettingsDebounced, getRequestHeaders, animation_duration } from '../script.js';
 import { hideLoader, showLoader } from './loader.js';
+import { POPUP_RESULT, POPUP_TYPE, Popup, callGenericPopup } from './popup.js';
 import { renderTemplate, renderTemplateAsync } from './templates.js';
 import { isSubsetOf, setValueByPath } from './utils.js';
 export {
@@ -347,14 +348,12 @@ function autoConnectInputHandler() {
     saveSettingsDebounced();
 }
 
-function addExtensionsButtonAndMenu() {
+async function addExtensionsButtonAndMenu() {
-    const buttonHTML =
+    const buttonHTML = await renderTemplateAsync('wandButton');
-        '<div id="extensionsMenuButton" style="display: none;" class="fa-solid fa-magic-wand-sparkles" title="Extras Extensions" /></div>';
+    const extensionsMenuHTML = await renderTemplateAsync('wandMenu');
-    const extensionsMenuHTML = '<div id="extensionsMenu" class="options-content" style="display: none;"></div>';
 
     $(document.body).append(extensionsMenuHTML);
-
+    $('#leftSendForm').append(buttonHTML);
-    $('#leftSendForm').prepend(buttonHTML);
 
     const button = $('#extensionsMenuButton');
     const dropdown = $('#extensionsMenu');
@@ -505,7 +504,7 @@ function addExtensionScript(name, manifest) {
  * @param {boolean} isDisabled - Whether the extension is disabled or not.
  * @param {boolean} isExternal - Whether the extension is external or not.
  * @param {string} checkboxClass - The class for the checkbox HTML element.
- * @return {string} - The HTML string that represents the extension.
+ * @return {Promise<string>} - The HTML string that represents the extension.
  */
 async function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass) {
     const displayName = manifest.display_name;
@@ -557,8 +556,10 @@ async function generateExtensionHtml(name, manifest, isActive, isDisabled, isExt
     } else if (!isDisabled) { // Neither active nor disabled
         const requirements = new Set(manifest.requires);
         modules.forEach(x => requirements.delete(x));
-        const requirementsString = DOMPurify.sanitize([...requirements].join(', '));
+        if (requirements.size > 0) {
-        extensionHtml += `<p>Missing modules: <span class="failure">${requirementsString}</span></p>`;
+            const requirementsString = DOMPurify.sanitize([...requirements].join(', '));
+            extensionHtml += `<p>Missing modules: <span class="failure">${requirementsString}</span></p>`;
+        }
     }
 
     return extensionHtml;
@@ -633,7 +634,18 @@ async function showExtensionsDetails() {
             ${htmlDefault}
             ${htmlExternal}
         `;
-        popupPromise = callPopup(`<div class="extensions_info">${html}</div>`, 'text', '', { okButton: 'Close', wide: true, large: true });
+        /** @type {import('./popup.js').CustomPopupButton} */
+        const updateAllButton = {
+            text: 'Update all',
+            appendAtEnd: true,
+            action: async () => {
+                requiresReload = true;
+                await autoUpdateExtensions(true);
+                popup.complete(POPUP_RESULT.AFFIRMATIVE);
+            },
+        };
+        const popup = new Popup(`<div class="extensions_info">${html}</div>`, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, customButtons: [updateAllButton], allowVerticalScrolling: true });
+        popupPromise = popup.show();
     } catch (error) {
         toastr.error('Error loading extensions. See browser console for details.');
         console.error(error);
@@ -702,8 +714,8 @@ async function updateExtension(extensionName, quiet) {
 async function onDeleteClick() {
     const extensionName = $(this).data('name');
     // use callPopup to create a popup for the user to confirm before delete
-    const confirmation = await callPopup(`Are you sure you want to delete ${extensionName}?`, 'delete_extension');
+    const confirmation = await callGenericPopup(`Are you sure you want to delete ${extensionName}?`, POPUP_TYPE.CONFIRM, '', {});
-    if (confirmation) {
+    if (confirmation === POPUP_RESULT.AFFIRMATIVE) {
         await deleteExtension(extensionName);
     }
 }
@@ -799,7 +811,7 @@ async function loadExtensionSettings(settings, versionChanged) {
     manifests = await getManifests(extensionNames);
 
     if (versionChanged) {
-        await autoUpdateExtensions();
+        await autoUpdateExtensions(false);
     }
 
     await activateExtensions();
@@ -862,7 +874,12 @@ async function checkForExtensionUpdates(force) {
     }
 }
 
-async function autoUpdateExtensions() {
+/**
+ * Updates all 3rd-party extensions that have auto-update enabled.
+ * @param {boolean} forceAll Force update all even if not auto-updating
+ * @returns {Promise<void>}
+ */
+async function autoUpdateExtensions(forceAll) {
     if (!Object.values(manifests).some(x => x.auto_update)) {
         return;
     }
@@ -870,7 +887,7 @@ async function autoUpdateExtensions() {
     const banner = toastr.info('Auto-updating extensions. This may take several minutes.', 'Please wait...', { timeOut: 10000, extendedTimeOut: 10000 });
     const promises = [];
     for (const [id, manifest] of Object.entries(manifests)) {
-        if (manifest.auto_update && id.startsWith('third-party')) {
+        if ((forceAll || manifest.auto_update) && id.startsWith('third-party')) {
             console.debug(`Auto-updating 3rd-party extension: ${manifest.display_name} (${id})`);
             promises.push(updateExtension(id.replace('third-party', ''), true));
         }
@@ -961,8 +978,8 @@ export async function writeExtensionField(characterId, key, value) {
     }
 }
 
-jQuery(function () {
+jQuery(async function () {
-    addExtensionsButtonAndMenu();
+    await addExtensionsButtonAndMenu();
     $('#extensionsMenuButton').css('display', 'flex');
 
     $('#extensions_connect').on('click', connectClickHandler);
@@ -990,14 +1007,14 @@ jQuery(function () {
     <p><b>Disclaimer:</b> Please be aware that using external extensions can have unintended side effects and may pose security risks. Always make sure you trust the source before importing an extension. We are not responsible for any damage caused by third-party extensions.</p>
     <br>
     <p>Example: <tt> https://github.com/author/extension-name </tt></p>`;
-        const input = await callPopup(html, 'input');
+        const input = await callGenericPopup(html, POPUP_TYPE.INPUT, '');
 
         if (!input) {
             console.debug('Extension install cancelled');
             return;
         }
 
-        const url = input.trim();
+        const url = String(input).trim();
         await installExtension(url);
     });
 });

public/scripts/extensions/assets/index.js

@@ -440,7 +440,7 @@ jQuery(async () => {
     });
 
     windowHtml.find('#assets_filters').hide();
-    $('#extensions_settings').append(windowHtml);
+    $('#assets_container').append(windowHtml);
 
     eventSource.on(event_types.OPEN_CHARACTER_LIBRARY, async (forceDefault) => {
         openCharacterBrowser(forceDefault);

public/scripts/extensions/assets/window.html

@@ -1,11 +1,11 @@
 <div id="assets_ui">
     <div class="inline-drawer">
         <div class="inline-drawer-toggle inline-drawer-header">
-            <b>Download Extensions & Assets</b>
+            <b data-i18n="Download Extensions & Assets">Download Extensions & Assets</b>
             <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
         </div>
         <div class="inline-drawer-content">
-            <label for="assets-json-url-field">Assets URL</label>
+            <label for="assets-json-url-field" data-i18n="Assets URL">Assets URL</label>
             <div class="assets-connect-div">
                 <input id="assets-json-url-field" class="text_pole widthUnset flex1">
                 <i id="assets-connect-button" class="menu_button fa-solid fa-plug-circle-exclamation fa-xl redOverlayGlow"></i>
@@ -16,7 +16,7 @@
                 <input id="assets_search" class="text_pole flex1" placeholder="Search" type="search">
                 <div id="assets-characters-button" class="menu_button menu_button_icon">
                     <i class="fa-solid fa-image-portrait"></i>
-                    Characters
+                    <span data-i18n="Characters">Characters</span>
                 </div>
             </div>
             <div class="inline-drawer-content" id="assets_menu">

public/scripts/extensions/attachments/attach-button.html

@@ -0,0 +1,4 @@
+<div id="attachFile" class="list-group-item flex-container flexGap5" title="Attach a file or image to a current chat.">
+    <div class="fa-fw fa-solid fa-paperclip extensionsMenuExtensionButton"></div>
+    <span data-i18n="Attach a File">Attach a File</span>
+</div>

public/scripts/extensions/attachments/index.js

@@ -2,6 +2,10 @@ import { deleteAttachment, getDataBankAttachments, getDataBankAttachmentsForSour
 import { extension_settings, renderExtensionTemplateAsync } from '../../extensions.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { SlashCommandClosure } from '../../slash-commands/SlashCommandClosure.js';
+import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
+import { SlashCommandExecutor } from '../../slash-commands/SlashCommandExecutor.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 
 /**
@@ -193,12 +197,36 @@ async function enableDataBankAttachment(args, value) {
 }
 
 jQuery(async () => {
-    const buttons = await renderExtensionTemplateAsync('attachments', 'buttons', {});
+    const manageButton = await renderExtensionTemplateAsync('attachments', 'manage-button', {});
-    $('#extensionsMenu').prepend(buttons);
+    const attachButton = await renderExtensionTemplateAsync('attachments', 'attach-button', {});
+    $('#data_bank_wand_container').append(manageButton);
+    $('#attach_file_wand_container').append(attachButton);
+
+    /** A collection of local enum providers for this context of data bank */
+    const localEnumProviders = {
+        /**
+         * All attachments in the data bank based on the source argument. If not provided, defaults to 'chat'.
+         * @param {'name' | 'url'} returnField - Whether the enum should return the 'name' field or the 'url'
+         * @param {'chat' | 'character' | 'global' | ''} fallbackSource - The source to use if the source argument is not provided. Empty string to use all sources.
+         * */
+        attachments: (returnField = 'name', fallbackSource = 'chat') => (/** @type {SlashCommandExecutor} */ executor) => {
+            const source = executor.namedArgumentList.find(it => it.name == 'source')?.value ?? fallbackSource;
+            if (source instanceof SlashCommandClosure) throw new Error('Argument \'source\' does not support closures');
+            const attachments = getAttachments(source);
+
+            return attachments.map(attachment => new SlashCommandEnumValue(
+                returnField === 'name' ? attachment.name : attachment.url,
+                `${enumIcons.getStateIcon(!extension_settings.disabled_attachments.includes(attachment.url))} [${source}] ${returnField === 'url' ? attachment.name : attachment.url}`,
+                enumTypes.enum, enumIcons.file));
+        },
+    };
 
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'db',
-        callback: () => document.getElementById('manageAttachments')?.click(),
+        callback: () => {
+            document.getElementById('manageAttachments')?.click();
+            return '';
+        },
         aliases: ['databank', 'data-bank'],
         helpString: 'Open the data bank',
     }));
@@ -224,7 +252,13 @@ jQuery(async () => {
             new SlashCommandNamedArgument('source', 'The source of the attachment.', ARGUMENT_TYPE.STRING, false, false, '', TYPES),
         ],
         unnamedArgumentList: [
-            new SlashCommandArgument('The name or URL of the attachment.', ARGUMENT_TYPE.STRING, true, false),
+            SlashCommandArgument.fromProps({
+                description: 'The name or URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                acceptsMultiple: false,
+                enumProvider: localEnumProviders.attachments('name', ''),
+            }),
         ],
         returns: ARGUMENT_TYPE.STRING,
     }));
@@ -251,8 +285,18 @@ jQuery(async () => {
         helpString: 'Update an attachment in the Data Bank, preserving its name. Returns a new URL of the attachment.',
         namedArgumentList: [
             new SlashCommandNamedArgument('source', 'The source for the attachment.', ARGUMENT_TYPE.STRING, false, false, 'chat', TYPES),
-            new SlashCommandNamedArgument('name', 'The name of the attachment.', ARGUMENT_TYPE.STRING, false, false),
+            SlashCommandNamedArgument.fromProps({
-            new SlashCommandNamedArgument('url', 'The URL of the attachment to update.', ARGUMENT_TYPE.STRING, false, false),
+                name: 'name',
+                description: 'The name of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                enumProvider: localEnumProviders.attachments('name'),
+            }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'url',
+                description: 'The URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                enumProvider: localEnumProviders.attachments('url'),
+            }),
         ],
         unnamedArgumentList: [
             new SlashCommandArgument('The content of the file attachment.', ARGUMENT_TYPE.STRING, true, false),
@@ -269,7 +313,12 @@ jQuery(async () => {
             new SlashCommandNamedArgument('source', 'The source of the attachment.', ARGUMENT_TYPE.STRING, false, false, '', TYPES),
         ],
         unnamedArgumentList: [
-            new SlashCommandArgument('The name or URL of the attachment.', ARGUMENT_TYPE.STRING, true, false),
+            SlashCommandArgument.fromProps({
+                description: 'The name or URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.attachments('name', ''),
+            }),
         ],
     }));
 
@@ -282,7 +331,12 @@ jQuery(async () => {
             new SlashCommandNamedArgument('source', 'The source of the attachment.', ARGUMENT_TYPE.STRING, false, false, '', TYPES),
         ],
         unnamedArgumentList: [
-            new SlashCommandArgument('The name or URL of the attachment.', ARGUMENT_TYPE.STRING, true, false),
+            SlashCommandArgument.fromProps({
+                description: 'The name or URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.attachments('name', ''),
+            }),
         ],
     }));
 
@@ -295,7 +349,12 @@ jQuery(async () => {
             new SlashCommandNamedArgument('source', 'The source of the attachment.', ARGUMENT_TYPE.STRING, false, false, 'chat', TYPES),
         ],
         unnamedArgumentList: [
-            new SlashCommandArgument('The name or URL of the attachment.', ARGUMENT_TYPE.STRING, true, false),
+            SlashCommandArgument.fromProps({
+                description: 'The name or URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.attachments(),
+            }),
         ],
     }));
 });

public/scripts/extensions/attachments/manage-button.html

@@ -1,7 +1,4 @@
-<div id="attachFile" class="list-group-item flex-container flexGap5" title="Attach a file or image to a current chat.">
+
-    <div class="fa-fw fa-solid fa-paperclip extensionsMenuExtensionButton"></div>
-    <span data-i18n="Attach a File">Attach a File</span>
-</div>
 
 <div id="manageAttachments" class="list-group-item flex-container flexGap5" title="View global, character, or data files.">
     <div class="fa-fw fa-solid fa-book-open-reader extensionsMenuExtensionButton"></div>

public/scripts/extensions/attachments/manager.html

@@ -53,6 +53,14 @@
                 <i class="fa-solid fa-square"></i>
                 <span data-i18n="Select None">Select None</span>
             </div>
+            <div class="menu_button menu_button_icon bulkActionDisable" title="Disable selected attachments">
+                <i class="fa-solid fa-comment-slash"></i>
+                <span data-i18n="Disable">Disable</span>
+            </div>
+            <div class="menu_button menu_button_icon bulkActionEnable" title="Enable selected attachments">
+                <i class="fa-solid fa-comment"></i>
+                <span data-i18n="Enable">Enable</span>
+            </div>
             <div class="menu_button menu_button_icon bulkActionDelete" title="Delete selected attachments">
                 <i class="fa-solid fa-trash"></i>
                 <span data-i18n="Delete">Delete</span>
@@ -88,8 +96,8 @@
         <div class="flex-container flexFlowColumn">
             <strong><small class="characterAttachmentsName"></small></strong>
             <small>
-                <span data-i18n="These files are available the current character in all chats they are in.">
+                <span data-i18n="These files are available for the current character in all chats they are in.">
-                    These files are available the current character in all chats they are in.
+                    These files are available for the current character in all chats they are in.
                 </span>
                 <span>
                     <span data-i18n="Saved locally. Not exported.">
@@ -113,8 +121,8 @@
         </h3>
         <div class="flex-container flexFlowColumn">
             <strong><small class="chatAttachmentsName"></small></strong>
-            <small data-i18n="These files are available to all characters in the current chat.">
+            <small data-i18n="These files are available for all characters in the current chat.">
-                These files are available to all characters in the current chat.
+                These files are available for all characters in the current chat.
             </small>
         </div>
         <div class="chatAttachmentsList attachmentsList"></div>

public/scripts/extensions/caption/index.js

@@ -1,6 +1,6 @@
-import { getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
+import { ensureImageFormatSupported, getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
 import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules, renderExtensionTemplateAsync } from '../../extensions.js';
-import { callPopup, getRequestHeaders, saveSettingsDebounced, substituteParams } from '../../../script.js';
+import { callPopup, getRequestHeaders, saveSettingsDebounced, substituteParamsExtended } from '../../../script.js';
 import { getMessageTimeStamp } from '../../RossAscends-mods.js';
 import { SECRET_KEYS, secret_state } from '../../secrets.js';
 import { getMultimodalCaption } from '../shared.js';
@@ -8,6 +8,8 @@ import { textgen_types, textgenerationwebui_settings } from '../../textgen-setti
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { SlashCommandEnumValue } from '../../slash-commands/SlashCommandEnumValue.js';
+import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = 'caption';
@@ -95,7 +97,7 @@ async function sendCaptionedMessage(caption, image) {
         template += ' {{caption}}';
     }
 
-    let messageText = substituteParams(template).replace(/{{caption}}/i, caption);
+    let messageText = substituteParamsExtended(template, { caption: caption });
 
     if (extension_settings.caption.refine_mode) {
         messageText = await callPopup(
@@ -272,7 +274,7 @@ async function getCaptionForFile(file, prompt, quiet) {
     try {
         setSpinnerIcon();
         const context = getContext();
-        const fileData = await getBase64Async(file);
+        const fileData = await getBase64Async(await ensureImageFormatSupported(file));
         const base64Format = fileData.split(',')[0].split(';')[0].split('/')[1];
         const base64Data = fileData.split(',')[1];
         const { caption } = await doCaptionRequest(base64Data, fileData, prompt);
@@ -342,7 +344,7 @@ jQuery(async function () {
             Generate Caption
         </div>`);
 
-        $('#extensionsMenu').prepend(sendButton);
+        $('#caption_wand_container').append(sendButton);
         $(sendButton).on('click', () => {
             const hasCaptionModule =
                 (modules.includes('caption') && extension_settings.caption.source === 'extras') ||
@@ -377,6 +379,12 @@ jQuery(async function () {
     }
     function switchMultimodalBlocks() {
         const isMultimodal = extension_settings.caption.source === 'multimodal';
+        $('#caption_ollama_pull').on('click', (e) => {
+            const presetModel = extension_settings.caption.multimodal_model !== 'ollama_current' ? extension_settings.caption.multimodal_model : '';
+            e.preventDefault();
+            $('#ollama_download_model').trigger('click');
+            $('#dialogue_popup_input').val(presetModel);
+        });
         $('#caption_multimodal_block').toggle(isMultimodal);
         $('#caption_prompt_block').toggle(isMultimodal);
         $('#caption_multimodal_api').val(extension_settings.caption.multimodal_api);
@@ -401,7 +409,7 @@ jQuery(async function () {
     }
     async function addSettings() {
         const html = await renderExtensionTemplateAsync('caption', 'settings');
-        $('#extensions_settings2').append(html);
+        $('#caption_container').append(html);
     }
 
     await addSettings();
@@ -445,11 +453,14 @@ jQuery(async function () {
         returns: 'caption',
         namedArgumentList: [
             new SlashCommandNamedArgument(
-                'quiet', 'suppress sending a captioned message', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false', ['true', 'false'],
+                'quiet', 'suppress sending a captioned message', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false',
-            ),
-            new SlashCommandNamedArgument(
-                'id', 'get image from a message with this ID', [ARGUMENT_TYPE.NUMBER], false, false,
             ),
+            SlashCommandNamedArgument.fromProps({
+                name: 'id',
+                description: 'get image from a message with this ID',
+                typeList: [ARGUMENT_TYPE.NUMBER],
+                enumProvider: commonEnumProviders.messages(),
+            }),
         ],
         unnamedArgumentList: [
             new SlashCommandArgument(

public/scripts/extensions/caption/settings.html

@@ -2,38 +2,39 @@
 <div class="caption_settings">
     <div class="inline-drawer">
         <div class="inline-drawer-toggle inline-drawer-header">
-            <b>Image Captioning</b>
+            <b data-i18n="Image Captioning">Image Captioning</b>
             <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
         </div>
         <div class="inline-drawer-content">
-            <label for="caption_source">Source</label>
+            <label for="caption_source" data-i18n="Source">Source</label>
             <select id="caption_source" class="text_pole">
-                <option value="local">Local</option>
+                <option value="local" data-i18n="Local">Local</option>
-                <option value="multimodal">Multimodal (OpenAI / Anthropic / llama / Google)</option>
+                <option value="multimodal" data-i18n="Multimodal (OpenAI / Anthropic / llama / Google)">Multimodal (OpenAI / Anthropic / llama / Google)</option>
-                <option value="extras">Extras</option>
+                <option value="extras" data-i18n="Extras">Extras</option>
-                <option value="horde">Horde</option>
+                <option value="horde" data-i18n="Horde">Horde</option>
             </select>
             <div id="caption_multimodal_block" class="flex-container wide100p">
                 <div class="flex1 flex-container flexFlowColumn flexNoGap">
-                    <label for="caption_multimodal_api">API</label>
+                    <label for="caption_multimodal_api" data-i18n="API">API</label>
                     <select id="caption_multimodal_api" class="flex1 text_pole">
                         <option value="anthropic">Anthropic</option>
-                        <option value="custom">Custom (OpenAI-compatible)</option>
+                        <option value="custom" data-i18n="Custom (OpenAI-compatible)">Custom (OpenAI-compatible)</option>
                         <option value="google">Google MakerSuite</option>
                         <option value="koboldcpp">KoboldCpp</option>
                         <option value="llamacpp">llama.cpp</option>
                         <option value="ollama">Ollama</option>
                         <option value="openai">OpenAI</option>
                         <option value="openrouter">OpenRouter</option>
-                        <option value="ooba">Text Generation WebUI (oobabooga)</option>
+                        <option value="ooba" data-i18n="Text Generation WebUI (oobabooga)">Text Generation WebUI (oobabooga)</option>
                     </select>
                 </div>
                 <div class="flex1 flex-container flexFlowColumn flexNoGap">
-                    <label for="caption_multimodal_model">Model</label>
+                    <label for="caption_multimodal_model" data-i18n="Model">Model</label>
                     <select id="caption_multimodal_model" class="flex1 text_pole">
                         <option data-type="openai" value="gpt-4-vision-preview">gpt-4-vision-preview</option>
                         <option data-type="openai" value="gpt-4-turbo">gpt-4-turbo</option>
                         <option data-type="openai" value="gpt-4o">gpt-4o</option>
+                        <option data-type="anthropic" value="claude-3-5-sonnet-20240620">claude-3-5-sonnet-20240620</option>
                         <option data-type="anthropic" value="claude-3-opus-20240229">claude-3-opus-20240229</option>
                         <option data-type="anthropic" value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</option>
                         <option data-type="anthropic" value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
@@ -44,9 +45,11 @@
                         <option data-type="openrouter" value="openai/gpt-4-turbo">openai/gpt-4-turbo</option>
                         <option data-type="openrouter" value="haotian-liu/llava-13b">haotian-liu/llava-13b</option>
                         <option data-type="openrouter" value="fireworks/firellava-13b">fireworks/firellava-13b</option>
+                        <option data-type="openrouter" value="anthropic/claude-3.5-sonnet">anthropic/claude-3.5-sonnet</option>
                         <option data-type="openrouter" value="anthropic/claude-3-haiku">anthropic/claude-3-haiku</option>
                         <option data-type="openrouter" value="anthropic/claude-3-sonnet">anthropic/claude-3-sonnet</option>
                         <option data-type="openrouter" value="anthropic/claude-3-opus">anthropic/claude-3-opus</option>
+                        <option data-type="openrouter" value="anthropic/claude-3.5-sonnet:beta">anthropic/claude-3.5-sonnet:beta</option>
                         <option data-type="openrouter" value="anthropic/claude-3-haiku:beta">anthropic/claude-3-haiku:beta</option>
                         <option data-type="openrouter" value="anthropic/claude-3-sonnet:beta">anthropic/claude-3-sonnet:beta</option>
                         <option data-type="openrouter" value="anthropic/claude-3-opus:beta">anthropic/claude-3-opus:beta</option>
@@ -54,36 +57,42 @@
                         <option data-type="openrouter" value="google/gemini-pro-vision">google/gemini-pro-vision</option>
                         <option data-type="openrouter" value="google/gemini-flash-1.5">google/gemini-flash-1.5</option>
                         <option data-type="openrouter" value="liuhaotian/llava-yi-34b">liuhaotian/llava-yi-34b</option>
-                        <option data-type="ollama" value="ollama_current">[Currently selected]</option>
+                        <option data-type="ollama" value="ollama_current" data-i18n="currently_selected">[Currently selected]</option>
-                        <option data-type="ollama" value="bakllava:latest">bakllava:latest</option>
+                        <option data-type="ollama" value="bakllava">bakllava</option>
-                        <option data-type="ollama" value="llava:latest">llava:latest</option>
+                        <option data-type="ollama" value="llava">llava</option>
-                        <option data-type="llamacpp" value="llamacpp_current">[Currently loaded]</option>
+                        <option data-type="ollama" value="llava-llama3">llava-llama3</option>
-                        <option data-type="ooba" value="ooba_current">[Currently loaded]</option>
+                        <option data-type="ollama" value="llava-phi3">llava-phi3</option>
-                        <option data-type="koboldcpp" value="koboldcpp_current">[Currently loaded]</option>
+                        <option data-type="ollama" value="moondream">moondream</option>
-                        <option data-type="custom" value="custom_current">[Currently selected]</option>
+                        <option data-type="llamacpp" value="llamacpp_current" data-i18n="currently_loaded">[Currently loaded]</option>
+                        <option data-type="ooba" value="ooba_current" data-i18n="currently_loaded">[Currently loaded]</option>
+                        <option data-type="koboldcpp" value="koboldcpp_current" data-i18n="currently_loaded">[Currently loaded]</option>
+                        <option data-type="custom" value="custom_current" data-i18n="currently_selected">[Currently selected]</option>
                     </select>
                 </div>
+                <div data-type="ollama">
+                    The model must be downloaded first! Do it with the <code>ollama pull</code> command or <a href="#" id="caption_ollama_pull">click here</a>.
+                </div>
                 <label data-type="openai,anthropic,google" class="checkbox_label flexBasis100p" for="caption_allow_reverse_proxy" title="Allow using reverse proxy if defined and valid.">
                     <input id="caption_allow_reverse_proxy" type="checkbox" class="checkbox">
-                    Allow reverse proxy
+                    <span data-i18n="Allow reverse proxy">Allow reverse proxy</span>
                 </label>
                 <div class="flexBasis100p m-b-1">
-                    <small><b>Hint:</b> Set your API keys and endpoints in the 'API Connections' tab first.</small>
+                    <small><b data-i18n="Hint:">Hint:</b> <span data-i18n="Set your API keys and endpoints in the 'API Connections' tab first.">Set your API keys and endpoints in the 'API Connections' tab first.</span></small>
                 </div>
             </div>
             <div id="caption_prompt_block">
-                <label for="caption_prompt">Caption Prompt</label>
+                <label for="caption_prompt" data-i18n="Caption Prompt">Caption Prompt</label>
                 <textarea id="caption_prompt" class="text_pole" rows="1" placeholder="&lt; Use default &gt;">${PROMPT_DEFAULT}</textarea>
                 <label class="checkbox_label margin-bot-10px" for="caption_prompt_ask" title="Ask for a custom prompt every time an image is captioned.">
                     <input id="caption_prompt_ask" type="checkbox" class="checkbox">
-                    Ask every time
+                    <span data-i18n="Ask every time">Ask every time</span>
                 </label>
             </div>
-            <label for="caption_template">Message Template <small>(use <code>&lcub;&lcub;caption&rcub;&rcub;</code> macro)</small></label>
+            <label for="caption_template"><span data-i18n="Message Template">Message Template</span> <small><span data-i18n="(use _space">(use </span> <code>&lcub;&lcub;caption&rcub;&rcub;</code> <span data-i18n="macro)">macro)</span></small></label>
             <textarea id="caption_template" class="text_pole" rows="2" placeholder="&lt; Use default &gt;">${TEMPLATE_DEFAULT}</textarea>
             <label class="checkbox_label margin-bot-10px" for="caption_refine_mode">
                 <input id="caption_refine_mode" type="checkbox" class="checkbox">
-                Edit captions before saving
+                <span data-i18n="Edit captions before saving">Edit captions before saving</span>
             </label>
         </div>
     </div>

public/scripts/extensions/expressions/index.js

@@ -1,4 +1,4 @@
-import { callPopup, eventSource, event_types, generateQuietPrompt, getRequestHeaders, online_status, saveSettingsDebounced, substituteParams } from '../../../script.js';
+import { callPopup, eventSource, event_types, generateQuietPrompt, getRequestHeaders, online_status, saveSettingsDebounced, substituteParams, substituteParamsExtended, system_message_types } from '../../../script.js';
 import { dragElement, isMobile } from '../../RossAscends-mods.js';
 import { getContext, getApiUrl, modules, extension_settings, ModuleWorkerWrapper, doExtrasFetch, renderExtensionTemplateAsync } from '../../extensions.js';
 import { loadMovingUIState, power_user } from '../../power-user.js';
@@ -10,6 +10,8 @@ import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument } from '../../slash-commands/SlashCommandArgument.js';
 import { isFunctionCallingSupported } from '../../openai.js';
+import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
+import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = 'expressions';
@@ -87,6 +89,7 @@ function getFallbackExpression() {
  */
 function toggleTalkingHeadCommand(_) {
     setTalkingHeadState(!extension_settings.expressions.talkinghead);
+    return String(extension_settings.expressions.talkinghead);
 }
 
 function isVisualNovelMode() {
@@ -914,6 +917,7 @@ async function setSpriteSetCommand(_, folder) {
     // moduleWorker();
     const vnMode = isVisualNovelMode();
     await sendExpressionCall(folder, lastExpression, true, vnMode);
+    return '';
 }
 
 async function classifyCommand(_, text) {
@@ -935,7 +939,7 @@ async function classifyCommand(_, text) {
 async function setSpriteSlashCommand(_, spriteId) {
     if (!spriteId) {
         console.log('No sprite id provided');
-        return;
+        return '';
     }
 
     spriteId = spriteId.trim().toLowerCase();
@@ -955,7 +959,7 @@ async function setSpriteSlashCommand(_, spriteId) {
 
         if (!spriteItem) {
             console.log('No sprite found for search term ' + spriteId);
-            return;
+            return '';
         }
 
         label = spriteItem.label;
@@ -963,6 +967,7 @@ async function setSpriteSlashCommand(_, spriteId) {
 
     const vnMode = isVisualNovelMode();
     await sendExpressionCall(spriteFolderName, label, true, vnMode);
+    return label;
 }
 
 /**
@@ -1008,8 +1013,7 @@ async function getLlmPrompt(labels) {
     }
 
     const labelsString = labels.map(x => `"${x}"`).join(', ');
-    const prompt = substituteParams(String(extension_settings.expressions.llmPrompt))
+    const prompt = substituteParamsExtended(String(extension_settings.expressions.llmPrompt), { labels: labelsString });
-        .replace(/{{labels}}/gi, labelsString);
     return prompt;
 }
 
@@ -1187,7 +1191,7 @@ function getLastCharacterMessage() {
     const reversedChat = context.chat.slice().reverse();
 
     for (let mes of reversedChat) {
-        if (mes.is_user || mes.is_system) {
+        if (mes.is_user || mes.is_system || mes.extra?.type === system_message_types.NARRATOR) {
             continue;
         }
 
@@ -1326,10 +1330,18 @@ async function renderFallbackExpressionPicker() {
     }
 }
 
+function getCachedExpressions() {
+    if (!Array.isArray(expressionsList)) {
+        return [];
+    }
+
+    return [...expressionsList, ...extension_settings.expressions.custom].filter(onlyUnique);
+}
+
 async function getExpressionsList() {
     // Return cached list if available
     if (Array.isArray(expressionsList)) {
-        return [...expressionsList, ...extension_settings.expressions.custom].filter(onlyUnique);
+        return getCachedExpressions();
     }
 
     /**
@@ -1917,7 +1929,7 @@ function migrateSettings() {
     }
     async function addSettings() {
         const template = await renderExtensionTemplateAsync(MODULE_NAME, 'settings');
-        $('#extensions_settings').append(template);
+        $('#expressions_container').append(template);
         $('#expression_override_button').on('click', onClickExpressionOverrideButton);
         $('#expressions_show_default').on('input', onExpressionsShowDefaultInput);
         $('#expression_upload_pack_button').on('click', onClickExpressionUploadPackButton);
@@ -2033,17 +2045,31 @@ function migrateSettings() {
     });
     eventSource.on(event_types.MOVABLE_PANELS_RESET, updateVisualNovelModeDebounced);
     eventSource.on(event_types.GROUP_UPDATED, updateVisualNovelModeDebounced);
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'sprite',
+
+    const localEnumProviders = {
+        expressions: () => getCachedExpressions().map(expression => {
+            const isCustom = extension_settings.expressions.custom?.includes(expression);
+            return new SlashCommandEnumValue(expression, null, isCustom ? enumTypes.name : enumTypes.enum, isCustom ? 'C' : 'D');
+        }),
+    };
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'sprite',
         aliases: ['emote'],
         callback: setSpriteSlashCommand,
         unnamedArgumentList: [
-            new SlashCommandArgument(
+            SlashCommandArgument.fromProps({
-                'spriteId', [ARGUMENT_TYPE.STRING], true,
+                description: 'spriteId',
-            ),
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.expressions,
+            }),
         ],
         helpString: 'Force sets the sprite for the current character.',
+        returns: 'label',
     }));
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'spriteoverride',
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'spriteoverride',
         aliases: ['costume'],
         callback: setSpriteSetCommand,
         unnamedArgumentList: [
@@ -2053,22 +2079,29 @@ function migrateSettings() {
         ],
         helpString: 'Sets an override sprite folder for the current character. If the name starts with a slash or a backslash, selects a sub-folder in the character-named folder. Empty value to reset to default.',
     }));
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'lastsprite',
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
-        callback: (_, value) => lastExpression[value.trim()] ?? '',
+        name: 'lastsprite',
+        callback: (_, value) => lastExpression[String(value).trim()] ?? '',
         returns: 'sprite',
         unnamedArgumentList: [
-            new SlashCommandArgument(
+            SlashCommandArgument.fromProps({
-                'charName', [ARGUMENT_TYPE.STRING], true,
+                description: 'character name',
-            ),
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: commonEnumProviders.characters('character'),
+            }),
         ],
         helpString: 'Returns the last set sprite / expression for the named character.',
     }));
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'th',
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'th',
         callback: toggleTalkingHeadCommand,
         aliases: ['talkinghead'],
         helpString: 'Character Expressions: toggles <i>Image Type - talkinghead (extras)</i> on/off.',
+        returns: ARGUMENT_TYPE.BOOLEAN,
     }));
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'classify',
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'classify',
         callback: classifyCommand,
         unnamedArgumentList: [
             new SlashCommandArgument(

public/scripts/extensions/expressions/settings.html

@@ -1,65 +1,65 @@
 <div class="expression_settings">
     <div class="inline-drawer">
         <div class="inline-drawer-toggle inline-drawer-header">
-            <b>Character Expressions</b>
+            <b data-i18n="Character Expressions">Character Expressions</b>
             <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
         </div>
 
         <div class="inline-drawer-content">
             <label class="checkbox_label" for="expression_translate" title="Use the selected API from Chat Translation extension settings.">
                 <input id="expression_translate" type="checkbox">
-                <span>Translate text to English before classification</span>
+                <span data-i18n="Translate text to English before classification">Translate text to English before classification</span>
             </label>
             <label class="checkbox_label" for="expressions_show_default">
                 <input id="expressions_show_default" type="checkbox">
-                <span>Show default images (emojis) if sprite missing</span>
+                <span data-i18n="Show default images (emojis) if sprite missing">Show default images (emojis) if sprite missing</span>
             </label>
             <label id="image_type_block" class="checkbox_label" for="image_type_toggle">
                 <input id="image_type_toggle" type="checkbox">
-                <span>Image Type - talkinghead (extras)</span>
+                <span data-i18n="Image Type - talkinghead (extras)">Image Type - talkinghead (extras)</span>
             </label>
             <div class="expression_api_block m-b-1 m-t-1">
-                <label for="expression_api">Classifier API</label>
+                <label for="expression_api" data-i18n="Classifier API">Classifier API</label>
-                <small>Select the API for classifying expressions.</small>
+                <small data-i18n="Select the API for classifying expressions.">Select the API for classifying expressions.</small>
                 <select id="expression_api" class="flex1 margin0">
-                    <option value="0">Local</option>
+                    <option value="0" data-i18n="Local">Local</option>
-                    <option value="1">Extras</option>
+                    <option value="1" data-i18n="Extras">Extras</option>
-                    <option value="2">LLM</option>
+                    <option value="2" data-i18n="LLM">LLM</option>
                 </select>
             </div>
             <div class="expression_llm_prompt_block m-b-1 m-t-1">
                 <label for="expression_llm_prompt" class="title_restorable">
-                    <span>LLM Prompt</span>
+                    <span data-i18n="LLM Prompt">LLM Prompt</span>
                     <div id="expression_llm_prompt_restore" title="Restore default value" class="right_menu_button">
                         <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                     </div>
                 </label>
-                <small>Will be used if the API doesn't support JSON schemas or function calling.</small>
+                <small data-i18n="Will be used if the API doesn't support JSON schemas or function calling.">Will be used if the API doesn't support JSON schemas or function calling.</small>
                 <textarea id="expression_llm_prompt" type="text" class="text_pole textarea_compact" rows="2" placeholder="Use &lcub;&lcub;labels&rcub;&rcub; special macro."></textarea>
             </div>
             <div class="expression_fallback_block m-b-1 m-t-1">
-                <label for="expression_fallback">Default / Fallback Expression</label>
+                <label for="expression_fallback" data-i18n="Default / Fallback Expression">Default / Fallback Expression</label>
-                <small>Set the default and fallback expression being used when no matching expression is found.</small>
+                <small data-i18n="Set the default and fallback expression being used when no matching expression is found.">Set the default and fallback expression being used when no matching expression is found.</small>
                 <select id="expression_fallback" class="flex1 margin0" data-i18n="Fallback Expression" placeholder="Fallback Expression"></select>
             </div>
             <div class="expression_custom_block m-b-1 m-t-1">
-                <label for="expression_custom">Custom Expressions</label>
+                <label for="expression_custom" data-i18n="Custom Expressions">Custom Expressions</label>
-                <small>Can be set manually or with an <tt>/emote</tt> slash command.</small>
+                <small><span data-i18n="Can be set manually or with an _space">Can be set manually or with an </span><tt>/emote</tt><span data-i18n="space_ slash command."> slash command.</span></small>
                 <div class="flex-container">
                     <select id="expression_custom" class="flex1 margin0"><select>
                     <i id="expression_custom_add" class="menu_button fa-solid fa-plus margin0" title="Add"></i>
                     <i id="expression_custom_remove" class="menu_button fa-solid fa-xmark margin0" title="Remove"></i>
                 </div>
             </div>
-            <div id="no_chat_expressions">
+            <div id="no_chat_expressions" data-i18n="Open a chat to see the character expressions.">
                 Open a chat to see the character expressions.
             </div>
             <div id="open_chat_expressions">
                 <div class="offline_mode">
-                    <small>You are in offline mode. Click on the image below to set the expression.</small>
+                    <small data-i18n="You are in offline mode. Click on the image below to set the expression.">You are in offline mode. Click on the image below to set the expression.</small>
                 </div>
-                <label for="expression_override">Sprite Folder Override</label>
+                <label for="expression_override" data-i18n="Sprite Folder Override">Sprite Folder Override</label>
-                <small>Use a forward slash to specify a subfolder. Example: <tt>Bob/formal</tt></small>
+                <small><span data-i18n="Use a forward slash to specify a subfolder. Example: _space">Use a forward slash to specify a subfolder. Example: </span><tt>Bob/formal</tt></small>
                 <div class="flex-container flexnowrap">
                     <input id="expression_override" type="text" class="text_pole" placeholder="Override folder name" />
                     <input id="expression_override_button" class="menu_button" type="submit" value="Submit" />
@@ -67,17 +67,17 @@
                 <div class="expression_buttons flex-container spaceEvenly">
                     <div id="expression_upload_pack_button" class="menu_button">
                         <i class="fa-solid fa-file-zipper"></i>
-                        <span>Upload sprite pack (ZIP)</span>
+                        <span data-i18n="Upload sprite pack (ZIP)">Upload sprite pack (ZIP)</span>
                     </div>
                     <div id="expression_override_cleanup_button" class="menu_button">
                         <i class="fa-solid fa-trash-can"></i>
-                        <span>Remove all image overrides</span>
+                        <span data-i18n="Remove all image overrides">Remove all image overrides</span>
                     </div>
                 </div>
-                <p class="hint"><b>Hint:</b> <i>Create new folder in the <b>/characters/</b> folder of your user data directory and name it as the name of the character.
+                <p class="hint"><b data-i18n="Hint:">Hint:</b> <i><span data-i18n="Create new folder in the _space">Create new folder in the </span><b>/characters/</b> <span data-i18n="folder of your user data directory and name it as the name of the character.">folder of your user data directory and name it as the name of the character.</span>
-                Put images with expressions there. File names should follow the pattern: <tt>[expression_label].[image_format]</tt></i></p>
+                <span data-i18n="Put images with expressions there. File names should follow the pattern:">Put images with expressions there. File names should follow the pattern: </span><tt data-i18n="expression_label_pattern">[expression_label].[image_format]</tt></i></p>
                 <h3 id="image_list_header">
-                    <strong>Sprite set:</strong>&nbsp;<span id="image_list_header_name"></span>
+                    <strong data-i18n="Sprite set:">Sprite set:</strong>&nbsp;<span id="image_list_header_name"></span>
                 </h3>
                 <div id="image_list"></div>
 

public/scripts/extensions/gallery/index.js

@@ -11,6 +11,8 @@ import { dragElement } from '../../RossAscends-mods.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { DragAndDropHandler } from '../../dragdrop.js';
+import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 
 const extensionName = 'gallery';
 const extensionFolderPath = `scripts/extensions/${extensionName}/`;
@@ -56,7 +58,8 @@ async function getGalleryItems(url) {
  * @returns {Promise<void>} - Promise representing the completion of the gallery initialization.
  */
 async function initGallery(items, url) {
-    $('#dragGallery').nanogallery2({
+    const gallery = $('#dragGallery');
+    gallery.nanogallery2({
         'items': items,
         thumbnailWidth: 'auto',
         thumbnailHeight: thumbnailHeight,
@@ -80,44 +83,24 @@ async function initGallery(items, url) {
 
 
     eventSource.on('resizeUI', function (elmntName) {
-        jQuery('#dragGallery').nanogallery2('resize');
+        gallery.nanogallery2('resize');
     });
 
-    const dropZone = $('#dragGallery');
+    const dragDropHandler = new DragAndDropHandler('#dragGallery', async (files, event) => {
-    //remove any existing handlers
+        let file = files[0];
-    dropZone.off('dragover');
-    dropZone.off('dragleave');
-    dropZone.off('drop');
-
-    // Set dropzone height to be the same as the parent
-    dropZone.css('height', dropZone.parent().css('height'));
-
-    // Initialize dropzone handlers
-    dropZone.on('dragover', function (e) {
-        e.stopPropagation();  // Ensure this event doesn't propagate
-        e.preventDefault();
-        $(this).addClass('dragging');  // Add a CSS class to change appearance during drag-over
-    });
-
-    dropZone.on('dragleave', function (e) {
-        e.stopPropagation();  // Ensure this event doesn't propagate
-        $(this).removeClass('dragging');
-    });
-
-    dropZone.on('drop', function (e) {
-        e.stopPropagation();  // Ensure this event doesn't propagate
-        e.preventDefault();
-        $(this).removeClass('dragging');
-        let file = e.originalEvent.dataTransfer.files[0];
         uploadFile(file, url);  // Added url parameter to know where to upload
     });
 
+
+    // Set dropzone height to be the same as the parent
+    gallery.css('height', gallery.parent().css('height'));
+
     //let images populate first
     await delay(100);
     //unset the height (which must be getting set by the gallery library at some point)
-    $('#dragGallery').css('height', 'unset');
+    gallery.css('height', 'unset');
     //force a resize to make images display correctly
-    jQuery('#dragGallery').nanogallery2('resize');
+    gallery.nanogallery2('resize');
 }
 
 /**
@@ -419,7 +402,10 @@ function viewWithDragbox(items) {
 // Registers a simple command for opening the char gallery.
 SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'show-gallery',
     aliases: ['sg'],
-    callback: showGalleryCommand,
+    callback: () => {
+        showCharGallery();
+        return '';
+    },
     helpString: 'Shows the gallery.',
 }));
 SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'list-gallery',
@@ -427,21 +413,22 @@ SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'list-gallery
     callback: listGalleryCommand,
     returns: 'list of images',
     namedArgumentList: [
-        new SlashCommandNamedArgument(
+        SlashCommandNamedArgument.fromProps({
-            'char', 'character name', [ARGUMENT_TYPE.STRING], false,
+            name: 'char',
-        ),
+            description: 'character name',
-        new SlashCommandNamedArgument(
+            typeList: [ARGUMENT_TYPE.STRING],
-            'group', 'group name', [ARGUMENT_TYPE.STRING], false,
+            enumProvider: commonEnumProviders.characters('character'),
-        ),
+        }),
+        SlashCommandNamedArgument.fromProps({
+            name: 'group',
+            description: 'group name',
+            typeList: [ARGUMENT_TYPE.STRING],
+            enumProvider: commonEnumProviders.characters('group'),
+        }),
     ],
     helpString: 'List images in the gallery of the current char / group or a specified char / group.',
 }));
 
-
-function showGalleryCommand(args) {
-    showCharGallery();
-}
-
 async function listGalleryCommand(args) {
     try {
         let url = args.char ?? (args.group ? groups.find(it=>it.name == args.group)?.id : null) ?? (selected_group || this_chid);

public/scripts/extensions/memory/index.js

@@ -11,7 +11,7 @@ import {
     generateQuietPrompt,
     is_send_press,
     saveSettingsDebounced,
-    substituteParams,
+    substituteParamsExtended,
     generateRaw,
     getMaxContextSize,
 } from '../../../script.js';
@@ -24,6 +24,7 @@ import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 import { resolveVariable } from '../../variables.js';
+import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = '1_memory';
@@ -43,8 +44,7 @@ const formatMemoryValue = function (value) {
     value = value.trim();
 
     if (extension_settings.memory.template) {
-        let result = extension_settings.memory.template.replace(/{{summary}}/i, value);
+        return substituteParamsExtended(extension_settings.memory.template, { summary: value });
-        return substituteParams(result);
     } else {
         return `Summary: ${value}`;
     }
@@ -447,7 +447,7 @@ async function summarizeCallback(args, text) {
     }
 
     const source = args.source || extension_settings.memory.source;
-    const prompt = substituteParams((resolveVariable(args.prompt) || extension_settings.memory.prompt)?.replace(/{{words}}/gi, extension_settings.memory.promptWords));
+    const prompt = substituteParamsExtended((args.prompt || extension_settings.memory.prompt), { words: extension_settings.memory.promptWords });
 
     try {
         switch (source) {
@@ -534,7 +534,7 @@ async function summarizeChatMain(context, force, skipWIAN) {
     }
 
     console.log('Summarizing chat, messages since last summary: ' + messagesSinceLastSummary, 'words since last summary: ' + wordsSinceLastSummary);
-    const prompt = extension_settings.memory.prompt?.replace(/{{words}}/gi, extension_settings.memory.promptWords);
+    const prompt = substituteParamsExtended(extension_settings.memory.prompt, { words: extension_settings.memory.promptWords });
 
     if (!prompt) {
         console.debug('Summarization prompt is empty. Skipping summarization.');
@@ -900,7 +900,7 @@ function setupListeners() {
 jQuery(async function () {
     async function addExtensionControls() {
         const settingsHtml = await renderExtensionTemplateAsync('memory', 'settings', { defaultSettings });
-        $('#extensions_settings2').append(settingsHtml);
+        $('#summarize_container').append(settingsHtml);
         setupListeners();
         $('#summaryExtensionPopoutButton').off('click').on('click', function (e) {
             doPopout(e);
@@ -920,7 +920,12 @@ jQuery(async function () {
         callback: summarizeCallback,
         namedArgumentList: [
             new SlashCommandNamedArgument('source', 'API to use for summarization', [ARGUMENT_TYPE.STRING], false, false, '', ['main', 'extras']),
-            new SlashCommandNamedArgument('prompt', 'prompt to use for summarization', [ARGUMENT_TYPE.STRING, ARGUMENT_TYPE.VARIABLE_NAME], false, false, ''),
+            SlashCommandNamedArgument.fromProps({
+                name: 'prompt',
+                description: 'prompt to use for summarization',
+                typeList: [ARGUMENT_TYPE.STRING],
+                defaultValue: '',
+            }),
         ],
         unnamedArgumentList: [
             new SlashCommandArgument('text to summarize', [ARGUMENT_TYPE.STRING], false, false, ''),

public/scripts/extensions/memory/settings.html

@@ -2,7 +2,7 @@
     <div class="inline-drawer">
         <div class="inline-drawer-toggle inline-drawer-header">
             <div class="flex-container alignitemscenter margin0">
-                <b>Summarize</b>
+                <b data-i18n="ext_sum_title">Summarize</b>
                 <i id="summaryExtensionPopoutButton" class="fa-solid fa-window-restore menu_button margin0"></i>
             </div>
             <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
@@ -24,7 +24,7 @@
 
                 <textarea id="memory_contents" class="text_pole textarea_compact" rows="6" data-i18n="[placeholder]ext_sum_memory_placeholder" placeholder="Summary will be generated here..."></textarea>
                 <div class="memory_contents_controls">
-                    <div id="memory_force_summarize" data-summary-source="main" class="menu_button menu_button_icon" data-i18n="[title]ext_sum_force_tip" title="Trigger a summary update right now." data-i18n="Trigger a summary update right now.">
+                    <div id="memory_force_summarize" data-summary-source="main" class="menu_button menu_button_icon" title="Trigger a summary update right now." data-i18n="[title]ext_sum_force_tip">
                         <i class="fa-solid fa-database"></i>
                         <span data-i18n="ext_sum_force_text">Summarize now</span>
                     </div>

public/scripts/extensions/quick-reply/html/qrEditor.html

@@ -1,38 +1,42 @@
 <div id="qr--modalEditor">
 	<div id="qr--main">
-		<h3>Labels and Message</h3>
+		<h3 data-i18n="Labels and Message">Labels and Message</h3>
 		<div class="qr--labels">
 			<label>
-				<span class="qr--labelText">Label</span>
+				<span class="qr--labelText" data-i18n="Label">Label</span>
 				<input type="text" class="text_pole" id="qr--modal-label">
 			</label>
 			<label>
-				<span class="qr--labelText">Title</span>
+				<span class="qr--labelText" data-i18n="Title">Title</span>
-				<small class="qr--labelHint">(tooltip, leave empty to show message or /command)</small>
+				<small class="qr--labelHint" data-i18n="(tooltip, leave empty to show message or /command)">(tooltip, leave empty to show message or /command)</small>
 				<input type="text" class="text_pole" id="qr--modal-title">
 			</label>
 		</div>
 		<div class="qr--modal-messageContainer">
-			<label for="qr--modal-message">
+			<label for="qr--modal-message" data-i18n="Message / Command:">
 				Message / Command:
 			</label>
 			<div class="qr--modal-editorSettings">
 				<label class="checkbox_label">
 					<input type="checkbox" id="qr--modal-wrap">
-					<span>Word wrap</span>
+					<span data-i18n="Word wrap">Word wrap</span>
 				</label>
 				<label class="checkbox_label">
-					<span>Tab size:</span>
+					<span data-i18n="Tab size:">Tab size:</span>
 					<input type="number" min="1" max="9" id="qr--modal-tabSize" class="text_pole">
 				</label>
 				<label class="checkbox_label">
 					<input type="checkbox" id="qr--modal-executeShortcut">
-					<span>Ctrl+Enter to execute</span>
+					<span data-i18n="Ctrl+Enter to execute">Ctrl+Enter to execute</span>
+				</label>
+				<label class="checkbox_label">
+					<input type="checkbox" id="qr--modal-syntax">
+					<span>Syntax highlight</span>
 				</label>
 			</div>
 			<div id="qr--modal-messageHolder">
 				<pre id="qr--modal-messageSyntax"><code id="qr--modal-messageSyntaxInner" class="hljs language-stscript"></code></pre>
-				<textarea class="monospace" id="qr--modal-message" spellcheck="false"></textarea>
+				<textarea id="qr--modal-message" spellcheck="false"></textarea>
 			</div>
 		</div>
 	</div>
@@ -40,14 +44,14 @@
 
 
 	<div id="qr--qrOptions">
-		<h3>Context Menu</h3>
+		<h3 data-i18n="Context Menu">Context Menu</h3>
 		<div id="qr--ctxEditor">
 			<template id="qr--ctxItem">
 				<div class="qr--ctxItem" data-order="0">
 					<div class="drag-handle ui-sortable-handle">☰</div>
 					<select class="qr--set"></select>
 					<label class="qr--isChainedLabel checkbox_label" title="When enabled, the current Quick Reply will be sent together with (before) the clicked QR from the context menu.">
-						Chaining:
+						<span data-i18n="Chaining:">Chaining:</span>
 						<input type="checkbox" class="qr--isChained">
 					</label>
 					<div class="qr--delete menu_button menu_button_icon fa-solid fa-trash-can" title="Remove entry"></div>
@@ -59,48 +63,48 @@
 		</div>
 
 
-		<h3>Auto-Execute</h3>
+		<h3 data-i18n="Auto-Execute">Auto-Execute</h3>
 		<div class="flex-container flexFlowColumn">
 			<label class="checkbox_label" title="Prevent this quick reply from triggering other auto-executed quick replies while auto-executing (i.e., prevent recursive auto-execution)">
 				<input type="checkbox" id="qr--preventAutoExecute" >
-				<span><i class="fa-solid fa-fw fa-plane-slash"></i> Don't trigger auto-execute</span>
+				<span><i class="fa-solid fa-fw fa-plane-slash"></i><span data-i18n="Don't trigger auto-execute">Don't trigger auto-execute</span></span>
 			</label>
 			<label class="checkbox_label">
 				<input type="checkbox" id="qr--isHidden" >
-				<span><i class="fa-solid fa-fw fa-eye-slash"></i> Invisible (auto-execute only)</span>
+				<span><i class="fa-solid fa-fw fa-eye-slash"></i><span data-i18n="Invisible (auto-execute only)">Invisible (auto-execute only)</span></span>
 			</label>
 			<label class="checkbox_label">
 				<input type="checkbox" id="qr--executeOnStartup" >
-				<span><i class="fa-solid fa-fw fa-rocket"></i> Execute on app startup</span>
+				<span><i class="fa-solid fa-fw fa-rocket"></i><span data-i18n="Execute on startup">Execute on startup</span></span>
 			</label>
 			<label class="checkbox_label">
 				<input type="checkbox" id="qr--executeOnUser" >
-				<span><i class="fa-solid fa-fw fa-user"></i> Execute on user message</span>
+				<span><i class="fa-solid fa-fw fa-user"></i><span data-i18n="Execute on user message">Execute on user message</span></span>
 			</label>
 			<label class="checkbox_label">
 				<input type="checkbox" id="qr--executeOnAi" >
-				<span><i class="fa-solid fa-fw fa-robot"></i> Execute on AI message</span>
+				<span><i class="fa-solid fa-fw fa-robot"></i><span data-i18n="Execute on AI message">Execute on AI message</span></span>
 			</label>
 			<label class="checkbox_label">
 				<input type="checkbox" id="qr--executeOnChatChange" >
-				<span><i class="fa-solid fa-fw fa-message"></i> Execute on opening chat</span>
+				<span><i class="fa-solid fa-fw fa-message"></i><span data-i18n="Execute on chat change">Execute on chat change</span></span>
 			</label>
             <label class="checkbox_label">
                 <input type="checkbox" id="qr--executeOnGroupMemberDraft">
-                <span><i class="fa-solid fa-fw fa-people-group"></i> Execute before group member message</span>
+                <span><i class="fa-solid fa-fw fa-people-group"></i><span data-i18n="Execute on group member draft">Execute on group member draft</span></span>
             </label>
             <div class="flex-container alignItemsBaseline flexFlowColumn flexNoGap" title="Activate this quick reply when a World Info entry with the same Automation ID is triggered.">
-                <small>Automation ID</small>
+                <small data-i18n="Automation ID:">Automation ID</small>
                 <input type="text" id="qr--automationId" class="text_pole flex1" placeholder="( None )">
             </div>
 		</div>
 
 
-		<h3>Testing</h3>
+		<h3 data-i18n="Testing">Testing</h3>
 		<div id="qr--modal-executeButtons">
 			<div id="qr--modal-execute" class="qr--modal-executeButton menu_button" title="Execute the quick reply now">
 				<i class="fa-solid fa-play"></i>
-				Execute
+				<span data-i18n="Execute">Execute</span>
 			</div>
 			<div id="qr--modal-pause" class="qr--modal-executeButton menu_button" title="Pause / continue execution">
 				<span class="qr--modal-executeComboIcon">
@@ -115,7 +119,7 @@
 		<div id="qr--modal-executeProgress"></div>
 		<label class="checkbox_label">
 			<input type="checkbox" id="qr--modal-executeHide">
-			<span> Hide editor while executing</span>
+			<span title="Hide editor while executing"> Hide editor while executing</span>
 		</label>
 		<div id="qr--modal-executeErrors"></div>
 		<div id="qr--modal-executeResult"></div>

public/scripts/extensions/quick-reply/html/settings.html

@@ -1,22 +1,22 @@
 <div id="qr--settings">
 	<div class="inline-drawer">
 		<div class="inline-drawer-toggle inline-drawer-header">
-			<strong>Quick Reply</strong>
+			<strong data-i18n="Quick Reply">Quick Reply</strong>
 			<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
 		</div>
 		<div class="inline-drawer-content">
 			<label class="flex-container">
-				<input type="checkbox" id="qr--isEnabled"> Enable Quick Replies
+				<input type="checkbox" id="qr--isEnabled"><span data-i18n="Enable Quick Replies">Enable Quick Replies</span>
 			</label>
 			<label class="flex-container">
-				<input type="checkbox" id="qr--isCombined"> Combine buttons from all active sets
+				<input type="checkbox" id="qr--isCombined"><span data-i18n="Combine Quick Replies">Combine Quick Replies</span>
 			</label>
 
 			<hr>
 
 			<div id="qr--global">
 				<div class="qr--head">
-					<div class="qr--title">Global Quick Reply Sets</div>
+					<div class="qr--title" data-i18n="Global Quick Reply Sets">Global Quick Reply Sets</div>
 					<div class="qr--actions">
 						<div class="qr--setListAdd menu_button menu_button_icon fa-solid fa-plus" id="qr--global-setListAdd" title="Add quick reply set"></div>
 					</div>
@@ -28,7 +28,7 @@
 
 			<div id="qr--chat">
 				<div class="qr--head">
-					<div class="qr--title">Chat Quick Reply Sets</div>
+					<div class="qr--title" data-i18n="Chat Quick Reply Sets">Chat Quick Reply Sets</div>
 					<div class="qr--actions">
 						<div class="qr--setListAdd menu_button menu_button_icon fa-solid fa-plus" id="qr--chat-setListAdd" title="Add quick reply set"></div>
 					</div>
@@ -40,7 +40,7 @@
 
 			<div id="qr--editor">
 				<div class="qr--head">
-					<div class="qr--title">Edit Quick Replies</div>
+					<div class="qr--title" data-i18n="Edit Quick Replies">Edit Quick Replies</div>
 					<div class="qr--actions">
 						<select id="qr--set" class="text_pole"></select>
 						<div class="qr--add menu_button menu_button_icon fa-solid fa-plus" id="qr--set-new" title="Create new quick reply set"></div>
@@ -52,13 +52,13 @@
 				</div>
 				<div id="qr--set-settings">
 					<label class="flex-container">
-						<input type="checkbox" id="qr--disableSend"> <span>Disable send (insert into input field)</span>
+						<input type="checkbox" id="qr--disableSend"> <span data-i18n="Disable Send (Insert Into Input Field)">Disable send (insert into input field)</span>
 					</label>
 					<label class="flex-container">
-						<input type="checkbox" id="qr--placeBeforeInput"> <span>Place quick reply before input</span>
+						<input type="checkbox" id="qr--placeBeforeInput"> <span data-i18n="Place Quick Reply Before Input">Place quick reply before input</span>
 					</label>
 					<label class="flex-container" id="qr--injectInputContainer">
-						<input type="checkbox" id="qr--injectInput"> <span>Inject user input automatically <small>(if disabled, use <code>{{input}}</code> macro for manual injection)</small></span>
+						<input type="checkbox" id="qr--injectInput"> <span><span data-i18n="Inject user input automatically">Inject user input automatically</span> <small><span data-i18n="(if disabled, use ">(if disabled, use</span><code>{{input}}</code> <span data-i18n="macro for manual injection)">macro for manual injection)</span></small></span>
 					</label>
 				</div>
 				<div id="qr--set-qrList" class="qr--qrList"></div>

public/scripts/extensions/quick-reply/index.js

@@ -169,7 +169,7 @@ const init = async () => {
     log('settings: ', settings);
 
     manager = new SettingsUi(settings);
-    document.querySelector('#extensions_settings2').append(await manager.render());
+    document.querySelector('#qr_container').append(await manager.render());
 
     buttons = new ButtonUi(settings);
     buttons.show();

public/scripts/extensions/quick-reply/src/QuickReply.js

@@ -264,6 +264,13 @@ export class QuickReply {
             const updateSyntax = ()=>{
                 messageSyntaxInner.innerHTML = hljs.highlight(`${message.value}${message.value.slice(-1) == '\n' ? ' ' : ''}`, { language:'stscript', ignoreIllegals:true })?.value;
             };
+            const updateSyntaxEnabled = ()=>{
+                if (JSON.parse(localStorage.getItem('qr--syntax'))) {
+                    dom.querySelector('#qr--modal-messageHolder').classList.remove('qr--noSyntax');
+                } else {
+                    dom.querySelector('#qr--modal-messageHolder').classList.add('qr--noSyntax');
+                }
+            };
             /**@type {HTMLInputElement}*/
             const tabSize = dom.querySelector('#qr--modal-tabSize');
             tabSize.value = JSON.parse(localStorage.getItem('qr--tabSize') ?? '4');
@@ -282,6 +289,13 @@ export class QuickReply {
             executeShortcut.addEventListener('click', () => {
                 localStorage.setItem('qr--executeShortcut', JSON.stringify(executeShortcut.checked));
             });
+            /**@type {HTMLInputElement}*/
+            const syntax = dom.querySelector('#qr--modal-syntax');
+            syntax.checked = JSON.parse(localStorage.getItem('qr--syntax') ?? 'true');
+            syntax.addEventListener('click', () => {
+                localStorage.setItem('qr--syntax', JSON.stringify(syntax.checked));
+                updateSyntaxEnabled();
+            });
             /**@type {HTMLTextAreaElement}*/
             const message = dom.querySelector('#qr--modal-message');
             message.value = this.message;
@@ -352,8 +366,7 @@ export class QuickReply {
                 }
             });
             window.addEventListener('resize', resizeListener);
-            message.style.color = 'transparent';
+            updateSyntaxEnabled();
-            message.style.background = 'transparent';
             message.style.setProperty('text-shadow', 'none', 'important');
             /**@type {HTMLElement}*/
             const messageSyntaxInner = dom.querySelector('#qr--modal-messageSyntaxInner');
@@ -544,7 +557,7 @@ export class QuickReply {
         this.editorExecuteErrors.innerHTML = '';
         this.editorExecuteResult.innerHTML = '';
         if (this.editorExecuteHide.checked) {
-            this.editorPopup.dom.classList.add('qr--hide');
+            this.editorPopup.dlg.classList.add('qr--hide');
         }
         try {
             this.editorExecutePromise = this.execute({}, true);
@@ -575,7 +588,7 @@ export class QuickReply {
         }
         this.editorExecutePromise = null;
         this.editorExecuteBtn.classList.remove('qr--busy');
-        this.editorPopup.dom.classList.remove('qr--hide');
+        this.editorPopup.dlg.classList.remove('qr--hide');
     }
 
     updateEditorProgress(done, total) {

public/scripts/extensions/quick-reply/src/QuickReplySet.js

@@ -231,6 +231,7 @@ export class QuickReplySet {
             this.rerender();
         } else {
             warn(`Failed to save Quick Reply Set: ${this.name}`);
+            console.error('QR could not be saved', response);
         }
     }
 

public/scripts/extensions/quick-reply/src/SlashCommandHandler.js

@@ -1,9 +1,13 @@
 import { SlashCommand } from '../../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../../slash-commands/SlashCommandArgument.js';
+import { enumIcons } from '../../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { SlashCommandEnumValue, enumTypes } from '../../../slash-commands/SlashCommandEnumValue.js';
 import { SlashCommandParser } from '../../../slash-commands/SlashCommandParser.js';
 import { isTrueBoolean } from '../../../utils.js';
 // eslint-disable-next-line no-unused-vars
 import { QuickReplyApi } from '../api/QuickReplyApi.js';
+import { QuickReply } from './QuickReply.js';
+import { QuickReplySet } from './QuickReplySet.js';
 
 export class SlashCommandHandler {
     /**@type {QuickReplyApi}*/ api;
@@ -19,6 +23,50 @@ export class SlashCommandHandler {
 
 
     init() {
+        function getExecutionIcons(/**@type {QuickReply} */ qr) {
+            let icons = '';
+            if (qr.preventAutoExecute) icons += '🚫';
+            if (qr.isHidden) icons += '👁️';
+            if (qr.executeOnStartup) icons += '🚀';
+            if (qr.executeOnUser) icons += enumIcons.user;
+            if (qr.executeOnAi) icons += enumIcons.assistant;
+            if (qr.executeOnChatChange) icons += '💬';
+            if (qr.executeOnGroupMemberDraft) icons += enumIcons.group;
+            return icons;
+        }
+
+        const localEnumProviders = {
+            /** All quick reply sets, optionally filtering out sets that wer already used in the "set" named argument */
+            qrSets: (executor) => QuickReplySet.list.filter(qrSet => qrSet.name != String(executor.namedArgumentList.find(x => x.name == 'set')?.value))
+                .map(qrSet => new SlashCommandEnumValue(qrSet.name, null, enumTypes.enum, 'S')),
+
+            /** All QRs inside a set, utilizing the "set" named argument */
+            qrEntries: (executor) => QuickReplySet.get(String(executor.namedArgumentList.find(x => x.name == 'set')?.value))?.qrList.map(qr => {
+                const icons = getExecutionIcons(qr);
+                const message = `${qr.automationId ? `[${qr.automationId}]` : ''}${icons ? `[auto: ${icons}]` : ''} ${qr.title || qr.message}`.trim();
+                return new SlashCommandEnumValue(qr.label, message, enumTypes.enum, enumIcons.qr);
+            }) ?? [],
+
+            /** All QRs as a set.name string, to be able to execute, for example via the /run command */
+            qrExecutables: () => {
+                const globalSetList = this.api.settings.config.setList;
+                const chatSetList = this.api.settings.chatConfig?.setList;
+
+                const globalQrs = globalSetList.map(link => link.set.qrList.map(qr => ({ set: link.set, qr }))).flat();
+                const chatQrs = chatSetList?.map(link => link.set.qrList.map(qr => ({ set: link.set, qr }))).flat() ?? [];
+                const otherQrs = QuickReplySet.list.filter(set => !globalSetList.some(link => link.set.name === set.name && !chatSetList?.some(link => link.set.name === set.name)))
+                    .map(set => set.qrList.map(qr => ({ set, qr }))).flat();
+
+                return [
+                    ...globalQrs.map(x => new SlashCommandEnumValue(`${x.set.name}.${x.qr.label}`, `[global] ${x.qr.title || x.qr.message}`, enumTypes.name, enumIcons.qr)),
+                    ...chatQrs.map(x => new SlashCommandEnumValue(`${x.set.name}.${x.qr.label}`, `[chat] ${x.qr.title || x.qr.message}`, enumTypes.enum, enumIcons.qr)),
+                    ...otherQrs.map(x => new SlashCommandEnumValue(`${x.set.name}.${x.qr.label}`, `${x.qr.title || x.qr.message}`, enumTypes.qr, enumIcons.qr)),
+                ];
+            },
+        }
+
+        window['qrEnumProviderExecutables'] = localEnumProviders.qrExecutables;
+
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr',
             callback: (_, value) => this.executeQuickReplyByIndex(Number(value)),
             unnamedArgumentList: [
@@ -29,110 +77,166 @@ export class SlashCommandHandler {
             helpString: 'Activates the specified Quick Reply',
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qrset',
-            callback: () => toastr.warning('The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.'),
+            callback: () => {
+                toastr.warning('The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.');
+                return '';
+            },
             helpString: '<strong>DEPRECATED</strong> – The command /qrset has been deprecated. Use /qr-set, /qr-set-on, and /qr-set-off instead.',
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set',
-            callback: (args, value) => this.toggleGlobalSet(value, args),
+            callback: (args, value) => {
+                this.toggleGlobalSet(value, args);
+                return '';
+            },
             namedArgumentList: [
                 new SlashCommandNamedArgument(
                     'visible', 'set visibility', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
                 ),
             ],
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: 'Toggle global QR set',
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-on',
-            callback: (args, value) => this.addGlobalSet(value, args),
+            callback: (args, value) => {
+                this.addGlobalSet(value, args);
+                return '';
+            },
             namedArgumentList: [
                 new SlashCommandNamedArgument(
                     'visible', 'set visibility', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
                 ),
             ],
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: 'Activate global QR set',
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-off',
-            callback: (_, value) => this.removeGlobalSet(value),
+            callback: (_, value) => {
+                this.removeGlobalSet(value);
+                return '';
+            },
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: 'Deactivate global QR set',
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-chat-set',
-            callback: (args, value) => this.toggleChatSet(value, args),
+            callback: (args, value) => {
+                this.toggleChatSet(value, args);
+                return '';
+            },
             namedArgumentList: [
                 new SlashCommandNamedArgument(
                     'visible', 'set visibility', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
                 ),
             ],
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: 'Toggle chat QR set',
         }));
 
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-chat-set-on',
-            callback: (args, value) => this.addChatSet(value, args),
+            callback: (args, value) => {
+                this.addChatSet(value, args);
+                return '';
+            },
             namedArgumentList: [
                 new SlashCommandNamedArgument(
-                    'visible', 'whether the QR set should be visible', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true', ['true', 'false'],
+                    'visible', 'whether the QR set should be visible', [ARGUMENT_TYPE.BOOLEAN], false, false, 'true',
                 ),
             ],
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: 'Activate chat QR set',
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-chat-set-off',
-            callback: (_, value) => this.removeChatSet(value),
+            callback: (_, value) => {
+                this.removeChatSet(value);
+                return '';
+            },
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'QR set name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: 'Deactivate chat QR set',
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-list',
-            callback: (_, value) => this.listSets(value ?? 'all'),
+            callback: (_, value) => JSON.stringify(this.listSets(value ?? 'all')),
             returns: 'list of QR sets',
             namedArgumentList: [],
             unnamedArgumentList: [
                 new SlashCommandArgument(
-                    'set type', [ARGUMENT_TYPE.STRING], false, false, null, ['all', 'global', 'chat'],
+                    'set type', [ARGUMENT_TYPE.STRING], false, false, 'all', ['all', 'global', 'chat'],
                 ),
             ],
             helpString: 'Gets a list of the names of all quick reply sets.',
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-list',
-            callback: (_, value) => this.listQuickReplies(value),
+            callback: (_, value) => {
+                return JSON.stringify(this.listQuickReplies(value));
+            },
             returns: 'list of QRs',
             namedArgumentList: [],
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'set name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: 'Gets a list of the names of all quick replies in this quick reply set.',
         }));
 
         const qrArgs = [
-            new SlashCommandNamedArgument('label', 'text on the button, e.g., label=MyButton', [ARGUMENT_TYPE.STRING]),
+            SlashCommandNamedArgument.fromProps({
-            new SlashCommandNamedArgument('set', 'name of the QR set, e.g., set=PresetName1', [ARGUMENT_TYPE.STRING]),
+                name: 'set',
+                description: 'name of the QR set, e.g., set=PresetName1',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.qrSets,
+            }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'label',
+                description: 'text on the button, e.g., label=MyButton',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.qrLabels,
+            }),
             new SlashCommandNamedArgument('hidden', 'whether the button should be hidden, e.g., hidden=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
             new SlashCommandNamedArgument('startup', 'auto execute on app startup, e.g., startup=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
             new SlashCommandNamedArgument('user', 'auto execute on user message, e.g., user=true', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false'),
@@ -144,8 +248,12 @@ export class SlashCommandHandler {
         const qrUpdateArgs = [
             new SlashCommandNamedArgument('newlabel', 'new text for the button', [ARGUMENT_TYPE.STRING], false),
         ];
+
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-create',
-            callback: (args, message) => this.createQuickReply(args, message),
+            callback: (args, message) => {
+                this.createQuickReply(args, message);
+                return '';
+            },
             namedArgumentList: qrArgs,
             unnamedArgumentList: [
                 new SlashCommandArgument(
@@ -165,9 +273,15 @@ export class SlashCommandHandler {
             `,
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-update',
-            callback: (args, message) => this.updateQuickReply(args, message),
+            callback: (args, message) => {
+                this.updateQuickReply(args, message);
+                return '';
+            },
             returns: 'updated quick reply',
             namedArgumentList: [...qrUpdateArgs, ...qrArgs],
+            unnamedArgumentList: [
+                new SlashCommandArgument('command', [ARGUMENT_TYPE.STRING]),
+            ],
             helpString: `
                 <div>
                     Updates Quick Reply.
@@ -183,34 +297,57 @@ export class SlashCommandHandler {
             `,
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-delete',
-            callback: (args, name) => this.deleteQuickReply(args, name),
+            callback: (args, name) => {
+                this.deleteQuickReply(args, name);
+                return '';
+            },
             namedArgumentList: [
-                new SlashCommandNamedArgument(
+                SlashCommandNamedArgument.fromProps({
-                    'set', 'Quick Reply set', [ARGUMENT_TYPE.STRING], true,
+                    name: 'set',
-                ),
+                    description: 'QR set name',
-                new SlashCommandNamedArgument(
+                    typeList: [ARGUMENT_TYPE.STRING],
-                    'label', 'Quick Reply label', [ARGUMENT_TYPE.STRING], false,
+                    isRequired: true,
-                ),
+                    enumProvider: localEnumProviders.qrSets,
+                }),
+                SlashCommandNamedArgument.fromProps({
+                    name: 'label',
+                    description: 'Quick Reply label',
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    enumProvider: localEnumProviders.qrEntries,
+                }),
             ],
             helpString: 'Deletes a Quick Reply from the specified set. If no label is provided, the entire set is deleted.',
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-contextadd',
-            callback: (args, name) => this.createContextItem(args, name),
+            callback: (args, name) => {
+                this.createContextItem(args, name);
+                return '';
+            },
             namedArgumentList: [
-                new SlashCommandNamedArgument(
+                SlashCommandNamedArgument.fromProps({
-                    'set', 'string', [ARGUMENT_TYPE.STRING], true,
+                    name: 'set',
-                ),
+                    description: 'QR set name',
-                new SlashCommandNamedArgument(
+                    typeList: [ARGUMENT_TYPE.STRING],
-                    'label', 'string', [ARGUMENT_TYPE.STRING], true,
+                    isRequired: true,
-                ),
+                    enumProvider: localEnumProviders.qrSets,
+                }),
+                SlashCommandNamedArgument.fromProps({
+                    name: 'label',
+                    description: 'Quick Reply label',
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    enumProvider: localEnumProviders.qrEntries,
+                }),
                 new SlashCommandNamedArgument(
                     'chain', 'boolean', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false',
                 ),
             ],
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'preset name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: `
                 <div>
@@ -227,19 +364,32 @@ export class SlashCommandHandler {
             `,
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-contextdel',
-            callback: (args, name) => this.deleteContextItem(args, name),
+            callback: (args, name) => {
+                this.deleteContextItem(args, name);
+                return '';
+            },
             namedArgumentList: [
-                new SlashCommandNamedArgument(
+                SlashCommandNamedArgument.fromProps({
-                    'set', 'string', [ARGUMENT_TYPE.STRING], true,
+                    name: 'set',
-                ),
+                    description: 'QR set name',
-                new SlashCommandNamedArgument(
+                    typeList: [ARGUMENT_TYPE.STRING],
-                    'label', 'string', [ARGUMENT_TYPE.STRING], true,
+                    isRequired: true,
-                ),
+                    enumProvider: localEnumProviders.qrSets,
+                }),
+                SlashCommandNamedArgument.fromProps({
+                    name: 'label',
+                    description: 'Quick Reply label',
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    enumProvider: localEnumProviders.qrEntries,
+                }),
             ],
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'preset name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: `
                 <div>
@@ -256,16 +406,25 @@ export class SlashCommandHandler {
             `,
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-contextclear',
-            callback: (args, label) => this.clearContextMenu(args, label),
+            callback: (args, label) => {
+                this.clearContextMenu(args, label);
+                return '';
+            },
             namedArgumentList: [
-                new SlashCommandNamedArgument(
+                SlashCommandNamedArgument.fromProps({
-                    'set', 'context menu preset name', [ARGUMENT_TYPE.STRING], true,
+                    name: 'set',
-                ),
+                    description: 'QR set name',
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'label', [ARGUMENT_TYPE.STRING], true,
+                    description: 'Quick Reply label',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    enumProvider: localEnumProviders.qrEntries,
+                }),
             ],
             helpString: `
                 <div>
@@ -288,13 +447,20 @@ export class SlashCommandHandler {
             new SlashCommandNamedArgument('inject', 'inject user input automatically (if disabled use {{input}})', [ARGUMENT_TYPE.BOOLEAN], false),
         ];
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-create',
-            callback: (args, name) => this.createSet(name, args),
+            callback: (args, name) => {
+                this.createSet(name, args);
+                return '';
+            },
             aliases: ['qr-presetadd'],
             namedArgumentList: presetArgs,
             unnamedArgumentList: [
-                new SlashCommandArgument(
+                SlashCommandArgument.fromProps({
-                    'name', [ARGUMENT_TYPE.STRING], true,
+                    description: 'QR set name',
-                ),
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                    forceEnum: false,
+                }),
             ],
             helpString: `
                 <div>
@@ -312,11 +478,19 @@ export class SlashCommandHandler {
         }));
 
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-update',
-            callback: (args, name) => this.updateSet(name, args),
+            callback: (args, name) => {
+                this.updateSet(name, args);
+                return '';
+            },
             aliases: ['qr-presetupdate'],
             namedArgumentList: presetArgs,
             unnamedArgumentList: [
-                new SlashCommandArgument('name', [ARGUMENT_TYPE.STRING], true),
+                SlashCommandArgument.fromProps({
+                    description: 'QR set name',
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: `
                 <div>
@@ -329,10 +503,18 @@ export class SlashCommandHandler {
             `,
         }));
         SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'qr-set-delete',
-            callback: (args, name) => this.deleteSet(name),
+            callback: (_, name) => {
+                this.deleteSet(name);
+                return '';
+            },
             aliases: ['qr-presetdelete'],
             unnamedArgumentList: [
-                new SlashCommandArgument('name', [ARGUMENT_TYPE.STRING], true),
+                SlashCommandArgument.fromProps({
+                    description: 'QR set name',
+                    typeList: [ARGUMENT_TYPE.STRING],
+                    isRequired: true,
+                    enumProvider: localEnumProviders.qrSets,
+                }),
             ],
             helpString: `
                 <div>
@@ -468,7 +650,7 @@ export class SlashCommandHandler {
     }
     deleteQuickReply(args, label) {
         try {
-            this.api.deleteQuickReply(args.set, label);
+            this.api.deleteQuickReply(args.set, args.label ?? label);
         } catch (ex) {
             toastr.error(ex.message);
         }

public/scripts/extensions/quick-reply/src/ui/SettingsUi.js

@@ -148,7 +148,7 @@ export class SettingsUi {
         this.onQrSetChange();
     }
     onQrSetChange() {
-        this.currentQrSet = QuickReplySet.get(this.currentSet.value);
+        this.currentQrSet = QuickReplySet.get(this.currentSet.value) ?? new QuickReplySet();
         this.disableSend.checked = this.currentQrSet.disableSend;
         this.placeBeforeInput.checked = this.currentQrSet.placeBeforeInput;
         this.injectInput.checked = this.currentQrSet.injectInput;

public/scripts/extensions/quick-reply/style.css

@@ -220,68 +220,68 @@
   align-items: baseline;
 }
 @media screen and (max-width: 750px) {
-  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
+  body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor {
     flex-direction: column;
     overflow: auto;
   }
-  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main {
+  body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main {
     flex: 0 0 auto;
   }
-  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels {
+  body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels {
     flex-direction: column;
   }
-  body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
+  body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
     min-height: 50svh;
     height: 50svh;
   }
 }
-.dialogue_popup:has(#qr--modalEditor) {
+.popup:has(#qr--modalEditor) {
   aspect-ratio: unset;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text {
+.popup:has(#qr--modalEditor) .popup-content {
   display: flex;
   flex-direction: column;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor {
   flex: 1 1 auto;
   display: flex;
   flex-direction: row;
   gap: 1em;
   overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels {
   flex: 0 0 auto;
   display: flex;
   flex-direction: row;
   gap: 0.5em;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label {
   flex: 1 1 1px;
   display: flex;
   flex-direction: column;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelText {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelText {
   flex: 1 1 auto;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelHint {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelHint {
   flex: 1 1 auto;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > input {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label > input {
   flex: 0 0 auto;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings {
   display: flex;
   flex-direction: row;
   gap: 1em;
@@ -289,19 +289,35 @@
   font-size: smaller;
   align-items: baseline;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label {
   white-space: nowrap;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input {
   font-size: inherit;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
   flex: 1 1 auto;
   display: grid;
   text-align: left;
   overflow: hidden;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-messageSyntax {
+  display: none;
+}
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message {
+  background-color: var(--ac-style-color-background);
+  color: var(--ac-style-color-text);
+}
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::selection {
+  color: unset;
+  background-color: rgba(108 171 251 / 0.25);
+}
+@supports (color: rgb(from white r g b / 0.25)) {
+  .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::selection {
+    background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
+  }
+}
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax {
   grid-column: 1;
   grid-row: 1;
   padding: 0;
@@ -311,22 +327,34 @@
   min-width: 100%;
   width: 0;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax > #qr--modal-messageSyntaxInner {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax > #qr--modal-messageSyntaxInner {
   height: 100%;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {
+  background-color: transparent;
+  color: transparent;
   grid-column: 1;
   grid-row: 1;
-  caret-color: white;
+  caret-color: var(--ac-style-color-text);
-  mix-blend-mode: difference;
+  overflow: auto;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar,
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar,
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar-thumb {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar-thumb {
   visibility: hidden;
   cursor: default;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-message,
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::selection {
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-messageSyntaxInner {
+  color: transparent;
+  background-color: rgba(108 171 251 / 0.25);
+}
+@supports (color: rgb(from white r g b / 0.25)) {
+  .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::selection {
+    background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
+  }
+}
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-message,
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-messageSyntaxInner {
+  font-family: var(--monoFontFamily);
   padding: 0.75em;
   margin: 0;
   border: none;
@@ -335,11 +363,11 @@
   border: 1px solid var(--SmartThemeBorderColor);
   border-radius: 5px;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons {
   display: flex;
   gap: 1em;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton {
   border-width: 2px;
   border-style: solid;
   display: flex;
@@ -347,42 +375,42 @@
   gap: 0.5em;
   padding: 0.5em 0.75em;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton .qr--modal-executeComboIcon {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton .qr--modal-executeComboIcon {
   display: flex;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
   transition: 200ms;
   filter: grayscale(0);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy {
   cursor: wait;
   opacity: 0.5;
   filter: grayscale(1);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute {
   border-color: #51a351;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause,
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause,
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
   cursor: default;
   opacity: 0.5;
   filter: grayscale(1);
   pointer-events: none;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-pause,
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-pause,
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-stop {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-stop {
   cursor: pointer;
   opacity: 1;
   filter: grayscale(0);
   pointer-events: all;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause {
   border-color: #92befc;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop {
   border-color: #d78872;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress {
   --prog: 0;
   --progColor: #92befc;
   --progFlashColor: #d78872;
@@ -393,7 +421,7 @@
   background-color: var(--black50a);
   position: relative;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress:after {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress:after {
   content: '';
   background-color: var(--progColor);
   position: absolute;
@@ -401,23 +429,23 @@
   right: calc(100% - var(--prog) * 1%);
   transition: 200ms;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after {
   animation-name: qr--progressPulse;
   animation-duration: 1500ms;
   animation-timing-function: ease-in-out;
   animation-delay: 0s;
   animation-iteration-count: infinite;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--aborted:after {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--aborted:after {
   background-color: var(--progAbortedColor);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--success:after {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--success:after {
   background-color: var(--progSuccessColor);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeProgress.qr--error:after {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--error:after {
   background-color: var(--progErrorColor);
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeErrors {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeErrors {
   display: none;
   text-align: left;
   font-size: smaller;
@@ -428,10 +456,10 @@
   min-width: 100%;
   width: 0;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeErrors.qr--hasErrors {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeErrors.qr--hasErrors {
   display: block;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeResult {
   display: none;
   text-align: left;
   font-size: smaller;
@@ -442,10 +470,10 @@
   min-width: 100%;
   width: 0;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult.qr--hasResult {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeResult.qr--hasResult {
   display: block;
 }
-.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-executeResult:before {
+.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeResult:before {
   content: 'Result: ';
 }
 @keyframes qr--progressPulse {
@@ -457,6 +485,9 @@
     background-color: var(--progFlashColor);
   }
 }
-.shadow_popup.qr--hide {
+.popup.qr--hide {
+  opacity: 0 !important;
+}
+.popup.qr--hide::backdrop {
   opacity: 0 !important;
 }

public/scripts/extensions/quick-reply/style.less

@@ -1,6 +1,6 @@
 #qr--bar {
-	outline: none;
+    outline: none;
-	margin: 0;
+    margin: 0;
     transition: 0.3s;
     opacity: 0.7;
     display: flex;
@@ -10,88 +10,99 @@
     max-width: 100%;
     overflow-x: auto;
     order: 1;
-	padding-right: 2.5em;
+    padding-right: 2.5em;
     position: relative;
-	> #qr--popoutTrigger {
+
-		position: absolute;
+    >#qr--popoutTrigger {
-		right: 0.25em;
+        position: absolute;
-		top: 0;
+        right: 0.25em;
-	}
+        top: 0;
+    }
 }
+
 #qr--popout {
-	display: flex;
+    display: flex;
-	flex-direction: column;
+    flex-direction: column;
-	padding: 0;
+    padding: 0;
-	z-index: 31;
+    z-index: 31;
-	> .qr--header {
+
-		flex: 0 0 auto;
+    >.qr--header {
-		height: 2em;
+        flex: 0 0 auto;
-		position: relative;
+        height: 2em;
-		> .qr--controls {
+        position: relative;
-			> .qr--close {
+
-				height: 15px;
+        >.qr--controls {
-				aspect-ratio: 1 / 1;
+            >.qr--close {
-				font-size: 20px;
+                height: 15px;
-				opacity: 0.5;
+                aspect-ratio: 1 / 1;
-				transition: all 250ms;
+                font-size: 20px;
-			}
+                opacity: 0.5;
-		}
+                transition: all 250ms;
-	}
+            }
-	> .qr--body {
+        }
-		overflow-y: auto;
+    }
-	}
+
+    >.qr--body {
+        overflow-y: auto;
+    }
 }
-#qr--bar, #qr--popout > .qr--body {
-	> .qr--buttons {
-		margin: 0;
-		padding: 0;
-		display: flex;
-		justify-content: center;
-		flex-wrap: wrap;
-		gap: 5px;
-		width: 100%;
 
-		> .qr--buttons {
+#qr--bar,
-			display: contents;
+#qr--popout>.qr--body {
-		}
+    >.qr--buttons {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 5px;
+        width: 100%;
 
-		.qr--button {
+        >.qr--buttons {
-			color: var(--SmartThemeBodyColor);
+            display: contents;
-			// background-color: var(--black50a);
+        }
-			border: 1px solid var(--SmartThemeBorderColor);
+
-			border-radius: 10px;
+        .qr--button {
-			padding: 3px 5px;
+            color: var(--SmartThemeBodyColor);
-			margin: 3px 0;
+            // background-color: var(--black50a);
-			cursor: pointer;
+            border: 1px solid var(--SmartThemeBorderColor);
-			transition: 0.3s;
+            border-radius: 10px;
-			display: flex;
+            padding: 3px 5px;
-			align-items: center;
+            margin: 3px 0;
-			justify-content: center;
+            cursor: pointer;
-			text-align: center;
+            transition: 0.3s;
-			&:hover {
+            display: flex;
-				opacity: 1;
+            align-items: center;
-				filter: brightness(1.2);
+            justify-content: center;
-			}
+            text-align: center;
-			> .qr--button-expander {
+
-				display: none;
+            &:hover {
-			}
+                opacity: 1;
-			&.qr--hasCtx {
+                filter: brightness(1.2);
-				> .qr--button-expander {
+            }
-					display: block;
+
-				}
+            >.qr--button-expander {
-			}
+                display: none;
-		}
+            }
-	}
+
+            &.qr--hasCtx {
+                >.qr--button-expander {
+                    display: block;
+                }
+            }
+        }
+    }
 }
 
 .qr--button-expander {
-	border-left: 1px solid;
+    border-left: 1px solid;
-	margin-left: 1em;
+    margin-left: 1em;
-	text-align: center;
+    text-align: center;
-	width: 2em;
+    width: 2em;
-	&:hover {
+
-		font-weight: bold;
+    &:hover {
-	}
+        font-weight: bold;
+    }
 }
 
 .ctx-blocker {
@@ -153,75 +164,103 @@
 
 
 #qr--settings {
-	.qr--head {
+    .qr--head {
-		display: flex;
+        display: flex;
-		align-items: baseline;
+        align-items: baseline;
-		gap: 1em;
+        gap: 1em;
-		> .qr--title {
+
-			font-weight: bold;
+        >.qr--title {
-		}
+            font-weight: bold;
-		> .qr--actions {
+        }
-			display: flex;
+
-			flex-direction: row;
+        >.qr--actions {
-			align-items: baseline;
+            display: flex;
-			gap: 0.5em;
+            flex-direction: row;
-		}
+            align-items: baseline;
-	}
+            gap: 0.5em;
-	.qr--setList {
+        }
-		> .qr--item {
+    }
-			display: flex;
+
-			flex-direction: row;
+    .qr--setList {
-			gap: 0.5em;
+        >.qr--item {
-			align-items: baseline;
+            display: flex;
-			padding: 0 0.5em;
+            flex-direction: row;
-			> .drag-handle {
+            gap: 0.5em;
-				padding: 0.75em;
+            align-items: baseline;
-			}
+            padding: 0 0.5em;
-			> .qr--visible {
+
-				flex: 0 0 auto;
+            >.drag-handle {
-				display: flex;
+                padding: 0.75em;
-				flex-direction: row;
+            }
-			}
+
-		}
+            >.qr--visible {
-	}
+                flex: 0 0 auto;
-	#qr--set-settings {
+                display: flex;
-		#qr--injectInputContainer {
+                flex-direction: row;
-			flex-wrap: nowrap;
+            }
-		}
+        }
-	}
+    }
-	#qr--set-qrList {
+
-		.qr--set-qrListContents > {
+    #qr--set-settings {
-			padding: 0 0.5em;
+        #qr--injectInputContainer {
-			> .qr--set-item {
+            flex-wrap: nowrap;
-				display: flex;
+        }
-				flex-direction: row;
+    }
-				gap: 0.5em;
+
-				align-items: baseline;
+    #qr--set-qrList {
-				padding: 0.25em 0;
+        .qr--set-qrListContents> {
-				> :nth-child(1) { flex: 0 0 auto; }
+            padding: 0 0.5em;
-				> :nth-child(2) { flex: 1 1 25%; }
+
-				> :nth-child(3) { flex: 0 0 auto; }
+            >.qr--set-item {
-				> :nth-child(4) { flex: 1 1 75%; }
+                display: flex;
-				> :nth-child(5) { flex: 0 0 auto; }
+                flex-direction: row;
-				> .drag-handle {
+                gap: 0.5em;
-					padding: 0.75em;
+                align-items: baseline;
-				}
+                padding: 0.25em 0;
-				.qr--set-itemLabel, .qr--action {
+
-					margin: 0;
+                > :nth-child(1) {
-				}
+                    flex: 0 0 auto;
-				.qr--set-itemMessage {
+                }
-					font-size: smaller;
+
-				}
+                > :nth-child(2) {
-			}
+                    flex: 1 1 25%;
-		}
+                }
-	}
+
-	.qr--set-qrListActions {
+                > :nth-child(3) {
-		display: flex;
+                    flex: 0 0 auto;
-		flex-direction: row;
+                }
-		gap: 0.5em;
+
-		justify-content: center;
+                > :nth-child(4) {
-		padding-bottom: 0.5em;
+                    flex: 1 1 75%;
-	}
+                }
+
+                > :nth-child(5) {
+                    flex: 0 0 auto;
+                }
+
+                >.drag-handle {
+                    padding: 0.75em;
+                }
+
+                .qr--set-itemLabel,
+                .qr--action {
+                    margin: 0;
+                }
+
+                .qr--set-itemMessage {
+                    font-size: smaller;
+                }
+            }
+        }
+    }
+
+    .qr--set-qrListActions {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5em;
+        justify-content: center;
+        padding-bottom: 0.5em;
+    }
 }
 
 
@@ -229,258 +268,347 @@
 
 
 #qr--qrOptions {
-	display: flex;
+    display: flex;
-	flex-direction: column;
+    flex-direction: column;
-	> #qr--ctxEditor {
+
-		.qr--ctxItem {
+    >#qr--ctxEditor {
-			display: flex;
+        .qr--ctxItem {
-			flex-direction: row;
+            display: flex;
-			gap: 0.5em;
+            flex-direction: row;
-			align-items: baseline;
+            gap: 0.5em;
-		}
+            align-items: baseline;
-	}
+        }
+    }
 }
 
 
 
 @media screen and (max-width: 750px) {
-	body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
+    body .popup:has(#qr--modalEditor) .popup-content>#qr--modalEditor {
-		flex-direction: column;
+        flex-direction: column;
-		overflow: auto;
+        overflow: auto;
-		> #qr--main {
+
-			flex: 0 0 auto;
+        >#qr--main {
-		}
+            flex: 0 0 auto;
-		> #qr--main > .qr--labels {
+        }
-			flex-direction: column;
+
-		}
+        >#qr--main>.qr--labels {
-		> #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
+            flex-direction: column;
-			min-height: 50svh;
+        }
-			height: 50svh;
+
-		}
+        >#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder {
-	}
+            min-height: 50svh;
+            height: 50svh;
+        }
+    }
 }
-.dialogue_popup:has(#qr--modalEditor) {
-	aspect-ratio: unset;
 
-	.dialogue_popup_text {
+.popup:has(#qr--modalEditor) {
-		display: flex;
+    aspect-ratio: unset;
-		flex-direction: column;
 
-		> #qr--modalEditor {
+    .popup-content {
-			flex: 1 1 auto;
+        display: flex;
-			display: flex;
+        flex-direction: column;
-			flex-direction: row;
-			gap: 1em;
-			overflow: hidden;
 
-			> #qr--main {
+        >#qr--modalEditor {
-				flex: 1 1 auto;
+            flex: 1 1 auto;
-				display: flex;
+            display: flex;
-				flex-direction: column;
+            flex-direction: row;
-				overflow: hidden;
+            gap: 1em;
-				> .qr--labels {
+            overflow: hidden;
-					flex: 0 0 auto;
-					display: flex;
-					flex-direction: row;
-					gap: 0.5em;
-					> label {
-						flex: 1 1 1px;
-						display: flex;
-						flex-direction: column;
-						> .qr--labelText {
-							flex: 1 1 auto;
-						}
-						> .qr--labelHint {
-							flex: 1 1 auto;
-						}
-						> input {
-							flex: 0 0 auto;
-						}
-					}
-				}
-				> .qr--modal-messageContainer {
-					flex: 1 1 auto;
-					display: flex;
-					flex-direction: column;
-					overflow: hidden;
-					> .qr--modal-editorSettings {
-						display: flex;
-						flex-direction: row;
-						gap: 1em;
-						color: var(--grey70);
-						font-size: smaller;
-						align-items: baseline;
-						> .checkbox_label {
-							white-space: nowrap;
-							> input {
-								font-size: inherit;
-							}
-						}
-					}
-					> #qr--modal-messageHolder {
-						flex: 1 1 auto;
-						display: grid;
-						text-align: left;
-						overflow: hidden;
-						> #qr--modal-messageSyntax {
-							grid-column: 1;
-							grid-row: 1;
-							padding: 0;
-							margin: 0;
-							border: none;
-							overflow: hidden;
-							min-width: 100%;
-							width: 0;
-							> #qr--modal-messageSyntaxInner {
-								height: 100%;
-							}
-						}
-						> #qr--modal-message {
-							grid-column: 1;
-							grid-row: 1;
-							caret-color: white;
-							mix-blend-mode: difference;
-							&::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
-								visibility: hidden;
-								cursor: default;
-							}
-						}
-						#qr--modal-message, #qr--modal-messageSyntaxInner {
-							padding: 0.75em;
-							margin: 0;
-							border: none;
-							resize: none;
-							line-height: 1.2;
-							border: 1px solid var(--SmartThemeBorderColor);
-							border-radius: 5px;
-						}
-					}
-				}
-			}
 
-			#qr--modal-executeButtons {
+            >#qr--main {
-				display: flex;
+                flex: 1 1 auto;
-				gap: 1em;
+                display: flex;
-				.qr--modal-executeButton {
+                flex-direction: column;
-					border-width: 2px;
+                overflow: hidden;
-					border-style: solid;
+
-					display: flex;
+                >.qr--labels {
-					flex-direction: row;
+                    flex: 0 0 auto;
-					gap: 0.5em;
+                    display: flex;
-					padding: 0.5em 0.75em;
+                    flex-direction: row;
-					.qr--modal-executeComboIcon {
+                    gap: 0.5em;
-						display: flex;
+
-					}
+                    >label {
-				}
+                        flex: 1 1 1px;
-				#qr--modal-execute {
+                        display: flex;
-					transition: 200ms;
+                        flex-direction: column;
-					filter: grayscale(0);
+
-					&.qr--busy {
+                        >.qr--labelText {
-						cursor: wait;
+                            flex: 1 1 auto;
-						opacity: 0.5;
+                        }
-						filter: grayscale(1);
+
-					}
+                        >.qr--labelHint {
-				}
+                            flex: 1 1 auto;
-				#qr--modal-execute {
+                        }
-					border-color: rgb(81, 163, 81);
+
-				}
+                        >input {
-				#qr--modal-pause, #qr--modal-stop {
+                            flex: 0 0 auto;
-					cursor: default;
+                        }
-					opacity: 0.5;
+                    }
-					filter: grayscale(1);
+                }
-					pointer-events: none;
+
-				}
+                >.qr--modal-messageContainer {
-				.qr--busy {
+                    flex: 1 1 auto;
-					~ #qr--modal-pause, ~ #qr--modal-stop {
+                    display: flex;
-						cursor: pointer;
+                    flex-direction: column;
-						opacity: 1;
+                    overflow: hidden;
-						filter: grayscale(0);
+
-						pointer-events: all;
+                    >.qr--modal-editorSettings {
-					}
+                        display: flex;
-				}
+                        flex-direction: row;
-				#qr--modal-pause {
+                        gap: 1em;
-					border-color: rgb(146, 190, 252);
+                        color: var(--grey70);
-				}
+                        font-size: smaller;
-				#qr--modal-stop {
+                        align-items: baseline;
-					border-color: rgb(215, 136, 114);
+
-				}
+                        >.checkbox_label {
-			}
+                            white-space: nowrap;
-			#qr--modal-executeProgress {
+
-				--prog: 0;
+                            >input {
-				--progColor: rgb(146, 190, 252);
+                                font-size: inherit;
-				--progFlashColor: rgb(215, 136, 114);
+                            }
-				--progSuccessColor: rgb(81, 163, 81);
+                        }
-				--progErrorColor: rgb(189, 54, 47);
+                    }
-				--progAbortedColor: rgb(215, 136, 114);
+
-				height: 0.5em;
+                    >#qr--modal-messageHolder {
-				background-color: var(--black50a);
+                        flex: 1 1 auto;
-				position: relative;
+                        display: grid;
-				&:after {
+                        text-align: left;
-					content: '';
+                        overflow: hidden;
-					background-color: var(--progColor);
+
-					position: absolute;
+                        &.qr--noSyntax {
-					inset: 0;
+                            >#qr--modal-messageSyntax {
-					right: calc(100% - var(--prog) * 1%);
+                                display: none;
-					transition: 200ms;
+                            }
-				}
+
-				&.qr--paused:after {
+                            >#qr--modal-message {
-					animation-name: qr--progressPulse;
+                                background-color: var(--ac-style-color-background);
-					animation-duration: 1500ms;
+                                color: var(--ac-style-color-text);
-					animation-timing-function: ease-in-out;
+
-					animation-delay: 0s;
+                                &::selection {
-					animation-iteration-count: infinite;
+                                    color: unset;
-				}
+                                    background-color: rgba(108 171 251 / 0.25);
-				&.qr--aborted:after {
+
-					background-color: var(--progAbortedColor);
+                                    @supports (color: rgb(from white r g b / 0.25)) {
-				}
+                                        background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
-				&.qr--success:after {
+                                    }
-					background-color: var(--progSuccessColor);
+                                }
-				}
+                            }
-				&.qr--error:after {
+                        }
-					background-color: var(--progErrorColor);
+
-				}
+                        >#qr--modal-messageSyntax {
-			}
+                            grid-column: 1;
-			#qr--modal-executeErrors {
+                            grid-row: 1;
-				display: none;
+                            padding: 0;
-				&.qr--hasErrors {
+                            margin: 0;
-					display: block;
+                            border: none;
-				}
+                            overflow: hidden;
-				text-align: left;
+                            min-width: 100%;
-				font-size: smaller;
+                            width: 0;
-				background-color: rgb(189, 54, 47);
+
-				color: white;
+                            >#qr--modal-messageSyntaxInner {
-				padding: 0.5em;
+                                height: 100%;
-				overflow: auto;
+                            }
-				min-width: 100%;
+                        }
-				width: 0;
+
-			}
+                        >#qr--modal-message {
-			#qr--modal-executeResult {
+                            background-color: transparent;
-				display: none;
+                            color: transparent;
-				&.qr--hasResult {
+                            grid-column: 1;
-					display: block;
+                            grid-row: 1;
-				}
+                            caret-color: var(--ac-style-color-text);
-				&:before { content: 'Result: '; }
+                            overflow: auto;
-				text-align: left;
+
-				font-size: smaller;
+                            &::-webkit-scrollbar,
-				background-color: rgb(81, 163, 81);
+                            &::-webkit-scrollbar-thumb {
-				color: white;
+                                visibility: hidden;
-				padding: 0.5em;
+                                cursor: default;
-				overflow: auto;
+                            }
-				min-width: 100%;
+
-				width: 0;
+                            &::selection {
-			}
+                                color: transparent;
-		}
+                                background-color: rgba(108 171 251 / 0.25);
-	}
+
+                                @supports (color: rgb(from white r g b / 0.25)) {
+                                    background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
+                                }
+                            }
+                        }
+
+                        #qr--modal-message,
+                        #qr--modal-messageSyntaxInner {
+                            font-family: var(--monoFontFamily);
+                            padding: 0.75em;
+                            margin: 0;
+                            border: none;
+                            resize: none;
+                            line-height: 1.2;
+                            border: 1px solid var(--SmartThemeBorderColor);
+                            border-radius: 5px;
+                        }
+                    }
+                }
+            }
+
+            #qr--modal-executeButtons {
+                display: flex;
+                gap: 1em;
+
+                .qr--modal-executeButton {
+                    border-width: 2px;
+                    border-style: solid;
+                    display: flex;
+                    flex-direction: row;
+                    gap: 0.5em;
+                    padding: 0.5em 0.75em;
+
+                    .qr--modal-executeComboIcon {
+                        display: flex;
+                    }
+                }
+
+                #qr--modal-execute {
+                    transition: 200ms;
+                    filter: grayscale(0);
+
+                    &.qr--busy {
+                        cursor: wait;
+                        opacity: 0.5;
+                        filter: grayscale(1);
+                    }
+                }
+
+                #qr--modal-execute {
+                    border-color: rgb(81, 163, 81);
+                }
+
+                #qr--modal-pause,
+                #qr--modal-stop {
+                    cursor: default;
+                    opacity: 0.5;
+                    filter: grayscale(1);
+                    pointer-events: none;
+                }
+
+                .qr--busy {
+
+                    ~#qr--modal-pause,
+                    ~#qr--modal-stop {
+                        cursor: pointer;
+                        opacity: 1;
+                        filter: grayscale(0);
+                        pointer-events: all;
+                    }
+                }
+
+                #qr--modal-pause {
+                    border-color: rgb(146, 190, 252);
+                }
+
+                #qr--modal-stop {
+                    border-color: rgb(215, 136, 114);
+                }
+            }
+
+            #qr--modal-executeProgress {
+                --prog: 0;
+                --progColor: rgb(146, 190, 252);
+                --progFlashColor: rgb(215, 136, 114);
+                --progSuccessColor: rgb(81, 163, 81);
+                --progErrorColor: rgb(189, 54, 47);
+                --progAbortedColor: rgb(215, 136, 114);
+                height: 0.5em;
+                background-color: var(--black50a);
+                position: relative;
+
+                &:after {
+                    content: '';
+                    background-color: var(--progColor);
+                    position: absolute;
+                    inset: 0;
+                    right: calc(100% - var(--prog) * 1%);
+                    transition: 200ms;
+                }
+
+                &.qr--paused:after {
+                    animation-name: qr--progressPulse;
+                    animation-duration: 1500ms;
+                    animation-timing-function: ease-in-out;
+                    animation-delay: 0s;
+                    animation-iteration-count: infinite;
+                }
+
+                &.qr--aborted:after {
+                    background-color: var(--progAbortedColor);
+                }
+
+                &.qr--success:after {
+                    background-color: var(--progSuccessColor);
+                }
+
+                &.qr--error:after {
+                    background-color: var(--progErrorColor);
+                }
+            }
+
+            #qr--modal-executeErrors {
+                display: none;
+
+                &.qr--hasErrors {
+                    display: block;
+                }
+
+                text-align: left;
+                font-size: smaller;
+                background-color: rgb(189, 54, 47);
+                color: white;
+                padding: 0.5em;
+                overflow: auto;
+                min-width: 100%;
+                width: 0;
+            }
+
+            #qr--modal-executeResult {
+                display: none;
+
+                &.qr--hasResult {
+                    display: block;
+                }
+
+                &:before {
+                    content: 'Result: ';
+                }
+
+                text-align: left;
+                font-size: smaller;
+                background-color: rgb(81, 163, 81);
+                color: white;
+                padding: 0.5em;
+                overflow: auto;
+                min-width: 100%;
+                width: 0;
+            }
+        }
+    }
 }
+
 @keyframes qr--progressPulse {
-    0%, 100% {
+
+    0%,
+    100% {
         background-color: var(--progColor);
     }
+
     50% {
         background-color: var(--progFlashColor);
     }
 }
 
-.shadow_popup.qr--hide {
+.popup.qr--hide {
-	opacity: 0 !important;
+    opacity: 0 !important;
+}
+
+.popup.qr--hide::backdrop {
+    opacity: 0 !important;
 }

public/scripts/extensions/regex/dropdown.html

@@ -8,11 +8,11 @@
         </div>
         <div class="inline-drawer-content">
             <div class="flex-container">
-                <div id="open_regex_editor" class="menu_button menu_button_icon" title="New global regex script">
+                <div id="open_regex_editor" class="menu_button menu_button_icon" data-i18n="[title]ext_regex_new_global_script_desc" title="New global regex script">
                     <i class="fa-solid fa-pen-to-square"></i>
                     <small data-i18n="ext_regex_new_global_script">+ Global</small>
                 </div>
-                <div id="open_scoped_editor" class="menu_button menu_button_icon" title="New scoped regex script">
+                <div id="open_scoped_editor" class="menu_button menu_button_icon" data-i18n="[title]ext_regex_new_scoped_script_desc" title="New scoped regex script">
                     <i class="fa-solid fa-address-card"></i>
                     <small data-i18n="ext_regex_new_scoped_script">+ Scoped</small>
                 </div>
@@ -39,7 +39,7 @@
                     <label id="toggle_scoped_regex" class="checkbox flex-container" for="regex_scoped_toggle">
                         <input type="checkbox" id="regex_scoped_toggle" class="enable_scoped" />
                         <span class="regex-toggle-on fa-solid fa-toggle-on fa-lg" title="Disallow using scoped regex"></span>
-                        <span class="regex-toggle-off fa-solid fa-toggle-off fa-lg" title="Allow using scoped regex"></span>
+                        <span class="regex-toggle-off fa-solid fa-toggle-off fa-lg" data-i18n="[title]ext_regex_allow_scoped" title="Allow using scoped regex"></span>
                     </label>
                 </div>
                 <small data-i18n="ext_regex_scoped_scripts_desc">

public/scripts/extensions/regex/engine.js

@@ -92,7 +92,7 @@ function getRegexedString(rawString, placement, { characterOverride, isMarkdown,
 
 /**
  * Runs the provided regex script on the given string
- * @param {object} regexScript The regex script to run
+ * @param {import('./index.js').RegexScript} regexScript The regex script to run
  * @param {string} rawString The string to run the regex script on
  * @param {RegexScriptParams} params The parameters to use for the regex script
  * @returns {string} The new string

public/scripts/extensions/regex/index.js

@@ -3,11 +3,32 @@ import { extension_settings, renderExtensionTemplateAsync, writeExtensionField }
 import { selected_group } from '../../group-chats.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { download, getFileText, getSortableDelay, uuidv4 } from '../../utils.js';
 import { resolveVariable } from '../../variables.js';
 import { regex_placement, runRegexScript } from './engine.js';
 
+/**
+ * @typedef {object} RegexScript
+ * @property {string} scriptName - The name of the script
+ * @property {boolean} disabled - Whether the script is disabled
+ * @property {string} replaceString - The replace string
+ * @property {string[]} trimStrings - The trim strings
+ * @property {string?} findRegex - The find regex
+ * @property {string?} substituteRegex - The substitute regex
+ */
+
+/**
+ * Retrieves the list of regex scripts by combining the scripts from the extension settings and the character data
+ *
+ * @return {RegexScript[]} An array of regex scripts, where each script is an object containing the necessary information.
+ */
+export function getRegexScripts() {
+    return [...(extension_settings.regex ?? []), ...(characters[this_chid]?.data?.extensions?.regex_scripts ?? [])];
+}
+
 /**
  * Saves a regex script to the extension settings or character data.
  * @param {import('../../char-data.js').RegexScriptData} regexScript
@@ -328,7 +349,7 @@ function migrateSettings() {
 
 /**
  * /regex slash command callback
- * @param {object} args Named arguments
+ * @param {{name: string}} args Named arguments
  * @param {string} value Unnamed argument
  * @returns {string} The regexed string
  */
@@ -338,11 +359,11 @@ function runRegexCallback(args, value) {
         return value;
     }
 
-    const scriptName = String(resolveVariable(args.name));
+    const scriptName = args.name;
-    const scripts = [...(extension_settings.regex ?? []), ...(characters[this_chid]?.data?.extensions?.regex_scripts ?? [])];
+    const scripts = getRegexScripts();
 
     for (const script of scripts) {
-        if (String(script.scriptName).toLowerCase() === String(scriptName).toLowerCase()) {
+        if (script.scriptName.toLowerCase() === scriptName.toLowerCase()) {
             if (script.disabled) {
                 toastr.warning(`Regex script "${scriptName}" is disabled.`);
                 return value;
@@ -449,7 +470,7 @@ jQuery(async () => {
     }
 
     const settingsHtml = $(await renderExtensionTemplateAsync('regex', 'dropdown'));
-    $('#extensions_settings2').append(settingsHtml);
+    $('#regex_container').append(settingsHtml);
     $('#open_regex_editor').on('click', function () {
         onRegexEditorOpenClick(false, false);
     });
@@ -551,14 +572,26 @@ jQuery(async () => {
     await loadRegexScripts();
     $('#saved_regex_scripts').sortable('enable');
 
+    const localEnumProviders = {
+        regexScripts: () => getRegexScripts().map(script => {
+            const isGlobal = extension_settings.regex?.some(x => x.scriptName === script.scriptName);
+            return new SlashCommandEnumValue(script.scriptName, `${enumIcons.getStateIcon(!script.disabled)} [${isGlobal ? 'global' : 'scoped'}] ${script.findRegex}`,
+                isGlobal ? enumTypes.enum : enumTypes.name, isGlobal ? 'G' : 'S');
+        }),
+    };
+
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'regex',
         callback: runRegexCallback,
         returns: 'replaced text',
         namedArgumentList: [
-            new SlashCommandNamedArgument(
+            SlashCommandNamedArgument.fromProps({
-                'name', 'script name', [ARGUMENT_TYPE.STRING], true,
+                name: 'name',
-            ),
+                description: 'script name',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.regexScripts,
+            }),
         ],
         unnamedArgumentList: [
             new SlashCommandArgument(

public/scripts/extensions/stable-diffusion/index.js

@@ -17,6 +17,7 @@ import {
     getCharacterAvatar,
     formatCharacterAvatar,
     substituteParams,
+    substituteParamsExtended,
 } from '../../../script.js';
 import { getApiUrl, getContext, extension_settings, doExtrasFetch, modules, renderExtensionTemplateAsync, writeExtensionField } from '../../extensions.js';
 import { selected_group } from '../../group-chats.js';
@@ -30,6 +31,8 @@ import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 import { resolveVariable } from '../../variables.js';
 import { debounce_timeout } from '../../constants.js';
+import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { SlashCommandEnumValue } from '../../slash-commands/SlashCommandEnumValue.js';
 export { MODULE_NAME };
 
 const MODULE_NAME = 'sd';
@@ -50,7 +53,15 @@ const sources = {
     pollinations: 'pollinations',
 };
 
+const initiators = {
+    command: 'command',
+    action: 'action',
+    interactive: 'interactive',
+    wand: 'wand',
+};
+
 const generationMode = {
+    MESSAGE: -1,
     CHARACTER: 0,
     USER: 1,
     SCENARIO: 2,
@@ -62,6 +73,7 @@ const generationMode = {
     CHARACTER_MULTIMODAL: 8,
     USER_MULTIMODAL: 9,
     FACE_MULTIMODAL: 10,
+    FREE_EXTENDED: 11,
 };
 
 const multimodalMap = {
@@ -71,6 +83,7 @@ const multimodalMap = {
 };
 
 const modeLabels = {
+    [generationMode.MESSAGE]: 'Chat Message Template',
     [generationMode.CHARACTER]: 'Character ("Yourself")',
     [generationMode.FACE]: 'Portrait ("Your Face")',
     [generationMode.USER]: 'User ("Me")',
@@ -81,6 +94,7 @@ const modeLabels = {
     [generationMode.CHARACTER_MULTIMODAL]: 'Character (Multimodal Mode)',
     [generationMode.FACE_MULTIMODAL]: 'Portrait (Multimodal Mode)',
     [generationMode.USER_MULTIMODAL]: 'User (Multimodal Mode)',
+    [generationMode.FREE_EXTENDED]: 'Free Mode (LLM-Extended)',
 };
 
 const triggerWords = {
@@ -94,7 +108,7 @@ const triggerWords = {
 };
 
 const messageTrigger = {
-    activationRegex: /\b(send|mail|imagine|generate|make|create|draw|paint|render)\b.{0,10}\b(pic|picture|image|drawing|painting|photo|photograph)\b(?:\s+of)?(?:\s+(?:a|an|the|this|that|those)?)?(.+)/i,
+    activationRegex: /\b(send|mail|imagine|generate|make|create|draw|paint|render|show)\b.{0,10}\b(pic|picture|image|drawing|painting|photo|photograph)\b(?:\s+of)?(?:\s+(?:a|an|the|this|that|those|your)?)?(.+)/i,
     specialCases: {
         [generationMode.CHARACTER]: ['you', 'yourself'],
         [generationMode.USER]: ['me', 'myself'],
@@ -106,6 +120,8 @@ const messageTrigger = {
 };
 
 const promptTemplates = {
+    // Not really a prompt template, rather an outcome message template
+    [generationMode.MESSAGE]: '[{{char}} sends a picture that contains: {{prompt}}].',
     /*OLD:     [generationMode.CHARACTER]: "Pause your roleplay and provide comma-delimited list of phrases and keywords which describe {{char}}'s physical appearance and clothing. Ignore {{char}}'s personality traits, and chat history when crafting this description. End your response once the comma-delimited list is complete. Do not roleplay when writing this description, and do not attempt to continue the story.", */
     [generationMode.CHARACTER]: '[In the next response I want you to provide only a detailed comma-delimited list of keywords and phrases which describe {{char}}. The list must include all of the following items in this order: name, species and race, gender, age, clothing, occupation, physical features and appearances. Do not include descriptions of non-visual qualities such as personality, movements, scents, mental traits, or anything which could not be seen in a still photograph. Do not write in full sentences. Prefix your description with the phrase \'full body portrait,\']',
     //face-specific prompt
@@ -143,6 +159,7 @@ const promptTemplates = {
     [generationMode.FACE_MULTIMODAL]: 'Provide an exhaustive comma-separated list of tags describing the appearance of the character on this image in great detail. Start with "close-up portrait".',
     [generationMode.CHARACTER_MULTIMODAL]: 'Provide an exhaustive comma-separated list of tags describing the appearance of the character on this image in great detail. Start with "full body portrait".',
     [generationMode.USER_MULTIMODAL]: 'Provide an exhaustive comma-separated list of tags describing the appearance of the character on this image in great detail. Start with "full body portrait".',
+    [generationMode.FREE_EXTENDED]: 'Pause your roleplay and provide an exhaustive comma-separated list of tags describing the appearance of "{0}" in great detail. Start with {{charPrefix}} (sic) if the subject is associated with {{char}}.',
 };
 
 const defaultPrefix = 'best quality, absurdres, aesthetic,';
@@ -204,6 +221,7 @@ const defaultSettings = {
     interactive_mode: false,
     multimodal_captioning: false,
     snap: false,
+    free_extend: false,
 
     prompts: promptTemplates,
 
@@ -261,6 +279,11 @@ const defaultSettings = {
     // Pollinations settings
     pollinations_enhance: false,
     pollinations_refine: false,
+
+    // Visibility toggles
+    wand_visible: false,
+    command_visible: false,
+    interactive_visible: false,
 };
 
 const writePromptFieldsDebounced = debounce(writePromptFields, debounce_timeout.relaxed);
@@ -312,7 +335,7 @@ function processTriggers(chat, _, abort) {
         }
 
         abort(true);
-        setTimeout(() => generatePicture('sd', subject, message), 1);
+        setTimeout(() => generatePicture(initiators.interactive, {}, subject, message), 1);
     } catch {
         console.log('SD: Failed to process triggers.');
         return;
@@ -417,8 +440,12 @@ async function loadSettings() {
     $('#sd_comfy_prompt').val(extension_settings.sd.comfy_prompt);
     $('#sd_snap').prop('checked', extension_settings.sd.snap);
     $('#sd_clip_skip').val(extension_settings.sd.clip_skip);
-    $('#sd_clip_skip_value').text(extension_settings.sd.clip_skip);
+    $('#sd_clip_skip_value').val(extension_settings.sd.clip_skip);
     $('#sd_seed').val(extension_settings.sd.seed);
+    $('#sd_free_extend').prop('checked', extension_settings.sd.free_extend);
+    $('#sd_wand_visible').prop('checked', extension_settings.sd.wand_visible);
+    $('#sd_command_visible').prop('checked', extension_settings.sd.command_visible);
+    $('#sd_interactive_visible').prop('checked', extension_settings.sd.interactive_visible);
 
     for (const style of extension_settings.sd.styles) {
         const option = document.createElement('option');
@@ -476,7 +503,7 @@ async function loadSettingOptions() {
 function addPromptTemplates() {
     $('#sd_prompt_templates').empty();
 
-    for (const [name, prompt] of Object.entries(extension_settings.sd.prompts)) {
+    for (const [name, prompt] of Object.entries(extension_settings.sd.prompts).sort((a, b) => Number(a[0]) - Number(b[0]))) {
         const label = $('<label></label>')
             .text(modeLabels[name])
             .attr('for', `sd_prompt_${name}`)
@@ -683,6 +710,18 @@ function onChatChanged() {
     $('#sd_character_prompt').val(characterPrompt);
     $('#sd_character_negative_prompt').val(negativePrompt);
     $('#sd_character_prompt_share').prop('checked', hasSharedData);
+    adjustElementScrollHeight();
+}
+
+function adjustElementScrollHeight() {
+    if (!$('.sd_settings').is(':visible')) {
+        return;
+    }
+
+    resetScrollHeight($('#sd_prompt_prefix'));
+    resetScrollHeight($('#sd_negative_prompt'));
+    resetScrollHeight($('#sd_character_prompt'));
+    resetScrollHeight($('#sd_character_negative_prompt'));
 }
 
 function onCharacterPromptInput() {
@@ -762,9 +801,29 @@ function onRefineModeInput() {
     saveSettingsDebounced();
 }
 
+function onFreeExtendInput() {
+    extension_settings.sd.free_extend = !!$('#sd_free_extend').prop('checked');
+    saveSettingsDebounced();
+}
+
+function onWandVisibleInput() {
+    extension_settings.sd.wand_visible = !!$('#sd_wand_visible').prop('checked');
+    saveSettingsDebounced();
+}
+
+function onCommandVisibleInput() {
+    extension_settings.sd.command_visible = !!$('#sd_command_visible').prop('checked');
+    saveSettingsDebounced();
+}
+
+function onInteractiveVisibleInput() {
+    extension_settings.sd.interactive_visible = !!$('#sd_interactive_visible').prop('checked');
+    saveSettingsDebounced();
+}
+
 function onClipSkipInput() {
     extension_settings.sd.clip_skip = Number($('#sd_clip_skip').val());
-    $('#sd_clip_skip_value').text(extension_settings.sd.clip_skip);
+    $('#sd_clip_skip_value').val(extension_settings.sd.clip_skip);
     saveSettingsDebounced();
 }
 
@@ -775,13 +834,13 @@ function onSeedInput() {
 
 function onScaleInput() {
     extension_settings.sd.scale = Number($('#sd_scale').val());
-    $('#sd_scale_value').text(extension_settings.sd.scale.toFixed(1));
+    $('#sd_scale_value').val(extension_settings.sd.scale.toFixed(1));
     saveSettingsDebounced();
 }
 
 function onStepsInput() {
     extension_settings.sd.steps = Number($('#sd_steps').val());
-    $('#sd_steps_value').text(extension_settings.sd.steps);
+    $('#sd_steps_value').val(extension_settings.sd.steps);
     saveSettingsDebounced();
 }
 
@@ -844,13 +903,23 @@ function onSchedulerChange() {
 
 function onWidthInput() {
     extension_settings.sd.width = Number($('#sd_width').val());
-    $('#sd_width_value').text(extension_settings.sd.width);
+    $('#sd_width_value').val(extension_settings.sd.width);
     saveSettingsDebounced();
 }
 
 function onHeightInput() {
     extension_settings.sd.height = Number($('#sd_height').val());
-    $('#sd_height_value').text(extension_settings.sd.height);
+    $('#sd_height_value').val(extension_settings.sd.height);
+    saveSettingsDebounced();
+}
+
+function onSwapDimensionsClick() {
+    const w = extension_settings.sd.height;
+    const h = extension_settings.sd.width;
+    extension_settings.sd.width = w;
+    extension_settings.sd.height = h;
+    $('#sd_width').val(w).trigger('input');
+    $('#sd_height').val(h).trigger('input');
     saveSettingsDebounced();
 }
 
@@ -890,7 +959,7 @@ async function onViewAnlasClick() {
 
 function onNovelUpscaleRatioInput() {
     extension_settings.sd.novel_upscale_ratio = Number($('#sd_novel_upscale_ratio').val());
-    $('#sd_novel_upscale_ratio_value').text(extension_settings.sd.novel_upscale_ratio.toFixed(1));
+    $('#sd_novel_upscale_ratio_value').val(extension_settings.sd.novel_upscale_ratio.toFixed(1));
     saveSettingsDebounced();
 }
 
@@ -992,19 +1061,19 @@ function onHrUpscalerChange() {
 
 function onHrScaleInput() {
     extension_settings.sd.hr_scale = Number($('#sd_hr_scale').val());
-    $('#sd_hr_scale_value').text(extension_settings.sd.hr_scale.toFixed(1));
+    $('#sd_hr_scale_value').val(extension_settings.sd.hr_scale.toFixed(1));
     saveSettingsDebounced();
 }
 
 function onDenoisingStrengthInput() {
     extension_settings.sd.denoising_strength = Number($('#sd_denoising_strength').val());
-    $('#sd_denoising_strength_value').text(extension_settings.sd.denoising_strength.toFixed(2));
+    $('#sd_denoising_strength_value').val(extension_settings.sd.denoising_strength.toFixed(2));
     saveSettingsDebounced();
 }
 
 function onHrSecondPassStepsInput() {
     extension_settings.sd.hr_second_pass_steps = Number($('#sd_hr_second_pass_steps').val());
-    $('#sd_hr_second_pass_steps_value').text(extension_settings.sd.hr_second_pass_steps);
+    $('#sd_hr_second_pass_steps_value').val(extension_settings.sd.hr_second_pass_steps);
     saveSettingsDebounced();
 }
 
@@ -1026,6 +1095,7 @@ async function changeComfyWorkflow(_, name) {
     } else {
         toastr.error(`ComfyUI Workflow "${name}" does not exist.`);
     }
+    return '';
 }
 
 async function validateAutoUrl() {
@@ -2016,6 +2086,10 @@ function getGenerationType(prompt) {
         mode = multimodalMap[mode];
     }
 
+    if (mode === generationMode.FREE && extension_settings.sd.free_extend) {
+        mode = generationMode.FREE_EXTENDED;
+    }
+
     return mode;
 }
 
@@ -2080,7 +2154,16 @@ function getRawLastMessage() {
     return `((${processReply(lastMessage.mes)})), (${processReply(character.scenario)}:0.7), (${processReply(character.description)}:0.5)`;
 }
 
-async function generatePicture(args, trigger, message, callback) {
+/**
+ * Generates an image based on the given trigger word.
+ * @param {string} initiator The initiator of the image generation
+ * @param {Record<string, object>} args Command arguments
+ * @param {string} trigger Subject trigger word
+ * @param {string} [message] Chat message
+ * @param {function} [callback] Callback function
+ * @returns {Promise<string>} Image path
+ */
+async function generatePicture(initiator, args, trigger, message, callback) {
     if (!trigger || trigger.trim().length === 0) {
         console.log('Trigger word empty, aborting');
         return;
@@ -2111,9 +2194,9 @@ async function generatePicture(args, trigger, message, callback) {
             eventSource.emit(event_types.FORCE_SET_BACKGROUND, { url: imgUrl, path: imagePath });
 
             if (typeof callbackOriginal === 'function') {
-                callbackOriginal(prompt, imagePath, generationType, negativePromptPrefix);
+                callbackOriginal(prompt, imagePath, generationType, negativePromptPrefix, initiator);
             } else {
-                sendMessage(prompt, imagePath, generationType, negativePromptPrefix);
+                sendMessage(prompt, imagePath, generationType, negativePromptPrefix, initiator);
             }
         };
     }
@@ -2122,18 +2205,19 @@ async function generatePicture(args, trigger, message, callback) {
         callback = () => { };
     }
 
-    const negativePromptPrefix = resolveVariable(args?.negative) || '';
     const dimensions = setTypeSpecificDimensions(generationType);
+    let negativePromptPrefix = args?.negative || '';
     let imagePath = '';
 
     try {
-        const prompt = await getPrompt(generationType, message, trigger, quietPrompt);
+        const combineNegatives = (prefix) => { negativePromptPrefix = combinePrefixes(negativePromptPrefix, prefix); };
+        const prompt = await getPrompt(generationType, message, trigger, quietPrompt, combineNegatives);
         console.log('Processed image prompt:', prompt);
 
         context.deactivateSendButtons();
         hideSwipeButtons();
 
-        imagePath = await sendGenerationRequest(generationType, prompt, negativePromptPrefix, characterName, callback);
+        imagePath = await sendGenerationRequest(generationType, prompt, negativePromptPrefix, characterName, callback, initiator);
     } catch (err) {
         console.trace(err);
         throw new Error('SD prompt text generation failed.');
@@ -2196,7 +2280,16 @@ function restoreOriginalDimensions(savedParams) {
     extension_settings.sd.width = savedParams.width;
 }
 
-async function getPrompt(generationType, message, trigger, quietPrompt) {
+/**
+ * Generates a prompt for image generation.
+ * @param {number} generationType The type of image generation to perform.
+ * @param {string} message A message text to use for the image generation.
+ * @param {string} trigger A trigger string to use for the image generation.
+ * @param {string} quietPrompt A quiet prompt to use for the image generation.
+ * @param {function} combineNegatives A function that combines the negative prompt with other prompts.
+ * @returns {Promise<string>} - A promise that resolves when the prompt generation completes.
+ */
+async function getPrompt(generationType, message, trigger, quietPrompt, combineNegatives) {
     let prompt;
 
     switch (generationType) {
@@ -2204,7 +2297,7 @@ async function getPrompt(generationType, message, trigger, quietPrompt) {
             prompt = message || getRawLastMessage();
             break;
         case generationMode.FREE:
-            prompt = generateFreeModePrompt(trigger.trim());
+            prompt = generateFreeModePrompt(trigger.trim(), combineNegatives);
             break;
         case generationMode.FACE_MULTIMODAL:
         case generationMode.CHARACTER_MULTIMODAL:
@@ -2216,6 +2309,10 @@ async function getPrompt(generationType, message, trigger, quietPrompt) {
             break;
     }
 
+    if (generationType === generationMode.FREE_EXTENDED) {
+        prompt = generateFreeModePrompt(prompt.trim(), combineNegatives);
+    }
+
     if (generationType !== generationMode.FREE) {
         prompt = await refinePrompt(prompt, true);
     }
@@ -2226,9 +2323,10 @@ async function getPrompt(generationType, message, trigger, quietPrompt) {
 /**
  * Generates a free prompt with a character-specific prompt prefix support.
  * @param {string} trigger - The prompt to use for the image generation.
+ * @param {function} combineNegatives - A function that combines the negative prompt with other prompts.
  * @returns {string}
  */
-function generateFreeModePrompt(trigger) {
+function generateFreeModePrompt(trigger, combineNegatives) {
     return trigger
         .replace(/(?:^char(\s|,)|\{\{charPrefix\}\})/gi, (_, suffix) => {
             const getLastCharacterKey = () => {
@@ -2249,7 +2347,9 @@ function generateFreeModePrompt(trigger) {
 
             const key = getLastCharacterKey();
             const value = (extension_settings.sd.character_prompts[key] || '').trim();
-            return value ? value + (suffix || '') : '';
+            const negativeValue = (extension_settings.sd.character_negative_prompts[key] || '').trim();
+            typeof combineNegatives === 'function' && negativeValue ? combineNegatives(negativeValue) : void 0;
+            return value ? combinePrefixes(value, (suffix || '')) : '';
         });
 }
 
@@ -2335,12 +2435,13 @@ async function generatePrompt(quietPrompt) {
  * @param {number} generationType Type of image generation
  * @param {string} prompt Prompt to be used for image generation
  * @param {string} additionalNegativePrefix Additional negative prompt to be used for image generation
- * @param {string} [characterName] Name of the character
+ * @param {string} characterName Name of the character
- * @param {function} [callback] Callback function to be called after image generation
+ * @param {function} callback Callback function to be called after image generation
+ * @param {string} initiator The initiator of the image generation
  * @returns
  */
-async function sendGenerationRequest(generationType, prompt, additionalNegativePrefix, characterName = null, callback) {
+async function sendGenerationRequest(generationType, prompt, additionalNegativePrefix, characterName, callback, initiator) {
-    const noCharPrefix = [generationMode.FREE, generationMode.BACKGROUND, generationMode.USER, generationMode.USER_MULTIMODAL];
+    const noCharPrefix = [generationMode.FREE, generationMode.BACKGROUND, generationMode.USER, generationMode.USER_MULTIMODAL, generationMode.FREE_EXTENDED];
     const prefix = noCharPrefix.includes(generationType)
         ? extension_settings.sd.prompt_prefix
         : combinePrefixes(extension_settings.sd.prompt_prefix, getCharacterPrefix());
@@ -2405,7 +2506,7 @@ async function sendGenerationRequest(generationType, prompt, additionalNegativeP
 
     const filename = `${characterName}_${humanizedDateTime()}`;
     const base64Image = await saveBase64AsFile(result.data, characterName, filename, result.format);
-    callback ? callback(prompt, base64Image, generationType, additionalNegativePrefix) : sendMessage(prompt, base64Image, generationType, additionalNegativePrefix);
+    callback ? callback(prompt, base64Image, generationType, additionalNegativePrefix, initiator) : sendMessage(prompt, base64Image, generationType, additionalNegativePrefix, initiator);
     return base64Image;
 }
 
@@ -3009,15 +3110,17 @@ async function onComfyDeleteWorkflowClick() {
  * @param {string} image Base64 encoded image
  * @param {number} generationType Generation type of the image
  * @param {string} additionalNegativePrefix Additional negative prompt used for the image generation
+ * @param {string} initiator The initiator of the image generation
  */
-async function sendMessage(prompt, image, generationType, additionalNegativePrefix) {
+async function sendMessage(prompt, image, generationType, additionalNegativePrefix, initiator) {
     const context = getContext();
     const name = context.groupId ? systemUserName : context.name2;
-    const messageText = `[${name} sends a picture that contains: ${prompt}]`;
+    const template = extension_settings.sd.prompts[generationMode.MESSAGE] || '{{prompt}}';
+    const messageText = substituteParamsExtended(template, { char: name, prompt: prompt });
     const message = {
         name: name,
         is_user: false,
-        is_system: true,
+        is_system: !getVisibilityByInitiator(initiator),
         send_date: getMessageTimeStamp(),
         mes: messageText,
         extra: {
@@ -3033,11 +3136,29 @@ async function sendMessage(prompt, image, generationType, additionalNegativePref
     context.saveChat();
 }
 
+/**
+ * Gets the visibility of the resulting message based on the initiator.
+ * @param {string} initiator Generation initiator
+ * @returns {boolean} Is resulting message visible
+ */
+function getVisibilityByInitiator(initiator) {
+    switch (initiator) {
+        case initiators.interactive:
+            return !!extension_settings.sd.interactive_visible;
+        case initiators.wand:
+            return !!extension_settings.sd.wand_visible;
+        case initiators.command:
+            return !!extension_settings.sd.command_visible;
+        default:
+            return false;
+    }
+}
+
 async function addSDGenButtons() {
     const buttonHtml = await renderExtensionTemplateAsync('stable-diffusion', 'button');
     const dropdownHtml = await renderExtensionTemplateAsync('stable-diffusion', 'dropdown');
 
-    $('#extensionsMenu').prepend(buttonHtml);
+    $('#sd_wand_container').append(buttonHtml);
     $(document.body).append(dropdownHtml);
 
     const messageButton = $('.sd_message_gen');
@@ -3082,7 +3203,7 @@ async function addSDGenButtons() {
 
         if (param) {
             console.log('doing /sd ' + param);
-            generatePicture('sd', param);
+            generatePicture(initiators.wand, {}, param);
         }
     });
 }
@@ -3159,11 +3280,11 @@ async function sdMessageButton(e) {
             const generationType = message?.extra?.generationType ?? generationMode.FREE;
             console.log('Regenerating an image, using existing prompt:', prompt);
             dimensions = setTypeSpecificDimensions(generationType);
-            await sendGenerationRequest(generationType, prompt, negative, characterFileName, saveGeneratedImage);
+            await sendGenerationRequest(generationType, prompt, negative, characterFileName, saveGeneratedImage, initiators.action);
         }
         else {
             console.log('doing /sd raw last');
-            await generatePicture('sd', 'raw_last', messageText, saveGeneratedImage);
+            await generatePicture(initiators.action, {}, 'raw_last', messageText, saveGeneratedImage);
         }
     }
     catch (error) {
@@ -3226,15 +3347,17 @@ jQuery(async () => {
 
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'imagine',
-        callback: generatePicture,
+        callback: (args, trigger) => generatePicture(initiators.command, args, String(trigger)),
         aliases: ['sd', 'img', 'image'],
         namedArgumentList: [
             new SlashCommandNamedArgument(
-                'quiet', 'whether to post the generated image to chat', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false', ['false', 'true'],
+                'quiet', 'whether to post the generated image to chat', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false',
-            ),
-            new SlashCommandNamedArgument(
-                'negative', 'negative prompt prefix', [ARGUMENT_TYPE.STRING], false, false, '',
             ),
+            SlashCommandNamedArgument.fromProps({
+                name: 'negative',
+                description: 'negative prompt prefix',
+                typeList: [ARGUMENT_TYPE.STRING],
+            }),
         ],
         unnamedArgumentList: [
             new SlashCommandArgument(
@@ -3243,7 +3366,7 @@ jQuery(async () => {
         ],
         helpString: `
             <div>
-                Requests to generate an image and posts it to chat (unless quiet=true argument is specified). Supported arguments: <code>${Object.values(triggerWords).flat().join(', ')}</code>.
+                Requests to generate an image and posts it to chat (unless <code>quiet=true</code> argument is specified).</code>.
             </div>
             <div>
                 Anything else would trigger a "free mode" to make generate whatever you prompted. Example: <code>/imagine apple tree</code> would generate a picture of an apple tree. Returns a link to the generated image.
@@ -3256,16 +3379,19 @@ jQuery(async () => {
         callback: changeComfyWorkflow,
         aliases: ['icw'],
         unnamedArgumentList: [
-            new SlashCommandArgument(
+            SlashCommandArgument.fromProps({
-                'workflowName', [ARGUMENT_TYPE.STRING], true,
+                description: 'workflow name',
-            ),
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: () => Array.from(document.querySelectorAll('#sd_comfy_workflow > [value]')).map(x => x.getAttribute('value')).map(workflow => new SlashCommandEnumValue(workflow)),
+            }),
         ],
         helpString: '(workflowName) - change the workflow to be used for image generation with ComfyUI, e.g. <pre><code>/imagine-comfy-workflow MyWorkflow</code></pre>',
     }));
 
 
     const template = await renderExtensionTemplateAsync('stable-diffusion', 'settings', defaultSettings);
-    $('#extensions_settings').append(template);
+    $('#sd_container').append(template);
     $('#sd_source').on('change', onSourceChange);
     $('#sd_scale').on('input', onScaleInput);
     $('#sd_steps').on('input', onStepsInput);
@@ -3326,6 +3452,11 @@ jQuery(async () => {
     $('#sd_clip_skip').on('input', onClipSkipInput);
     $('#sd_seed').on('input', onSeedInput);
     $('#sd_character_prompt_share').on('input', onCharacterPromptShareInput);
+    $('#sd_free_extend').on('input', onFreeExtendInput);
+    $('#sd_wand_visible').on('input', onWandVisibleInput);
+    $('#sd_command_visible').on('input', onCommandVisibleInput);
+    $('#sd_interactive_visible').on('input', onInteractiveVisibleInput);
+    $('#sd_swap_dimensions').on('click', onSwapDimensionsClick);
 
     $('.sd_settings .inline-drawer-toggle').on('click', function () {
         initScrollHeight($('#sd_prompt_prefix'));

public/scripts/extensions/stable-diffusion/settings.html

@@ -22,6 +22,11 @@
                 <input id="sd_multimodal_captioning" type="checkbox" />
                 <span data-i18n="sd_multimodal_captioning_txt">Use multimodal captioning for portraits</span>
             </label>
+            <label for="sd_free_extend" class="checkbox_label" data-i18n="[title]sd_free_extend" title="Automatically extend free mode subject prompts (not portraits or backgrounds) using a currently selected LLM.">
+                <input id="sd_free_extend" type="checkbox" />
+                <span data-i18n="sd_free_extend_txt">Extend free mode prompts</span>
+                <small data-i18n="sd_free_extend_small">(interactive/commands)</small>
+            </label>
             <label for="sd_expand" class="checkbox_label" data-i18n="[title]sd_expand" title="Automatically extend prompts using text generation model">
                 <input id="sd_expand" type="checkbox" />
                 <span data-i18n="sd_expand_txt">Auto-enhance prompts</span>
@@ -123,16 +128,20 @@
             <div data-sd-source="openai">
                 <small data-i18n="These settings only apply to DALL-E 3">These settings only apply to DALL-E 3</small>
                 <div class="flex-container">
-                    <label for="sd_openai_style" data-i18n="Image Style">Image Style</label>
+                    <div class="flex1">
-                    <select id="sd_openai_style">
+                        <label for="sd_openai_style" data-i18n="Image Style">Image Style</label>
-                        <option value="vivid">Vivid</option>
+                        <select id="sd_openai_style">
-                        <option value="natural">Natural</option>
+                            <option value="vivid">Vivid</option>
-                    </select>
+                            <option value="natural">Natural</option>
-                    <label for="sd_openai_quality" data-i18n="Image Quality">Image Quality</label>
+                        </select>
-                    <select id="sd_openai_quality">
+                    </div>
-                        <option value="standard" data-i18n="Standard">Standard</option>
+                    <div class="flex1">
-                        <option value="hd" data-i18n="HD">HD</option>
+                        <label for="sd_openai_quality" data-i18n="Image Quality">Image Quality</label>
-                    </select>
+                        <select id="sd_openai_quality">
+                            <option value="standard" data-i18n="Standard">Standard</option>
+                            <option value="hd" data-i18n="HD">HD</option>
+                        </select>
+                    </div>
                 </div>
             </div>
             <div data-sd-source="comfy">
@@ -180,91 +189,164 @@
                     </label>
                 </div>
             </div>
-            <label for="sd_scale" data-i18n="CFG Scale">CFG Scale (<span id="sd_scale_value"></span>)</label>
+
-            <input id="sd_scale" type="range" min="{{scale_min}}" max="{{scale_max}}" step="{{scale_step}}" value="{{scale}}" />
+            <div class="flex-container">
-            <div data-sd-source="novel" class="marginTopBot5">
+                <div class="flex1">
-                <label class="checkbox_label" for="sd_novel_decrisper" title="Reduce artifacts caused by high guidance values.">
+                    <label for="sd_model" data-i18n="Model">Model</label>
-                    <input id="sd_novel_decrisper" type="checkbox" />
+                    <select id="sd_model"></select>
-                    <span data-i18n="Decrisper">
+                </div>
-                        Decrisper
+
-                    </span>
+                <div class="flex1" data-sd-source="comfy">
-                </label>
+                    <label for="sd_vae">VAE</label>
+                    <select id="sd_vae"></select>
+                </div>
             </div>
-            <label for="sd_steps" data-i18n="Sampling steps">Sampling steps (<span id="sd_steps_value"></span>)</label>
+
-            <input id="sd_steps" type="range" min="{{steps_min}}" max="{{steps_max}}" step="{{steps_step}}" value="{{steps}}" />
+            <div class="flex-container">
-            <label for="sd_width" data-i18n="Width">Width (<span id="sd_width_value"></span>)</label>
+                <div class="flex1">
-            <input id="sd_width" type="range" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{width}}" />
+                    <label for="sd_sampler" data-i18n="Sampling method">Sampling method</label>
-            <label for="sd_height" data-i18n="Height">Height (<span id="sd_height_value"></span>)</label>
+                    <select id="sd_sampler"></select>
-            <input id="sd_height" type="range" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{height}}" />
+                </div>
-            <label for="sd_resolution" data-i18n="Resolution">Resolution</label>
+
-            <select id="sd_resolution"><!-- Populated in JS --></select>
+                <div class="flex1" data-sd-source="comfy,auto">
-            <label for="sd_model" data-i18n="Model">Model</label>
+                    <label for="sd_scheduler" data-i18n="Scheduler">Scheduler</label>
-            <select id="sd_model"></select>
+                    <select id="sd_scheduler"></select>
-            <label for="sd_sampler" data-i18n="Sampling method">Sampling method</label>
+                </div>
-            <select id="sd_sampler"></select>
-            <label data-sd-source="horde" for="sd_horde_karras" class="checkbox_label marginTopBot5">
-                <input id="sd_horde_karras" type="checkbox" />
-                <span data-i18n="Karras (not all samplers supported)">
-                    Karras (not all samplers supported)
-                </span>
-            </label>
-            <div data-sd-source="novel" class="flex-container marginTopBot5">
-                <label class="flex1 checkbox_label" data-i18n="[title]SMEA versions of samplers are modified to perform better at high resolution." title="SMEA versions of samplers are modified to perform better at high resolution.">
-                    <input id="sd_novel_sm" type="checkbox" />
-                    <span data-i18n="SMEA">
-                        SMEA
-                    </span>
-                </label>
-                <label class="flex1 checkbox_label" data-i18n="[title]DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions." title="DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions.">
-                    <input id="sd_novel_sm_dyn" type="checkbox" />
-                    <span data-i18n="DYN">
-                        DYN
-                    </span>
-                </label>
             </div>
-            <div data-sd-source="comfy,auto">
+
-                <label for="sd_scheduler" data-i18n="Scheduler">Scheduler</label>
+            <div class="flex-container">
-                <select id="sd_scheduler"></select>
+                <div class="flex1">
+                    <label for="sd_resolution" data-i18n="Resolution">Resolution</label>
+                    <select id="sd_resolution"><!-- Populated in JS --></select>
+                </div>
+
+                <div class="flex1" data-sd-source="auto,vlad,drawthings">
+                    <label for="sd_hr_upscaler" data-i18n="Upscaler">Upscaler</label>
+                    <select id="sd_hr_upscaler"></select>
+                </div>
             </div>
-            <div data-sd-source="comfy">
+
-                <label for="sd_vae">VAE</label>
+            <div class="flex-container">
-                <select id="sd_vae"></select>
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                    <small>
+                        <span data-i18n="Sampling steps">Sampling steps</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_steps" name="sd_steps" min="{{steps_min}}" max="{{steps_max}}" step="{{steps_step}}" value="{{steps}}" >
+                    <input class="neo-range-input" type="number" id="sd_steps_value" data-for="sd_steps" min="{{steps_min}}" max="{{steps_max}}" step="{{steps_step}}" value="{{steps}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                    <small>
+                        <span data-i18n="CFG Scale">CFG Scale</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_scale" name="sd_scale" min="{{scale_min}}" max="{{scale_max}}" step="{{scale_step}}" value="{{scale}}" >
+                    <input class="neo-range-input" type="number" id="sd_scale_value" data-for="sd_scale" min="{{scale_min}}" max="{{scale_max}}" step="{{scale_step}}" value="{{scale}}" >
+                </div>
             </div>
-            <div class="flex-container marginTopBot5">
+
+            <div id="sd_dimensions_block" class="flex-container">
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                    <small>
+                        <span data-i18n="Width">Width</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_width" name="sd_width" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{width}}" >
+                    <input class="neo-range-input" type="number" id="sd_width_value" data-for="sd_width" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{width}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                    <small>
+                        <span data-i18n="Height">Height</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_height" name="sd_height" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{height}}" >
+                    <input class="neo-range-input" type="number" id="sd_height_value" data-for="sd_height" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{height}}" >
+                </div>
+
+                <div id="sd_swap_dimensions" class="right_menu_button" title="Swap width and height" data-i18n="[title]Swap width and height">
+                    <i class="fa-solid fa-arrow-right-arrow-left"></i>
+                </div>
+            </div>
+
+            <div class="flex-container">
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad,drawthings">
+                    <small>
+                        <span data-i18n="Upscale by">Upscale by</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_hr_scale" name="sd_hr_scale" min="{{hr_scale_min}}" max="{{hr_scale_max}}" step="{{hr_scale_step}}" value="{{hr_scale}}" >
+                    <input class="neo-range-input" type="number" id="sd_hr_scale_value" data-for="sd_hr_scale" min="{{hr_scale_min}}" max="{{hr_scale_max}}" step="{{hr_scale_step}}" value="{{hr_scale}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad">
+                    <small>
+                        <span data-i18n="Denoising strength">Denoising strength</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_denoising_strength" name="sd_denoising_strength" min="{{denoising_strength_min}}" max="{{denoising_strength_max}}" step="{{denoising_strength_step}}" value="{{denoising_strength}}" >
+                    <input class="neo-range-input" type="number" id="sd_denoising_strength_value" data-for="sd_denoising_strength" min="{{denoising_strength_min}}" max="{{denoising_strength_max}}" step="{{denoising_strength_step}}" value="{{denoising_strength}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad">
+                    <small>
+                        <span data-i18n="Hires steps (2nd pass)">Hires steps (2nd pass)</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_hr_second_pass_steps" name="sd_hr_second_pass_steps" max="{{hr_second_pass_steps_max}}" step="{{hr_second_pass_steps_step}}" value="{{hr_second_pass_steps}}"  >
+                    <input class="neo-range-input" type="number" id="sd_hr_second_pass_steps_value" data-for="sd_hr_second_pass_steps" max="{{hr_second_pass_steps_max}}" step="{{hr_second_pass_steps_step}}" value="{{hr_second_pass_steps}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="novel">
+                    <small>
+                        <span data-i18n="Upscale by">Upscale by</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_novel_upscale_ratio" name="sd_novel_upscale_ratio" min="{{novel_upscale_ratio_min}}" max="{{novel_upscale_ratio_max}}" step="{{novel_upscale_ratio_step}}" value="{{novel_upscale_ratio}}" >
+                    <input class="neo-range-input" type="number" id="sd_novel_upscale_ratio_value" data-for="sd_novel_upscale_ratio" min="{{novel_upscale_ratio_min}}" max="{{novel_upscale_ratio_max}}" step="{{novel_upscale_ratio_step}}" value="{{novel_upscale_ratio}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad,comfy,horde,drawthings,extras">
+                    <small>
+                        <span data-i18n="CLIP Skip">CLIP Skip</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_clip_skip" name="sd_clip_skip" min="{{clip_skip_min}}" max="{{clip_skip_max}}" step="{{clip_skip_step}}" value="{{clip_skip}}" >
+                    <input class="neo-range-input" type="number" id="sd_clip_skip_value" data-for="sd_clip_skip" min="{{clip_skip_min}}" max="{{clip_skip_max}}" step="{{clip_skip_step}}" value="{{clip_skip}}" >
+                </div>
+            </div>
+
+            <div class="flex-container marginTopBot5" data-sd-source="auto,vlad,extras,horde,drawthings,comfy">
                 <label class="flex1 checkbox_label">
                     <input id="sd_restore_faces" type="checkbox" />
-                    <span data-i18n="Restore Faces">Restore Faces</span>
+                    <small data-i18n="Restore Faces">Restore Faces</small>
                 </label>
                 <label class="flex1 checkbox_label">
                     <input id="sd_enable_hr" type="checkbox" />
-                    <span data-i18n="Hires. Fix">Hires. Fix</span>
+                    <small data-i18n="Hires. Fix">Hires. Fix</small>
+                </label>
+                <label data-sd-source="horde" for="sd_horde_karras" class="flex1 checkbox_label">
+                    <input id="sd_horde_karras" type="checkbox" />
+                    <small data-i18n="Karras">Karras</small>
+                    <i class="fa-solid fa-info-circle fa-sm opacity50p" data-i18n="[title]Not all samplers supported." title="Not all samplers supported."></i>
                 </label>
             </div>
-            <div data-sd-source="auto,vlad,comfy,horde,drawthings,extras" class="marginTopBot5">
+
-                <label for="sd_clip_skip">CLIP Skip (<span id="sd_clip_skip_value"></span>)</label>
+            <div class="flex-container marginTopBot5" data-sd-source="novel">
-                <input type="range" id="sd_clip_skip" min="{{clip_skip_min}}" max="{{clip_skip_max}}" step="{{clip_skip_step}}" value="{{clip_skip}}" />
+                <label class="flex1 checkbox_label" data-i18n="[title]SMEA versions of samplers are modified to perform better at high resolution." title="SMEA versions of samplers are modified to perform better at high resolution.">
-            </div>
+                    <input id="sd_novel_sm" type="checkbox" />
-            <div data-sd-source="auto,vlad,drawthings">
+                    <small data-i18n="SMEA">SMEA</small>
-                <label for="sd_hr_upscaler" data-i18n="Upscaler">Upscaler</label>
+                </label>
-                <select id="sd_hr_upscaler"></select>
+                <label class="flex1 checkbox_label" data-i18n="[title]DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions." title="DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions.">
-                <label for="sd_hr_scale"><span data-i18n="Upscale by">Upscale by</span> (<span id="sd_hr_scale_value"></span>)</label>
+                    <input id="sd_novel_sm_dyn" type="checkbox" />
-                <input id="sd_hr_scale" type="range" min="{{hr_scale_min}}" max="{{hr_scale_max}}" step="{{hr_scale_step}}" value="{{hr_scale}}" />
+                    <small data-i18n="DYN">DYN</small>
-            </div>
+                </label>
-            <div data-sd-source="auto,vlad">
+                <label class="flex1 checkbox_label" for="sd_novel_decrisper" title="Reduce artifacts caused by high guidance values.">
-                <label for="sd_denoising_strength"><span data-i18n="Denoising strength">Denoising strength</span> (<span id="sd_denoising_strength_value"></span>)</label>
+                    <input id="sd_novel_decrisper" type="checkbox" />
-                <input id="sd_denoising_strength" type="range" min="{{denoising_strength_min}}" max="{{denoising_strength_max}}" step="{{denoising_strength_step}}" value="{{denoising_strength}}" />
+                    <small data-i18n="Decrisper">Decrisper</small>
-                <label for="sd_hr_second_pass_steps"><span data-i18n="Hires steps (2nd pass)">Hires steps (2nd pass)</span> (<span id="sd_hr_second_pass_steps_value"></span>)</label>
+                </label>
-                <input id="sd_hr_second_pass_steps" type="range" min="{{hr_second_pass_steps_min}}" max="{{hr_second_pass_steps_max}}" step="{{hr_second_pass_steps_step}}" value="{{hr_second_pass_steps}}" />
-            </div>
-            <div data-sd-source="novel">
-                <label for="sd_novel_upscale_ratio"><span data-i18n="Upscale by">Upscale by</span> (<span id="sd_novel_upscale_ratio_value"></span>)</label>
-                <input id="sd_novel_upscale_ratio" type="range" min="{{novel_upscale_ratio_min}}" max="{{novel_upscale_ratio_max}}" step="{{novel_upscale_ratio_step}}" value="{{novel_upscale_ratio}}" />
             </div>
+
             <div data-sd-source="novel,togetherai,pollinations,comfy,drawthings,vlad,auto,horde,extras" class="marginTop5">
-                <label for="sd_seed">Seed</label>
+                <label for="sd_seed">
-                <small>(-1 for random)</small>
+                    <span data-i18n="Seed">Seed</span>
+                    <small data-i18n="(-1 for random)">(-1 for random)</small>
+                </label>
                 <input id="sd_seed" type="number" class="text_pole" min="-1" max="9999999999" step="1" />
             </div>
+
             <hr>
             <h4  data-i18n="[title]Preset for prompt prefix and negative prompt" title="Preset for prompt prefix and negative prompt">
                 <span data-i18n="Style">Style</span>
@@ -279,16 +361,16 @@
                 </div>
             </div>
             <label for="sd_prompt_prefix" data-i18n="Common prompt prefix">Common prompt prefix</label>
-            <textarea id="sd_prompt_prefix" class="text_pole textarea_compact" rows="3" data-i18n="[placeholder]sd_prompt_prefix_placeholder" placeholder="Use {prompt} to specify where the generated prompt will be inserted"></textarea>
+            <textarea id="sd_prompt_prefix" class="text_pole textarea_compact" data-i18n="[placeholder]sd_prompt_prefix_placeholder" placeholder="Use {prompt} to specify where the generated prompt will be inserted"></textarea>
             <label for="sd_negative_prompt" data-i18n="Negative common prompt prefix">Negative common prompt prefix</label>
-            <textarea id="sd_negative_prompt" class="text_pole textarea_compact" rows="3"></textarea>
+            <textarea id="sd_negative_prompt" class="text_pole textarea_compact"></textarea>
             <div id="sd_character_prompt_block">
                 <label for="sd_character_prompt" data-i18n="Character-specific prompt prefix">Character-specific prompt prefix</label>
                 <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
-                <textarea id="sd_character_prompt" class="text_pole textarea_compact" rows="3" data-i18n="[placeholder]sd_character_prompt_placeholder" placeholder="Any characteristics that describe the currently selected character. Will be added after a common prompt prefix.&#10;Example: female, green eyes, brown hair, pink shirt"></textarea>
+                <textarea id="sd_character_prompt" class="text_pole textarea_compact" data-i18n="[placeholder]sd_character_prompt_placeholder" placeholder="Any characteristics that describe the currently selected character. Will be added after a common prompt prefix.&#10;Example: female, green eyes, brown hair, pink shirt"></textarea>
                 <label for="sd_character_negative_prompt" data-i18n="Character-specific negative prompt prefix">Character-specific negative prompt prefix</label>
                 <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
-                <textarea id="sd_character_negative_prompt" class="text_pole textarea_compact" rows="3" data-i18n="[placeholder]sd_character_negative_prompt_placeholder" placeholder="Any characteristics that should not appear for the selected character. Will be added after a negative common prompt prefix.&#10;Example: jewellery, shoes, glasses"></textarea>
+                <textarea id="sd_character_negative_prompt" class="text_pole textarea_compact" data-i18n="[placeholder]sd_character_negative_prompt_placeholder" placeholder="Any characteristics that should not appear for the selected character. Will be added after a negative common prompt prefix.&#10;Example: jewellery, shoes, glasses"></textarea>
                 <label for="sd_character_prompt_share" class="checkbox_label flexWrap marginTop5">
                     <input id="sd_character_prompt_share" type="checkbox" />
                     <span data-i18n="Shareable">
@@ -299,6 +381,36 @@
                     </small>
                 </label>
             </div>
+            <hr>
+            <h4 data-i18n="Chat Message Visibility (by source)">
+                Chat Message Visibility (by source)
+            </h4>
+            <small data-i18n="Uncheck to hide the extension's messages in chat prompts.">
+                Uncheck to hide the extension's messages in chat prompts.
+            </small>
+            <div class="flex-container flexFlowColumn marginTopBot5 flexGap10">
+                <label for="sd_wand_visible" class="checkbox_label">
+                    <span class="flex1 flex-container alignItemsCenter">
+                        <i class="fa-solid fa-wand-magic-sparkles"></i>
+                        <span data-i18n="Extensions Menu">Extensions Menu</span>
+                    </span>
+                    <input id="sd_wand_visible" type="checkbox" />
+                </label>
+                <label for="sd_command_visible" class="checkbox_label">
+                    <span class="flex1 flex-container alignItemsCenter">
+                        <i class="fa-solid fa-terminal"></i>
+                        <span data-i18n="Slash Command">Slash Command</span>
+                    </span>
+                    <input id="sd_command_visible" type="checkbox" />
+                </label>
+                <label for="sd_interactive_visible" class="checkbox_label">
+                    <span class="flex1 flex-container alignItemsCenter">
+                        <i class="fa-solid fa-message"></i>
+                        <span data-i18n="Interactive Mode">Interactive Mode</span>
+                    </span>
+                    <input id="sd_interactive_visible" type="checkbox" />
+                </label>
+            </div>
         </div>
     </div>
     <div class="inline-drawer">

public/scripts/extensions/stable-diffusion/style.css

@@ -2,27 +2,6 @@
     display: block;
 }
 
-#sd_gen {
-    /*order: 100;
-    width: 40px;
-    height: 40px;
-    margin: 0;
-    padding: 1px; */
-    outline: none;
-    border: none;
-    cursor: pointer;
-    transition: 0.3s;
-    opacity: 0.7;
-    display: flex;
-    align-items: center;
-    /* justify-content: center; */
-}
-
-#sd_gen:hover {
-    opacity: 1;
-    filter: brightness(1.2);
-}
-
 #sd_dropdown {
     z-index: 30000;
     backdrop-filter: blur(--SmartThemeBlurStrength);
@@ -96,3 +75,19 @@
         opacity: 1;
     }
 }
+
+.sd_settings .flex1.checkbox_label input[type="checkbox"] {
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
+#sd_dimensions_block {
+    position: relative;
+}
+
+#sd_swap_dimensions {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+}

public/scripts/extensions/token-counter/index.js

@@ -1,10 +1,11 @@
-import { callPopup, main_api } from '../../../script.js';
+import { main_api } from '../../../script.js';
 import { getContext } from '../../extensions.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { getFriendlyTokenizerName, getTextTokens, getTokenCountAsync, tokenizers } from '../../tokenizers.js';
 import { resetScrollHeight, debounce } from '../../utils.js';
 import { debounce_timeout } from '../../constants.js';
+import { POPUP_TYPE, callGenericPopup } from '../../popup.js';
 
 function rgb2hex(rgb) {
     rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
@@ -63,8 +64,7 @@ async function doTokenCounter() {
     }, debounce_timeout.relaxed);
     dialog.find('#token_counter_textarea').on('input', () => countDebounced());
 
-    $('#dialogue_popup').addClass('wide_dialogue_popup');
+    callGenericPopup(dialog, POPUP_TYPE.TEXT, '', { wide: true, large: true, allowVerticalScrolling: true });
-    callPopup(dialog, 'text', '', { wide: true, large: true });
 }
 
 /**
@@ -123,6 +123,7 @@ async function doCount() {
     //toastr success with the token count of the chat
     const count = await getTokenCountAsync(allMessages);
     toastr.success(`Token count: ${count}`);
+    return count;
 }
 
 jQuery(() => {
@@ -131,10 +132,10 @@ jQuery(() => {
             <div class="fa-solid fa-1 extensionsMenuExtensionButton" /></div>
             Token Counter
         </div>`;
-    $('#extensionsMenu').prepend(buttonHtml);
+    $('#token_counter_wand_container').append(buttonHtml);
     $('#token_counter').on('click', doTokenCounter);
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'count',
-        callback: doCount,
+        callback: async () => String(await doCount()),
         returns: 'number of tokens',
         helpString: 'Counts the number of tokens in the current chat.',
     }));

public/scripts/extensions/translate/buttons.html

@@ -0,0 +1,8 @@
+<div id="translate_chat" class="list-group-item flex-container flexGap5">
+    <div class="fa-solid fa-language extensionsMenuExtensionButton" /></div>
+    <span data-i18n="ext_translate_btn_chat">Translate Chat</span>
+</div>
+<div id="translate_input_message" class="list-group-item flex-container flexGap5">
+    <div class="fa-solid fa-keyboard extensionsMenuExtensionButton" /></div>
+    <span data-i18n="ext_translate_btn_input">Translate Input</span>
+</div>

public/scripts/extensions/translate/deleteConfirmation.html

@@ -0,0 +1 @@
+<h3 data-i18n="ext_translate_delete_confirm_1">Are you sure?</h3><span data-i18n="ext_translate_delete_confirm_2">This will remove translated text from all messages in the current chat. This action cannot be undone.</span>

public/scripts/extensions/translate/index.html

@@ -0,0 +1,38 @@
+<div class="translation_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b data-i18n="ext_translate_title">Chat Translation</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <label for="translation_auto_mode" class="checkbox_label" data-i18n="ext_translate_auto_mode">Auto-mode</label>
+            <select id="translation_auto_mode">
+                <option data-i18n="ext_translate_mode_none" value="none">None</option>
+                <option data-i18n="ext_translate_mode_responses" value="responses">Translate responses</option>
+                <option data-i18n="ext_translate_mode_inputs" value="inputs">Translate inputs</option>
+                <option data-i18n="ext_translate_mode_both" value="both">Translate both</option>
+            </select>
+            <label data-i18n="ext_translate_mode_provider" for="translation_provider">Provider</label>
+            <div class="flex-container gap5px flexnowrap marginBot5">
+                <select id="translation_provider" name="provider" class="margin0">
+                    <option value="libre">Libre</option>
+                    <option value="google">Google</option>
+                    <option value="lingva">Lingva</option>
+                    <option value="deepl">DeepL</option>
+                    <option value="deeplx">DeepLX</option>
+                    <option value="bing">Bing</option>
+                    <option value="oneringtranslator">OneRingTranslator</option>
+                    <option value="yandex">Yandex</option>
+                <select>
+                <div id="translate_key_button" class="menu_button fa-solid fa-key margin0"></div>
+                <div id="translate_url_button" class="menu_button fa-solid fa-link margin0"></div>
+            </div>
+            <label data-i18n="ext_translate_target_lang" for="translation_target_language">Target Language</label>
+            <select id="translation_target_language" name="target_language"></select>
+            <div id="translation_clear" class="menu_button">
+                <i class="fa-solid fa-trash-can"></i>
+                <span data-i18n="ext_translate_clear">Clear Translations</span>
+            </div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/translate/index.js

@@ -1,7 +1,6 @@
 export { translate };
 
 import {
-    callPopup,
     eventSource,
     event_types,
     getRequestHeaders,
@@ -10,7 +9,8 @@ import {
     substituteParams,
     updateMessageBlock,
 } from '../../../script.js';
-import { extension_settings, getContext } from '../../extensions.js';
+import { extension_settings, getContext, renderExtensionTemplateAsync } from '../../extensions.js';
+import { POPUP_TYPE, callGenericPopup } from '../../popup.js';
 import { findSecret, secret_state, writeSecret } from '../../secrets.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
@@ -340,6 +340,34 @@ async function translateProviderBing(text, lang) {
     throw new Error(response.statusText);
 }
 
+/**
+ * Translates text using the Yandex Translate API
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @returns {Promise<string>} Translated text
+ */
+async function translateProviderYandex(text, lang) {
+    let chunks = [];
+    const chunkSize = 5000;
+    if (text.length <= chunkSize) {
+        chunks.push(text);
+    } else {
+        chunks = splitRecursive(text, chunkSize);
+    }
+    const response = await fetch('/api/translate/yandex', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ chunks: chunks, lang: lang }),
+    });
+
+    if (response.ok) {
+        const result = await response.text();
+        return result;
+    }
+
+    throw new Error(response.statusText);
+}
+
 /**
  * Splits text into chunks and translates each chunk separately
  * @param {string} text Text to translate
@@ -374,6 +402,10 @@ async function translate(text, lang) {
             return '';
         }
 
+        if (!lang) {
+            lang = extension_settings.translate.target_language;
+        }
+
         switch (extension_settings.translate.provider) {
             case 'libre':
                 return await translateProviderLibre(text, lang);
@@ -389,6 +421,8 @@ async function translate(text, lang) {
                 return await translateProviderOneRing(text, lang);
             case 'bing':
                 return await chunkedTranslate(text, lang, translateProviderBing, 1000);
+            case 'yandex':
+                return await translateProviderYandex(text, lang);
             default:
                 console.error('Unknown translation provider', extension_settings.translate.provider);
                 return text;
@@ -442,6 +476,7 @@ async function onTranslateInputMessageClick() {
     const toast = toastr.info('Input Message is translating', 'Please wait...');
     const translatedText = await translate(textarea.value, extension_settings.translate.internal_language);
     textarea.value = translatedText;
+    textarea.dispatchEvent(new Event('input', { bubbles: true }));
     toastr.clear(toast);
 }
 
@@ -474,7 +509,8 @@ async function onTranslateChatClick() {
 }
 
 async function onTranslationsClearClick() {
-    const confirm = await callPopup('<h3>Are you sure?</h3>This will remove translated text from all messages in the current chat. This action cannot be undone.', 'confirm');
+    const popupHtml = await renderExtensionTemplateAsync('translate', 'deleteConfirmation');
+    const confirm = await callGenericPopup(popupHtml, POPUP_TYPE.CONFIRM);
 
     if (!confirm) {
         return;
@@ -532,58 +568,12 @@ const handleMessageEdit = createEventHandler(translateMessageEdit, () => true);
 
 window['translate'] = translate;
 
-jQuery(() => {
+jQuery(async () => {
-    const html = `
+    const html = await renderExtensionTemplateAsync('translate', 'index');
-    <div class="translation_settings">
+    const buttonHtml = await renderExtensionTemplateAsync('translate', 'buttons');
-        <div class="inline-drawer">
-            <div class="inline-drawer-toggle inline-drawer-header">
-                <b>Chat Translation</b>
-                <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
-            </div>
-            <div class="inline-drawer-content">
-                <label for="translation_auto_mode" class="checkbox_label">Auto-mode</label>
-                <select id="translation_auto_mode">
-                    <option value="none">None</option>
-                    <option value="responses">Translate responses</option>
-                    <option value="inputs">Translate inputs</option>
-                    <option value="both">Translate both</option>
-                </select>
-                <label for="translation_provider">Provider</label>
-                <div class="flex-container gap5px flexnowrap marginBot5">
-                    <select id="translation_provider" name="provider" class="margin0">
-                        <option value="libre">Libre</option>
-                        <option value="google">Google</option>
-                        <option value="lingva">Lingva</option>
-                        <option value="deepl">DeepL</option>
-                        <option value="deeplx">DeepLX</option>
-                        <option value="bing">Bing</option>
-                        <option value="oneringtranslator">OneRingTranslator</option>
-                    <select>
-                    <div id="translate_key_button" class="menu_button fa-solid fa-key margin0"></div>
-                    <div id="translate_url_button" class="menu_button fa-solid fa-link margin0"></div>
-                </div>
-                <label for="translation_target_language">Target Language</label>
-                <select id="translation_target_language" name="target_language"></select>
-                <div id="translation_clear" class="menu_button">
-                    <i class="fa-solid fa-trash-can"></i>
-                    <span>Clear Translations</span>
-                </div>
-            </div>
-        </div>
-    </div>`;
 
-    const buttonHtml = `
+    $('#translate_wand_container').append(buttonHtml);
-        <div id="translate_chat" class="list-group-item flex-container flexGap5">
+    $('#translation_container').append(html);
-            <div class="fa-solid fa-language extensionsMenuExtensionButton" /></div>
-            Translate Chat
-        </div>
-        <div id="translate_input_message" class="list-group-item flex-container flexGap5">
-            <div class="fa-solid fa-keyboard extensionsMenuExtensionButton" /></div>
-            Translate Input
-        </div>
-        `;
-    $('#extensionsMenu').append(buttonHtml);
-    $('#extensions_settings2').append(html);
     $('#translate_chat').on('click', onTranslateChatClick);
     $('#translate_input_message').on('click', onTranslateInputMessageClick);
     $('#translation_clear').on('click', onTranslationsClearClick);
@@ -608,7 +598,7 @@ jQuery(() => {
     $(document).on('click', '.mes_translate', onMessageTranslateClick);
     $('#translate_key_button').on('click', async () => {
         const optionText = $('#translation_provider option:selected').text();
-        const key = await callPopup(`<h3>${optionText} API Key</h3>`, 'input');
+        const key = await callGenericPopup(`<h3>${optionText} API Key</h3>`, POPUP_TYPE.INPUT);
 
         if (key == false) {
             return;
@@ -631,7 +621,7 @@ jQuery(() => {
         const secretKey = extension_settings.translate.provider + '_url';
         const savedUrl = secret_state[secretKey] ? await findSecret(secretKey) : '';
 
-        const url = await callPopup(popupText, 'input', savedUrl);
+        const url = await callGenericPopup(popupText, POPUP_TYPE.INPUT, savedUrl);
 
         if (url == false || url == '') {
             return;
@@ -668,5 +658,6 @@ jQuery(() => {
                 : extension_settings.translate.target_language;
             return await translate(String(value), target);
         },
+        returns: ARGUMENT_TYPE.STRING,
     }));
 });

public/scripts/extensions/tts/azure.js

@@ -175,7 +175,7 @@ class AzureTtsProvider {
         const url = URL.createObjectURL(audio);
         this.audioElement.src = url;
         this.audioElement.play();
-        URL.revokeObjectURL(url);
+        this.audioElement.onended = () => URL.revokeObjectURL(url);
     }
 
     async fetchTtsGeneration(text, voiceId) {

public/scripts/extensions/tts/edge.js

@@ -155,7 +155,7 @@ class EdgeTtsProvider {
         const url = URL.createObjectURL(audio);
         this.audioElement.src = url;
         this.audioElement.play();
-        URL.revokeObjectURL(url);
+        this.audioElement.onended = () => URL.revokeObjectURL(url);
     }
 
     /**

public/scripts/extensions/tts/elevenlabs.js

@@ -75,9 +75,9 @@ class ElevenLabsTtsProvider {
         this.settings.style_exaggeration = $('#elevenlabs_tts_style_exaggeration').val();
         this.settings.speaker_boost = $('#elevenlabs_tts_speaker_boost').is(':checked');
         this.settings.model = $('#elevenlabs_tts_model').find(':selected').val();
-        $('#elevenlabs_tts_stability_output').text(this.settings.stability * 100 + '%');
+        $('#elevenlabs_tts_stability_output').text(Math.round(this.settings.stability * 100) + '%');
-        $('#elevenlabs_tts_similarity_boost_output').text(this.settings.similarity_boost * 100 + '%');
+        $('#elevenlabs_tts_similarity_boost_output').text(Math.round(this.settings.similarity_boost * 100) + '%');
-        $('#elevenlabs_tts_style_exaggeration_output').text(this.settings.style_exaggeration * 100 + '%');
+        $('#elevenlabs_tts_style_exaggeration_output').text(Math.round(this.settings.style_exaggeration * 100) + '%');
         $('#elevenlabs_tts_v2_options').toggle(this.shouldInvolveExtendedSettings());
         saveTtsProviderSettings();
     }
@@ -117,9 +117,9 @@ class ElevenLabsTtsProvider {
         $('#elevenlabs_tts_style_exaggeration').on('input', this.onSettingsChange.bind(this));
         $('#elevenlabs_tts_speaker_boost').on('change', this.onSettingsChange.bind(this));
         $('#elevenlabs_tts_model').on('change', this.onSettingsChange.bind(this));
-        $('#elevenlabs_tts_stability_output').text(this.settings.stability);
+        $('#elevenlabs_tts_stability_output').text(Math.round(this.settings.stability * 100) + '%');
-        $('#elevenlabs_tts_similarity_boost_output').text(this.settings.similarity_boost);
+        $('#elevenlabs_tts_similarity_boost_output').text(Math.round(this.settings.similarity_boost * 100) + '%');
-        $('#elevenlabs_tts_style_exaggeration_output').text(this.settings.style_exaggeration);
+        $('#elevenlabs_tts_style_exaggeration_output').text(Math.round(this.settings.style_exaggeration * 100) + '%');
         $('#elevenlabs_tts_v2_options').toggle(this.shouldInvolveExtendedSettings());
         try {
             await this.checkReady();
@@ -311,8 +311,8 @@ class ElevenLabsTtsProvider {
             },
         };
         if (this.shouldInvolveExtendedSettings()) {
-            request.voice_settings.style_exaggeration = Number(this.settings.style_exaggeration);
+            request.voice_settings.style = Number(this.settings.style_exaggeration);
-            request.voice_settings.speaker_boost = Boolean(this.settings.speaker_boost);
+            request.voice_settings.use_speaker_boost = Boolean(this.settings.speaker_boost);
         }
         const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
             method: 'POST',

public/scripts/extensions/tts/index.js

@@ -1,5 +1,5 @@
-import { callPopup, cancelTtsPlay, eventSource, event_types, name2, saveSettingsDebounced, substituteParams } from '../../../script.js';
+import { cancelTtsPlay, eventSource, event_types, isStreamingEnabled, name2, saveSettingsDebounced, substituteParams } from '../../../script.js';
-import { ModuleWorkerWrapper, doExtrasFetch, extension_settings, getApiUrl, getContext, modules } from '../../extensions.js';
+import { ModuleWorkerWrapper, doExtrasFetch, extension_settings, getApiUrl, getContext, modules, renderExtensionTemplateAsync } from '../../extensions.js';
 import { delay, escapeRegex, getBase64Async, getStringHash, onlyUnique } from '../../utils.js';
 import { EdgeTtsProvider } from './edge.js';
 import { ElevenLabsTtsProvider } from './elevenlabs.js';
@@ -11,12 +11,17 @@ import { power_user } from '../../power-user.js';
 import { OpenAITtsProvider } from './openai.js';
 import { XTTSTtsProvider } from './xtts.js';
 import { GSVITtsProvider } from './gsvi.js';
+import { SBVits2TtsProvider } from './sbvits2.js';
 import { AllTalkTtsProvider } from './alltalk.js';
 import { SpeechT5TtsProvider } from './speecht5.js';
 import { AzureTtsProvider } from './azure.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
 import { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { debounce_timeout } from '../../constants.js';
+import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
+import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { POPUP_TYPE, callGenericPopup } from '../../popup.js';
 export { talkingAnimation };
 
 const UPDATE_INTERVAL = 1000;
@@ -27,6 +32,8 @@ let talkingHeadState = false;
 let lastChatId = null;
 let lastMessage = null;
 let lastMessageHash = null;
+let periodicMessageGenerationTimer = null;
+let lastPositionOfParagraphEnd = -1;
 
 const DEFAULT_VOICE_MARKER = '[Default Voice]';
 const DISABLED_VOICE_MARKER = 'disabled';
@@ -77,6 +84,7 @@ const ttsProviders = {
     Silero: SileroTtsProvider,
     XTTSv2: XTTSTtsProvider,
     GSVI: GSVITtsProvider,
+    SBVits2: SBVits2TtsProvider,
     System: SystemTtsProvider,
     Coqui: CoquiTtsProvider,
     Edge: EdgeTtsProvider,
@@ -107,7 +115,7 @@ async function onNarrateOneMessage() {
 
 async function onNarrateText(args, text) {
     if (!text) {
-        return;
+        return '';
     }
 
     audioElement.src = '/sounds/silence.mp3';
@@ -133,6 +141,7 @@ async function onNarrateText(args, text) {
 
     // Return back to the chat voices
     await initVoiceMap(false);
+    return '';
 }
 
 async function moduleWorker() {
@@ -302,7 +311,7 @@ async function onTtsVoicesClick() {
         popupText = 'Could not load voices list. Check your API key.';
     }
 
-    callPopup(popupText, 'text');
+    callGenericPopup(popupText, POPUP_TYPE.TEXT, '', { allowVerticalScrolling: true });
 }
 
 function updateUiAudioPlayState() {
@@ -337,7 +346,7 @@ function onAudioControlClicked() {
 
 function addAudioControl() {
 
-    $('#extensionsMenu').prepend(`
+    $('#tts_wand_container').append(`
         <div id="ttsExtensionMenuItem" class="list-group-item flex-container flexGap5">
             <div id="tts_media_control" class="extensionsMenuExtensionButton "/></div>
             TTS Playback
@@ -529,6 +538,7 @@ function loadSettings() {
     $('#tts_narrate_dialogues').prop('checked', extension_settings.tts.narrate_dialogues_only);
     $('#tts_narrate_quoted').prop('checked', extension_settings.tts.narrate_quoted_only);
     $('#tts_auto_generation').prop('checked', extension_settings.tts.auto_generation);
+    $('#tts_periodic_auto_generation').prop('checked', extension_settings.tts.periodic_auto_generation);
     $('#tts_narrate_translated_only').prop('checked', extension_settings.tts.narrate_translated_only);
     $('#tts_narrate_user').prop('checked', extension_settings.tts.narrate_user);
     $('#tts_pass_asterisks').prop('checked', extension_settings.tts.pass_asterisks);
@@ -583,6 +593,7 @@ function onEnableClick() {
     );
     updateUiAudioPlayState();
     saveSettingsDebounced();
+    $('body').toggleClass('tts', extension_settings.tts.enabled);
 }
 
 
@@ -592,6 +603,12 @@ function onAutoGenerationClick() {
 }
 
 
+function onPeriodicAutoGenerationClick() {
+    extension_settings.tts.periodic_auto_generation = !!$('#tts_periodic_auto_generation').prop('checked');
+    saveSettingsDebounced();
+}
+
+
 function onNarrateDialoguesClick() {
     extension_settings.tts.narrate_dialogues_only = !!$('#tts_narrate_dialogues').prop('checked');
     saveSettingsDebounced();
@@ -677,13 +694,14 @@ export function saveTtsProviderSettings() {
 //###################//
 
 async function onChatChanged() {
-    await resetTtsPlayback();
+    await onGenerationEnded();
+    resetTtsPlayback();
     const voiceMapInit = initVoiceMap();
-    await Promise.race([voiceMapInit, delay(1000)]);
+    await Promise.race([voiceMapInit, delay(debounce_timeout.relaxed)]);
     lastMessage = null;
 }
 
-async function onMessageEvent(messageId) {
+async function onMessageEvent(messageId, lastCharIndex) {
     // If TTS is disabled, do nothing
     if (!extension_settings.tts.enabled) {
         return;
@@ -721,12 +739,17 @@ async function onMessageEvent(messageId) {
         return;
     }
 
+    // if we only want to process part of the message
+    if (lastCharIndex) {
+        message.mes = message.mes.substring(0, lastCharIndex);
+    }
+
     const isLastMessageInCurrent = () =>
         lastMessage &&
         typeof lastMessage === 'object' &&
         message.swipe_id === lastMessage.swipe_id &&
-        message.name === lastMessage.name  &&
+        message.name === lastMessage.name &&
-        message.is_user === lastMessage.is_user  &&
+        message.is_user === lastMessage.is_user &&
         message.mes.indexOf(lastMessage.mes) !== -1;
 
     // if last message within current message, message got extended. only send diff to TTS.
@@ -779,6 +802,83 @@ async function onMessageDeleted() {
     resetTtsPlayback();
 }
 
+async function onGenerationStarted(generationType, _args, isDryRun) {
+    // If dry running or quiet mode, do nothing
+    if (isDryRun || ['quiet', 'impersonate'].includes(generationType)) {
+        return;
+    }
+
+    // If TTS is disabled, do nothing
+    if (!extension_settings.tts.enabled) {
+        return;
+    }
+
+    // Auto generation is disabled
+    if (!extension_settings.tts.auto_generation) {
+        return;
+    }
+
+    // Periodic auto generation is disabled
+    if (!extension_settings.tts.periodic_auto_generation) {
+        return;
+    }
+
+    // If the reply is not being streamed
+    if (!isStreamingEnabled()) {
+        return;
+    }
+
+    // start the timer
+    if (!periodicMessageGenerationTimer) {
+        periodicMessageGenerationTimer = setInterval(onPeriodicMessageGenerationTick, UPDATE_INTERVAL);
+    }
+}
+
+async function onGenerationEnded() {
+    if (periodicMessageGenerationTimer) {
+        clearInterval(periodicMessageGenerationTimer);
+        periodicMessageGenerationTimer = null;
+    }
+    lastPositionOfParagraphEnd = -1;
+}
+
+async function onPeriodicMessageGenerationTick() {
+    const context = getContext();
+
+    // no characters or group selected
+    if (!context.groupId && context.characterId === undefined) {
+        return;
+    }
+
+    const lastMessageId = context.chat.length - 1;
+
+    // the last message was from the user
+    if (context.chat[lastMessageId].is_user) {
+        return;
+    }
+
+    const lastMessage = structuredClone(context.chat[lastMessageId]);
+    const lastMessageText = lastMessage?.mes ?? '';
+
+    // look for double ending lines which should indicate the end of a paragraph
+    let newLastPositionOfParagraphEnd = lastMessageText
+        .indexOf('\n\n', lastPositionOfParagraphEnd + 1);
+    // if not found, look for a single ending line which should indicate the end of a paragraph
+    if (newLastPositionOfParagraphEnd === -1) {
+        newLastPositionOfParagraphEnd = lastMessageText
+            .indexOf('\n', lastPositionOfParagraphEnd + 1);
+    }
+
+    // send the message to the tts module if we found the new end of a paragraph
+    if (newLastPositionOfParagraphEnd > -1) {
+        onMessageEvent(lastMessageId, newLastPositionOfParagraphEnd);
+
+        if (periodicMessageGenerationTimer) {
+            lastPositionOfParagraphEnd = newLastPositionOfParagraphEnd;
+        }
+    }
+}
+
 /**
  * Get characters in current chat
  * @param {boolean} unrestricted - If true, will include all characters in voiceMapEntries, even if they are not in the current chat.
@@ -816,7 +916,7 @@ function getCharacters(unrestricted) {
 
 function sanitizeId(input) {
     // Remove any non-alphanumeric characters except underscore (_) and hyphen (-)
-    let sanitized = input.replace(/[^a-zA-Z0-9-_]/g, '');
+    let sanitized = encodeURIComponent(input).replace(/[^a-zA-Z0-9-_]/g, '');
 
     // Ensure first character is always a letter
     if (!/^[a-zA-Z]/.test(sanitized)) {
@@ -977,90 +1077,10 @@ export async function initVoiceMap(unrestricted = false) {
     updateVoiceMap();
 }
 
-$(document).ready(function () {
+jQuery(async function () {
-    function addExtensionControls() {
+    async function addExtensionControls() {
-        const settingsHtml = `
+        const settingsHtml = $(await renderExtensionTemplateAsync('tts', 'settings'));
-        <div id="tts_settings">
+        $('#tts_container').append(settingsHtml);
-            <div class="inline-drawer">
-                <div class="inline-drawer-toggle inline-drawer-header">
-                    <b>TTS</b>
-                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
-                </div>
-                <div class="inline-drawer-content">
-                    <div id="tts_status">
-                    </div>
-                    <span>Select TTS Provider</span> </br>
-                    <div class="tts_block">
-                        <select id="tts_provider" class="flex1">
-                        </select>
-                        <input id="tts_refresh" class="menu_button" type="submit" value="Reload" />
-                    </div>
-                    <div>
-                        <label class="checkbox_label" for="tts_enabled">
-                            <input type="checkbox" id="tts_enabled" name="tts_enabled">
-                            <small>Enabled</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_narrate_user">
-                            <input type="checkbox" id="tts_narrate_user">
-                            <small>Narrate user messages</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_auto_generation">
-                            <input type="checkbox" id="tts_auto_generation">
-                            <small>Auto Generation</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_narrate_quoted">
-                            <input type="checkbox" id="tts_narrate_quoted">
-                            <small>Only narrate "quotes"</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_narrate_dialogues">
-                            <input type="checkbox" id="tts_narrate_dialogues">
-                            <small>Ignore *text, even "quotes", inside asterisks*</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_narrate_translated_only">
-                            <input type="checkbox" id="tts_narrate_translated_only">
-                            <small>Narrate only the translated text</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_skip_codeblocks">
-                            <input type="checkbox" id="tts_skip_codeblocks">
-                            <small>Skip codeblocks</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_skip_tags">
-                            <input type="checkbox" id="tts_skip_tags">
-                            <small>Skip &lt;tagged&gt; blocks</small>
-                        </label>
-                        <label class="checkbox_label" for="tts_pass_asterisks">
-                        <input type="checkbox" id="tts_pass_asterisks">
-                        <small>Pass Asterisks to TTS Engine</small>
-                        </label>
-                    </div>
-                    <div id="playback_rate_block" class="range-block">
-                        <hr>
-                        <div class="range-block-title justifyLeft" data-i18n="Audio Playback Speed">
-                            <small>Audio Playback Speed</small>
-                        </div>
-                        <div class="range-block-range-and-counter">
-                            <div class="range-block-range">
-                                <input type="range" id="playback_rate" name="volume" min="0" max="3" step="0.05">
-                            </div>
-                            <div class="range-block-counter">
-                                <input type="number" min="0" max="3" step="0.05" data-for="playback_rate" id="playback_rate_counter">
-                            </div>
-                        </div>
-                    </div>
-                    <div id="tts_voicemap_block">
-                    </div>
-                    <hr>
-                    <form id="tts_provider_settings" class="inline-drawer-content">
-                    </form>
-                    <div class="tts_buttons">
-                        <input id="tts_voices" class="menu_button" type="submit" value="Available voices" />
-                    </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        `;
-        $('#extensions_settings').append(settingsHtml);
         $('#tts_refresh').on('click', onRefreshClick);
         $('#tts_enabled').on('click', onEnableClick);
         $('#tts_narrate_dialogues').on('click', onNarrateDialoguesClick);
@@ -1070,6 +1090,7 @@ $(document).ready(function () {
         $('#tts_skip_tags').on('click', onSkipTagsClick);
         $('#tts_pass_asterisks').on('click', onPassAsterisksClick);
         $('#tts_auto_generation').on('click', onAutoGenerationClick);
+        $('#tts_periodic_auto_generation').on('click', onPeriodicAutoGenerationClick);
         $('#tts_narrate_user').on('click', onNarrateUserClick);
 
         $('#playback_rate').on('input', function () {
@@ -1087,7 +1108,7 @@ $(document).ready(function () {
         $('#tts_provider').on('change', onTtsProviderChange);
         $(document).on('click', '.mes_narrate', onNarrateOneMessage);
     }
-    addExtensionControls(); // No init dependencies
+    await addExtensionControls(); // No init dependencies
     loadSettings(); // Depends on Extension Controls and loadTtsProvider
     loadTtsProvider(extension_settings.tts.currentProvider); // No dependencies
     addAudioControl(); // Depends on Extension Controls
@@ -1097,15 +1118,25 @@ $(document).ready(function () {
     eventSource.on(event_types.CHAT_CHANGED, onChatChanged);
     eventSource.on(event_types.MESSAGE_DELETED, onMessageDeleted);
     eventSource.on(event_types.GROUP_UPDATED, onChatChanged);
+    eventSource.on(event_types.GENERATION_STARTED, onGenerationStarted);
+    eventSource.on(event_types.GENERATION_ENDED, onGenerationEnded);
     eventSource.makeLast(event_types.CHARACTER_MESSAGE_RENDERED, onMessageEvent);
     eventSource.makeLast(event_types.USER_MESSAGE_RENDERED, onMessageEvent);
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'speak',
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
-        callback: onNarrateText,
+        name: 'speak',
+        callback: async (args, value) => {
+            await onNarrateText(args, value);
+            return '';
+        },
         aliases: ['narrate', 'tts'],
         namedArgumentList: [
-            new SlashCommandNamedArgument(
+            SlashCommandNamedArgument.fromProps({
-                'voice', 'character voice name', [ARGUMENT_TYPE.STRING], false,
+                name: 'voice',
-            ),
+                description: 'character voice name',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: false,
+                enumProvider: () => Object.keys(voiceMap).map(voiceName => new SlashCommandEnumValue(voiceName, null, enumTypes.enum, enumIcons.voice)),
+            }),
         ],
         unnamedArgumentList: [
             new SlashCommandArgument(

public/scripts/extensions/tts/novel.js

@@ -180,7 +180,7 @@ class NovelTtsProvider {
         const url = URL.createObjectURL(audio);
         this.audioElement.src = url;
         this.audioElement.play();
-        URL.revokeObjectURL(url);
+        this.audioElement.onended = () => URL.revokeObjectURL(url);
     }
 
     async* fetchTtsGeneration(inputText, voiceId) {

public/scripts/extensions/tts/sbvits2.js

@@ -0,0 +1,344 @@
+import { getPreviewString, saveTtsProviderSettings } from './index.js';
+
+export { SBVits2TtsProvider };
+
+class SBVits2TtsProvider {
+    //########//
+    // Config //
+    //########//
+
+    settings;
+    ready = false;
+    voices = [];
+    separator = '. ';
+    audioElement = document.createElement('audio');
+
+    /**
+     * Perform any text processing before passing to TTS engine.
+     * @param {string} text Input text
+     * @returns {string} Processed text
+     */
+    processText(text) {
+        // backup for auto_split
+        text = text.replace(/\n+/g, '<br>');
+        return text;
+    }
+
+    languageLabels = {
+        'Chinese': 'ZH',
+        'English': 'EN',
+        'Japanese': 'JP',
+    };
+
+    langKey2LangCode = {
+        'ZH': 'zh-CN',
+        'EN': 'en-US',
+        'JP': 'ja-JP',
+    };
+
+    defaultSettings = {
+        provider_endpoint: 'http://localhost:5000',
+        sdp_ratio: 0.2,
+        noise: 0.6,
+        noisew: 0.8,
+        length: 1,
+        language: 'JP',
+        auto_split: true,
+        split_interval: 0.5,
+        assist_text: '',
+        assist_text_weight: 1,
+        style: 'Neutral',
+        style_weight: 1,
+        reference_audio_path: '',
+    };
+
+    get settingsHtml() {
+        let html = `
+        <label for="sbvits_api_language">Language</label>
+        <select id="sbvits_api_language">`;
+
+        for (let language in this.languageLabels) {
+            if (this.languageLabels[language] == this.settings?.language) {
+                html += `<option value="${this.languageLabels[language]}" selected="selected">${language}</option>`;
+                continue;
+            }
+
+            html += `<option value="${this.languageLabels[language]}">${language}</option>`;
+        }
+
+        html += `
+        </select>
+        <label">SBVits2 Settings:</label><br/>
+        <label for="sbvits_tts_endpoint">Provider Endpoint:</label>
+        <input id="sbvits_tts_endpoint" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.provider_endpoint}"/>
+        <span>Use <a target="_blank" href="https://github.com/litagin02/Style-Bert-VITS2">Style-Bert-VITS2 API Server</a>.</span><br/>
+
+        <label for="sbvits_sdp_ratio">sdp_ratio: <span id="sbvits_sdp_ratio_output">${this.defaultSettings.sdp_ratio}</span></label>
+        <input id="sbvits_sdp_ratio" type="range" value="${this.defaultSettings.sdp_ratio}" min="0.0" max="1" step="0.01" />
+
+        <label for="sbvits_noise">noise: <span id="sbvits_noise_output">${this.defaultSettings.noise}</span></label>
+        <input id="sbvits_noise" type="range" value="${this.defaultSettings.noise}" min="0.1" max="2" step="0.01" />
+
+        <label for="sbvits_noisew">noisew: <span id="sbvits_noisew_output">${this.defaultSettings.noisew}</span></label>
+        <input id="sbvits_noisew" type="range" value="${this.defaultSettings.noisew}" min="0.1" max="2" step="0.01" />
+
+        <label for="sbvits_length">length: <span id="sbvits_length_output">${this.defaultSettings.length}</span></label>
+        <input id="sbvits_length" type="range" value="${this.defaultSettings.length}" min="0.0" max="5" step="0.01" />
+
+        <label for="sbvits_auto_split" class="checkbox_label">
+            <input id="sbvits_auto_split" type="checkbox" ${this.defaultSettings.auto_split ? 'checked' : ''} />
+            Enable Text Splitting
+        </label>
+
+        <label for="sbvits_split_interval">split_interval: <span id="sbvits_split_interval_output">${this.defaultSettings.split_interval}</span></label>
+        <input id="sbvits_split_interval" type="range" value="${this.defaultSettings.split_interval}" min="0.0" max="5" step="0.01" />
+
+        <label for="sbvits_assist_text">assist_text:</label>
+        <input id="sbvits_assist_text" type="text" class="text_pole" maxlength="512" value="${this.defaultSettings.assist_text}"/>
+
+        <label for="sbvits_assist_text_weight">assist_text_weight: <span id="sbvits_assist_text_weight_output">${this.defaultSettings.assist_text_weight}</span></label>
+        <input id="sbvits_assist_text_weight" type="range" value="${this.defaultSettings.assist_text_weight}" min="0.0" max="1" step="0.01" />
+
+        <label for="sbvits_style_weight">style_weight: <span id="sbvits_style_weight_output">${this.defaultSettings.style_weight}</span></label>
+        <input id="sbvits_style_weight" type="range" value="${this.defaultSettings.style_weight}" min="0.0" max="20" step="0.01" />
+
+        <label for="sbvits_reference_audio_path">reference_audio_path:</label>
+        <input id="sbvits_reference_audio_path" type="text" class="text_pole" maxlength="512" value="${this.defaultSettings.reference_audio_path}"/>
+        `;
+
+        return html;
+    }
+
+    onSettingsChange() {
+        // Used when provider settings are updated from UI
+        this.settings.provider_endpoint = $('#sbvits_tts_endpoint').val();
+        this.settings.language = $('#sbvits_api_language').val();
+        this.settings.assist_text = $('#sbvits_assist_text').val();
+        this.settings.reference_audio_path = $('#sbvits_reference_audio_path').val();
+
+        // Update the default TTS settings based on input fields
+        this.settings.sdp_ratio = $('#sbvits_sdp_ratio').val();
+        this.settings.noise = $('#sbvits_noise').val();
+        this.settings.noisew = $('#sbvits_noisew').val();
+        this.settings.length = $('#sbvits_length').val();
+        this.settings.auto_split = $('#sbvits_auto_split').is(':checked');
+        this.settings.split_interval = $('#sbvits_split_interval').val();
+        this.settings.assist_text_weight = $('#sbvits_assist_text_weight').val();
+        this.settings.style_weight = $('#sbvits_style_weight').val();
+
+        // Update the UI to reflect changes
+        $('#sbvits_sdp_ratio_output').text(this.settings.sdp_ratio);
+        $('#sbvits_noise_output').text(this.settings.noise);
+        $('#sbvits_noisew_output').text(this.settings.noisew);
+        $('#sbvits_length_output').text(this.settings.length);
+        $('#sbvits_split_interval_output').text(this.settings.split_interval);
+        $('#sbvits_assist_text_weight_output').text(this.settings.assist_text_weight);
+        $('#sbvits_style_weight_output').text(this.settings.style_weight);
+
+        saveTtsProviderSettings();
+        this.changeTTSSettings();
+    }
+
+    async loadSettings(settings) {
+        // Pupulate Provider UI given input settings
+        if (Object.keys(settings).length == 0) {
+            console.info('Using default TTS Provider settings');
+        }
+
+        // Only accept keys defined in defaultSettings
+        this.settings = this.defaultSettings;
+
+        for (const key in settings) {
+            if (key in this.settings) {
+                this.settings[key] = settings[key];
+            } else {
+                console.debug(`Ignoring non-user-configurable setting: ${key}`);
+            }
+        }
+
+        // Set initial values from the settings
+        $('#sbvits_tts_endpoint').val(this.settings.provider_endpoint);
+        $('#sbvits_api_language').val(this.settings.language);
+        $('#sbvits_assist_text').val(this.settings.assist_text);
+        $('#sbvits_reference_audio_path').val(this.settings.reference_audio_path);
+        $('#sbvits_sdp_ratio').val(this.settings.sdp_ratio);
+        $('#sbvits_noise').val(this.settings.noise);
+        $('#sbvits_noisew').val(this.settings.noisew);
+        $('#sbvits_length').val(this.settings.length);
+        $('#sbvits_auto_split').prop('checked', this.settings.auto_split);
+        $('#sbvits_split_interval').val(this.settings.split_interval);
+        $('#sbvits_assist_text_weight').val(this.settings.assist_text_weight);
+        $('#sbvits_style_weight').val(this.settings.style_weight);
+
+        // Update the UI to reflect changes
+        $('#sbvits_sdp_ratio_output').text(this.settings.sdp_ratio);
+        $('#sbvits_noise_output').text(this.settings.noise);
+        $('#sbvits_noisew_output').text(this.settings.noisew);
+        $('#sbvits_length_output').text(this.settings.length);
+        $('#sbvits_split_interval_output').text(this.settings.split_interval);
+        $('#sbvits_assist_text_weight_output').text(this.settings.assist_text_weight);
+        $('#sbvits_style_weight_output').text(this.settings.style_weight);
+
+        // Register input/change event listeners to update settings on user interaction
+        $('#sbvits_tts_endpoint').on('input', () => { this.onSettingsChange(); });
+        $('#sbvits_api_language').on('change', () => { this.onSettingsChange(); });
+        $('#sbvits_assist_text').on('input', () => { this.onSettingsChange(); });
+        $('#sbvits_reference_audio_path').on('input', () => { this.onSettingsChange(); });
+        $('#sbvits_sdp_ratio').on('change', () => { this.onSettingsChange(); });
+        $('#sbvits_noise').on('change', () => { this.onSettingsChange(); });
+        $('#sbvits_noisew').on('change', () => { this.onSettingsChange(); });
+        $('#sbvits_length').on('change', () => { this.onSettingsChange(); });
+        $('#sbvits_auto_split').on('change', () => { this.onSettingsChange(); });
+        $('#sbvits_split_interval').on('change', () => { this.onSettingsChange(); });
+        $('#sbvits_assist_text_weight').on('change', () => { this.onSettingsChange(); });
+        $('#sbvits_style_weight').on('change', () => { this.onSettingsChange(); });
+
+        await this.checkReady();
+
+        console.info('SBVits2: Settings loaded');
+    }
+
+    // Perform a simple readiness check by trying to fetch voiceIds
+    async checkReady() {
+        await Promise.allSettled([this.fetchTtsVoiceObjects(), this.changeTTSSettings()]);
+    }
+
+    async onRefreshClick() {
+        return;
+    }
+
+    //#################//
+    //  TTS Interfaces //
+    //#################//
+
+    /**
+     * Get a voice from the TTS provider.
+     * @param {string} voiceName Voice name to get
+     * @returns {Promise<Object>} Voice object
+     */
+    async getVoice(voiceName) {
+        if (this.voices.length == 0) {
+            this.voices = await this.fetchTtsVoiceObjects();
+        }
+        const match = this.voices.filter(
+            v => v.name == voiceName,
+        )[0];
+        if (!match) {
+            throw `TTS Voice name ${voiceName} not found`;
+        }
+        return match;
+    }
+
+    async generateTts(text, voiceId) {
+        const response = await this.fetchTtsGeneration(text, voiceId);
+        return response;
+    }
+
+    //###########//
+    // API CALLS //
+    //###########//
+    async fetchTtsVoiceObjects() {
+        const response = await fetch(`${this.settings.provider_endpoint}/models/info`);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.json()}`);
+        }
+        const data = await response.json();
+        const voices = Object.keys(data).flatMap(key => {
+            const config = data[key];
+            const spk2id = config.spk2id;
+            const style2id = config.style2id;
+
+            return Object.entries(spk2id).flatMap(([speaker, speaker_id]) => {
+                return Object.entries(style2id).map(([style, styleId]) => {
+                    return {
+                        name: `${speaker} (${style})`,
+                        voice_id: `${key}-${speaker_id}-${style}`,
+                        preview_url: false,
+                    };
+                });
+            });
+        });
+
+        this.voices = voices; // Assign to the class property
+        return voices; // Also return this list
+    }
+
+    // Each time a parameter is changed, we change the configuration
+    async changeTTSSettings() {
+    }
+
+    /**
+     * Fetch TTS generation from the API.
+     * @param {string} inputText Text to generate TTS for
+     * @param {string} voiceId Voice ID to use (model_id-speaker_id-style)
+     * @returns {Promise<Response>} Fetch response
+     */
+    async fetchTtsGeneration(inputText, voiceId) {
+        console.info(`Generating new TTS for voice_id ${voiceId}`);
+
+        const [model_id, speaker_id, ...rest] = voiceId.split('-');
+        const style = rest.join('-');
+        const params = new URLSearchParams();
+        // restore for auto_split
+        inputText = inputText.replaceAll('<br>', '\n');
+        params.append('text', inputText);
+        params.append('model_id', model_id);
+        params.append('speaker_id', speaker_id);
+        params.append('sdp_ratio', this.settings.sdp_ratio);
+        params.append('noise', this.settings.noise);
+        params.append('noisew', this.settings.noisew);
+        params.append('length', this.settings.length);
+        params.append('language', this.settings.language);
+        params.append('auto_split', this.settings.auto_split);
+        params.append('split_interval', this.settings.split_interval);
+        if (this.settings.assist_text) {
+            params.append('assist_text', this.settings.assist_text);
+            params.append('assist_text_weight', this.settings.assist_text_weight);
+        }
+        params.append('style', style);
+        params.append('style_weight', this.settings.style_weight);
+        if (this.settings.reference_audio_path) {
+            params.append('reference_audio_path', this.settings.reference_audio_path);
+        }
+        const url = `${this.settings.provider_endpoint}/voice?${params.toString()}`;
+
+        const response = await fetch(
+            url,
+            {
+                method: 'POST',
+                headers: {
+                },
+            },
+        );
+        if (!response.ok) {
+            toastr.error(response.statusText, 'TTS Generation Failed');
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+        }
+        return response;
+    }
+
+    /**
+     * Preview TTS for a given voice ID.
+     * @param {string} id Voice ID
+     */
+    async previewTtsVoice(id) {
+        this.audioElement.pause();
+        this.audioElement.currentTime = 0;
+        const lang_code = this.langKey2LangCode[this.settings.lang] ?? 'ja-JP';
+        const text = getPreviewString(lang_code);
+        const response = await this.fetchTtsGeneration(text, id);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+        }
+
+        const audio = await response.blob();
+        const url = URL.createObjectURL(audio);
+        this.audioElement.src = url;
+        this.audioElement.play();
+    }
+
+    // Interface not used
+    async fetchTtsFromHistory(history_item_id) {
+        return Promise.resolve(history_item_id);
+    }
+}

public/scripts/extensions/tts/settings.html

@@ -0,0 +1,83 @@
+<div id="tts_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b>TTS</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <div id="tts_status">
+            </div>
+            <span>Select TTS Provider</span> </br>
+            <div class="tts_block">
+                <select id="tts_provider" class="flex1">
+                </select>
+                <input id="tts_refresh" class="menu_button" type="submit" value="Reload" />
+            </div>
+            <div>
+                <label class="checkbox_label" for="tts_enabled">
+                    <input type="checkbox" id="tts_enabled" name="tts_enabled">
+                    <small>Enabled</small>
+                </label>
+                <label class="checkbox_label" for="tts_narrate_user">
+                    <input type="checkbox" id="tts_narrate_user">
+                    <small>Narrate user messages</small>
+                </label>
+                <label class="checkbox_label" for="tts_auto_generation">
+                    <input type="checkbox" id="tts_auto_generation">
+                    <small>Auto Generation</small>
+                </label>
+                <label class="checkbox_label" for="tts_periodic_auto_generation" title="Requires auto generation to be enabled.">
+                    <input type="checkbox" id="tts_periodic_auto_generation">
+                    <small>Narrate by paragraphs (when streaming)</small>
+                </label>
+                <label class="checkbox_label" for="tts_narrate_quoted">
+                    <input type="checkbox" id="tts_narrate_quoted">
+                    <small>Only narrate "quotes"</small>
+                </label>
+                <label class="checkbox_label" for="tts_narrate_dialogues">
+                    <input type="checkbox" id="tts_narrate_dialogues">
+                    <small>Ignore *text, even "quotes", inside asterisks*</small>
+                </label>
+                <label class="checkbox_label" for="tts_narrate_translated_only">
+                    <input type="checkbox" id="tts_narrate_translated_only">
+                    <small>Narrate only the translated text</small>
+                </label>
+                <label class="checkbox_label" for="tts_skip_codeblocks">
+                    <input type="checkbox" id="tts_skip_codeblocks">
+                    <small>Skip codeblocks</small>
+                </label>
+                <label class="checkbox_label" for="tts_skip_tags">
+                    <input type="checkbox" id="tts_skip_tags">
+                    <small>Skip &lt;tagged&gt; blocks</small>
+                </label>
+                <label class="checkbox_label" for="tts_pass_asterisks">
+                <input type="checkbox" id="tts_pass_asterisks">
+                <small>Pass Asterisks to TTS Engine</small>
+                </label>
+            </div>
+            <div id="playback_rate_block" class="range-block">
+                <hr>
+                <div class="range-block-title justifyLeft" data-i18n="Audio Playback Speed">
+                    <small>Audio Playback Speed</small>
+                </div>
+                <div class="range-block-range-and-counter">
+                    <div class="range-block-range">
+                        <input type="range" id="playback_rate" name="volume" min="0" max="3" step="0.05">
+                    </div>
+                    <div class="range-block-counter">
+                        <input type="number" min="0" max="3" step="0.05" data-for="playback_rate" id="playback_rate_counter">
+                    </div>
+                </div>
+            </div>
+            <div id="tts_voicemap_block">
+            </div>
+            <hr>
+            <form id="tts_provider_settings" class="inline-drawer-content">
+            </form>
+            <div class="tts_buttons">
+                <input id="tts_voices" class="menu_button" type="submit" value="Available voices" />
+            </div>
+            </div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/tts/speecht5.js

@@ -60,7 +60,7 @@ class SpeechT5TtsProvider {
         const url = URL.createObjectURL(audio);
         this.audioElement.src = url;
         this.audioElement.play();
-        URL.revokeObjectURL(url);
+        this.audioElement.onended = () => URL.revokeObjectURL(url);
     }
 
     async loadSettings(settings) {

public/scripts/extensions/tts/style.css

@@ -1,35 +1,3 @@
-#tts_media_control {
-    /* order: 100; */
-    /*     width: 40px;
-    height: 40px;
-    margin: 0;
-    padding: 1px; */
-    outline: none;
-    border: none;
-    cursor: pointer;
-    /*     transition: 0.3s;
-    opacity: 0.7; */
-    display: flex;
-    align-items: center;
-    /* justify-content: center; */
-
-}
-
-#ttsExtensionMenuItem {
-    transition: 0.3s;
-    opacity: 0.7;
-}
-
-#ttsExtensionMenuItem:hover {
-    opacity: 1;
-    filter: brightness(1.2);
-}
-
-#tts_media_control:hover {
-    opacity: 1;
-    filter: brightness(1.2);
-}
-
 .voice_preview {
     margin: 0.25rem 0.5rem;
     display: flex;
@@ -102,7 +70,7 @@
 }
 
 .at-endpoint-option {
-    flex: 1; 
+    flex: 1;
     margin: 0 10px;
     margin-right: 25px;
     width: 38%;
@@ -112,14 +80,14 @@
     display: flex;
     justify-content: start;
     align-items: center;
-    margin-top: 10px; 
+    margin-top: 10px;
     margin-bottom: 10px;
 }
 
 .at-website-option {
-    flex: 1; 
+    flex: 1;
-    margin-right: 10px; 
+    margin-right: 10px;
-    margin-left: 10px; 
+    margin-left: 10px;
 }
 
 .at-settings-separator {
@@ -147,7 +115,7 @@
 .at-model-option, .endpoint-option {
     flex: 1;
     margin: 0 10px;
-    margin-left: 10px; 
+    margin-left: 10px;
 }
 
 .at-endpoint-option {
@@ -155,5 +123,5 @@
 }
 
 #at-status_info {
-    color: lightgreen; 
+    color: lightgreen;
-}
+}

public/scripts/extensions/vectors/index.js

@@ -10,6 +10,7 @@ import {
     setExtensionPrompt,
     substituteParams,
     generateRaw,
+    substituteParamsExtended,
 } from '../../../script.js';
 import {
     ModuleWorkerWrapper,
@@ -19,7 +20,7 @@ import {
     renderExtensionTemplateAsync,
     doExtrasFetch, getApiUrl,
 } from '../../extensions.js';
-import { collapseNewlines } from '../../power-user.js';
+import { collapseNewlines, registerDebugFunction } from '../../power-user.js';
 import { SECRET_KEYS, secret_state, writeSecret } from '../../secrets.js';
 import { getDataBankAttachments, getDataBankAttachmentsForSource, getFileAttachment } from '../../chats.js';
 import { debounce, getStringHash as calculateHash, waitUntilCondition, onlyUnique, splitRecursive, trimToStartSentence, trimToEndSentence } from '../../utils.js';
@@ -44,10 +45,12 @@ const settings = {
     cohere_model: 'embed-english-v3.0',
     ollama_model: 'mxbai-embed-large',
     ollama_keep: false,
+    vllm_model: '',
     summarize: false,
     summarize_sent: false,
     summary_source: 'main',
     summary_prompt: 'Pause your roleplay. Summarize the most important parts of the message. Limit yourself to 250 words or less. Your response should include nothing but the summary.',
+    force_chunk_delimiter: '',
 
     // For chats
     enabled_chats: false,
@@ -151,6 +154,20 @@ async function onVectorizeAllClick() {
 
 let syncBlocked = false;
 
+/**
+ * Gets the chunk delimiters for splitting text.
+ * @returns {string[]} Array of chunk delimiters
+ */
+function getChunkDelimiters() {
+    const delimiters = ['\n\n', '\n', ' ', ''];
+
+    if (settings.force_chunk_delimiter) {
+        delimiters.unshift(settings.force_chunk_delimiter);
+    }
+
+    return delimiters;
+}
+
 /**
  * Splits messages into chunks before inserting them into the vector index.
  * @param {object[]} items Array of vector items
@@ -164,7 +181,7 @@ function splitByChunks(items) {
     const chunkedItems = [];
 
     for (const item of items) {
-        const chunks = splitRecursive(item.text, settings.message_chunk_size);
+        const chunks = splitRecursive(item.text, settings.message_chunk_size, getChunkDelimiters());
         for (const chunk of chunks) {
             const chunkedItem = { ...item, text: chunk };
             chunkedItems.push(chunkedItem);
@@ -440,7 +457,7 @@ async function injectDataBankChunks(queryText, collectionIds) {
             return;
         }
 
-        const insertedText = substituteParams(settings.file_template_db.replace(/{{text}}/i, textResult));
+        const insertedText = substituteParamsExtended(settings.file_template_db, { text: textResult });
         setExtensionPrompt(EXTENSION_PROMPT_TAG_DB, insertedText, settings.file_position_db, settings.file_depth_db, settings.include_wi, settings.file_depth_role_db);
     } catch (error) {
         console.error('Vectors: Failed to insert Data Bank chunks', error);
@@ -482,9 +499,10 @@ async function vectorizeFile(fileText, fileName, collectionId, chunkSize, overla
 
         const toast = toastr.info('Vectorization may take some time, please wait...', `Ingesting file ${fileName}`);
         const overlapSize = Math.round(chunkSize * overlapPercent / 100);
+        const delimiters = getChunkDelimiters();
         // Overlap should not be included in chunk size. It will be later compensated by overlapChunks
         chunkSize = overlapSize > 0 ? (chunkSize - overlapSize) : chunkSize;
-        const chunks = splitRecursive(fileText, chunkSize).map((x, y, z) => overlapSize > 0 ? overlapChunks(x, y, z, overlapSize) : x);
+        const chunks = splitRecursive(fileText, chunkSize, delimiters).map((x, y, z) => overlapSize > 0 ? overlapChunks(x, y, z, overlapSize) : x);
         console.debug(`Vectors: Split file ${fileName} into ${chunks.length} chunks with ${overlapPercent}% overlap`, chunks);
 
         const items = chunks.map((chunk, index) => ({ hash: getStringHash(chunk), text: chunk, index: index }));
@@ -591,7 +609,7 @@ async function rearrangeChat(chat) {
 function getPromptText(queriedMessages) {
     const queriedText = queriedMessages.map(x => collapseNewlines(`${x.name}: ${x.mes}`).trim()).join('\n\n');
     console.log('Vectors: relevant past messages found.\n', queriedText);
-    return substituteParams(settings.template.replace(/{{text}}/i, queriedText));
+    return substituteParamsExtended(settings.template, { text: queriedText });
 }
 
 /**
@@ -691,6 +709,9 @@ function getVectorHeaders() {
         case 'llamacpp':
             addLlamaCppHeaders(headers);
             break;
+        case 'vllm':
+            addVllmHeaders(headers);
+            break;
         default:
             break;
     }
@@ -761,6 +782,17 @@ function addLlamaCppHeaders(headers) {
     });
 }
 
+/**
+ * Add headers for the VLLM API source.
+ * @param {object} headers Header object
+ */
+function addVllmHeaders(headers) {
+    Object.assign(headers, {
+        'X-Vllm-URL': textgenerationwebui_settings.server_urls[textgen_types.VLLM],
+        'X-Vllm-Model': extension_settings.vectors.vllm_model,
+    });
+}
+
 /**
  * Inserts vector items into a collection
  * @param {string} collectionId - The collection to insert into
@@ -801,11 +833,12 @@ function throwIfSourceInvalid() {
     }
 
     if (settings.source === 'ollama' && !textgenerationwebui_settings.server_urls[textgen_types.OLLAMA] ||
+        settings.source === 'vllm' && !textgenerationwebui_settings.server_urls[textgen_types.VLLM] ||
         settings.source === 'llamacpp' && !textgenerationwebui_settings.server_urls[textgen_types.LLAMACPP]) {
         throw new Error('Vectors: API URL missing', { cause: 'api_url_missing' });
     }
 
-    if (settings.source === 'ollama' && !settings.ollama_model) {
+    if (settings.source === 'ollama' && !settings.ollama_model || settings.source === 'vllm' && !settings.vllm_model) {
         throw new Error('Vectors: API model missing', { cause: 'api_model_missing' });
     }
 
@@ -956,6 +989,28 @@ async function purgeVectorIndex(collectionId) {
     }
 }
 
+/**
+ * Purges all vector indexes.
+ */
+async function purgeAllVectorIndexes() {
+    try {
+        const response = await fetch('/api/vector/purge-all', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to purge all vector indexes');
+        }
+
+        console.log('Vectors: Purged all vector indexes');
+        toastr.success('All vector indexes purged', 'Purge successful');
+    } catch (error) {
+        console.error('Vectors: Failed to purge all', error);
+        toastr.error('Failed to purge all vector indexes', 'Purge failed');
+    }
+}
+
 function toggleSettings() {
     $('#vectors_files_settings').toggle(!!settings.enabled_files);
     $('#vectors_chats_settings').toggle(!!settings.enabled_chats);
@@ -965,6 +1020,7 @@ function toggleSettings() {
     $('#cohere_vectorsModel').toggle(settings.source === 'cohere');
     $('#ollama_vectorsModel').toggle(settings.source === 'ollama');
     $('#llamacpp_vectorsModel').toggle(settings.source === 'llamacpp');
+    $('#vllm_vectorsModel').toggle(settings.source === 'vllm');
     $('#nomicai_apiKey').toggle(settings.source === 'nomicai');
 }
 
@@ -1223,7 +1279,7 @@ jQuery(async () => {
     // Migrate from TensorFlow to Transformers
     settings.source = settings.source !== 'local' ? settings.source : 'transformers';
     const template = await renderExtensionTemplateAsync(MODULE_NAME, 'settings');
-    $('#extensions_settings2').append(template);
+    $('#vectors_container').append(template);
     $('#vectors_enabled_chats').prop('checked', settings.enabled_chats).on('input', () => {
         settings.enabled_chats = $('#vectors_enabled_chats').prop('checked');
         Object.assign(extension_settings.vectors, settings);
@@ -1274,6 +1330,12 @@ jQuery(async () => {
         Object.assign(extension_settings.vectors, settings);
         saveSettingsDebounced();
     });
+    $('#vectors_vllm_model').val(settings.vllm_model).on('input', () => {
+        $('#vectors_modelWarning').show();
+        settings.vllm_model = String($('#vectors_vllm_model').val());
+        Object.assign(extension_settings.vectors, settings);
+        saveSettingsDebounced();
+    });
     $('#vectors_ollama_keep').prop('checked', settings.ollama_keep).on('input', () => {
         settings.ollama_keep = $('#vectors_ollama_keep').prop('checked');
         Object.assign(extension_settings.vectors, settings);
@@ -1456,6 +1518,19 @@ jQuery(async () => {
         saveSettingsDebounced();
     });
 
+    $('#vectors_force_chunk_delimiter').prop('checked', settings.force_chunk_delimiter).on('input', () => {
+        settings.force_chunk_delimiter = String($('#vectors_force_chunk_delimiter').val());
+        Object.assign(extension_settings.vectors, settings);
+        saveSettingsDebounced();
+    });
+
+    $('#vectors_ollama_pull').on('click', (e) => {
+        const presetModel = extension_settings.vectors.ollama_model || '';
+        e.preventDefault();
+        $('#ollama_download_model').trigger('click');
+        $('#dialogue_popup_input').val(presetModel);
+    });
+
     const validSecret = !!secret_state[SECRET_KEYS.NOMICAI];
     const placeholder = validSecret ? '✔️ Key saved' : '❌ Missing key';
     $('#api_key_nomicai').attr('placeholder', placeholder);
@@ -1525,4 +1600,11 @@ jQuery(async () => {
         ],
         returns: ARGUMENT_TYPE.LIST,
     }));
+
+    registerDebugFunction('purge-everything', 'Purge all vector indices', 'Obliterate all stored vectors for all sources. No mercy.', async () => {
+        if (!confirm('Are you sure?')) {
+            return;
+        }
+        await purgeAllVectorIndexes();
+    });
 });

public/scripts/extensions/vectors/settings.html

@@ -1,12 +1,12 @@
 <div class="vectors_settings">
     <div class="inline-drawer">
         <div class="inline-drawer-toggle inline-drawer-header">
-            <b>Vector Storage</b>
+            <b data-i18n="Vector Storage">Vector Storage</b>
             <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
         </div>
         <div class="inline-drawer-content">
             <div class="flex-container flexFlowColumn">
-                <label for="vectors_source">
+                <label for="vectors_source" data-i18n="Vectorization Source">
                     Vectorization Source
                 </label>
                 <select id="vectors_source" class="text_pole">
@@ -14,37 +14,41 @@
                     <option value="extras">Extras</option>
                     <option value="palm">Google MakerSuite</option>
                     <option value="llamacpp">llama.cpp</option>
-                    <option value="transformers">Local (Transformers)</option>
+                    <option value="transformers" data-i18n="Local (Transformers)">Local (Transformers)</option>
                     <option value="mistral">MistralAI</option>
                     <option value="nomicai">NomicAI</option>
                     <option value="ollama">Ollama</option>
                     <option value="openai">OpenAI</option>
                     <option value="togetherai">TogetherAI</option>
+                    <option value="vllm">vLLM</option>
                 </select>
             </div>
             <div class="flex-container flexFlowColumn" id="ollama_vectorsModel">
-                <label for="vectors_ollama_model">
+                <label for="vectors_ollama_model" data-i18n="Vectorization Model">
                     Vectorization Model
                 </label>
                 <input id="vectors_ollama_model" class="text_pole" type="text" placeholder="Model tag, e.g. llama3" />
                 <label for="vectors_ollama_keep" class="checkbox_label" title="When checked, the model will not be unloaded after use.">
                     <input id="vectors_ollama_keep" type="checkbox" />
-                    <span>Keep model in memory</span>
+                    <span data-i18n="Keep model in memory">Keep model in memory</span>
                 </label>
-                <i>
+                <div>
-                    Hint: Download models and set the URL in the API connection settings.
+                    The model must be downloaded first! Do it with the <code>ollama pull</code> command or <a href="#" id="vectors_ollama_pull">click here</a>.
+                </div>
+                <i data-i18n="Hint: Set the URL in the API connection settings.">
+                    Hint: Set the URL in the API connection settings.
                 </i>
             </div>
             <div class="flex-container flexFlowColumn" id="llamacpp_vectorsModel">
-                <span>
+                <span data-i18n="The server MUST be started with the --embedding flag to use this feature!">
                     The server MUST be started with the <code>--embedding</code> flag to use this feature!
                 </span>
-                <i>
+                <i data-i18n="Hint: Set the URL in the API connection settings.">
                     Hint: Set the URL in the API connection settings.
                 </i>
             </div>
             <div class="flex-container flexFlowColumn" id="openai_vectorsModel">
-                <label for="vectors_openai_model">
+                <label for="vectors_openai_model" data-i18n="Vectorization Model">
                     Vectorization Model
                 </label>
                 <select id="vectors_openai_model" class="text_pole">
@@ -54,7 +58,7 @@
                 </select>
             </div>
             <div class="flex-container flexFlowColumn" id="cohere_vectorsModel">
-                <label for="vectors_cohere_model">
+                <label for="vectors_cohere_model" data-i18n="Vectorization Model">
                     Vectorization Model
                 </label>
                 <select id="vectors_cohere_model" class="text_pole">
@@ -68,7 +72,7 @@
                 </select>
             </div>
             <div class="flex-container flexFlowColumn" id="together_vectorsModel">
-                <label for="vectors_togetherai_model">
+                <label for="vectors_togetherai_model" data-i18n="Vectorization Model">
                     Vectorization Model
                 </label>
                 <select id="vectors_togetherai_model" class="text_pole">
@@ -82,6 +86,15 @@
                     <option value="bert-base-uncased">Bert Base Uncased</option>
                 </select>
             </div>
+            <div class="flex-container flexFlowColumn" id="vllm_vectorsModel">
+                <label for="vectors_vllm_model" data-i18n="Vectorization Model">
+                    Vectorization Model
+                </label>
+                <input id="vectors_vllm_model" class="text_pole" type="text" placeholder="Model name, e.g. intfloat/e5-mistral-7b-instruct" />
+                <i data-i18n="Hint: Set the URL in the API connection settings.">
+                    Hint: Set the URL in the API connection settings.
+                </i>
+            </div>
 
             <small id="vectors_modelWarning">
                 <i class="fa-solid fa-exclamation-triangle"></i>
@@ -92,7 +105,7 @@
 
             <div class="flex-container flexFlowColumn" id="nomicai_apiKey">
                 <label for="api_key_nomicai">
-                    <span>NomicAI API Key</span>
+                    <span data-i18n="NomicAI API Key">NomicAI API Key</span>
                 </label>
                 <div class="flex-container">
                     <input id="api_key_nomicai" name="api_key_nomicai" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
@@ -107,48 +120,54 @@
             <div class="flex-container marginTopBot5">
                 <div class="flex-container flex1 flexFlowColumn" title="How many last messages will be matched for relevance.">
                     <label for="vectors_query">
-                        <span>Query messages</span>
+                        <small data-i18n="Query messages">Query messages</small>
                     </label>
-                    <input type="number" id="vectors_query" class="text_pole widthUnset" min="1" max="99" />
+                    <input type="number" id="vectors_query" class="text_pole" min="1" max="99" />
                 </div>
                 <div class="flex-container flex1 flexFlowColumn" title="Cut-off score for relevance. Helps to filter out irrelevant data.">
                     <label for="vectors_query">
-                        <span>Score threshold</span>
+                        <small data-i18n="Score threshold">Score threshold</small>
                     </label>
-                    <input type="number" id="vectors_score_threshold" class="text_pole widthUnset" min="0" max="1" step="0.05" />
+                    <input type="number" id="vectors_score_threshold" class="text_pole" min="0" max="1" step="0.05" />
+                </div>
+                <div class="flex-container flex1 flexFlowColumn" title="Prioritize chunking on the preferred delimiter.">
+                    <label for="vectors_force_chunk_delimiter">
+                        <small data-i18n="Chunk boundary">Chunk boundary</small>
+                    </label>
+                    <textarea id="vectors_force_chunk_delimiter" class="text_pole" rows="1" placeholder="(None)"></textarea>
                 </div>
             </div>
 
             <div class="flex-container">
                 <label class="checkbox_label expander" for="vectors_include_wi" title="Query results can activate World Info entries.">
                     <input id="vectors_include_wi" type="checkbox" class="checkbox">
-                    Include in World Info Scanning
+                    <span data-i18n="Include in World Info Scanning">Include in World Info Scanning</span>
                 </label>
             </div>
 
             <hr>
 
-            <h4>
+            <h4 data-i18n="World Info settings">
                 World Info settings
             </h4>
 
             <label class="checkbox_label" for="vectors_enabled_world_info" title="Enable activation of World Info entries based on vector similarity.">
                 <input id="vectors_enabled_world_info" type="checkbox" class="checkbox">
-                Enabled for World Info
+                <span data-i18n="Enable for World Info">Enable for World Info</span>
             </label>
 
             <div id="vectors_world_info_settings" class="marginTopBot5">
                 <div class="flex-container">
                     <label for="vectors_enabled_for_all" class="checkbox_label">
                         <input id="vectors_enabled_for_all" type="checkbox" />
-                        <span>Enabled for all entries</span>
+                        <span data-i18n="Enabled for all entries">Enabled for all entries</span>
                     </label>
                     <ul class="margin0">
                         <li>
-                            <small>Checked: all entries except ❌ status can be activated.</small>
+                            <small data-i18n="Checked: all entries except ❌ status can be activated.">Checked: all entries except ❌ status can be activated.</small>
                         </li>
                         <li>
-                            <small>Unchecked: only entries with 🔗 status can be activated.</small>
+                            <small data-i18n="Unchecked: only entries with ❌ status can be activated.">Unchecked: only entries with 🔗 status can be activated.</small>
                         </li>
                     </ul>
                 </div>
@@ -158,7 +177,7 @@
                     </div>
                     <div class="flex1" title="Maximum number of entries to be activated">
                         <label for="vectors_max_entries" >
-                            <small>Max Entries</small>
+                            <small data-i18n="Max Entries">Max Entries</small>
                         </label>
                         <input id="vectors_max_entries" type="number" class="text_pole widthUnset" min="1" max="9999" />
                     </div>
@@ -168,13 +187,13 @@
                 </div>
             </div>
 
-            <h4>
+            <h4 data-i18n="File vectorization settings">
                 File vectorization settings
             </h4>
 
             <label class="checkbox_label" for="vectors_enabled_files">
                 <input id="vectors_enabled_files" type="checkbox" class="checkbox">
-                Enabled for files
+                <span data-i18n="Enable for files">Enable for files</span>
             </label>
 
             <div id="vectors_files_settings" class="marginTopBot5">
@@ -186,152 +205,153 @@
                     <i class="fa-solid fa-flask" title="Experimental feature"></i>
                 </label>
                 <div class="flex justifyCenter" title="These settings apply to files attached directly to messages.">
-                    <span>Message attachments</span>
+                    <span data-i18n="Message attachments">Message attachments</span>
                 </div>
                 <div class="flex-container">
                     <div class="flex1" title="Only files past this size will be vectorized.">
                         <label for="vectors_size_threshold">
-                            <small>Size threshold (KB)</small>
+                            <small data-i18n="Size threshold (KB)">Size threshold (KB)</small>
                         </label>
                         <input id="vectors_size_threshold" type="number" class="text_pole" min="1" max="99999" />
                     </div>
                     <div class="flex1" title="Chunk size for file splitting.">
                         <label for="vectors_chunk_size">
-                            <small>Chunk size (chars)</small>
+                            <small data-i18n="Chunk size (chars)">Chunk size (chars)</small>
                         </label>
                         <input id="vectors_chunk_size" type="number" class="text_pole" min="1" max="99999" />
                     </div>
                     <div class="flex1" title="The overlap between adjacent chunks in % from chunk size. The overlap text is trimmed to sentence boundaries. 0 = disabled.">
                         <label for="vectors_overlap_percent">
-                            <small>Chunk overlap (%)</small>
+                            <small data-i18n="Chunk overlap (%)">Chunk overlap (%)</small>
                         </label>
                         <input id="vectors_overlap_percent" type="number" class="text_pole" min="0" max="99" step="1" />
                     </div>
                     <div class="flex1" title="How many chunks to retrieve when querying.">
                         <label for="vectors_chunk_count">
-                            <small>Retrieve chunks</small>
+                            <small data-i18n="Retrieve chunks">Retrieve chunks</small>
                         </label>
                         <input id="vectors_chunk_count" type="number" class="text_pole" min="1" max="99999" />
                     </div>
                 </div>
                 <div class="flex justifyCenter" title="These settings apply to files stored in the Data Bank.">
-                    <span>Data Bank files</span>
+                    <span data-i18n="Data Bank files">Data Bank files</span>
                 </div>
                 <div class="flex-container">
                     <div class="flex1" title="Only files past this size will be vectorized.">
                         <label for="vectors_size_threshold_db">
-                            <small>Size threshold (KB)</small>
+                            <small data-i18n="Size threshold (KB)">Size threshold (KB)</small>
                         </label>
                         <input id="vectors_size_threshold_db" type="number" class="text_pole" min="1" max="99999" />
                     </div>
                     <div class="flex1" title="Chunk size for file splitting.">
                         <label for="vectors_chunk_size_db">
-                            <small>Chunk size (chars)</small>
+                            <small data-i18n="Chunk size (chars)">Chunk size (chars)</small>
                         </label>
                         <input id="vectors_chunk_size_db" type="number" class="text_pole" min="1" max="99999" />
                     </div>
                     <div class="flex1" title="The overlap between adjacent chunks in % from chunk size. The overlap text is trimmed to sentence boundaries. 0 = disabled.">
                         <label for="vectors_overlap_percent_db">
-                            <small>Chunk overlap (%)</small>
+                            <small data-i18n="Chunk overlap (%)">Chunk overlap (%)</small>
                         </label>
                         <input id="vectors_overlap_percent_db" type="number" class="text_pole" min="0" max="99" step="1" />
                     </div>
                     <div class="flex1" title="How many chunks to retrieve when querying.">
                         <label for="vectors_chunk_count_db">
-                            <small>Retrieve chunks</small>
+                            <small data-i18n="Retrieve chunks">Retrieve chunks</small>
                         </label>
                         <input id="vectors_chunk_count_db" type="number" class="text_pole" min="1" max="99999" />
                     </div>
                 </div>
                 <div class="flex-container flexFlowColumn">
                     <label for="vectors_file_template_db">
-                        <span>Injection Template</span>
+                        <span data-i18n="Injection Template">Injection Template</span>
                     </label>
                     <textarea id="vectors_file_template_db" class="margin0 text_pole textarea_compact" rows="3" placeholder="Use &lcub;&lcub;text&rcub;&rcub; macro to specify the position of retrieved text."></textarea>
-                    <label for="vectors_file_position_db">Injection Position</label>
+                    <label for="vectors_file_position_db" data-i18n="Injection Position">Injection Position</label>
                     <div class="radio_group">
                         <label>
                             <input type="radio" name="vectors_file_position_db" value="2" />
-                            <span>Before Main Prompt / Story String</span>
+                            <span data-i18n="Before Main Prompt / Story String">Before Main Prompt / Story String</span>
                         </label>
                         <!--Keep these as 0 and 1 to interface with the setExtensionPrompt function-->
                         <label>
                             <input type="radio" name="vectors_file_position_db" value="0" />
-                            <span>After Main Prompt / Story String</span>
+                            <span data-i18n="After Main Prompt / Story String">After Main Prompt / Story String</span>
                         </label>
                         <label for="vectors_file_depth_db" title="How many messages before the current end of the chat." data-i18n="[title]How many messages before the current end of the chat.">
                             <input type="radio" name="vectors_file_position_db" value="1" />
-                            <span>In-chat @ Depth</span>
+                            <span data-i18n="In-chat @ Depth">In-chat @ Depth</span>
                             <input id="vectors_file_depth_db" class="text_pole widthUnset" type="number" min="0" max="999" />
                             <span>as</span>
                             <select id="vectors_file_depth_role_db"  class="text_pole widthNatural">
-                                <option value="0">System</option>
+                                <option value="0" data-i18n="System">System</option>
-                                <option value="1">User</option>
+                                <option value="1" data-i18n="User">User</option>
-                                <option value="2">Assistant</option>
+                                <option value="2" data-i18n="Assistant">Assistant</option>
                             </select>
                         </label>
                     </div>
                 </div>
                 <div class="flex-container">
                     <div id="vectors_files_vectorize_all" class="menu_button menu_button_icon" title="Vectorize all files in the Data Bank and current chat.">
-                        Vectorize All
+                        <span data-i18n="Vectorize All">Vectorize All</span>
                     </div>
                     <div id="vectors_files_purge" class="menu_button menu_button_icon" title="Purge all file vectors in the Data Bank and current chat.">
-                        Purge Vectors
+                        <span data-i18n="Purge Vectors">Purge Vectors</span>
                     </div>
                 </div>
             </div>
 
             <hr>
 
-            <h4>
+            <h4 data-i18n="Chat vectorization settings">
                 Chat vectorization settings
             </h4>
             <label class="checkbox_label" for="vectors_enabled_chats">
                 <input id="vectors_enabled_chats" type="checkbox" class="checkbox">
-                Enabled for chat messages
+                <span data-i18n="Enabled for chat messages">Enabled for chat messages</span>
             </label>
 
             <hr>
 
             <div id="vectors_chats_settings">
                 <div id="vectors_advanced_settings">
-                    <label for="vectors_template">
+                    <label for="vectors_template" data-i18n="Injection Template">
                         Injection Template
                     </label>
                     <textarea id="vectors_template" class="text_pole textarea_compact" rows="3" placeholder="Use &lcub;&lcub;text&rcub;&rcub; macro to specify the position of retrieved text."></textarea>
-                    <label for="vectors_position">Injection Position</label>
+                    <label for="vectors_position" data-i18n="Injection Position">Injection Position</label>
                     <div class="radio_group">
                         <label>
                             <input type="radio" name="vectors_position" value="2" />
-                            Before Main Prompt / Story String
+                            <span data-i18n="Before Main Prompt / Story String">Before Main Prompt / Story String</span>
                         </label>
                         <!--Keep these as 0 and 1 to interface with the setExtensionPrompt function-->
                         <label>
                             <input type="radio" name="vectors_position" value="0" />
-                            After Main Prompt / Story String
+                            <span data-i18n="After Main Prompt / Story String">After Main Prompt / Story String</span>
                         </label>
                         <label for="vectors_depth" title="How many messages before the current end of the chat." data-i18n="[title]How many messages before the current end of the chat.">
                             <input type="radio" name="vectors_position" value="1" />
-                            In-chat @ Depth <input id="vectors_depth" class="text_pole widthUnset" type="number" min="0" max="999" />
+                            <span data-i18n="In-chat @ Depth">In-chat @ Depth </span>
+                            <input id="vectors_depth" class="text_pole widthUnset" type="number" min="0" max="999" />
                         </label>
                     </div>
                     <div class="flex-container">
                         <div class="flex1" title="Can increase the retrieval quality for the cost of processing. 0 = disabled.">
                             <label for="vectors_message_chunk_size">
-                                <small>Chunk size (chars)</small>
+                                <small data-i18n="Chunk size (chars)">Chunk size (chars)</small>
                             </label>
                             <input id="vectors_message_chunk_size" type="number" class="text_pole widthUnset" min="0" max="9999" />
                         </div>
                         <div class="flex1" title="Prevents last N messages from being placed out of order.">
                             <label for="vectors_protect">
-                                <small>Retain#</small>
+                                <small data-i18n="Retain#">Retain#</small>
                             </label>
                             <input type="number" id="vectors_protect" class="text_pole widthUnset" min="1" max="9999" />
                         </div>
                         <div class="flex1" title="How many past messages to insert as memories.">
                             <label for="vectors_insert">
-                                <small>Insert#</small>
+                                <small data-i18n="Insert#">Insert#</small>
                             </label>
                             <input type="number" id="vectors_insert" class="text_pole widthUnset" min="1" max="9999" />
                         </div>
@@ -340,43 +360,43 @@
                     <div class="flex-container flexFlowColumn">
                         <div class="flex-container alignitemscenter justifyCenter">
                             <i class="fa-solid fa-flask" title="Summarization for vectors is an experimental feature that may improve vectors or may worsen them. Use at your own discretion."></i>
-                            <span>Vector Summarization</span>
+                            <span data-i18n="Vector Summarization">Vector Summarization</span>
                         </div>
                         <label class="checkbox_label expander" for="vectors_summarize" title="Summarize chat messages before generating embeddings.">
                             <input id="vectors_summarize" type="checkbox" class="checkbox">
-                            Summarize chat messages for vector generation
+                            <span data-i18n="Summarize chat messages for vector generation">Summarize chat messages for vector generation</span>
                         </label>
-                        <i class="failure">Warning: This will slow down vector generation drastically, as all messages have to be summarized first.</i>
+                        <i class="failure" data-i18n="Warning: This will slow down vector generation drastically, as all messages have to be summarized first.">Warning: This will slow down vector generation drastically, as all messages have to be summarized first.</i>
 
                         <label class="checkbox_label expander" for="vectors_summarize_user" title="Summarize sent chat messages before generating embeddings.">
                             <input id="vectors_summarize_user" type="checkbox" class="checkbox">
-                            Summarize chat messages when sending
+                            <span data-i18n="Summarize chat messages when sending">Summarize chat messages when sending</span>
                         </label>
-                        <i class="failure">Warning: This might cause your sent messages to take a bit to process and slow down response time.</i>
+                        <i class="failure" data-i18n="Warning: This might cause your sent messages to take a bit to process and slow down response time.">Warning: This might cause your sent messages to take a bit to process and slow down response time.</i>
 
-                        <label for="vectors_summary_source">Summarize with:</label>
+                        <label for="vectors_summary_source" title="Summarize with:">Summarize with:</label>
                         <select id="vectors_summary_source" class="text_pole">
-                            <option value="main">Main API</option>
+                            <option value="main" data-i18n="Main API">Main API</option>
-                            <option value="extras">Extras API</option>
+                            <option value="extras" data-i18n="Extras API">Extras API</option>
                         </select>
 
-                        <label for="vectors_summary_prompt">Summary Prompt:</label>
+                        <label for="vectors_summary_prompt" title="Summary Prompt:">Summary Prompt:</label>
-                        <small>Only used when Main API is selected.</small>
+                        <small data-i18n="Only used when Main API is selected.">Only used when Main API is selected.</small>
                         <textarea id="vectors_summary_prompt" class="text_pole textarea_compact" rows="6" placeholder="This prompt will be sent to AI to request the summary generation."></textarea>
                     </div>
                 </div>
-                <small>
+                <small data-i18n="Old messages are vectorized gradually as you chat. To process all previous messages, click the button below.">
                     Old messages are vectorized gradually as you chat.
                     To process all previous messages, click the button below.
                 </small>
                 <div class="flex-container">
-                    <div id="vectors_vectorize_all" class="menu_button menu_button_icon">
+                    <div id="vectors_vectorize_all" class="menu_button menu_button_icon" data-i18n="Vectorize All">
                         Vectorize All
                     </div>
-                    <div id="vectors_purge" class="menu_button menu_button_icon">
+                    <div id="vectors_purge" class="menu_button menu_button_icon" data-i18n="Purge Vectors">
                         Purge Vectors
                     </div>
-                    <div id="vectors_view_stats" class="menu_button menu_button_icon">
+                    <div id="vectors_view_stats" class="menu_button menu_button_icon" data-i18n="View Stats">
                         View Stats
                     </div>
                 </div>