feat: add markdown parsing and KaTeX math rendering support to chat messages

index.html

@@ -7,6 +7,10 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
     <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js"></script>
     <style>
         :root {
             --bg: #05070A;
@@ -440,11 +444,25 @@
                 <div class="${bubbleClass} p-6 message-bubble shadow-xl">
                     ${mediaHtml}
                     <div class="thinking-container hidden"></div>
-                    <div class="content-container leading-relaxed text-[15px] whitespace-pre-wrap font-medium">${text}</div>
+                    <div class="content-container leading-relaxed text-[15px] whitespace-pre-wrap font-medium">${marked.parse(text)}</div>
                 </div>
             `;
             
             chatContainer.appendChild(div);
+            
+            const contentContainer = div.querySelector('.content-container');
+            if (window.renderMathInElement) {
+                renderMathInElement(contentContainer, {
+                    delimiters: [
+                        {left: '$$', right: '$$', display: true},
+                        {left: '$', right: '$', display: false},
+                        {left: '\\(', right: '\\)', display: false},
+                        {left: '\\[', right: '\\]', display: true}
+                    ],
+                    throwOnError: false
+                });
+            }
+
             chatScrollArea.scrollTo({ top: chatScrollArea.scrollHeight, behavior: 'smooth' });
             return div;
         }
@@ -459,12 +477,28 @@
 
             if (thinkingText) {
                 thinkingContainer.classList.remove('hidden');
-                thinkingContainer.innerHTML = `<div class="thinking-block">${thinkingText}</div>`;
+                thinkingContainer.innerHTML = `<div class="thinking-block">${marked.parse(thinkingText)}</div>`;
             } else {
                 thinkingContainer.classList.add('hidden');
             }
             
-            contentContainer.textContent = actualText;
+            contentContainer.innerHTML = marked.parse(actualText);
+            
+            // Render Math
+            [thinkingContainer, contentContainer].forEach(el => {
+                if (window.renderMathInElement) {
+                    renderMathInElement(el, {
+                        delimiters: [
+                            {left: '$$', right: '$$', display: true},
+                            {left: '$', right: '$', display: false},
+                            {left: '\\(', right: '\\)', display: false},
+                            {left: '\\[', right: '\\]', display: true}
+                        ],
+                        throwOnError: false
+                    });
+                }
+            });
+
             chatScrollArea.scrollTo({ top: chatScrollArea.scrollHeight, behavior: 'smooth' });
             return actualText;
         }