Add scrollToEndButtonBehavior style options

[compulim]

Fixes #3925.

Changelog Entry

Breaking changes

• A new style option scrollToEndButtonBehavior is introduced to control when the scroll to end button should show (formerly "new messages" button):
  • styleOptions.hideScrollToEndButton has been deprecated. To hide the scroll to end button, set styleOptions.scrollToEndButtonBehavior to false;
  • styleOptions.newMessageButtonFontSize has been renamed to styleOptions.scrollToEndButtonFontSize to better reflect its purpose.

Added

• Resolves #3925. Added scrollToEndButtonBehavior to control when the scroll to end button should show, removed hideScrollToEndButton, and renamed newMessagesButtonFontSize to scrollToEndButtonFontSize, by @compulim, in PR #3926.
  • Values for scrollToEndButtonBehavior:
    • If unset, will maintain same behavior as previous versions, same as "unread";
    • "unread" will show when there are any unread and offscreen messages (default);
    • "any" will show when there are any offscreen messages;
    • false will always hide the button.
  • Added new scrollToEndButtonMiddleware to customize the appearance of the scroll to end button.

Description

A new style option is added to control how the scroll to end button should show (formerly "New messages" button).

Depends on the option, the button will be named "New messages" or "More messages" button.

With this PR, web developers can start customizing the look and behavior of the scroll to end button. It includes when their scroll to end button should show up. For example, they can always show their button regardless whether the scroll view is at the bottom or not.

Design

Despite we listed breaking changes (due to deprecations), we have migration code for all breaking changes and web developers do not need to change anything when upgrading Web Chat. There will be warnings to remind them to update their code.

Typing of middleware

Starting from this PR, we will add typings for our middleware, starting from scrollToEndButtonMiddleware.

Currently, we have 3 types of middleware:

• Renderer middleware, such as activity middleware, activity status middleware, avatar middleware, scroll to end button middleware, toast middleware, etc.
  • The middleware is for rendering UI components, through decoration/replacement/removal
  • Before final rendering, caller of the middleware can know whether the middleware will render or skip
    • This is useful in scenario like skip rendering event activity and not emitting empty <li>
    • This is core to activity status middleware, which requires 2-pass rendering to group avatar and activity status correctly
• Legacy renderer middleware, such as attachment middleware
  • In legacy mode, we assume the renderer will always render something
  • We should slowly migrate it to the renderer middleware
• Headless middleware, such as card action middleware
  • These middleware are for headless operations, such as submitting a card action, etc.

styleOptions.scrollToEndButtonBehavior

The option can be set to 3 different values:

• "unread" will show when there are any unread and offscreen messages (default)
  • The button will show "New messages"
• "any" will show when there are any offscreen messages
  • The button will show "More messages"
• false will always hide the button

If unset, it will default to "unread", which is the behavior of <= 4.13.0.

scrollToEndButtonMiddleware

Sample code snippet to customize the appearance of the button. The code below will always show the scroll to end button regardless of scroll position (atEnd or not).

Please refer to scrollToEndButtonMiddleware.ts for the full signature of the middleware.

const MyScrollToEndButton = ({ atEnd, onClick }) => {
  return (
    <button disabled={atEnd} onClick={onClick} type="button">
      {atEnd ? 'At bottom' : 'Not at bottom'}
    </button>
  );
};

renderWebChat(
  {
    directLine,
    scrollToEndButtonMiddleware: () => () => ({ atEnd }) => props => (
      <MyScrollToEndButton atEnd={atEnd} {...props} />
    ),
  },
  document.getElementById('app')
);

Specific Changes

• Any references to "new messages" button will be renamed to "scroll to end" button
• Also added missing tests for localization override strings
  • This is to make sure the text inside the scroll to end button can be overrode

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[corinagum]

Few comments / questions. Do you have time for 1:1?

[corinagum]

Approved pending comments/questions :)