Odie Client: add Zendesk conversation to chat

[arcangelini]

Proposed Changes

• Add Smooch hook to Odie
• Add support provider state to manage chat between Odie and Zendesk
• Add feature flag to hide behind

Why are these changes being made?

We are unifying the support chat experience. This involves merging the AI conversation (odie) and the human conversation (zendesk) into a singular chat window (odie-client). This is a very raw version of the chat experience. There are some known bugs and upgrades that need to be made. We are deploying in this state to allow others to work asynchronously.

Testing Instructions

The main thing to test is for regression. All of the changes should exist behind the feature flag, but we need to make sure that the experience without the flag is the exact same as production. We should also be sure there are no additional requests to Zendesk.

To test the new chat experience add ?flags=help-center-experience to the URL. It would be easiest using the Live Link probably.
Then start a conversation with odie and ask to talk to a human.
Click the Get Support button and you should get a new conversation within the Help Center.

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122019&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

• blaze-dashboard
• help-center
• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug help-center/add-smooch-to-odie on your sandbox.

[matticbot]

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

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

name           parsed_size           gzip_size
entry-stepper       +208 B  (+0.0%)      +55 B  (+0.0%)
entry-main          +208 B  (+0.0%)      +55 B  (+0.0%)
entry-login         +208 B  (+0.0%)      +55 B  (+0.0%)

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

