From 66c0fe57df00b4554c5df9244def3aaeb07fa265 Mon Sep 17 00:00:00 2001
From: littlemoonstones <littlemoonstones@gmail.com>
Date: Sun, 12 Mar 2023 13:43:19 +0800
Subject: [PATCH 1/8] add copy function

---
 package-lock.json   | 16 ++++++++
 package.json        |  3 ++
 src/app.scss        | 11 ++++++
 src/lib/Chat.svelte | 96 ++++++++++++++++++++++++++++++++++++++-------
 4 files changed, 111 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ebd9c1c..fe5c3b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
     "": {
       "name": "chatgpt-web",
       "version": "0.0.0",
+      "dependencies": {
+        "copy-to-clipboard": "^3.3.3"
+      },
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
         "@microsoft/fetch-event-source": "^2.0.1",
@@ -627,6 +630,14 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1583,6 +1594,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
diff --git a/package.json b/package.json
index 39e5663..b88fae1 100644
--- a/package.json
+++ b/package.json
@@ -28,5 +28,8 @@
     "tslib": "^2.5.0",
     "typescript": "^4.9.3",
     "vite": "^4.1.0"
+  },
+  "dependencies": {
+    "copy-to-clipboard": "^3.3.3"
   }
 }
diff --git a/src/app.scss b/src/app.scss
index b3f53d4..805bfc8 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -83,4 +83,15 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
 @import "/node_modules/bulma-prefers-dark/build/bulma-prefers-dark.sass";
 .modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released
   background-color: $background-dark;
+}
+
+/* for copy button */
+pre[data-language="plaintext"] {
+  position: relative;
+}
+div.copy-prompt {
+  padding: 5px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
 }
\ No newline at end of file
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 0e1f2e1..f9c7925 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
   //import { fetchEventSource } from "@microsoft/fetch-event-source";
 
-  import { apiKeyStorage, chatsStorage, addMessage, clearMessages } from "./Storage.svelte";
+  import {
+    apiKeyStorage,
+    chatsStorage,
+    addMessage,
+    clearMessages,
+  } from "./Storage.svelte";
   import type { Request, Response, Message, Settings } from "./Types.svelte";
   import Code from "./Code.svelte";
 
+  import copy from "copy-to-clipboard";
+
   import { afterUpdate, onMount } from "svelte";
   import SvelteMarkdown from "svelte-markdown";
 
@@ -95,6 +102,7 @@
     // Scroll to the bottom of the page after any updates to the messages array
     window.scrollTo(0, document.body.scrollHeight);
     input.focus();
+    copyFunction()
   });
 
   // Marked options
@@ -141,9 +149,14 @@
 
         // Provide the settings by mapping the settingsMap to key/value pairs
         ...settingsMap.reduce((acc, setting) => {
-          const value = (settings.querySelector(`#settings-${setting.key}`) as HTMLInputElement).value;
+          const value = (
+            settings.querySelector(
+              `#settings-${setting.key}`
+            ) as HTMLInputElement
+          ).value;
           if (value) {
-            acc[setting.key] = setting.type === "number" ? parseFloat(value) : value;
+            acc[setting.key] =
+              setting.type === "number" ? parseFloat(value) : value;
           }
           return acc;
         }, {}),
@@ -195,7 +208,9 @@
         addMessage(chatId, choice.message);
         // Use TTS to read the response, if query was recorded
         if (recorded && "SpeechSynthesisUtterance" in window) {
-          const utterance = new SpeechSynthesisUtterance(choice.message.content);
+          const utterance = new SpeechSynthesisUtterance(
+            choice.message.content
+          );
           speechSynthesis.speak(utterance);
         }
       });
@@ -228,7 +243,9 @@
 
   const deleteChat = () => {
     if (confirm("Are you sure you want to delete this chat?")) {
-      chatsStorage.update((chats) => chats.filter((chat) => chat.id !== chatId));
+      chatsStorage.update((chats) =>
+        chats.filter((chat) => chat.id !== chatId)
+      );
       chatId = null;
     }
   };
