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}

src/lib/components/icons/ArrowsPointingOut.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+	/>
+</svg>