Merge branch 'Niek:main' into main

src/lib/Chat.svelte

@@ -24,6 +24,7 @@
 
   let input: HTMLTextAreaElement
   let settings: HTMLDivElement
+  let chatNameSettings: HTMLFormElement
   let recognition: any = null
   let recording = false
 
@@ -270,6 +271,25 @@
     }
   }
 
+  const showChatNameSettings = () => {
+    chatNameSettings.classList.add('is-active');
+    (chatNameSettings.querySelector('#settings-chat-name') as HTMLInputElement).focus()
+  }
+
+  const saveChatNameSettings = () => {
+    const newChatName = (chatNameSettings.querySelector('#settings-chat-name') as HTMLInputElement).value
+    // save if changed
+    if (newChatName && newChatName !== chat.name) {
+      chat.name = newChatName
+      chatsStorage.set($chatsStorage)
+    }
+    closeChatNameSettings()
+  }
+
+  const closeChatNameSettings = () => {
+    chatNameSettings.classList.remove('is-active')
+  }
+
   const showSettings = async () => {
     settings.classList.add('is-active')
 
@@ -321,11 +341,7 @@
           class="greyscale ml-2 is-hidden has-text-weight-bold editbutton"
           title="Rename chat"
           on:click|preventDefault={() => {
-            const newChatName = window.prompt('Enter a new name for this chat', chat.name)
-            if (newChatName) {
-              chat.name = newChatName
-              chatsStorage.set($chatsStorage)
-            }
+            showChatNameSettings()
           }}
         >
           ✏️
@@ -389,7 +405,7 @@
       </div>
     </article>
   {:else if message.role === 'system' || message.role === 'error'}
-    <article class="message is-danger">
+    <article class="message is-danger assistant-message">
       <div class="message-body content">
         <SvelteMarkdown
           source={message.content}
@@ -401,7 +417,7 @@
       </div>
     </article>
   {:else}
-    <article class="message is-success">
+    <article class="message is-success assistant-message">
       <div class="message-body content">
         <SvelteMarkdown
           source={message.content}
@@ -464,6 +480,7 @@
   on:keydown={(event) => {
     if (event.key === 'Escape') {
       closeSettings()
+      closeChatNameSettings()
     }
   }}
 />
@@ -515,3 +532,36 @@
     </footer>
   </div>
 </div>
+
+<!-- rename modal -->
+<form class="modal" bind:this={chatNameSettings} on:submit={saveChatNameSettings}>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class="modal-background" on:click={closeChatNameSettings} />
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Enter a new name for this chat</p>
+    </header>
+    <section class="modal-card-body">
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label" for="settings-chat-name">New name:</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <input
+              class="input"
+              type="text"
+              id="settings-chat-name"
+              value={chat.name}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer class="modal-card-foot">
+      <input type="submit" class="button is-info" value="Save" />
+      <button class="button" on:click={closeChatNameSettings}>Cancel</button>
+    </footer>
+  </div>
+</form>
+<!-- end -->

src/main.ts

@@ -1,3 +1,4 @@
+// This can be false if you're using a fallback (i.e. SPA mode)
 import './app.scss'
 import App from './App.svelte'