feat: implement readonly view for pdf files (#1849)

Signed-off-by: Ryan Hopper-Lowe <[email protected]>

ui/user/src/lib/components/Editors.svelte

@@ -12,9 +12,12 @@
 	import Terminal from '$lib/components/terminal/Terminal.svelte';
 	import { term } from '$lib/stores';
 	import Tool from '$lib/components/tool/Tool.svelte';
+	import Pdf from './editor/Pdf.svelte';
 
 	let editorVisible = $derived(EditorService.isVisible());
 
+	let height = $state<number>();
+
 	function onFileChanged(name: string, contents: string) {
 		for (const item of EditorService.items) {
 			if (item.name === name) {
@@ -79,9 +82,11 @@
 		{/if}
 
 		{#each EditorService.items as file}
-			<div class:hidden={!file.selected} class="flex-1 overflow-auto">
+			<div class:hidden={!file.selected} class="flex-1 overflow-auto" bind:clientHeight={height}>
 				{#if file.name.toLowerCase().endsWith('.md')}
 					<Milkdown {file} {onFileChanged} {onInvoke} />
+				{:else if file.name.toLowerCase().endsWith('.pdf')}
+					<Pdf {file} {height} />
 				{:else if file.table}
 					<Table tableName={file.table} />
 				{:else if file.task}

ui/user/src/lib/components/editor/Pdf.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { EditorItem } from '$lib/stores/editor.svelte';
+
+	type Props = {
+		file: EditorItem;
+		height?: number | string;
+	};
+
+	const { file, height = '100%' }: Props = $props();
+
+	let blobUrl = $state<string>();
+
+	$effect(() => {
+		if (!file.blob) return;
+
+		const url = URL.createObjectURL(new Blob([file.blob], { type: 'application/pdf' }));
+		blobUrl = url;
+
+		return () => URL.revokeObjectURL(url);
+	});
+</script>
+
+<div>
+	{#if blobUrl}
+		<embed src={blobUrl} width="100%" {height} />
+	{/if}
+</div>