From 89160665415ee423057a3efb09c65d062f70d30e Mon Sep 17 00:00:00 2001
From: Nathan Fretz <nmfretz@gmail.com>
Date: Tue, 15 Aug 2023 15:42:26 -0700
Subject: [PATCH] add fallback for copying to clipboard over http (#1)

---
 ui/components/Chat/ChatMessage.tsx   | 31 +++++++++++++++++++++-------
 ui/components/Markdown/CodeBlock.tsx | 31 +++++++++++++++++++---------
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/ui/components/Chat/ChatMessage.tsx b/ui/components/Chat/ChatMessage.tsx
index dd04a21..0f3ef2e 100644
--- a/ui/components/Chat/ChatMessage.tsx
+++ b/ui/components/Chat/ChatMessage.tsx
@@ -102,15 +102,30 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
   };
 
   const copyOnClick = () => {
-    if (!navigator.clipboard) return;
-
-    navigator.clipboard.writeText(message.content).then(() => {
-      setMessageCopied(true);
-      setTimeout(() => {
-        setMessageCopied(false);
-      }, 2000);
-    });
+    // fallback to allow copying to clipboard over http
+    const copyToClipboardFallback = (text: string) => {
+      let textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "absolute";
+      textArea.style.opacity = "0";
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      textArea.remove();
+    };
+  
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(message.content);
+    } else {
+      copyToClipboardFallback(message.content);
+    }
+  
+    setMessageCopied(true);
+    setTimeout(() => {
+      setMessageCopied(false);
+    }, 2000);
   };
+  
 
   useEffect(() => {
     setMessageContent(message.content);
diff --git a/ui/components/Markdown/CodeBlock.tsx b/ui/components/Markdown/CodeBlock.tsx
index 1b53e8b..20dfabc 100644
--- a/ui/components/Markdown/CodeBlock.tsx
+++ b/ui/components/Markdown/CodeBlock.tsx
@@ -20,17 +20,28 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
   const copyToClipboard = () => {
-    if (!navigator.clipboard || !navigator.clipboard.writeText) {
-      return;
+    // fallback to allow copying to clipboard over http
+    const copyToClipboardFallback = (text: string) => {
+      let textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "absolute";
+      textArea.style.opacity = "0";
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      textArea.remove();
+    };
+  
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(value);
+    } else {
+      copyToClipboardFallback(value);
     }
-
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
-
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
-    });
+  
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
   };
   const downloadAsFile = () => {
     const fileExtension = programmingLanguages[language] || '.file';