Add the Content Summarization UI

[dkotter]

Important

The code here is branched from #136.
Once that PR is merged, I will rebase this and then open this for review.

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

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 62.57669% with 61 lines in your changes missing coverage. Please review.
✅ Project coverage is 48.77%. Comparing base (7dbbc44) to head (dd8ea07).
⚠️ Report is 20 commits behind head on develop.

Files with missing lines	Patch %	Lines
includes/Abilities/Summarization/Summarization.php	66.03%	36 Missing ⚠️
...cludes/Experiments/Summarization/Summarization.php	48.64%	19 Missing ⚠️
...des/Abilities/Summarization/system-instruction.php	60.00%	4 Missing ⚠️
includes/Abilities/Image/Import_Base64_Image.php	0.00%	2 Missing ⚠️

Additional details and impacted files

@@              Coverage Diff              @@
##             develop     #147      +/-   ##
=============================================
+ Coverage      46.89%   48.77%   +1.87%     
- Complexity       208      239      +31     
=============================================
  Files             19       22       +3     
  Lines           1271     1425     +154     
=============================================
+ Hits             596      695      +99     
- Misses           675      730      +55     

Flag	Coverage Δ
unit	48.77% <62.57%> (+1.87%)	⬆️

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.