Add pre-chat message with starter prompts (#5255)

* Add pre-chat message with starter prompts * Add pre-chat message * useSuggestedActions: add origin activity * Add maxMessageLength.infinity test * Incorp PR changes * Apply PR suggestions * Flush on CSS vars
microsoft · Aug 7, 2024 · dfe788c · dfe788c
1 parent 516e73e
commit dfe788c
Show file tree

Hide file tree

Showing 36 changed files with 771 additions and 78 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,18 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 
 -  `styleOptions.bubbleImageHeight` is being deprecated in favor of `styleOptions.bubbleImageMaxHeight` and `styleOptions.bubbleImageMinHeight`. The option will be removed on or after 2026-07-05
 
+### Added
+
+-  (Experimental) Added pre-chat message with starter prompts, in PR [#5255](https://github.com/microsoft/BotFramework-WebChat/issues/5255), by [@compulim](https://github.com/compulim)
+
+### Changed
+
+-  Updated `useSuggestedActions` to return the activity the suggested actions originated from, in PR [#5255](https://github.com/microsoft/BotFramework-WebChat/issues/5255), by [@compulim](https://github.com/compulim)
+
+### Fixed
+
+-  Fixed [#5256](https://github.com/microsoft/BotFramework-WebChat/issues/5256). `styleOptions.maxMessageLength` should support any JavaScript number value including `Infinity`, by [@compulim](https://github.com/compulim), in PR [#5255](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5255)
+
 ## [4.18.0] - 2024-07-10
 
 ### Added

diff --git a/...inity-js-fluent-theme-applied-handles-max-message-length-of-infinity-1-snap.png b/...inity-js-fluent-theme-applied-handles-max-message-length-of-infinity-1-snap.png
diff --git a/...age-activity-js-fluent-theme-applied-should-display-pre-chat-message-1-snap.png b/...age-activity-js-fluent-theme-applied-should-display-pre-chat-message-1-snap.png
diff --git a/...-fluent-theme-applied-should-display-pre-chat-message-in-wide-format-1-snap.png b/...-fluent-theme-applied-should-display-pre-chat-message-in-wide-format-1-snap.png
diff --git a/__tests__/html/fluentTheme/maxMessageLength.infinity.html b/__tests__/html/fluentTheme/maxMessageLength.infinity.html
@@ -0,0 +1,46 @@
+<!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="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.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__/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 {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => (
+          <ReactWebChat directLine={directLine} store={store} styleOptions={{ maxMessageLength: Infinity }} />
+        );
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).focus();
+        await host.sendKeys('Occaecat sunt eu enim tempor cillum laboris esse esse.');
+
+        // THEN: Should not show the message length indicator.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/fluentTheme/maxMessageLength.infinity.js b/__tests__/html/fluentTheme/maxMessageLength.infinity.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('handles max message length of Infinity', () => runHTML('fluentTheme/maxMessageLength.infinity'));
+});
diff --git a/__tests__/html/fluentTheme/preChatMessageActivity.html b/__tests__/html/fluentTheme/preChatMessageActivity.html
diff --git a/__tests__/html/fluentTheme/preChatMessageActivity.js b/__tests__/html/fluentTheme/preChatMessageActivity.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('should display pre-chat message', () => runHTML('fluentTheme/preChatMessageActivity'));
+});
diff --git a/__tests__/html/fluentTheme/preChatMessageActivity.wide.html b/__tests__/html/fluentTheme/preChatMessageActivity.wide.html
diff --git a/__tests__/html/fluentTheme/preChatMessageActivity.wide.js b/__tests__/html/fluentTheme/preChatMessageActivity.wide.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('should display pre-chat message in wide format', () => runHTML('fluentTheme/preChatMessageActivity.wide'));
+});
diff --git a/docs/HOOKS.md b/docs/HOOKS.md
@@ -1355,16 +1355,19 @@ This function will send the text in the send box to the bot and clear the send b
 
 ## `useSuggestedActions`
 
+> New in 4.18.1: Will return the activity which the suggested actions are originated from.
+
 <!-- prettier-ignore-start -->
 ```js
-useSuggestedActions(): [CardAction[], (CardAction[]) => void]
+useSuggestedActions(): [CardAction[], (CardAction[]) => void, { activity: WebChatActivity }]
 ```
 <!-- prettier-ignore-end -->
 
-This hook will return an array and a setter function.
+This hook will return an array, a setter function, and a property bag.
 
 1. array: a list of suggested actions that should be shown to the user
 1. function: a setter function to clear suggested actions. The setter function can only be used to clear suggested actions, and it will accept empty array or falsy value only.
+1. `activity`: the activity which the suggested actions are originated from
 
 The suggested actions are computed from the last message activity sent from the bot. If the user posts an activity, the suggested actions will be cleared.
 

diff --git a/packages/api/src/hooks/useSuggestedActions.ts b/packages/api/src/hooks/useSuggestedActions.ts
@@ -1,11 +1,23 @@
+import type { DirectLineCardAction, WebChatActivity } from 'botframework-webchat-core';
 import { useCallback } from 'react';
