refac

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

@@ -32,7 +32,7 @@
 	export let edit = true;
 
 	export let onSave = (e) => {};
-	export let onUpdate = (e) => {};
+	export let onUpdate = (e, codeBlockId = '') => {};
 	export let onPreview = (e) => {};
 
 	export let save = false;
@@ -364,7 +364,7 @@
 	};
 
 	const render = async () => {
-		onUpdate(token);
+		onUpdate(token, id);
 		if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
 			try {
 				renderHTML = await renderMermaid(code);
@@ -420,7 +420,7 @@
 
 	onMount(async () => {
 		if (token) {
-			onUpdate(token);
+			onUpdate(token, id);
 		}
 	});
 

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

@@ -130,16 +130,31 @@
 				)
 			: messageContent;
 
+	let autoOpenedArtifactIds = new Set();
+
+	const hasClosingCodeFence = (raw = '') => /(?:^|\n)```[ \t]*$/.test(raw.trimEnd());
+
 	const markdownUpdateHandler = /** @type {any} */ (
-		async (/** @type {{ lang?: string; text?: string }} */ token) => {
-			const { lang = '', text: code = '' } = token;
+		async (
+			/** @type {{ lang?: string; raw?: string; text?: string }} */ token,
+			codeBlockId = ''
+		) => {
+			const { lang = '', raw = '', text: code = '' } = token;
+			const normalizedLang = lang.toLowerCase();
+			const isArtifact =
+				['html', 'svg'].includes(normalizedLang) ||
+				(normalizedLang === 'xml' && code.toLowerCase().includes('<svg'));
+			const artifactId = codeBlockId || `${normalizedLang}:${raw}`;
 
 			if (
 				($settings?.detectArtifacts ?? true) &&
-				(['html', 'svg'].includes(lang) || (lang === 'xml' && code.includes('svg'))) &&
+				isArtifact &&
+				hasClosingCodeFence(raw) &&
+				!autoOpenedArtifactIds.has(artifactId) &&
 				!$mobile &&
 				$chatId
 			) {
+				autoOpenedArtifactIds.add(artifactId);
 				await tick();
 				showArtifacts.set(true);
 				showControls.set(true);