Help Center: implement session continuity within Calypso - Episode 1/3

[alshakero]

💡 Make sure to review with whitespace ignored (add ?w=1 to the diff URL).

Proposed Changes

• This makes the help-center sessions persistent across navigation and page refresh. To keep the PR small-ish, this stage only deals with Calypso. The next stage will persist the help-center sessions in user preferences storage to have it in Calypso and the editor and wp-admin.

How does it work

The principle is pretty simple. It's a three-part story:

1. Store Help Center's open/closed state in the help-center data store, and remove this state from Calypso and anywhere else.
2. Store the MemoryRouter state in the help-center data-store. MemoryRouter natively support copying and reusing its state across sessions.
3. Persist the help-center data store in local storage (this is a native feature in wp-stores). This persists all the state the help center creates.

Cleanup

1. Since state is now persisted, we need to carefully delete it. So now we reset the store when the user closes the help center.
2. When the chat ends, we automatically leave the Happychat window to prevent starting a chat over and over again.
3. When the intro message is delivered to Happychat, we delete it from the store, so if the user navigates away and comes back, it's not sent again and the session simply continues.

Testing Instructions

For now, this is only enabled in Calypso, but I'll send a follow-up PR to implement persistence everywhere.

Set config entry calypso/help-center to true in config/development.json.

Setting the environment

1. cd into apps/happychat.
2. run yarn dev --sync.
3. proxy widgets.wp.com.
4. start Calypso yarn start (in root folder).

Opening an article

1. Go to http://calypso.localhost:3000/themes/
2. Open the help center.
3. Open an article.
4. Refresh the page.
5. The help center should re-open at that article.

Support options

1. Go to http://calypso.localhost:3000/themes/
2. Open the help center.
3. Click “Still need help?”.
4. Refresh the page.
5. The help center should re-open where it was.

Live chat

1. Login at https://hud-staging.happychat.io/ to accept your own chat.
2. Start a chat.
3. Refresh the page.
4. The chat session should continue as is without sending the intro message again.
5. As the chat operator, type /end to end the chat.
6. The help center should go back to its home page.
7. Close the help center.
8. Refresh the page.
9. It should remain closed.
10. Open it, it should land at the home page.

Calypso Iframe Bridge

2. Go to http://calypso.localhost:3000
3. Click posts/add new.
4. Simulate a mobile phone in Chrome DevTools.
5. The Help Center icon should appear in the master bar.
6. Click it, it should open the help center.

Episodes

Episode 1/3: persist in locale storage. Episode 2/3: persist in on the server side (maybe user preferences API). Hence continue the session in the editor. Episode 3/3: add Jetpack-proxied endpoints in ETK to access the preferences API in Atomic and continue sessions in atomic.

[github-actions[bot]]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

