Skip to content

Commit 8ac01bf

Browse files
OEvgenyOEvgeny
authored
feat: switch to TeX style math blocks (#5353)
* feat: switch to Tex style math blocks * Changelog * Update package deps
1 parent a49da14 commit 8ac01bf

21 files changed

+405
-50
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
8989
- 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)
9090
- 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)
9191
- 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)
92+
- 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)
9293

9394
### Fixed
9495

‎__tests__/html2/markdown/math.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,29 +30,29 @@
3030
3131
1. Determine the number of shares you could buy on 1/1/2018:
3232
33-
$$
33+
\\[
3434
\\text{Number of shares} = \\frac{\\text{Investment amount}}{\\text{Stock price purchase date}} = \\frac{1000}{85.95}
35-
$$
35+
\\]
3636
3737
2. Calculate the total value when selling the shares on 12/1/2021:
3838
39-
$$
39+
\\[
4040
\\text{Total value} = \\text{Number of shares} \\times \\text{Stock price on sale date}
41-
$$
41+
\\]
4242
4343
Let's do the math:
4444
4545
1. Number of shares you could buy on 1/1/2018:
4646
47-
$$
47+
\\[
4848
\\text{Number of shares} = \\frac{1000}{85.95} \\approx 11.63\\text{ shares}
49-
$$
49+
\\]
5050
5151
2. Total value when selling the shares on 12/1/2021:
5252
53-
$$
53+
\\[
5454
\\text{Total value} = 11.63 \\times 330.08 \\approx \\$3839.63
55-
$$
55+
\\]
5656
5757
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.
5858
`,

‎__tests__/html2/markdown/math2.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@
2626
await directLine.emulateIncomingActivity({
2727
text: `I've graphed the parametric equations you provided. Here's the result:
2828
29-
$$
29+
\\[
3030
x = \\sin(t)(e^{\\cos(t)}-2\\cos(4t)-\\sin^{5}(\\frac{t}{12}))
31-
$$
32-
$$
31+
\\]
32+
\\[
3333
y = \\cos(t)(e^{\\cos(t)}-2\\cos(4t)-\\sin^{5}(\\frac{t}{12}))
34-
$$
34+
\\]
3535
3636
The graph is a representation of these equations plotted over a range of ( t ) values from 0 to ( 2\\pi ).`,
3737
type: 'message'

‎__tests__/html2/markdown/math2.html.snap-1.png

46 Bytes
Loading

‎__tests__/html2/markdown/math3.html

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
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+
## Basic Math
24+
25+
1. Simple arithmetic:
26+
\(2 + 2 = 4\)
27+
28+
2. Fractions:
29+
\[\frac{1}{2} + \frac{1}{3} = \frac{5}{6}\]
30+
31+
## Algebra
32+
33+
3. Quadratic formula:
34+
\[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\]
35+
36+
4. Binomial expansion:
37+
\[(x + y)^2 = x^2 + 2xy + y^2\]
38+
</x-message>
39+
<x-message>
40+
## Calculus
41+
42+
5. Derivative notation:
43+
\[\frac{d}{dx} x^n = nx^{n-1}\]
44+
45+
6. Integration:
46+
\[\int_0^1 x^2 dx = \frac{1}{3}\]
47+
48+
7. Taylor series:
49+
\[e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!}\]
50+
51+
## Linear Algebra
52+
53+
8. Matrix multiplication:
54+
\[
55+
\begin{pmatrix}
56+
a & b \\
57+
c & d
58+
\end{pmatrix}
59+
\begin{pmatrix}
60+
x \\
61+
y
62+
\end{pmatrix} =
63+
\begin{pmatrix}
64+
ax + by \\
65+
cx + dy
66+
\end{pmatrix}
67+
\]
68+
69+
9. Determinant:
70+
\[\det\begin{pmatrix}
71+
a & b \\
72+
c & d
73+
\end{pmatrix} = ad - bc\]
74+
</x-message>
75+
<x-message>
76+
## Physics
77+
78+
10. Einstein's mass-energy equivalence:
79+
\[E = mc^2\]
80+
81+
11. Schrödinger equation:
82+
\[i\hbar\frac{\partial}{\partial t}\Psi = \hat{H}\Psi\]
83+
84+
## Invalid input examples
85+
86+
12. Wrong expression is rendered:
87+
\(2++2\)
88+
89+
13. Inline closing delimeter is required:
90+
\(x^2
91+
92+
14. Katex syntax error:
93+
\[\int_0^\infty e^{-x} dx = 1 +}\]
94+
</x-message>
95+
</template>
96+
<main id="webchat"></main>
97+
<script>
98+
run(async function () {
99+
await host.windowSize(640, 720, document.getElementById('webchat'));
100+
101+
const {
102+
WebChat: { renderWebChat }
103+
} = window; // Imports in UMD fashion.
104+
105+
const { directLine, store } = testHelpers.createDirectLineEmulator();
106+
107+
renderWebChat({ directLine, store }, document.getElementById('webchat'));
108+
109+
await pageConditions.uiConnected();
110+
111+
const messages = Array.from(window.messages.content.querySelectorAll('x-message')).map(el => el.innerText)
112+
for (const message of messages) {
113+
await directLine.emulateIncomingActivity({
114+
text: message,
115+
type: 'message'
116+
});
117+
await host.snapshot('local');
118+
await pageConditions.numActivitiesShown(messages.indexOf(message) + 1);
119+
}
120+
});
121+
</script>
122+
</body>
123+
124+
</html>

‎__tests__/html2/markdown/math3.html.snap-1.png

27.7 KB
Loading

‎__tests__/html2/markdown/math3.html.snap-2.png

42.4 KB
Loading

‎__tests__/html2/markdown/math3.html.snap-3.png

50.5 KB
Loading

‎__tests__/html2/markdown/math4.html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
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+
## Basic Notation
24+
25+
Regular text with inline math \(x + y\) in the middle of a sentence.
26+
27+
## Variables and Exponents
28+
29+
1. Powers: Let's calculate \(x^2\) and \(y^3\)
30+
2. Subscripts: The sequence \(a_1, a_2, ..., a_n\)
31+
3. Both: Temperature is \(T_{room} = 20^{\circ}C\)
32+
33+
## Greek Letters
34+
35+
1. Common variables: \(\alpha\), \(\beta\), \(\gamma\), \(\theta\)
36+
2. Physics constants: Planck's constant \(\hbar\)
37+
3. Math constants: \(\pi \approx 3.14159\)
38+
</x-message>
39+
<x-message>
40+
## Operators
41+
42+
1. Multiplication: \(5 \times 4\), \(5 \cdot 4\)
43+
2. Division: \(a \div b\), \(\frac{a}{b}\)
44+
3. Plus/minus: \(x \pm y\)
45+
46+
## Functions
47+
48+
1. Trigonometry: \(\sin(x)\), \(\cos(x)\), \(\tan(x)\)
49+
2. Logarithms: \(\log(x)\), \(\ln(x)\)
50+
3. Limits: \(\lim_{x \to \infty}\)
51+
52+
## Special Symbols
53+
54+
1. Infinity: \(\infty\)
55+
2. Approximately: \(\approx\)
56+
3. Not equal: \(\neq\)
57+
4. Less than or equal: \(\leq\)
58+
5. Greater than or equal: \(\geq\)
59+
</x-message>
60+
<x-message>
61+
## Complex Examples
62+
63+
1. Chemical equation: \(H_2O + CO_2 \rightarrow H_2CO_3\)
64+
2. Physics formula: \(F = ma\)
65+
3. Statistics: \(\bar{x} = \frac{1}{n}\sum_{i=1}^n x_i\)
66+
4. Probability: \(P(A|B) = \frac{P(B|A)P(A)}{P(B)}\)
67+
68+
## Common Errors to Avoid
69+
70+
1. Closing parenthesis is required: \(x^2
71+
2. Invalid operator is rendered: \(5 +* 3\)
72+
3. Syntax error renders error: \([\frac{1}{2\)
73+
</x-message>
74+
</template>
75+
<main id="webchat"></main>
76+
<script>
77+
run(async function () {
78+
await host.windowSize(640, 720, document.getElementById('webchat'));
79+
80+
const {
81+
WebChat: { renderWebChat }
82+
} = window; // Imports in UMD fashion.
83+
84+
const { directLine, store } = testHelpers.createDirectLineEmulator();
85+
86+
renderWebChat({ directLine, store }, document.getElementById('webchat'));
87+
88+
await pageConditions.uiConnected();
89+
90+
const messages = Array.from(window.messages.content.querySelectorAll('x-message')).map(el => el.innerText)
91+
for (const message of messages) {
92+
await directLine.emulateIncomingActivity({
93+
text: message,
94+
type: 'message'
95+
});
96+
await host.snapshot('local');
97+
await pageConditions.numActivitiesShown(messages.indexOf(message) + 1);
98+
}
99+
});
100+
</script>
101+
</body>
102+
103+
</html>

‎__tests__/html2/markdown/math4.html.snap-1.png

47.7 KB
Loading

‎__tests__/html2/markdown/math4.html.snap-2.png

75.5 KB
Loading

‎__tests__/html2/markdown/math4.html.snap-3.png

78.5 KB
Loading

‎package-lock.json

Lines changed: 3 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/bundle/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,12 +127,13 @@
127127
"botframework-webchat-core": "0.0.0-0",
128128
"classnames": "2.5.1",
129129
"core-js": "3.37.0",
130+
"katex": "^0.16.11",
130131
"math-random": "2.0.1",
131132
"mdast-util-from-markdown": "2.0.0",
132133
"memoize-one": "6.0.0",
133134
"micromark": "^4.0.0",
134135
"micromark-extension-gfm": "^3.0.0",
135-
"micromark-extension-math": "^3.1.0",
136+
"micromark-util-character": "^2.1.0",
136137
"microsoft-cognitiveservices-speech-sdk": "1.17.0",
137138
"prop-types": "15.8.1",
138139
"punycode": "2.3.1",
@@ -163,6 +164,7 @@
163164
"esbuild": "^0.21.1",
164165
"isomorphic-react": "^0.0.0-0",
165166
"isomorphic-react-dom": "^0.0.0-0",
167+
"micromark-util-types": "^2.0.0",
166168
"tsd": "^0.31.0",
167169
"type-fest": "^4.18.2",
168170
"typescript": "^5.4.5"

‎packages/bundle/src/markdown/mathExtension/constants.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const BACKSLASH = 92; // '\'
2+
export const OPEN_PAREN = 40; // '('
3+
export const CLOSE_PAREN = 41; // ')'
4+
export const OPEN_BRACKET = 91; // '['
5+
export const CLOSE_BRACKET = 93; // ']'

0 commit comments

Comments
 (0)