microsoft · compulim · Nov 15, 2024 · Nov 14, 2024 · Nov 14, 2024 · Nov 14, 2024
@@ -91,7 +91,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  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)
 -  Improved avatar display and grouping behavior by fixing rendering issues and activity sender identification, in PR [#5346](https://github.com/microsoft/BotFramework-WebChat/pull/5346), by [@OEvgeny](https://github.com/OEvgeny)
--  Activity "copy" button will use `outerHTML` and `textContent` for clipboard content, in PR [#5378](https://github.com/microsoft/BotFramework-WebChat/pull/5378), by [@compulim](https://github.com/compuilm)
+-  Activity "copy" button will use `outerHTML` and `textContent` for clipboard content, in PR [#5378](https://github.com/microsoft/BotFramework-WebChat/pull/5378), by [@compulim](https://github.com/compulim)
 
 ### Fixed
 
@@ -108,6 +108,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Fixed [#5350](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5350). Bundled `shiki` in component package, in PR [#5349](https://github.com/microsoft/BotFramework-WebChat/pull5349), by [@compulim](https://github.com/compulim)
 -  Fixed modal dialog rendering to prevent visual flicker and improve UX when opening code views, in PR [#5374](https://github.com/microsoft/BotFramework-WebChat/pull/5374), by [@OEvgeny](https://github.com/OEvgeny)
 -  Fixed math parsing that could cause Web Chat to hang when processing certain LaTeX expressions, in PR [#5377](https://github.com/microsoft/BotFramework-WebChat/pull/5377), by [@OEvgeny](https://github.com/OEvgeny)
+-  Fixed long math formula should be scrollable, in PR [#5380](https://github.com/microsoft/BotFramework-WebChat/pull/5380), by [@compulim](https://github.com/compulim)
 
 # Removed
 

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <script>
+      location = './layout.scroll?theme=light&variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/fluent-bundle.production.min.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          Fluent: { createDarkTheme, createLightTheme, FluentProvider },
+          ReactDOMClient: { createRoot },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+        const searchParams = new URLSearchParams(location.search);
+
+        const App = () => <ReactWebChat directLine={directLine} store={store} />;
+
+        const customBrandRamp = {
+          10: '#124C32',
+          20: '#1A5B3E',
+          30: '#216A4A',
+          40: '#297956',
+          50: '#308861',
+          60: '#38976D',
+          70: '#40A779',
+          80: '#158051',
+          90: '#4FC590',
+          100: '#56D49C',
+          110: '#5EE3A8',
+          120: '#79E8B7',
+          130: '#94ECC5',
+          140: '#AFF1D3',
+          150: '#C9F6E2',
+          160: '#E4FAF1'
+        };
+
+        const root = createRoot(document.getElementById('webchat'));
+
+        if (searchParams.get('variant') === 'copilot' || searchParams.get('variant') === 'fluent') {
+          root.render(
+            <FluentProvider
+              theme={
+                searchParams.get('theme') === 'dark'
+                  ? createDarkTheme(customBrandRamp)
+                  : createLightTheme(customBrandRamp)
+              }
+            >
+              <FluentThemeProvider variant={searchParams.get('variant') || ''}>
+                <App />
+              </FluentThemeProvider>
+            </FluentProvider>
+          );
+        } else {
+          root.render(<App />);
+        }
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          type: 'message',
+          from: {
+            role: 'bot'
+          },
+          text: 'To calculate the number of oranges in a crate, you can use a few different methods depending on the information you have. Here are some formulae that might help:\n\n1. **Volume Method**:\n   If you know the volume of the crate and the average volume of an orange, you can estimate the number of oranges.\n   \\[\n   \\text{Number of Oranges} = \\frac{\\text{Volume of Crate}}{\\text{Average Volume of an Orange}}\n   \\]\n\n2. **Weight Method**:\n   If you know the total weight of the crate and the average weight of an orange, you can use this formula.\n   \\[\n   \\text{Number of Oranges} = \\frac{\\text{Total Weight of Crate}}{\\text{Average Weight of an Orange}}\n   \\]\n\n3. **Layer Method**:\n   If you know the dimensions of the crate and the average dimensions of an orange, you can calculate how many layers of oranges fit in the crate.\n   \\[\n   \\text{Number of Oranges} = \\left(\\frac{\\text{Length of Crate}}{\\text{Average Diameter of an Orange}}\\right) \\times \\left(\\frac{\\text{Width of Crate}}{\\text{Average Diameter of an Orange}}\\right) \\times \\left(\\frac{\\text{Height of Crate}}{\\text{Average Diameter of an Orange}}\\right)\n   \\]\n\nThese methods can give you a good estimate. Do you have specific measurements or weights for your crate and oranges? That would help in applying these formulae more accurately.'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -70,7 +70,10 @@ export default function createMarkdownStyle() {
       '& [data-math-type=block] math': {
         alignItems: 'center',
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        overflowX: 'auto',
+        overflowY: 'clip',
+        scrollbarWidth: 'thin'
       },
 
       '& [data-math-type=inline] math': {
@@ -79,6 +82,10 @@ export default function createMarkdownStyle() {
         flexDirection: 'column'
       },
 
+      '& :is([data-math-type=block], [data-math-type=inline]) > span': {
+        display: 'contents'
+      },
+
       '& .webchat__render-markdown__code-block': {
         whiteSpace: 'pre-wrap'
       }

@@ -224,7 +224,8 @@
 
 /* Scrollbars */
 :global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),
-:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__code-body) {
+:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__code-body),
+:global(.webchat-fluent).theme :global(.webchat__render-markdown [data-math-type='block'] math) {
   /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
   scrollbar-color: unset;
   scrollbar-width: unset;
@@ -233,6 +234,7 @@
   -moz-scrollbar-width: thin;
 
   &::-webkit-scrollbar {
+    height: var(--webchat-spacingVerticalMNudge);
     width: var(--webchat-spacingVerticalMNudge);
     visibility: hidden;
   }
@@ -242,6 +244,7 @@
   }
 
   &:hover::-webkit-scrollbar {
+    height: var(--webchat-spacingVerticalMNudge);
     width: var(--webchat-spacingVerticalMNudge);
   }