Revert scrolling, fix linting

src/app.scss

@@ -86,12 +86,12 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
 }
 
 /* for copy button */
-pre[data-language="plaintext"] {
+pre[data-language] {
   position: relative;
 }
 div.copy-prompt {
-  padding: 5px;
+  padding: .5rem;
   position: absolute;
-  top: 5px;
+  top: .5rem;
-  right: 5px;
+  right: .5rem;
 }

src/lib/Chat.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
   //import { fetchEventSource } from "@microsoft/fetch-event-source";
 
-  import {
+  import { apiKeyStorage, chatsStorage, addMessage, clearMessages } from "./Storage.svelte";
-    apiKeyStorage,
-    chatsStorage,
-    addMessage,
-    clearMessages,
-  } from "./Storage.svelte";
   import type { Request, Response, Message, Settings } from "./Types.svelte";
   import Code from "./Code.svelte";
 
@@ -102,7 +97,7 @@
     // Scroll to the bottom of the page after any updates to the messages array
     window.scrollTo(0, document.body.scrollHeight);
     input.focus();
-    copyFunction()
+    copyFunction();
   });
 
   // Marked options
@@ -149,14 +144,9 @@
 
         // Provide the settings by mapping the settingsMap to key/value pairs
         ...settingsMap.reduce((acc, setting) => {
-          const value = (
+          const value = (settings.querySelector(`#settings-${setting.key}`) as HTMLInputElement).value;
-            settings.querySelector(
-              `#settings-${setting.key}`
-            ) as HTMLInputElement
-          ).value;
           if (value) {
-            acc[setting.key] =
+            acc[setting.key] = setting.type === "number" ? parseFloat(value) : value;
-              setting.type === "number" ? parseFloat(value) : value;
           }
           return acc;
         }, {}),
@@ -208,9 +198,7 @@
         addMessage(chatId, choice.message);
         // Use TTS to read the response, if query was recorded
         if (recorded && "SpeechSynthesisUtterance" in window) {
-          const utterance = new SpeechSynthesisUtterance(
+          const utterance = new SpeechSynthesisUtterance(choice.message.content);
-            choice.message.content
-          );
           speechSynthesis.speak(utterance);
         }
       });
@@ -243,9 +231,7 @@
 
   const deleteChat = () => {
     if (confirm("Are you sure you want to delete this chat?")) {
-      chatsStorage.update((chats) =>
+      chatsStorage.update((chats) => chats.filter((chat) => chat.id !== chatId));
-        chats.filter((chat) => chat.id !== chatId)
-      );
       chatId = null;
     }
   };
@@ -260,9 +246,7 @@
 
   const clearSettings = () => {
     settingsMap.forEach((setting) => {
-      const input = settings.querySelector(
+      const input = settings.querySelector(`#settings-${setting.key}`) as HTMLInputElement;
-        `#settings-${setting.key}`
-      ) as HTMLInputElement;
       input.value = "";
     });
   };
@@ -290,18 +274,15 @@
       copyPromptText.innerHTML = showCopyMessage;
       copyPrompt.appendChild(copyPromptText);
       block.appendChild(copyPrompt);
-      block
+      block.querySelector(".copy-prompt > button").addEventListener("click", (evt) => {
-        .querySelector(".copy-prompt > button")
+        copy(block.querySelector("code").textContent);
-        .addEventListener("click", (evt) => {
+        block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
-          copy(block.querySelector("code").textContent);
+        setTimeout(() => {
-          block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
+          block.querySelector(".copy-prompt > button").innerHTML = showCopyMessage;
-          setTimeout(() => {
+        }, 1000);
-            block.querySelector(".copy-prompt > button").innerHTML =
+      });
-              showCopyMessage;
-          }, 1000);
-        });
     });
-  }
+  };
 </script>
 
 <nav class="level chat-header">
@@ -314,10 +295,7 @@
           class="greyscale ml-2 is-hidden has-text-weight-bold editbutton"
           title="Rename chat"
           on:click|preventDefault={() => {
-            let newChatName = prompt(
+            let newChatName = prompt("Enter a new name for this chat", chat.name);
-              "Enter a new name for this chat",
-              chat.name
-            );
             if (newChatName) {
               chat.name = newChatName;
               chatsStorage.set($chatsStorage);
@@ -362,9 +340,7 @@
   {#if message.role === "user"}
     <article
       class="message is-info user-message"
-      class:has-text-right={message.content
+      class:has-text-right={message.content.split("\n").filter((line) => line.trim()).length === 1}
-        .split("\n")
-        .filter((line) => line.trim()).length === 1}
     >
       <div class="message-body content">
         <a
@@ -410,13 +386,9 @@
         />
         {#if message.usage}
           <p class="is-size-7">
-            This message was generated using <span class="has-text-weight-bold"
+            This message was generated using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>
-              >{message.usage.total_tokens}</span
-            >
             tokens ~=
-            <span class="has-text-weight-bold"
+            <span class="has-text-weight-bold">${(message.usage.total_tokens * token_price).toFixed(6)}</span>
-              >${(message.usage.total_tokens * token_price).toFixed(6)}</span
-            >
           </p>
         {/if}
       </div>
@@ -428,10 +400,7 @@
   <progress class="progress is-small is-dark" max="100" />
 {/if}
 
-<form
+<form class="field has-addons has-addons-right" on:submit|preventDefault={() => submitForm()}>
-  class="field has-addons has-addons-right"
-  on:submit|preventDefault={() => submitForm()}
->
   <p class="control is-expanded">
     <textarea
       class="input is-info is-focused chat-input"
@@ -453,17 +422,12 @@
     />
   </p>
   <p class="control" class:is-hidden={!recognition}>
-    <button
+    <button class="button" class:is-pulse={recording} on:click|preventDefault={recordToggle}
-      class="button"
-      class:is-pulse={recording}
-      on:click|preventDefault={recordToggle}
       ><span class="greyscale">🎤</span></button
     >
   </p>
   <p class="control">
-    <button class="button" on:click|preventDefault={showSettings}
+    <button class="button" on:click|preventDefault={showSettings}><span class="greyscale">⚙️</span></button>
-      ><span class="greyscale">⚙️</span></button
-    >
   </p>
   <p class="control">
     <button class="button is-info" type="submit">Send</button>
@@ -489,9 +453,7 @@
       {#each settingsMap as setting}
         <div class="field is-horizontal">
           <div class="field-label is-normal">
-            <label class="label" for="settings-temperature"
+            <label class="label" for="settings-temperature">{setting.name}</label>
-              >{setting.name}</label
-            >
           </div>
           <div class="field-body">
             <div class="field">
@@ -508,9 +470,7 @@
     </section>
 
     <footer class="modal-card-foot">
-      <button class="button is-info" on:click={closeSettings}
+      <button class="button is-info" on:click={closeSettings}>Close settings</button>
-        >Close settings</button
-      >
       <button class="button" on:click={clearSettings}>Clear settings</button>
     </footer>
   </div>