@@ -4061,6 +4073,14 @@
Type /help in chat for commands and macros.
Join the Discord server for info and announcements.
+
SillyTavern is aimed at advanced users.
+
+ If you're new to this, enable the simplified UI mode below.
+
+
Before you get started, you must select a user name.
This can be changed at any time via the icon.
diff --git a/public/script.js b/public/script.js
index 20619f922..476087009 100644
--- a/public/script.js
+++ b/public/script.js
@@ -71,6 +71,8 @@ import {
renderStoryString,
sortEntitiesList,
registerDebugFunction,
+ ui_mode,
+ switchSimpleMode,
} from "./scripts/power-user.js";
import {
@@ -290,6 +292,7 @@ export const eventSource = new EventEmitter();
// Check for override warnings every 5 seconds...
setInterval(displayOverrideWarnings, 5000);
// ...or when the chat changes
+eventSource.on(event_types.SETTINGS_LOADED, () => { settingsReady = true; });
eventSource.on(event_types.CHAT_CHANGED, displayOverrideWarnings);
eventSource.on(event_types.MESSAGE_RECEIVED, processExtensionHelpers);
eventSource.on(event_types.MESSAGE_SENT, processExtensionHelpers);
@@ -325,6 +328,7 @@ let importFlashTimeout;
export let isChatSaving = false;
let chat_create_date = 0;
let firstRun = false;
+let settingsReady = false;
const default_ch_mes = "Hello";
let count_view_mes = 0;
@@ -4715,7 +4719,11 @@ async function uploadUserAvatar(e) {
async function doOnboarding(avatarId) {
+ let simpleUiMode = false;
const template = $('#onboarding_template .onboarding');
+ template.find('input[name="enable_simple_mode"]').on('input', function () {
+ simpleUiMode = $(this).is(':checked');
+ });
const userName = await callPopup(template, 'input', name1);
if (userName) {
@@ -4727,6 +4735,12 @@ async function doOnboarding(avatarId) {
position: persona_description_positions.IN_PROMPT,
};
}
+
+ if (simpleUiMode) {
+ power_user.ui_mode = ui_mode.SIMPLE;
+ $('#ui_mode_select').val(power_user.ui_mode);
+ switchSimpleMode();
+ }
}
//***************SETTINGS****************//
@@ -4915,6 +4929,10 @@ function selectKoboldGuiPreset() {
}
async function saveSettings(type) {
+ if (!settingsReady) {
+ console.warn('Settings not ready, aborting save');
+ return;
+ }
//console.log('Entering settings with name1 = '+name1);
return jQuery.ajax({
diff --git a/public/scripts/extensions/quick-reply/index.js b/public/scripts/extensions/quick-reply/index.js
index 9beb88a5f..44360bc34 100644
--- a/public/scripts/extensions/quick-reply/index.js
+++ b/public/scripts/extensions/quick-reply/index.js
@@ -12,7 +12,7 @@ let presets = [];
let selected_preset = '';
const defaultSettings = {
- quickReplyEnabled: true,
+ quickReplyEnabled: false,
numberOfSlots: 5,
quickReplySlots: [],
}
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index da034c844..5bbf62a24 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -51,6 +51,11 @@ const defaultStoryString = "{{#if system}}{{system}}\n{{/if}}{{#if description}}
const defaultExampleSeparator = '***';
const defaultChatStart = '***';
+export const ui_mode = {
+ SIMPLE: 0,
+ POWER: 1,
+}
+
const avatar_styles = {
ROUND: 0,
RECTANGULAR: 1,
@@ -101,6 +106,7 @@ let power_user = {
multigen_next_chunks: 30,
markdown_escape_strings: '',
+ ui_mode: ui_mode.POWER,
fast_ui_mode: true,
avatar_style: avatar_styles.ROUND,
chat_display: chat_styles.DEFAULT,
@@ -238,6 +244,12 @@ const storage_keys = {
let browser_has_focus = true;
const debug_functions = [];
+export function switchSimpleMode() {
+ $('[data-newbie-hidden]').each(function () {
+ $(this).toggleClass('displayNone', power_user.ui_mode === ui_mode.SIMPLE);
+ });
+}
+
function playMessageSound() {
if (!power_user.play_message_sound) {
return;
@@ -824,6 +836,7 @@ function loadPowerUserSettings(settings, data) {
$("#user-mes-blur-tint-color-picker").attr('color', power_user.user_mes_blur_tint_color);
$("#bot-mes-blur-tint-color-picker").attr('color', power_user.bot_mes_blur_tint_color);
$("#shadow-color-picker").attr('color', power_user.shadow_color);
+ $("#ui_mode_select").val(power_user.ui_mode).find(`option[value="${power_user.ui_mode}"]`).attr('selected', true);
for (const theme of themes) {
const option = document.createElement('option');
@@ -851,6 +864,7 @@ function loadPowerUserSettings(settings, data) {
switchSpoilerMode();
loadMovingUIState();
loadCharListState();
+ switchSimpleMode();
}
async function loadCharListState() {
@@ -2150,6 +2164,13 @@ $(document).ready(() => {
showDebugMenu();
});
+ $("#ui_mode_select").on('change', function () {
+ const value = $(this).find(':selected').val();
+ power_user.ui_mode = Number(value);
+ saveSettingsDebounced();
+ switchSimpleMode();
+ });
+
$(document).on('click', '#debug_table [data-debug-function]', function () {
const functionId = $(this).data('debug-function');
const functionRecord = debug_functions.find(f => f.functionId === functionId);
diff --git a/public/style.css b/public/style.css
index 2c5962004..785847e1a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3505,6 +3505,17 @@ a {
font-weight: bold;
}
+.onboarding {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ text-align: left;
+}
+
+.onboarding > h3 {
+ align-self: center;
+}
+
#select_chat_search {
background-color: transparent;
border: none;
diff --git a/public/themes/Default (Dark) 1.7.1.json b/public/themes/Default (Dark) 1.7.1.json
index 5ccbc2d99..2d31cb473 100644
--- a/public/themes/Default (Dark) 1.7.1.json
+++ b/public/themes/Default (Dark) 1.7.1.json
@@ -10,7 +10,7 @@
"shadow_color": "rgba(0, 0, 0, 1)",
"shadow_width": 2,
"font_scale": 1,
- "fast_ui_mode": true,
+ "fast_ui_mode": false,
"waifuMode": false,
"avatar_style": 0,
"chat_display": 0,
@@ -18,4 +18,4 @@
"sheld_width": 0,
"timer_enabled": false,
"hotswap_enabled": true
-}
\ No newline at end of file
+}