feat: add MarkdownRenderer component & fix latex formatting (#1569)

* feat: add extra latex delimiters

* fix: imports & afterUpdate

* feat: create MarkdownRenderer and fix latex formatting

* fix: remove extra whitespace

* fix: remove unnecessary `extraLatexDelimiters`

* fix: make sure links go to newpage

package-lock.json

@@ -35,9 +35,9 @@
 				"jsdom": "^22.0.0",
 				"json5": "^2.2.3",
 				"jsonpath": "^1.1.1",
+				"katex": "^0.16.11",
 				"lint-staged": "^15.2.7",
 				"marked": "^12.0.1",
-				"marked-katex-extension": "^5.0.1",
 				"mongodb": "^5.8.0",
 				"nanoid": "^4.0.2",
 				"openid-client": "^5.4.2",
@@ -69,6 +69,7 @@
 				"@types/js-yaml": "^4.0.9",
 				"@types/jsdom": "^21.1.1",
 				"@types/jsonpath": "^0.2.4",
+				"@types/katex": "^0.16.7",
 				"@types/mime-types": "^2.1.4",
 				"@types/minimist": "^1.2.5",
 				"@types/node": "^22.1.0",
@@ -4302,7 +4303,9 @@
 		"node_modules/@types/katex": {
 			"version": "0.16.7",
 			"resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
-			"integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="
+			"integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/@types/mime": {
 			"version": "1.3.5",
@@ -5764,7 +5767,7 @@
 			"version": "8.3.0",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
 			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-			"peer": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">= 12"
 			}
@@ -8351,7 +8354,7 @@
 				"https://opencollective.com/katex",
 				"https://github.com/sponsors/katex"
 			],
-			"peer": true,
+			"license": "MIT",
 			"dependencies": {
 				"commander": "^8.3.0"
 			},
@@ -8816,18 +8819,6 @@
 				"node": ">= 18"
 			}
 		},
-		"node_modules/marked-katex-extension": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/marked-katex-extension/-/marked-katex-extension-5.1.2.tgz",
-			"integrity": "sha512-jRtacvDAPULKBWArDno0IGpzzpUw12yb8OaEsv3dTlvcIr21+mF9kD+Bxo2m/ErX/2ZIml6zFVMnpxCpqx3stw==",
-			"dependencies": {
-				"@types/katex": "^0.16.7"
-			},
-			"peerDependencies": {
-				"katex": ">=0.16 <0.17",
-				"marked": ">=4 <15"
-			}
-		},
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",

package.json

@@ -28,6 +28,7 @@
 		"@types/js-yaml": "^4.0.9",
 		"@types/jsdom": "^21.1.1",
 		"@types/jsonpath": "^0.2.4",
+		"@types/katex": "^0.16.7",
 		"@types/mime-types": "^2.1.4",
 		"@types/minimist": "^1.2.5",
 		"@types/node": "^22.1.0",
@@ -87,9 +88,9 @@
 		"jsdom": "^22.0.0",
 		"json5": "^2.2.3",
 		"jsonpath": "^1.1.1",
+		"katex": "^0.16.11",
 		"lint-staged": "^15.2.7",
 		"marked": "^12.0.1",
-		"marked-katex-extension": "^5.0.1",
 		"mongodb": "^5.8.0",
 		"nanoid": "^4.0.2",
 		"openid-client": "^5.4.2",

src/lib/components/chat/ChatMessage.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
-	import { marked, type MarkedOptions } from "marked";
-	import markedKatex from "marked-katex-extension";
 	import type { Message } from "$lib/types/Message";
 	import { afterUpdate, createEventDispatcher, tick } from "svelte";
 	import { deepestChild } from "$lib/utils/deepestChild";
 	import { page } from "$app/stores";
 
-	import CodeBlock from "../CodeBlock.svelte";
 	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
 	import IconLoading from "../icons/IconLoading.svelte";
 	import CarbonRotate360 from "~icons/carbon/rotate-360";
@@ -17,7 +14,6 @@
 	import CarbonPen from "~icons/carbon/pen";
 	import CarbonChevronLeft from "~icons/carbon/chevron-left";
 	import CarbonChevronRight from "~icons/carbon/chevron-right";
-	import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
 	import type { Model } from "$lib/types/Model";
 	import UploadedFile from "./UploadedFile.svelte";
 