@@ -243,7 +260,9 @@
 
   const clearSettings = () => {
     settingsMap.forEach((setting) => {
-      const input = settings.querySelector(`#settings-${setting.key}`) as HTMLInputElement;
+      const input = settings.querySelector(
+        `#settings-${setting.key}`
+      ) as HTMLInputElement;
       input.value = "";
     });
   };
@@ -257,6 +276,32 @@
       recognition?.start();
     }
   };
+
+  // copy code block
+  // reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
+  const copyFunction = () => {
+    const codeBlocks = document.querySelectorAll("pre");
+    const showCopyMessage = "Copy";
+    codeBlocks.forEach((block) => {
+      const copyPrompt = document.createElement("div");
+      copyPrompt.className = "copy-prompt";
+      const copyPromptText = document.createElement("button");
+      copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive");
+      copyPromptText.innerHTML = showCopyMessage;
+      copyPrompt.appendChild(copyPromptText);
+      block.appendChild(copyPrompt);
+      block
+        .querySelector(".copy-prompt > button")
+        .addEventListener("click", (evt) => {
+          copy(block.querySelector("code").textContent);
+          block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
+          setTimeout(() => {
+            block.querySelector(".copy-prompt > button").innerHTML =
+              showCopyMessage;
+          }, 1000);
+        });
+    });
+  }
 </script>
 
 <nav class="level chat-header">
@@ -269,7 +314,10 @@
           class="greyscale ml-2 is-hidden has-text-weight-bold editbutton"
           title="Rename chat"
           on:click|preventDefault={() => {
-            let newChatName = prompt("Enter a new name for this chat", chat.name);
+            let newChatName = prompt(
+              "Enter a new name for this chat",
+              chat.name
+            );
             if (newChatName) {
               chat.name = newChatName;
               chatsStorage.set($chatsStorage);
@@ -314,7 +362,9 @@
   {#if message.role === "user"}
     <article
       class="message is-info user-message"
-      class:has-text-right={message.content.split("\n").filter((line) => line.trim()).length === 1}
+      class:has-text-right={message.content
+        .split("\n")
+        .filter((line) => line.trim()).length === 1}
     >
       <div class="message-body content">
         <a
@@ -360,9 +410,13 @@
         />
         {#if message.usage}
           <p class="is-size-7">
-            This message was generated using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>
+            This message was generated using <span class="has-text-weight-bold"
+              >{message.usage.total_tokens}</span
+            >
             tokens ~=
-            <span class="has-text-weight-bold">${(message.usage.total_tokens * token_price).toFixed(6)}</span>
+            <span class="has-text-weight-bold"
+              >${(message.usage.total_tokens * token_price).toFixed(6)}</span
+            >
           </p>
         {/if}
       </div>
@@ -374,7 +428,10 @@
   <progress class="progress is-small is-dark" max="100" />
 {/if}
 
-<form class="field has-addons has-addons-right" on:submit|preventDefault={() => submitForm()}>
+<form
+  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"
@@ -396,12 +453,17 @@
     />
   </p>
   <p class="control" class:is-hidden={!recognition}>
-    <button class="button" class:is-pulse={recording} on:click|preventDefault={recordToggle}
+    <button
+      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}><span class="greyscale">⚙️</span></button>
+    <button class="button" on:click|preventDefault={showSettings}
+      ><span class="greyscale">⚙️</span></button
+    >
   </p>
   <p class="control">
     <button class="button is-info" type="submit">Send</button>
@@ -427,7 +489,9 @@
       {#each settingsMap as setting}
         <div class="field is-horizontal">
           <div class="field-label is-normal">
-            <label class="label" for="settings-temperature">{setting.name}</label>
+            <label class="label" for="settings-temperature"
+              >{setting.name}</label
+            >
           </div>
           <div class="field-body">
             <div class="field">
@@ -444,7 +508,9 @@
     </section>
 
     <footer class="modal-card-foot">
-      <button class="button is-info" on:click={closeSettings}>Close settings</button>
+      <button class="button is-info" on:click={closeSettings}
+        >Close settings</button
+      >
       <button class="button" on:click={clearSettings}>Clear settings</button>
     </footer>
   </div>

From 87a8fdc1d4bd5d4fddd8cfb420e6034ecda61dbe Mon Sep 17 00:00:00 2001
From: littlemoonstones <littlemoonstones@gmail.com>
Date: Sun, 12 Mar 2023 14:22:43 +0800
Subject: [PATCH 2/8] chat room is scrollable

---
 src/app.scss        |  12 +++
 src/lib/Chat.svelte | 235 +++++++++++++++++++++++---------------------
 2 files changed, 136 insertions(+), 111 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 805bfc8..663fdf2 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -94,4 +94,16 @@ div.copy-prompt {
   position: absolute;
   top: 5px;
   right: 5px;
+}
+
+.message-container{
+  display: flex;
+  flex-direction: column;
+  height: 720px;
+}
+.message-list{
+  // max-height: 100%;
+  overflow-y: auto;
+  flex: 1;
+  margin-bottom: 10px;
 }
\ No newline at end of file
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index f9c7925..2023221 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -102,7 +102,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
@@ -286,7 +286,13 @@
       const copyPrompt = document.createElement("div");
       copyPrompt.className = "copy-prompt";
       const copyPromptText = document.createElement("button");
-      copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive");
+      copyPromptText.classList.add(
+        "button",
+        "is-light",
+        "is-outlined",
+        "is-small",
+        "is-responsive"
+      );
       copyPromptText.innerHTML = showCopyMessage;
       copyPrompt.appendChild(copyPromptText);
       block.appendChild(copyPrompt);
@@ -301,7 +307,7 @@
           }, 1000);
         });
     });
