Jetpack AI: Add drop down and options to Block transformation suggestions

[iamchughmayank]

Proposed Changes

• Give the Change tone and Translate content block-transformation suggestions in the Jetpack AI Sidebar a dropdown of preset options — 10 tones and 12 target languages — matching the existing SEO Enhancer dropdown pattern.
• Selecting an option fills the chat input with the full prompt (no auto-submit), so the user can still edit before sending; typing a custom request still works.
• Record the chosen option (option_id) on the block-transformation click event so the picked tone/language is attributed in tracking.

Note

In the post editor the Big Sky provider previously overrode these suggestions — it registers ahead of this Sidebar and wins the first-by-id provider merge, so its plain versions replaced the dropdowns. Automattic/big-sky-plugin#6122 makes Big Sky defer them when this Sidebar is enabled, so the dropdown versions surface. The two changes are needed together.

Companion big sky: https://github.com/Automattic/big-sky-plugin/pull/6122

Why are these changes being made?

Block transformations are the only Jetpack AI Sidebar suggestions still surfaced as a single free-text prompt. The others (SEO Enhancer, Generate Excerpt, AI Editorial Review, Optimize Title) already offer curated options. This brings Change tone and Translate content to parity — discoverable presets instead of an open prompt.

Testing Instructions

1. Check out the Big Sky branch update/give-jetpack-ai-suggestion-precedence (Automattic/big-sky-plugin#6122) and sync it to your sandbox.
2. Check out this branch, sync it to your sandbox, and sandbox widgets.wp.com.
3. Sandbox a site.
4. Open a draft post in the post editor, select a paragraph, and open the sidebar.
5. The Change tone and Translate content suggestions should now show a dropdown of preset options. Selecting any option fills the chat input with the full prompt and works as expected.

The dropdowns are a post-editor feature — the Sidebar only exposes them there.

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?
• For UI changes, have you tested the affected components in dark mode?
• Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• 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)?

[matticbot]

Calypso Live (direct link)

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

Jetpack Cloud Live (direct link)

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

Automattic for Agencies Live (direct link)

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

Dashboard Live (dotcom) (direct link)

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

Dashboard Live (A4A) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-188264&env=dashboard-a4a

[Copilot]

Pull request overview

Adds dropdown-capable block transformation suggestions (tone change + translation) to the Jetpack AI sidebar, and extends Tracks click events to include which dropdown option was chosen.

Changes:

• Introduced predefined dropdown options for “Change tone” and “Translate content” block suggestions and surfaced them via useSuggestions.
• Updated click-to-suggestion matching to resolve both the suggestion and (when applicable) the selected dropdown option.
• Extended block transformation click tracking to include an optional option_id, with new unit tests covering exposure + tracking.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/jetpack-ai-sidebar/src/utils/tracking.ts	Adds optional optionId to block transformation click tracking payload (option_id).
packages/jetpack-ai-sidebar/src/index.ts	Adds dropdown options for translate/tone suggestions and matches click values to suggestion+option for tracking.
packages/jetpack-ai-sidebar/src/index.test.ts	Adds tests for dropdown option exposure and option_id click tracking behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

[kat3samsin]

Translate and Change Tone shows the correct options.

nit: English should not show since the block is already in English.
note: There seems to be an issue translating longer blocks, we can follow-up in a new PR.

[iamchughmayank]

nit: English should not show since the block is already in English.

The design originally recommended detecting the source language and adding "from" and "to" sections for translations. I have not added those because client does not have built in capabilities of detecting language. Skipping English would fall in the same realm.

How about we create a follow up to think how to add the language detecting capability here

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

[a8ci18n]

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

Some locales (Hebrew) 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 @iamchughmayank, 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:

• Change the tone of this text to be more informal
• Change the tone of this text to be more optimistic
• Change the tone of this text to be more humorous
• Change the tone of this text to be more skeptical
• Change the tone of this text to be more empathetic
• Change the tone of this text to be more confident
• Change the tone of this text to be more passionate
• Change the tone of this text to be more provocative
• Translate this block content to English
• Translate this block content to Spanish
• Translate this block content to Italian
• Translate this block content to Portuguese
• Translate this block content to Russian
• Translate this block content to Chinese
• Translate this block content to Japanese
• Formal
• Informal
• Optimistic
• Humorous
• Serious
• Skeptical
• Empathetic
• Confident
• Passionate
• Provocative
• English
• Spanish
• French
• German
• Italian
• Portuguese
• Russian
• Chinese
• Japanese
• Arabic
• Hindi
• Korean
• Change the tone of this text to be more formal
• Translate this block content to French
• Translate this block content to German
• Translate this block content to Arabic
• Translate this block content to Hindi

Thank you in advance!