Add the Content Summarization UI

[dkotter]

What?

Closes #12

The base Content Summarization Experiment and Ability were added in #136. This PR builds on top of that to add in the actual UI to trigger content summarization within the post editor.

Why?

With #136 merged in, you can manually trigger summarization by using the Ability but there isn't a way to trigger that from the UI. This PR adds in that UI, making that Experiment more useful.

How?

• Ensure we properly build the needed assets for the Content Summarization Experiment and then load that properly in the admin
• Add a component that renders in the Post Status section of the block editor. This will render a button that can be clicked to generate a summary
• When that button is clicked, hit the Content Summarization Ability endpoint and if successful, store the summary in post meta and also render that in the editor
• Create a block variation of the paragraph block that we use to render the summary
• Add a custom button to the toolbar of this block that can also be used to re-generate a summary
• Also updates our NPM dependencies to their latest versions

Note

The JS lint workflow is failing but that will be fixed in #176

Testing Instructions

1. Go to Settings > AI Credentials and ensure you have a valid AI provider configured
2. Go to Settings > AI Experiments and ensure you have the Content Summarization Experiment enabled
3. Edit a post that has content (or add new content) and ensure you see a Generate AI Summary button in the Post Status sidebar
4. Ensure you can click on this button, a loading state shows and once it completes, a block is automatically inserted into the editor with a summary
5. Click into that block and ensure you see a Regenerate button in the toolbar
6. Click on that button and ensure it works as expected

Screenshots or screencast

---

---

---

Test using WordPress Playground

The changes in this pull request can be previewed and tested using this WordPress Playground instance:

Click here to test this pull request.

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 11 lines in your changes missing coverage. Please review.
✅ Project coverage is 50.90%. Comparing base (fd0d510) to head (479232b).
⚠️ Report is 32 commits behind head on develop.

Files with missing lines	Patch %	Lines
...cludes/Experiments/Summarization/Summarization.php	50.00%	11 Missing ⚠️

Additional details and impacted files

@@              Coverage Diff              @@
##             develop     #147      +/-   ##
=============================================
+ Coverage      50.33%   50.90%   +0.56%     
- Complexity       366      379      +13     
=============================================
  Files             26       27       +1     
  Lines           1951     1996      +45     
=============================================
+ Hits             982     1016      +34     
- Misses           969      980      +11     

Flag	Coverage Δ
unit	50.90% <50.00%> (+0.56%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jeffpaul]

@dkotter perhaps a docs page for this experiment like done in https://github.com/WordPress/ai/pull/155/changes#diff-f70665388390657902e73741dea03efcdadc4bd0ceb4432959f8903ae015c042?

[jeffpaul]

Note we'll want to update the screenshot numbers when this gets merged in, I left it with a hash instead of a number depending on when this versus other experiments get merged in.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @prabinjha.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: prabinjha.

Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: Ref34t <mokhaled@git.wordpress.org>
Co-authored-by: karmatosed <karmatosed@git.wordpress.org>
Co-authored-by: mathetos <webdevmattcrom@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.