feat: add support for math blocks using $$ (#5381)

* feat: add support for math blocks using $$ * Snaps * Changelog * Spec and improved math * Update math formula sanitizer config * Render block formulas in the middle of paragraph as inline-flex
microsoft · Nov 19, 2024 · 3d90e54 · 3d90e54
1 parent e88f4b6
commit 3d90e54
Show file tree

Hide file tree

Showing 33 changed files with 685 additions and 108 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -71,6 +71,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    -  HTML sanitizer is moved from `renderMarkdown` into HTML content transformer for better coverage
    -  Copy button is added to fenced code blocks (`<pre><code>`)
    -  Configure HTML sanitizer via `request.allowedTags`
+-  Added support for math blocks using `$$` delimiter alongside existing `\[...\]` and `\(...\)` notations, in PR [#5381](https://github.com/microsoft/BotFramework-WebChat/pull/5381), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Changed
 

diff --git a/__tests__/html2/markdown/math/layout.1.html.snap-1.png b/__tests__/html2/markdown/math/layout.1.html.snap-1.png
diff --git a/__tests__/html2/markdown/math/layout.2.html.snap-1.png b/__tests__/html2/markdown/math/layout.2.html.snap-1.png
diff --git a/__tests__/html2/markdown/math/layout.3.html b/__tests__/html2/markdown/math/layout.3.html
@@ -22,8 +22,7 @@
     <x-message>
 ## Basic Math
 
-1. Simple arithmetic:
-\(2 + 2 = 4\)
+1. Simple arithmetic: \(2 + 2 = 4\)
 
 2. Fractions:
 \[\frac{1}{2} + \frac{1}{3} = \frac{5}{6}\]
@@ -83,19 +82,16 @@
 
 ## Invalid input examples
 
-12. Wrong expression is rendered:
-\(2++2\)
+12. Wrong expression is rendered: \(2++2\)
 
-13. Inline closing delimeter is required:
-\(x^2
+13. Inline closing delimeter is required: \(x^2
 
 14. Katex syntax error:
 \[\int_0^\infty e^{-x} dx = 1 +}\]
 
 15. LLM generation error:
 \[
-\
-\]
+\\]
     </x-message>
   </template>
   <main id="webchat"></main>

diff --git a/__tests__/html2/markdown/math/layout.3.html.snap-1.png b/__tests__/html2/markdown/math/layout.3.html.snap-1.png
diff --git a/__tests__/html2/markdown/math/layout.3.html.snap-2.png b/__tests__/html2/markdown/math/layout.3.html.snap-2.png
diff --git a/__tests__/html2/markdown/math/layout.3.html.snap-3.png b/__tests__/html2/markdown/math/layout.3.html.snap-3.png
diff --git a/__tests__/html2/markdown/math/layout.4.html.snap-2.png b/__tests__/html2/markdown/math/layout.4.html.snap-2.png
diff --git a/__tests__/html2/markdown/math/layout.4.html.snap-3.png b/__tests__/html2/markdown/math/layout.4.html.snap-3.png
diff --git a/__tests__/html2/markdown/math/layout.mixed.html b/__tests__/html2/markdown/math/layout.mixed.html
@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="en-US">
+
+<head>
+  <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  <script crossorigin="anonymous" src="/test-harness.js"></script>
+  <script crossorigin="anonymous" src="/test-page-object.js"></script>
+  <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  <style>
+    [data-math-type=error] {
+      color: #9d0000;
+      border: 1px dashed currentColor;
+      padding: 0.2em 0.4em;
+      margin: 0 0.2em;
+      border-radius: 2px;
+    }
+  </style>
+</head>
+
+<body>
+  <template id="messages">
+    <x-message>
+## Display Math with ($$)
+
+1. Basic summation:
+$$ \sum\_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$
+
+2. Matrix representation:
+
+    $$
+    \begin{pmatrix}
+    a & b \\
+    c & d
+    \end{pmatrix}
+    \begin{pmatrix}
+    x \\
+    y
+    \end{pmatrix} =
+    \begin{pmatrix}
+    ax + by \\
+    cx + dy
+    \end{pmatrix}
+    $$
+
+3. Equation system:
+    $$
+    \begin{cases}
+    x + y + z = 1 \\
+    2x - y + z = 3 \\
+    x + 2y - z = 2
+    \end{cases}
+    $$      
+    </x-message>
+    <x-message>
+## Inline Math with \\(...\\)
+
+4. Physics formulas:
+
+- Energy: \(E = mc^2\)
+- Force: \(F = ma\)
+- Gravitational force: \(F = G\frac{m_1m_2}{r^2}\)
+
+5. Complex numbers:
+
+- Euler's formula: \(e^{ix} = \cos(x) + i\sin(x)\)
+- De Moivre's formula: \((\cos\theta + i\sin\theta)^n = \cos(n\theta) + i\sin(n\theta)\)
+
+    </x-message>
+    <x-message>
+## Display Math with \\[...\\]
+
+6. Calculus expressions:
+    \[\lim\_{h \to 0} \frac{f(x + h) - f(x)}{h} = f'(x)\]
+
+7. Double integral:
+    \[\iint_D \left(\frac{\partial Q}{\partial x} - \frac{\partial P}{\partial y}\right) dx\,dy = \oint_C P\,dx + Q\,dy\]
+
+8. Taylor series:
+    \[f(x) = \sum\_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x-a)^n\]
+    </x-message>
+    <x-message>
+## Mixed Usage Examples
+
+9. Quantum mechanics:
+   The Schrödinger equation \(\hat{H}\Psi = E\Psi\) can be written in position basis as:
+   $$ -\frac{\hbar^2}{2m}\frac{d^2\Psi}{dx^2} + V(x)\Psi = E\Psi $$
+
+10. Statistics:
+    If \(X \sim N(\mu, \sigma^2)\), then its probability density function is:
+    $$ f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}} $$
+
+11. Linear Algebra:
+    For a matrix \(A\), its determinant can be computed as:
+    \[\det(A) = \sum*{\sigma \in S_n} \text{sgn}(\sigma) \prod*{i=1}^n a\_{i,\sigma(i)}\]
+    </x-message>
+  </template>
+  <main id="webchat"></main>
+  <script>
+    run(async function () {
+      await host.windowSize(640, 720, document.getElementById('webchat'));
+
+      const {
+        WebChat: { renderWebChat }
+      } = window; // Imports in UMD fashion.
+
+      const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+      renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+      await pageConditions.uiConnected();
+
+      const messages = Array.from(window.messages.content.querySelectorAll('x-message')).map(el => el.innerText)
+      for (const message of messages) {
+        await directLine.emulateIncomingActivity({
+          text: message,
+          type: 'message'
+        });
+        await host.snapshot('local');
+        await pageConditions.numActivitiesShown(messages.indexOf(message) + 1);
+      }
+    });
+  </script>
+</body>
+
+</html>
diff --git a/__tests__/html2/markdown/math/layout.mixed.html.snap-1.png b/__tests__/html2/markdown/math/layout.mixed.html.snap-1.png
diff --git a/__tests__/html2/markdown/math/layout.mixed.html.snap-2.png b/__tests__/html2/markdown/math/layout.mixed.html.snap-2.png
diff --git a/__tests__/html2/markdown/math/layout.mixed.html.snap-3.png b/__tests__/html2/markdown/math/layout.mixed.html.snap-3.png
diff --git a/__tests__/html2/markdown/math/layout.mixed.html.snap-4.png b/__tests__/html2/markdown/math/layout.mixed.html.snap-4.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-1.png b/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-1.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-2.png b/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-2.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-3.png b/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-3.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-4.png b/__tests__/html2/markdown/math/layout.scroll.copilot.light.html.snap-4.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.html.snap-1.png b/__tests__/html2/markdown/math/layout.scroll.html.snap-1.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.html.snap-2.png b/__tests__/html2/markdown/math/layout.scroll.html.snap-2.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.html.snap-3.png b/__tests__/html2/markdown/math/layout.scroll.html.snap-3.png
diff --git a/__tests__/html2/markdown/math/layout.scroll.html.snap-4.png b/__tests__/html2/markdown/math/layout.scroll.html.snap-4.png