Support for rendering of mathematical formulas

app/helpers/messages_helper.rb

@@ -26,16 +26,14 @@ def format_for_speaking(text)
   end
 
   def format_for_display(text, append_inside_tag: nil)
-    escaped_text = html_escape(text)
+    html = ::MarkdownRenderer.render_for_display(text, block_code: block_code)
 
-    html = ::MarkdownRenderer.render_for_display(
-      escaped_text,
-      block_code: block_code
-    )
+    # Replace custom math delimiters with LaTeX delimiters
+    html = html.gsub(/\[\[math\]\](.*?)\[\[\/math\]\]/m, '$$\1$$')
 
     html = "<p></p>" if html.blank?
     html = append(html, append_inside_tag) if append_inside_tag
-    return html.html_safe
+    html.html_safe
   end
 
   def thinking_html(message, thinking)

app/javascript/application.js

@@ -15,3 +15,10 @@ window.blocks_env = document.getElementsByTagName('html')[0].getAttribute('data-
 // document.addEventListener('turbo:before-morph-element', (e) => { if (document.getElementById('composer').contains(e.target)) console.log('Document: before-morph', e.target) })
 // document.addEventListener('turbo:frame-render', () => console.log('Document: frame render'))
 // document.addEventListener('turbo:before-stream-render', (event) => console.log(`Document: stream render (${event.target.getAttribute('action')} event)`, event.target))
+
+
+document.addEventListener('DOMContentLoaded', function() {
+  if (typeof MathJax !== 'undefined') {
+    MathJax.typeset();
+  }
+});

app/services/ai_backend.rb

@@ -96,6 +96,21 @@ def full_instructions
     end
 
     s += "\n\nFor the user, the current time is #{DateTime.current.strftime("%-l:%M%P")}; the current date is #{DateTime.current.strftime("%A, %B %-d, %Y")}"
+
+    s += "\n\nWhen presenting mathematical formulas or equations, please use the following format:
+        1. Use MathML syntax for all mathematical expressions.
+        2. Present the formulas in a numbered table format using HTML.
+        3. Each table row should contain three cells: the number, the name or description of the formula, and the MathML representation of the equation.
+        4. Use the 'display=block' attribute in the math tag to ensure proper rendering.
+
+        Example structure:
+
+            1.
+            Formula Name:
+
+                [MathML representation of the equation]
+
+        Please follow this format for all mathematical content unless specifically instructed otherwise."
     s.strip
   end
 end

app/views/application/_head.html.erb

@@ -11,6 +11,7 @@
   <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
   <script async src="https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js" data-turbo-track="reload"></script>
   <script async src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" data-turbo-track="reload"></script>
+  <script async id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" data-turbo-track="reload"></script>
 
   <%= javascript_importmap_tags %>
   <%# shim explained ^ https://github.com/rails/importmap-rails#supporting-legacy-browsers-such-as-safari-on-ios-15 %>