App Entrypoints (~995 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-main                +44871 B  (+3.5%)   +12340 B  (+3.6%)
entry-domains-landing      -1094 B  (-0.2%)     -229 B  (-0.1%)
entry-browsehappy          -1094 B  (-1.2%)     -229 B  (-0.8%)
entry-login                 -994 B  (-0.1%)     -228 B  (-0.1%)
entry-stepper               -784 B  (-0.0%)     +400 B  (+0.0%)
entry-gutenboarding         -176 B  (-0.0%)     -378 B  (-0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~28253 bytes removed 📉 [gzipped])

name                             parsed_size           gzip_size
marketplace                         -33347 B  (-4.7%)    -7949 B  (-3.8%)
jetpack-cloud-partner-portal        -33284 B  (-7.4%)    -9203 B  (-6.9%)
people                              -32973 B  (-5.6%)    -8878 B  (-5.1%)
posts-custom                        -32464 B  (-5.2%)    -8330 B  (-4.5%)
posts                               -32464 B  (-5.2%)    -8330 B  (-4.5%)
gutenberg-editor                    -32353 B  (-6.2%)    -8990 B  (-5.5%)
pages                               -31960 B  (-6.8%)    -8045 B  (-5.5%)
checkout                            -30156 B  (-1.9%)   -10276 B  (-2.3%)
site-purchases                      -29399 B  (-2.1%)    -9549 B  (-2.6%)
purchases                           -29126 B  (-1.8%)    -9142 B  (-2.1%)
reader                              -11811 B  (-2.1%)    -4117 B  (-2.5%)
themes                               -7170 B  (-1.0%)    -1512 B  (-0.7%)
earn                                 -6059 B  (-1.1%)    -3689 B  (-2.4%)
jetpack-cloud-plugin-management      -6037 B  (-0.8%)    -1095 B  (-0.5%)
scan                                 -6005 B  (-0.8%)    -2386 B  (-1.2%)
settings-performance                 -5943 B  (-1.1%)    -3855 B  (-2.3%)
woocommerce-installation             -5601 B  (-1.9%)    -1469 B  (-1.5%)
comments                             -5543 B  (-0.8%)    -1116 B  (-0.6%)
stats                                -5538 B  (-0.8%)    -4238 B  (-2.1%)
jetpack-cloud-agency-dashboard       -5534 B  (-1.2%)    -2079 B  (-1.5%)
account                              -5451 B  (-1.0%)    -2053 B  (-1.3%)
plugins                              -5428 B  (-0.6%)     -762 B  (-0.3%)
import                               -5397 B  (-1.4%)    -1649 B  (-1.4%)
home                                 -5345 B  (-0.7%)     -514 B  (-0.2%)
jetpack-search                       -5296 B  (-1.2%)     -661 B  (-0.5%)
help                                 -5271 B  (-0.8%)    -1678 B  (-0.9%)
hosting                              -5263 B  (-1.0%)    -1643 B  (-1.0%)
site-blocks                          -5243 B  (-1.3%)     -430 B  (-0.4%)
settings-discussion                  -5201 B  (-1.5%)    -1703 B  (-1.6%)
promote-post                         -5199 B  (-1.6%)    -1954 B  (-1.9%)
jetpack-connect                      -5184 B  (-0.5%)    -1002 B  (-0.4%)
add-ons                              -5159 B  (-1.7%)    -1907 B  (-1.9%)
preview                              -5121 B  (-1.9%)    -1174 B  (-1.4%)
marketing                            -5119 B  (-0.8%)    -1196 B  (-0.6%)
export                               -5098 B  (-1.9%)    -1531 B  (-1.7%)
settings-security                    -5023 B  (-1.1%)    -1262 B  (-1.0%)
customize                            -5017 B  (-1.9%)    -1741 B  (-2.0%)
settings-writing                     -5016 B  (-0.7%)     -206 B  (-0.1%)
concierge                            -5002 B  (-1.1%)    -1224 B  (-1.0%)
jetpack-cloud-pricing                -4991 B  (-0.9%)    -1347 B  (-0.8%)
google-my-business                   -4986 B  (-1.2%)     -726 B  (-0.5%)
woocommerce                          -4963 B  (-1.9%)    -1352 B  (-1.6%)
settings-jetpack                     -4963 B  (-1.5%)    -1285 B  (-1.2%)
migrate                              -4963 B  (-1.3%)    -1237 B  (-1.1%)
jetpack-cloud                        -4963 B  (-2.0%)    -1387 B  (-1.7%)
security                             -4841 B  (-0.9%)    -1076 B  (-0.7%)
jetpack-social                       -4790 B  (-1.3%)     -474 B  (-0.4%)
domains                              -4788 B  (-0.3%)    -1121 B  (-0.3%)
notification-settings                -4765 B  (-1.1%)    -1432 B  (-1.1%)
privacy                              -4738 B  (-1.3%)     -916 B  (-0.9%)
me                                   -4738 B  (-1.3%)     -916 B  (-0.9%)
happychat                            -4738 B  (-1.3%)     -916 B  (-0.8%)
account-close                        -4738 B  (-1.2%)     -916 B  (-0.8%)
backup                               -4307 B  (-0.5%)    -1001 B  (-0.4%)
plans                                -4198 B  (-0.5%)    -1526 B  (-0.6%)
theme                                -4187 B  (-0.9%)    -2563 B  (-1.8%)
settings                             -4002 B  (-0.6%)     -666 B  (-0.3%)
email                                -3888 B  (-0.6%)    -1189 B  (-0.7%)
media                                -3824 B  (-0.2%)    -2124 B  (-0.4%)
activity                             -3764 B  (-0.5%)     -882 B  (-0.4%)
jetpack-cloud-settings               -3677 B  (-0.9%)     -933 B  (-0.7%)
purchase-product                     -3645 B  (-2.2%)    -1129 B  (-2.5%)
signup                               -2800 B  (-0.7%)     -795 B  (-1.0%)
accept-invite                        -2763 B  (-0.6%)     -810 B  (-0.9%)
sites-dashboard                      -2261 B  (-1.0%)     -397 B  (-0.5%)
incoming-redirect                     +159 B  (+0.7%)     +445 B  (+5.5%)
devdocs                               +128 B  (+0.1%)      +30 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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

name                                                              parsed_size            gzip_size
async-load-calypso-layout-masterbar-checkout-tsx                     +48688 B  (+45.8%)   +14347 B  (+45.8%)
async-load-automattic-help-center                                    -44561 B   (-7.3%)   -12821 B   (-7.2%)
async-load-calypso-my-sites-checkout-modal                           -29804 B   (-2.9%)    -8314 B   (-2.9%)
async-load-design-blocks                                             -10450 B   (-0.4%)    -2309 B   (-0.4%)
async-load-calypso-components-web-preview-component                  -10019 B   (-1.8%)    -3616 B   (-2.2%)
async-load-calypso-blocks-support-article-dialog-dialog               -9407 B   (-7.8%)    -2973 B   (-7.8%)
async-load-calypso-layout-guided-tours-component                      -4950 B   (-6.1%)    -1663 B   (-7.3%)
async-load-signup-steps-woocommerce-install-confirm                   -4253 B   (-3.6%)    -1418 B   (-3.7%)
async-load-masterbar-help-center                                      +4000 B  (+77.8%)    +1645 B  (+89.7%)
async-load-calypso-layout-masterbar-checkout                          +4000 B   (+7.9%)    +1612 B   (+9.2%)
async-load-calypso-components-sites-popover                           -3925 B   (-2.5%)    -1312 B   (-2.5%)
async-load-signup-steps-site-picker                                   -3717 B   (-2.0%)    -1290 B   (-2.2%)
async-load-signup-steps-difm-site-picker                              -3717 B   (-2.0%)    -1232 B   (-2.0%)
async-load-calypso-blocks-app-banner                                  -3553 B   (-1.7%)     -909 B   (-1.6%)
async-load-calypso-layout-masterbar-drafts-popover                    -3316 B   (-8.4%)     -897 B   (-6.6%)
async-load-signup-steps-clone-point                                   -2857 B   (-1.2%)     -759 B   (-1.2%)
async-load-design                                                     -2760 B   (-0.1%)    -1825 B   (-0.4%)
async-load-design-wordpress-components-gallery                        -2659 B   (-0.3%)     -118 B   (-0.1%)
async-load-design-playground                                          -2627 B   (-0.1%)    -1796 B   (-0.4%)
async-load-calypso-layout-community-translator                        -1811 B   (-4.9%)     -615 B   (-5.6%)
async-load-calypso-components-happychat-button                        +1419 B  (+37.6%)     +444 B  (+31.0%)
async-load-calypso-blocks-support-article-dialog                      -1224 B  (-29.8%)     -516 B  (-30.8%)
async-load-signup-steps-add-ons                                        -805 B   (-0.6%)     -835 B   (-1.9%)
async-load-signup-steps-plans                                          +761 B   (+0.2%)     +178 B   (+0.2%)
async-load-signup-steps-theme-selection                                -753 B   (-0.5%)     +165 B   (+0.4%)
async-load-signup-steps-design-picker                                  -730 B   (-0.6%)     -253 B   (-0.6%)
async-load-signup-steps-rewind-form-creds                              -629 B   (-0.5%)     -111 B   (-0.3%)
async-load-signup-steps-clone-credentials                              -629 B   (-0.5%)     -108 B   (-0.3%)
async-load-signup-steps-woocommerce-install-step-business-info         -622 B   (-0.4%)     -264 B   (-0.5%)
async-load-signup-steps-woocommerce-install-transfer                   -609 B   (-0.7%)     -240 B   (-0.8%)
async-load-signup-steps-woocommerce-install-step-store-address         -609 B   (-0.4%)     -240 B   (-0.5%)
async-load-signup-steps-woocommerce-install                            -609 B   (-0.9%)     -240 B   (-1.0%)
async-load-signup-steps-website-content                                -609 B   (-0.4%)     -240 B   (-0.5%)
async-load-signup-steps-videopress-site                                -609 B   (-0.5%)     -240 B   (-0.7%)
async-load-signup-steps-user                                           -609 B   (-0.3%)     -240 B   (-0.4%)
async-load-signup-steps-test-step                                      -609 B   (-0.7%)     -240 B   (-0.9%)
async-load-signup-steps-store-features                                 -609 B   (-0.6%)     -240 B   (-0.7%)
async-load-signup-steps-starting-point                                 -609 B   (-0.6%)     -240 B   (-0.8%)
async-load-signup-steps-social-profiles                                -609 B   (-0.7%)     -240 B   (-0.8%)
async-load-signup-steps-site-type                                      -609 B   (-0.7%)     -240 B   (-0.9%)
async-load-signup-steps-site-title                                     -609 B   (-0.7%)     -240 B   (-0.9%)
async-load-signup-steps-site-or-domain                                 -609 B   (-0.6%)     -240 B   (-0.8%)
async-load-signup-steps-site-options                                   -609 B   (-0.6%)     -240 B   (-0.8%)
async-load-signup-steps-site                                           -609 B   (-0.6%)     -240 B   (-0.7%)
async-load-signup-steps-rewind-were-backing                            -609 B   (-0.7%)     -240 B   (-0.9%)
async-load-signup-steps-rewind-migrate                                 -609 B   (-0.6%)     -240 B   (-0.7%)
async-load-signup-steps-reader-landing                                 -609 B   (-0.7%)     -240 B   (-0.9%)
async-load-signup-steps-plans-atomic-store                             -609 B   (-0.3%)     -240 B   (-0.4%)
async-load-signup-steps-page-picker                                    -609 B   (-0.7%)     -240 B   (-0.8%)
async-load-signup-steps-p2-site                                        -609 B   (-0.5%)     -240 B   (-0.7%)
async-load-signup-steps-p2-join-workspace                              -609 B   (-0.7%)     -240 B   (-0.8%)
async-load-signup-steps-p2-get-started                                 -609 B   (-0.7%)     -240 B   (-0.9%)
async-load-signup-steps-p2-details                                     -609 B   (-0.7%)     -240 B   (-0.9%)
async-load-signup-steps-p2-confirm-email                               -609 B   (-0.7%)     -240 B   (-0.8%)
async-load-signup-steps-p2-complete-profile                            -609 B   (-0.4%)     -240 B   (-0.5%)
async-load-signup-steps-new-or-existing-site                           -609 B   (-0.6%)     -240 B   (-0.7%)
async-load-signup-steps-intent                                         -609 B   (-0.6%)     -240 B   (-0.7%)
async-load-signup-steps-emails                                         -609 B   (-0.6%)     -240 B   (-0.8%)
async-load-signup-steps-domains                                        -609 B   (-0.1%)     -240 B   (-0.2%)
async-load-signup-steps-creds-permission                               -609 B   (-0.6%)      -33 B   (-0.1%)
async-load-signup-steps-creds-confirm                                  -609 B   (-0.6%)      -40 B   (-0.1%)
async-load-signup-steps-creds-complete                                 -609 B   (-0.7%)     -240 B   (-0.9%)
async-load-signup-steps-courses                                        -609 B   (-0.7%)     -240 B   (-0.8%)
async-load-signup-steps-clone-start                                    -609 B   (-0.7%)     -240 B   (-0.8%)
async-load-signup-steps-clone-ready                                    -609 B   (-0.6%)     -240 B   (-0.7%)
async-load-signup-steps-clone-jetpack                                  -609 B   (-0.7%)     -240 B   (-0.9%)
async-load-signup-steps-clone-destination                              -609 B   (-0.7%)     -240 B   (-0.8%)
async-load-signup-steps-clone-cloning                                  -609 B   (-0.7%)     -240 B   (-0.8%)
async-load-quick-language-switcher                                     -609 B   (-0.4%)     -240 B   (-0.5%)
async-load-calypso-blocks-jitm-templates-modal                         -609 B   (-0.8%)     -240 B   (-1.0%)
async-load-automattic-design-preview                                   +607 B   (+0.1%)     +138 B   (+0.1%)
async-load-calypso-blocks-editor-checkout-modal                        +271 B   (+0.0%)       +7 B   (+0.0%)
async-load-store-app-store-stats                                       -224 B   (-0.2%)     -132 B   (-0.3%)
async-load-calypso-my-sites-current-site-domain-warnings               +159 B   (+0.4%)     +412 B   (+3.6%)
async-load-calypso-blocks-inline-help                                  +142 B   (+1.2%)      +19 B   (+0.5%)
async-load-calypso-reader-search-stream                                -133 B   (-0.2%)      -40 B   (-0.2%)
async-load-calypso-reader-following-manage                             -133 B   (-0.1%)      -40 B   (-0.1%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice       +125 B   (+0.2%)     +268 B   (+1.3%)
async-load-calypso-my-sites-sidebar                                    +123 B   (+0.1%)      +37 B   (+0.1%)
async-load-calypso-components-jetpack-sidebar                          +123 B   (+0.1%)      +37 B   (+0.1%)
async-load-calypso-layout-guided-tours                                 -108 B   (-1.4%)      -52 B   (-2.1%)
async-load-calypso-blocks-inline-help-popover                          +106 B   (+0.0%)     +392 B   (+0.2%)
async-load-calypso-post-editor-media-modal                              -77 B   (-0.0%)      -89 B   (-0.0%)
async-load-calypso-post-editor-editor-media-modal                       +70 B   (+0.0%)     +645 B   (+0.1%)
async-load-calypso-my-sites-site-settings-seo-settings-form             -68 B   (-0.0%)       -5 B   (-0.0%)
async-load-publish                                                      +40 B   (+0.1%)      +40 B   (+0.2%)
async-load-calypso-lib-preferences-helper                               -36 B   (-0.0%)      -16 B   (-0.0%)
async-load-store-app-store-stats-listview                               +11 B   (+0.0%)     +697 B   (+5.4%)

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.

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit fix/help-center-continuity on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[escapemanuele]

The job you did is amazing 🚀

I noticed that articles are maintained only if they are contextual, not searched, one tho :)

https://user-images.githubusercontent.com/52076348/183855256-422523af-da98-4cde-94dc-b5d5e5539aab.mp4

[renancarvalho]

Great job @alshakero, I have some general remarks I have found while testing.

** Checked on simple and atomic site:**

• When clicking on an article while testing Opening an article and Support options It works, I just noticed some errors on devtools, I am not sure if they are related to these changes, but good to double check.

• When searching for an article, for instance using the word 'plans' and then clicking on an article item. I believe it is saving the search criteria on localStorage(?), then when clicking on the 'X' on the searchbox and refreshing the page is not removing it from the place where it is saved. Please see the recording for better understanding.

https://user-images.githubusercontent.com/2653810/183862669-4d46e7b8-0e11-488b-bd2d-b4c3416514a6.mp4

• Live chat, Maybe I am missing a step of the testing instructions, but I am getting this.

and some errors on devTools

• Calypso Iframe Bridge, I did see the HC icon on the top, but the page itself did not load.

Let me know if you have any questions.

[alshakero]

Thanks a lot @escapemanuele and @renancarvalho! I addressed everything.

[alshakero]

@renancarvalho regarding Happychat and The bridge. It seems you're proxied and your sandbox isn't up-to-date. Either disable sandboxing or git pull in your sandbox.

[alshakero]

Could you clarify if this only applies to Happy Chat state or the whole Help Center? I was ready to submit a ticket and then refreshed. On refresh, only the ticket body was persisted, but not the subject:

The whole help center, but the subject field, is missing from the persistence list.

Blocker: Looks like there's a fundamental change how chatting workflow works. With the FAB, the user could close the chat window, but they'd still be able to get back to chat via a small prompt that replaced the FAB while the chat was active to ensure they don't start new tickets/chats:

Do you have any ideas on how to deal with this in the help center, should we disable the close button as long as a session is active and only keep the minimize one? WDYT?

Blocker: However, when the Help Center is closed, re-opening it seems to give you only option to start a new chat (or ticket) again.

Yes, this is by design, maybe we shouldn't allow closing as long as the session is active? WDYT?

Interestingly, it seems the remnants of FAB are active and suddenly that prompt I mentioned above is also visible... Wow, we didn't know about this, we disable the FAB when there is help center, but this seems to be another thing, we'll look into it.

The FAB should not load at all, of course. But also, the Help Center should be able to detect there's an active session and load it (continue it). What's worse, that original chat is still active for the HE and they might continue replying to the user there. But none of that is shown to the user. What was the expected workflow here?

We thought navigating away from the chat and closing the socket connection is enough to indicate to the HE that the chat is at least interrupted. I looked and didn't find a way to signal to the HE that the user closed the chat. I only found that the operator could end it, so we handle this operator's message and close happychat when that arrives. But couldn't figure a away to end the session from the user's side.

The expected workflow is like this: -> The user starts a chat, they have the chat. -> The user may navigate or refresh, they'll come back to the chat. -> The user will have their problem solved. -> The user may close the window and move on, or the HE can end the chat.

They should always land in the chat unless they close the help center or the HE ends it.

We're obviously happy to change this.

Super nitpick, but seems the tooltip gets hidden behind part of the Help Center window - but only when it's in its collapsed state:

Great catch. Will look into it.

High priority Actually, looks like a bigger issue: when there's an active chat and the Help Center is minimized, the Help Center label is not visible, it's just a white rectangle:

High priority: When there's a new message, there's no clear indication. The FAB would turn to ping color at least. But it seem the Help Center... shows the cut off minimize tooltip? No, seriously, I could reproduce it reliably:

This is certainly a new bug. It should say Help Center with the unread count next to it. Looking into it.

Related to this we need to allow users to have the same chat open in more than one tab. That's easily doable with FAB, but I cannot figure out how to do it with the Help Center. Seems only the tab that opened the chat can show that chat. Users often have many tabs, will switch between them. If we only show active chat in one of them, they will end up creating new sessions instead.

It seems, detecting if there is an active chat session in the help center will solve an array of problems. If we check that and the answer is yes, we may open the help-center and land the user in Happychat without any further persistence across the help-center, that might simplify things a bit.

High priority: Another change of behaviour: when the chat is ended, the Help Center immediately reverts to the main view. That's a very sudden change. From HEs' experience, users often come back with "one more question!" or "yes, I'm still here!" and that's something we need to support. They might also want to keep the chat around for a bit longer to read again what the HE shared, etc. AFAIK, the idea is that there's no clear "end of chat". It's one continuous one and the user decides when they close the window. Can we think how we could handle that more gracefully?

Yes. We'll remove the redirection on chat end. No problem.

I noticed the situation with scrollbars is a bit out of hand and looks very messy. Why is there a space between the innermost scrollbar and the Help Center one? Seems Help Center doesn't need it at that size anyway.

Looking into it.

Seems there's a bug in how the support docs suggestions under the contact forms are handled. If I'm on the Plans page, seems the Explore the WordPress.com Plans page is always on top. That's probably a good call (though let's make sure we follow-up with data). But it seems that when Sibyl tries to add its suggestions, that same page keeps getting re-added. So you end up with duplication or worse.

