use a fallback markdown render when ext like KaTex fail

Author: mythz

llms/ui/ctx.mjs

@@ -126,14 +126,15 @@ export class ExtensionScope {
 }
 
 export class AppContext {
-    constructor({ app, routes, ai, fmt, utils, marked }) {
+    constructor({ app, routes, ai, fmt, utils, marked, markedFallback }) {
         this.app = app
         this.routes = routes
         this.ai = ai
         this.fmt = fmt
         this.utils = utils
         this._components = {}
         this.marked = marked
+        this.markedFallback = markedFallback
 
         this.state = reactive({})
         this.events = new EventBus()
@@ -397,7 +398,18 @@ export class AppContext {
             const header = content.substring(3, headerEnd).trim()
             content = '<div class="frontmatter">' + header + '</div>\n' + content.substring(headerEnd + 3)
         }
-        const html = this.marked.parse(content || '')
+        let html = content || ''
+        try {
+            html = this.marked.parse(content || '')
+        } catch (e) {
+            console.log('Failed to parse markdown, using fallback', e)
+            try {
+                html = this.markedFallback.parse(content || '')
+            } catch (e2) {
+                console.log('Failed to parse markdown, using raw content', e2)
+                html = content || ''
+            }
+        }
         return sanitizeHtml(html)
     }
 

llms/ui/index.mjs

@@ -9,7 +9,7 @@ import ChatModule from './modules/chat/index.mjs'
 import ModelSelectorModule from './modules/model-selector.mjs'
 import IconsModule from './modules/icons.mjs'
 import { utilsFunctions, utilsFormatters } from './utils.mjs'
-import { marked } from './markdown.mjs'
+import { marked, markedFallback } from './markdown.mjs'
 import { AppContext } from './ctx.mjs'
 
 const Components = {
@@ -35,7 +35,7 @@ export async function createContext() {
     const utils = Object.assign({}, utilsFunctions())
     const routes = []
 
-    const ctx = new AppContext({ app, routes, ai, fmt, utils, marked })
+    const ctx = new AppContext({ app, routes, ai, fmt, utils, marked, markedFallback })
     app.provide('ctx', ctx)
     await ctx.init()
 

llms/ui/markdown.mjs

@@ -23,7 +23,8 @@ export function createMarked() {
     return ret
 }
 
-export const marked = createMarked();
+export const marked = createMarked()
+export const markedFallback = createMarked()
 
 export function renderMarkdown(content) {
     if (Array.isArray(content)) {