Polish blueprint mode of pre-chat starter prompts (#5279)

* Adds RTL

* Fix gap in blueprint

* Add entry

* Update packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css

Co-authored-by: Eugene <[email protected]>

* Update packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css

Co-authored-by: Eugene <[email protected]>

* Update packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css

Co-authored-by: Eugene <[email protected]>

* Use gap instead

* Move CSS rule order

* Fix flakiness

* Update snapshots

* Revert "Update snapshots"

This reverts commit 350baff.

* Use row gap

* Fix layout

---------

Co-authored-by: Eugene <[email protected]>

CHANGELOG.md

@@ -43,7 +43,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Introduced centralized announcements approach via the new `usePushToLiveRegion` hook, in PR [#5251](https://github.com/microsoft/BotFramework-WebChat/pull/5251), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added keyboard shortcut for the "New Messages" button, in PR [#5251](https://github.com/microsoft/BotFramework-WebChat/pull/5251), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added decorators for loading and completion states to the Fluent theme, in PR [#5269](https://github.com/microsoft/BotFramework-WebChat/pull/5269), by [@OEvgeny](https://github.com/OEvgeny)
--  Added placeholder state for starter prompts in the Fluent theme, in PR [#5270](https://github.com/microsoft/BotFramework-WebChat/pull/5270) and [#5276](https://github.com/microsoft/BotFramework-WebChat/pull/5276), by [@OEvgeny](https://github.com/OEvgeny) and [@compulim](https://github.com/compulim)
+-  Added blueprint of starter prompts in the Fluent theme, in PR [#5270](https://github.com/microsoft/BotFramework-WebChat/pull/5270), [#5276](https://github.com/microsoft/BotFramework-WebChat/pull/5276) and [#5279](https://github.com/microsoft/BotFramework-WebChat/pull/5279), by [@OEvgeny](https://github.com/OEvgeny) and [@compulim](https://github.com/compulim)
 -  Added support for liner message activities in the Fluent theme, in PR [#5272](https://github.com/microsoft/BotFramework-WebChat/pull/5272), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added new `uiState` props and `useUIState` hook, in PR [#5276](https://github.com/microsoft/BotFramework-WebChat/pull/5276), by [@compulim](https://github.com/compulim)
 

__tests__/html/fluentTheme/uiState.html

@@ -28,7 +28,8 @@
 
         const { directLine, store } = testHelpers.createDirectLineEmulator();
 
-        const theme = new URLSearchParams(location.search).get('theme');
+        const searchParams = new URLSearchParams(location.search);
+        const theme = searchParams.get('theme');
 
         await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
           features: [
@@ -71,7 +72,7 @@
           root.render(
             <FluentProvider className="fluent-provider" theme={theme}>
               <FluentThemeProvider variant="fluent">
-                <ReactWebChat directLine={directLine} store={store} uiState={uiState} />
+                <ReactWebChat dir={searchParams.get('dir')} directLine={directLine} store={store} uiState={uiState} />
               </FluentThemeProvider>
             </FluentProvider>
           );

__tests__/html/fluentTheme/uiState.js

@@ -2,5 +2,6 @@
 
 describe('Fluent theme applied', () => {
   test('UI state should display properly in dark theme', () => runHTML('fluentTheme/uiState?theme=dark'));
+  test('UI state should display properly in dark theme and RTL', () => runHTML('fluentTheme/uiState?dir=rtl&theme=dark'));
   test('UI state should display properly in light theme', () => runHTML('fluentTheme/uiState?theme=light'));
 });

packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css

@@ -7,7 +7,7 @@
   color: var(--webchat-colorNeutralForeground1);
   cursor: pointer;
   display: grid;
-  gap: 8px;
+  gap: var(--webchat-spacingVerticalS);
   grid-template-areas: 'title' 'subtitle';
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
@@ -25,6 +25,7 @@
   &[aria-disabled='true'],
   &:empty {
     cursor: default;
+    row-gap: 14px;
   }
 
   &[aria-disabled='true']:not(:empty) {
@@ -44,18 +45,9 @@
     outline-offset: -2px;
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    &:empty::after,
-    &:empty::before {
-      animation-duration: 3s;
-      animation-iteration-count: infinite;
-      animation-name: blueprintAnimation;
-      animation-timing-function: linear;
-    }
-  }
-
   &:empty::after,
   &:empty::before {
+    animation: blueprintAnimation 3s linear infinite;
     background-attachment: fixed;
     background-image: linear-gradient(
       -90deg,
@@ -68,6 +60,22 @@
     display: block;
   }
 
+  /* animation-* needs to position after animation shorthand. */
+  @media (prefers-reduced-motion: reduce) {
+    &:empty::after,
+    &:empty::before {
+      animation-delay: -1s;
+      animation-play-state: paused;
+    }
+  }
+
+  &:dir(rtl) {
+    &:empty::after,
+    &:empty::before {
+      animation-direction: reverse;
+    }
+  }
+
   &:empty::after {
     border-radius: 16px;
     height: 16px;

packages/test/page-object/src/globals/pageObjects/uploadFile.js

@@ -1,5 +1,8 @@
+import allOutgoingActivitiesSent from '../pageConditions/allOutgoingActivitiesSent';
 import getUploadButton from '../pageElements/uploadButton';
 
-export default function uploadFile(filename) {
-  return host.upload(getUploadButton(), filename);
+export default async function uploadFile(filename, { waitForSend = true } = {}) {
+  await host.upload(getUploadButton(), filename);
+
+  waitForSend && (await allOutgoingActivitiesSent());
 }