This is a React key issue probably will check it.

Nitpick: the What's new link has an icon that usually means an external resource (as it does for all the other resources in this section), but it actually just opens a modal in the same window, which seems a bit unexpected:

Great point.

The Recommended resources section links open in new tab instead of inline (as the ones you search for). Is that expected? Also, it seems we don't track clicks to them (at least in the default view)? Could we add that? 🙏

Yes, Sibyl articles are not inlined, maybe they need an external link icon?

As mentioned on the report of the original issue, for whatever reason, the howCanWeHelp custom field is filled with the first message of the chat (instead of empty value or something else). Seems language is also set to UNKNOWN. It's important we have these values to have proper metrics and data to analyze 🙏

Regarding howCanWeHelp, we'll end an empy value since we don't ask that. And for language we'll send the user language, no problem.

I tested with a free user and noticed there's a misaligned ? icon on the forum form:

Yup, Calypso CSS is messing with us. This one should have a popover explaining it.

The CTA button is hidden below the fold - it can be very disorienting for users. Could we make it so that it's sticky to the bottom of the window and always visible? Should be very easy using modern CSS (position: sticky maybe?) 🙏

Will check this.

[klimeryk]

Appreciate the thorough reply!

The whole help center, but the subject field, is missing from the persistence list.

Hahaha, leave it to me to find it ;) Thanks for the link, glad to see it's just this one field.

