AI-807: Integrate the show-component ability #107900

wellyshen · 2025-12-30T11:18:28Z

Note: This is a temporary solution to enable the show-component feature in Calypso at this stage. For more details, plz see AI-807

Note: Conversation history is a new feature in the Big Sky AI chat, so the show-component ability case has not been covered yet. I’ve created a Linear task to track this: AI-811

Part of AI-807

Proposed Changes

Integrated Big Sky's show-component ability
(Extra) Fixed the font picker styles
(Extra) Fixed the broken saving confirmation panel in the editors
(Extra) Used the agent's suggestions for the empty view (align the behavior with Big Sky)
(Extra) Removed unused code

Why are these changes being made?

See AI-807

Testing Instructions

Enable the unified AI chat on /wp-admin/profile.php
Sandbox your WP.com site
In big-sky-plugin, check out to 5359-gh-Automattic/big-sky-plugin, and run WPCOM_USERNAME=<YOUR_WPCOM_ID> pnpm build:wpcom -- --skip-i18n
Check out this PR, and run cd apps/help-center && yarn dev --sync
Test the ability by sending "Show me some fonts, and then layouts, and then colors.", and check the following points:
- The LOCAL_TOOL_RUNNING_MESSAGE message has been filtered out
- After clicking the "Moving to next step" button, the button will be removed
- After clicking the "Moving to next step" button, you will see the "Thinking..." UI state
- The flow (i.e., message components, blocks updated, etc.) should work as expected
- When the editor zooms out, you won't see the agent's suggestions (code review should be fine)

2025-12-31.4.15.29.mov

In the floating chat, the font picker styles should be fixed:

Before	After

The broken saving confirmation panel should be fixed:

Before	After

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 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 · 2025-12-30T11:18:35Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

Dashboard live (direct link)

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

matticbot · 2025-12-30T11:26:35Z

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

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

help-center
notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/agents-manager-support-show-component-ability on your sandbox.

matticbot · 2025-12-30T11:28:41Z

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

Async-loaded Components (~182 bytes added 📈 [gzipped])

Details

name                               parsed_size           gzip_size
async-load-help-center-app              +276 B  (+0.0%)     +182 B  (+0.0%)
async-load-automattic-help-center       +276 B  (+0.0%)     +182 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

…bility

wellyshen · 2025-12-31T10:21:33Z

Also need to address the setSuppressSuggestions( true ) case.

…bility

Copilot

Pull request overview

This PR integrates Big Sky's show-component ability into Calypso's agents manager, enabling users to interactively request UI components like fonts, layouts, and colors. Additionally, it includes several improvements to the chat UI including font picker styling fixes, a broken save confirmation panel fix, and cleanup of unused code.

Key Changes:

Extended the AbilitiesSetupHook type to accept action handlers for managing messages, thinking state, and suggestions
Added message filtering to hide local tool running messages and support message deletion
Updated empty view suggestions to dynamically use agent-provided suggestions when available

Reviewed changes

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

File	Description
`packages/agents-manager/src/utils/load-external-providers.ts`	Updated `AbilitiesSetupHook` type signature to accept action handlers for message management and chat interaction
`packages/agents-manager/src/hooks/use-agent-layout-manager/style.scss`	Simplified `editor-save-panel-open` mixin by removing unused parameter; fixed font picker outline styles; added undocked chat font picker styles
`packages/agents-manager/src/constants.ts`	Added `LOCAL_TOOL_RUNNING_MESSAGE` constant for filtering internal messages
`packages/agents-manager/src/components/agent-dock/index.tsx`	Implemented message filtering, thinking state management, deleted messages tracking, and invoked abilities setup with action handlers

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

Copilot · 2026-01-01T17:14:32Z

packages/agents-manager/src/components/agent-dock/index.tsx

