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] 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>