From d483c5822cae16d29d9022c25f0a655b9e49f7a0 Mon Sep 17 00:00:00 2001
From: Christoph Eicke <christoph@geisterstunde.org>
Date: Wed, 2 Oct 2024 10:04:46 +0000
Subject: [PATCH] Support for rendering of mathematical formulas

Better support the rendering of mathematical formulas.
---
 app/helpers/messages_helper.rb       | 10 ++++------
 app/javascript/application.js        |  7 +++++++
 app/services/ai_backend.rb           | 15 +++++++++++++++
 app/views/application/_head.html.erb |  1 +
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/app/helpers/messages_helper.rb b/app/helpers/messages_helper.rb
index 9b26aaa7b..8b960478e 100644
--- a/app/helpers/messages_helper.rb
+++ b/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)
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 4be39ff79..9730d18b6 100644
--- a/app/javascript/application.js
+++ b/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();
+  }
+});
diff --git a/app/services/ai_backend.rb b/app/services/ai_backend.rb
index 42e4fd7d8..f2b8255a6 100644
--- a/app/services/ai_backend.rb
+++ b/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
diff --git a/app/views/application/_head.html.erb b/app/views/application/_head.html.erb
index 72683e560..05e5b062a 100644
--- a/app/views/application/_head.html.erb
+++ b/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 %>