Sections (~536 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
site-purchases                          +576 B  (+0.0%)     +116 B  (+0.0%)
purchases                               +576 B  (+0.0%)     +116 B  (+0.0%)
import-hosted-site-flow                 +576 B  (+0.1%)      +98 B  (+0.0%)
email                                   +576 B  (+0.1%)     +111 B  (+0.1%)
domains                                 +576 B  (+0.0%)     +116 B  (+0.0%)
update-design-flow                      +375 B  (+0.0%)     +102 B  (+0.0%)
plans                                   +375 B  (+0.0%)      +82 B  (+0.0%)
link-in-bio-tld-flow                    +375 B  (+0.0%)      +37 B  (+0.0%)
jetpack-connect                         +375 B  (+0.0%)      +82 B  (+0.0%)
jetpack-cloud-pricing                   +375 B  (+0.0%)      +82 B  (+0.0%)
jetpack-cloud-features-comparison       +375 B  (+0.1%)      +82 B  (+0.0%)
copy-site-flow                          +375 B  (+0.1%)      +72 B  (+0.0%)
checkout                                +375 B  (+0.0%)      +82 B  (+0.0%)

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 (~14436 bytes added 📈 [gzipped])

name                                                            parsed_size           gzip_size
async-load-automattic-help-center                                  +25707 B  (+4.5%)   +14080 B  (+8.3%)
async-load-signup-steps-woocommerce-install-transfer                 +375 B  (+1.2%)     +102 B  (+1.0%)
async-load-signup-steps-woocommerce-install-step-store-address       +375 B  (+0.6%)     +102 B  (+0.5%)
async-load-signup-steps-woocommerce-install-step-business-info       +375 B  (+0.4%)     +102 B  (+0.4%)
async-load-signup-steps-woocommerce-install-confirm                  +375 B  (+0.7%)     +102 B  (+0.6%)
async-load-signup-steps-website-content                              +375 B  (+0.3%)     +102 B  (+0.3%)
async-load-signup-steps-user                                         +375 B  (+0.2%)     +102 B  (+0.2%)
async-load-signup-steps-theme-selection                              +375 B  (+0.1%)     +102 B  (+0.1%)
async-load-signup-steps-test-step                                    +375 B  (+1.8%)     +102 B  (+1.4%)
async-load-signup-steps-subscribe-email                              +375 B  (+0.2%)     +102 B  (+0.2%)
async-load-signup-steps-store-features                               +375 B  (+0.9%)     +102 B  (+0.8%)
async-load-signup-steps-starting-point                               +375 B  (+1.0%)     +102 B  (+0.9%)
async-load-signup-steps-social-profiles                              +375 B  (+1.4%)     +102 B  (+1.2%)
async-load-signup-steps-site-picker                                  +375 B  (+0.3%)     +102 B  (+0.2%)
async-load-signup-steps-site-or-domain                               +375 B  (+0.9%)     +102 B  (+0.8%)
async-load-signup-steps-site-options                                 +375 B  (+0.9%)     +102 B  (+0.8%)
async-load-signup-steps-site                                         +375 B  (+0.9%)     +102 B  (+0.8%)
async-load-signup-steps-rewind-were-backing                          +375 B  (+1.7%)     +102 B  (+1.3%)
async-load-signup-steps-rewind-form-creds                            +375 B  (+0.5%)     +102 B  (+0.5%)
async-load-signup-steps-reader-landing                               +375 B  (+1.5%)     +102 B  (+1.3%)
async-load-signup-steps-page-picker                                  +375 B  (+0.1%)     +102 B  (+0.1%)
async-load-signup-steps-p2-site                                      +375 B  (+0.7%)     +102 B  (+0.7%)
async-load-signup-steps-p2-join-workspace                            +375 B  (+1.2%)     +102 B  (+1.0%)
async-load-signup-steps-p2-details                                   +375 B  (+1.5%)     +102 B  (+1.2%)
async-load-signup-steps-p2-confirm-email                             +375 B  (+1.4%)     +102 B  (+1.2%)
async-load-signup-steps-p2-complete-profile                          +375 B  (+0.4%)     +102 B  (+0.3%)
async-load-signup-steps-new-or-existing-site                         +375 B  (+0.9%)     +102 B  (+0.7%)
async-load-signup-steps-intent                                       +375 B  (+1.0%)     +102 B  (+0.8%)
async-load-signup-steps-initial-intent                               +375 B  (+0.4%)     +102 B  (+0.4%)
async-load-signup-steps-hosting-decider                              +375 B  (+1.7%)     +102 B  (+1.4%)
async-load-signup-steps-emails                                       +375 B  (+0.6%)     +102 B  (+0.5%)
async-load-signup-steps-difm-site-picker                             +375 B  (+0.3%)     +102 B  (+0.2%)
async-load-signup-steps-design-picker                                +375 B  (+0.7%)     +102 B  (+0.6%)
async-load-signup-steps-creds-permission                             +375 B  (+0.7%)     +102 B  (+0.6%)
async-load-signup-steps-creds-confirm                                +375 B  (+0.7%)     +102 B  (+0.6%)
async-load-signup-steps-courses                                      +375 B  (+1.1%)     +102 B  (+0.9%)
async-load-signup-steps-clone-start                                  +375 B  (+1.4%)     +102 B  (+1.1%)
async-load-signup-steps-clone-ready                                  +375 B  (+0.7%)     +102 B  (+0.6%)
async-load-signup-steps-clone-point                                  +375 B  (+0.2%)     +102 B  (+0.2%)
async-load-signup-steps-clone-destination                            +375 B  (+1.1%)     +102 B  (+1.0%)
async-load-signup-steps-clone-credentials                            +375 B  (+0.5%)     +102 B  (+0.4%)
async-load-signup-steps-clone-cloning                                +375 B  (+1.4%)     +102 B  (+1.1%)
async-load-calypso-signup-step-wrapper                               +375 B  (+2.5%)     +102 B  (+2.0%)
async-load-calypso-my-sites-checkout-modal                           +375 B  (+0.0%)      +81 B  (+0.0%)
async-load-calypso-components-jetpack-portal-nav                     +375 B  (+0.8%)      +86 B  (+0.6%)
async-load-calypso-blocks-editor-checkout-modal                      +375 B  (+0.0%)      +87 B  (+0.0%)

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.

[arcangelini]

Issues to address:

• Make sure we are talking to the right ticket. I have seen inconsistencies in retrieving the wrong conversation and replying to a closed ticket.
• Make sure we are listening to the right conversation. If the user gets a reply from an HE on ticket B while the chat is open to ticket A the response is picked up.
• Unify types across Odie and Zendesk. Currently Messages, Chats, and Conversation data types are all slightly different. This is confusing to follow in the logic. We should model the AI data off the Zendesk message/conversation.
• Potentially add Conversation ID to the OdieContext
• Find a better way to manage the message array

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/16912202

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Hi @arcangelini, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

• AI profile picture
• Type a message…

Thank you in advance!

[manzoorwanijk]

This PR seems to have broken the local yarn install - p1729157088800809-slack-C02DQP0FP

[jsnajdr]

This image should be extracted to a .png file. What if I want to see how the PNG image looks like?

Webpack has capabilities (with file-loader and url-loader) to import such a file and convert it into an inline data URL. The output of the build can be identical to the current state, but the source can be managed in a much nicer way where JavaScript is in .js files and images are in .png files.

[arcangelini]

Thanks for pointing this out @jsnajdr I honestly didn't even inspect the SVG much. This was copied directly from the Figma. We have a follow-up PR to work on the stylings and will take this into account and address this.

[a8ci18n]

Translation for this Pull Request has now been finished.