Add unsaved profile warning on new chat.

src/lib/ChatOptionMenu.svelte

@@ -24,6 +24,7 @@
   import { clickOutside } from 'svelte-use-click-outside'
   import { openModal } from 'svelte-modals'
   import PromptConfirm from './PromptConfirm.svelte'
+  import { startNewChatWithWarning } from './Util.svelte'
 
   export let chatId
   export const show = (showHide:boolean = true) => {
@@ -120,7 +121,7 @@
         <span class="menu-icon"><Fa icon={faGear}/></span> Chat Profile Settings
       </a>
       <hr class="dropdown-divider">
-      <a href={$apiKeyStorage ? '#/chat/new' : '#/'} class:is-disabled={!$apiKeyStorage} on:click={() => close()} class="dropdown-item">
+      <a href={'#'} class:is-disabled={!$apiKeyStorage} on:click|preventDefault={() => { $apiKeyStorage && close(); $apiKeyStorage && startNewChatWithWarning(chatId) }} class="dropdown-item">
         <span class="menu-icon"><Fa icon={faSquarePlus}/></span> New Chat
       </a>
       <a href={'#'} class="dropdown-item" class:is-disabled={!chatId} on:click|preventDefault={() => { if (chatId) close(); copyChat(chatId) }}>

src/lib/Sidebar.svelte

@@ -7,10 +7,11 @@
   import ChatOptionMenu from './ChatOptionMenu.svelte'
   import logo from '../assets/logo.svg'
   import { clickOutside } from 'svelte-use-click-outside'
+  import { startNewChatWithWarning } from './Util.svelte'
 
   $: sortedChats = $chatsStorage.sort((a, b) => b.id - a.id)
   $: activeChatId = $params && $params.chatId ? parseInt($params.chatId) : undefined
-  
+
 </script>
 
 <aside class="menu main-menu" class:pinned={$pinMainMenu} use:clickOutside={() => { $pinMainMenu = false }}>
@@ -46,9 +47,9 @@
             ></div>
           {:else}
           <div class="level-item">
-            <a href={'#/chat/new'} class="panel-block" title="Start new chat with default profile" class:is-disabled={!$apiKeyStorage}
+            <button on:click={() => { startNewChatWithWarning(activeChatId) }} class="panel-block button" title="Start new chat with default profile" class:is-disabled={!$apiKeyStorage}
-              ><span class="greyscale mr-2"><Fa icon={faSquarePlus} /></span> New chat</a
+              ><span class="greyscale mr-2"><Fa icon={faSquarePlus} /></span> New chat</button>
-            ></div>
+            </div>
           {/if}
         </div>
       </li>

src/lib/Util.svelte

@@ -2,6 +2,9 @@
   import { compare } from 'stacking-order'
   import { openModal } from 'svelte-modals'
   import PromptNotice from './PromptNotice.svelte'
+  import { getChat } from './Storage.svelte'
+  import { replace } from 'svelte-spa-router'
+  import PromptConfirm from './PromptConfirm.svelte'
   export const sizeTextElements = () => {
     const els = document.querySelectorAll('textarea.auto-size')
     for (let i:number = 0, l = els.length; i < l; i++) autoGrowInput(els[i] as HTMLTextAreaElement)
@@ -100,4 +103,20 @@
     })
   }
 
+  export const startNewChatWithWarning = (activeChatId: number|undefined) => {
+    if (activeChatId && getChat(activeChatId).settings.isDirty) {
+      openModal(PromptConfirm, {
+        title: 'Unsaved Profile',
+        message: '<p>There are unsaved changes to your current profile that will be lost.</p><p>Discard these changes and continue with new chat?</p>',
+        asHtml: true,
+        class: 'is-warning',
+        onConfirm: () => {
+          replace('#/chat/new')
+        }
+      })
+    } else {
+      replace('#/chat/new')
+    }
+  }
+
 </script>