Move unified AI UI to Calypso #107179
Merged
Move unified AI UI to Calypso #107179
+3,418
−27
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements /me/preferences API persistence and context tree functionality: - Add usePersistedAgentState hook for syncing state to /me/preferences API - Persists session ID, isOpen, and isDocked state - Debounced saves (1s default) to minimize API calls - Fallback to localStorage when API unavailable - Supports both wpcomRequest and apiFetch - Enhance WordPressContextAdapter with contextEntries support - Add getContextEntries() method to resolve context data - Support for sitemap and entity context from next-admin store - Resolves getData closures to provide current context data - Backward compatibility with separate sitemap/entities fields - Integrate persistence with AgentDock component - Sync sessionId, chatState, and isDocked to preferences - Add optional preference configuration props - Maintain localStorage fallback for offline support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add AI agent loader to Calypso following the help-center pattern: - Create AIAgentLoader component for lazy loading with AsyncLoad - Similar pattern to HelpCenterLoader - Provides section name, current route, site, and user data - Positioned in main layout alongside HelpCenterLoader - Add CalypsoAIAgent wrapper component - Default export for AsyncLoad integration - Configures AgentDock with Calypso-specific settings - Integrates CalypsoContextAdapter for environment context - Uses wpcomRequest for /me/preferences persistence - Provides default suggestions for getting started - Update ai-agents package exports - Export CalypsoAIAgent as default for AsyncLoad - Export CalypsoAIAgentProps type for consumers - Integrate into client/layout/index.jsx - Add AIAgentLoader to main logged-in layout - Renders alongside other layout components This enables the AI agent to be loaded throughout Calypso with proper context awareness and state persistence. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Integrate CalypsoChromeAdapter to provide visual frame around content when agent is docked and expanded. - Add chromeAdapter to CalypsoAIAgent component - Pass chrome adapter to AgentDock for DOM manipulation - Applies CSS classes for docked/expanded states Note: Additional CSS styling may be needed to properly display the frame. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Fix two critical issues: 1. Chrome Framing & Background - Rewrite CalypsoChromeAdapter to inject CSS dynamically - Adapt big-sky-plugin chrome styles for Calypso's #wpcom container - Apply visual frame with border, spacing, and dark background - Target .masterbar and #wpcom for proper Calypso integration - Fix black background issue by applying chrome only when docked 2. Infinite Update Loop in usePersistedAgentState - Change saveTimeout from state to ref (saveTimeoutRef) - Remove saveTimeout from useCallback dependencies - Prevents infinite re-render loop when saving state - Fixes "Maximum update depth exceeded" error Chrome CSS features: - Dark background (#1e1e1e) when agent is docked - Fixed positioning for masterbar and #wpcom - Border and border-radius for framed appearance - Proper spacing (16px) and sidebar width (350px) - Automatically injected/removed on dock/undock 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add ChatHeader component with dropdown menu functionality: - Create ChatHeader component - Displays menu dropdown and close button - Adapted from big-sky-plugin chat header - Uses WordPress DropdownMenu component - Responsive button sizes based on dock state - Add menu items to AgentDock - Dock/Undock toggle (drawerRight/login icons) - Reset chat (rotateRight icon) - Menu items created dynamically based on dock state - Integrate ChatHeader into AgentUI.ConversationView - Update agent configuration - Use wp-orchestrator agent ID - Use production agent URL (public-api.wordpress.com) - Match big-sky-plugin constants Menu features: - Pop out/Move to sidebar - toggles dock/undock - Reset chat - clears conversation and creates new session - Close button - closes/collapses the agent - Icons from @wordpress/icons for consistency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
… to follow conventions - Fix chrome application logic by removing redundant manual calls in handlers - Fix sidebar breaking CSS issue by simplifying body container styles - Add animated Big Sky icon component using @rive-app/react-canvas - Rename all files and folders to follow lowercase-with-dashes convention: - Component folders: AgentDock → agent-dock, AgentsManager → agents-manager, etc. - Adapter files: ChromeAdapter.ts → chrome-adapter.ts, etc. - Hook files: useAgentSession.ts → use-agent-session.ts, etc. - Config files: createAgentConfig.ts → create-agent-config.ts - Abilities files: AbilityRegistry.ts → ability-registry.ts - Update all import paths across the package to reflect new file names 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Implements OAuth-based authentication for AI agent requests to public-api.wordpress.com using Calypso's @automattic/oauth-token package. The authentication provider retrieves the OAuth token from wpcom_token cookie/localStorage and adds it to the Authorization header as a Bearer token, matching the pattern used by wpcom-xhr-request. Changes: - Created calypso-auth-provider.ts with OAuth token integration - Updated CalypsoAIAgent to use authProvider and enable streaming - Added @automattic/oauth-token dependency - Exported authentication utilities and types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Fixes chrome frame border issues with Calypso sidebar and improves UX by disabling reset chat when no messages or during processing. Changes: - Updated CalypsoChromeAdapter to properly position and constrain sidebar within chrome frame - Added left/bottom spacing to sidebar for proper border alignment - Added height/max-height constraints to both #wpcom and .layout__secondary to prevent overflow - Disabled reset chat menu item when no messages or when agent is processing (matching big-sky-plugin behavior) - Added isDisabled property to ChatHeaderMenuItem interface 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add conditional loading to help-center package that allows switching between
the legacy HelpCenterGPT and the new unified CalypsoAIAgent based on feature flags.
**Implementation:**
1. Created `useShouldUseUnifiedAgent` hook that checks:
- Config flag: `config.isEnabled('unified-agent')`
- URL flag: `?flags=unified-agent` for testing
- API eligibility: `supportStatus.eligibility.unified_agent_enabled`
(requires backend support-status endpoint update)
2. Created `HelpCenterAIAssistant` wrapper component that:
- Renders CalypsoAIAgent when feature flag is enabled
- Falls back to legacy HelpCenterGPT when disabled
- Passes currentUser, site, and sectionName from help-center context
3. Updated `help-center-contact-form.tsx` to use HelpCenterAIAssistant
instead of HelpCenterGPT directly
4. Added `@automattic/ai-agents` as workspace dependency
5. Exported new component and hook from package index
**Testing:**
- Add `?flags=unified-agent` to URL to test the new unified agent
- Or enable via config flag in calypso-config
**Future work:**
- Backend needs to add `unified_agent_enabled` field to /help/support-status
- Consider lazy-loading CalypsoAIAgent to reduce bundle size when flag is off
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Add unified-agent flag to help-center widget config.js.
This allows the config.isEnabled('unified-agent') check to work
in the help-center widget deployed to widgets.wp.com.
Set to false by default. Can be enabled to test unified AI agent.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Jetpack Cloud live (direct link)
Automattic for Agencies live (direct link)
|
Enable /me/preferences persistence for help-center widget by: 1. Adding optional savePreference/loadPreference props to CalypsoAIAgent - Falls back to window.wpcomRequest if not provided (Calypso context) - Allows external implementations to be passed in 2. Implementing preference callbacks in HelpCenterAIAssistant using wpcom-proxy-request - Uses canAccessWpcomApis() to check availability - Saves/loads from /me/preferences endpoint - Persists agent dock state (docked/undocked, chat state) This ensures the agent's state is persisted across sessions in both Calypso and help-center widget contexts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Set unified-agent feature flag to true in help-center config to enable testing of the new unified AI agent in dev environment. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add console logs to trace: - Which feature flag checks are passing/failing - Whether CalypsoAIAgent or HelpCenterGPT is rendered - Current config data and support status - User and site context This will help debug why the unified UI might not be showing. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Implements proper authentication for AI agents in both Calypso and non-Calypso
environments, with improved chrome styling for wp-admin.
Authentication Changes:
- Add JWT token authentication via apiFetch for non-Calypso environments
- Detect environment (Calypso vs wp-admin/widgets.wp.com) using origin
- Use OAuth Bearer tokens in Calypso (wordpress.com, *.calypso.live)
- Use JWT tokens from REST API in wp-admin (simple & Jetpack sites)
- Support both simple sites (/wpcom/v2/sites/{id}/jetpack-openai-query/jwt)
and Jetpack sites (/jetpack/v4/jetpack-ai-jwt)
- Cache JWT tokens in localStorage for 30 minutes
- Pass site ID from CalypsoAIAgent props to auth provider
Chrome Adapter Improvements:
- Add wp-admin specific chrome styles when container is #wpbody
- Fix #adminmenuback and #adminmenuwrap fixed positioning
- Adjust #wpcontent margins for admin menu + AI sidebar
- Position #wpadminbar with proper spacing and borders
- Prevent admin menu from overlapping with AI agent sidebar
Help Center Integration:
- Fix TypeScript types for wpcomRequest responses
- Fix import order and linting issues
- Use defaultOpen prop correctly (boolean attribute)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <[email protected]>
Contributor
|
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
wellyshen
force-pushed
the
try/ai-agents
branch
2 times, most recently
from
500cba7 to
a65aae5
Compare
Contributor
|
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: App Entrypoints (~145 bytes added 📈 [gzipped]) Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used. Sections (~53269 bytes added 📈 [gzipped]) Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to. Async-loaded Components (~137961 bytes added 📈 [gzipped]) 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. Generated by performance advisor bot at iscalypsofastyet.com. |
matticbot
added
the
[Status] Needs Review
added 7 commits
November 21, 2025 18:05
…ter/help-center-wp-admin.js`
alshakero
reviewed
Nov 21, 2025
Member
alshakero
left a comment
alshakero
left a comment
There was a problem hiding this comment.
Looks really good! I left 2 comments only. Nothing blocking, just trying to help.
client/layout/ai-agent-loader.tsx
Outdated
| currentRoute: string; | ||
| }; | ||
|
|
||
| export default function AIAgentLoader( { sectionName, currentRoute }: Props ) { |
Member
There was a problem hiding this comment.
Optional: AIAgentLoader can access these values directly. No need for the props.
Comment on lines
+6
to
+9
| const currentUrl = window.location.href; | ||
| const urlParams = new URLSearchParams( new URL( currentUrl ).search ); | ||
| const flags = urlParams.get( 'flags' ); | ||
| return flags?.split( ',' ).includes( 'unified-agent' ) ?? false; |
Member
There was a problem hiding this comment.
This can probably be replaced with isEnabled( 'unified-agent' )
Comment on lines
+115
to
+133
| const defaultLoadPreference = async ( key: string ): Promise< PersistedAgentState | null > => { | ||
| // Try to use wpcom API if available | ||
| if ( typeof window !== 'undefined' && ( window as any ).wpcomRequest ) { | ||
| const wpcomRequest = ( window as any ).wpcomRequest; | ||
| try { | ||
| const response = await wpcomRequest( { | ||
| path: '/me/preferences', | ||
| apiNamespace: 'wpcom/v2', | ||
| method: 'GET', | ||
| } ); | ||
| return response?.calypso_preferences?.[ key ] || null; | ||
| } catch ( error ) { | ||
| // eslint-disable-next-line no-console | ||
| console.warn( '[usePersistedAgentState] Failed to load from wpcom:', error ); | ||
| } | ||
| } | ||
|
|
||
| return null; | ||
| }; |
Member
There was a problem hiding this comment.
This won't work in atomic. You'll need an adapter in Jetpack.
For inspiration:
github-actions
bot
removed
the
[Status] Needs Review
|
This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/30864743 Some locales (Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday. Hi @jom, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:
Thank you in advance! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed Changes
packages/ai-managerapps/helper-centerWhy are these changes being made?
Testing Instructions
Preparation
Code Review
Test Calypso Pages
/me), click the "?" icon, and the Odie chat should still loadflags=unified-agentto the URL — the unified AI chat will now appear in undocked mode insteadTest Other Pages (e.g., WP Admin, CIAB Admin, etc.)
widgets.wp.comcd apps/help-center && yarn dev --sync/wp-admin), click the "?" icon, and the Odie chat should still loadflags=unified-agentto the URL — the unified AI chat will now appear in undocked mode insteadPre-merge Checklist