File size: 1,942 Bytes
0bd62e5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<script lang="ts">
import { onDestroy } from "svelte";
import { Copy, Check } from "@gradio/icons";
import type { NormalisedMessage } from "../types";
let copied = false;
export let value: NormalisedMessage[] | null;
let timer: NodeJS.Timeout;
function copy_feedback(): void {
copied = true;
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
copied = false;
}, 1000);
}
const copy_conversation = (): void => {
if (value) {
const conversation_value = value
.map((message) => {
if (message.type === "text") {
return `${message.role}: ${message.content}`;
}
return `${message.role}: ${message.content.value.url}`;
})
.join("\n\n");
navigator.clipboard.writeText(conversation_value).catch((err) => {
console.error("Failed to copy conversation: ", err);
});
}
};
async function handle_copy(): Promise<void> {
if ("clipboard" in navigator) {
copy_conversation();
copy_feedback();
}
}
onDestroy(() => {
if (timer) clearTimeout(timer);
});
</script>
<button
on:click={handle_copy}
title="Copy conversation"
class={copied ? "copied" : "copy-text"}
aria-label={copied ? "Copied conversation" : "Copy conversation"}
>
{#if copied}
<Check />
{:else}
<Copy />
{/if}
</button>
<style>
button {
display: flex;
position: absolute;
top: var(--block-label-margin);
right: var(--block-label-margin);
align-items: center;
box-shadow: var(--shadow-drop);
border: 1px solid var(--border-color-primary);
border-top: none;
border-right: none;
border-radius: var(--block-label-right-radius);
background: var(--block-label-background-fill);
padding: var(--spacing-sm);
width: var(--size-6);
height: var(--size-6);
overflow: hidden;
color: var(--block-label-text-color);
}
button:hover {
color: var(--body-text-color);
}
</style>
|