@@ -34,56 +30,9 @@
 	import { useConvTreeStore } from "$lib/stores/convTree";
 	import ToolUpdate from "./ToolUpdate.svelte";
 	import { useSettingsStore } from "$lib/stores/settings";
-	import DOMPurify from "isomorphic-dompurify";
 	import { enhance } from "$app/forms";
 	import { browser } from "$app/environment";
-	import type { WebSearchSource } from "$lib/types/WebSearch";
-
-	function addInlineCitations(md: string, webSearchSources: WebSearchSource[] = []): string {
-		const linkStyle =
-			"color: rgb(59, 130, 246); text-decoration: none; hover:text-decoration: underline;";
-
-		return md.replace(/\[(\d+)\]/g, (match: string) => {
-			const indices: number[] = (match.match(/\d+/g) || []).map(Number);
-			const links: string = indices
-				.map((index: number) => {
-					if (index === 0) return false;
-					const source = webSearchSources[index - 1];
-					if (source) {
-						return `<a href="${source.link}" target="_blank" rel="noreferrer" style="${linkStyle}">${index}</a>`;
-					}
-					return "";
-				})
-				.filter(Boolean)
-				.join(", ");
-
-			return links ? ` <sup>${links}</sup>` : match;
-		});
-	}
-
-	function sanitizeMd(md: string) {
-		let ret = md
-			.replace(/<\|[a-z]*$/, "")
-			.replace(/<\|[a-z]+\|$/, "")
-			.replace(/<$/, "")
-			.replaceAll(PUBLIC_SEP_TOKEN, " ")
-			.replaceAll(/<\|[a-z]+\|>/g, " ")
-			.replaceAll(/<br\s?\/?>/gi, "\n")
-			.replaceAll("<", "&lt;")
-			.trim();
-
-		for (const stop of [...(model.parameters?.stop ?? []), "<|endoftext|>"]) {
-			if (ret.endsWith(stop)) {
-				ret = ret.slice(0, -stop.length).trim();
-			}
-		}
-
-		return ret;
-	}
-
-	function unsanitizeMd(md: string) {
-		return md.replaceAll("&lt;", "<");
-	}
+	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 
 	export let model: Model;
 	export let id: Message["id"];
@@ -108,36 +57,6 @@
 	let isCopied = false;
 
 	let initialized = false;
-	const renderer = new marked.Renderer();
-	// For code blocks with simple backticks
-	renderer.codespan = (code) => {
-		// Unsanitize double-sanitized code
-		return `<code>${code.replaceAll("&amp;", "&")}</code>`;
-	};
-
-	renderer.link = (href, title, text) => {
-		return `<a href="${href?.replace(/>$/, "")}" target="_blank" rel="noreferrer">${text}</a>`;
-	};
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const { extensions, ...defaults } = marked.getDefaults() as MarkedOptions & {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		extensions: any;
-	};
-	const options: MarkedOptions = {
-		...defaults,
-		gfm: true,
-		breaks: true,
-		renderer,
-	};
-
-	marked.use(
-		markedKatex({
-			throwOnError: false,
-		})
-	);
-
-	$: tokens = marked.lexer(addInlineCitations(sanitizeMd(message.content), webSearchSources));
 
 	$: emptyLoad =
 		!message.content && (webSearchIsDone || (searchUpdates && searchUpdates.length === 0));