Do you have any ideas on how to deal with this in the help center, should we disable the close button as long as a session is active and only keep the minimize one? WDYT?

Yes, this is by design, maybe we shouldn't allow closing as long as the session is active? WDYT?

The current flow leads to users "losing" the current chats (that HEs are actively connected to), without even ending them. That's not acceptable and I'm not sure how this was approved or designed. As long as the session has not been ended by the Happiness Engineer, the user needs to be able to easily go back to it. And have a clear indication on refreshes that the session is still active. For example, they might have a network issue or some other issue that requires them to refresh. They might close the tab and open a new one (maybe a link the HE sent). The session has to stay active and available in all windows. This is a blocker if it's not possible to implement in the current scope. We cannot ship this as-is, because it will lead to duplicate chats being open and confusion for both users and HEs. There was a designer attached to this project that I'd assume has the whole context and requirements. Could we ask them to double-check how this flow is supposed to work according to their designs?

-> The user may close the window and move on, or the HE can end the chat.

They should always land in the chat unless they close the help center or the HE ends it.

Only the HE can close (end) the chat. And they always do. So you don't have to worry about that part. Closing the chat window from user perspective should not mean "I'm done with the chat". More like "I'm minimizing it". It's up to the HE to end the chat or not at that (or any) point. The user can keep the chat window open and keep on typing after the chat was supposedly ended by the HE. That's a feature, not a bug ;) That's part of how we handle support and we need to preserve it. Hope this makes it clearer!

