refac

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

@@ -270,6 +270,10 @@ __builtins__.input = input`);
 		render();
 	}
 
+	$: if (lang) {
+		dispatch('code', { lang });
+	}
+
 	onMount(async () => {
 		console.log('codeblock', lang, code);
 		if (document.documentElement.classList.contains('dark')) {

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

@@ -21,7 +21,7 @@
 			await tick();
 
 			// Check if the event target is within the content container
-			if (!contentContainerElement.contains(event.target)) return;
+			if (!contentContainerElement?.contains(event.target)) return;
 
 			let selection = window.getSelection();
 
@@ -72,6 +72,7 @@
 		}}
 		on:code={(e) => {
 			const { lang } = e.detail;
+			console.log('code', lang);
 			if (lang === 'html') {
 				showArtifacts.set(true);
 				showControls.set(true);

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -33,11 +33,6 @@
 			<MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} />
 		</svelte:element>
 	{:else if token.type === 'code'}
-		{#if token.lang === 'html'}
-			{dispatch('code', {
-				lang: token.lang
-			})}
-		{/if}
 		{#if token.raw.includes('```')}
 			<CodeBlock
 				id={`${id}-${tokenIdx}`}
@@ -45,6 +40,9 @@
 				lang={token?.lang ?? ''}
 				code={revertSanitizedResponseContent(token?.text ?? '')}
 				{save}
+				on:code={(e) => {
+					dispatch('code', e.detail);
+				}}
 				on:save={(e) => {
 					dispatch('update', {
 						raw: token.raw,

src/lib/components/common/CodeEditor.svelte

@@ -49,10 +49,7 @@
 	let editorLanguage = new Compartment();
 
 	const getLang = async () => {
-		console.log(languages);
-
 		const language = languages.find((l) => l.alias.includes(lang));
-
 		return await language?.load();
 	};