@@ -258,7 +177,7 @@
 
 {#if message.from === "assistant"}
 	<div
-		class="group relative -mb-4 flex items-start justify-start gap-4 pb-4 leading-relaxed"
+		class="message-assistant group relative -mb-4 flex items-start justify-start gap-4 pb-4 leading-relaxed"
 		id="message-assistant-{message.id}"
 		role="presentation"
 		on:click={() => (isTapped = !isTapped)}
@@ -289,7 +208,7 @@
 			{/if}
 			{#if searchUpdates && searchUpdates.length > 0}
 				<OpenWebSearchResults
-					classNames={tokens.length ? "mb-3.5" : ""}
+					classNames={message.content.length ? "mb-3.5" : ""}
 					webSearchMessages={searchUpdates}
 				/>
 			{/if}
@@ -304,23 +223,11 @@
 				{/each}
 			{/if}
 
-			<div
-				class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
-				bind:this={contentEl}
-			>
+			<div bind:this={contentEl}>
 				{#if isLast && loading && $settings.disableStream}
 					<IconLoading classNames="loading inline ml-2 first:ml-0" />
 				{/if}
-				{#each tokens as token}
-					{#if token.type === "code"}
-						<CodeBlock lang={token.lang} code={unsanitizeMd(token.text)} />
-					{:else}
-						{#await marked.parse(token.raw, options) then parsed}
-							<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-							{@html DOMPurify.sanitize(parsed)}
-						{/await}
-					{/if}
-				{/each}
+				<MarkdownRenderer content={message.content} sources={webSearchSources} />
 			</div>
 
 			<!-- Web Search sources -->
@@ -425,7 +332,7 @@
 {/if}
 {#if message.from === "user"}
 	<div
-		class="group relative w-full items-start justify-start gap-4 max-sm:text-sm"
+		class="message-user group relative w-full items-start justify-start gap-4 max-sm:text-sm"
 		id="message-user-{message.id}"
 		role="presentation"
 		on:click={() => (isTapped = !isTapped)}

src/lib/components/chat/MarkdownRenderer.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { WebSearchSource } from "$lib/types/WebSearch";
+	import katex from "katex";
+	import DOMPurify from "isomorphic-dompurify";
+	import { marked, type MarkedOptions } from "marked";
+	import CodeBlock from "../CodeBlock.svelte";
+
+	export let content: string;
+	export let sources: WebSearchSource[] = [];
+
+	function addInlineCitations(md: string, webSearchSources: WebSearchSource[] = []): string {
+		const linkStyle =
+			"color: rgb(59, 130, 246); text-decoration: none; hover:text-decoration: underline;";
+
+		return md.replace(/\[(\d+)\]/g, (match: string) => {
+			const indices: number[] = (match.match(/\d+/g) || []).map(Number);
+			const links: string = indices
+				.map((index: number) => {
+					if (index === 0) return false;
+					const source = webSearchSources[index - 1];
+					if (source) {
+						return `<a href="${source.link}" target="_blank" rel="noreferrer" style="${linkStyle}">${index}</a>`;
+					}
+					return "";
+				})
+				.filter(Boolean)
+				.join(", ");
+
+			return links ? ` <sup>${links}</sup>` : match;
+		});
+	}
+
+	const renderer = new marked.Renderer();
+
+	// For code blocks with simple backticks
+	renderer.codespan = (code) => {
+		// Unsanitize double-sanitized code
+		return `<code>${code.replaceAll("&amp;", "&")}</code>`;
+	};
+
+	renderer.link = (href, title, text) => {
+		return `<a href="${href?.replace(/>$/, "")}" target="_blank" rel="noreferrer">${text}</a>`;
+	};
+
+	const options: MarkedOptions = {
+		gfm: true,
+		// breaks: true,
+		renderer,
+	};
+
+	$: tokens = marked.lexer(addInlineCitations(content, sources));
+
+	function processLatex(parsed: string) {
+		const delimiters = [
+			{ left: "$$", right: "$$", display: true },
+			{ left: "$", right: "$", display: false },
+			{ left: "\\(", right: "\\)", display: false },
+			{ left: "\\[", right: "\\]", display: true },
+		];
+
+		for (const { left, right, display } of delimiters) {
+			// Escape special regex characters in the delimiters
+			const escapedLeft = left.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+			const escapedRight = right.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+			// Create regex pattern that matches content between delimiters
+			const pattern = new RegExp(`${escapedLeft}([^]*?)${escapedRight}`, "g");
+
+			parsed = parsed.replace(pattern, (match, latex) => {
+				try {
+					// Remove the delimiters from the latex content
+					const cleanLatex = latex.trim();
+					const rendered = katex.renderToString(cleanLatex, { displayMode: display });
+
+					// For display mode, wrap in centered paragraph
+					if (display) {
+						return `<p style="width:100%;text-align:center;">${rendered}</p>`;
+					}
+					return rendered;
+				} catch (error) {
+					console.error("KaTeX error:", error);
+					return match; // Return original on error
+				}
+			});
+		}
+		return parsed;
+	}
+
+	DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+		if (node.tagName === "A") {
+			node.setAttribute("rel", "noreferrer");
+			node.setAttribute("target", "_blank");
+		}
+	});
+</script>
+
+<div
+	class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+>
+	{#each tokens as token}
+		{#if token.type === "code"}
+			<CodeBlock lang={token.lang} code={token.text} />
+		{:else}
+			{@const parsed = marked.parse(processLatex(token.raw), options)}
+			{#await parsed then parsed}
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+				{@html DOMPurify.sanitize(parsed)}
+			{/await}
+		{/if}
+	{/each}
+</div>