feat: preview html

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

@@ -1,10 +1,17 @@
 <script>
-	import { onDestroy, onMount, tick, getContext, createEventDispatcher } from 'svelte';
+	import { onDestroy, onMount, tick, getContext } from 'svelte';
 	const i18n = getContext('i18n');
-	const dispatch = createEventDispatcher();
 
 	import Markdown from './Markdown.svelte';
-	import { chatId, mobile, settings, showArtifacts, showControls, showOverview } from '$lib/stores';
+	import {
+		artifactCode,
+		chatId,
+		mobile,
+		settings,
+		showArtifacts,
+		showControls,
+		showOverview
+	} from '$lib/stores';
 	import FloatingButtons from '../ContentRenderer/FloatingButtons.svelte';
 	import { createMessagesList } from '$lib/utils';
 
@@ -15,8 +22,10 @@
 	export let sources = null;
 
 	export let save = false;
+	export let preview = false;
 	export let floatingButtons = true;
 
+	export let onUpdate = () => {};
 	export let onSourceClick = () => {};
 	export let onTaskClick = () => {};
 
@@ -122,6 +131,7 @@
 		{content}
 		{model}
 		{save}
+		{preview}
 		sourceIds={(sources ?? []).reduce((acc, s) => {
 			let ids = [];
 			s.document.forEach((document, index) => {
@@ -154,8 +164,12 @@
 		}, [])}
 		{onSourceClick}
 		{onTaskClick}
-		onUpdate={(value) => {
-			dispatch('update', value);
+		{onUpdate}
+		onPreview={async (value) => {
+			await artifactCode.set(value);
+			await showControls.set(true);
+			await showArtifacts.set(true);
+			await showOverview.set(false);
 		}}
 		onCode={(value) => {
 			const { lang, code } = value;