-import type { DirectLineCardAction } from 'botframework-webchat-core';
 
 import { useSelector } from './internal/WebChatReduxContext';
 import useWebChatAPIContext from './internal/useWebChatAPIContext';
 
-export default function useSuggestedActions(): [DirectLineCardAction[], (suggestedActions: never[]) => void] {
-  const value = useSelector(({ suggestedActions }) => suggestedActions);
+export default function useSuggestedActions(): [
+  DirectLineCardAction[],
+  (suggestedActions: never[]) => void,
+  extras: { activity: WebChatActivity }
+] {
+  const [value, activity] = useSelector(
+    ({
+      suggestedActions,
+      suggestedActionsOriginActivity: { activity }
+    }: {
+      suggestedActions: readonly DirectLineCardAction[];
+      suggestedActionsOriginActivity: { activity: undefined | WebChatActivity };
+    }) => [suggestedActions, activity]
+  );
   const { clearSuggestedActions } = useWebChatAPIContext();
 
   return [
@@ -19,6 +31,7 @@ export default function useSuggestedActions(): [DirectLineCardAction[], (suggest
         clearSuggestedActions();
       },
       [clearSuggestedActions]
-    )
+    ),
+    { activity }
   ];
 }
diff --git a/...core/src/actions/clearSuggestedActions.js → ...core/src/actions/clearSuggestedActions.ts b/...core/src/actions/clearSuggestedActions.js → ...core/src/actions/clearSuggestedActions.ts
@@ -1,4 +1,4 @@
-const CLEAR_SUGGESTED_ACTIONS = 'WEB_CHAT/CLEAR_SUGGESTED_ACTIONS';
+const CLEAR_SUGGESTED_ACTIONS = 'WEB_CHAT/CLEAR_SUGGESTED_ACTIONS' as const;
 
 export default function clearSuggestedActions() {
   return {

diff --git a/packages/core/src/actions/setSuggestedActions.js b/packages/core/src/actions/setSuggestedActions.js
diff --git a/packages/core/src/actions/setSuggestedActions.ts b/packages/core/src/actions/setSuggestedActions.ts
@@ -0,0 +1,18 @@
+import type { DirectLineCardAction } from '../types/external/DirectLineCardAction';
+import type { WebChatActivity } from '../types/WebChatActivity';
+
+const EMPTY_ARRAY: readonly DirectLineCardAction[] = Object.freeze([]);
+
+const SET_SUGGESTED_ACTIONS = 'WEB_CHAT/SET_SUGGESTED_ACTIONS' as const;
+
+export default function setSuggestedActions(
+  suggestedActions: readonly DirectLineCardAction[] = EMPTY_ARRAY,
+  originActivity: undefined | WebChatActivity = undefined
+) {
+  return {
+    type: SET_SUGGESTED_ACTIONS,
+    payload: { originActivity, suggestedActions }
+  };
+}
+
+export { SET_SUGGESTED_ACTIONS };
diff --git a/packages/core/src/createReducer.ts b/packages/core/src/createReducer.ts
@@ -16,6 +16,7 @@ import sendTimeout from './reducers/sendTimeout';
 import sendTypingIndicator from './reducers/sendTypingIndicator';
 import shouldSpeakIncomingActivity from './reducers/shouldSpeakIncomingActivity';
 import suggestedActions from './reducers/suggestedActions';
+import suggestedActionsOriginActivity from './reducers/suggestedActionsOriginActivity';
 
 import type { GlobalScopePonyfill } from './types/GlobalScopePonyfill';
 
@@ -36,6 +37,7 @@ export default function createReducer(ponyfill: GlobalScopePonyfill) {
     sendTypingIndicator,
     shouldSpeakIncomingActivity,
     suggestedActions,
+    suggestedActionsOriginActivity,
     typing: createTypingReducer(ponyfill)
   });
 }
diff --git a/packages/core/src/reducers/suggestedActions.js b/packages/core/src/reducers/suggestedActions.js
@@ -1,7 +1,7 @@
 import { CLEAR_SUGGESTED_ACTIONS } from '../actions/clearSuggestedActions';
 import { SET_SUGGESTED_ACTIONS } from '../actions/setSuggestedActions';
 
