i18n: Add AI Translations Banner #96733

yuliyan · 2024-11-25T13:14:40Z

Related to Automattic/i18n-issues#886

Proposed Changes

Display banner about the AI translated locales (Norwegian, Polish, Finish, Thai, Greek, or Hungarian) for users that:
- Users that have their browser primary language set to one of the AI translated locales, and use English on their WordPress.com account.
- Users that have their browser primary language set to one of the AI translated locales, and use any of the AI translated locales on their WordPress.com account.

Preview:

Why are these changes being made?

We'd like to notify users about the machine translated locales.

Testing Instructions

Apply code-D167396.
Set the primary language of your browser to one of the machine translated locales - Norwegian, Polish, Finish, Thai, Greek, or Hungarian.
Change your WordPress.com account language to English.
Visit the home screen - /home/.
Confirm the banner is being displayed.
Change your WordPress.com account language to one of the machine translated locales - Norwegian, Polish, Finish, Thai, Greek, or Hungarian.
Visit the home screen again - /home/.
Confirm the banner is displayed again but without the CTA.
Change your account to any other language and confirm the banner is no longer displayed.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2024-11-25T13:14:53Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-11-25T13:22:24Z

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

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

happy-blocks
help-center
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/ai-translations-banner on your sandbox.

matticbot · 2024-11-25T13:23:09Z

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

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

name                 parsed_size           gzip_size
entry-login               +433 B  (+0.0%)      +58 B  (+0.0%)
entry-subscriptions        +75 B  (+0.0%)      +32 B  (+0.0%)
entry-stepper              +75 B  (+0.0%)      +32 B  (+0.0%)
entry-main                 +75 B  (+0.0%)      +32 B  (+0.0%)

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

Sections (~552 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
home                 +1679 B  (+0.1%)     +496 B  (+0.1%)
signup                +358 B  (+0.1%)      +25 B  (+0.0%)
jetpack-connect       +358 B  (+0.0%)      +31 B  (+0.0%)
accept-invite         +358 B  (+0.2%)      +25 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.

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.

d-alleyne · 2024-12-10T16:34:02Z

Confirmed that the AI Translation bar appears

User's Browser Language is set to Norwegian, but WP Account is set to English

User's Browser and WP Account set to Norwegian

client/blocks/ai-translations-banner/index.jsx

packages/i18n-utils/src/utils.ts

dlind1 · 2024-12-10T23:23:33Z

client/blocks/ai-translations-banner/index.jsx

+		return;
+	}
+
+	const language = getLanguage( localeSuggestions?.[ 0 ]?.locale );


In my test case I've changed my WordPress.com locale to Polish and my browser languages were set to Norwegian, Thai and Polish. Going to /home I got a banner asking to switch to Norwegian without a CTA. I think that it would be more consistent to change the logic to:

If user locale is English and localeSuggestions contains AI Translated Locale - show the banner for the first suggested locale with the CTA.

If user locale is contained in AI Translated Locale - show the banner for the user locale without the CTA.

Thanks for the suggestion, it makes sense! I've updated the PR.

Works pretty well! I did find two more edge cases:

When the Display interface in English checkbox is selected, the notification isn't being shown.

If my UI locale is set to an AI Translated Locale, but locale-guess doesn't return any of the AI translated locales, the notification also won't be shown.

Here're some test cases I can think of:

UI locale is English, browser locales contain one of the AI locales - show the prompt for top detected browser locale, with CTA.

UI locale is English, browser locales don't contain any of the AI locales - don't show the prompt

UI locale is AI locale without the 'show english' checkbox, browser locales contain the AI locale - show the prompt for user locale, without CTA.

UI locale is AI locale without the 'show english' checkbox, browser locales contain other AI locale - show the prompt for user locale, without CTA.

UI locale is AI locale without the 'show english' checkbox, browser locales contain no AI locales - show the prompt for user locale, without CTA.

UI locale is AI locale with the 'show english' checkbox - same as 3-5?

When the Display interface in English checkbox is selected, the notification isn't being shown.

Could you provide the exact steps you used for 1? I tested setting my UI to Polish with the Display Interface in English preference and the banner displayed as expected.

If my UI locale is set to an AI Translated Locale, but locale-guess doesn't return any of the AI translated locales, the notification also won't be shown.

Updated the logic to handle the case.

Here're some test cases I can think of:

These all seem to test well. Did you experience anything unexpected?

