feat: message latex support

src/app.css

@@ -9,6 +9,10 @@ html {
 	word-break: break-word;
 }
 
+math {
+	margin-top: 1rem;
+}
+
 .hljs {
 	@apply rounded-lg;
 }

src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
 	import { openDB, deleteDB } from 'idb';
 	import { v4 as uuidv4 } from 'uuid';
 	import { marked } from 'marked';
@@ -7,9 +6,12 @@
 	const { saveAs } = fileSaver;
 	import hljs from 'highlight.js';
 	import 'highlight.js/styles/github-dark.min.css';
+	import katex from 'katex';
+	import auto_render from 'katex/dist/contrib/auto-render.mjs';
+	import toast from 'svelte-french-toast';
+
 	import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
 	import { onMount, tick } from 'svelte';
-
 	import Navbar from '$lib/components/layout/Navbar.svelte';
 	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
 
@@ -151,6 +153,27 @@
 		}
 	};
 
+	const renderLatex = () => {
+		let chatMessageElements = document.getElementsByClassName('chat-assistant');
+		// let lastChatMessageElement = chatMessageElements[chatMessageElements.length - 1];
+
+		for (const element of chatMessageElements) {
+			auto_render(element, {
+				// customised options
+				// • auto-render specific keys, e.g.:
+				delimiters: [
+					{ left: '$$', right: '$$', display: true },
+					{ left: '$', right: '$', display: false },
+					{ left: '\\(', right: '\\)', display: false },
+					{ left: '\\[', right: '\\]', display: true }
+				],
+				// • rendering keys, e.g.:
+				throwOnError: false,
+				output: 'mathml'
+			});
+		}
+	};
+
 	//////////////////////////
 	// Web functions
 	//////////////////////////
@@ -222,6 +245,7 @@
 			await tick();
 			hljs.highlightAll();
 			createCopyCodeBlockButton();
+			renderLatex();
 		}
 	};
 
@@ -457,6 +481,7 @@
 								messages = messages;
 								hljs.highlightAll();
 								createCopyCodeBlockButton();
+								renderLatex();
 							}
 						}
 					}
@@ -555,6 +580,7 @@
 								messages = messages;
 								hljs.highlightAll();
 								createCopyCodeBlockButton();
+								renderLatex();
 							}
 						}
 					}
@@ -742,7 +768,7 @@
 											</div>
 										{:else}
 											<div
-												class="prose w-full max-w-full prose-invert prose-headings:my-0 prose-p:my-0 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-2 prose-ol:-my-2 prose-li:-my-2 whitespace-pre-line"
+												class="prose chat-{message.role} w-full max-w-full prose-invert prose-headings:my-0 prose-p:my-0 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-2 prose-ol:-my-2 prose-li:-my-2 whitespace-pre-line"
 											>
 												{#if message.role == 'user'}
 													{#if message?.edit === true}
@@ -1091,6 +1117,8 @@
 			</div>
 		</div>
 
+		<div class=" hidden katex" />
+
 		<!-- <main class="w-full flex justify-center">
 			<div class="max-w-lg w-screen p-5" />
 		</main> -->