enh: artifacts fullscreen

src/lib/components/chat/Artifacts.svelte

@@ -4,9 +4,11 @@
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
-	import { showArtifacts, showControls } from '$lib/stores';
+	import { chatId, showArtifacts, showControls } from '$lib/stores';
 	import XMark from '../icons/XMark.svelte';
 	import { copyToClipboard, createMessagesList } from '$lib/utils';
+	import ArrowsPointingOut from '../icons/ArrowsPointingOut.svelte';
+	import Tooltip from '../common/Tooltip.svelte';
 
 	export let overlay = false;
 	export let history;
@@ -146,6 +148,16 @@
 		});
 	};
 
+	const showFullScreen = () => {
+		if (iframeElement.requestFullscreen) {
+			iframeElement.requestFullscreen();
+		} else if (iframeElement.webkitRequestFullscreen) {
+			iframeElement.webkitRequestFullscreen();
+		} else if (iframeElement.msRequestFullscreen) {
+			iframeElement.msRequestFullscreen();
+		}
+	};
+
 	onMount(() => {});
 </script>
 
@@ -241,7 +253,7 @@
 				</div>
 			</div>
 
-			<div class="flex items-center">
+			<div class="flex items-center gap-1">
 				<button
 					class="copy-code-button bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5"
 					on:click={() => {
@@ -253,6 +265,15 @@
 						}, 2000);
 					}}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
 				>
+
+				<Tooltip content={$i18n.t('Open in full screen')}>
+					<button
+						class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5"
+						on:click={showFullScreen}
+					>
+						<ArrowsPointingOut className="size-3.5" />
+					</button>
+				</Tooltip>
 			</div>
 		</div>
 	{/if}