fix copy button invalid & copy button (invisible) duplication bug in chatbot

CHANGELOG.md

@@ -6,7 +6,7 @@ No changes to highlight.
 
 ## Bug Fixes:
 
-No changes to highlight.
+- Fixed Copy Button bugs in the Chatbot component (Copy Button duplication & Copy Button ineffectiveness via non-localhost http access) by [@binary-husky](https://github.com/binary-husky) in [PR 4350](https://github.com/gradio-app/gradio/pull/4350). 
 
 ## Other Changes:
 

js/chatbot/src/ChatBot.svelte

@@ -78,22 +78,35 @@
 		}
 		div.querySelectorAll("pre > code").forEach((n) => {
 			let code_node = n as HTMLElement;
-			const copy_div = document.createElement("div");
-			new Copy({
-				target: copy_div,
-				props: {
-					value: code_node.innerText.trimEnd()
+			// check whether copy button is already in there
+			let copy_div_exist = false;
+			if (code_node.parentElement) {
+				let buttonElement = code_node.parentElement.querySelector("button");
+				if (buttonElement) {
+					// button element is already inside code_node
+					copy_div_exist = true;
 				}
-			});
-			let node = n.parentElement as HTMLElement;
-			copy_div.style.position = "absolute";
-			copy_div.style.right = "0";
-			copy_div.style.top = "0";
-			copy_div.style.zIndex = "1";
-			copy_div.style.padding = "var(--spacing-md)";
-			copy_div.style.borderBottomLeftRadius = "var(--radius-sm)";
-			node.style.position = "relative";
-			node.appendChild(copy_div);
+			}
+			if (copy_div_exist) {
+				return;
+			} else {
+				const copy_div = document.createElement("div");
+				new Copy({
+					target: copy_div,
+					props: {
+						value: code_node.innerText.trimEnd()
+					}
+				});
+				let node = n.parentElement as HTMLElement;
+				copy_div.style.position = "absolute";
+				copy_div.style.right = "0";
+				copy_div.style.top = "0";
+				copy_div.style.zIndex = "1";
+				copy_div.style.padding = "var(--spacing-md)";
+				copy_div.style.borderBottomLeftRadius = "var(--radius-sm)";
+				node.style.position = "relative";
+				node.appendChild(copy_div);
+			}
 		});
 
 		render_math_in_element(div, {

js/chatbot/src/Copy.svelte

@@ -16,9 +16,30 @@
 	}
 
 	async function handle_copy() {
+		// Navigator clipboard api needs a secure context (https)
 		if ("clipboard" in navigator) {
 			await navigator.clipboard.writeText(value);
 			copy_feedback();
+		} else {
+			// Use the 'out of viewport hidden text area' trick
+			const textArea = document.createElement("textarea");
+			textArea.value = value;
+
+			// Move textarea out of the viewport so it's not visible
+			textArea.style.position = "absolute";
+			textArea.style.left = "-999999px";
+
+			document.body.prepend(textArea);
+			textArea.select();
+
+			try {
+				document.execCommand("copy");
+				copy_feedback();
+			} catch (error) {
+				console.error(error);
+			} finally {
+				textArea.remove();
+			}
 		}
 	}