Fluent: starter prompt placeholder state (#5270)

OEvgeny · web-flow · commit 453480281e39 · 2024-08-29T18:15:48.000-07:00
* Fluent: starter prompt placeholder state

* Changelog

* Tests and fix disabled
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -43,6 +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), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Changed
 
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-pre-placeholder-1-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-pre-placeholder-1-snap.png
diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-pre-placeholder-1-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-pre-placeholder-1-snap.png
diff --git a/__tests__/html/fluentTheme/side-by-side.wide.dark.html b/__tests__/html/fluentTheme/side-by-side.wide.dark.html
@@ -377,6 +377,22 @@
 [7]: cite:1 \"Meet the Contoso Team\"`,
           "type": "message"
         }
+      ], [
+        {
+          timestamp: timestamp(),
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              keywords: ['PreChatMessage'],
+              type: 'https://schema.org/Message',
+              creativeWorkStatus: "Placeholder"
+            }
+          ],
+          text: `<img alt="" src="data:image/png;base64,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" />\n\n## New Copilot extension\n\nDescription`,
+          type: 'message'
+        }
       ]];
 
       const leftStore = testHelpers.createStore();
diff --git a/__tests__/html/fluentTheme/side-by-side.wide.dark.js b/__tests__/html/fluentTheme/side-by-side.wide.dark.js
@@ -4,5 +4,6 @@ describe('Fluent theme applied', () => {
   describe('dark theme applied', () => {
     test('side by side left - transcript, right - pre chat message', () => runHTML('fluentTheme/side-by-side.wide.dark?focus=1'));
     test('side by side left - transcript, right - transcript', () => runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=2&focus=0&focus=1'));
+    test('side by side left - transcript, right - pre placeholder', () => runHTML('fluentTheme/side-by-side.wide.dark?transcript=0&transcript=3'));
   });
 });
diff --git a/__tests__/html/fluentTheme/side-by-side.wide.html b/__tests__/html/fluentTheme/side-by-side.wide.html
@@ -384,6 +384,22 @@
 [7]: cite:1 \"Meet the Contoso Team\"`,
           "type": "message"
         }
+      ], [
+        {
+          timestamp: timestamp(),
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              keywords: ['PreChatMessage'],
+              type: 'https://schema.org/Message',
+              creativeWorkStatus: "Placeholder"
+            }
+          ],
+          text: `<img alt="" src="data:image/png;base64,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" />\n\n## New Copilot extension\n\nDescription`,
+          type: 'message'
+        }
       ]];
 
       const leftStore = testHelpers.createStore();
diff --git a/__tests__/html/fluentTheme/side-by-side.wide.js b/__tests__/html/fluentTheme/side-by-side.wide.js
@@ -3,4 +3,5 @@
 describe('Fluent theme applied', () => {
   test('side by side left - transcript, right - pre chat message', () => runHTML('fluentTheme/side-by-side.wide?focus=1'));
   test('side by side left - transcript, right - transcript', () => runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=2&focus=0&focus=1'));
+  test('side by side left - transcript, right - pre placeholder', () => runHTML('fluentTheme/side-by-side.wide?transcript=0&transcript=3'));
 });
diff --git a/packages/core/src/types/external/OrgSchema/CreativeWork.ts b/packages/core/src/types/external/OrgSchema/CreativeWork.ts
@@ -35,6 +35,13 @@ export type CreativeWork = Thing & {
    */
   citation?: readonly CreativeWork[] | undefined;
 
+  /**
+   * The schema.org [creativeWorkStatus](https://schema.org/creativeWorkStatus) property.
+   *
+   * The status of a creative work in terms of its stage in a lifecycle. Example terms include Incomplete, Draft, Published, Obsolete. Some organizations define a set of terms for the stages of their publication lifecycle.
+   */
+  creativeWorkStatus?: string | undefined;
+
   /**
    * Keywords or tags used to describe some item. Multiple textual entries in a keywords list are typically delimited by commas, or by repeating the property.
    *
diff --git a/packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.module.css b/packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.module.css
@@ -17,6 +17,10 @@
   text-align: center;
 }
 
+:global(.webchat-fluent) .pre-chat-message-activity__body--placeholder {
+  opacity: 60%;
+}
+
 :global(.webchat-fluent) .pre-chat-message-activity__body h2 {
   color: var(--webchat-colorNeutralForeground1);
   font-family: inherit;
diff --git a/packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.tsx b/packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.tsx
@@ -1,9 +1,12 @@
+/* eslint-disable react/no-danger */
 import { hooks } from 'botframework-webchat-component';
-import { type WebChatActivity } from 'botframework-webchat-core';
-import React, { memo, useMemo } from 'react';
+import cx from 'classnames';
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+import React, { Fragment, memo, useMemo } from 'react';
 import { useStyles } from '../../styles/index.js';
 import styles from './PreChatMessageActivity.module.css';
 import StarterPromptsToolbar from './StarterPromptsToolbar.js';
+import StarterPromptsCardAction from './StarterPromptsCardAction.js';
 
 type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
 
@@ -18,14 +21,30 @@ const PreChatMessageActivity = ({ activity }: Props) => {
     [activity.text, renderMarkdownAsHTML]
   );
 
+  const entity = getOrgSchemaMessage(activity?.entities || []);
+  const isPlaceHolder = entity?.keywords?.includes('PreChatMessage') && entity.creativeWorkStatus === 'Placeholder';
+
   return (
     <div className={classNames['pre-chat-message-activity']}>
-      {/* eslint-disable-next-line react/no-danger */}
-      <div className={classNames['pre-chat-message-activity__body']} dangerouslySetInnerHTML={html} />
+      <div
+        className={cx(
+          classNames['pre-chat-message-activity__body'],
+          isPlaceHolder && classNames['pre-chat-message-activity__body--placeholder']
+        )}
+        dangerouslySetInnerHTML={html}
+      />
       <StarterPromptsToolbar
         cardActions={activity.suggestedActions?.actions || []}
         className={classNames['pre-chat-message-activity__toolbar']}
-      />
+      >
+        {isPlaceHolder && (
+          <Fragment>
+            <StarterPromptsCardAction />
+            <StarterPromptsCardAction />
+            <StarterPromptsCardAction />
+          </Fragment>
+        )}
+      </StarterPromptsToolbar>
     </div>
   );
 };
diff --git a/packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css b/packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css
@@ -22,21 +22,45 @@
   }
 
   &:disabled {
+    cursor: default;
+  }
+
+  &:disabled:not(:empty) {
     background-color: var(--webchat-colorNeutralBackgroundDisabled);
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     background-color: var(--webchat-colorNeutralBackground1Hover);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     background-color: var(--webchat-colorNeutralBackground1Pressed);
   }
 
   &:focus-visible {
     outline: solid 2px var(--webchat-colorStrokeFocus2);
     outline-offset: -2px;
   }
+
+  &:empty::before {
+    content: '';
+    display: block;
+    width: 66%;
+    height: 18px;
+    background-color: var(--webchat-colorNeutralBackground6);
+    border-radius: 18px;
+    opacity: 1;
+  }
+
+  &:empty::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 16px;
+    background-color: var(--webchat-colorNeutralBackground6);
+    border-radius: 16px;
+    opacity: 0.8;
+  }
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__card-action-image {
diff --git a/packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.tsx b/packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.tsx
diff --git a/packages/fluent-theme/src/components/preChatActivity/StarterPromptsToolbar.tsx b/packages/fluent-theme/src/components/preChatActivity/StarterPromptsToolbar.tsx
