add basic html sanitizing (#40)

* add basic html sanitizing

* fix prose overriding styling of code block

* lazy load HTML sanitizer

* simplify sanitization

* make sure sanitizedContent is kicking in on prop changes

Co-authored-by: Eliott C. <[email protected]>

* fix reactive statement not running on SSR

---------

Co-authored-by: Eliott C. <[email protected]>

src/lib/components/chat/ChatMessage.svelte

@@ -6,6 +6,10 @@
 
 	import CopyToClipBoardBtn from '../CopyToClipBoardBtn.svelte';
 
+	function sanitizeMd(md: string) {
+		return md.replaceAll('<', '&lt;');
+	}
+
 	export let message: Message;
 	let html = '';
 	let el: HTMLElement;
@@ -49,9 +53,9 @@
 		renderer
 	};
 
-	$: browser && marked(message.content, options, handleParsed);
+	$: browser && marked(sanitizeMd(message.content), options, handleParsed);
 
-	html = marked(message.content, options);
+	html = marked(sanitizeMd(message.content), options);
 
 	afterUpdate(() => {
 		if (el) {
@@ -83,7 +87,7 @@
 			class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
 		/>
 		<div
-			class="relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50 dark:from-gray-800/40 dark:border-gray-800 prose text-gray-600 dark:text-gray-300"
+			class="prose dark:prose-invert :prose-pre:bg-gray-100 dark:prose-pre:bg-gray-950 relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50 dark:from-gray-800/40 dark:border-gray-800 text-gray-600 dark:text-gray-300"
 			bind:this={el}
 		>
 			{@html html}

src/styles/main.css

@@ -16,7 +16,7 @@
 	}
 
 	.code-block {
-		@apply relative bg-gray-100 dark:bg-gray-950 rounded-lg my-4;
+		@apply relative rounded-lg my-4;
 	}
 
 	.code-block > pre {