It seems, detecting if there is an active chat session in the help center will solve an array of problems. If we check that and the answer is yes, we may open the help-center and land the user in Happychat without any further persistence across the help-center, that might simplify things a bit.

Yup! AFAIK, there should already be an endpoint or message sent through the websocket about an active/open session. There's some surprising or confusing ways that Happy Chat handles sessions (they can linger for a while, user can re-open a closed one...), so I'm happy to sync-up on this more (maybe on a call) if it'd be helpful.

The Recommended resources section links open in new tab instead of inline (as the ones you search for). Is that expected? Also, it seems we don't track clicks to them (at least in the default view)? Could we add that? 🙏

Yes, Sibyl articles are not inlined, maybe they need an external link icon?

Sorry, looks like I did not include screenshot for that. From what I remember those were the default support docs shown based on the current view/page - not something from Sibyl, as far as I know. But if they are indeed coming from Sibyl, then yup, showing an external link icon would help 💖

[kriskarkoski]

Only the HE can close (end) the chat. And they always do. So you don't have to worry about that part. Closing the chat window from user perspective should not mean "I'm done with the chat". More like "I'm minimizing it". It's up to the HE to end the chat or not at that (or any) point.

It has been awhile since I've chatted, but I thought if the user left WordPress.com altogether (at least where Happychat loads) the session was ended after a minute or so. There's an example of it on 1565-gh-Automattic/happychat, I believe that message is shown pretty instantly when the user leaves, then it's actually ended after another minute or so.

[matticbot]

This PR modifies the release build for wpcom-block-editor

To test your changes on WordPress.com, run install-plugin.sh wpcom-block-editor fix/help-center-continuity on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-l4k-p2

[alshakero]

Hi @klimeryk! This is ready to test from a continuity standpoint. The PR is already huge, if you like, please feel free to take it for a spin (already updated the testings steps). We'll address all the other issues (continuity) in follow-up PRs.

[alshakero]

🔴 Note: Don't merge before reverting this line.

[alshakero]

Hi @klimeryk! Any update on this? 🙏🏼