[Odie] Better message scroll handling

[AllTerrainDeveloper]

Proposed Changes

The scrolling behavior was a bit dumb. This patch addresses some issues with it, and improve the overall UX when dealing with new messages.

Why are these changes being made?

1. Reworked a bit some parts of the code, specially the ones that were overcomplicated and very convoluted.
2. Delete features that we might not need right now, leave them for the future.
3. Add more memoisations to the code.

Those changes leads to a better UX

Testing Instructions

Talk to Wapuu and assert that the whole experience is smooth, by smooth I mean that sending a message and receiving it, and also, loading an initial LONG conversation, the scroll behavior is nice and smooth.

Ensure the rest of the chat is working (rating messages, full screen a long message, talk to human messages)

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-114810

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-114810&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-114810&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center
• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug Odie/better-message-scroll-handling on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~481 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
async-load-automattic-help-center      -1034 B  (-0.2%)     -481 B  (-0.3%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[robfelty]

I tested this out quite a bit. The differences in behavior seem fairly subtle to me. Overall I do feel like the scrolling is a bit smoother. One difference I noticed is that when clicking on anchor links, the scroll position is frequently a bit different than in production. In some cases it is improved, in other cases it is worse. I tested this using the "related articles" which shows the support documentation in the Wapuu frame.

I also tested using long message history, and I think that the scrolling does seem mostly better here. In particular, I found that most of the time, the old scrolling behavior did not include the question, only the answer, and now most of the time the question is also included, which is nice.

I looked through the code briefly and nothing strange jumped out at me, but I don't really have that much expertise in this part of our codebase.

Wapuu-test-scrolling.mov

[robfelty]

I don't have much to say about the code. The changes all look reasonable to me, but I don't fully understand them.

I tested after the latest changes, and the scrolling as well as the button to the latest messages looks great.

I think this will be a nice improvement to the UX!