microsoft · OEvgeny · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024
@@ -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
 

@@ -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.
 `,

@@ -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'

@@ -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>
@@ -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>
@@ -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; // ']'
@@ -0,0 +1,45 @@
+import { type HtmlExtension, type Token } from 'micromark-util-types';
+
+export type CreateHtmlRendererOptions = {
+  renderMath?: ((content: string, isDisplay: boolean) => string) | undefined;
+};
+
+function extractMathContent(value) {
+  const isDisplay = value.startsWith('\\[');
+  const start = value.indexOf(isDisplay ? '[' : '(') + 1;
+  const end = value.lastIndexOf(isDisplay ? ']' : ')') - 1;
+  return {
+    content: value.slice(start, end).trim(),
+    isDisplay
+  };
+}
+
+export default function createHtmlRenderer(options: CreateHtmlRendererOptions = {}): HtmlExtension {
+  return {
+    exit: {
+      math(token: Token) {
+        const { content, isDisplay } = extractMathContent(this.sliceSerialize(token));
+        const defaults = isDisplay
+          ? ({ tag: options.renderMath ? 'figure' : 'pre', type: 'block' } as const)
+          : ({ tag: 'span', type: 'inline' } as const);
+
+        const render = (
+          content: string,
+          type: 'block' | 'inline' | 'error' = defaults.type,
+          tag: 'figure' | 'span' | 'pre' | 'code' = defaults.tag
+        ) => {
+          this.tag(`<${tag} data-math-type="${type}">`);
+          this.raw(content);
+          this.tag(`</${tag}>`);
+        };
+
+        try {
+          render(options.renderMath?.(content, isDisplay) ?? content);
+        } catch (error) {
+          console.warn('Math rendering error:', error);
+          render(content, 'error', isDisplay ? 'pre' : 'code');
+        }
+      }
+    }
+  } as any;
+}
@@ -0,0 +1,17 @@
+import { BACKSLASH } from './constants';
+import { createTokenizer } from './tokenizer';
+import { type Extension } from 'micromark-util-types';
+
+export function math(): Extension {
+  const construct = {
+    name: 'math',
+    tokenize: createTokenizer
+  };
+
+  return {
+    text: { [BACKSLASH]: construct },
+    flow: { [BACKSLASH]: construct }
+  } as any;
+}
+
+export { type CreateHtmlRendererOptions as mathHtmlOptions, default as mathHtml } from './htmlRenderer';