feat: switch to TeX style math blocks (#5353)

* feat: switch to Tex style math blocks * Changelog * Update package deps
microsoft · Nov 6, 2024 · 8ac01bf · 8ac01bf
1 parent a49da14
commit 8ac01bf
Show file tree

Hide file tree

Showing 21 changed files with 405 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -89,6 +89,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Excluded side effects from module entry points to prevent global scope modifications, in PR [#5329](https://github.com/microsoft/BotFramework-WebChat/pull/5329), by [@OEvgeny](https://github.com/OEvgeny)
 -  Moved to `micromark` for rendering Markdown, instead of `markdown-it`, in PR [#5330](https://github.com/microsoft/BotFramework-WebChat/pull/5330), by [@compulim](https://github.com/compulim)
 -  Improved view code dialog UI in Fluent theme with better styling and accessibility, in PR [#5337](https://github.com/microsoft/BotFramework-WebChat/pull/5337), by [@OEvgeny](https://github.com/OEvgeny)
+-  Switched math block syntax from `$$` to Tex-style `\[ \]` and `\( \)` delimiters with improved rendering and error handling, in PR [#5353](https://github.com/microsoft/BotFramework-WebChat/pull/5353), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

diff --git a/__tests__/html2/markdown/math.html b/__tests__/html2/markdown/math.html
@@ -30,29 +30,29 @@
 
 1. Determine the number of shares you could buy on 1/1/2018:
 
-$$
+\\[
 \\text{Number of shares} = \\frac{\\text{Investment amount}}{\\text{Stock price purchase date}} = \\frac{1000}{85.95}
-$$
+\\]
 
 2. Calculate the total value when selling the shares on 12/1/2021:
 
-$$
+\\[
 \\text{Total value} = \\text{Number of shares} \\times \\text{Stock price on sale date}
-$$
+\\]
 
 Let's do the math:
 
 1. Number of shares you could buy on 1/1/2018:
 
-$$
+\\[
 \\text{Number of shares} = \\frac{1000}{85.95} \\approx 11.63\\text{ shares}
-$$
+\\]
 
 2. Total value when selling the shares on 12/1/2021:
 
-$$
+\\[
 \\text{Total value} = 11.63 \\times 330.08 \\approx \\$3839.63
-$$
+\\]
 
 So, if you invested $1000 in Microsoft on January 1, 2018, and sold the shares on December 1, 2021, your investment would be worth approximately **$3839.63**. Please note that this calculation does not account for dividends, taxes, or transaction fees, which could affect the final amount. If you need a more precise calculation including these factors, I recommend consulting a financial advisor or using a detailed investment calculator.
 `,

diff --git a/__tests__/html2/markdown/math2.html b/__tests__/html2/markdown/math2.html
@@ -26,12 +26,12 @@
         await directLine.emulateIncomingActivity({
           text: `I've graphed the parametric equations you provided. Here's the result:
 
-$$
+\\[
 x = \\sin(t)(e^{\\cos(t)}-2\\cos(4t)-\\sin^{5}(\\frac{t}{12}))
-$$
-$$
+\\]
+\\[
 y = \\cos(t)(e^{\\cos(t)}-2\\cos(4t)-\\sin^{5}(\\frac{t}{12}))
-$$
+\\]
 
 The graph is a representation of these equations plotted over a range of ( t ) values from 0 to ( 2\\pi ).`,
           type: 'message'

diff --git a/__tests__/html2/markdown/math2.html.snap-1.png b/__tests__/html2/markdown/math2.html.snap-1.png
diff --git a/__tests__/html2/markdown/math3.html b/__tests__/html2/markdown/math3.html
@@ -0,0 +1,124 @@
+<!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>
+## Basic Math
+
+1. Simple arithmetic:
+\(2 + 2 = 4\)
+
+2. Fractions:
+\[\frac{1}{2} + \frac{1}{3} = \frac{5}{6}\]
+
+## Algebra
+
+3. Quadratic formula:
+\[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\]
+
+4. Binomial expansion:
+\[(x + y)^2 = x^2 + 2xy + y^2\]
+    </x-message>
+    <x-message>
+## Calculus
+
+5. Derivative notation:
+\[\frac{d}{dx} x^n = nx^{n-1}\]
+
+6. Integration:
+\[\int_0^1 x^2 dx = \frac{1}{3}\]
+
+7. Taylor series:
+\[e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!}\]
+
+## Linear Algebra
+
+8. Matrix multiplication:
+\[
+\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix}
+\begin{pmatrix}
+x \\
+y
+\end{pmatrix} =
+\begin{pmatrix}
+ax + by \\
+cx + dy
+\end{pmatrix}
+\]
+
+9. Determinant:
+\[\det\begin{pmatrix}
+a & b \\
+c & d
+\end{pmatrix} = ad - bc\]
+    </x-message>
+    <x-message>
+## Physics
+
+10. Einstein's mass-energy equivalence:
+\[E = mc^2\]
+
+11. Schrödinger equation:
+\[i\hbar\frac{\partial}{\partial t}\Psi = \hat{H}\Psi\]
+
+## Invalid input examples
+
+12. Wrong expression is rendered:
+\(2++2\)
+
+13. Inline closing delimeter is required:
+\(x^2
+
+14. Katex syntax error:
+\[\int_0^\infty e^{-x} dx = 1 +}\]
+    </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/math3.html.snap-1.png b/__tests__/html2/markdown/math3.html.snap-1.png
diff --git a/__tests__/html2/markdown/math3.html.snap-2.png b/__tests__/html2/markdown/math3.html.snap-2.png
diff --git a/__tests__/html2/markdown/math3.html.snap-3.png b/__tests__/html2/markdown/math3.html.snap-3.png
diff --git a/__tests__/html2/markdown/math4.html b/__tests__/html2/markdown/math4.html
@@ -0,0 +1,103 @@
+<!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>
+## Basic Notation
+
+Regular text with inline math \(x + y\) in the middle of a sentence.
+
+## Variables and Exponents
+
+1. Powers: Let's calculate \(x^2\) and \(y^3\)
+2. Subscripts: The sequence \(a_1, a_2, ..., a_n\)
+3. Both: Temperature is \(T_{room} = 20^{\circ}C\)
+
+## Greek Letters
+
+1. Common variables: \(\alpha\), \(\beta\), \(\gamma\), \(\theta\)
+2. Physics constants: Planck's constant \(\hbar\)
+3. Math constants: \(\pi \approx 3.14159\)
+    </x-message>
+    <x-message>
+## Operators
+
+1. Multiplication: \(5 \times 4\), \(5 \cdot 4\)
+2. Division: \(a \div b\), \(\frac{a}{b}\)
+3. Plus/minus: \(x \pm y\)
+
+## Functions
+
+1. Trigonometry: \(\sin(x)\), \(\cos(x)\), \(\tan(x)\)
+2. Logarithms: \(\log(x)\), \(\ln(x)\)
+3. Limits: \(\lim_{x \to \infty}\)
+
+## Special Symbols
+
+1. Infinity: \(\infty\)
+2. Approximately: \(\approx\)
+3. Not equal: \(\neq\)
+4. Less than or equal: \(\leq\)
+5. Greater than or equal: \(\geq\)
+    </x-message>
+    <x-message>
+## Complex Examples
+
+1. Chemical equation: \(H_2O + CO_2 \rightarrow H_2CO_3\)
+2. Physics formula: \(F = ma\)
+3. Statistics: \(\bar{x} = \frac{1}{n}\sum_{i=1}^n x_i\)
+4. Probability: \(P(A|B) = \frac{P(B|A)P(A)}{P(B)}\)
+
+## Common Errors to Avoid
+
+1. Closing parenthesis is required: \(x^2
+2. Invalid operator is rendered: \(5 +* 3\)
+3. Syntax error renders error: \([\frac{1}{2\)
+    </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/math4.html.snap-1.png b/__tests__/html2/markdown/math4.html.snap-1.png
diff --git a/__tests__/html2/markdown/math4.html.snap-2.png b/__tests__/html2/markdown/math4.html.snap-2.png
diff --git a/__tests__/html2/markdown/math4.html.snap-3.png b/__tests__/html2/markdown/math4.html.snap-3.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
@@ -127,12 +127,13 @@
     "botframework-webchat-core": "0.0.0-0",
     "classnames": "2.5.1",
     "core-js": "3.37.0",
+    "katex": "^0.16.11",
     "math-random": "2.0.1",
     "mdast-util-from-markdown": "2.0.0",
     "memoize-one": "6.0.0",
     "micromark": "^4.0.0",
     "micromark-extension-gfm": "^3.0.0",
-    "micromark-extension-math": "^3.1.0",
+    "micromark-util-character": "^2.1.0",
     "microsoft-cognitiveservices-speech-sdk": "1.17.0",
     "prop-types": "15.8.1",
     "punycode": "2.3.1",
@@ -163,6 +164,7 @@
     "esbuild": "^0.21.1",
     "isomorphic-react": "^0.0.0-0",
     "isomorphic-react-dom": "^0.0.0-0",
+    "micromark-util-types": "^2.0.0",
     "tsd": "^0.31.0",
     "type-fest": "^4.18.2",
     "typescript": "^5.4.5"

diff --git a/packages/bundle/src/markdown/mathExtension/constants.ts b/packages/bundle/src/markdown/mathExtension/constants.ts
@@ -0,0 +1,5 @@
+export const BACKSLASH = 92; // '\'
+export const OPEN_PAREN = 40; // '('
+export const CLOSE_PAREN = 41; // ')'
+export const OPEN_BRACKET = 91; // '['
+export const CLOSE_BRACKET = 93; // ']'