-const DEFAULT_STATE = [];
+const DEFAULT_STATE = Object.freeze([]);
 
 export default function suggestedActions(state = DEFAULT_STATE, { payload = {}, type }) {
   switch (type) {

diff --git a/packages/core/src/reducers/suggestedActionsOriginActivity.ts b/packages/core/src/reducers/suggestedActionsOriginActivity.ts
@@ -0,0 +1,33 @@
+import type clearSuggestedActions from '../actions/clearSuggestedActions';
+import { CLEAR_SUGGESTED_ACTIONS } from '../actions/clearSuggestedActions';
+import type setSuggestedActions from '../actions/setSuggestedActions';
+import { SET_SUGGESTED_ACTIONS } from '../actions/setSuggestedActions';
+import type { WebChatActivity } from '../types/WebChatActivity';
+
+type ClearSuggestedActions = ReturnType<typeof clearSuggestedActions>;
+type SetSuggestedActions = ReturnType<typeof setSuggestedActions>;
+type State = Readonly<{ activity: undefined | WebChatActivity }>;
+
+const DEFAULT_STATE: State = Object.freeze({ activity: undefined });
+
+export default function suggestedActionsOriginActivity(
+  state = DEFAULT_STATE,
+  action: ClearSuggestedActions | SetSuggestedActions
+): State {
+  switch (action.type) {
+    case SET_SUGGESTED_ACTIONS:
+      state = { activity: action.payload.originActivity };
+
+      break;
+
+    case CLEAR_SUGGESTED_ACTIONS:
+      state = DEFAULT_STATE;
+
+      break;
+
+    default:
+      break;
+  }
+
+  return state;
+}
diff --git a/packages/core/src/sagas/queueIncomingActivitySaga.ts b/packages/core/src/sagas/queueIncomingActivitySaga.ts
@@ -1,10 +1,10 @@
 import { call, cancelled, fork, put, race, select, take } from 'redux-saga/effects';
 
-import { QUEUE_INCOMING_ACTIVITY } from '../actions/queueIncomingActivity';
-import activitiesSelector, { ofType as activitiesOfType } from '../selectors/activities';
-import activityFromBot from '../definitions/activityFromBot';
 import incomingActivity, { INCOMING_ACTIVITY } from '../actions/incomingActivity';
+import { QUEUE_INCOMING_ACTIVITY } from '../actions/queueIncomingActivity';
 import setSuggestedActions from '../actions/setSuggestedActions';
+import activityFromBot from '../definitions/activityFromBot';
+import activitiesSelector, { ofType as activitiesOfType } from '../selectors/activities';
 import sleep from '../utils/sleep';
 import whileConnected from './effects/whileConnected';
 
@@ -94,7 +94,13 @@ function* queueIncomingActivity({ userID }: { userID: string }, ponyfill: Global
 
         // If suggested actions is not destined to anyone, or is destined to the user, show it.
         // In other words, if suggested actions is destined to someone else, don't show it.
-        yield put(setSuggestedActions(to?.length && !to.includes(userID) ? null : actions));
+        const suggestedActions = to?.length && !to.includes(userID) ? null : actions;
+
+        if (suggestedActions) {
+          yield put(setSuggestedActions(suggestedActions, lastMessageActivity));
+        } else {
+          yield put(setSuggestedActions());
+        }
       }
     }
   );

diff --git a/packages/fluent-theme/package-lock.json b/packages/fluent-theme/package-lock.json
diff --git a/packages/fluent-theme/package.json b/packages/fluent-theme/package.json
@@ -75,7 +75,8 @@
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",
-    "use-ref-from": "0.1.0"
+    "use-ref-from": "0.1.0",
+    "valibot": "^0.37.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.6"

diff --git a/packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.module.css b/packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.module.css
@@ -0,0 +1,34 @@
+:global(.webchat-fluent) .pre-chat-message-activity {
+  display: grid;
+  grid-template-areas: 'body' 'toolbar';
+  grid-template-rows: auto auto;
+  gap: var(--webchat-spacingHorizontalXXXL);
+  padding: var(--webchat-spacingHorizontalXXXL);
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body {
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: var(--webchat-fontSizeBase300);
+  font-weight: var(--webchat-fontWeightRegular);
+  grid-area: body;
+  line-height: var(--webchat-lineHeightBase300);
+  text-align: center;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body h2 {
+  color: var(--webchat-colorNeutralForeground1);
+  font-family: inherit;
+  font-weight: var(--webchat-fontWeightSemibold);
+  font-size: var(--webchat-fontSizeHero700);
+  line-height: var(--webchat-lineHeightHero700);
+  margin: var(--webchat-spacingVerticalL) 0 0;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body img {
+  border-radius: 4px;
+  height: 64px;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__toolbar {
+  grid-area: toolbar;
+}
diff --git a/packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.tsx b/packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.tsx
@@ -0,0 +1,35 @@
+import { hooks } from 'botframework-webchat-component';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo } from 'react';
+import { useStyles } from '../../styles/index.js';
+import styles from './PreChatMessageActivity.module.css';
+import StarterPromptsToolbar from './StarterPromptsToolbar.js';
+
+type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
+
+const { useRenderMarkdownAsHTML } = hooks;
+
+const PreChatMessageActivity = ({ activity }: Props) => {
+  const classNames = useStyles(styles);
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
+
+  const html = useMemo(
+    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(activity.text || '') } : { __html: '' }),
+    [activity.text, renderMarkdownAsHTML]
+  );
+
+  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} />
+      <StarterPromptsToolbar
+        cardActions={activity.suggestedActions?.actions || []}
+        className={classNames['pre-chat-message-activity__toolbar']}
+      />
+    </div>
+  );
+};
+
+PreChatMessageActivity.displayName = 'PreChatMessageActivity';
+
+export default memo(PreChatMessageActivity);