Onboarding experience and new default user avatar

.gitignore

@@ -24,3 +24,4 @@ secrets.json
 /dist
 /backups/
 public/movingUI/
+content.log

default/content/index.json

@@ -18,5 +18,9 @@
     {
         "filename": "Eldoria.json",
         "type": "world"
+    },
+    {
+        "filename": "user-default.png",
+        "type": "avatar"
     }
 ]

default/settings.json

@@ -1,9 +1,10 @@
 {
-    "username": "You",
+    "firstRun": true,
+    "username": "User",
     "api_server": "http://127.0.0.1:5000/api",
     "api_server_textgenerationwebui": "http://127.0.0.1:5000/api",
     "preset_settings": "RecoveredRuins",
-    "user_avatar": "legat.png",
+    "user_avatar": "user-default.png",
     "amount_gen": 250,
     "max_context": 2048,
     "main_api": "koboldhorde",

public/User Avatars/README.md

@@ -0,0 +1 @@
+# Put images here to select them as a user persona avatar.

public/index.html

@@ -3387,6 +3387,22 @@
         </div>
     </div>
 
+    <div id="onboarding_template" class="template_element">
+        <div class="onboarding">
+            <h3 data-i18n="Welcome to SillyTavern!">Welcome to SillyTavern!</h3>
+            <ul class="justifyLeft margin-bot-10px">
+                <li>Read the <a href="https://docs.sillytavern.app/" target="_blank">Official Documentation</a>.</li>
+                <li>Type <code>/help</code> in chat for commands and macros.</li>
+                <li>Join the <a href="https://discord.gg/RZdyAEUPvj" target="_blank">Discord server</a> for info and announcements.</li>
+            </ul>
+            <div class="justifyLeft margin-bot-10px">
+                Before you get started, you must select a user name.
+                This can be changed at any time via the <code><i class="fa-solid fa-face-smile"></i></code> icon.
+            </div>
+            <h4>User Name:</h4>
+        </div>
+    </div>
+
     <div id="group_member_template" class="template_element">
         <div class="group_member">
             <div class="avatar">

public/script.js

@@ -270,7 +270,7 @@ let itemizedPrompts = [];
 
 /* let bg_menu_toggle = false; */
 export const systemUserName = "SillyTavern System";
-let default_user_name = "You";
+let default_user_name = "User";
 let name1 = default_user_name;
 let name2 = "SillyTavern System";
 let chat = [];
@@ -284,6 +284,7 @@ let safetychat = [
     },
 ];
 let chat_create_date = 0;
+let firstRun = false;
 
 const default_ch_mes = "Hello";
 let count_view_mes = 0;
@@ -4816,6 +4817,21 @@ eventSource.on(event_types.CHAT_CHANGED, () => {
     updateUserLockIcon();
 });
 
+async function doOnboarding(avatarId) {
+    const template = $('#onboarding_template .onboarding');
+    const userName = await callPopup(template, 'input', name1);
+
+    if (userName) {
+        setUserName(userName);
+        console.log(`Binding persona ${avatarId} to name ${userName}`);
+        power_user.personas[avatarId] = userName;
+        power_user.persona_descriptions[avatarId] = {
+            description: '',
+            position: persona_description_positions.BEFORE_CHAR,
+        };
+    }
+}
+
 //***************SETTINGS****************//
 ///////////////////////////////////////////
 async function getSettings(type) {
@@ -4834,11 +4850,9 @@ async function getSettings(type) {
     const data = await response.json();
     if (data.result != "file not find" && data.settings) {
         settings = JSON.parse(data.settings);
-        if (settings.username !== undefined) {
-            if (settings.username !== "") {
-                name1 = settings.username;
-                $("#your_name").val(name1);
-            }
+        if (settings.username !== undefined && settings.username !== "") {
+            name1 = settings.username;
+            $("#your_name").val(name1);
         }
 
         //Load KoboldAI settings
@@ -4959,6 +4973,13 @@ async function getSettings(type) {
         //Load User's Name and Avatar
 
         user_avatar = settings.user_avatar;
+        firstRun = !!settings.firstRun;
+
+        if (firstRun) {
+            await doOnboarding(user_avatar);
+            firstRun = false;
+        }
+
         reloadUserAvatar();
         highlightSelectedAvatar();
         setPersonaDescription();
@@ -5001,6 +5022,7 @@ async function saveSettings(type) {
         type: "POST",
         url: "/savesettings",
         data: JSON.stringify({
+            firstRun: firstRun,
             username: name1,
             api_server: api_server,
             api_server_textgenerationwebui: api_server_textgenerationwebui,

src/content-manager.js

@@ -65,6 +65,10 @@ function getTargetByType(type) {
             return 'public/worlds';
         case 'sound':
             return 'public/sounds';
+        case 'avatar':
+            return 'public/User Avatars';
+        case 'theme':
+            return 'public/themes';
         default:
             return null;
     }