Help Center: add image upload for chats

[heavyweight]

The PR adds support for image file uploads in zendesk conversations.

Fixes https://github.com/Automattic/dotcom-forge/issues/9644

Proposed Changes

Let's add the possibility of sending an image in the chat!

Testing Instructions

• Checkout branch or use live link
• Navigate to /home?flags=help-center-experience and open the Help Center.
• Open an existing conversation and test the image uploads

[github-actions]

Link to live branch is being generated...
Please wait a few minutes and refresh this page.

[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 add/smooch-file-upload on your sandbox.

[matticbot]

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

Sections (~517 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
update-design-flow                      +173 B  (+0.0%)      +84 B  (+0.0%)
site-purchases                          +173 B  (+0.0%)      +84 B  (+0.0%)
purchases                               +173 B  (+0.0%)      +84 B  (+0.0%)
plans                                   +173 B  (+0.0%)      +84 B  (+0.0%)
link-in-bio-tld-flow                    +173 B  (+0.0%)      +82 B  (+0.0%)
jetpack-connect                         +173 B  (+0.0%)      +84 B  (+0.0%)
jetpack-cloud-pricing                   +173 B  (+0.0%)      +84 B  (+0.0%)
jetpack-cloud-features-comparison       +173 B  (+0.0%)      +84 B  (+0.0%)
import-hosted-site-flow                 +173 B  (+0.0%)      +86 B  (+0.0%)
email                                   +173 B  (+0.0%)      +91 B  (+0.0%)
domains                                 +173 B  (+0.0%)      +84 B  (+0.0%)
copy-site-flow                          +173 B  (+0.0%)      +90 B  (+0.0%)
checkout                                +173 B  (+0.0%)      +84 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 (~1331 bytes added 📈 [gzipped])

name                                                            parsed_size           gzip_size
async-load-automattic-help-center                                   +3178 B  (+0.5%)    +1009 B  (+0.5%)
async-load-signup-steps-woocommerce-install-transfer                 +173 B  (+0.5%)      +84 B  (+0.8%)
async-load-signup-steps-woocommerce-install-step-store-address       +173 B  (+0.3%)      +84 B  (+0.4%)
async-load-signup-steps-woocommerce-install-step-business-info       +173 B  (+0.2%)      +84 B  (+0.3%)
async-load-signup-steps-woocommerce-install-confirm                  +173 B  (+0.3%)      +84 B  (+0.5%)
async-load-signup-steps-website-content                              +173 B  (+0.2%)      +84 B  (+0.2%)
async-load-signup-steps-user                                         +173 B  (+0.1%)      +84 B  (+0.2%)
async-load-signup-steps-theme-selection                              +173 B  (+0.0%)      +84 B  (+0.1%)
async-load-signup-steps-test-step                                    +173 B  (+0.8%)      +84 B  (+1.2%)
async-load-signup-steps-subscribe-email                              +173 B  (+0.1%)      +84 B  (+0.2%)
async-load-signup-steps-store-features                               +173 B  (+0.4%)      +84 B  (+0.6%)
async-load-signup-steps-starting-point                               +173 B  (+0.5%)      +84 B  (+0.7%)
async-load-signup-steps-social-profiles                              +173 B  (+0.6%)      +84 B  (+0.9%)
async-load-signup-steps-site-picker                                  +173 B  (+0.1%)      +84 B  (+0.2%)
async-load-signup-steps-site-or-domain                               +173 B  (+0.4%)      +84 B  (+0.7%)
async-load-signup-steps-site-options                                 +173 B  (+0.4%)      +84 B  (+0.6%)
async-load-signup-steps-site                                         +173 B  (+0.4%)      +84 B  (+0.6%)
async-load-signup-steps-rewind-were-backing                          +173 B  (+0.8%)      +84 B  (+1.1%)
async-load-signup-steps-rewind-form-creds                            +173 B  (+0.2%)      +84 B  (+0.4%)
async-load-signup-steps-reader-landing                               +173 B  (+0.7%)      +84 B  (+1.0%)
async-load-signup-steps-page-picker                                  +173 B  (+0.0%)      +84 B  (+0.1%)
async-load-signup-steps-p2-site                                      +173 B  (+0.3%)      +84 B  (+0.5%)
async-load-signup-steps-p2-join-workspace                            +173 B  (+0.6%)      +84 B  (+0.8%)
async-load-signup-steps-p2-details                                   +173 B  (+0.7%)      +84 B  (+1.0%)
async-load-signup-steps-p2-confirm-email                             +173 B  (+0.6%)      +84 B  (+0.9%)
async-load-signup-steps-p2-complete-profile                          +173 B  (+0.2%)      +84 B  (+0.3%)
async-load-signup-steps-new-or-existing-site                         +173 B  (+0.4%)      +84 B  (+0.6%)
async-load-signup-steps-intent                                       +173 B  (+0.4%)      +84 B  (+0.7%)
async-load-signup-steps-initial-intent                               +173 B  (+0.2%)      +84 B  (+0.3%)
async-load-signup-steps-hosting-decider                              +173 B  (+0.8%)      +84 B  (+1.1%)
async-load-signup-steps-emails                                       +173 B  (+0.3%)      +84 B  (+0.4%)
async-load-signup-steps-difm-site-picker                             +173 B  (+0.1%)      +84 B  (+0.2%)
async-load-signup-steps-design-picker                                +173 B  (+0.3%)      +84 B  (+0.5%)
async-load-signup-steps-creds-permission                             +173 B  (+0.3%)      +84 B  (+0.5%)
async-load-signup-steps-creds-confirm                                +173 B  (+0.3%)      +84 B  (+0.5%)
async-load-signup-steps-courses                                      +173 B  (+0.5%)      +84 B  (+0.8%)
async-load-signup-steps-clone-start                                  +173 B  (+0.6%)      +84 B  (+0.9%)
async-load-signup-steps-clone-ready                                  +173 B  (+0.3%)      +84 B  (+0.5%)
async-load-signup-steps-clone-point                                  +173 B  (+0.1%)      +84 B  (+0.2%)
async-load-signup-steps-clone-destination                            +173 B  (+0.5%)      +84 B  (+0.8%)
async-load-signup-steps-clone-credentials                            +173 B  (+0.2%)      +84 B  (+0.4%)
async-load-signup-steps-clone-cloning                                +173 B  (+0.6%)      +84 B  (+0.9%)
async-load-calypso-signup-step-wrapper                               +173 B  (+1.1%)      +84 B  (+1.6%)
async-load-calypso-my-sites-checkout-modal                           +173 B  (+0.0%)      +85 B  (+0.0%)
async-load-calypso-components-jetpack-portal-nav                     +173 B  (+0.3%)      +80 B  (+0.6%)
async-load-calypso-blocks-editor-checkout-modal                      +173 B  (+0.0%)      +73 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.

[escapemanuele]

We can also use image instead of upload to reflect what's in the designs. But we may think to ask Lucas to go with a generic upload if needed