From 63d297756af114813e0182dca5997295093f2a31 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 11 Oct 2024 00:10:00 -0700
Subject: [PATCH] enh: mermaid copy content button

---
 src/lib/components/chat/Artifacts.svelte      |  2 +-
 .../components/chat/Messages/CodeBlock.svelte |  1 +
 src/lib/components/common/SVGPanZoom.svelte   | 28 +++++++++++++++++--
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/Artifacts.svelte b/src/lib/components/chat/Artifacts.svelte
index d07550ed8..9bb5342e7 100644
--- a/src/lib/components/chat/Artifacts.svelte
+++ b/src/lib/components/chat/Artifacts.svelte
@@ -191,7 +191,7 @@
 					showArtifacts.set(false);
 				}}
 			>
-				<ArrowLeft className="size-3.5" />
+				<ArrowLeft className="size-3.5  text-gray-900 dark:text-white" />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index a714718f3..ef17c493a 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -302,6 +302,7 @@ __builtins__.input = input`);
 				<SvgPanZoom
 					className=" border border-gray-50 dark:border-gray-850 rounded-lg max-h-fit overflow-hidden"
 					svg={mermaidHtml}
+					content={_token.text}
 				/>
 			{:else}
 				<pre class="mermaid">{code}</pre>
diff --git a/src/lib/components/common/SVGPanZoom.svelte b/src/lib/components/common/SVGPanZoom.svelte
index 549fd2500..e576ffb06 100644
--- a/src/lib/components/common/SVGPanZoom.svelte
+++ b/src/lib/components/common/SVGPanZoom.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
 	import panzoom from 'panzoom';
 
 	import DOMPurify from 'dompurify';
+	import DocumentDuplicate from '../icons/DocumentDuplicate.svelte';
+	import { copyToClipboard } from '$lib/utils';
+	import { toast } from 'svelte-sonner';
+	import Tooltip from './Tooltip.svelte';
+	import Clipboard from '../icons/Clipboard.svelte';
 
 	export let className = '';
 	export let svg = '';
+	export let content = '';
 
 	let instance;
 
@@ -22,8 +30,24 @@
 	}
 </script>
 
-<div bind:this={sceneParentElement} class={className}>
+<div bind:this={sceneParentElement} class="relative {className}">
 	<div bind:this={sceneElement} class="flex h-full max-h-full justify-center items-center">
 		{@html svg}
 	</div>
+
+	{#if content}
+		<div class=" absolute top-1 right-1">
+			<Tooltip content={$i18n.t('Copy to clipboard')}>
+				<button
+					class="p-1.5 rounded-lg border border-gray-100 dark:border-none dark:bg-gray-850 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+					on:click={() => {
+						copyToClipboard(content);
+						toast.success($i18n.t('Copied to clipboard'));
+					}}
+				>
+					<Clipboard className=" size-4" strokeWidth="1.5" />
+				</button>
+			</Tooltip>
+		</div>
+	{/if}
 </div>