refac: enhanced response content sanitisation

'<' and '>' can be correctly displayed now

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

@@ -261,7 +261,7 @@ __builtins__.input = input`);
 		<div
 			class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto"
 		>
-			<div class="p-1">{@html lang}</div>
+			<div class="p-1">{lang}</div>
 
 			<div class="flex items-center">
 				{#if lang.toLowerCase() === 'python' || lang.toLowerCase() === 'py' || (lang === '' && checkPythonCode(code))}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import DOMPurify from 'dompurify';
 	import type { Token } from 'marked';
 	import { revertSanitizedResponseContent, unescapeHtml } from '$lib/utils';
 	import { onMount } from 'svelte';
@@ -14,7 +15,12 @@
 	{#if token.type === 'escape'}
 		{unescapeHtml(token.text)}
 	{:else if token.type === 'html'}
-		{@html token.text}
+		{@const html = DOMPurify.sanitize(token.text)}
+		{#if html}
+			{@html html}
+		{:else}
+			{token.text}
+		{/if}
 	{:else if token.type === 'link'}
 		<a href={token.href} target="_blank" rel="nofollow" title={token.title}>{token.text}</a>
 	{:else if token.type === 'image'}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import DOMPurify from 'dompurify';
 	import { onMount } from 'svelte';
 	import type { Token } from 'marked';
 	import { revertSanitizedResponseContent, unescapeHtml } from '$lib/utils';
@@ -91,7 +92,12 @@
 			</ul>
 		{/if}
 	{:else if token.type === 'html'}
-		{@html token.text}
+		{@const html = DOMPurify.sanitize(token.text)}
+		{#if html}
+			{@html html}
+		{:else}
+			{token.text}
+		{/if}
 	{:else if token.type === 'paragraph'}
 		<p>
 			<MarkdownInlineTokens id={`${id}-${tokenIdx}-p`} tokens={token.tokens ?? []} />

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

@@ -18,8 +18,7 @@
 		approximateToHumanReadable,
 		extractSentences,
 		replaceTokens,
-		revertSanitizedResponseContent,
-		sanitizeResponseContent
+		processResponseContent
 	} from '$lib/utils';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
@@ -88,7 +87,7 @@
 	$: (async () => {
 		if (message?.content) {
 			tokens = marked.lexer(
-				replaceTokens(sanitizeResponseContent(message?.content), model?.name, $user?.name)
+				replaceTokens(processResponseContent(message?.content), model?.name, $user?.name)
 			);
 		}
 	})();