Could you provide the exact steps you used for 1?

Can't reproduce it right now, so it might've a different case. I do see an issue with test case 7 (user locale is Norwegian with "show english" checkbox, browser locales are Thai, German, Dutch) where the notification shows a prompt for Thai with a CTA.

Updated the logic to handle the case.

Test case 5 fails for me. Steps to reproduce: sandbox public-api with code-D167396, set user locale to Norwegian Bokmal, set Chrome top browser languages to German / Dutch / Japanese, open the site home for a simple site. locale-guess API call returns de/ja/nl and the site home shows no notification and some card stuck in loading state. Tested both on calypso.live and locale instance.

Lastly, are the clicks on support link and /me/account link being captured as track events?

Lastly, are the clicks on support link and /me/account link being captured as track events?

Yes, CTA clicks are tracked as well as dismissing the notice.

Can't reproduce it right now, so it might've a different case. I do see an issue with test case 7 (user locale is Norwegian with "show english" checkbox, browser locales are Thai, German, Dutch) where the notification shows a prompt for Thai with a CTA.

I switched to reading the locale from the user object, rather than reading it from i18n-calypso. With this change, we should now have the expected behavior with the "Display interface in English" checkbox.

Test case 5 fails for me. Steps to reproduce: sandbox public-api with code-D167396, set user locale to Norwegian Bokmal, set Chrome top browser languages to German / Dutch / Japanese, open the site home for a simple site. locale-guess API call returns de/ja/nl and the site home shows no notification and some card stuck in loading state. Tested both on calypso.live and locale instance.

I followed the steps for test case 5 and it works as expected. The infinite loading state of the card below that you mentioned is unrelated to the translations notice banner, but it makes me think that there might be some other problem on your end. Could you inspect the network request and see if anything is failing there?

… AI locales or not

yuliyan added the [Status] In Progress label Nov 25, 2024

yuliyan added 4 commits December 9, 2024 12:20

i18n: Add AI Translations Banner

23978e1

Add function doc

e002587

Switch CTA to link to the account settings

a15f8d7

Add feedback link

bf633e6

yuliyan force-pushed the add/ai-translations-banner branch from 0f48c83 to bf633e6 Compare December 9, 2024 10:40

yuliyan marked this pull request as ready for review December 9, 2024 10:48

yuliyan requested a review from a team as a code owner December 9, 2024 10:48

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 9, 2024

yuliyan removed the [Status] In Progress label Dec 10, 2024

d-alleyne approved these changes Dec 10, 2024

View reviewed changes

client/blocks/ai-translations-banner/index.jsx Outdated Show resolved Hide resolved

dlind1 reviewed Dec 10, 2024

View reviewed changes

yuliyan added 5 commits December 11, 2024 11:28

Fix typo

5831e27

Fix CTA statement

7dbef67

Use current locale in banner instead suggestion if AI translated

2dbe0cd

Show notice if current locale is AI translate despite being suggested…

3db9dc8

… AI locales or not

Read the user locale from the user object rather than i18n-calypso

7a08339

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

i18n: Add AI Translations Banner #96733

i18n: Add AI Translations Banner #96733

yuliyan commented Nov 25, 2024 •

edited

Loading

github-actions bot commented Nov 25, 2024 •

edited by matticbot

Loading

matticbot commented Nov 25, 2024

matticbot commented Nov 25, 2024 •

edited

Loading

d-alleyne commented Dec 10, 2024

dlind1 Dec 10, 2024

yuliyan Dec 11, 2024

dlind1 Dec 11, 2024

dlind1 Dec 11, 2024

yuliyan Dec 12, 2024

dlind1 Dec 12, 2024

yuliyan Dec 13, 2024

yuliyan Dec 13, 2024

i18n: Add AI Translations Banner #96733

Are you sure you want to change the base?

i18n: Add AI Translations Banner #96733

Conversation

yuliyan commented Nov 25, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Nov 25, 2024 • edited by matticbot Loading

matticbot commented Nov 25, 2024

matticbot commented Nov 25, 2024 • edited Loading

d-alleyne commented Dec 10, 2024

User's Browser Language is set to Norwegian, but WP Account is set to English

User's Browser and WP Account set to Norwegian

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yuliyan commented Nov 25, 2024 •

edited

Loading

github-actions bot commented Nov 25, 2024 •

edited by matticbot

Loading

matticbot commented Nov 25, 2024 •

edited

Loading