feat: preview html

src/lib/components/chat/Messages/CodeBlock.svelte

@@ -17,6 +17,7 @@
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import ChevronUpDown from '$lib/components/icons/ChevronUpDown.svelte';
 	import CommandLine from '$lib/components/icons/CommandLine.svelte';
+	import Cube from '$lib/components/icons/Cube.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -24,9 +25,11 @@
 
 	export let onSave = (e) => {};
 	export let onCode = (e) => {};
+	export let onPreview = (e) => {};
 
 	export let save = false;
 	export let run = true;
+	export let preview = false;
 	export let collapsed = false;
 
 	export let token;
@@ -88,6 +91,10 @@
 		}, 1000);
 	};
 
+	const previewCode = () => {
+		onPreview(code);
+	};
+
 	const checkPythonCode = (str) => {
 		// Check if the string contains typical Python syntax characters
 		const pythonSyntax = [
@@ -430,7 +437,7 @@
 						class="flex gap-1 items-center bg-none border-none 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={collapseCodeBlock}
 					>
-						<div>
+						<div class=" -translate-y-[0.5px]">
 							<ChevronUpDown className="size-3" />
 						</div>
 
@@ -439,6 +446,21 @@
 						</div>
 					</button>
 
+					{#if preview && ['html', 'svg'].includes(lang)}
+						<button
+							class="flex gap-1 items-center run-code-button bg-none border-none 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={previewCode}
+						>
+							<div class=" -translate-y-[0.5px]">
+								<Cube className="size-3" />
+							</div>
+
+							<div>
+								{$i18n.t('Preview')}
+							</div>
+						</button>
+					{/if}
+
 					{#if ($config?.features?.enable_code_execution ?? true) && (lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code)))}
 						{#if executing}
 							<div class="run-code-button bg-none border-none p-1 cursor-not-allowed">
@@ -453,7 +475,7 @@
 									executePython(code);
 								}}
 							>
-								<div>
+								<div class=" -translate-y-[0.5px]">
 									<CommandLine className="size-3" />
 								</div>