+			messages.filter(
+				( message ) =>
+					! deletedMessageIds.has( message.id ) &&
+					! message.content.some( ( content ) => content.text === LOCAL_TOOL_RUNNING_MESSAGE )


The filtering logic assumes that message.content is always an array and that content items have a 'text' property. However, there's no null or undefined check for the content array or the text property. If a message has null/undefined content or if content items lack a text property, this could throw a runtime error. Consider adding optional chaining or type guards to safely handle these cases.

Suggested change

! message.content.some( ( content ) => content.text === LOCAL_TOOL_RUNNING_MESSAGE )

! message.content?.some(

( content ) => content?.text === LOCAL_TOOL_RUNNING_MESSAGE

)

…bility

jcheringer

Code looks good, and it worked well.

I just noticed that we might need to adjust the message preview shown in the chat history list. You can see that at the end of the video below.

Screen.Recording.2026-01-07.at.11.33.18.mov

…bility

wellyshen · 2026-01-07T18:39:21Z

I just noticed that we might need to adjust the message preview shown in the chat history list. You can see that at the end of the video below.

@jcheringer Thank you for the review. The chat history is new to the Big Sky AI chat, so all the relevant cases haven't been covered. I have created a Linear task for the issue: AI-811

…bility

* AI-807: Integrate the show-component ability * Pass `getAgentManager()` * Add custom `setIsThinking()` action * Implement `deleteMarkedMessages()` action * Fix: Broken saving confirmation panel * Fix: Font picker styles * Filter the `LOCAL_TOOL_RUNNING_MESSAGE` out * Fix: Font picker border-radius * Merge `registerCustomActions` with `useAbilitiesSetup` * Update comment * Perf: Memo `visibleMessages` variable * Use agent `suggestions` for the empty view as well * Address `clearSuggestions` case * Address GH review feedback --------- Co-authored-by: Welly Shen <[email protected]>

AI-807: Integrate the show-component ability

0b6703a

wellyshen self-assigned this Dec 30, 2025

Welly Shen added 8 commits December 31, 2025 00:08

Pass getAgentManager()

1b5460e

Add custom setIsThinking() action

34206da

Implement deleteMarkedMessages() action

df72ef2

Fix: Broken saving confirmation panel

547fa38

Fix: Font picker styles

2d55056

Filter the LOCAL_TOOL_RUNNING_MESSAGE out

68ae824

Fix: Font picker border-radius

f8f36e1

Merge branch 'trunk' into add/agents-manager-support-show-component-a…

88bf43c

…bility

wellyshen marked this pull request as ready for review December 30, 2025 21:02

wellyshen requested a review from a team December 30, 2025 21:02

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 30, 2025

Welly Shen added 4 commits December 31, 2025 09:56

Merge registerCustomActions with useAbilitiesSetup

caa8606

Update comment

94a6f79

Perf: Memo visibleMessages variable

8f93869

Merge branch 'trunk' into add/agents-manager-support-show-component-a…

95d3740

…bility

wellyshen marked this pull request as draft December 31, 2025 10:19

wellyshen removed the request for review from a team December 31, 2025 10:19

wellyshen removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 31, 2025

Welly Shen added 3 commits January 2, 2026 00:39

Merge branch 'trunk' into add/agents-manager-support-show-component-a…

f4c7c24

…bility

Use agent suggestions for the empty view as well

cba1277

Address clearSuggestions case

b758958

wellyshen marked this pull request as ready for review January 1, 2026 17:08

Copilot AI review requested due to automatic review settings January 1, 2026 17:08

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

Copilot started reviewing on behalf of wellyshen January 1, 2026 17:09 View session

wellyshen requested a review from a team January 1, 2026 17:12

Copilot AI reviewed Jan 1, 2026

View reviewed changes

Welly Shen added 2 commits January 3, 2026 06:17

Address GH review feedback

9b6b30e

Merge branch 'trunk' into add/agents-manager-support-show-component-a…

92a7588

…bility

jcheringer approved these changes Jan 7, 2026

View reviewed changes

Merge branch 'trunk' into add/agents-manager-support-show-component-a…

271c53a

…bility

Welly Shen added 2 commits January 7, 2026 13:39

Merge branch 'trunk' into add/agents-manager-support-show-component-a…

a471bc6

…bility

Merge branch 'trunk' into add/agents-manager-support-show-component-a…

24fed17

…bility

wellyshen merged commit 25c1a7b into trunk Jan 7, 2026
12 checks passed

wellyshen deleted the add/agents-manager-support-show-component-ability branch January 7, 2026 19:17

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 7, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AI-807: Integrate the show-component ability #107900

AI-807: Integrate the show-component ability #107900

Uh oh!

wellyshen commented Dec 30, 2025 •

edited

Loading

Uh oh!

matticbot commented Dec 30, 2025 •

edited

Loading

Uh oh!

matticbot commented Dec 30, 2025 •

edited

Loading

Uh oh!

matticbot commented Dec 30, 2025 •

edited

Loading

Uh oh!

wellyshen commented Dec 31, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 1, 2026

Uh oh!

jcheringer left a comment

Uh oh!

wellyshen commented Jan 7, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-					! message.content.some( ( content ) => content.text === LOCAL_TOOL_RUNNING_MESSAGE )
+					! message.content?.some(
+						( content ) => content?.text === LOCAL_TOOL_RUNNING_MESSAGE
+					)

AI-807: Integrate the show-component ability #107900

AI-807: Integrate the show-component ability #107900

Uh oh!

Conversation

wellyshen commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

matticbot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wellyshen commented Dec 31, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 1, 2026

Choose a reason for hiding this comment

Uh oh!

jcheringer left a comment

Choose a reason for hiding this comment

Uh oh!

wellyshen commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wellyshen commented Dec 30, 2025 •

edited

Loading

matticbot commented Dec 30, 2025 •

edited

Loading

matticbot commented Dec 30, 2025 •

edited

Loading

matticbot commented Dec 30, 2025 •

edited

Loading

wellyshen commented Jan 7, 2026 •

edited

Loading