AI Extension: add a way to cancel the AI request

[retrofox]

This PR introduces a functionality to cancel a request in the AI Extension dropdown. Here's an overview:

• We've integrated a cancelRequest() helper function into the suggestion hook to handle request cancellation.
• We've optimized the onClick event of the toolbar button to enable the cancellation process.
• We've utilized the isActive state to represent the ongoing request status.

Fixes issue #31590

This PR implements a way to cancel the request when the user uses the AI Extension dropdown. In summary:

• It adds a cancelRequest() helper to the suggestion hook
• propagates the helper between the components
• Improve the onClick event of the toolbar button to be able to cancel the request
• It uses the isActive state to denote the requesting process.

Fixes #31590

Proposed changes:

• AI Extension: add a way to cancel the AI request

Other information:

• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

1. Navigate to the block editor.
2. Create a Paragraph and add some content.
3. Use the AI dropdown to request content.
4. Verify that you can cancel the ongoing request by re-clicking the toolbar button.

Screen.Recording.2023-06-27.at.08.08.22.mov

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

---

Jetpack plugin:

• Next scheduled release: July 5, 2023.
• Scheduled code freeze: June 26, 2023.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack plugin. Once the plugin is active, go to Jetpack > Jetpack Beta > Jetpack and enable the update/ai-extension-be-able-to-cancel-request branch.

• To test on Simple, run the following command on your sandbox:

  bin/jetpack-downloader test jetpack update/ai-extension-be-able-to-cancel-request
  

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[keoshi]

As mentioned in Slack, I think this is an acceptable solution for the moment. It is hidden, but totally ok to leave it as a pro user feature that people will have to explore and find for themselves. The animation draws the eye in and gives it a nice affordance, so I'm happy about that.

For a future iteration, I'd like to hear from our experts @jasmussen @jay on whether there's an existing visual mechanism (or component, or pattern) we could make use of here to send tips (i.e.: temporary notices) to our users letting them know of power features such as this one.

For additional context: what we're trying to communicate here is that users can click the AI button a second time to cancel the prompt.

[jasmussen]

It is hidden, but totally ok to leave it as a pro user feature that people will have to explore and find for themselves. The animation draws the eye in and gives it a nice affordance, so I'm happy about that.

I'd echo this, if I ever found a need to stop the process I'd probably intuit clicking that toggle too.

For a future iteration, I'd like to hear from our experts @jasmussen @jay on whether there's an existing visual mechanism (or component, or pattern) we could make use of here to send tips (i.e.: temporary notices) to our users letting them know of power features such as this one.

For the moment, there is not. We used to have pointers, but they didn't work very well. The closest we have now are the snackbar and the notice which exists in a gray minimal version; this notice you see in the split inspector informing you where your settings went. So as far as existing notices, you might best fire a snackbar initially or in context of a particular action. So long as you fire it contextually and not all the time, it can probably be a easy good solution.

There are some cursory explorations around showing a dot indicator, for example in context of broken or incomplete blocks, or around responsive editing, but no concrete plans at the moment.

[retrofox]

Thanks, folks, for the feedback.

To begin with, we have made significant changes to the implementation from the user interface perspective. Now, when the user selects an option from the dropdown, the app replaces the extended block (paragraph, heading) to an AI Assistant instance. Sorry about that

Anyway, I'd like to add some comments.

The closest we have now are the snackbar and the notice which exists in a gray minimal version;

We explored and talked about this idea. The basic conclusion was a Notice seems to be like a response from an action that the user could do:

Save the post -> The notice shows a message
Something went wrong -> A warning notice shows up

In this scenario, it's important to inform the user that they have the option to cancel the request process by clicking on the active toolbar button. It's like we should find out a way to inform about it ahead of time.

[jasmussen]

Yep, I'll defer to Filipe on the importance of highlighting the stop ability. You could even change the AI icon to a "Stop" icon (square), or add a button when it's working, though the latter would cause a layout shift.

But just to be clear I was referring to the snackbar, not the notice.

[retrofox]

But just to be clear I was referring to the snackbar, not the notice.

Correct, the bar that shows up when the user saves the post, for instance. This bar is always anchored in the same place, right (bottom, left)

[retrofox]

You could even change the AI icon to a "Stop" icon (square)

that would be the coup de grace If we change the icon, we lose the requesting animation..._ 😬

[github-actions]

This PR has been marked as stale. This happened because:

• It has been inactive for the past 3 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, etc.

If this PR is still useful, please do a [trunk merge or rebase](https://github.com/Automattic/jetpack/blob/trunk/docs/git-workflow.md#keeping-your-branch-up-to-date) and otherwise make sure it's up to date and has clear testing instructions. You may also want to ping possible reviewers in case they've forgotten about it. Please close this PR if you think it's not valid anymore — if you do, please add a brief explanation.

If the PR is not updated (or at least commented on) in another month, it will be automatically closed.

[github-actions]

This PR has been automatically closed as it has not been updated in some time. If you want to resume work on the PR, feel free to restore the branch and reopen the PR.