Fix KaTeX AGAIN

src/app.scss

@@ -31,6 +31,11 @@ code {
   display: block; 
 }
 
+.katex-display {
+    margin: 2em 0;
+    max-width: 1000px;
+}
+
 .menu-list {
     line-height: 1.6 !important;
 }

src/lib/Codespan.svelte

@@ -4,16 +4,18 @@
   import renderMathInElement from 'katex/contrib/auto-render'
 
   let renderedMath: string | undefined
-  if ( raw.startsWith('`\\(') || raw.startsWith('`\\[') ) {
+  if ( raw.startsWith('`\\(') || raw.startsWith('`\\[') || raw.startsWith('`$') || raw.startsWith('`$$') ) {
     let dummy = document.createElement("div")
     dummy.textContent = raw.replace(/`/g, '')
     renderMathInElement(dummy, {
         delimiters: [
             {left: '\\(', right: '\\)', display: false},
-            {left: '\\[', right: '\\]', display: true}
+            {left: '\\[', right: '\\]', display: true},
+            {left: '$', right: '$', display: false},
+            {left: '$$', right: '$$', display: true}
         ],
-        throwOnError : false,
+        throwOnError : false
-        output: "mathml"
+        // output: "mathml"
       })
     renderedMath = dummy.innerHTML;
     dummy.remove();

src/lib/EditMessage.svelte

@@ -13,6 +13,7 @@
   import PromptConfirm from './PromptConfirm.svelte'
   import { getImage } from './ImageStore.svelte'
   import { getModelDetail } from './Models.svelte'
+  import renderMathInElement from "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/auto-render.mjs";
     
   export let message:Message
   export let chatId:number
@@ -235,32 +236,62 @@
     document.body.removeChild(a)
   }
 
-  const replaceLatexDelimiters = (text: string): string => {
+const replaceLatexDelimiters = (text: string): string => {
   let result = '';
   let i = 0;
 
   while (i < text.length) {
-      if (text.startsWith('\\(', i)) {
+    // Check for display math: $$ ... $$
-        let endPos = text.indexOf('\\)', i + 2);
+    if (text.startsWith('$$', i)) {
+      const endPos = text.indexOf('$$', i + 2);
       if (endPos === -1) {
-          console.error(`LaTeX: Delimiter mismatch at ${i}`)
+        console.error(`LaTeX: Delimiter mismatch (missing $$) at position ${i}`);
+        result += text[i];
+        i++;
+      } else {
+        // Wrap in backticks for KaTeX
+        result += `\`\\[${text.slice(i + 2, endPos)}\\]\``;
+        i = endPos + 2;
+      }
+    }
+    // Check for inline math: $ ... $
+    else if (text.startsWith('$', i)) {
+      const endPos = text.indexOf('$', i + 1);
+      if (endPos === -1) {
+        console.error(`LaTeX: Delimiter mismatch (missing $) at position ${i}`);
+        result += text[i];
+        i++;
+      } else {
+        result += `\`$${text.slice(i + 1, endPos)}$\``;
+        i = endPos + 1;
+      }
+    }
+    // Check for inline math: \(...\)
+    else if (text.startsWith('\\(', i)) {
+      const endPos = text.indexOf('\\)', i + 2);
+      if (endPos === -1) {
+        console.error(`LaTeX: Delimiter mismatch (missing \\)) at position ${i}`);
         result += text[i];
         i++;
       } else {
         result += '`\\(' + text.slice(i + 2, endPos) + '\\)`';
         i = endPos + 2;
       }
-      } else if (text.startsWith('\\[', i)) {
+    }
-        let endPos = text.indexOf('\\]', i + 2);
+    // Check for display math: \[...\]
+    else if (text.startsWith('\\[', i)) {
+      const endPos = text.indexOf('\\]', i + 2);
       if (endPos === -1) {
-          console.error(`LaTeX: Delimiter mismatch at ${i}`)
+        console.error(`LaTeX: Delimiter mismatch (missing \\]) at position ${i}`);
         result += text[i];
         i++;
       } else {
         result += `\`\\[${text.slice(i + 2, endPos)}\\]\``;
         i = endPos + 2;
       }
-      } else {
+    }
+    // Otherwise, just copy the current character (also handling backslash escapes)
+    else {
       if (text.startsWith('\\(', i)) {
         result += '\\(';
         i += 2;
@@ -279,8 +310,9 @@
       }
     }
   }
-    return result
+  return result;
-  }
+};
+
 
   const renderMathMsg = () => {
     displayMessage = replaceLatexDelimiters(message.content);