add fallback for copying to clipboard over http (#1)

ui/components/Chat/ChatMessage.tsx

@@ -102,16 +102,31 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex, onEdit }) =
   };
 
   const copyOnClick = () => {
-    if (!navigator.clipboard) 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();
+    };
   
-    navigator.clipboard.writeText(message.content).then(() => {
+    if (navigator.clipboard && window.isSecureContext) {
-      setMessageCopied(true);
+      navigator.clipboard.writeText(message.content);
-      setTimeout(() => {
+    } else {
-        setMessageCopied(false);
+      copyToClipboardFallback(message.content);
-      }, 2000);
+    }
-    });
+  
+    setMessageCopied(true);
+    setTimeout(() => {
+      setMessageCopied(false);
+    }, 2000);
   };
   
+
   useEffect(() => {
     setMessageContent(message.content);
   }, [message.content]);

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) {
+    // fallback to allow copying to clipboard over http
-      return;
+    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);
-      setIsCopied(true);
+    setTimeout(() => {
-
+      setIsCopied(false);
-      setTimeout(() => {
+    }, 2000);
-        setIsCopied(false);
-      }, 2000);
-    });
   };
   const downloadAsFile = () => {
     const fileExtension = programmingLanguages[language] || '.file';