Fix profile loading issues on new chat

src/lib/ChatSettingField.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import { getProfile } from './Profiles.svelte'
-  import { cleanSettingValue, setChatSettingValue } from './Storage.svelte'
+  import { addChat, cleanSettingValue, setChatSettingValue } from './Storage.svelte'
   import type { Chat, ChatSetting, ChatSettings, SettingPrompt } from './Types.svelte'
   import { autoGrowInputOnEvent } from './Util.svelte'
+    import { replace } from 'svelte-spa-router';
 
   export let setting:ChatSetting
   export let chatSettings:ChatSettings
@@ -27,14 +28,29 @@
     profile: [
       {
         prompt: 'Unsaved changes to the current profile will be lost.\n Continue?',
-        fn: (setting, newVal, oldVal) => {
+        checkPrompt: (setting, newVal, oldVal) => {
           return !!chatSettings.isDirty && newVal !== oldVal
         },
         passed: false
       },
+      {
+        prompt: 'Would you like to start a new chat session with this profile?',
+        checkPrompt: (setting, newVal, oldVal) => {
+          return newVal !== oldVal
+        },
+        onYes: (setting, newVal, oldVal) => {
+          // start new char session, apply this profile, amd start it
+          setChatSettingValue(chatId, setting, oldVal)
+          const profile = getProfile(newVal)
+          const newChatId = addChat(profile)
+          replace(`/chat/${newChatId}`)
+          return true
+        },
+        passed: false
+      },
       {
         prompt: 'Personality change will not correctly apply to existing chat session.\n Continue?',
-        fn: (setting, newVal, oldVal) => {
+        checkPrompt: (setting, newVal, oldVal) => {
           return chat.sessionStarted && newVal !== originalProfile &&
             (getProfile(newVal).characterName !== chatSettings.characterName)
         },
@@ -70,7 +86,7 @@
         default:
           setChatSettingValue(chatId, setting, el.value)
       }
-      const newVal = chatSettings[setting.key]
+      const newVal = cleanSettingValue(setting.type, el.checked || el.value)
       if (val === newVal) return
       try {
         if ((typeof setting.afterChange === 'function') && setting.afterChange(chatId, setting, chatSettings[setting.key])) {
@@ -88,16 +104,21 @@
     for (let i = 0, l = checks.length; i < l; i++) {
       const c = checks[i]
       if (c.passed) continue
-      if (c.fn(setting, newVal, val)) {
+      if (c.checkPrompt(setting, newVal, val)) {
         // eventually this needs to be an async call to a confirmation modal where
         // "passed", not really being used here, will be reworked to some other
         // state to deal with inevitable issues once a non-blocking modal is used.
         if (window.confirm(c.prompt)) {
           c.passed = true
+          if (c.onYes && c.onYes(setting, newVal, val)) {
+            resetSettingCheck(setting.key)
+            return
+          }
         } else {
           // roll-back
           setChatSettingValue(chatId, setting, val)
           // refresh setting modal, if open
+          c.onNo && c.onNo(setting, newVal, val)
           refreshSettings()
           resetSettingCheck(setting.key)
           return

src/lib/ChatSettingsModal.svelte

@@ -10,7 +10,10 @@
     deleteCustomProfile,
     setGlobalSettingValueByKey,
     resetChatSettings,
-    checkStateChange
+    checkStateChange,
+
+    addChat
+
   } from './Storage.svelte'
   import { supportedModels, type Chat, type ChatSetting, type ResponseModels, type SettingSelect, type SelectOption } from './Types.svelte'
   import { sizeTextElements } from './Util.svelte'
@@ -22,12 +25,14 @@
     faFloppyDisk,
     faThumbtack,
     faDownload,
-    faUpload
+    faUpload,
+    faSquarePlus
   } from '@fortawesome/free-solid-svg-icons/index'
   import { exportProfileAsJSON } from './Export.svelte'
   import { afterUpdate } from 'svelte'
   import ChatSettingField from './ChatSettingField.svelte'
   import { getModelMaxTokens } from './Stats.svelte'
+    import { replace } from 'svelte-spa-router';
 
   export let chatId:number
   export const show = () => { showSettings() }
@@ -201,6 +206,11 @@
     return cname
   }
 
+  const startNewChat = () => {
+    const newChatId = addChat(chatSettings)
+    replace(`/chat/${newChatId}`)
+  }
+
   // excludeFromProfile
 
   const deepEqual = (x:any, y:any) => {
@@ -244,8 +254,9 @@
       <div class="level is-mobile">
         <div class="level-left">
           <!-- <button class="button is-info" on:click={closeSettings}>Close</button> -->
-          <button class="button" class:is-disabled={!chatSettings.isDirty} on:click={saveProfile}>Save Changes</button>    
+          <button class="button" title="Save changes to this profile." class:is-disabled={!chatSettings.isDirty} on:click={saveProfile}>Save</button>    
-          <button class="button is-warning" class:is-disabled={!chatSettings.isDirty} on:click={clearSettings}>Reset</button>
+          <button class="button is-warning" title="Throw away changes to this profile." class:is-disabled={!chatSettings.isDirty} on:click={clearSettings}>Reset</button>
+          <button class="button is-warning" title="Start new chat with this profile." class:is-disabled={!chatSettings.isDirty} on:click={startNewChat}>New Chat</button>
         </div>
         <div class="level-right">
           <div class="dropdown is-right is-up" class:is-active={showProfileMenu}>
@@ -266,6 +277,9 @@
                 <a href={'#'} class="dropdown-item" class:is-disabled={isDefault} on:click|preventDefault={pinDefaultProfile}>
                   <span class="menu-icon"><Fa icon={faThumbtack}/></span> Set as Default Profile
                 </a>
+                <a href={'#'} class="dropdown-item" class:is-disabled={isDefault} on:click|preventDefault={startNewChat}>
+                  <span class="menu-icon"><Fa icon={faSquarePlus}/></span> Start New Chat Using Profile
+                </a>
                 <hr class="dropdown-divider">
                 <a href={'#'} 
                   class="dropdown-item"

src/lib/Sidebar.svelte

@@ -45,7 +45,7 @@
             ></div>
           {:else}
           <div class="level-item">
-            <a href={'#/chat/new'} class="panel-block" class:is-disabled={!$apiKeyStorage}
+            <a href={'#/chat/new'} class="panel-block" title="Start new chat with default profile" class:is-disabled={!$apiKeyStorage}
               ><span class="greyscale mr-2"><Fa icon={faSquarePlus} /></span> New chat</a
             ></div>
           {/if}

src/lib/Storage.svelte

@@ -22,17 +22,19 @@
     return chatId
   }
 
-  export const addChat = (): number => {
+  export const addChat = (profile:ChatSettings|undefined=undefined): number => {
     const chats = get(chatsStorage)
 
     // Find the max chatId
     const chatId = newChatID()
 
+    profile = JSON.parse(JSON.stringify(profile || getProfile('')))
+
     // Add a new chat
     chats.push({
       id: chatId,
       name: `Chat ${chatId}`,
-      settings: {} as ChatSettings,
+      settings: profile as any,
       messages: [],
       usage: {} as Record<Model, Usage>,
       startSession: false,

src/lib/Types.svelte

@@ -172,7 +172,9 @@ type SettingBoolean = {
   
   export type SettingPrompt = {
     prompt: string;
-    fn: (setting:ChatSetting, newVal:any, oldVal:any)=>boolean;
+    checkPrompt: (setting:ChatSetting, newVal:any, oldVal:any)=>boolean;
+    onYes?: (setting:ChatSetting, newVal:any, oldVal:any)=>boolean;
+    onNo?: (setting:ChatSetting, newVal:any, oldVal:any)=>boolean;
     passed: boolean;
   };