Saving and restoring scroll position in composition mode

[compulim]

Fixes #3252. Fixes #2859.

Changelog Entry

Added

• Resolves #3252. Added useObserveScrollPosition and useScrollTo hooks, by @compulim in PR #3268
• Resolves #3252. Added composition mode, which split up <ReactWebChat> into <Composer> and <BasicWebChat>, by @compulim in PR #3268

Samples

• Resolves #3252. Added enable composition mode sample, by @compulim in PR #3268
• Resolves #3252. Added save and restore scroll position sample, by @compulim in PR #3268
• Resolves #3252. Updated post activity event sample to use composition mode, by @compulim in PR #3268

Description

New hooks to observe and restore scroll positions.

To enable hooks outside of Web Chat UI, we added a new sample to enable composition mode.

To enable composition mode, this PR will fix #2859 by enabling middleware in <Composer>.

useObserveScrollPosition

useObserveScrollPosition(observer: (ScrollObserver? | false), deps: any[]): void

type ScrollObserver = (position: ScrollPosition) => void;

type ScrollPosition {
  scrollTop: number
}

This function accept an observer function. When the scroll position has changed, the observer function will be called with the latest ScrollPosition.

The position argument can be passed to useScrollTo hook to restore scroll position.

Since the observer function will be called rapidly, please keep the code in the function as lightweight as possible.

To stop observing scroll positions, pass a falsy value to the observer argument.

If there are more than one transcripts, scrolling any of them will trigger the observer function, and there is no clear distinction of which transcript is being scrolled.

useScrollTo

useScrollTo(): (position: ScrollPosition, options: ScrollOptions) => void

type ScrollOptions {
  behavior: 'auto' | 'smooth'
}

type ScrollPosition {
  scrollTop: number
}

This function will return a function that, when called, will scroll the transcript to the specific scroll position.

If options is passed with behavior set to smooth, it will smooth-scrolling to the scroll position. Otherwise, it will jump to the scroll position instantly.

Specific Changes

• Enable composition mode
  • <ReactWebChat> is now comprised from <Composer> and <BasicWebChat>
  • Moved "middleware -> renderer" logic to <Composer> to fix Code: Move createXXXRenderer into <Composer> #2859
• Added useObserveScrollPosition and useScrollTo hooks
• Moved to hooks API in react-scroll-to-bottom
• Samples
  • Added "enable composition mode" sample
  • Updated 04.api/d.post-activity-event to use composition mode
  • Added save/restore scroll position sample

---

• Testing Added