Fluent: sendbox transcript navigation (#5191)

* Fluent: allow transcript scroll when sendbox focused * Rework empty check * Fix failing tests * Changelog --------- Co-authored-by: William Wong <compulim@users.noreply.github.com>
microsoft · May 30, 2024 · 0c29473 · 0c29473
1 parent 5b1dae0
commit 0c29473
Show file tree

Hide file tree

Showing 20 changed files with 168 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -33,6 +33,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Fixed potential memory usage issues caused by `useActivitiesWithRenderer`, in PR [5183](https://github.com/microsoft/BotFramework-WebChat/pull/5183), by [@OEvgeny](https://github.com/OEvgeny)
 -  Improved performance for `useMemoized`, in PR [5190](https://github.com/microsoft/BotFramework-WebChat/pull/5190), by [@OEvgeny](https://github.com/OEvgeny)
 -  Fixed send box zoomed in when clicked on mobile Safari, in PR [5192](https://github.com/microsoft/BotFramework-WebChat/pull/5192), by [@OEvgeny](https://github.com/OEvgeny)
+-  Added missing support for chat history scroll with keyboard when Fluent send box is focused, in PR [5191](https://github.com/microsoft/BotFramework-WebChat/pull/5191), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Changed
 

diff --git a/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-1-snap.png b/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-1-snap.png
diff --git a/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-2-snap.png b/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-2-snap.png
diff --git a/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-3-snap.png b/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-3-snap.png
diff --git a/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-4-snap.png b/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-4-snap.png
diff --git a/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-5-snap.png b/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-5-snap.png
diff --git a/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-6-snap.png b/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-6-snap.png
diff --git a/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-7-snap.png b/...-page-up-down-js-fluent-theme-applied-performs-transcript-navigation-7-snap.png
diff --git a/__tests__/html/fluentTheme/transcript.navigation.pageUpDown.html b/__tests__/html/fluentTheme/transcript.navigation.pageUpDown.html
@@ -0,0 +1,79 @@
+<!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/react@16.8.6/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/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 = testHelpers.createDirectLineWithTranscript(
+          testHelpers.transcriptNavigation.generateTranscript()
+        );
+        const store = testHelpers.createStore();
+
+        const App = () => <ReactWebChat directLine={directLine} store={store} />;
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(32);
+        await pageConditions.scrollToBottomCompleted();
+
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).focus();
+
+        // Should scroll a page up
+        await host.sendKeys('PAGE_UP');
+        await pageConditions.scrollStabilized();
+        await host.snapshot();
+
+        // Should scroll another page up
+        await host.sendKeys('PAGE_UP');
+        await pageConditions.scrollStabilized();
+        await host.snapshot();
+
+        // Should scroll back down
+        await host.sendKeys('PAGE_DOWN');
+        await pageConditions.scrollStabilized();
+        await host.snapshot();
+
+        // Should scroll to the top
+        await host.sendKeys('HOME');
+        await pageConditions.scrollStabilized();
+        await host.snapshot();
+
+        // Should scroll to the bottom
+        await host.sendKeys('END');
+        await pageConditions.scrollStabilized();
+        await host.snapshot();
+
+        // Should not scroll because the send box is not empty
+        await host.sendKeys('A', 'PAGE_UP');
+        await pageConditions.scrollStabilized();
+        await host.snapshot();
+
+        // Should page up because the send box is no longer empty
+        await host.sendKeys('BACK_SPACE', 'PAGE_UP');
+        await pageConditions.scrollStabilized();
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/fluentTheme/transcript.navigation.pageUpDown.js b/__tests__/html/fluentTheme/transcript.navigation.pageUpDown.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('performs transcript navigation', () => runHTML('fluentTheme/transcript.navigation.pageUpDown'));
+});
diff --git a/__tests__/html/hooks.useScrollUpDown.html b/__tests__/html/hooks.useScrollUpDown.html
@@ -57,12 +57,12 @@
         expect(scrollable.scrollTop).toBe(scrollTopAtBottommost);
 
         // Call useScrollUp() should scroll the transcript view up
-        await renderWithFunction(() => useScrollUp()());
+        await renderWithFunction(() => Promise.resolve(useScrollUp()).then(fn => fn()));
         await pageConditions.scrollStabilized();
         expect(scrollable.scrollTop).toBeLessThan(scrollTopAtBottommost);
 
         // Call useScrollDown() should scroll the transcript view down, back at the bottommost position
-        await renderWithFunction(() => useScrollDown()());
+        await renderWithFunction(() => Promise.resolve(useScrollDown()).then(fn => fn()));
         await pageConditions.scrollStabilized();
         expect(scrollable.scrollTop).toBe(scrollTopAtBottommost);
       });