-  }
+  };
 </script>
 
 <nav class="level chat-header">
@@ -357,118 +363,125 @@
     </p>
   </div>
 </nav>
-
-{#each chat.messages as message}
-  {#if message.role === "user"}
-    <article
-      class="message is-info user-message"
-      class:has-text-right={message.content
-        .split("\n")
-        .filter((line) => line.trim()).length === 1}
-    >
-      <div class="message-body content">
-        <a
-          href={"#"}
-          class="greyscale is-pulled-right ml-2 is-hidden editbutton"
-          on:click={() => {
-            input.value = message.content;
-            input.focus();
-          }}
+<div class="is-fullhd message-container">
+  <div class="message-list">
+    {#each chat.messages as message}
+      {#if message.role === "user"}
+        <article
+          class="message is-info user-message"
+          class:has-text-right={message.content
+            .split("\n")
+            .filter((line) => line.trim()).length === 1}
         >
-          ✏️
-        </a>
-        <SvelteMarkdown
-          source={message.content}
-          options={markedownOptions}
-          renderers={{
-            code: Code,
-          }}
-        />
-      </div>
-    </article>
-  {:else if message.role === "system" || message.role === "error"}
-    <article class="message is-danger">
-      <div class="message-body content">
-        <SvelteMarkdown
-          source={message.content}
-          options={markedownOptions}
-          renderers={{
-            code: Code,
-          }}
-        />
-      </div>
-    </article>
-  {:else}
-    <article class="message is-success">
-      <div class="message-body content">
-        <SvelteMarkdown
-          source={message.content}
-          options={markedownOptions}
-          renderers={{
-            code: Code,
-          }}
-        />
-        {#if message.usage}
-          <p class="is-size-7">
-            This message was generated using <span class="has-text-weight-bold"
-              >{message.usage.total_tokens}</span
+          <div class="message-body content">
+            <a
+              href={"#"}
+              class="greyscale is-pulled-right ml-2 is-hidden editbutton"
+              on:click={() => {
+                input.value = message.content;
+                input.focus();
+              }}
             >
-            tokens ~=
-            <span class="has-text-weight-bold"
-              >${(message.usage.total_tokens * token_price).toFixed(6)}</span
-            >
-          </p>
-        {/if}
-      </div>
-    </article>
-  {/if}
-{/each}
+              ✏️
+            </a>
+            <SvelteMarkdown
+              source={message.content}
+              options={markedownOptions}
+              renderers={{
+                code: Code,
+              }}
+            />
+          </div>
+        </article>
+      {:else if message.role === "system" || message.role === "error"}
+        <article class="message is-danger">
+          <div class="message-body content">
+            <SvelteMarkdown
+              source={message.content}
+              options={markedownOptions}
+              renderers={{
+                code: Code,
+              }}
+            />
+          </div>
+        </article>
+      {:else}
+        <article class="message is-success">
+          <div class="message-body content">
+            <SvelteMarkdown
+              source={message.content}
+              options={markedownOptions}
+              renderers={{
+                code: Code,
+              }}
+            />
+            {#if message.usage}
+              <p class="is-size-7">
+                This message was generated using <span
+                  class="has-text-weight-bold"
+                  >{message.usage.total_tokens}</span
+                >
+                tokens ~=
+                <span class="has-text-weight-bold"
+                  >${(message.usage.total_tokens * token_price).toFixed(
+                    6
+                  )}</span
+                >
+              </p>
+            {/if}
+          </div>
+        </article>
+      {/if}
+    {/each}
+  </div>
+  <div class="message-send">
+    {#if updating}
+      <progress class="progress is-small is-dark" max="100" />
+    {/if}
 
-{#if updating}
-  <progress class="progress is-small is-dark" max="100" />
-{/if}
-
-<form
-  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"
-      placeholder="Type your message here..."
-      rows="1"
-      on:keydown={(e) => {
-        // Only send if Enter is pressed, not Shift+Enter
-        if (e.key === "Enter" && !e.shiftKey) {
-          submitForm();
-          e.preventDefault();
-        }
-      }}
-      on:input={(e) => {
-        // Resize the textarea to fit the content - auto is important to reset the height after deleting content
-        input.style.height = "auto";
-        input.style.height = input.scrollHeight + "px";
-      }}
-      bind:this={input}
-    />
-  </p>
-  <p class="control" class:is-hidden={!recognition}>
-    <button
-      class="button"
-      class:is-pulse={recording}
-      on:click|preventDefault={recordToggle}
-      ><span class="greyscale">🎤</span></button
+    <form
+      class="field has-addons has-addons-right"
+      on:submit|preventDefault={() => submitForm()}
     >
-  </p>
-  <p class="control">
-    <button class="button" on:click|preventDefault={showSettings}
-      ><span class="greyscale">⚙️</span></button
-    >
-  </p>
-  <p class="control">
-    <button class="button is-info" type="submit">Send</button>
-  </p>
-</form>
+      <p class="control is-expanded">
+        <textarea
+          class="input is-info is-focused chat-input"
+          placeholder="Type your message here..."
+          rows="1"
+          on:keydown={(e) => {
+            // Only send if Enter is pressed, not Shift+Enter
+            if (e.key === "Enter" && !e.shiftKey) {
+              submitForm();
+              e.preventDefault();
+            }
+          }}
+          on:input={(e) => {
+            // Resize the textarea to fit the content - auto is important to reset the height after deleting content
+            input.style.height = "auto";
+            input.style.height = input.scrollHeight + "px";
+          }}
+          bind:this={input}
+        />
+      </p>
+      <p class="control" class:is-hidden={!recognition}>
+        <button
+          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}
+          ><span class="greyscale">⚙️</span></button
+        >
+      </p>
+      <p class="control">
+        <button class="button is-info" type="submit">Send</button>
+      </p>
+    </form>
+  </div>
+</div>
 
 <svelte:window
   on:keydown={(event) => {

From 58336d244c1e2c9625eca47b1f681bf5c7209573 Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Sun, 12 Mar 2023 08:10:48 +0100
Subject: [PATCH 3/8] Make `copy-to-clipboard` a dev dependency

---
 package-lock.json | 8 ++++----
 package.json      | 4 +---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fe5c3b9..957f8dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,9 +7,6 @@
     "": {
       "name": "chatgpt-web",
       "version": "0.0.0",
-      "dependencies": {
-        "copy-to-clipboard": "^3.3.3"
-      },
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
         "@microsoft/fetch-event-source": "^2.0.1",
@@ -18,6 +15,7 @@
         "@types/marked": "^4.0.8",
         "bulma": "^0.9.4",
         "bulma-prefers-dark": "^0.1.0-beta.1",
+        "copy-to-clipboard": "^3.3.3",
         "postcss": "^8.4.21",
         "sass": "^1.58.3",
         "svelte": "^3.55.1",
@@ -634,6 +632,7 @@
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
       "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dev": true,
       "dependencies": {
         "toggle-selection": "^1.0.6"
       }
@@ -1597,7 +1596,8 @@
     "node_modules/toggle-selection": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
-      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "dev": true
     },
     "node_modules/tslib": {
       "version": "2.5.0",
diff --git a/package.json b/package.json
index b88fae1..753baec 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@types/marked": "^4.0.8",
     "bulma": "^0.9.4",
     "bulma-prefers-dark": "^0.1.0-beta.1",
+    "copy-to-clipboard": "^3.3.3",
     "postcss": "^8.4.21",
     "sass": "^1.58.3",
     "svelte": "^3.55.1",
@@ -28,8 +29,5 @@
     "tslib": "^2.5.0",
     "typescript": "^4.9.3",
     "vite": "^4.1.0"
-  },
-  "dependencies": {
-    "copy-to-clipboard": "^3.3.3"
   }
 }

From b4ab40a86956a3afe12513dc7f4e538114048d9d Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Sun, 12 Mar 2023 08:10:58 +0100
Subject: [PATCH 4/8] Revert scrolling, fix linting

---
 src/app.scss        |  8 ++---
 src/lib/Chat.svelte | 88 +++++++++++++--------------------------------
 2 files changed, 28 insertions(+), 68 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 805bfc8..5c8a28f 100644
--- a/src/app.scss
+++ b/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;
-  right: 5px;
+  top: .5rem;
+  right: .5rem;
 }
\ No newline at end of file
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index f9c7925..9b29187 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -1,12 +1,7 @@
 <script lang="ts">
   //import { fetchEventSource } from "@microsoft/fetch-event-source";
 
-  import {
-    apiKeyStorage,
-    chatsStorage,
-    addMessage,
-    clearMessages,
-  } from "./Storage.svelte";
+  import { 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 = (
-            settings.querySelector(
-              `#settings-${setting.key}`
-            ) as HTMLInputElement
-          ).value;
+          const value = (settings.querySelector(`#settings-${setting.key}`) as HTMLInputElement).value;
           if (value) {
-            acc[setting.key] =
-              setting.type === "number" ? parseFloat(value) : value;
+            acc[setting.key] = 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(
-            choice.message.content
-          );
+          const utterance = new SpeechSynthesisUtterance(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) =>
-        chats.filter((chat) => chat.id !== chatId)
-      );
+      chatsStorage.update((chats) => chats.filter((chat) => chat.id !== chatId));
       chatId = null;
     }
   };
@@ -260,9 +246,7 @@
 
   const clearSettings = () => {
     settingsMap.forEach((setting) => {
-      const input = settings.querySelector(
-        `#settings-${setting.key}`
-      ) as HTMLInputElement;
+      const input = settings.querySelector(`#settings-${setting.key}`) as HTMLInputElement;
       input.value = "";
     });
   };
@@ -290,18 +274,15 @@
       copyPromptText.innerHTML = showCopyMessage;
       copyPrompt.appendChild(copyPromptText);
       block.appendChild(copyPrompt);
-      block
-        .querySelector(".copy-prompt > button")
-        .addEventListener("click", (evt) => {
-          copy(block.querySelector("code").textContent);
-          block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
-          setTimeout(() => {
-            block.querySelector(".copy-prompt > button").innerHTML =
-              showCopyMessage;
-          }, 1000);
-        });
+      block.querySelector(".copy-prompt > button").addEventListener("click", (evt) => {
+        copy(block.querySelector("code").textContent);
+        block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
+        setTimeout(() => {
+          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(
-              "Enter a new name for this chat",
-              chat.name
-            );
+            let newChatName = prompt("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
-        .split("\n")
-        .filter((line) => line.trim()).length === 1}
+      class:has-text-right={message.content.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"
-              >{message.usage.total_tokens}</span
-            >
+            This message was generated using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>
             tokens ~=
-            <span class="has-text-weight-bold"
-              >${(message.usage.total_tokens * token_price).toFixed(6)}</span
-            >
+            <span class="has-text-weight-bold">${(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
-  class="field has-addons has-addons-right"
-  on:submit|preventDefault={() => submitForm()}
->
+<form 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
-      class="button"
-      class:is-pulse={recording}
-      on:click|preventDefault={recordToggle}
+    <button 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}
-      ><span class="greyscale">⚙️</span></button
-    >
+    <button class="button" on:click|preventDefault={showSettings}><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"
-              >{setting.name}</label
-            >
+            <label class="label" for="settings-temperature">{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}
-        >Close settings</button
-      >
+      <button class="button is-info" on:click={closeSettings}>Close settings</button>
       <button class="button" on:click={clearSettings}>Clear settings</button>
     </footer>
   </div>

From 9b68ec3f4558122ac0ed5202c75efcbf48624104 Mon Sep 17 00:00:00 2001
From: littlemoonstones <littlemoonstones@gmail.com>
Date: Sun, 12 Mar 2023 16:22:43 +0800
Subject: [PATCH 5/8] move  to Code.svelte

---
 src/lib/Chat.svelte | 26 +-------------------------
 src/lib/Code.svelte | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 0ddb1e4..40dde6e 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -5,7 +5,6 @@
   import type { Request, Response, Message, Settings } from "./Types.svelte";
   import Code from "./Code.svelte";
 
-  import copy from "copy-to-clipboard";
 
   import { afterUpdate, onMount } from "svelte";
   import SvelteMarkdown from "svelte-markdown";
@@ -97,8 +96,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
@@ -262,28 +260,6 @@
     }
   };
 
-  // copy code block
-  // reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
-  const copyFunction = () => {
-    const codeBlocks = document.querySelectorAll("pre");
-    const showCopyMessage = "Copy";
-    codeBlocks.forEach((block) => {
-      const copyPrompt = document.createElement("div");
-      copyPrompt.className = "copy-prompt";
-      const copyPromptText = document.createElement("button");
-      copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive");
-      copyPromptText.innerHTML = showCopyMessage;
-      copyPrompt.appendChild(copyPromptText);
-      block.appendChild(copyPrompt);
-      block.querySelector(".copy-prompt > button").addEventListener("click", (evt) => {
-        copy(block.querySelector("code").textContent);
-        block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
-        setTimeout(() => {
-          block.querySelector(".copy-prompt > button").innerHTML = showCopyMessage;
-        }, 1000);
-      });
-    });
-  };
 </script>
 
 <nav class="level chat-header">
diff --git a/src/lib/Code.svelte b/src/lib/Code.svelte
index cddd000..1bab95d 100644
--- a/src/lib/Code.svelte
+++ b/src/lib/Code.svelte
@@ -7,6 +7,10 @@
   // Style depends on system theme
   const style = window.matchMedia("(prefers-color-scheme: dark)").matches ? githubDark : github;
 
+  // Copy function for the code block
+  import copy from "copy-to-clipboard";
+  import { afterUpdate } from "svelte";
+
   // Import all supported languages
   import {
     javascript,
@@ -68,6 +72,34 @@
     default:
       language = plaintext;
   }
+
+  // For copying code
+  // reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
+  const copyFunction = () => {
+    const codeBlocks = document.querySelectorAll("pre");
+    const showCopyMessage = "Copy";
+    codeBlocks.forEach((block) => {
+      const copyPrompt = document.createElement("div");
+      copyPrompt.className = "copy-prompt";
+      const copyPromptText = document.createElement("button");
+      copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive");
+      copyPromptText.innerHTML = showCopyMessage;
+      copyPrompt.appendChild(copyPromptText);
+      block.appendChild(copyPrompt);
+      block.querySelector(".copy-prompt > button").addEventListener("click", (evt) => {
+        copy(block.querySelector("code").textContent);
+        block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
+        setTimeout(() => {
+          block.querySelector(".copy-prompt > button").innerHTML = showCopyMessage;
+        }, 1000);
+      });
+    });
+  };
+
+  afterUpdate(() => {
+    copyFunction();
+  })
+
 </script>
 
 <svelte:head>

From 257cddd769250300a70b3fa6151d367bd6bbbccd Mon Sep 17 00:00:00 2001
From: littlemoonstones <littlemoonstones@gmail.com>
Date: Sun, 12 Mar 2023 17:07:43 +0800
Subject: [PATCH 6/8] make the copy function more svelte-like

---
 src/app.scss        | 11 --------
 src/lib/Code.svelte | 65 ++++++++++++++++++++++++++++-----------------
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 5c8a28f..6c06683 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -84,14 +84,3 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
 .modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released
   background-color: $background-dark;
 }
-
-/* for copy button */
-pre[data-language] {
-  position: relative;
-}
-div.copy-prompt {
-  padding: .5rem;
-  position: absolute;
-  top: .5rem;
-  right: .5rem;
-}
\ No newline at end of file
diff --git a/src/lib/Code.svelte b/src/lib/Code.svelte
index 1bab95d..f4e87b3 100644
--- a/src/lib/Code.svelte
+++ b/src/lib/Code.svelte
@@ -75,35 +75,50 @@
 
   // For copying code
   // reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
-  const copyFunction = () => {
-    const codeBlocks = document.querySelectorAll("pre");
-    const showCopyMessage = "Copy";
-    codeBlocks.forEach((block) => {
-      const copyPrompt = document.createElement("div");
-      copyPrompt.className = "copy-prompt";
-      const copyPromptText = document.createElement("button");
-      copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive");
-      copyPromptText.innerHTML = showCopyMessage;
-      copyPrompt.appendChild(copyPromptText);
-      block.appendChild(copyPrompt);
-      block.querySelector(".copy-prompt > button").addEventListener("click", (evt) => {
-        copy(block.querySelector("code").textContent);
-        block.querySelector(".copy-prompt > button").innerHTML = "Copied!";
-        setTimeout(() => {
-          block.querySelector(".copy-prompt > button").innerHTML = showCopyMessage;
-        }, 1000);
-      });
-    });
+  const copyFunction = (event) => {
+    // Get the button the user click
+    const clickedElement = event.target as HTMLElement;
+    
+    // Get the next element
+    const nextElement = clickedElement.nextElementSibling;
+    
+    // Modify the appearance of the button
+    const originalButtonContent = clickedElement.innerHTML
+    clickedElement.classList.add("is-success")
+    clickedElement.innerHTML = "Copied!"
+    
+    // Retrieve the code in the code block
+    let codeBlock = nextElement.querySelector("pre > code").innerHTML;
+    copy(codeBlock);
+    
+    // Restored the button after copying the text in 1 second.
+    setTimeout(() => {
+      clickedElement.innerHTML = originalButtonContent;
+      clickedElement.classList.remove("is-success")
+    }, 1000);
+
   };
-
-  afterUpdate(() => {
-    copyFunction();
-  })
-
 </script>
 
 <svelte:head>
   {@html style}
 </svelte:head>
 
-<Highlight code={text} {language} />
+<div class="code-block">
+  <button class="button is-light is-outlined is-small" on:click={copyFunction}>Copy</button>
+  <Highlight code={text} {language} />
+</div>
+
+<style>
+  /* for copy button */
+  .code-block{
+    position: relative;
+  }
+  .code-block > button{
+    padding: .5rem;
+    position: absolute;
+    top: .5rem;
+    right: .5rem;
+    z-index: 10;
+  }
+</style>

From 6da77ed2367e3c77a55bb7ac75ec3f63455d63bc Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Mon, 13 Mar 2023 09:13:13 +0100
Subject: [PATCH 7/8] Linting

---
 src/lib/Chat.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 40dde6e..0e1f2e1 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -5,7 +5,6 @@
   import type { Request, Response, Message, Settings } from "./Types.svelte";
   import Code from "./Code.svelte";
 
-
   import { afterUpdate, onMount } from "svelte";
   import SvelteMarkdown from "svelte-markdown";
 
@@ -96,7 +95,6 @@
     // Scroll to the bottom of the page after any updates to the messages array
     window.scrollTo(0, document.body.scrollHeight);
     input.focus();
-    
   });
 
   // Marked options
@@ -259,7 +257,6 @@
       recognition?.start();
     }
   };
-
 </script>
 
 <nav class="level chat-header">

From 6909b3afa78488d6ac6e90e360f2b8e1c1cc1ba4 Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Mon, 13 Mar 2023 09:13:32 +0100
Subject: [PATCH 8/8] Small fixes, make use of Bulma classes

---
 src/lib/Code.svelte | 43 ++++++++++++++++++-------------------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/lib/Code.svelte b/src/lib/Code.svelte
index f4e87b3..067be2b 100644
--- a/src/lib/Code.svelte
+++ b/src/lib/Code.svelte
@@ -9,7 +9,6 @@
 
   // Copy function for the code block
   import copy from "copy-to-clipboard";
-  import { afterUpdate } from "svelte";
 
   // Import all supported languages
   import {
@@ -73,30 +72,29 @@
       language = plaintext;
   }
 
-  // For copying code
-  // reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
+  // For copying code - reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
   const copyFunction = (event) => {
-    // Get the button the user click
-    const clickedElement = event.target as HTMLElement;
-    
+    // Get the button the user clicked on
+    const clickedElement = event.target as HTMLButtonElement;
+
     // Get the next element
     const nextElement = clickedElement.nextElementSibling;
-    
+
     // Modify the appearance of the button
-    const originalButtonContent = clickedElement.innerHTML
-    clickedElement.classList.add("is-success")
-    clickedElement.innerHTML = "Copied!"
-    
+    const originalButtonContent = clickedElement.innerHTML;
+    clickedElement.classList.add("is-success");
+    clickedElement.innerHTML = "Copied!";
+
     // Retrieve the code in the code block
-    let codeBlock = nextElement.querySelector("pre > code").innerHTML;
+    const codeBlock = (nextElement.querySelector("pre > code") as HTMLPreElement).innerText;
     copy(codeBlock);
-    
+
     // Restored the button after copying the text in 1 second.
     setTimeout(() => {
       clickedElement.innerHTML = originalButtonContent;
-      clickedElement.classList.remove("is-success")
+      clickedElement.classList.remove("is-success");
+      clickedElement.blur();
     }, 1000);
-
   };
 </script>
 
@@ -104,21 +102,16 @@
   {@html style}
 </svelte:head>
 
-<div class="code-block">
-  <button class="button is-light is-outlined is-small" on:click={copyFunction}>Copy</button>
+<div class="code-block is-relative">
+  <button class="button is-light is-outlined is-small p-2" on:click={copyFunction}>Copy</button>
   <Highlight code={text} {language} />
 </div>
 
 <style>
   /* for copy button */
-  .code-block{
-    position: relative;
-  }
-  .code-block > button{
-    padding: .5rem;
+  .code-block > button {
     position: absolute;
-    top: .5rem;
-    right: .5rem;
-    z-index: 10;
+    top: 0.5rem;
+    right: 0.5rem;
   }
 </style>