Try: Move unified AI UI to Calypso #107179
Draft
+3,494
−30
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
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.
Trying to move the sidebar and unified UI to Calypso to be deployed via a calypso app
Issues:
/me): The page is broken (task)/plugins): The page is broken (task)