Skip to content

Commit 3d90e54

Browse files
OEvgenyOEvgeny
authored
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
1 parent e88f4b6 commit 3d90e54

33 files changed

+685
-108
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
7171
- HTML sanitizer is moved from `renderMarkdown` into HTML content transformer for better coverage
7272
- Copy button is added to fenced code blocks (`<pre><code>`)
7373
- Configure HTML sanitizer via `request.allowedTags`
74+
- 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)
7475

7576
### Changed
7677

‎__tests__/html2/markdown/math/layout.1.html.snap-1.png

1023 Bytes
Loading

‎__tests__/html2/markdown/math/layout.2.html.snap-1.png

295 Bytes
Loading

‎__tests__/html2/markdown/math/layout.3.html

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@
2222
<x-message>
2323
## Basic Math
2424

25-
1. Simple arithmetic:
26-
\(2 + 2 = 4\)
25+
1. Simple arithmetic: \(2 + 2 = 4\)
2726

2827
2. Fractions:
2928
\[\frac{1}{2} + \frac{1}{3} = \frac{5}{6}\]
@@ -83,19 +82,16 @@
8382

8483
## Invalid input examples
8584

86-
12. Wrong expression is rendered:
87-
\(2++2\)
85+
12. Wrong expression is rendered: \(2++2\)
8886

89-
13. Inline closing delimeter is required:
90-
\(x^2
87+
13. Inline closing delimeter is required: \(x^2
9188

9289
14. Katex syntax error:
9390
\[\int_0^\infty e^{-x} dx = 1 +}\]
9491

9592
15. LLM generation error:
9693
\[
97-
\
98-
\]
94+
\\]
9995
</x-message>
10096
</template>
10197
<main id="webchat"></main>

‎__tests__/html2/markdown/math/layout.3.html.snap-1.png

1.12 KB
Loading

‎__tests__/html2/markdown/math/layout.3.html.snap-2.png

257 Bytes
Loading

‎__tests__/html2/markdown/math/layout.3.html.snap-3.png

3.24 KB
Loading

‎__tests__/html2/markdown/math/layout.4.html.snap-2.png

-223 Bytes
Loading

‎__tests__/html2/markdown/math/layout.4.html.snap-3.png

-112 Bytes
Loading

‎__tests__/html2/markdown/math/layout.mixed.html

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
6+
<script crossorigin="anonymous" src="/test-harness.js"></script>
7+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
8+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
9+
<style>
10+
[data-math-type=error] {
11+
color: #9d0000;
12+
border: 1px dashed currentColor;
13+
padding: 0.2em 0.4em;
14+
margin: 0 0.2em;
15+
border-radius: 2px;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<template id="messages">
22+
<x-message>
23+
## Display Math with ($$)
24+
25+
1. Basic summation:
26+
$$ \sum\_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$
27+
28+
2. Matrix representation:
29+
30+
$$
31+
\begin{pmatrix}
32+
a & b \\
33+
c & d
34+
\end{pmatrix}
35+
\begin{pmatrix}
36+
x \\
37+
y
38+
\end{pmatrix} =
39+
\begin{pmatrix}
40+
ax + by \\
41+
cx + dy
42+
\end{pmatrix}
43+
$$
44+
45+
3. Equation system:
46+
$$
47+
\begin{cases}
48+
x + y + z = 1 \\
49+
2x - y + z = 3 \\
50+
x + 2y - z = 2
51+
\end{cases}
52+
$$
53+
</x-message>
54+
<x-message>
55+
## Inline Math with \\(...\\)
56+
57+
4. Physics formulas:
58+
59+
- Energy: \(E = mc^2\)
60+
- Force: \(F = ma\)
61+
- Gravitational force: \(F = G\frac{m_1m_2}{r^2}\)
62+
63+
5. Complex numbers:
64+
65+
- Euler's formula: \(e^{ix} = \cos(x) + i\sin(x)\)
66+
- De Moivre's formula: \((\cos\theta + i\sin\theta)^n = \cos(n\theta) + i\sin(n\theta)\)
67+
68+
</x-message>
69+
<x-message>
70+
## Display Math with \\[...\\]
71+
72+
6. Calculus expressions:
73+
\[\lim\_{h \to 0} \frac{f(x + h) - f(x)}{h} = f'(x)\]
74+
75+
7. Double integral:
76+
\[\iint_D \left(\frac{\partial Q}{\partial x} - \frac{\partial P}{\partial y}\right) dx\,dy = \oint_C P\,dx + Q\,dy\]
77+
78+
8. Taylor series:
79+
\[f(x) = \sum\_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x-a)^n\]
80+
</x-message>
81+
<x-message>
82+
## Mixed Usage Examples
83+
84+
9. Quantum mechanics:
85+
The Schrödinger equation \(\hat{H}\Psi = E\Psi\) can be written in position basis as:
86+
$$ -\frac{\hbar^2}{2m}\frac{d^2\Psi}{dx^2} + V(x)\Psi = E\Psi $$
87+
88+
10. Statistics:
89+
If \(X \sim N(\mu, \sigma^2)\), then its probability density function is:
90+
$$ f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}} $$
91+
92+
11. Linear Algebra:
93+
For a matrix \(A\), its determinant can be computed as:
94+
\[\det(A) = \sum*{\sigma \in S_n} \text{sgn}(\sigma) \prod*{i=1}^n a\_{i,\sigma(i)}\]
95+
</x-message>
96+
</template>
97+
<main id="webchat"></main>
98+
<script>
99+
run(async function () {
100+
await host.windowSize(640, 720, document.getElementById('webchat'));
101+
102+
const {
103+
WebChat: { renderWebChat }
104+
} = window; // Imports in UMD fashion.
105+
106+
const { directLine, store } = testHelpers.createDirectLineEmulator();
107+
108+
renderWebChat({ directLine, store }, document.getElementById('webchat'));
109+
110+
await pageConditions.uiConnected();
111+
112+
const messages = Array.from(window.messages.content.querySelectorAll('x-message')).map(el => el.innerText)
113+
for (const message of messages) {
114+
await directLine.emulateIncomingActivity({
115+
text: message,
116+
type: 'message'
117+
});
118+
await host.snapshot('local');
119+
await pageConditions.numActivitiesShown(messages.indexOf(message) + 1);
120+
}
121+
});
122+
</script>
123+
</body>
124+
125+
</html>

0 commit comments

Comments
 (0)