gradio

1
<script lang="ts">
2
	import { onDestroy } from "svelte";
3
	import { Copy, Check } from "@gradio/icons";
4

5
	let copied = false;
6
	export let value: string;
7
	let timer: NodeJS.Timeout;
8

9
	function copy_feedback(): void {
10
		copied = true;
11
		if (timer) clearTimeout(timer);
12
		timer = setTimeout(() => {
13
			copied = false;
14
		}, 2000);
15
	}
16

17
	async function handle_copy(): Promise<void> {
18
		if ("clipboard" in navigator) {
19
			await navigator.clipboard.writeText(value);
20
			copy_feedback();
21
		} else {
22
			const textArea = document.createElement("textarea");
23
			textArea.value = value;
24

25
			textArea.style.position = "absolute";
26
			textArea.style.left = "-999999px";
27

28
			document.body.prepend(textArea);
29
			textArea.select();
30

31
			try {
32
				document.execCommand("copy");
33
				copy_feedback();
34
			} catch (error) {
35
				console.error(error);
36
			} finally {
37
				textArea.remove();
38
			}
39
		}
40
	}
41

42
	onDestroy(() => {
43
		if (timer) clearTimeout(timer);
44
	});
45
</script>
46

47
<button
48
	on:click={handle_copy}
49
	class="action"
50
	title="copy"
51
	aria-label={copied ? "Copied message" : "Copy message"}
52
>
53
	{#if !copied}
54
		<Copy />
55
	{/if}
56
	{#if copied}
57
		<Check />
58
	{/if}
59
</button>
60

61
<style>
62
	button {
63
		position: relative;
64
		top: 0;
65
		right: 0;
66
		cursor: pointer;
67
		color: var(--body-text-color-subdued);
68
		margin-right: 5px;
69
	}
70

71
	button:hover {
72
		color: var(--body-text-color);
73
	}
74

75
	.action {
76
		width: 15px;
77
		height: 14px;
78
	}
79
</style>
80