Register Sources as action component

[jcheringer]

Fixes AI-927

Summary

• Moves SourcesDisplay from being injected into message content (via extractSourcesFromContent) to being registered as a type: 'component' message action via a new useSourcesAction hook
• Removes the position: absolute CSS hack that caused the sources panel to overlap subsequent messages when expanded mid-conversation
• Sources now renders inline in the actions bar alongside feedback/copy buttons, using the new component action variant from agenttic (312-ghe-Automattic/agenttic)

Motivation

The SourcesDisplay component used position: absolute to visually align with the feedback action icons. This worked for the last message but broke mid-conversation — the expanded panel overlapped messages below it. By registering Sources as a component action, it participates in normal document flow and the overlap issue is resolved.

Changes

• New: use-sources-action.ts — hook that registers SourcesDisplay as a component action on agent messages with sources data
• Modified: orchestrator-chat/index.tsx — wires useSourcesAction
• Modified: convert-tool-messages-to-components.ts — removed extractSourcesFromContent; sources data blocks now pass through untouched (read by the hook instead)
• Modified: tests — updated to reflect that sources data blocks are no longer transformed into components

Test plan

Depends on 312-ghe-Automattic/agenttic

• Sync the agents manager app with your sandbox: cd apps/agents-manager && yarn dev --sync
• Make sure the Unified Experience is enabled - https://wordpress.com/wp-admin/profile.php
• Navigate to a page where the AI Chat is available and add ?agent=wpcom-workflow-support_chat to the URL
• Ask a question that triggers sources (e.g. "How to add a domain?")
• Verify the text answer renders normally and a collapsed "Sources" card appears
• Sources toggle appears inline with feedback/copy action buttons
• Expanding Sources mid-conversation does not overlap subsequent messages

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)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud Live (direct link)

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

Automattic for Agencies Live (direct link)

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

Dashboard Live (dotcom) (direct link)

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

Dashboard Live (CIAB) (direct link)

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

[matticbot]

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

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

• agents-manager
• help-center
• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/register-sources-component on your sandbox.

[wellyshen]

Correct me if I'm wrong, but I'm not sure we need the component-type message action. Most actions follow a button-based design (e.g., ChatGPT, Gemini, Claude).

The sources UI feels like a common feature and more of an info-related element than an action. It might make sense to include it directly in the agenttic-ui package and export the link click event so developers can override it if needed. This could also cover a capability that might currently be missing from the UI library.

WDYT?

[jcheringer]

Correct me if I'm wrong, but I'm not sure we need the component-type message action. Most actions seem to be button-based (e.g., ChatGPT, Gemini, Claude).

This is screenshot from ChatGPT:

The ... button is a suspense menu, not a simple button

The source UI feels like a common feature, so it might be better to include it directly in the agenttic-ui package and export the link click event so developers can override it if needed. This could benefit other products as well. WDYT?

I don't disagree with having the Sources components in the agenttic-ui package.
I find its style a bit opinionated, though.
So, having a mechanism to consume the sources data and allow consumers to decide how they want to display the component might not be a bad idea.
Later, if we think the Sources component should live inside the agenttic package, we could just migrate it.

[wellyshen]

Alright, that's better than leaving the bug there. I'll test and review the PRs tmr.