Fluent: add dedicated loader animation (#5423)

* Fluent: add dedicated loader animation

* Fix failing

* Changelog

* Fix import order

Author: OEvgeny

CHANGELOG.md

@@ -78,6 +78,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    -  New style option supports two values: `'activity-actions'` and `'activity-status'` (default)
    -  When set to `'activity-actions'`, feedback buttons are displayed in the activity actions toolbar
    -  When set to `'activity-status'`, feedback buttons appear in the activity status area (default behavior)
+-  Added support for including activity ID and key into form data indicated by `data-webchat-include-activity-id` and `data-webchat-include-activity-key` attributes, in PR [#5418](https://github.com/microsoft/BotFramework-WebChat/pull/5418), by [@OEvgeny](https://github.com/OEvgeny)
+-  Added dedicated loading animation for messages in preparing state for Fluent theme, in PR [#5423](https://github.com/microsoft/BotFramework-WebChat/pull/5423), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Changed
 
@@ -2037,7 +2039,6 @@ It should check the result from downstream middleware. If it is falsy, it should
 -  Adds Direct Line Speech support, by [@compulim](https://github.com/compulim) in PR [#2621](https://github.com/microsoft/BotFramework-WebChat/pull/2621)
    -  Adds [`[email protected]`](https://npmjs.com/package/microsoft-cognitiveservices-speech-sdk), in PR [#2704](https://github.com/microsoft/BotFramework-WebChat/pull/2704)
 -  Fixes [#2692](https://github.com/microsoft/BotFramework-WebChat/issues/2692). Rename sample 17 to 17.a, by [@corinagum](https://github.com/corinagum) in PR [#2695](https://github.com/microsoft/BotFramework-WebChat/pull/2695)
--  Added support for including activity ID and key into form data indicated by `data-webchat-include-activity-id` and `data-webchat-include-activity-key` attributes, in PR [#5418](https://github.com/microsoft/BotFramework-WebChat/pull/5418), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-streaming-1-snap.png

@@ -501,13 +501,23 @@
           type: 'message'
         }
       ], [
+        {
+          timestamp: timestamp(),
+          from: { "role": "user" },
+          id: "6.0",
+          text: "Start onboarding",
+          type: "message"
+        },
         {
           timestamp: timestamp(),
           from: { role: 'bot' },
-          entities: [aiMessageEntity],
+          entities: [{
+            ...aiMessageEntity,
+            keywords: []
+          }],
           id: "a4c0c01d-c06e-4dde-9278-265c607b545b",
           type: "typing",
-          text: "Processing",
+          text: "Processing your request…",
           channelData: {
             streamType: "informative",
             streamSequence: 1
@@ -532,7 +542,7 @@
           entities: [aiMessageEntity],
           id: "a4c0c01d-c06e-4dde-9278-265c607b545b-82",
           type: "message",
-          text: "Hello there! I'm your Onboarding Buddy, here to guide you through your first days at our company. Let's go over some important information:\n\n- Your **orientation session** is scheduled for tomorrow at **9:00 AM** in the main conference room.\n\n- Don't forget to complete your **new hire paperwork** by the end of this week. This includes your tax forms, benefits enrollment, and emergency contact information.\n\nGood luck!",
+          text: "- Don't forget to complete your **new hire paperwork** by the end of this week. This includes your tax forms, benefits enrollment, and emergency contact information.\n\nGood luck!",
           channelData: {
             streamType: "final",
             streamId: "a4c0c01d-c06e-4dde-9278-265c607b5457",

__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-streaming-1-snap.png

@@ -511,13 +511,23 @@
           type: 'message'
         }
       ], [
+        {
+          timestamp: timestamp(),
+          from: { "role": "user" },
+          id: "6.0",
+          text: "Start onboarding",
+          type: "message"
+        },
         {
           timestamp: timestamp(),
           from: { role: 'bot' },
-          entities: [aiMessageEntity],
+          entities: [{
+            ...aiMessageEntity,
+            keywords: []
+          }],
           id: "a4c0c01d-c06e-4dde-9278-265c607b545b",
           type: "typing",
-          text: "Processing",
+          text: "Processing your request…",
           channelData: {
             streamType: "informative",
             streamSequence: 1
@@ -542,7 +552,7 @@
           entities: [aiMessageEntity],
           id: "a4c0c01d-c06e-4dde-9278-265c607b545b-82",
           type: "message",
-          text: "Hello there! I'm your Onboarding Buddy, here to guide you through your first days at our company. Let's go over some important information:\n\n- Your **orientation session** is scheduled for tomorrow at **9:00 AM** in the main conference room.\n\n- Don't forget to complete your **new hire paperwork** by the end of this week. This includes your tax forms, benefits enrollment, and emergency contact information.\n\nGood luck!",
+          text: "- Don't forget to complete your **new hire paperwork** by the end of this week. This includes your tax forms, benefits enrollment, and emergency contact information.\n\nGood luck!",
           channelData: {
             streamType: "final",
             streamId: "a4c0c01d-c06e-4dde-9278-265c607b5457",

__tests__/__image_snapshots__/html/with-builtin-decorator-js-fluent-theme-applied-with-decorators-1-snap.png

@@ -145,6 +145,12 @@
   &:has(:global(.border-loader)) {
     width: 100%;
   }
+
+  /* Ensure activity loader doesn't have bubble and shadow */
+  &:has(:global(.activity-loader)) :global(.webchat__bubble__content) {
+    background: transparent;
+    box-shadow: none;
+  }
 }
 
 /* Message bubble content */

__tests__/html/fluentTheme/side-by-side.wide.dark.html

@@ -0,0 +1,10 @@
+:global(.webchat-fluent) .activity-loader {
+  flex: none;
+  height: 8px;
+  margin: var(--webchat-spacingHorizontalM) 0 0 18px;
+  width: auto;
+
+  &.variant-fluent {
+    margin: 0 0 var(--webchat-spacingHorizontalM) var(--webchat-spacingVerticalSNudge);
+  }
+}

__tests__/html/fluentTheme/side-by-side.wide.html

@@ -0,0 +1,27 @@
+import { useStyles } from 'botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { Fragment, memo, type ReactNode } from 'react';
+
+import { useVariantClassName } from '../../styles';
+import styles from './ActivityLoader.module.css';
+
+const loadingAnimationUrl =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCA0MDAgMjAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHgyPSIxMDAlIiB5MT0iMCIgeTI9IjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAlIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdG9wLWNvbG9yIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iI2FkNWFlMTsjYWQ1YWUxOyMwRTk0RTE7IzBFOTRFMTsjNjY5ZmMyOyM2NjlmYzI7I2FkNWFlMSIvPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjUwJSI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3RvcC1jb2xvciIgZHVyPSIycyIga2V5VGltZXM9IjA7MC4yOzAuMzM7MC41OzAuNjY7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IiNlOTYxOGQ7I2U5NjE4ZDsjNTdBQjgyOyM1N0FCODI7IzYzNzdlMDsjNjM3N2UwOyNlOTYxOGQiLz48L3N0b3A+PHN0b3Agb2Zmc2V0PSIxMDAlIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdG9wLWNvbG9yIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iI2ZkOWU1ZjsjZmQ5ZTVmOyNDNkMyMjU7I0M2QzIyNTsjOWI4MGVjOyM5YjgwZWM7I2ZkOWU1ZiIvPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSJ1cmwoI2EpIj48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuNTswLjY2OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjI2OzI2OzA7MCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDszMDszMDsyMDsyMCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuNTswLjY2OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjE7MTswOzAiLz48L3JlY3Q+PHJlY3QgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNjI7NjI7NzI7NzI7MjY7MjY7MCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMTA0OzEwNDsyMDsyMDs3MDs3MDsyMCIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxOzE7MCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIxODI7MTgyOzEwODsxMDg7MTEyOzExMjsyNiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDs2MDs2MDsyMDsyMCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMTg7MjE4OzE4NDsxODQ7MTQ4OzE0ODs2MiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNjA7NjA7ODA7ODA7NDA7NDA7MTA0Ii8+PC9yZWN0PjxyZWN0IGhlaWdodD0iMjAiIHJ4PSIxMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieCIgZHVyPSIycyIga2V5VGltZXM9IjA7MC4yOzAuMzM7MC41OzAuNjY7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjI5NDsyOTQ7MjgwOzI4MDsyMDQ7MjA0OzE4MiIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IndpZHRoIiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNDA7NDA7MjA7MjA7ODA7ODA7MjAiLz48L3JlY3Q+PHJlY3QgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMzUwOzM1MDszMTY7MzE2OzMwMDszMDA7MjE4Ii8+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0id2lkdGgiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIyMDsyMDs2MDs2MDsyMDsyMDs2MCIvPjwvcmVjdD48cmVjdCBoZWlnaHQ9IjIwIiByeD0iMTAiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMnMiIGtleVRpbWVzPSIwOzAuMjswLjMzOzAuNTswLjY2OzAuODsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIzODY7Mzg2OzM5MjszOTI7MzM2OzMzNjsyOTQiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ3aWR0aCIgZHVyPSIycyIga2V5VGltZXM9IjA7MC41OzAuNjY7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMjA7MjA7NDA7NDAiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjU7MC42NjsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgdmFsdWVzPSIwOzA7MTsxIi8+PC9yZWN0PjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcng9IjEwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjJzIiBrZXlUaW1lcz0iMDswLjI7MC4zMzswLjU7MC42NjswLjg7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iNDIyOzQyMjs0Mjg7NDI4OzM5MjszOTI7MzUwIi8+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgZHVyPSIycyIga2V5VGltZXM9IjA7MC44OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjA7MDsxIi8+PC9yZWN0PjwvZz48L3N2Zz4=';
+
+function FluentActivityLoader({ children }: Readonly<{ children?: ReactNode | undefined }>) {
+  const classNames = useStyles(styles);
+  const variantClassName = useVariantClassName(classNames);
+  return (
+    <Fragment>
+      {children}
+      <img
+        alt=""
+        className={cx(classNames['activity-loader'], variantClassName)}
+        role="presentation"
+        src={loadingAnimationUrl}
+      />
+    </Fragment>
+  );
+}
+
+export default memo(FluentActivityLoader);

packages/fluent-theme/src/components/activity/ActivityDecorator.module.css

@@ -1,9 +1,11 @@
 import { type ActivityMiddleware, type StyleOptions } from 'botframework-webchat-api';
+import { DecoratorComposer, DecoratorMiddleware } from 'botframework-webchat-api/decorator';
 import { Components } from 'botframework-webchat-component';
 import { WebChatDecorator } from 'botframework-webchat-component/decorator';
 import React, { memo, type ReactNode } from 'react';
 
 import { ActivityDecorator } from '../components/activity';
+import ActivityLoader from '../components/activity/ActivityLoader';
 import { isPreChatMessageActivity, PreChatMessageActivity } from '../components/preChatActivity';
 import { PrimarySendBox } from '../components/sendBox';
 import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
@@ -41,6 +43,12 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
 
 const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
+const decoratorMiddleware: DecoratorMiddleware[] = [
+  init =>
+    init === 'activity border' &&
+    (next => request => (request.livestreamingState === 'preparing' ? ActivityLoader : next(request)))
+];
+
 const styles = createStyles();
 
 const fluentStyleOptions: StyleOptions = Object.freeze({
@@ -57,7 +65,9 @@ const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => (
           styleOptions={fluentStyleOptions}
           styles={styles}
         >
-          <WebChatDecorator>{children}</WebChatDecorator>
+          <WebChatDecorator>
+            <DecoratorComposer middleware={decoratorMiddleware}>{children}</DecoratorComposer>
+          </WebChatDecorator>
         </ThemeProvider>
       </TelephoneKeypadProvider>
     </WebChatTheme>