Add a message wide copy button (#453)

* add-copytoclipboardbtn for the all message

* fix padding

* fix padding

* Fix styling

* Move before like and dislike button

* position and spacing

* mobile fix

---------

Co-authored-by: Victor Mustar <[email protected]>

src/lib/components/CopyToClipBoardBtn.svelte

@@ -41,6 +41,7 @@
 	"
 	title={"Copy to clipboard"}
 	type="button"
+	on:click
 	on:click={handleClick}
 >
 	<span class="relative">

src/lib/components/chat/ChatMessage.svelte

@@ -7,6 +7,7 @@
 	import { page } from "$app/stores";
 
 	import CodeBlock from "../CodeBlock.svelte";
+	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
 	import IconLoading from "../icons/IconLoading.svelte";
 	import CarbonRotate360 from "~icons/carbon/rotate-360";
 	import CarbonDownload from "~icons/carbon/download";
@@ -58,6 +59,7 @@
 	let contentEl: HTMLElement;
 	let loadingEl: IconLoading;
 	let pendingTimeout: ReturnType<typeof setTimeout>;
+	let isCopied = false;
 
 	const renderer = new marked.Renderer();
 	// For code blocks with simple backticks
@@ -121,6 +123,12 @@
 	$: webSearchSources =
 		searchUpdates &&
 		searchUpdates?.filter(({ messageType }) => messageType === "sources")?.[0]?.sources;
+
+	$: if (isCopied) {
+		setTimeout(() => {
+			isCopied = false;
+		}, 1000);
+	}
 </script>
 
 {#if message.from === "assistant"}
@@ -186,7 +194,7 @@
 			<div
 				class="absolute bottom-1 right-0 flex max-md:transition-all md:bottom-0 md:group-hover:visible md:group-hover:opacity-100
 					{message.score ? 'visible opacity-100' : 'invisible max-md:-translate-y-4 max-md:opacity-0'}
-					{isTapped ? 'max-md:visible max-md:translate-y-0 max-md:opacity-100' : ''}
+					{isTapped || isCopied ? 'max-md:visible max-md:translate-y-0 max-md:opacity-100' : ''}
 				"
 			>
 				<button
@@ -212,6 +220,13 @@
 				>
 					<CarbonThumbsDown class="h-[1.14em] w-[1.14em]" />
 				</button>
+				<CopyToClipBoardBtn
+					on:click={() => {
+						isCopied = true;
+					}}
+					classNames="ml-1.5 !rounded-sm !p-1 !text-sm !text-gray-400 focus:!ring-0 hover:!text-gray-500 dark:!text-gray-400 dark:hover:!text-gray-300 !border-none !shadow-none"
+					value={message.content}
+				/>
 			</div>
 		{/if}
 	</div>