diff --git a/packages/component/src/BasicTranscript.tsx b/packages/component/src/BasicTranscript.tsx
@@ -39,7 +39,6 @@ import useFocusRelativeActivity from './providers/TranscriptFocus/useFocusRelati
 import useObserveFocusVisible from './hooks/internal/useObserveFocusVisible';
 import usePrevious from './hooks/internal/usePrevious';
 import useRegisterFocusTranscript from './hooks/internal/useRegisterFocusTranscript';
-import useRegisterScrollRelative from './hooks/internal/useRegisterScrollRelative';
 import useRegisterScrollTo from './hooks/internal/useRegisterScrollTo';
 import useRegisterScrollToEnd from './hooks/internal/useRegisterScrollToEnd';
 import useStyleSet from './hooks/useStyleSet';
@@ -48,6 +47,10 @@ import useUniqueId from './hooks/internal/useUniqueId';
 import useValueRef from './hooks/internal/useValueRef';
 import TranscriptActivity from './TranscriptActivity';
 import useMemoized from './hooks/internal/useMemoized';
+import {
+  useRegisterScrollRelativeTranscript,
+  type TranscriptScrollRelativeOptions
+} from './hooks/transcriptScrollRelative';
 
 const {
   useActivityKeys,
@@ -274,7 +277,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
     );
 
     const scrollRelative = useCallback(
-      (direction: 'down' | 'up', { displacement }: { displacement?: number } = {}) => {
+      ({ direction, displacement }: TranscriptScrollRelativeOptions) => {
         const { current: rootElement } = rootElementRef;
 
         if (!rootElement) {
@@ -306,7 +309,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
     // We call `useRegisterScrollXXX` to register a callback function, the `useScrollXXX` will multiplex the call into each instance of <BasicTranscript>.
     useRegisterScrollTo(scrollTo);
     useRegisterScrollToEnd(scrollToEnd);
-    useRegisterScrollRelative(scrollRelative);
+    useRegisterScrollRelativeTranscript(scrollRelative);
 
     const markActivityKeyAsRead = useMarkActivityKeyAsRead();
 

diff --git a/packages/component/src/Composer.tsx b/packages/component/src/Composer.tsx
@@ -116,10 +116,6 @@ const ComposerCore = ({
   const scrollToCallbacksRef = useRef([]);
   const scrollToEndCallbacksRef = useRef([]);
 
-  // Instead of having a `scrollUpCallbacksRef` and `scrollDownCallbacksRef`, they are combined into a single `scrollRelativeCallbacksRef`.
-  // The first argument tells whether it should go "up" or "down".
-  const scrollRelativeCallbacksRef = useRef([]);
-
   const internalRenderMarkdownInline = useMemo(
     () => markdown => {
       const tree = internalMarkdownIt.parseInline(markdown);
@@ -220,7 +216,6 @@ const ComposerCore = ({
       observeScrollPosition,
       observeTranscriptFocus,
       renderMarkdown,
-      scrollRelativeCallbacksRef,
       scrollToCallbacksRef,
       scrollToEndCallbacksRef,
       setDictateAbortable,
@@ -241,7 +236,6 @@ const ComposerCore = ({
       observeTranscriptFocus,
       patchedStyleSet,
       renderMarkdown,
-      scrollRelativeCallbacksRef,
       scrollToCallbacksRef,
       scrollToEndCallbacksRef,
       setDictateAbortable,

diff --git a/packages/component/src/hooks/internal/useRegisterScrollRelative.js b/packages/component/src/hooks/internal/useRegisterScrollRelative.js
diff --git a/packages/component/src/hooks/internal/useScrollRelative.js b/packages/component/src/hooks/internal/useScrollRelative.js
diff --git a/packages/component/src/hooks/transcriptScrollRelative.ts b/packages/component/src/hooks/transcriptScrollRelative.ts
@@ -0,0 +1,8 @@
+import { createPropagation } from 'use-propagate';
+
+export type TranscriptScrollRelativeOptions = { direction: 'down' | 'up'; displacement?: number };
+
+const { useListen: useRegisterScrollRelativeTranscript, usePropagate: useScrollRelativeTranscript } =
+  createPropagation<TranscriptScrollRelativeOptions>();
+
+export { useRegisterScrollRelativeTranscript, useScrollRelativeTranscript };
diff --git a/packages/component/src/hooks/useScrollDown.ts b/packages/component/src/hooks/useScrollDown.ts
@@ -1,9 +1,8 @@
 import { useCallback } from 'react';
-
-import useScrollRelative from './internal/useScrollRelative';
+import { useScrollRelativeTranscript } from './transcriptScrollRelative';
 
 export default function useScrollDown(): (options?: { displacement: number }) => void {
-  const scrollRelative = useScrollRelative();
+  const scrollRelative = useScrollRelativeTranscript();
 
-  return useCallback((...args) => scrollRelative('down', ...args), [scrollRelative]);
+  return useCallback(options => scrollRelative({ direction: 'down', ...options }), [scrollRelative]);
 }
diff --git a/packages/component/src/hooks/useScrollUp.ts b/packages/component/src/hooks/useScrollUp.ts
@@ -1,9 +1,8 @@
 import { useCallback } from 'react';
-
-import useScrollRelative from './internal/useScrollRelative';
+import { useScrollRelativeTranscript } from './transcriptScrollRelative';
 
 export default function useScrollUp(): (options?: { displacement: number }) => void {
-  const scrollRelative = useScrollRelative();
+  const scrollRelative = useScrollRelativeTranscript();
 
-  return useCallback((...args) => scrollRelative('up', ...args), [scrollRelative]);
+  return useCallback(options => scrollRelative({ direction: 'up', ...options }), [scrollRelative]);
 }
diff --git a/packages/fluent-theme/src/components/sendBox/SendBox.tsx b/packages/fluent-theme/src/components/sendBox/SendBox.tsx
@@ -17,6 +17,7 @@ import useSubmitError from './private/useSubmitError';
 import useUniqueId from './private/useUniqueId';
 import styles from './SendBox.module.css';
 import { useStyles } from '../../styles';
+import useTranscriptNavigation from './private/useTranscriptNavigation';
 
 const {
   useFocus,
@@ -146,6 +147,8 @@ function SendBox(
     [sendMessage]
   );
 
+  const handleTranscriptNavigation = useTranscriptNavigation();
+
   const aria = {
     'aria-invalid': 'false' as const,
     ...(errorMessage && {
@@ -157,7 +160,11 @@ function SendBox(
   return (
     <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
       <SuggestedActions />
-      <div className={cx(classNames['sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
+      <div
+        className={cx(classNames['sendbox__sendbox'])}
+        onClickCapture={handleSendBoxClick}
+        onKeyDown={handleTranscriptNavigation}
+      >
         <TextArea
           aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
           className={cx(classNames['sendbox__sendbox-text'], classNames['sendbox__text-area--in-grid'])}

diff --git a/packages/fluent-theme/src/components/sendBox/private/useTranscriptNavigation.ts b/packages/fluent-theme/src/components/sendBox/private/useTranscriptNavigation.ts
@@ -0,0 +1,53 @@
+import { useCallback, type KeyboardEvent } from 'react';
+import { hooks } from 'botframework-webchat-component';
+
+const { useScrollDown, useScrollUp } = hooks;
+
+export default function useTranscriptNavigation() {
+  const scrollDown = useScrollDown();
+  const scrollUp = useScrollUp();
+
+  return useCallback(
+    (event: KeyboardEvent<unknown>) => {
+      if (event.target instanceof HTMLTextAreaElement && event.target.value) {
+        return;
+      }
+
+      const { ctrlKey, metaKey, shiftKey } = event;
+
+      if (ctrlKey || metaKey || shiftKey) {
+        return;
+      }
+
+      let handled = true;
+
+      switch (event.key) {
+        case 'End':
+          scrollDown({ displacement: Infinity });
+          break;
+
+        case 'Home':
+          scrollUp({ displacement: Infinity });
+          break;
+
+        case 'PageDown':
+          scrollDown();
+          break;
+
+        case 'PageUp':
+          scrollUp();
+          break;
+
+        default:
+          handled = false;
+          break;
+      }
+
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [scrollDown, scrollUp]
+  );
+}