{ __( 'Your sites will show up here once you create them' ) }
diff --git a/apps/studio/src/components/root.tsx b/apps/studio/src/components/root.tsx
index d23e6b0959..3386308f6e 100644
--- a/apps/studio/src/components/root.tsx
+++ b/apps/studio/src/components/root.tsx
@@ -15,6 +15,7 @@ import { ImportExportProvider } from 'src/hooks/use-import-export';
import { SiteDetailsProvider } from 'src/hooks/use-site-details';
import { ThemeDetailsProvider } from 'src/hooks/use-theme-details';
import { OnboardingProvider } from 'src/modules/onboarding/hooks/use-onboarding';
+import { WorkspaceSelectionProvider } from 'src/modules/workspaces';
import { store } from 'src/stores';
import { initializeUserLocale } from 'src/stores/i18n-slice';
@@ -39,13 +40,15 @@ const Root = () => {
diff --git a/apps/studio/src/components/site-menu.tsx b/apps/studio/src/components/site-menu.tsx
index 08f79f7b06..0086d0f02d 100644
--- a/apps/studio/src/components/site-menu.tsx
+++ b/apps/studio/src/components/site-menu.tsx
@@ -14,6 +14,12 @@ import { cx } from 'src/lib/cx';
import { getIpcApi } from 'src/lib/get-ipc-api';
import { supportedEditorConfig } from 'src/modules/user-settings/lib/editor';
import { getTerminalName } from 'src/modules/user-settings/lib/terminal';
+import { useWorkspaceSelection } from 'src/modules/workspaces';
+import { WorkspaceSidebarRow } from 'src/modules/workspaces/components/workspace-sidebar-row';
+import {
+ createWorkspaceDollyWorkspaceDescriptor,
+ setSelectedWorkspaceDollyConversationId,
+} from 'src/modules/workspaces/lib/dolly/session';
import { useRootSelector } from 'src/stores';
import { useGetUserEditorQuery, useGetUserTerminalQuery } from 'src/stores/installed-apps-api';
import { syncOperationsSelectors } from 'src/stores/sync';
@@ -257,6 +263,14 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
const { setSelectedTab } = useContentTabs();
const { handleDeleteSite } = useDeleteSite();
const { data: editor } = useGetUserEditorQuery();
+ const {
+ enableWorkspaces,
+ workspaces: sidebarWorkspaces,
+ isLoading: isLoadingWorkspaces,
+ selectedWorkspaceId,
+ selectWorkspace,
+ selectWorkspaceTab,
+ } = useWorkspaceSelection();
const [ draggedIndex, setDraggedIndex ] = useState< number | null >( null );
const [ dragOverIndex, setDragOverIndex ] = useState< number | null >( null );
@@ -294,6 +308,18 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
setDragOverIndex( null );
};
+ const selectWorkspaceChat = (
+ workspace: ( typeof sidebarWorkspaces )[ number ],
+ conversationId: string
+ ) => {
+ selectWorkspace( workspace.id );
+ selectWorkspaceTab( workspace.id, 'assistant' );
+ setSelectedWorkspaceDollyConversationId(
+ createWorkspaceDollyWorkspaceDescriptor( workspace ),
+ conversationId
+ );
+ };
+
useEffect( () => {
const unsubscribe = window.ipcListener.subscribe(
'site-context-menu-action',
@@ -392,24 +418,57 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
) }
>
- { component }
+
+ { component }
+
);
};
@@ -135,4 +198,29 @@ describe( 'App', () => {
expect( screen.getByText( 'Add a site' ) ).toBeInTheDocument();
} );
} );
+
+ it( 'renders workspace content for remote-only workspaces when enabled', async () => {
+ featureFlagsMock.enableWorkspaces = true;
+ mockWpcomSitesQuery( [ createSyncSite() ] );
+ ( useOnboarding as Mock ).mockReturnValue( {
+ needsOnboarding: false,
+ } );
+ ( useSiteDetails as Mock ).mockReturnValue( {
+ sites: [],
+ loadingSites: false,
+ selectedSite: null,
+ snapshots: [],
+ loadingServer: {},
+ siteCreationMessages: {},
+ setSelectedSiteId: vi.fn(),
+ } );
+
+ renderWithProvider(
- { children }
+
+
+ { children }
+
);
};
@@ -109,6 +241,15 @@ const renderWithProvider = ( children: React.ReactElement ) => {
describe( 'MainSidebar Footer', () => {
beforeEach( () => {
vi.clearAllMocks();
+ localStorage.clear();
+ clearWorkspaceDollyAssistantStateCacheForTests();
+ store.dispatch( testActions.resetState() );
+ featureFlagsMock.enableWorkspaces = false;
+ siteDetailsMocked.sites = defaultLocalSites();
+ siteDetailsMocked.selectedSite = site2;
+ vi.mocked( useAuth, { partial: true } ).mockReturnValue( { isAuthenticated: false } );
+ ipcApiMock.getConnectedWpcomSites.mockResolvedValue( [] );
+ mockWpcomSitesQuery();
} );
it( 'Has add site button', async () => {
vi.mocked( useAuth, { partial: true } ).mockReturnValue( { isAuthenticated: false } );
@@ -137,6 +278,19 @@ describe( 'MainSidebar Footer', () => {
} );
describe( 'MainSidebar Site Menu', () => {
+ beforeEach( () => {
+ vi.clearAllMocks();
+ localStorage.clear();
+ clearWorkspaceDollyAssistantStateCacheForTests();
+ store.dispatch( testActions.resetState() );
+ featureFlagsMock.enableWorkspaces = false;
+ siteDetailsMocked.sites = defaultLocalSites();
+ siteDetailsMocked.selectedSite = site2;
+ vi.mocked( useAuth, { partial: true } ).mockReturnValue( { isAuthenticated: false } );
+ ipcApiMock.getConnectedWpcomSites.mockResolvedValue( [] );
+ mockWpcomSitesQuery();
+ } );
+
it( 'renders the list of sites', async () => {
await act( async () => renderWithProvider(
- { component }
+
+ { component }
+
);
};
it( 'should render tabs correctly if selected site exists', async () => {
vi.mocked( useSiteDetails, { partial: true } ).mockReturnValue( {
- selectedSite,
- sites: [ selectedSite ],
- loadingServer: {},
+ ...createSiteDetailsReturn(),
} );
await act( async () => renderWithProvider( ` to host local WordPress sites
diff --git a/apps/studio/src/ipc-handlers.ts b/apps/studio/src/ipc-handlers.ts
index ca9dea6b4a..cddf22a710 100644
--- a/apps/studio/src/ipc-handlers.ts
+++ b/apps/studio/src/ipc-handlers.ts
@@ -40,6 +40,7 @@ import {
} from '@studio/common/lib/blueprint-bundle';
import { validateBlueprintData } from '@studio/common/lib/blueprint-validation';
import { parseCliError, errorMessageContains } from '@studio/common/lib/cli-error';
+import { SITE_EVENTS } from '@studio/common/lib/cli-events';
import { getConnectedWpcomSitesForLocalSite } from '@studio/common/lib/connected-sites';
import { createDeployIgnoreFilter } from '@studio/common/lib/deploy-ignore';
import { extractZip } from '@studio/common/lib/extract-zip';
@@ -77,7 +78,7 @@ import {
SIDEBAR_WIDTH,
WINDOWS_TITLEBAR_HEIGHT,
} from 'src/constants';
-import { sendIpcEventToRendererWithWindow } from 'src/ipc-utils';
+import { sendIpcEventToRenderer, sendIpcEventToRendererWithWindow } from 'src/ipc-utils';
import {
deleteAiSessionPlacement,
hydrateAiSessionSummaryWithPlacement,
@@ -1029,6 +1030,24 @@ export async function startServer( event: IpcMainInvokeEvent, id: string ): Prom
);
console.log( `Server started for '${ server.details.name }'` );
+ await sendIpcEventToRenderer( 'site-event', {
+ event: SITE_EVENTS.UPDATED,
+ siteId: id,
+ running: server.details.running,
+ site: {
+ ...server.details,
+ url: getSiteEventUrl( server.details ),
+ },
+ } );
+}
+
+function getSiteEventUrl( site: SiteDetails ) {
+ if ( site.customDomain ) {
+ const protocol = site.enableHttps ? 'https' : 'http';
+ return `${ protocol }://${ site.customDomain }`;
+ }
+
+ return `http://localhost:${ site.port }`;
}
export async function stopServer( event: IpcMainInvokeEvent, id: string ): Promise< void > {
@@ -1038,6 +1057,15 @@ export async function stopServer( event: IpcMainInvokeEvent, id: string ): Promi
}
await server.stop();
+ await sendIpcEventToRenderer( 'site-event', {
+ event: SITE_EVENTS.UPDATED,
+ siteId: id,
+ running: server.details.running,
+ site: {
+ ...server.details,
+ url: getSiteEventUrl( server.details ),
+ },
+ } );
}
export async function stopAllServers(): Promise< void > {
diff --git a/apps/studio/src/ipc-types.d.ts b/apps/studio/src/ipc-types.d.ts
index f57b868f55..8f831bd85e 100644
--- a/apps/studio/src/ipc-types.d.ts
+++ b/apps/studio/src/ipc-types.d.ts
@@ -100,6 +100,7 @@ type IpcApi = {
interface FeatureFlags {
enableBlueprints: boolean;
enableStudioCodeUi: boolean;
+ enableWorkspaces: boolean;
}
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
diff --git a/apps/studio/src/lib/feature-flags.ts b/apps/studio/src/lib/feature-flags.ts
index a1bd010661..6b870ba5ae 100644
--- a/apps/studio/src/lib/feature-flags.ts
+++ b/apps/studio/src/lib/feature-flags.ts
@@ -18,6 +18,12 @@ export const FEATURE_FLAGS: Record< keyof FeatureFlags, FeatureFlagDefinition >
flag: 'enableStudioCodeUi',
default: false,
},
+ enableWorkspaces: {
+ label: 'Workspaces',
+ env: 'ENABLE_WORKSPACES',
+ flag: 'enableWorkspaces',
+ default: false,
+ },
} as const;
export function getFeatureFlagFromEnv( flag: keyof FeatureFlags ): boolean {
diff --git a/apps/studio/src/modules/sync/components/sync-connected-sites.tsx b/apps/studio/src/modules/sync/components/sync-connected-sites.tsx
index 8767034f80..af4a7e18e5 100644
--- a/apps/studio/src/modules/sync/components/sync-connected-sites.tsx
+++ b/apps/studio/src/modules/sync/components/sync-connected-sites.tsx
@@ -3,7 +3,7 @@ import { createInterpolateElement } from '@wordpress/element';
import { sprintf } from '@wordpress/i18n';
import { cloudUpload, cloudDownload, info, close, error } from '@wordpress/icons';
import { useI18n } from '@wordpress/react-i18n';
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
import { ArrowIcon } from 'src/components/arrow-icon';
import Button from 'src/components/button';
import { ClearAction } from 'src/components/clear-action';
@@ -48,12 +48,16 @@ import {
} from 'src/stores/sync/connected-sites';
import type { SyncSite } from '@studio/common/types/sync';
-const SyncConnectedSiteControls = ( {
+export const SyncConnectedSiteControls = ( {
connectedSite,
selectedSite,
+ disabled = false,
+ disabledReason,
}: {
connectedSite: SyncSite;
selectedSite: SiteDetails;
+ disabled?: boolean;
+ disabledReason?: string;
} ) => {
const { __ } = useI18n();
const isOffline = useOffline();
@@ -75,6 +79,10 @@ const SyncConnectedSiteControls = ( {
)
);
const isAnySiteSyncing = isAnySitePulling || isAnySitePushing;
+ const isSyncActionDisabled = isAnySiteSyncing || disabled;
+ const syncDisabledText = disabled
+ ? disabledReason ?? __( 'This sync action is temporarily unavailable.' )
+ : undefined;
return (
-
- { sites.map( ( site, index ) => (
-
- handleDragOver( e, sites.length ) }
- onDrop={ ( e ) => handleDrop( e, sites.length ) }
- />
+ { enableWorkspaces ? (
+ <>
+ { sidebarWorkspaces.map( ( workspace ) => (
+
+ ) : undefined + } + onSelect={ () => selectWorkspace( workspace.id ) } + onSelectChat={ ( conversationId ) => + selectWorkspaceChat( workspace, conversationId ) + } + /> + ) ) } + { isLoadingWorkspaces && ( + - + { __( 'Loading...' ) } + + ) } + + ) : ( + <> + { sites.map( ( site, index ) => ( +
- handleDragOver( e, sites.length ) } + onDrop={ ( e ) => handleDrop( e, sites.length ) } + /> + + ) }
{ selectedSite.name }
+ ),
+} ) );
+vi.mock( 'src/modules/workspaces/components/workspace-dolly-assistant', () => ( {
+ WorkspaceDollyAssistant: ( {
+ onOpenPreviewTarget,
+ previewState,
+ }: {
+ onOpenPreviewTarget: (
+ targetId: WorkspaceTargetId,
+ pathOrUrl: string,
+ nextPreviewState: WorkspacePreviewState
+ ) => void;
+ previewState: WorkspacePreviewState;
+ } ) => (
+
+
+
+ ),
+} ) );
+vi.mock( 'src/hooks/use-feature-flags', () => ( {
+ useFeatureFlags: () => featureFlagsMock,
+} ) );
vi.mock( 'src/hooks/use-auth', () => ( {
useAuth: () => ( {
isAuthenticated: true,
authenticate: vi.fn(),
+ user: { id: 123, email: 'user@example.com', displayName: 'User' },
+ client: {} as never,
} ),
} ) );
vi.mock( 'src/lib/app-globals', async () => ( {
@@ -35,6 +95,12 @@ vi.mock( 'src/lib/get-ipc-api', async () => ( {
updateConnectedWpcomSites: vi.fn(),
getUserTerminal: vi.fn().mockResolvedValue( 'terminal' ),
getUserEditor: vi.fn().mockResolvedValue( 'vscode' ),
+ showErrorMessageBox: vi.fn(),
+ showMessageBox: vi.fn().mockResolvedValue( { response: 0 } ),
+ showNotification: vi.fn(),
+ connectWpcomSites: vi.fn().mockResolvedValue( undefined ),
+ openSiteURL: vi.fn(),
+ openURL: vi.fn(),
setWindowControlVisibility: vi.fn(),
} ),
} ) );
@@ -65,27 +131,147 @@ vi.mock( 'src/stores/wpcom-api', async () => {
};
} );
+vi.mock( 'src/stores/sync/wpcom-sites', async () => {
+ const actual = await vi.importActual< typeof import('src/stores/sync/wpcom-sites') >(
+ 'src/stores/sync/wpcom-sites'
+ );
+ return {
+ ...actual,
+ useGetWpComSitesQuery: useGetWpComSitesQueryMock,
+ useGetActiveWpcomThemeQuery: useGetActiveWpcomThemeQueryMock,
+ useGetWpcomSiteSettingsQuery: useGetWpcomSiteSettingsQueryMock,
+ };
+} );
+vi.mock( 'src/stores/sync/sync-hooks', async () => {
+ const actual = await vi.importActual< typeof import('src/stores/sync/sync-hooks') >(
+ 'src/stores/sync/sync-hooks'
+ );
+ return {
+ ...actual,
+ useLatestRewindId: syncHooksMock.useLatestRewindId,
+ useRemoteFileTree: syncHooksMock.useRemoteFileTree,
+ };
+} );
+
store.replaceReducer( testReducer );
+const createSyncSite = ( overrides: Partial< SyncSite > = {} ): SyncSite => ( {
+ id: 101,
+ localSiteId: '',
+ name: 'Remote Site',
+ url: 'https://remote.example',
+ isStaging: false,
+ isPressable: false,
+ syncSupport: 'syncable',
+ lastPullTimestamp: null,
+ lastPushTimestamp: null,
+ ...overrides,
+} );
+
+const createSiteDetailsReturn = ( {
+ selectedSite: selectedSiteValue = selectedSite,
+ sites = [ selectedSite ],
+ setSelectedSiteId = vi.fn(),
+ startServer = vi.fn(),
+}: {
+ selectedSite?: SiteDetails | null;
+ sites?: SiteDetails[];
+ setSelectedSiteId?: ReturnType< typeof vi.fn >;
+ startServer?: ReturnType< typeof vi.fn >;
+} = {} ) =>
+ ( {
+ selectedSite: selectedSiteValue,
+ sites,
+ loadingServer: {},
+ siteCreationMessages: {},
+ setSelectedSiteId,
+ startServer,
+ stopServer: vi.fn(),
+ } ) as Partial< ReturnType< typeof useSiteDetails > >;
+
+const mockWpcomSitesQuery = ( sites: SyncSite[] = [] ) => {
+ useGetWpComSitesQueryMock.mockReturnValue( {
+ data: { sites, total: sites.length, page: 1, perPage: 100 },
+ isLoading: false,
+ isFetching: false,
+ refetch: vi.fn(),
+ } );
+};
+
+const mockActiveWpcomThemeQuery = (
+ data:
+ | {
+ id?: string;
+ name?: string;
+ screenshotUrl?: string;
+ isBlockTheme?: boolean;
+ }
+ | undefined = undefined
+) => {
+ useGetActiveWpcomThemeQueryMock.mockReturnValue( {
+ data,
+ isLoading: false,
+ isFetching: false,
+ refetch: vi.fn(),
+ } );
+};
+
+const mockWpcomSiteSettingsQuery = (
+ data:
+ | {
+ id?: number;
+ name?: string;
+ description?: string;
+ url?: string;
+ lang?: string;
+ localeVariant?: string;
+ settings: Record< string, unknown >;
+ }
+ | undefined = undefined
+) => {
+ useGetWpcomSiteSettingsQueryMock.mockReturnValue( {
+ data,
+ isLoading: false,
+ isFetching: false,
+ refetch: vi.fn(),
+ } );
+};
+
describe( 'SiteContentTabs', () => {
beforeEach( () => {
vi.clearAllMocks(); // Clear mock call history between tests
+ localStorage.clear();
+ featureFlagsMock.enableWorkspaces = false;
+ mockWpcomSitesQuery();
+ mockActiveWpcomThemeQuery();
+ mockWpcomSiteSettingsQuery();
+ syncHooksMock.useLatestRewindId.mockReturnValue( {
+ rewindId: null,
+ isLoading: false,
+ isError: false,
+ } );
+ syncHooksMock.useRemoteFileTree.mockReturnValue( {
+ fetchChildren: vi.fn().mockResolvedValue( [] ),
+ isLoading: false,
+ error: null,
+ } );
store.dispatch( testActions.resetState() );
} );
const renderWithProvider = ( component: React.ReactElement ) => {
return render(
- { isAnySiteSyncing ? (
+ { isSyncActionDisabled ? (
@@ -117,7 +126,7 @@ const SyncConnectedSiteControls = ( {
'!text-frame-text hover:!text-frame-theme'
) }
onClick={ () => setSyncDialogType( 'pull' ) }
- disabled={ isAnySiteSyncing || isOffline }
+ disabled={ isSyncActionDisabled || isOffline }
data-testid="sync-list-pull-button"
>
@@ -158,7 +168,7 @@ const SyncConnectedSiteControls = ( {
'!text-frame-text hover:!text-frame-theme'
) }
onClick={ () => setSyncDialogType( 'push' ) }
- disabled={ isAnySiteSyncing || isOffline }
+ disabled={ isSyncActionDisabled || isOffline }
data-testid="sync-list-push-button"
>
+
+
+
+ );
+}
+
+export function WorkspaceSyncPanelContent( {
+ workspace,
+ selectedTargetId,
+}: WorkspaceSyncPanelContentProps ) {
+ const dispatch = useAppDispatch();
+ const { createSiteFromRemoteSite } = useAddSite();
+ const { refreshWorkspaces } = useWorkspaceSelection();
+ const [ connectSite ] = useConnectSiteMutation();
+ const [ disconnectSite ] = useDisconnectSiteMutation();
+ const [ environmentSyncDirection, setEnvironmentSyncDirection ] =
+ useState< StagingSyncDirection | null >( null );
+ const [ creatingLocalSiteId, setCreatingLocalSiteId ] = useState< number | null >( null );
+ const [ connectingRemoteSiteId, setConnectingRemoteSiteId ] = useState< number | null >( null );
+ const [ creatingStagingProductionSiteId, setCreatingStagingProductionSiteId ] = useState<
+ number | null
+ >( null );
+ const localSite = workspace.targets.local?.site;
+ const productionSite = workspace.targets.production?.site;
+ const stagingSite = workspace.targets.staging?.site;
+ const localProductionSyncState = useLocalRemoteSyncState( localSite, productionSite );
+ const localStagingSyncState = useLocalRemoteSyncState( localSite, stagingSite );
+ const isProductionConnectedToLocal = isRemoteConnectedToLocal( productionSite, localSite );
+ const isStagingConnectedToLocal = isRemoteConnectedToLocal( stagingSite, localSite );
+ const connectedLocalSites = useMemo(
+ () =>
+ [ productionSite, stagingSite ].filter(
+ ( site ): site is SyncSite => Boolean( site ) && isRemoteConnectedToLocal( site, localSite )
+ ),
+ [ localSite, productionSite, stagingSite ]
+ );
+ const isEnvironmentSyncing = useRootSelector(
+ stagingSyncSelectors.selectIsProductionSiteSyncing( productionSite?.id )
+ );
+ const isAnyLocalRemoteSyncing =
+ localProductionSyncState.isSyncing || localStagingSyncState.isSyncing;
+ const shouldShowLocalProductionSetupRow = Boolean(
+ ( productionSite && ! isProductionConnectedToLocal ) || ( localSite && ! productionSite )
+ );
+ const shouldShowLocalStagingSetupRow = Boolean(
+ stagingSite && ! isStagingConnectedToLocal && ( localSite || ! productionSite )
+ );
+ const shouldShowEnvironmentRow = Boolean( productionSite || stagingSite );
+
+ const handleCreateLocalSite = useCallback(
+ async ( remoteSite: SyncSite ) => {
+ setCreatingLocalSiteId( remoteSite.id );
+ try {
+ await createSiteFromRemoteSite( remoteSite );
+ refreshWorkspaces();
+ } catch ( error ) {
+ getIpcApi().showErrorMessageBox( {
+ title: __( 'Could not create local site' ),
+ message:
+ error instanceof Error
+ ? error.message
+ : __( 'The local site could not be created from this WordPress.com site.' ),
+ } );
+ } finally {
+ setCreatingLocalSiteId( null );
+ }
+ },
+ [ createSiteFromRemoteSite, refreshWorkspaces ]
+ );
+
+ const handleConnectRemoteSite = useCallback(
+ async ( remoteSite: SyncSite, site: SiteDetails ) => {
+ setConnectingRemoteSiteId( remoteSite.id );
+ try {
+ const result = await connectSite( { site: remoteSite, localSiteId: site.id } );
+ if ( 'error' in result ) {
+ throw result.error;
+ }
+ refreshWorkspaces();
+ } catch ( error ) {
+ getIpcApi().showErrorMessageBox( {
+ title: __( 'Could not connect site' ),
+ message:
+ error instanceof Error
+ ? error.message
+ : __( 'The WordPress.com site could not be connected to this local site.' ),
+ } );
+ } finally {
+ setConnectingRemoteSiteId( null );
+ }
+ },
+ [ connectSite, refreshWorkspaces ]
+ );
+
+ const handleDisconnectSite = useCallback(
+ async ( siteId: number ) => {
+ if ( ! localSite ) {
+ return;
+ }
+
+ try {
+ await disconnectSite( { siteId, localSiteId: localSite.id } );
+ refreshWorkspaces();
+ } catch ( error ) {
+ getIpcApi().showErrorMessageBox( {
+ title: __( 'Could not disconnect site' ),
+ message:
+ error instanceof Error
+ ? error.message
+ : __( 'The WordPress.com site could not be disconnected.' ),
+ } );
+ }
+ },
+ [ disconnectSite, localSite, refreshWorkspaces ]
+ );
+
+ const handleCreateStagingSite = useCallback(
+ async ( site: SyncSite ) => {
+ setCreatingStagingProductionSiteId( site.id );
+ const result = await dispatch(
+ stagingSyncThunks.createStagingSite( { productionSite: site } )
+ );
+ setCreatingStagingProductionSiteId( null );
+
+ if ( stagingSyncThunks.createStagingSite.fulfilled.match( result ) ) {
+ getIpcApi().showNotification( {
+ title: site.name,
+ body: __( 'Staging site created' ),
+ } );
+ refreshWorkspaces();
+ return;
+ }
+
+ getIpcApi().showErrorMessageBox( {
+ title: __( 'Could not create staging site' ),
+ message:
+ result.payload?.message ??
+ __( 'The staging site could not be created for this production site.' ),
+ } );
+ },
+ [ dispatch, refreshWorkspaces ]
+ );
+
+ useEffect( () => {
+ if ( ! productionSite?.id || ! stagingSite?.id ) {
+ return;
+ }
+
+ void dispatch(
+ stagingSyncThunks.fetchStagingSiteSyncState( { productionSiteId: productionSite.id } )
+ );
+ }, [ dispatch, productionSite?.id, stagingSite?.id ] );
+
+ useEffect( () => {
+ if ( ! productionSite?.id || ! stagingSite?.id || ! isEnvironmentSyncing ) {
+ return;
+ }
+
+ const intervalId = window.setInterval( () => {
+ void dispatch(
+ stagingSyncThunks.fetchStagingSiteSyncState( { productionSiteId: productionSite.id } )
+ );
+ }, 3000 );
+
+ return () => window.clearInterval( intervalId );
+ }, [ dispatch, isEnvironmentSyncing, productionSite?.id, stagingSite?.id ] );
+
+ if (
+ connectedLocalSites.length === 0 &&
+ ! shouldShowLocalProductionSetupRow &&
+ ! shouldShowLocalStagingSetupRow &&
+ ! shouldShowEnvironmentRow
+ ) {
+ return (
+
+
+ );
+};
+
+const getInput = () => screen.getByRole( 'textbox' );
+
+const getChatMessageText = ( text: string | RegExp ) =>
+ screen.getAllByText( text ).find( ( element ) => element.closest( '[data-slot="messages"]' ) ) ??
+ screen.getByText( text );
+
+describe( 'WorkspaceDollyAssistant', () => {
+ beforeEach( () => {
+ vi.clearAllMocks();
+ clearWorkspaceDollyAssistantStateCacheForTests();
+ localStorage.clear();
+ window.HTMLElement.prototype.scrollTo = vi.fn();
+ Object.defineProperty( URL, 'createObjectURL', {
+ configurable: true,
+ value: vi.fn( () => 'blob:workspace-dolly-image' ),
+ } );
+ Object.defineProperty( URL, 'revokeObjectURL', {
+ configurable: true,
+ value: vi.fn(),
+ } );
+ vi.stubGlobal(
+ 'fetch',
+ vi.fn( async () => {
+ throw new Error( 'Unexpected fetch request' );
+ } )
+ );
+ } );
+
+ afterAll( () => {
+ vi.unstubAllGlobals();
+ } );
+
+ it( 'keeps workspace chat in one session while using one remote transport endpoint', async () => {
+ const { requestBodies, requestUrls } = mockDollyFetch( ( { callIndex } ) =>
+ createDollyResponse(
+ callIndex === 0 ? 'First workspace response' : 'Second workspace response',
+ 'session-workspace',
+ callIndex === 0 ? 'task-first' : 'task-second'
+ )
+ );
+ renderDollyAssistant();
+
+ fireEvent.change( getInput(), { target: { value: 'Hello production' } } );
+ fireEvent.click( screen.getByRole( 'button', { name: 'Send message' } ) );
+
+ await waitFor( () => {
+ expect( getChatMessageText( 'First workspace response' ) ).toBeVisible();
+ } );
+
+ fireEvent.change( getInput(), { target: { value: 'Hello staging' } } );
+ fireEvent.click( screen.getByRole( 'button', { name: 'Send message' } ) );
+
+ await waitFor( () => {
+ expect( getChatMessageText( 'Second workspace response' ) ).toBeVisible();
+ } );
+
+ expect( requestUrls ).toEqual( [
+ 'https://public-api.wordpress.com/wpcom/v2/sites/202/ai/agent/dolly',
+ 'https://public-api.wordpress.com/wpcom/v2/sites/202/ai/agent/dolly',
+ ] );
+ expect( requestBodies[ 0 ].params?.sessionId ).toBe( requestBodies[ 0 ].params?.id );
+ expect( requestBodies[ 1 ].params?.sessionId ).toBe( 'session-workspace' );
+ } );
+
+ it( 'sends the active remote target to Dolly without changing the workspace session', async () => {
+ const { requestBodies, requestUrls } = mockDollyFetch( ( { callIndex } ) =>
+ createDollyResponse(
+ callIndex === 0 ? 'Staging response' : 'Production response',
+ 'session-workspace',
+ callIndex === 0 ? 'task-staging' : 'task-production'
+ )
+ );
+ const authContextValue: AuthContextType = {
+ client: unauthenticatedClient,
+ isAuthenticated: true,
+ authenticate: vi.fn(),
+ logout: vi.fn().mockResolvedValue( undefined ),
+ };
+ const renderAssistantForTarget = ( previewTargetId: WorkspaceTargetId, currentUrl: string ) => (
+
+
+ );
+ const { rerender } = render(
+ renderAssistantForTarget( 'staging', 'https://staging.example/wp-admin/edit.php' )
+ );
+
+ fireEvent.change( getInput(), { target: { value: 'Check staging' } } );
+ fireEvent.click( screen.getByRole( 'button', { name: 'Send message' } ) );
+
+ await waitFor( () => {
+ expect( getChatMessageText( 'Staging response' ) ).toBeVisible();
+ } );
+
+ rerender(
+ renderAssistantForTarget(
+ 'production',
+ 'https://production.example/wp-admin/edit.php?post=7'
+ )
+ );
+ fireEvent.change( getInput(), { target: { value: 'Now check production' } } );
+ fireEvent.click( screen.getByRole( 'button', { name: 'Send message' } ) );
+
+ await waitFor( () => {
+ expect( getChatMessageText( 'Production response' ) ).toBeVisible();
+ } );
+
+ expect( requestUrls ).toEqual( [
+ 'https://public-api.wordpress.com/wpcom/v2/sites/202/ai/agent/dolly',
+ 'https://public-api.wordpress.com/wpcom/v2/sites/101/ai/agent/dolly',
+ ] );
+ expect( requestBodies[ 1 ].params?.sessionId ).toBe( 'session-workspace' );
+ expect( JSON.stringify( requestBodies[ 0 ] ) ).toContain(
+ 'https://staging.example/wp-admin/edit.php'
+ );
+ expect( JSON.stringify( requestBodies[ 1 ] ) ).toContain(
+ 'https://production.example/wp-admin/edit.php?post=7'
+ );
+ } );
+
+ it( 'warns when Dolly is using the production target', () => {
+ renderDollyAssistant( {
+ transportTarget: productionTarget,
+ previewTargetId: 'production',
+ } );
+
+ expect( screen.getByRole( 'note' ) ).toHaveTextContent(
+ 'Production site: changes requested in this chat can be applied directly to the live site.'
+ );
+ } );
+
+ it( 'sends the selected local preview URL and local site id while keeping the remote transport session', async () => {
+ const { requestBodies, requestUrls } = mockDollyFetch( () =>
+ createDollyResponse( 'Local context response', 'session-workspace', 'task-local' )
+ );
+ const localPreviewState = {
+ ...createDefaultWorkspacePreviewState(),
+ open: true,
+ pathOrUrl: '/wp-admin/',
+ currentUrl: 'http://localhost:8881/wp-admin/post.php?post=7',
+ };
+ render(
+
+
+ );
+
+ fireEvent.change( getInput(), { target: { value: 'Use the local preview context' } } );
+ fireEvent.click( screen.getByRole( 'button', { name: 'Send message' } ) );
+
+ await waitFor( () => {
+ expect( getChatMessageText( 'Local context response' ) ).toBeVisible();
+ } );
+
+ expect( requestUrls ).toEqual( [
+ 'https://public-api.wordpress.com/wpcom/v2/sites/202/ai/agent/dolly',
+ ] );
+ expect( requestBodies[ 0 ].params?.sessionId ).toBe( requestBodies[ 0 ].params?.id );
+ const requestJson = JSON.stringify( requestBodies[ 0 ] );
+ expect( requestJson ).toContain( '"targetId":"local"' );
+ expect( requestJson ).toContain( 'local-site-1' );
+ expect( requestJson ).toContain( 'http://localhost:8881/wp-admin/post.php?post=7' );
+ } );
+
+ it( 'uploads pending images and sends them to Dolly through input actions', async () => {
+ const dollyRequestBodies: Array< Record< string, unknown > > = [];
+ const mediaRequests: string[] = [];
+ const fetchMock = vi.fn( async ( input: RequestInfo | URL, init?: RequestInit ) => {
+ const url = String( input );
+
+ if ( url.includes( '/rest/v1.1/sites/101/media/new' ) ) {
+ mediaRequests.push( url );
+ expect( init?.body ).toBeInstanceOf( FormData );
+
+ return new Response(
+ JSON.stringify( {
+ media: [
+ {
+ ID: 777,
+ URL: 'https://cdn.example/site-image.png',
+ mime_type: 'image/png',
+ file: 'site-image.png',
+ title: 'site-image',
+ },
+ ],
+ } ),
+ {
+ status: 200,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
+ }
+
+ const body = JSON.parse( String( init?.body ?? '{}' ) );
+ dollyRequestBodies.push( body );
+ return createDollyFetchResponse(
+ createDollyResponse( 'Image response', 'session-image', 'task-image' ),
+ body
+ );
+ } );
+ vi.stubGlobal( 'fetch', fetchMock );
+ renderDollyAssistant( { transportTarget: productionTarget, previewTargetId: 'production' } );
+
+ expect( screen.getByRole( 'button', { name: 'Upload image' } ) ).toBeVisible();
+
+ const imageFile = new File( [ 'image-bytes' ], 'site-image.png', { type: 'image/png' } );
+ fireEvent.change( screen.getByLabelText( 'Image upload input' ), {
+ target: { files: [ imageFile ] },
+ } );
+
+ await waitFor( () => {
+ expect( screen.getByText( 'site-image.png' ) ).toBeVisible();
+ } );
+
+ fireEvent.change( getInput(), { target: { value: 'What is in this image?' } } );
+ fireEvent.click( screen.getByRole( 'button', { name: 'Send message' } ) );
+
+ await waitFor( () => {
+ expect( getChatMessageText( 'Image response' ) ).toBeVisible();
+ } );
+
+ expect( mediaRequests ).toEqual( [
+ 'https://public-api.wordpress.com/rest/v1.1/sites/101/media/new',
+ ] );
+ expect( JSON.stringify( dollyRequestBodies[ 0 ] ) ).toContain(
+ 'https://cdn.example/site-image.png'
+ );
+ expect( screen.getByRole( 'button', { name: 'Chat options' } ) ).toBeVisible();
+ } );
+
+ it( 'hydrates server conversations into the workspace chat across remote targets', async () => {
+ const client = {
+ req: {
+ get: vi.fn( ( { path }, callback ) => {
+ if ( path.startsWith( '/ai/chats/wpcom-agent-dolly' ) ) {
+ callback( null, [
+ {
+ chat_id: 301,
+ session_id: 'server-production-session',
+ site_id: 101,
+ created_at: '2026-05-14 13:00:00',
+ },
+ {
+ chat_id: 302,
+ session_id: 'server-staging-session',
+ site_id: 202,
+ created_at: '2026-05-14 14:00:00',
+ },
+ ] );
+ return;
+ }
+
+ if ( path.startsWith( '/ai/chat/wpcom-agent-dolly/301' ) ) {
+ callback( null, {
+ chat_id: 301,
+ session_id: 'server-production-session',
+ site_id: 101,
+ messages: [
+ {
+ role: 'user',
+ content: 'Production history question',
+ created_at: '2026-05-14 13:00:00',
+ },
+ {
+ role: 'assistant',
+ content: 'Production history answer',
+ created_at: '2026-05-14 13:01:00',
+ },
+ ],
+ } );
+ return;
+ }
+
+ if ( path.startsWith( '/ai/chat/wpcom-agent-dolly/302' ) ) {
+ callback( null, {
+ chat_id: 302,
+ session_id: 'server-staging-session',
+ site_id: 202,
+ messages: [
+ {
+ role: 'user',
+ content: 'Staging history question',
+ created_at: '2026-05-14 14:00:00',
+ },
+ {
+ role: 'assistant',
+ content: 'Staging history answer',
+ created_at: '2026-05-14 14:01:00',
+ },
+ ],
+ } );
+ return;
+ }
+
+ throw new Error( `Unexpected history path: ${ path }` );
+ } ),
+ },
+ } as unknown as WPCOM;
+
+ const hydratedConversationStates = await hydrateWorkspaceDollyConversationStates( client, {
+ workspaceId: workspace.id,
+ workspace,
+ remoteTargets: [ productionTarget, stagingTarget ],
+ } );
+
+ hydratedConversationStates.forEach( ( conversationState ) => {
+ mergeWorkspaceDollyConversationState( conversationState, { selectIfEmpty: true } );
+ } );
+
+ const selectedConversation = getWorkspaceDollyConversationState( {
+ workspaceId: workspace.id,
+ workspace,
+ remoteTargets: [ productionTarget, stagingTarget ],
+ } );
+ const conversations = getWorkspaceDollyConversationsForWorkspace( {
+ workspaceId: workspace.id,
+ workspace,
+ remoteTargets: [ productionTarget, stagingTarget ],
+ } );
+
+ expect( conversations ).toHaveLength( 2 );
+ expect(
+ conversations.flatMap( ( conversation ) =>
+ conversation.messages.map( ( message ) => message.content )
+ )
+ ).toEqual( [
+ 'Staging history question',
+ 'Staging history answer',
+ 'Production history question',
+ 'Production history answer',
+ ] );
+ expect( selectedConversation.sessionId ).toBe( 'server-staging-session' );
+ expect( client.req.get ).toHaveBeenCalledWith(
+ expect.objectContaining( {
+ path: expect.stringContaining( '/302' ),
+ } ),
+ expect.any( Function )
+ );
+ } );
+} );
diff --git a/apps/studio/src/modules/workspaces/components/workspace-dolly-assistant.tsx b/apps/studio/src/modules/workspaces/components/workspace-dolly-assistant.tsx
new file mode 100644
index 0000000000..a92a6189e5
--- /dev/null
+++ b/apps/studio/src/modules/workspaces/components/workspace-dolly-assistant.tsx
@@ -0,0 +1,1481 @@
+import { AgentUI, ImageUploader, createMessageRenderer } from '@automattic/agenttic-ui';
+import { Popover } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { chevronDown, Icon, image as imageIcon, moreVertical, plus, trash } from '@wordpress/icons';
+import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent } from 'react';
+import { ArrowIcon } from 'src/components/arrow-icon';
+import Button from 'src/components/button';
+import { ChatMessage } from 'src/components/chat-message';
+import offlineIcon from 'src/components/offline-icon';
+import { LIMIT_OF_PROMPTS_PER_USER } from 'src/constants';
+import { useAuth } from 'src/hooks/use-auth';
+import { useOffline } from 'src/hooks/use-offline';
+import { cx } from 'src/lib/cx';
+import { hydrateWorkspaceDollyConversationStates } from 'src/modules/workspaces/lib/dolly/api';
+import {
+ WORKSPACE_DOLLY_IMAGE_PREVIEW_CLASS_NAME,
+ WORKSPACE_DOLLY_IMAGE_PREVIEW_STYLE,
+ WorkspaceDollyOptimisticImages,
+ createWorkspaceDollyImagePrompt,
+ createWorkspaceDollyPendingVisibleImages,
+ createWorkspaceDollyVisibleMessage,
+ isWorkspaceDollyRenderableImageLinkUrl,
+ isWorkspaceDollyRenderableImageUrl,
+ readWorkspaceDollyFileAsDataUrl,
+ revokeWorkspaceDollyPendingImageUrls,
+ uploadWorkspaceDollyImages,
+} from 'src/modules/workspaces/lib/dolly/media';
+import {
+ createWorkspaceDollyPreviewAbilities,
+ createWorkspaceDollyPreviewContext,
+ createWorkspaceDollySiteAssociationContext,
+ getNextWorkspaceDollyPreviewState,
+ normalizeWorkspaceDollyPreviewUrl,
+ type PreviewAbilityTarget,
+} from 'src/modules/workspaces/lib/dolly/preview';
+import {
+ createNewWorkspaceDollyConversation,
+ createWorkspaceDollyWorkspaceDescriptor,
+ deleteWorkspaceDollyConversation,
+ getCachedWorkspaceDollyConversationState,
+ getWorkspaceDollyConversationState,
+ getWorkspaceDollyConversationsForWorkspace,
+ mergeWorkspaceDollyConversationState,
+ setSelectedWorkspaceDollyConversationId,
+ useSelectedWorkspaceDollyConversationId,
+ writeWorkspaceDollyConversationState,
+} from 'src/modules/workspaces/lib/dolly/session';
+import {
+ getWorkspaceDollyErrorMessage,
+ isWorkspaceDollyRequestAbortError,
+ sendWorkspaceDollyMessage,
+} from 'src/modules/workspaces/lib/dolly/transport';
+import {
+ abortWorkspaceDollyTurn,
+ finishWorkspaceDollyTurn,
+ getWorkspaceDollyTurn,
+ setWorkspaceDollyWorkspaceUnread,
+ startWorkspaceDollyTurn,
+ useWorkspaceDollyConversationTurn,
+} from 'src/modules/workspaces/lib/dolly/turns';
+import {
+ WORKSPACE_DOLLY_IMAGE_FILE_TYPES,
+ WORKSPACE_DOLLY_IMAGE_MAX_FILE_SIZE,
+ WORKSPACE_DOLLY_IMAGE_MAX_FILES,
+} from 'src/modules/workspaces/lib/dolly/types';
+import { generateMessage, type Message as MessageType } from 'src/stores/chat-slice';
+import type { ToolProvider } from '@automattic/agenttic-client';
+import type {
+ AgentUIProps,
+ ImageUploaderHandle,
+ NoticeConfig as AgentticNoticeConfig,
+ UploadedImage,
+} from '@automattic/agenttic-ui';
+import type { WorkspacePreviewState } from 'src/modules/workspaces/components/workspace-preview';
+import type {
+ WorkspaceDollyConversationState,
+ WorkspaceDollyMessageImageAttachment,
+ WorkspaceDollyPendingImage,
+ WorkspaceDollyWorkspaceDescriptor,
+ WorkspaceDollyUploadedImage,
+} from 'src/modules/workspaces/lib/dolly/types';
+import type {
+ RemoteTarget,
+ StudioWorkspace,
+ WorkspaceTargetId,
+} from 'src/modules/workspaces/types';
+
+type WorkspaceDollyAssistantProps = {
+ workspace: StudioWorkspace;
+ transportTarget: RemoteTarget;
+ previewState: WorkspacePreviewState;
+ previewTargetId?: WorkspaceTargetId;
+ previewTargets: PreviewAbilityTarget[];
+ onOpenPreviewTarget: (
+ targetId: WorkspaceTargetId,
+ pathOrUrl: string,
+ nextPreviewState: WorkspacePreviewState
+ ) => void;
+};
+
+function OfflineModeView() {
+ return (
+
+
+ );
+}
+
+function WorkspaceDollyEmptyView() {
+ return ;
+}
+
+const isBlankConversation = ( conversation: WorkspaceDollyConversationState ) =>
+ conversation.messages.length === 0 && ! conversation.input.trim();
+
+const getConversationUpdatedLabel = ( conversation: WorkspaceDollyConversationState ) =>
+ new Intl.DateTimeFormat( undefined, {
+ month: 'short',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: '2-digit',
+ } ).format( new Date( conversation.lastUpdated ) );
+
+const getConversationLabel = ( conversation: WorkspaceDollyConversationState ) => {
+ const firstUserMessage = conversation.messages.find( ( message ) => message.role === 'user' );
+ const fallbackDate = getConversationUpdatedLabel( conversation );
+
+ if ( firstUserMessage?.content.trim() ) {
+ return firstUserMessage.content.trim().replace( /\s+/g, ' ' ).slice( 0, 64 );
+ }
+
+ return sprintf( __( 'Chat from %s' ), fallbackDate );
+};
+
+const shouldShowConversationControls = (
+ conversations: WorkspaceDollyConversationState[],
+ selectedConversation?: WorkspaceDollyConversationState
+) => {
+ if ( ! selectedConversation ) {
+ return false;
+ }
+
+ return ! ( conversations.length === 1 && isBlankConversation( selectedConversation ) );
+};
+
+function DollyConversationMenu( {
+ anchor,
+ conversations,
+ selectedConversationId,
+ onClose,
+ onNewChat,
+ onSelect,
+ onDelete,
+ isConversationActive,
+}: {
+ anchor: Element | null;
+ conversations: WorkspaceDollyConversationState[];
+ selectedConversationId: string;
+ onClose: () => void;
+ onNewChat: () => void;
+ onSelect: ( conversationId: string ) => void;
+ onDelete: ( conversationId: string ) => void;
+ isConversationActive: ( conversationId: string ) => boolean;
+} ) {
+ const menuRef = useRef< HTMLDivElement >( null );
+ const selectedConversation =
+ conversations.find( ( conversation ) => conversation.id === selectedConversationId ) ??
+ conversations[ 0 ];
+
+ useEffect( () => {
+ if ( ! anchor ) {
+ return;
+ }
+
+ const handlePointerDown = ( event: PointerEvent ) => {
+ const target = event.target;
+ if ( ! ( target instanceof Node ) ) {
+ return;
+ }
+
+ if ( anchor.contains( target ) || menuRef.current?.contains( target ) ) {
+ return;
+ }
+
+ onClose();
+ };
+
+ document.addEventListener( 'pointerdown', handlePointerDown, true );
+ return () => document.removeEventListener( 'pointerdown', handlePointerDown, true );
+ }, [ anchor, onClose ] );
+
+ if ( ! anchor || ! shouldShowConversationControls( conversations, selectedConversation ) ) {
+ return null;
+ }
+
+ return (
+
+
+ );
+}
+
+export function WorkspaceDollyAssistant( {
+ workspace,
+ transportTarget,
+ previewState,
+ previewTargetId,
+ previewTargets,
+ onOpenPreviewTarget,
+}: WorkspaceDollyAssistantProps ) {
+ const { isAuthenticated, authenticate, client } = useAuth();
+ const isOffline = useOffline();
+ const workspaceDescriptor = useMemo< WorkspaceDollyWorkspaceDescriptor >(
+ () => createWorkspaceDollyWorkspaceDescriptor( workspace ),
+ [ workspace ]
+ );
+ const initialConversationState = getWorkspaceDollyConversationState( workspaceDescriptor );
+ const externallySelectedConversationId =
+ useSelectedWorkspaceDollyConversationId( workspaceDescriptor );
+ const [ selectedConversationId, setSelectedConversationId ] = useState(
+ initialConversationState.id
+ );
+ const [ conversationListVersion, setConversationListVersion ] = useState( 0 );
+ const [ input, setInput ] = useState( initialConversationState.input );
+ const [ messages, setMessages ] = useState< MessageType[] >( initialConversationState.messages );
+ const [ sessionId, setSessionId ] = useState< string | undefined >(
+ initialConversationState.sessionId
+ );
+ const [ pendingImages, setPendingImages ] = useState< WorkspaceDollyPendingImage[] >( [] );
+ const [ imageUploadError, setImageUploadError ] = useState< string | undefined >();
+ const [ optimisticMessageImages, setOptimisticMessageImages ] = useState<
+ Record< string, WorkspaceDollyMessageImageAttachment >
+ >( {} );
+ const [ isAssistantThinking, setIsAssistantThinking ] = useState(
+ Boolean( getWorkspaceDollyTurn( initialConversationState.id ) )
+ );
+ const [ errorMessage, setErrorMessage ] = useState< string | undefined >();
+ const [ chatMenuAnchor, setChatMenuAnchor ] = useState< Element | null >( null );
+ const [ showJumpToLatest, setShowJumpToLatest ] = useState( false );
+ const isMountedRef = useRef( true );
+ const imageUploaderRef = useRef< ImageUploaderHandle >( null );
+ const dollyDropZoneRef = useRef< HTMLDivElement >( null );
+ const conversationViewRef = useRef< HTMLDivElement >( null );
+ const messagesRef = useRef< MessageType[] >( messages );
+ const pendingImagesRef = useRef< WorkspaceDollyPendingImage[] >( pendingImages );
+ const previewStateRef = useRef< WorkspacePreviewState >( previewState );
+ const conversationIdRef = useRef( selectedConversationId );
+ const remoteChatIdRef = useRef( initialConversationState.remoteChatId );
+ const serverHydrationDisabledRef = useRef(
+ Boolean( initialConversationState.serverHydrationDisabled )
+ );
+ const preserveLastUpdatedOnNextWriteRef = useRef( false );
+ const isAssistantThinkingRef = useRef( isAssistantThinking );
+ const hydratedWorkspaceIdsRef = useRef( new Set< string >() );
+ const locallyStartedTurnConversationIdsRef = useRef( new Set< string >() );
+ const hasActiveAssistantTurn = useWorkspaceDollyConversationTurn( selectedConversationId );
+ const isCurrentSessionAssistantThinking = isAssistantThinking || hasActiveAssistantTurn;
+ const hadActiveAssistantTurnRef = useRef( hasActiveAssistantTurn );
+ const previousMessageCountRef = useRef( messages.length );
+ const isAtLatestMessageRef = useRef( true );
+
+ const conversationsForWorkspace = useMemo( () => {
+ void conversationListVersion;
+ return getWorkspaceDollyConversationsForWorkspace( workspaceDescriptor );
+ }, [ conversationListVersion, workspaceDescriptor ] );
+ const selectedConversationForWorkspace =
+ conversationsForWorkspace.find(
+ ( conversation ) => conversation.id === selectedConversationId
+ ) ?? conversationsForWorkspace[ 0 ];
+ const showConversationControls = shouldShowConversationControls(
+ conversationsForWorkspace,
+ selectedConversationForWorkspace
+ );
+ const currentPreviewTarget = useMemo(
+ () =>
+ previewTargets.find( ( target ) => target.targetId === previewTargetId ) ??
+ previewTargets[ 0 ] ?? {
+ targetId: transportTarget.id,
+ siteId: transportTarget.site.id,
+ siteName: transportTarget.site.name,
+ siteUrl: transportTarget.site.url,
+ },
+ [ previewTargetId, previewTargets, transportTarget ]
+ );
+ const messageTransportTarget = useMemo( () => {
+ if ( currentPreviewTarget.targetId === 'production' && workspace.targets.production ) {
+ return workspace.targets.production;
+ }
+ if ( currentPreviewTarget.targetId === 'staging' && workspace.targets.staging ) {
+ return workspace.targets.staging;
+ }
+ return transportTarget;
+ }, [
+ currentPreviewTarget.targetId,
+ transportTarget,
+ workspace.targets.production,
+ workspace.targets.staging,
+ ] );
+ const hasFailedMessage = messages.some( ( message ) => message.failedMessage );
+ const failedMessageContent = messages.find( ( message ) => message.failedMessage )?.content;
+
+ const refreshConversationList = useCallback( () => {
+ setConversationListVersion( ( version ) => version + 1 );
+ }, [ setConversationListVersion ] );
+
+ const clearPendingImages = useCallback( () => {
+ setPendingImages( ( currentImages ) => {
+ revokeWorkspaceDollyPendingImageUrls( currentImages );
+ return [];
+ } );
+ setImageUploadError( undefined );
+ }, [ setImageUploadError, setPendingImages ] );
+
+ const removePendingImage = useCallback(
+ ( image: UploadedImage ) => {
+ setPendingImages( ( currentImages ) => {
+ const removedImage = currentImages.find( ( currentImage ) => currentImage.id === image.id );
+ if ( removedImage ) {
+ revokeWorkspaceDollyPendingImageUrls( [ removedImage ] );
+ }
+ return currentImages.filter( ( currentImage ) => currentImage.id !== image.id );
+ } );
+ },
+ [ setPendingImages ]
+ );
+
+ const addPendingImages = useCallback(
+ ( files: File[] ) => {
+ const validFiles = files.filter( ( file ) =>
+ WORKSPACE_DOLLY_IMAGE_FILE_TYPES.includes( file.type )
+ );
+ const validSizedFiles = validFiles.filter(
+ ( file ) => file.size <= WORKSPACE_DOLLY_IMAGE_MAX_FILE_SIZE
+ );
+ const remainingSlots = Math.max( WORKSPACE_DOLLY_IMAGE_MAX_FILES - pendingImages.length, 0 );
+ const filesToAdd = validSizedFiles.slice( 0, remainingSlots );
+
+ if ( files.length !== validFiles.length ) {
+ setImageUploadError( __( 'Only JPEG, PNG, GIF, or WebP images can be attached.' ) );
+ } else if ( validFiles.length !== validSizedFiles.length ) {
+ setImageUploadError( __( 'Images must be 10 MB or smaller.' ) );
+ } else if ( validSizedFiles.length > filesToAdd.length ) {
+ setImageUploadError(
+ sprintf(
+ __( 'You can attach up to %d images at a time.' ),
+ WORKSPACE_DOLLY_IMAGE_MAX_FILES
+ )
+ );
+ } else if ( filesToAdd.length > 0 ) {
+ setImageUploadError( undefined );
+ }
+
+ if ( filesToAdd.length === 0 ) {
+ return;
+ }
+
+ const nextImages = filesToAdd.map( ( file ) => ( {
+ id: crypto.randomUUID(),
+ url: URL.createObjectURL( file ),
+ name: file.name,
+ title: file.name,
+ mime_type: file.type,
+ file,
+ } ) );
+
+ setPendingImages( ( currentImages ) => [ ...currentImages, ...nextImages ] );
+
+ void Promise.all(
+ nextImages.map( async ( image ) => ( {
+ sourceId: image.id,
+ dataUrl: await readWorkspaceDollyFileAsDataUrl( image.file ),
+ } ) )
+ )
+ .then( ( imageDataUrls ) => {
+ if ( ! isMountedRef.current ) {
+ return;
+ }
+ const dataUrlsByImageId = new Map< string, string >(
+ imageDataUrls.map( ( image ) => [ image.sourceId, image.dataUrl ] )
+ );
+ setPendingImages( ( currentImages ) =>
+ currentImages.map( ( currentImage ) => ( {
+ ...currentImage,
+ dataUrl: dataUrlsByImageId.get( currentImage.id ) ?? currentImage.dataUrl,
+ } ) )
+ );
+ } )
+ .catch( () => {
+ if ( isMountedRef.current ) {
+ setImageUploadError( __( 'Unable to prepare image preview.' ) );
+ }
+ } );
+ },
+ [ pendingImages.length, setImageUploadError, setPendingImages ]
+ );
+
+ useEffect( () => {
+ isMountedRef.current = true;
+ return () => {
+ isMountedRef.current = false;
+ };
+ }, [] );
+
+ useEffect( () => {
+ messagesRef.current = messages;
+ }, [ messages ] );
+
+ useEffect( () => {
+ pendingImagesRef.current = pendingImages;
+ }, [ pendingImages ] );
+
+ useEffect( () => () => revokeWorkspaceDollyPendingImageUrls( pendingImagesRef.current ), [] );
+
+ useEffect( () => {
+ previewStateRef.current = previewState;
+ }, [ previewState ] );
+
+ useEffect( () => {
+ isAssistantThinkingRef.current = isCurrentSessionAssistantThinking;
+ }, [ isCurrentSessionAssistantThinking ] );
+
+ useEffect( () => {
+ setWorkspaceDollyWorkspaceUnread( workspace.id, false );
+ }, [ workspace.id ] );
+
+ useEffect( () => {
+ const cachedConversationState = getCachedWorkspaceDollyConversationState(
+ conversationIdRef.current
+ );
+ const preserveLastUpdated = preserveLastUpdatedOnNextWriteRef.current;
+ preserveLastUpdatedOnNextWriteRef.current = false;
+
+ writeWorkspaceDollyConversationState( {
+ id: conversationIdRef.current,
+ key: {
+ workspaceId: workspace.id,
+ agentId: 'dolly',
+ },
+ remoteChatId: remoteChatIdRef.current,
+ serverHydrationDisabled: serverHydrationDisabledRef.current,
+ input,
+ messages,
+ sessionId,
+ lastUpdated:
+ preserveLastUpdated && cachedConversationState
+ ? cachedConversationState.lastUpdated
+ : Date.now(),
+ } );
+ refreshConversationList();
+ }, [ input, messages, refreshConversationList, sessionId, workspace.id ] );
+
+ const getMessagesScrollArea = useCallback(
+ () =>
+ conversationViewRef.current?.querySelector< HTMLElement >( '[data-slot="messages"]' ) ?? null,
+ []
+ );
+
+ const isMessagesScrollAreaAtLatest = useCallback( () => {
+ const scrollArea = getMessagesScrollArea();
+ if ( ! scrollArea ) {
+ return true;
+ }
+
+ return scrollArea.scrollHeight - scrollArea.scrollTop - scrollArea.clientHeight <= 48;
+ }, [ getMessagesScrollArea ] );
+
+ const scrollToLatestMessage = useCallback(
+ ( behavior: ScrollBehavior = 'smooth' ) => {
+ const scrollArea = getMessagesScrollArea();
+ if ( ! scrollArea ) {
+ return;
+ }
+
+ if ( behavior === 'auto' ) {
+ scrollArea.scrollTop = scrollArea.scrollHeight;
+ } else {
+ scrollArea.scrollTo( {
+ top: scrollArea.scrollHeight,
+ behavior,
+ } );
+ }
+
+ isAtLatestMessageRef.current = true;
+ setShowJumpToLatest( false );
+ },
+ [ getMessagesScrollArea ]
+ );
+
+ const openPreview = useCallback(
+ ( targetId: WorkspaceTargetId, pathOrUrl = '/', options = {} ) => {
+ onOpenPreviewTarget(
+ targetId,
+ pathOrUrl,
+ getNextWorkspaceDollyPreviewState( previewStateRef.current, pathOrUrl, options )
+ );
+ },
+ [ onOpenPreviewTarget ]
+ );
+
+ const openChatLinkInPreview = useCallback(
+ ( rawHref?: string ) => {
+ const href = rawHref?.trim();
+ if ( ! href || href === 'agenttic:incomplete-link' || href.startsWith( '#' ) ) {
+ return false;
+ }
+
+ const hasNonHttpScheme = /^[a-z][a-z0-9+.-]*:/i.test( href ) && ! /^https?:/i.test( href );
+ if ( hasNonHttpScheme ) {
+ return false;
+ }
+
+ const normalizedUrl = normalizeWorkspaceDollyPreviewUrl( currentPreviewTarget.siteUrl, href );
+ if ( normalizedUrl === 'about:blank' ) {
+ return false;
+ }
+
+ openPreview( currentPreviewTarget.targetId, normalizedUrl );
+ return true;
+ },
+ [ currentPreviewTarget, openPreview ]
+ );
+
+ const dollyMessageRenderer = useMemo(
+ () =>
+ createMessageRenderer( {
+ components: {
+ a: ( { href, children, className, ...props } ) => {
+ const linkHref = typeof href === 'string' ? href : undefined;
+ const openLinkInPreview = ( event: MouseEvent< HTMLAnchorElement > ) => {
+ if ( openChatLinkInPreview( linkHref ) ) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ };
+
+ if (
+ isWorkspaceDollyRenderableImageLinkUrl( linkHref, messageTransportTarget.site.url )
+ ) {
+ return (
+
+ 
+
+ );
+ }
+
+ return (
+
+ { children }
+
+ );
+ },
+ img: ( { src, alt, className, style, ...props } ) => {
+ const imageSrc = typeof src === 'string' ? src : undefined;
+ if ( isWorkspaceDollyRenderableImageUrl( imageSrc, messageTransportTarget.site.url ) ) {
+ return (
+
+ );
+ }
+
+ if ( ! imageSrc ) {
+ return null;
+ }
+
+ return (
+ {
+ if ( openChatLinkInPreview( imageSrc ) ) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ } }
+ >
+ { alt || __( 'Image attachment' ) }
+
+ );
+ },
+ },
+ } ),
+ [ messageTransportTarget.site.url, openChatLinkInPreview ]
+ );
+
+ const isVisibleConversation = useCallback( ( targetConversationId: string ) => {
+ return isMountedRef.current && conversationIdRef.current === targetConversationId;
+ }, [] );
+
+ const writeCachedConversationState = useCallback(
+ (
+ targetConversationId: string,
+ updater: (
+ currentConversationState: WorkspaceDollyConversationState
+ ) => WorkspaceDollyConversationState
+ ) => {
+ const currentConversationState = getCachedWorkspaceDollyConversationState(
+ targetConversationId
+ ) ?? {
+ ...getWorkspaceDollyConversationState( workspaceDescriptor ),
+ id: targetConversationId,
+ };
+ const nextConversationState = {
+ ...updater( currentConversationState ),
+ id: targetConversationId,
+ lastUpdated: Date.now(),
+ };
+ writeWorkspaceDollyConversationState( nextConversationState );
+ refreshConversationList();
+ return nextConversationState;
+ },
+ [ refreshConversationList, workspaceDescriptor ]
+ );
+
+ const applyVisibleConversationState = useCallback(
+ ( targetConversationId: string, nextConversationState: WorkspaceDollyConversationState ) => {
+ if ( ! isVisibleConversation( targetConversationId ) ) {
+ return;
+ }
+
+ conversationIdRef.current = nextConversationState.id;
+ setSelectedConversationId( nextConversationState.id );
+ remoteChatIdRef.current = nextConversationState.remoteChatId;
+ serverHydrationDisabledRef.current = Boolean( nextConversationState.serverHydrationDisabled );
+ messagesRef.current = nextConversationState.messages;
+ setInput( nextConversationState.input );
+ setMessages( nextConversationState.messages );
+ setSessionId( nextConversationState.sessionId );
+ },
+ [ isVisibleConversation, setInput, setMessages, setSelectedConversationId, setSessionId ]
+ );
+
+ const applySelectedConversationState = useCallback(
+ ( nextConversationState: WorkspaceDollyConversationState ) => {
+ conversationIdRef.current = nextConversationState.id;
+ setSelectedConversationId( nextConversationState.id );
+ remoteChatIdRef.current = nextConversationState.remoteChatId;
+ serverHydrationDisabledRef.current = Boolean( nextConversationState.serverHydrationDisabled );
+ messagesRef.current = nextConversationState.messages;
+ setInput( nextConversationState.input );
+ setMessages( nextConversationState.messages );
+ setOptimisticMessageImages( {} );
+ setSessionId( nextConversationState.sessionId );
+ setIsAssistantThinking( Boolean( getWorkspaceDollyTurn( nextConversationState.id ) ) );
+ setErrorMessage( undefined );
+ clearPendingImages();
+ refreshConversationList();
+ },
+ [
+ clearPendingImages,
+ refreshConversationList,
+ setInput,
+ setIsAssistantThinking,
+ setMessages,
+ setSelectedConversationId,
+ setSessionId,
+ setOptimisticMessageImages,
+ setErrorMessage,
+ ]
+ );
+
+ useEffect( () => {
+ if (
+ ! externallySelectedConversationId ||
+ externallySelectedConversationId === selectedConversationId
+ ) {
+ return;
+ }
+
+ const nextConversationState = getCachedWorkspaceDollyConversationState(
+ externallySelectedConversationId
+ );
+ if ( ! nextConversationState || nextConversationState.key.workspaceId !== workspace.id ) {
+ return;
+ }
+
+ preserveLastUpdatedOnNextWriteRef.current = true;
+ applySelectedConversationState( nextConversationState );
+ }, [
+ applySelectedConversationState,
+ externallySelectedConversationId,
+ selectedConversationId,
+ workspace.id,
+ ] );
+
+ useEffect( () => {
+ if (
+ ! isAuthenticated ||
+ isOffline ||
+ ! client ||
+ typeof ( client.req as { get?: unknown } ).get !== 'function' ||
+ hydratedWorkspaceIdsRef.current.has( workspace.id )
+ ) {
+ return;
+ }
+
+ hydratedWorkspaceIdsRef.current.add( workspace.id );
+ let isCurrentHydration = true;
+
+ void ( async () => {
+ try {
+ const cachedConversationState = getWorkspaceDollyConversationState( workspaceDescriptor );
+ const hydratedConversationStates = await hydrateWorkspaceDollyConversationStates(
+ client,
+ workspaceDescriptor,
+ cachedConversationState.sessionId
+ );
+
+ if (
+ hydratedConversationStates.length === 0 ||
+ ! isCurrentHydration ||
+ ! isMountedRef.current ||
+ isAssistantThinkingRef.current
+ ) {
+ return;
+ }
+
+ hydratedConversationStates.forEach( ( hydratedConversationState ) => {
+ mergeWorkspaceDollyConversationState(
+ {
+ ...hydratedConversationState,
+ serverHydrationDisabled: false,
+ },
+ { selectIfEmpty: true }
+ );
+ } );
+ refreshConversationList();
+
+ const nextConversationState = getWorkspaceDollyConversationState( workspaceDescriptor );
+ applySelectedConversationState( nextConversationState );
+ } catch ( error ) {
+ console.error( error );
+ }
+ } )();
+
+ return () => {
+ isCurrentHydration = false;
+ };
+ }, [
+ applySelectedConversationState,
+ client,
+ isAuthenticated,
+ isOffline,
+ refreshConversationList,
+ workspace.id,
+ workspaceDescriptor,
+ ] );
+
+ useEffect( () => {
+ const hadActiveAssistantTurn = hadActiveAssistantTurnRef.current;
+ hadActiveAssistantTurnRef.current = hasActiveAssistantTurn;
+
+ if ( ! hadActiveAssistantTurn || hasActiveAssistantTurn || isAssistantThinking ) {
+ return;
+ }
+
+ if ( locallyStartedTurnConversationIdsRef.current.delete( selectedConversationId ) ) {
+ return;
+ }
+
+ const nextConversationState = getWorkspaceDollyConversationState( workspaceDescriptor );
+ applyVisibleConversationState( nextConversationState.id, nextConversationState );
+ setIsAssistantThinking( false );
+ }, [
+ applyVisibleConversationState,
+ hasActiveAssistantTurn,
+ isAssistantThinking,
+ selectedConversationId,
+ workspaceDescriptor,
+ ] );
+
+ useEffect( () => {
+ previousMessageCountRef.current = messagesRef.current.length;
+ isAtLatestMessageRef.current = true;
+ setShowJumpToLatest( false );
+
+ const animationFrameId = window.requestAnimationFrame( () => {
+ scrollToLatestMessage( 'auto' );
+ } );
+
+ return () => {
+ window.cancelAnimationFrame( animationFrameId );
+ };
+ }, [ scrollToLatestMessage, selectedConversationId ] );
+
+ useEffect( () => {
+ const previousMessageCount = previousMessageCountRef.current;
+ const latestMessage = messages[ messages.length - 1 ];
+ previousMessageCountRef.current = messages.length;
+
+ if ( messages.length <= previousMessageCount || latestMessage?.role !== 'assistant' ) {
+ return;
+ }
+
+ if ( isAtLatestMessageRef.current ) {
+ const animationFrameId = window.requestAnimationFrame( () => {
+ scrollToLatestMessage( 'smooth' );
+ } );
+
+ return () => {
+ window.cancelAnimationFrame( animationFrameId );
+ };
+ }
+
+ setShowJumpToLatest( true );
+ }, [ messages, scrollToLatestMessage ] );
+
+ useEffect( () => {
+ const scrollArea = getMessagesScrollArea();
+ if ( ! scrollArea ) {
+ return;
+ }
+
+ const handleScroll = () => {
+ const isAtLatest = isMessagesScrollAreaAtLatest();
+ isAtLatestMessageRef.current = isAtLatest;
+ if ( isAtLatest ) {
+ setShowJumpToLatest( false );
+ }
+ };
+
+ scrollArea.addEventListener( 'scroll', handleScroll, { passive: true } );
+ handleScroll();
+
+ return () => {
+ scrollArea.removeEventListener( 'scroll', handleScroll );
+ };
+ }, [ getMessagesScrollArea, isMessagesScrollAreaAtLatest, selectedConversationId ] );
+
+ const createDollyToolProviderForConversation = useCallback(
+ ( { targetPreviewState }: { targetPreviewState: WorkspacePreviewState } ): ToolProvider => ( {
+ getAbilities: async () =>
+ createWorkspaceDollyPreviewAbilities( {
+ targets: previewTargets,
+ previewState: targetPreviewState,
+ openPreview: ( targetId, pathOrUrl = '/', options ) => {
+ onOpenPreviewTarget(
+ targetId,
+ pathOrUrl,
+ getNextWorkspaceDollyPreviewState( previewStateRef.current, pathOrUrl, options )
+ );
+ },
+ } ),
+ } ),
+ [ onOpenPreviewTarget, previewTargets ]
+ );
+
+ const submitPrompt = useCallback(
+ ( chatMessage: string, isRetry?: boolean ) => {
+ const trimmedMessage = chatMessage.trim();
+ const imagesToSend = isRetry ? [] : pendingImages;
+ const targetConversationId = selectedConversationId;
+ if (
+ ( ! trimmedMessage && imagesToSend.length === 0 ) ||
+ ! client ||
+ isCurrentSessionAssistantThinking ||
+ getWorkspaceDollyTurn( targetConversationId )
+ ) {
+ return;
+ }
+
+ if ( ! isRetry ) {
+ setInput( '' );
+ }
+ setErrorMessage( undefined );
+ setImageUploadError( undefined );
+
+ const targetPreviewState = previewStateRef.current;
+ const targetPreviewContext = createWorkspaceDollyPreviewContext(
+ currentPreviewTarget.targetId,
+ currentPreviewTarget.siteUrl,
+ targetPreviewState,
+ currentPreviewTarget.siteId
+ );
+ const targetSiteAssociation = createWorkspaceDollySiteAssociationContext( {
+ workspaceId: workspace.id,
+ workspace,
+ transportTarget: messageTransportTarget,
+ activeTarget: currentPreviewTarget,
+ activeUrl: targetPreviewContext.currentURL ?? targetPreviewContext.openedURL,
+ targets: previewTargets,
+ } );
+ const targetSessionId = sessionId;
+ const targetRemoteChatId = remoteChatIdRef.current;
+ const targetServerHydrationDisabled = serverHydrationDisabledRef.current;
+ const startingMessages: MessageType[] = messagesRef.current.map( ( currentMessage ) => ( {
+ ...currentMessage,
+ failedMessage: false,
+ } ) );
+ const messageToSend =
+ trimmedMessage ||
+ ( imagesToSend.length > 0 ? createWorkspaceDollyImagePrompt( imagesToSend.length ) : '' );
+ const newMessageId = isRetry ? startingMessages.length - 1 : startingMessages.length;
+ const optimisticImagesPromise = createWorkspaceDollyPendingVisibleImages( imagesToSend );
+ const abortController = new AbortController();
+ const toolProvider = createDollyToolProviderForConversation( {
+ targetPreviewState,
+ } );
+
+ if ( ! isRetry && imagesToSend.length > 0 ) {
+ setPendingImages( [] );
+ revokeWorkspaceDollyPendingImageUrls( imagesToSend );
+ }
+
+ startWorkspaceDollyTurn( {
+ conversationId: targetConversationId,
+ workspaceId: workspace.id,
+ abortController,
+ } );
+ locallyStartedTurnConversationIdsRef.current.add( targetConversationId );
+ if ( isVisibleConversation( targetConversationId ) ) {
+ setIsAssistantThinking( true );
+ }
+
+ void ( async () => {
+ let optimisticMessage: MessageType | undefined;
+ let messagesForResponse: MessageType[] = startingMessages;
+ let uploadedImages: WorkspaceDollyUploadedImage[] = [];
+ try {
+ const optimisticImages = await optimisticImagesPromise;
+ const nextOptimisticMessage = generateMessage( messageToSend, 'user', newMessageId );
+ optimisticMessage = nextOptimisticMessage;
+ if ( optimisticImages.length > 0 && isVisibleConversation( targetConversationId ) ) {
+ setOptimisticMessageImages( ( currentImages ) => ( {
+ ...currentImages,
+ [ nextOptimisticMessage.id ?? nextOptimisticMessage.createdAt ]: {
+ text: messageToSend,
+ images: optimisticImages,
+ },
+ } ) );
+ }
+ messagesForResponse = isRetry
+ ? startingMessages.map( ( currentMessage ) =>
+ currentMessage.id === nextOptimisticMessage.id
+ ? { ...nextOptimisticMessage, failedMessage: false }
+ : currentMessage
+ )
+ : [ ...startingMessages, nextOptimisticMessage ];
+ const conversationWithUserMessage = writeCachedConversationState(
+ targetConversationId,
+ ( currentConversationState ) => ( {
+ ...currentConversationState,
+ remoteChatId: targetRemoteChatId,
+ serverHydrationDisabled: targetServerHydrationDisabled,
+ input: '',
+ messages: messagesForResponse,
+ sessionId: targetSessionId,
+ } )
+ );
+ applyVisibleConversationState( targetConversationId, conversationWithUserMessage );
+
+ uploadedImages = await uploadWorkspaceDollyImages(
+ messageTransportTarget.site.id,
+ imagesToSend,
+ abortController.signal
+ );
+ if ( uploadedImages.length > 0 ) {
+ const uploadedVisibleImages = uploadedImages.map( ( image ) => ( {
+ name: image.name,
+ url: image.url,
+ } ) );
+ const visibleMessage = createWorkspaceDollyVisibleMessage(
+ messageToSend,
+ uploadedVisibleImages,
+ imagesToSend.length
+ );
+ messagesForResponse = messagesForResponse.map( ( currentMessage ) =>
+ currentMessage.id === optimisticMessage?.id
+ ? { ...currentMessage, content: visibleMessage }
+ : currentMessage
+ );
+ const conversationWithUploadedImages = writeCachedConversationState(
+ targetConversationId,
+ ( currentConversationState ) => ( {
+ ...currentConversationState,
+ messages: messagesForResponse,
+ } )
+ );
+ applyVisibleConversationState( targetConversationId, conversationWithUploadedImages );
+ }
+
+ const response = await sendWorkspaceDollyMessage( {
+ abortSignal: abortController.signal,
+ message: messageToSend,
+ uploadedImages,
+ previewContext: targetPreviewContext,
+ siteAssociation: targetSiteAssociation,
+ workspace,
+ transportTarget: messageTransportTarget,
+ sessionId: targetSessionId,
+ workspaceId: workspace.id,
+ targets: previewTargets,
+ toolProvider,
+ } );
+
+ const responseMessages: MessageType[] = [ ...messagesForResponse ];
+ const hasAssistantReply = Boolean( response.text.trim() );
+ if ( hasAssistantReply ) {
+ responseMessages.push(
+ generateMessage( response.text, 'assistant', responseMessages.length )
+ );
+ }
+
+ const nextConversationState = writeCachedConversationState(
+ targetConversationId,
+ ( currentConversationState ) => ( {
+ ...currentConversationState,
+ messages: responseMessages,
+ sessionId: response.sessionId ?? targetSessionId,
+ } )
+ );
+ applyVisibleConversationState( targetConversationId, nextConversationState );
+ if ( hasAssistantReply ) {
+ setWorkspaceDollyWorkspaceUnread(
+ workspace.id,
+ ! isVisibleConversation( targetConversationId )
+ );
+ }
+ } catch ( error ) {
+ if ( isWorkspaceDollyRequestAbortError( error ) || abortController.signal.aborted ) {
+ return;
+ }
+ console.error( error );
+ const nextErrorMessage = getWorkspaceDollyErrorMessage( error );
+ const nextMessages = optimisticMessage
+ ? messagesForResponse.map( ( currentMessage ) =>
+ currentMessage.id === optimisticMessage?.id
+ ? { ...currentMessage, failedMessage: true }
+ : currentMessage
+ )
+ : messagesForResponse;
+ const nextConversationState = writeCachedConversationState(
+ targetConversationId,
+ ( currentConversationState ) => ( {
+ ...currentConversationState,
+ input: isRetry ? currentConversationState.input : chatMessage,
+ messages: nextMessages,
+ } )
+ );
+ if ( isVisibleConversation( targetConversationId ) ) {
+ setErrorMessage( nextErrorMessage );
+ setImageUploadError( nextErrorMessage );
+ }
+ applyVisibleConversationState( targetConversationId, nextConversationState );
+ } finally {
+ finishWorkspaceDollyTurn( targetConversationId, abortController );
+ if ( isVisibleConversation( targetConversationId ) ) {
+ setIsAssistantThinking( false );
+ }
+ }
+ } )();
+ },
+ [
+ applyVisibleConversationState,
+ client,
+ createDollyToolProviderForConversation,
+ currentPreviewTarget,
+ isCurrentSessionAssistantThinking,
+ isVisibleConversation,
+ pendingImages,
+ previewTargets,
+ selectedConversationId,
+ sessionId,
+ messageTransportTarget,
+ workspace,
+ writeCachedConversationState,
+ ]
+ );
+
+ const startNewConversation = useCallback( () => {
+ const nextConversationState = createNewWorkspaceDollyConversation( workspaceDescriptor );
+ applySelectedConversationState( nextConversationState );
+ }, [ applySelectedConversationState, workspaceDescriptor ] );
+
+ const selectConversation = useCallback(
+ ( conversationId: string ) => {
+ const nextConversationState = getCachedWorkspaceDollyConversationState( conversationId );
+ if ( ! nextConversationState ) {
+ return;
+ }
+
+ preserveLastUpdatedOnNextWriteRef.current = true;
+ setSelectedWorkspaceDollyConversationId( workspaceDescriptor, conversationId );
+ applySelectedConversationState( nextConversationState );
+ },
+ [ applySelectedConversationState, workspaceDescriptor ]
+ );
+
+ const deleteConversation = useCallback(
+ ( conversationId: string ) => {
+ if ( getWorkspaceDollyTurn( conversationId ) ) {
+ return;
+ }
+
+ const nextConversationState = deleteWorkspaceDollyConversation(
+ conversationId,
+ workspaceDescriptor
+ );
+ applySelectedConversationState( nextConversationState );
+ },
+ [ applySelectedConversationState, workspaceDescriptor ]
+ );
+
+ const agentticMessages = useMemo< AgentUIProps[ 'messages' ] >(
+ () =>
+ messages.map( ( message ) => {
+ const messageKey = String( message.id ?? message.createdAt );
+ const optimisticImageAttachment = optimisticMessageImages[ messageKey ];
+
+ return {
+ id: `${ message.role }-${ message.id ?? message.createdAt }`,
+ role: message.role === 'assistant' ? 'agent' : 'user',
+ content: [
+ {
+ type: 'text' as const,
+ text: optimisticImageAttachment?.text ?? message.content,
+ },
+ ...( optimisticImageAttachment?.images.length
+ ? [
+ {
+ type: 'component' as const,
+ component: WorkspaceDollyOptimisticImages,
+ componentProps: {
+ images: optimisticImageAttachment.images,
+ },
+ },
+ ]
+ : [] ),
+ ],
+ timestamp: message.createdAt,
+ archived: false,
+ showIcon: message.role === 'assistant',
+ disabled: Boolean( message.failedMessage ),
+ };
+ } ),
+ [ messages, optimisticMessageImages ]
+ );
+
+ const retryFailedMessage = useCallback( () => {
+ if ( failedMessageContent ) {
+ submitPrompt( failedMessageContent, true );
+ }
+ }, [ failedMessageContent, submitPrompt ] );
+
+ const interruptDollyRequest = useCallback( () => {
+ abortWorkspaceDollyTurn( selectedConversationId );
+ }, [ selectedConversationId ] );
+
+ const dollyNotice = useMemo< AgentticNoticeConfig | undefined >( () => {
+ if ( isOffline ) {
+ return {
+ icon: false,
+ message: __( 'The AI assistant requires an internet connection.' ),
+ status: 'warning',
+ dismissible: false,
+ };
+ }
+
+ if ( hasFailedMessage ) {
+ return {
+ message: __( "Oops! We couldn't get a response from Dolly." ),
+ action: {
+ label: __( 'Try again' ),
+ onClick: retryFailedMessage,
+ },
+ status: 'error',
+ dismissible: false,
+ };
+ }
+
+ if ( imageUploadError ) {
+ return {
+ message: imageUploadError,
+ status: 'error',
+ dismissible: true,
+ onDismiss: () => setImageUploadError( undefined ),
+ };
+ }
+
+ if ( errorMessage ) {
+ return {
+ message: errorMessage,
+ status: 'error',
+ dismissible: true,
+ onDismiss: () => setErrorMessage( undefined ),
+ };
+ }
+
+ return undefined;
+ }, [
+ errorMessage,
+ hasFailedMessage,
+ imageUploadError,
+ isOffline,
+ retryFailedMessage,
+ setErrorMessage,
+ setImageUploadError,
+ ] );
+
+ const isInputUnavailable = isOffline || ! isAuthenticated || ! client;
+ const isInputDisabled = isInputUnavailable && ! isCurrentSessionAssistantThinking;
+ const isInputActionDisabled = isInputUnavailable || isCurrentSessionAssistantThinking;
+ const isProductionAssistantContext = currentPreviewTarget.targetId === 'production';
+ const dollyInputActions = useMemo(
+ () => [
+ {
+ id: 'upload-image',
+ icon:
+
Wait a few minutes or run a full sync in the meantime.' @@ -320,140 +307,16 @@ export function SyncDialog( { }; return ( -
-
+
+
);
}
diff --git a/apps/studio/src/modules/sync/components/sync-files-select-control.tsx b/apps/studio/src/modules/sync/components/sync-files-select-control.tsx
new file mode 100644
index 0000000000..28cd4474c7
--- /dev/null
+++ b/apps/studio/src/modules/sync/components/sync-files-select-control.tsx
@@ -0,0 +1,45 @@
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export type SyncFilesSelectionMode = 'all' | 'specific';
+
+type SyncFilesSelectControlProps = {
+ value: SyncFilesSelectionMode;
+ onChange: ( value: SyncFilesSelectionMode ) => void;
+ disabled?: boolean;
+ showSpecificOption?: boolean;
+};
+
+export function SyncFilesSelectControl( {
+ value,
+ onChange,
+ disabled,
+ showSpecificOption = true,
+}: SyncFilesSelectControlProps ) {
+ return (
+ onChange( nextValue as SyncFilesSelectionMode ) }
+ disabled={ disabled }
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
+ aria-label={ __( 'Select files and folders to sync' ) }
+ className="h-9 select-minimal"
+ />
+ );
+}
diff --git a/apps/studio/src/modules/sync/components/sync-modal-shell.tsx b/apps/studio/src/modules/sync/components/sync-modal-shell.tsx
new file mode 100644
index 0000000000..59167750f0
--- /dev/null
+++ b/apps/studio/src/modules/sync/components/sync-modal-shell.tsx
@@ -0,0 +1,88 @@
+import { __experimentalHeading as Heading } from '@wordpress/components';
+import { sprintf, __ } from '@wordpress/i18n';
+import { type CSSProperties, type ReactNode } from 'react';
+import { RightArrowIcon } from 'src/components/icons/right-arrow';
+import Modal from 'src/components/modal';
+import { SiteNameBox } from 'src/modules/sync/components/site-name-box';
+import type { EnvironmentType } from 'src/modules/sync/lib/environment-utils';
+
+type SyncModalSite = {
+ name: string;
+ envType: EnvironmentType | 'studio';
+};
+
+type SyncModalShellProps = {
+ title: string;
+ description: string;
+ subtitle: string;
+ source: SyncModalSite;
+ destination: SyncModalSite;
+ onRequestClose: () => void;
+ children: ReactNode;
+ footer: ReactNode;
+ contentClassName?: string;
+ contentStyle?: CSSProperties;
+};
+
+export function SyncModalShell( {
+ title,
+ description,
+ subtitle,
+ source,
+ destination,
+ onRequestClose,
+ children,
+ footer,
+ contentClassName,
+ contentStyle,
+}: SyncModalShellProps ) {
+ return (
+
+
+ );
+}
diff --git a/apps/studio/src/modules/sync/components/workspace-sync-panel.tsx b/apps/studio/src/modules/sync/components/workspace-sync-panel.tsx
new file mode 100644
index 0000000000..025f9d5947
--- /dev/null
+++ b/apps/studio/src/modules/sync/components/workspace-sync-panel.tsx
@@ -0,0 +1,977 @@
+import { CheckboxControl, Icon, Spinner } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cloudDownload, cloudUpload } from '@wordpress/icons';
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { ArrowIcon } from 'src/components/arrow-icon';
+import Button from 'src/components/button';
+import { Tooltip } from 'src/components/tooltip';
+import { TreeView, updateNodeById, type TreeNode } from 'src/components/tree-view';
+import { WordPressLogoCircle } from 'src/components/wordpress-logo-circle';
+import { useAddSite } from 'src/hooks/use-add-site';
+import { cx } from 'src/lib/cx';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+import { getLocalizedLink } from 'src/lib/get-localized-link';
+import { EnvironmentBadge } from 'src/modules/sync/components/environment-badge';
+import { SyncConnectedSites } from 'src/modules/sync/components/sync-connected-sites';
+import {
+ SyncFilesSelectControl,
+ type SyncFilesSelectionMode,
+} from 'src/modules/sync/components/sync-files-select-control';
+import { SyncModalShell } from 'src/modules/sync/components/sync-modal-shell';
+import { TreeViewLoadingSkeleton } from 'src/modules/sync/components/tree-view-loading-skeleton';
+import { getSiteEnvironment } from 'src/modules/sync/lib/environment-utils';
+import { useWorkspaceSelection } from 'src/modules/workspaces';
+import { useAppDispatch, useI18nLocale, useRootSelector } from 'src/stores';
+import {
+ stagingSyncSelectors,
+ stagingSyncThunks,
+ syncOperationsSelectors,
+ type StagingSyncDirection,
+ type StagingSyncOption,
+ type StagingSyncOptions,
+} from 'src/stores/sync';
+import { useConnectSiteMutation, useDisconnectSiteMutation } from 'src/stores/sync/connected-sites';
+import { useLatestRewindId, useRemoteFileTree } from 'src/stores/sync/sync-hooks';
+import type { SyncSite } from '@studio/common/types/sync';
+import type { StudioWorkspace, WorkspaceTargetId } from 'src/modules/workspaces/types';
+
+type WorkspaceSyncPanelContentProps = {
+ workspace: StudioWorkspace;
+ selectedTargetId?: WorkspaceTargetId;
+};
+
+type EnvironmentSyncDialogProps = {
+ direction: StagingSyncDirection;
+ productionSite: SyncSite;
+ stagingSite: SyncSite;
+ onClose: () => void;
+};
+
+const ENVIRONMENT_FILE_SYNC_OPTIONS: StagingSyncOption[] = [
+ 'contents',
+ 'themes',
+ 'plugins',
+ 'uploads',
+ 'roots',
+];
+
+const createEnvironmentFileTree = (): TreeNode[] => [
+ {
+ id: 'wp-content',
+ name: 'wp-content',
+ label: 'wp-content',
+ checked: false,
+ indeterminate: false,
+ type: 'folder',
+ children: [],
+ expanded: true,
+ },
+];
+
+function collectSelectedPathIds( nodes: TreeNode[] | undefined ): string[] {
+ if ( ! nodes?.length ) {
+ return [];
+ }
+
+ return nodes.flatMap( ( node ) => {
+ const selectedPathIds: string[] = [];
+ if ( node.checked && node.pathId ) {
+ selectedPathIds.push( node.pathId );
+ }
+ if ( node.children?.length && ( node.checked || node.indeterminate ) ) {
+ selectedPathIds.push( ...collectSelectedPathIds( node.children ) );
+ }
+ return selectedPathIds;
+ } );
+}
+
+function isRemoteConnectedToLocal( remoteSite: SyncSite | undefined, localSite?: SiteDetails ) {
+ return Boolean(
+ remoteSite &&
+ localSite &&
+ remoteSite.localSiteId === localSite.id &&
+ remoteSite.syncSupport === 'already-connected'
+ );
+}
+
+function getRemoteSiteLocalSetupState( remoteSite: SyncSite ) {
+ switch ( remoteSite.syncSupport ) {
+ case 'syncable':
+ return {
+ canUseLocalSetup: true,
+ };
+ case 'needs-upgrade':
+ return {
+ canUseLocalSetup: false,
+ description: __( 'Upgrade this site plan before creating or connecting a local version.' ),
+ buttonLabel: __( 'Upgrade plan' ),
+ actionUrl: `https://wordpress.com/plans/${ remoteSite.id }`,
+ };
+ case 'needs-transfer':
+ return {
+ canUseLocalSetup: false,
+ description: __( 'Enable hosting features before creating or connecting a local version.' ),
+ buttonLabel: __( 'Enable hosting' ),
+ actionUrl: `https://wordpress.com/hosting-features/${ remoteSite.id }`,
+ };
+ case 'missing-permissions':
+ return {
+ canUseLocalSetup: false,
+ description: __(
+ 'You need permission to manage this site before creating or connecting a local version.'
+ ),
+ buttonLabel: __( 'Missing permissions' ),
+ };
+ case 'deleted':
+ return {
+ canUseLocalSetup: false,
+ description: __( 'This WordPress.com site is deleted.' ),
+ buttonLabel: __( 'Deleted' ),
+ };
+ case 'unsupported':
+ return {
+ canUseLocalSetup: false,
+ description: __( 'This site does not support Studio sync.' ),
+ buttonLabel: __( 'Unsupported' ),
+ };
+ case 'already-connected':
+ return {
+ canUseLocalSetup: false,
+ description: __( 'This target is already connected to another local site.' ),
+ buttonLabel: __( 'Already connected' ),
+ };
+ }
+}
+
+function getProductionStagingSetupState( productionSite: SyncSite ) {
+ if ( productionSite.canManageOptions === false ) {
+ return {
+ canCreateStagingSite: false,
+ description: __(
+ 'You need permission to manage this production site before creating staging.'
+ ),
+ buttonLabel: __( 'Missing permissions' ),
+ };
+ }
+
+ if ( productionSite.hasStagingSiteFeature === false ) {
+ return {
+ canCreateStagingSite: false,
+ description: __( 'This site plan does not include staging sites.' ),
+ buttonLabel: __( 'Upgrade plan' ),
+ actionUrl: `https://wordpress.com/plans/${ productionSite.id }`,
+ };
+ }
+
+ if ( productionSite.isWpcomAtomic === false ) {
+ return {
+ canCreateStagingSite: false,
+ description: __( 'Enable hosting features before creating a staging site.' ),
+ buttonLabel: __( 'Enable hosting' ),
+ actionUrl: `https://wordpress.com/hosting-features/${ productionSite.id }`,
+ };
+ }
+
+ return {
+ canCreateStagingSite: true,
+ description: __( 'Create a live staging site from Production.' ),
+ buttonLabel: __( 'Create staging site' ),
+ };
+}
+
+function useLocalRemoteSyncState( localSite?: SiteDetails, remoteSite?: SyncSite ) {
+ const isPulling = useRootSelector(
+ syncOperationsSelectors.selectIsSiteIdPulling( localSite?.id ?? '', remoteSite?.id )
+ );
+ const isPushing = useRootSelector(
+ syncOperationsSelectors.selectIsSiteIdPushing( localSite?.id ?? '', remoteSite?.id )
+ );
+
+ return {
+ isSyncing: isPulling || isPushing,
+ };
+}
+
+function EnvironmentSyncDialog( {
+ direction,
+ productionSite,
+ stagingSite,
+ onClose,
+}: EnvironmentSyncDialogProps ) {
+ const locale = useI18nLocale();
+ const dispatch = useAppDispatch();
+ const [ includeFiles, setIncludeFiles ] = useState( false );
+ const [ includeDatabase, setIncludeDatabase ] = useState( false );
+ const [ fileSelectionMode, setFileSelectionMode ] = useState< SyncFilesSelectionMode >( 'all' );
+ const [ fileTree, setFileTree ] = useState< TreeNode[] >( () => createEnvironmentFileTree() );
+ const [ fileTreeError, setFileTreeError ] = useState< Error | null >( null );
+ const [ isLoadingFileTree, setIsLoadingFileTree ] = useState( false );
+ const [ isSubmitting, setIsSubmitting ] = useState( false );
+ const isPull = direction === 'pull';
+ const title = isPull ? __( 'Pull from Staging' ) : __( 'Push to Staging' );
+ const actionLabel = isPull ? __( 'Pull' ) : __( 'Push' );
+ const sourceSite = isPull ? stagingSite : productionSite;
+ const destinationSite = isPull ? productionSite : stagingSite;
+ const isUsingSpecificFileSelection = includeFiles && fileSelectionMode === 'specific';
+ const selectedPathIds = useMemo( () => collectSelectedPathIds( fileTree ), [ fileTree ] );
+ const selectedOptions: StagingSyncOptions = isUsingSpecificFileSelection
+ ? {
+ types: 'paths',
+ include_paths: selectedPathIds,
+ exclude_paths: [],
+ }
+ : [
+ ...( includeFiles ? ENVIRONMENT_FILE_SYNC_OPTIONS : [] ),
+ ...( includeDatabase ? ( [ 'sqls' ] as const ) : [] ),
+ ];
+ const hasSelectedOptions = Array.isArray( selectedOptions )
+ ? selectedOptions.length > 0
+ : selectedOptions.include_paths.length > 0;
+ const syncDescription = isPull
+ ? __(
+ "Pulling will overwrite your production site's selected files and database with a copy from your staging site. Unchecked items will not be changed."
+ )
+ : __(
+ "Pushing will overwrite your staging site's selected files and database with a copy from your production site. Unchecked items will not be changed."
+ );
+ const subtitle = isPull
+ ? __( 'What would you like to pull?' )
+ : __( 'What would you like to push?' );
+ const docsLabel = isPull
+ ? __( 'Read more about environment pull' )
+ : __( 'Read more about environment push' );
+ const sourceEnvironment = isPull ? 'staging' : 'production';
+ const destinationEnvironment = isPull ? 'production' : 'staging';
+ const {
+ rewindId,
+ isLoading: isLoadingRewindId,
+ isError: isErrorRewindId,
+ } = useLatestRewindId( sourceSite.id, {
+ skip: ! isUsingSpecificFileSelection,
+ } );
+ const { fetchChildren } = useRemoteFileTree();
+ const isSubmitDisabled =
+ ! hasSelectedOptions || isSubmitting || isLoadingRewindId || isLoadingFileTree;
+
+ useEffect( () => {
+ setFileTree( createEnvironmentFileTree() );
+ setFileTreeError( null );
+ }, [ sourceSite.id ] );
+
+ useEffect( () => {
+ if ( ! isUsingSpecificFileSelection || ! rewindId ) {
+ return;
+ }
+
+ let isCancelled = false;
+ const loadSourceFileTree = async () => {
+ setIsLoadingFileTree( true );
+ setFileTreeError( null );
+ try {
+ const children = await fetchChildren( sourceSite.id, rewindId, '/wp-content/', false );
+ if ( ! isCancelled ) {
+ setFileTree( ( previousFileTree ) =>
+ updateNodeById( previousFileTree, 'wp-content', { children } )
+ );
+ }
+ } catch ( error ) {
+ if ( ! isCancelled ) {
+ setFileTreeError( error instanceof Error ? error : new Error( String( error ) ) );
+ }
+ } finally {
+ if ( ! isCancelled ) {
+ setIsLoadingFileTree( false );
+ }
+ }
+ };
+
+ void loadSourceFileTree();
+
+ return () => {
+ isCancelled = true;
+ };
+ }, [ fetchChildren, isUsingSpecificFileSelection, rewindId, sourceSite.id ] );
+
+ const handleFileSelectionModeChange = ( nextMode: SyncFilesSelectionMode ) => {
+ setFileSelectionMode( nextMode );
+ if ( nextMode === 'specific' ) {
+ setIncludeFiles( true );
+ setIncludeDatabase( false );
+ }
+ };
+
+ const handleIncludeFilesChange = ( checked: boolean ) => {
+ setIncludeFiles( checked );
+ if ( ! checked ) {
+ setFileSelectionMode( 'all' );
+ setFileTree( createEnvironmentFileTree() );
+ }
+ };
+
+ const handleExpandFileTreeNode = useCallback(
+ async ( node: TreeNode ) => {
+ if ( ! rewindId || ! node.path || node.children?.length ) {
+ return;
+ }
+
+ try {
+ const children = await fetchChildren( sourceSite.id, rewindId, node.path, node.checked );
+ setFileTree( ( previousFileTree ) =>
+ updateNodeById( previousFileTree, node.id, {
+ children,
+ loading: false,
+ hasError: false,
+ } )
+ );
+ } catch ( error ) {
+ setFileTree( ( previousFileTree ) =>
+ updateNodeById( previousFileTree, node.id, {
+ children: [],
+ loading: false,
+ hasError: true,
+ } )
+ );
+ }
+ },
+ [ fetchChildren, rewindId, sourceSite.id ]
+ );
+
+ const runEnvironmentSync = async ( allowWooSync = false ) => {
+ if ( ! hasSelectedOptions ) {
+ return;
+ }
+
+ setIsSubmitting( true );
+ const result = await dispatch(
+ stagingSyncThunks.startStagingSiteSync( {
+ productionSite,
+ stagingSite,
+ direction,
+ options: selectedOptions,
+ allowWooSync,
+ } )
+ );
+ setIsSubmitting( false );
+
+ if ( stagingSyncThunks.startStagingSiteSync.fulfilled.match( result ) ) {
+ onClose();
+ return;
+ }
+
+ const error = result.payload;
+ if ( isPull && includeDatabase && error?.code === 'rest_sqls_option_not_supported' ) {
+ const { response } = await getIpcApi().showMessageBox( {
+ message: __( 'Pull production database from a WooCommerce staging site?' ),
+ detail: __(
+ 'WooCommerce data can be sensitive. Confirm that the staging database should overwrite production, then Studio will retry this sync.'
+ ),
+ buttons: [ __( 'Retry with database' ), __( 'Cancel' ) ],
+ cancelId: 1,
+ } );
+
+ if ( response === 0 ) {
+ await runEnvironmentSync( true );
+ }
+ return;
+ }
+
+ getIpcApi().showErrorMessageBox( {
+ title: __( 'Could not sync staging site' ),
+ message: error?.message ?? __( 'The staging sync could not be started.' ),
+ } );
+ };
+
+ return (
+
+
+ }
+ >
+
{ connectedSites.map( ( connectedSite ) => (
);
}
diff --git a/apps/studio/src/modules/sync/components/sync-dialog.tsx b/apps/studio/src/modules/sync/components/sync-dialog.tsx
index ff35c0973d..b77a8b974d 100644
--- a/apps/studio/src/modules/sync/components/sync-dialog.tsx
+++ b/apps/studio/src/modules/sync/components/sync-dialog.tsx
@@ -1,11 +1,6 @@
import { PRESSABLE_PHP_VERSION } from '@studio/common/constants';
import { SYNC_PUSH_SIZE_LIMIT_GB } from '@studio/common/lib/sync/constants';
-import {
- Icon,
- SelectControl,
- Notice,
- __experimentalHeading as Heading,
-} from '@wordpress/components';
+import { Icon, Notice } from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
import { sprintf, __ } from '@wordpress/i18n';
import { cautionFilled } from '@wordpress/icons';
@@ -14,8 +9,6 @@ import { format } from 'date-fns';
import { useState, useEffect, useCallback } from 'react';
import { ArrowIcon } from 'src/components/arrow-icon';
import Button from 'src/components/button';
-import { RightArrowIcon } from 'src/components/icons/right-arrow';
-import Modal from 'src/components/modal';
import { TwoColorProgressBar } from 'src/components/progress-bar';
import { Tooltip } from 'src/components/tooltip';
import { TreeView, TreeNode, updateNodeById } from 'src/components/tree-view';
@@ -25,7 +18,8 @@ import { cx } from 'src/lib/cx';
import { getIpcApi } from 'src/lib/get-ipc-api';
import { getLocalizedLink } from 'src/lib/get-localized-link';
import { hasVersionMismatch } from 'src/modules/preview-site/lib/version-comparison';
-import { SiteNameBox } from 'src/modules/sync/components/site-name-box';
+import { SyncFilesSelectControl } from 'src/modules/sync/components/sync-files-select-control';
+import { SyncModalShell } from 'src/modules/sync/components/sync-modal-shell';
import { useSelectedItemsPushSize } from 'src/modules/sync/hooks/use-selected-items-push-size';
import { useSyncDialogTexts } from 'src/modules/sync/hooks/use-sync-dialog-texts';
import { useTopLevelSyncTree } from 'src/modules/sync/hooks/use-top-level-sync-tree';
@@ -224,20 +218,13 @@ export function SyncDialog( {
).length;
const [ warningsExpanded, setWarningsExpanded ] = useState( true );
- const localSiteName = Wait a few minutes or run a full sync in the meantime.' @@ -320,140 +307,16 @@ export function SyncDialog( { }; return ( -
-
- { syncTexts.subtitleSelector }
-
-
-
-
-
+
- { syncTexts.description }
-
-
- { /* translators: first %s is the source site name, second %s is the destination site name */ }
- { sprintf( __( 'From %s to %s' ), syncFromText, syncToText ) }
-
-
-
-
- { type === 'pull' && isLoadingRewindId && {
- if ( nodeId === 'filesAndFolders' && showAllFiles && rewindId ) {
- const backupUrl = `https://wordpress.com/backup/${ remoteSite.url.replace(
- /^https?:\/\//,
- ''
- ) }`;
- const backupDate = format( parseInt( rewindId ) * 1000, 'MMM d, y, h:mm a' );
- return (
-
-
- handleExpanderChange( value === 'true' ) }
- disabled={ isErrorRewindId }
- __next40pxDefaultSize
- __nextHasNoMarginBottom
- aria-label={ __( 'Select files and folders to sync' ) }
- className="h-9 select-minimal"
- />
-
-
- { sprintf( __( 'Content from the latest backup: %s.' ), backupDate ) }{ ' ' }
-
-
- );
- }
- return null;
- } }
- renderEmptyContent={ ( nodeId, node ) => {
- if ( nodeId === 'wp-content' && type === 'push' && localFileTreeError ) {
- return (
-
- { __(
- 'Could not load files. Please close and reopen this dialog to try again.'
- ) }
-
- );
- }
- if (
- ( nodeId === 'wp-content' && type === 'pull' && remoteFileTreeError ) ||
- node.hasError
- ) {
- return (
-
- { __(
- 'Error retrieving remote files and directories. Please close and reopen this dialog to try again.'
- ) }
-
- );
- }
- return (
-
- { __( 'Empty' ) }
-
- );
- } }
- />
-
- ) }
-
+ description={ syncTexts.description }
+ subtitle={ syncTexts.subtitleSelector }
+ source={ sourceSite }
+ destination={ destinationSite }
+ onRequestClose={ onRequestClose }
+ contentStyle={ { paddingBottom: getBottomPadding() } }
+ footer={
+ <>
{ type === 'push' && (
+
+ }
+ >
+
+ { type === 'pull' && isLoadingRewindId && {
+ if ( nodeId === 'filesAndFolders' && showAllFiles && rewindId ) {
+ const backupUrl = `https://wordpress.com/backup/${ remoteSite.url.replace(
+ /^https?:\/\//,
+ ''
+ ) }`;
+ const backupDate = format( parseInt( rewindId ) * 1000, 'MMM d, y, h:mm a' );
+ return (
+
-
+ handleExpanderChange( value === 'specific' ) }
+ disabled={ isErrorRewindId }
+ />
+
+
+ { sprintf( __( 'Content from the latest backup: %s.' ), backupDate ) }{ ' ' }
+
+
+ );
+ }
+ return null;
+ } }
+ renderEmptyContent={ ( nodeId, node ) => {
+ if ( nodeId === 'wp-content' && type === 'push' && localFileTreeError ) {
+ return (
+
+ { __(
+ 'Could not load files. Please close and reopen this dialog to try again.'
+ ) }
+
+ );
+ }
+ if (
+ ( nodeId === 'wp-content' && type === 'pull' && remoteFileTreeError ) ||
+ node.hasError
+ ) {
+ return (
+
+ { __(
+ 'Error retrieving remote files and directories. Please close and reopen this dialog to try again.'
+ ) }
+
+ );
+ }
+ return (
+
+ { __( 'Empty' ) }
+
+ );
+ } }
+ />
+
+ ) }
+
+ { subtitle }
+
+ { children }
+
+ { description }
+
+
+ { /* translators: first %s is the source site name, second %s is the destination site name */ }
+ { sprintf( __( 'From %s to %s' ), source.name, destination.name ) }
+
+
+
+
+ { footer }
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function WorkspaceSyncSection( {
+ label,
+ description,
+ badges,
+ active,
+ children,
+}: {
+ label: string;
+ description: ReactNode;
+ badges?: ReactNode;
+ active?: boolean;
+ children: ReactNode;
+} ) {
+ return (
+
+
+ { isUsingSpecificFileSelection && (
+
+
+
+
+
+ { isLoadingRewindId || isLoadingFileTree ? (
+ {
+ if ( nodeId === 'wp-content' && fileTreeError ) {
+ return (
+
+ ) }
+
+ { __(
+ 'Could not load source site files. Please close and reopen this dialog to try again.'
+ ) }
+
+ ) : (
+
+ { __(
+ 'Could not load source site files. Please close and reopen this dialog to try again.'
+ ) }
+
+ );
+ }
+ if ( node.hasError ) {
+ return (
+
+ { __(
+ 'Error retrieving remote files and directories. Please collapse and expand this folder to try again.'
+ ) }
+
+ );
+ }
+ return (
+
+ { __( 'Empty' ) }
+
+ );
+ } }
+ />
+ ) }
+
+
+
+
+ );
+}
+
+function WorkspaceSetupSyncSection( {
+ localSite,
+ remoteSite,
+ remoteTargetId,
+ disabled,
+ active,
+ onCreateLocalSite,
+ onConnectRemoteSite,
+ isCreatingLocalSite,
+ isConnectingSite,
+}: {
+ localSite?: SiteDetails;
+ remoteSite?: SyncSite;
+ remoteTargetId: Extract< WorkspaceTargetId, 'production' | 'staging' >;
+ disabled?: boolean;
+ active?: boolean;
+ onCreateLocalSite: ( remoteSite: SyncSite ) => void;
+ onConnectRemoteSite: ( remoteSite: SyncSite, localSite: SiteDetails ) => void;
+ isCreatingLocalSite?: boolean;
+ isConnectingSite?: boolean;
+} ) {
+ const missingDescription =
+ remoteTargetId === 'production'
+ ? __( 'Connect or create a Production target before syncing this link.' )
+ : __( 'Connect or create a Staging target before syncing this link.' );
+ const disabledReason = __( 'Wait for the Production/Staging sync to finish.' );
+ const localSetupState = remoteSite ? getRemoteSiteLocalSetupState( remoteSite ) : undefined;
+ const canUseLocalSetup = localSetupState?.canUseLocalSetup;
+ const canConnectRemoteSite = Boolean( localSite && remoteSite && canUseLocalSetup );
+ const description =
+ remoteSite && ! canUseLocalSetup && localSetupState
+ ? localSetupState.description ?? missingDescription
+ : remoteSite && ! localSite
+ ? __( 'Create a local copy of this site to vibe with.' )
+ : remoteSite && localSite
+ ? __( 'Connect this site to the local site before syncing.' )
+ : missingDescription;
+ const label =
+ remoteSite?.name ??
+ ( remoteTargetId === 'production' ? __( 'Production target' ) : __( 'Staging target' ) );
+ const environmentType = remoteSite ? getSiteEnvironment( remoteSite ) : remoteTargetId;
+
+ return (
+
+
+ { label }
+ { children }
+ { description }
+
+ { remoteSite && ! localSite && canUseLocalSetup ? (
+
+
+
+ ) : remoteSite && localSite && canConnectRemoteSite ? (
+
+
+
+ ) : remoteSite && localSetupState?.actionUrl ? (
+
+
+
+ ) : (
+
+ ) }
+
+
+ );
+}
+
+function EnvironmentSyncRow( {
+ productionSite,
+ stagingSite,
+ disabled,
+ active,
+ onOpenDialog,
+ onCreateStagingSite,
+ isCreatingStagingSite,
+}: {
+ productionSite?: SyncSite;
+ stagingSite?: SyncSite;
+ disabled: boolean;
+ active?: boolean;
+ onOpenDialog: ( direction: StagingSyncDirection ) => void;
+ onCreateStagingSite: ( productionSite: SyncSite ) => void;
+ isCreatingStagingSite?: boolean;
+} ) {
+ const stagingSyncState = useRootSelector(
+ stagingSyncSelectors.selectState( productionSite?.id )
+ );
+ const isEnvironmentSyncing = useRootSelector(
+ stagingSyncSelectors.selectIsProductionSiteSyncing( productionSite?.id )
+ );
+ const hasKnownStagingSite = Boolean( productionSite?.stagingSiteIds?.length );
+ const stagingSetupState = productionSite
+ ? getProductionStagingSetupState( productionSite )
+ : undefined;
+ const canCreateStagingSite =
+ Boolean( productionSite && ! stagingSite && ! hasKnownStagingSite ) &&
+ stagingSetupState?.canCreateStagingSite;
+ const disabledReason = disabled
+ ? __( 'Wait for the local sync operation to finish.' )
+ : ! productionSite
+ ? __( 'Production site details are required before creating or syncing staging.' )
+ : productionSite && ! stagingSite && hasKnownStagingSite
+ ? __( 'A staging site is linked to this production site but its details have not loaded yet.' )
+ : undefined;
+ const description = ! productionSite
+ ? __( 'Add a Production target before creating or syncing staging.' )
+ : ! stagingSite
+ ? hasKnownStagingSite
+ ? __( 'Staging site details are still loading.' )
+ : stagingSetupState?.description ??
+ __( 'Create a staging target from Production before syncing environments.' )
+ : stagingSyncState?.status === 'failed'
+ ? stagingSyncState.error?.message ?? __( 'Environment sync failed.' )
+ : isEnvironmentSyncing
+ ? __( 'Environment sync is running.' )
+ : stagingSyncState?.status === 'completed'
+ ? __( 'Last environment sync completed.' )
+ : __( 'Copy content between production and staging.' );
+ const label = __( 'Production and staging' );
+ const badges = (
+ <>
+
+ { isEnvironmentSyncing &&
+
+
+ );
+ }
+
+ const syncSections = (
+ <>
+ { shouldShowLocalProductionSetupRow && (
+
+ { __( 'No workspace sync links are available yet.' ) }
+
+
+ { localSite ? (
+
+ { syncSections }
+
+ ) : (
+ setEnvironmentSyncDirection( null ) }
+ />
+ ) }
+
+ );
+}
diff --git a/apps/studio/src/modules/sync/tests/index.test.tsx b/apps/studio/src/modules/sync/tests/index.test.tsx
index cdd8c82ae4..d211e477e2 100644
--- a/apps/studio/src/modules/sync/tests/index.test.tsx
+++ b/apps/studio/src/modules/sync/tests/index.test.tsx
@@ -575,7 +575,7 @@ describe( 'ContentTabSync', () => {
// Open specific files and folders selector
const select = screen.getByRole( 'combobox', { name: 'Select files and folders to sync' } );
- fireEvent.change( select, { target: { value: 'true' } } );
+ fireEvent.change( select, { target: { value: 'specific' } } );
// Check plugins and uploads
const pluginsCheckbox = screen.getByRole( 'checkbox', { name: 'plugins' } );
@@ -654,7 +654,7 @@ describe( 'ContentTabSync', () => {
await screen.findByText( 'Pull from Production' );
const select = screen.getByRole( 'combobox', { name: 'Select files and folders to sync' } );
- fireEvent.change( select, { target: { value: 'true' } } );
+ fireEvent.change( select, { target: { value: 'specific' } } );
const pluginsCheckbox = screen.getByRole( 'checkbox', { name: 'plugins' } );
fireEvent.click( pluginsCheckbox );
const filesAndFoldersCheckbox = screen.getByRole( 'checkbox', { name: 'Files and folders' } );
@@ -711,7 +711,7 @@ describe( 'ContentTabSync', () => {
await screen.findByText( 'Push to Production' );
const select = screen.getByRole( 'combobox', { name: 'Select files and folders to sync' } );
- fireEvent.change( select, { target: { value: 'true' } } );
+ fireEvent.change( select, { target: { value: 'specific' } } );
const pluginsCheckbox = screen.getByRole( 'checkbox', { name: 'plugins' } );
fireEvent.click( pluginsCheckbox );
diff --git a/apps/studio/src/modules/workspaces/components/workspace-content-shell.tsx b/apps/studio/src/modules/workspaces/components/workspace-content-shell.tsx
new file mode 100644
index 0000000000..569bf9df56
--- /dev/null
+++ b/apps/studio/src/modules/workspaces/components/workspace-content-shell.tsx
@@ -0,0 +1,532 @@
+import { TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo, useState, type CSSProperties } from 'react';
+import { ContentTabAssistant } from 'src/components/content-tab-assistant';
+import { ContentTabImportExport } from 'src/components/content-tab-import-export';
+import { ContentTabOverview } from 'src/components/content-tab-overview';
+import { ContentTabPreviews } from 'src/components/content-tab-previews';
+import { ContentTabSettings } from 'src/components/content-tab-settings';
+import { SiteIsBeingCreated } from 'src/components/site-is-being-created';
+import { MIN_WIDTH_CLASS_TO_MEASURE } from 'src/constants';
+import { useContentTabs, type TabName } from 'src/hooks/use-content-tabs';
+import { useImportExport } from 'src/hooks/use-import-export';
+import { useSiteDetails } from 'src/hooks/use-site-details';
+import { cx } from 'src/lib/cx';
+import { ContentTabSync } from 'src/modules/sync';
+import { WorkspaceSyncPanelContent } from 'src/modules/sync/components/workspace-sync-panel';
+import { useWorkspaceSelection } from 'src/modules/workspaces';
+import { WorkspaceDollyAssistant } from 'src/modules/workspaces/components/workspace-dolly-assistant';
+import { WorkspaceHeader } from 'src/modules/workspaces/components/workspace-header';
+import {
+ WorkspaceLiveSiteOverview,
+ WorkspaceLiveSiteSettings,
+} from 'src/modules/workspaces/components/workspace-live-site-panels';
+import {
+ createDefaultWorkspacePreviewState,
+ resolveWorkspacePreviewUrl,
+ WorkspacePreviewControls,
+ WorkspacePreviewPanel,
+ type WorkspacePreviewState,
+ type WorkspacePreviewTarget,
+} from 'src/modules/workspaces/components/workspace-preview';
+import type {
+ RemoteTarget,
+ StudioWorkspace,
+ WorkspaceTargetId,
+} from 'src/modules/workspaces/types';
+
+type WorkspaceShellPreviewTarget = WorkspacePreviewTarget & {
+ id: WorkspaceTargetId;
+ targetId: WorkspaceTargetId;
+ label: string;
+ siteId?: number | string;
+};
+
+function EmptyWorkspaceSelection() {
+ return (
+ { syncSections }
+ ) }
+ { environmentSyncDirection && productionSite && stagingSite && (
+
+
+ );
+}
+
+function SettingsRow( { label, value }: { label: string; value?: string | number | null } ) {
+ return (
+ + { __( 'Select a workspace to view details.' ) } +
+
+
+ );
+}
+
+function WorkspaceSettingsPlaceholder( { workspace }: { workspace: StudioWorkspace } ) {
+ const targets = [ workspace.targets.production, workspace.targets.staging ].filter(
+ ( target ): target is RemoteTarget => Boolean( target )
+ );
+
+ return (
+ { label }
+ { value || __( 'Unknown' ) }
+
+
+ );
+}
+
+function LocalOnlyWorkspaceTabNotice( { title }: { title: string } ) {
+ return (
+
+
+ { __( 'Settings' ) }
+
+
+
+
+ );
+}
+
+function resolveLocalPreviewBaseUrl( site: SiteDetails ) {
+ if ( site.running ) {
+ return site.url;
+ }
+
+ const protocol = site.customDomain && site.enableHttps ? 'https' : 'http';
+ const domain = site.customDomain || `localhost:${ site.port }`;
+
+ return `${ protocol }://${ domain }`;
+}
+
+function getDefaultPreviewTargetId( workspace: StudioWorkspace ): WorkspaceTargetId | undefined {
+ if ( workspace.targets.local ) {
+ return 'local';
+ }
+ if ( workspace.targets.staging ) {
+ return 'staging';
+ }
+ if ( workspace.targets.production ) {
+ return 'production';
+ }
+}
+
+function getUrlPath( url: URL ) {
+ return `${ url.pathname }${ url.search }${ url.hash }` || '/';
+}
+
+function getTargetScopedPathOrUrl( pathOrUrl: string, targetSiteUrl: string ) {
+ try {
+ const requestedUrl = new URL( pathOrUrl );
+ const targetUrl = new URL( targetSiteUrl );
+
+ if ( requestedUrl.origin !== targetUrl.origin ) {
+ return getUrlPath( requestedUrl );
+ }
+ } catch {
+ return pathOrUrl;
+ }
+
+ return pathOrUrl;
+}
+
+function isCurrentUrlForTarget( currentUrl: string | undefined, targetSiteUrl: string ) {
+ if ( ! currentUrl ) {
+ return false;
+ }
+
+ try {
+ return new URL( currentUrl ).origin === new URL( targetSiteUrl ).origin;
+ } catch {
+ return false;
+ }
+}
+
+function getPreviewStateForTarget(
+ previewState: WorkspacePreviewState,
+ target: WorkspaceShellPreviewTarget
+) {
+ const pathOrUrl = getTargetScopedPathOrUrl( previewState.pathOrUrl, target.siteUrl );
+ const currentUrl = isCurrentUrlForTarget( previewState.currentUrl, target.siteUrl )
+ ? previewState.currentUrl
+ : undefined;
+
+ if ( pathOrUrl === previewState.pathOrUrl && currentUrl === previewState.currentUrl ) {
+ return previewState;
+ }
+
+ return {
+ ...previewState,
+ pathOrUrl,
+ currentUrl,
+ canGoBack: currentUrl ? previewState.canGoBack : false,
+ canGoForward: currentUrl ? previewState.canGoForward : false,
+ navigationAction: currentUrl ? previewState.navigationAction : undefined,
+ };
+}
+
+function getTransportTarget( workspace: StudioWorkspace ) {
+ return workspace.targets.staging ?? workspace.targets.production;
+}
+
+function getSelectedRemoteTarget( workspace: StudioWorkspace, targetId?: WorkspaceTargetId ) {
+ if ( targetId === 'production' ) {
+ return workspace.targets.production;
+ }
+ if ( targetId === 'staging' ) {
+ return workspace.targets.staging;
+ }
+}
+
+export function WorkspaceContentShell() {
+ const { tabs } = useContentTabs();
+ const { importState } = useImportExport();
+ const { loadingServer, siteCreationMessages, startServer } = useSiteDetails();
+ const { selectedWorkspace, selectedTabId, selectWorkspaceTab } = useWorkspaceSelection();
+ const [ previewStates, setPreviewStates ] = useState< Record< string, WorkspacePreviewState > >(
+ {}
+ );
+ const [ selectedPreviewTargetIds, setSelectedPreviewTargetIds ] = useState<
+ Record< string, WorkspaceTargetId >
+ >( {} );
+
+ const localTarget = selectedWorkspace?.targets.local;
+ const transportTarget = selectedWorkspace ? getTransportTarget( selectedWorkspace ) : undefined;
+ const previewKey = selectedWorkspace?.id ?? '';
+
+ const previewTargets = useMemo< WorkspaceShellPreviewTarget[] >( () => {
+ if ( ! selectedWorkspace ) {
+ return [];
+ }
+
+ const targets: WorkspaceShellPreviewTarget[] = [];
+ if ( selectedWorkspace.targets.local ) {
+ const site = selectedWorkspace.targets.local.site;
+ targets.push( {
+ id: 'local',
+ targetId: 'local',
+ label: __( 'Local' ),
+ siteId: site.id,
+ siteName: site.name,
+ siteUrl: resolveLocalPreviewBaseUrl( site ),
+ isLoading: loadingServer[ site.id ],
+ onShowPreview: async () => {
+ if ( ! site.running ) {
+ await startServer( site );
+ }
+ },
+ } );
+ }
+ if ( selectedWorkspace.targets.staging ) {
+ targets.push( {
+ id: 'staging',
+ targetId: 'staging',
+ label: __( 'Staging' ),
+ siteName: selectedWorkspace.targets.staging.site.name,
+ siteUrl: selectedWorkspace.targets.staging.site.url,
+ siteId: selectedWorkspace.targets.staging.site.id,
+ } );
+ }
+ if ( selectedWorkspace.targets.production ) {
+ targets.push( {
+ id: 'production',
+ targetId: 'production',
+ label: __( 'Production' ),
+ siteName: selectedWorkspace.targets.production.site.name,
+ siteUrl: selectedWorkspace.targets.production.site.url,
+ siteId: selectedWorkspace.targets.production.site.id,
+ isProduction: true,
+ } );
+ }
+ return targets;
+ }, [ loadingServer, selectedWorkspace, startServer ] );
+ const previewState = previewStates[ previewKey ] ?? createDefaultWorkspacePreviewState();
+ const selectedPreviewTargetId = selectedWorkspace
+ ? selectedPreviewTargetIds[ selectedWorkspace.id ] ??
+ getDefaultPreviewTargetId( selectedWorkspace )
+ : undefined;
+ const previewTarget =
+ previewTargets.find( ( target ) => target.id === selectedPreviewTargetId ) ??
+ previewTargets[ 0 ];
+ const workspaceTabs = tabs;
+
+ if ( ! selectedWorkspace ) {
+ return
+
+ { title }
++ { __( 'This section is managed in the Local target.' ) } +
+
+
+ );
+}
diff --git a/apps/studio/src/modules/workspaces/components/workspace-dolly-assistant.test.tsx b/apps/studio/src/modules/workspaces/components/workspace-dolly-assistant.test.tsx
new file mode 100644
index 0000000000..d71cb596aa
--- /dev/null
+++ b/apps/studio/src/modules/workspaces/components/workspace-dolly-assistant.test.tsx
@@ -0,0 +1,855 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { AuthContext, type AuthContextType } from 'src/components/auth-provider';
+import { WorkspaceDollyAssistant } from 'src/modules/workspaces/components/workspace-dolly-assistant';
+import {
+ createDefaultWorkspacePreviewState,
+ type WorkspacePreviewState,
+} from 'src/modules/workspaces/components/workspace-preview';
+import { hydrateWorkspaceDollyConversationStates } from 'src/modules/workspaces/lib/dolly/api';
+import {
+ clearWorkspaceDollyAssistantStateCacheForTests,
+ getWorkspaceDollyConversationsForWorkspace,
+ getWorkspaceDollyConversationState,
+ mergeWorkspaceDollyConversationState,
+} from 'src/modules/workspaces/lib/dolly/session';
+import type { SyncSite } from '@studio/common/types/sync';
+import type { ReactNode } from 'react';
+import type {
+ RemoteTarget,
+ RemoteTargetId,
+ StudioWorkspace,
+ WorkspaceTargetId,
+} from 'src/modules/workspaces/types';
+import type { WPCOM } from 'wpcom/types';
+
+vi.mock( '@automattic/agenttic-ui', async () => {
+ const React = await vi.importActual< typeof import('react') >( 'react' );
+
+ type MockAgentMessage = {
+ id: string;
+ content: Array< {
+ text?: string;
+ component?: React.ComponentType< { images?: Array< { name: string; url: string } > } >;
+ componentProps?: { images?: Array< { name: string; url: string } > };
+ } >;
+ };
+ type MockAction = {
+ id: string;
+ icon: ReactNode;
+ onClick: ( event?: React.MouseEvent< HTMLButtonElement > ) => void;
+ disabled?: boolean;
+ 'aria-label': string;
+ };
+ type MockNotice = {
+ message?: string;
+ action?: {
+ label: string;
+ onClick: () => void;
+ };
+ };
+ type MockContainerProps = {
+ children?: ReactNode;
+ className?: string;
+ messages: MockAgentMessage[];
+ isProcessing: boolean;
+ onSubmit: ( value: string ) => void;
+ onStop: () => void;
+ inputValue: string;
+ onInputChange: ( value: string ) => void;
+ placeholder?: string;
+ notice?: MockNotice;
+ };
+ type MockChildrenProps = {
+ children?: ReactNode;
+ className?: string;
+ };
+ type MockInputProps = {
+ disabled?: boolean;
+ customActions?: MockAction[];
+ };
+ type MockImageUploaderHandle = {
+ openFileDialog: () => void;
+ };
+ type MockImageUploaderProps = {
+ images: Array< { id: string; name?: string; url: string } >;
+ onFilesSelected: ( files: File[] ) => void;
+ onRemoveImage: ( image: { id: string; name?: string; url: string } ) => void;
+ acceptedFileTypes?: string[];
+ };
+
+ const MockAgentUIContext = React.createContext< MockContainerProps | undefined >( undefined );
+ const useMockAgentUIContext = () => {
+ const context = React.useContext( MockAgentUIContext );
+ if ( ! context ) {
+ throw new Error( 'Missing mocked AgentUI context.' );
+ }
+ return context;
+ };
+
+ const Container = ( props: MockContainerProps ) =>
+ React.createElement(
+ MockAgentUIContext.Provider,
+ { value: props },
+ React.createElement( 'div', { className: props.className }, props.children )
+ );
+
+ const ConversationView = React.forwardRef< HTMLDivElement, MockChildrenProps >(
+ ( { children, className }, ref ) => React.createElement( 'div', { ref, className }, children )
+ );
+
+ const Messages = () => {
+ const { messages, isProcessing } = useMockAgentUIContext();
+ return React.createElement(
+ 'div',
+ { 'data-slot': 'messages' },
+ ...messages.map( ( message ) =>
+ React.createElement(
+ 'div',
+ { key: message.id },
+ message.content.map( ( part, index ) => {
+ if ( part.component ) {
+ return React.createElement( part.component, {
+ key: index,
+ ...( part.componentProps ?? {} ),
+ } );
+ }
+ return part.text ?? '';
+ } )
+ )
+ ),
+ isProcessing ? React.createElement( 'div', { key: 'thinking' }, 'Thinking...' ) : null
+ );
+ };
+
+ const Footer = ( { children, className }: MockChildrenProps ) =>
+ React.createElement( 'div', { className }, children );
+
+ const Notice = () => {
+ const { notice } = useMockAgentUIContext();
+ if ( ! notice?.message ) {
+ return null;
+ }
+
+ return React.createElement(
+ 'div',
+ null,
+ notice.message,
+ notice.action
+ ? React.createElement(
+ 'button',
+ { type: 'button', onClick: notice.action.onClick },
+ notice.action.label
+ )
+ : null
+ );
+ };
+
+ const Input = ( { disabled, customActions = [] }: MockInputProps ) => {
+ const { inputValue, isProcessing, onInputChange, onStop, onSubmit, placeholder } =
+ useMockAgentUIContext();
+ const isSendDisabled = disabled || ( ! inputValue.trim() && ! isProcessing );
+
+ return React.createElement(
+ 'div',
+ null,
+ React.createElement( 'textarea', {
+ value: inputValue,
+ placeholder,
+ onChange: ( event: { target: { value: string } } ) => onInputChange( event.target.value ),
+ onKeyDown: ( event: KeyboardEvent ) => {
+ if ( event.key === 'Enter' && ! isSendDisabled ) {
+ event.preventDefault();
+ onSubmit( inputValue );
+ }
+ },
+ } ),
+ ...customActions.map( ( action ) =>
+ React.createElement(
+ 'button',
+ {
+ key: action.id,
+ type: 'button',
+ 'aria-label': action[ 'aria-label' ],
+ disabled: action.disabled,
+ onClick: action.onClick,
+ },
+ action[ 'aria-label' ]
+ )
+ ),
+ React.createElement(
+ 'button',
+ {
+ type: 'button',
+ 'aria-label': isProcessing ? 'Stop processing' : 'Send message',
+ disabled: isSendDisabled,
+ onClick: () => ( isProcessing ? onStop() : onSubmit( inputValue ) ),
+ },
+ isProcessing ? 'Stop' : 'Send'
+ )
+ );
+ };
+
+ const ImageUploader = React.forwardRef< MockImageUploaderHandle, MockImageUploaderProps >(
+ ( { images, onFilesSelected, onRemoveImage, acceptedFileTypes }, ref ) => {
+ const inputRef = React.useRef< HTMLInputElement >( null );
+ React.useImperativeHandle( ref, () => ( {
+ openFileDialog: () => inputRef.current?.click(),
+ } ) );
+
+ return React.createElement(
+ 'div',
+ null,
+ React.createElement( 'input', {
+ ref: inputRef,
+ type: 'file',
+ 'aria-label': 'Image upload input',
+ accept: acceptedFileTypes?.join( ',' ),
+ onChange: ( event: { target: HTMLInputElement } ) => {
+ onFilesSelected( Array.from( event.target.files ?? [] ) );
+ },
+ } ),
+ ...images.map( ( image ) =>
+ React.createElement(
+ 'button',
+ {
+ key: image.id,
+ type: 'button',
+ onClick: () => onRemoveImage( image ),
+ },
+ image.name ?? image.id
+ )
+ )
+ );
+ }
+ );
+
+ return {
+ AgentUI: {
+ Container,
+ ConversationView,
+ Messages,
+ Footer,
+ Notice,
+ Input,
+ },
+ ImageUploader,
+ createMessageRenderer: vi.fn(),
+ };
+} );
+
+vi.mock( 'src/hooks/use-offline', () => ( {
+ useOffline: () => false,
+} ) );
+
+vi.mock( 'src/lib/get-ipc-api', () => ( {
+ getIpcApi: () => ( {
+ getAuthenticationToken: vi.fn().mockResolvedValue( {
+ accessToken: 'test-token',
+ expiresIn: 1209600,
+ expirationTime: Date.now() + 1209600000,
+ id: 1,
+ email: 'test@example.com',
+ displayName: 'Test User',
+ } ),
+ } ),
+} ) );
+
+const createSyncSite = ( overrides: Partial< SyncSite > = {} ): SyncSite => ( {
+ id: 101,
+ localSiteId: '',
+ name: 'Production Site',
+ url: 'https://production.example',
+ isStaging: false,
+ isPressable: false,
+ syncSupport: 'syncable',
+ lastPullTimestamp: null,
+ lastPushTimestamp: null,
+ ...overrides,
+} );
+
+const productionSite = createSyncSite( {
+ id: 101,
+ name: 'Production Site',
+ url: 'https://production.example',
+ stagingSiteIds: [ 202 ],
+} );
+
+const stagingSite = createSyncSite( {
+ id: 202,
+ name: 'Staging Site',
+ url: 'https://staging.example',
+ isStaging: true,
+ productionSiteId: 101,
+} );
+
+const createRemoteTarget = ( id: RemoteTargetId, site: SyncSite ): RemoteTarget => ( {
+ id,
+ kind: 'remote',
+ siteId: site.id,
+ site,
+} );
+
+const productionTarget = createRemoteTarget( 'production', productionSite );
+const stagingTarget = createRemoteTarget( 'staging', stagingSite );
+const previewTargets = [
+ {
+ targetId: 'staging' as const,
+ siteId: stagingSite.id,
+ siteName: stagingSite.name,
+ siteUrl: stagingSite.url,
+ },
+ {
+ targetId: 'production' as const,
+ siteId: productionSite.id,
+ siteName: productionSite.name,
+ siteUrl: productionSite.url,
+ isProduction: true,
+ },
+];
+const localSite = {
+ id: 'local-site-1',
+ name: 'Local Site',
+ path: '/fake/local-site',
+ running: true,
+ port: 8881,
+ phpVersion: '8.4',
+ url: 'http://localhost:8881',
+} as SiteDetails;
+const localPreviewTarget = {
+ targetId: 'local' as const,
+ siteId: localSite.id,
+ siteName: localSite.name,
+ siteUrl: 'http://localhost:8881',
+};
+
+const workspace: StudioWorkspace = {
+ id: 'studio-workspace:wpcom:101',
+ name: 'Production Site',
+ targets: {
+ production: productionTarget,
+ staging: stagingTarget,
+ },
+ syncLinks: [],
+ activity: { status: 'idle' },
+};
+const workspaceWithLocal: StudioWorkspace = {
+ ...workspace,
+ targets: {
+ ...workspace.targets,
+ local: {
+ id: 'local',
+ kind: 'local',
+ siteId: localSite.id,
+ site: localSite,
+ },
+ },
+};
+
+type DollyFetchHandler = ( args: {
+ body: {
+ method?: string;
+ params?: {
+ id?: string;
+ sessionId?: string;
+ message?: {
+ parts?: Array< {
+ type?: string;
+ text?: string;
+ data?: Record< string, unknown >;
+ } >;
+ };
+ };
+ };
+ init: RequestInit;
+ url: string;
+ callIndex: number;
+} ) => unknown | Promise< unknown >;
+
+const createDollyFetchResponse = ( data: unknown, requestBody?: { method?: string } ) => {
+ if ( requestBody?.method === 'message/stream' ) {
+ const encoder = new TextEncoder();
+ const stream = new ReadableStream( {
+ start( controller ) {
+ controller.enqueue( encoder.encode( `data: ${ JSON.stringify( data ) }\n\n` ) );
+ controller.close();
+ },
+ } );
+
+ return new Response( stream, {
+ status: 200,
+ headers: {
+ 'Content-Type': 'text/event-stream',
+ },
+ } );
+ }
+
+ return new Response( JSON.stringify( data ), {
+ status: 200,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ } );
+};
+
+const mockDollyFetch = ( handler: DollyFetchHandler ) => {
+ const requestBodies: Array< Parameters< DollyFetchHandler >[ 0 ][ 'body' ] > = [];
+ const requestUrls: string[] = [];
+ const fetchMock = vi.fn( async ( input: RequestInfo | URL, init?: RequestInit ) => {
+ const url = String( input );
+ const body = JSON.parse( String( init?.body ?? '{}' ) );
+ const callIndex = requestBodies.length;
+ requestBodies.push( body );
+ requestUrls.push( url );
+
+ return createDollyFetchResponse(
+ await handler( {
+ body,
+ init: init ?? {},
+ url,
+ callIndex,
+ } ),
+ body
+ );
+ } );
+
+ vi.stubGlobal( 'fetch', fetchMock );
+
+ return {
+ fetchMock,
+ requestBodies,
+ requestUrls,
+ };
+};
+
+const createDollyResponse = ( text: string, sessionId: string, taskId = 'task-1' ) => ( {
+ jsonrpc: '2.0',
+ id: 'rpc-1',
+ result: {
+ id: taskId,
+ sessionId,
+ status: {
+ state: 'completed',
+ message: {
+ kind: 'message',
+ messageId: `${ taskId }-message`,
+ role: 'agent',
+ parts: [
+ {
+ type: 'text',
+ text,
+ },
+ ],
+ },
+ },
+ },
+} );
+
+const unauthenticatedClient = { req: {} } as unknown as WPCOM;
+
+const renderDollyAssistant = ( {
+ transportTarget = stagingTarget,
+ client = unauthenticatedClient,
+ previewState = createDefaultWorkspacePreviewState(),
+ previewTargetId = 'staging',
+ onOpenPreviewTarget = vi.fn(),
+}: {
+ transportTarget?: RemoteTarget;
+ client?: WPCOM;
+ previewState?: WorkspacePreviewState;
+ previewTargetId?: WorkspaceTargetId;
+ onOpenPreviewTarget?: (
+ targetId: 'local' | 'production' | 'staging',
+ pathOrUrl: string,
+ state: WorkspacePreviewState
+ ) => void;
+} = {} ) => {
+ const authContextValue: AuthContextType = {
+ client,
+ isAuthenticated: true,
+ authenticate: vi.fn(),
+ logout: vi.fn().mockResolvedValue( undefined ),
+ };
+
+ return render(
+
+ { previewTarget && (
+ updatePreviewState( { ...targetPreviewState, width } ) }
+ onNavigationStateChange={ updatePreviewNavigationState }
+ />
+ ) }
+
+
+
+ ) }
+
+
+
+
+ selectWorkspaceTab( selectedWorkspace.id, tabName as TabName )
+ }
+ initialTabName={ activeTabId }
+ key={ selectedWorkspace.id }
+ >
+ { ( { name } ) => (
+
+
+ { previewTarget && targetPreviewState.open && previewUrl && (
+
+ { name === 'overview' &&
+ ( localContextSite ? (
+
+ ) }
+
+
+ );
+}
+
+function UnauthenticatedView( { onAuthenticate }: { onAuthenticate: () => void } ) {
+ return (
+
+ { __( 'Hold up!' ) }
+
+
+ { __( 'You need to log in to your WordPress.com account to use Dolly.' ) }
+
+
+ { sprintf(
+ __( 'Every account gets %d prompts included for free each month.' ),
+ LIMIT_OF_PROMPTS_PER_USER
+ ) }
+
+
+
+ { conversations.map( ( conversation ) => {
+ const isSelected = conversation.id === selectedConversationId;
+ const isActive = isConversationActive( conversation.id );
+
+ return (
+
+
+
+
+
+ );
+ } ) }
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ { isOffline ? (
+
+
+
+
+ { isProductionAssistantContext && (
+
+ 0 ? false : undefined }
+ customActions={ dollyInputActions }
+ actionOrder="before-submit"
+ layout="inline"
+ />
+
+ setChatMenuAnchor( null ) }
+ onNewChat={ startNewConversation }
+ onSelect={ selectConversation }
+ onDelete={ deleteConversation }
+ isConversationActive={ ( conversationId ) =>
+ Boolean( getWorkspaceDollyTurn( conversationId ) )
+ }
+ />
+
+
+
+ );
+}
diff --git a/apps/studio/src/modules/workspaces/components/workspace-header.tsx b/apps/studio/src/modules/workspaces/components/workspace-header.tsx
new file mode 100644
index 0000000000..6638f625b9
--- /dev/null
+++ b/apps/studio/src/modules/workspaces/components/workspace-header.tsx
@@ -0,0 +1,171 @@
+import { sprintf } from '@wordpress/i18n';
+import { useI18n } from '@wordpress/react-i18n';
+import { ArrowIcon } from 'src/components/arrow-icon';
+import Button from 'src/components/button';
+import { SiteManagementActions } from 'src/components/site-management-actions';
+import { useSiteDetails } from 'src/hooks/use-site-details';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+import {
+ WorkspacePreviewTargetPicker,
+ type WorkspacePreviewTargetOption,
+} from 'src/modules/workspaces/components/workspace-preview';
+import type { StudioWorkspace, WorkspaceTargetId } from 'src/modules/workspaces/types';
+
+type WorkspaceHeaderProps = {
+ workspace: StudioWorkspace;
+ showLocalManagementActions?: boolean;
+ onStartLocalSite?: ( site: SiteDetails ) => Promise< void >;
+ previewTargets?: WorkspacePreviewTargetOption[];
+ selectedPreviewTargetId?: WorkspaceTargetId;
+ onSelectPreviewTarget?: ( targetId: WorkspaceTargetId ) => void;
+};
+
+type WorkspaceHeaderLink = {
+ id: string;
+ label: string;
+ onClick: () => void | Promise< void >;
+ disabled?: boolean;
+};
+
+function resolveRemoteSiteUrl( siteUrl: string, path = '' ) {
+ try {
+ return new URL( path, siteUrl ).toString();
+ } catch {
+ return siteUrl;
+ }
+}
+
+export function WorkspaceHeader( {
+ workspace,
+ showLocalManagementActions = false,
+ onStartLocalSite,
+ previewTargets = [],
+ selectedPreviewTargetId,
+ onSelectPreviewTarget,
+}: WorkspaceHeaderProps ) {
+ const { __ } = useI18n();
+ const { startServer, stopServer, loadingServer } = useSiteDetails();
+ const localSite = workspace.targets.local?.site;
+ const isLoading = localSite?.id ? loadingServer[ localSite.id ] : false;
+ const displayTitle = workspace.name || localSite?.name || __( 'Untitled workspace' );
+ const showHeaderTargetPicker = Boolean(
+ selectedPreviewTargetId && previewTargets.length && onSelectPreviewTarget
+ );
+ const selectedRemoteTarget =
+ selectedPreviewTargetId === 'production'
+ ? workspace.targets.production
+ : selectedPreviewTargetId === 'staging'
+ ? workspace.targets.staging
+ : undefined;
+
+ const handleLocalWpAdminClick = async () => {
+ if ( ! localSite || isLoading ) {
+ return;
+ }
+ if ( ! localSite.running ) {
+ await startServer( localSite );
+ }
+ getIpcApi().openSiteURL( localSite.id, '/wp-admin/' );
+ };
+
+ const handleOpenLocalSiteClick = async () => {
+ if ( ! localSite || isLoading ) {
+ return;
+ }
+ if ( ! localSite.running ) {
+ await startServer( localSite );
+ }
+ getIpcApi().openSiteURL( localSite.id, '', { autoLogin: false } );
+ };
+
+ const headerLinks: WorkspaceHeaderLink[] = [];
+
+ if ( selectedPreviewTargetId === 'local' && localSite ) {
+ headerLinks.push(
+ {
+ id: 'local-admin',
+ label: __( 'Local WP admin' ),
+ onClick: handleLocalWpAdminClick,
+ disabled: isLoading,
+ },
+ {
+ id: 'local-site',
+ label: __( 'Open local site' ),
+ onClick: handleOpenLocalSiteClick,
+ disabled: isLoading,
+ }
+ );
+ } else if ( selectedRemoteTarget ) {
+ const targetLabel =
+ selectedRemoteTarget.id === 'production' ? __( 'Production' ) : __( 'Staging' );
+ const openSiteLabel =
+ selectedRemoteTarget.id === 'production'
+ ? __( 'Open production site' )
+ : __( 'Open staging site' );
+ headerLinks.push(
+ {
+ id: `${ selectedRemoteTarget.id }-admin`,
+ label: sprintf(
+ /* translators: %s is an environment name, such as Production or Staging. */
+ __( '%s WP admin' ),
+ targetLabel
+ ),
+ onClick: () =>
+ getIpcApi().openURL(
+ resolveRemoteSiteUrl( selectedRemoteTarget.site.url, '/wp-admin/' )
+ ),
+ },
+ {
+ id: `${ selectedRemoteTarget.id }-site`,
+ label: openSiteLabel,
+ onClick: () => getIpcApi().openURL( resolveRemoteSiteUrl( selectedRemoteTarget.site.url ) ),
+ }
+ );
+ }
+
+ return (
+
+ { __(
+ 'Production site: changes requested in this chat can be applied directly to the live site.'
+ ) }
+
+ ) }
+
+
+
+ ) }
+
+ { __( 'Powered by Dolly.' ) }
+
+
+
+ );
+}
diff --git a/apps/studio/src/modules/workspaces/components/workspace-live-site-panels.tsx b/apps/studio/src/modules/workspaces/components/workspace-live-site-panels.tsx
new file mode 100644
index 0000000000..65cdd67127
--- /dev/null
+++ b/apps/studio/src/modules/workspaces/components/workspace-live-site-panels.tsx
@@ -0,0 +1,382 @@
+import { sprintf, __ } from '@wordpress/i18n';
+import {
+ desktop,
+ layout,
+ navigation,
+ page,
+ pencil,
+ styles,
+ symbolFilled,
+ widget,
+} from '@wordpress/icons';
+import { useEffect, useState } from 'react';
+import { ArrowIcon } from 'src/components/arrow-icon';
+import { ButtonsSection, ButtonsSectionProps } from 'src/components/buttons-section';
+import { cx } from 'src/lib/cx';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+import {
+ useGetActiveWpcomThemeQuery,
+ useGetWpcomSiteSettingsQuery,
+ type WpcomSiteSettings,
+} from 'src/stores/sync/wpcom-sites';
+import type { RemoteTarget } from 'src/modules/workspaces/types';
+
+function resolveLiveSiteUrl( siteUrl: string, path = '' ) {
+ try {
+ return new URL( path, siteUrl ).toString();
+ } catch {
+ return siteUrl;
+ }
+}
+
+function getMshotsUrl( siteUrl: string ) {
+ return `https://s0.wp.com/mshots/v1/${ encodeURIComponent( siteUrl ) }?w=600&h=800`;
+}
+
+function getTargetLabel( target: RemoteTarget ) {
+ return target.id === 'production' ? __( 'Production' ) : __( 'Staging' );
+}
+
+function getSettingString(
+ settings: WpcomSiteSettings | undefined,
+ key: string
+): string | undefined {
+ const value = settings?.settings[ key ];
+ return typeof value === 'string' && value ? value : undefined;
+}
+
+function getSettingNumber(
+ settings: WpcomSiteSettings | undefined,
+ key: string
+): number | undefined {
+ const value = settings?.settings[ key ];
+ if ( typeof value === 'number' ) {
+ return value;
+ }
+ if ( typeof value === 'string' && value.trim() !== '' ) {
+ const parsed = Number( value );
+ return Number.isFinite( parsed ) ? parsed : undefined;
+ }
+ return undefined;
+}
+
+function getBooleanLikeLabel( value: unknown ) {
+ if ( value === true || value === 1 || value === '1' ) {
+ return __( 'Enabled' );
+ }
+ if ( value === false || value === 0 || value === '0' ) {
+ return __( 'Disabled' );
+ }
+ return undefined;
+}
+
+function formatVisibility( settings: WpcomSiteSettings | undefined ) {
+ const visibility = settings?.settings.blog_public;
+ if ( visibility === -1 || visibility === '-1' ) {
+ return __( 'Private' );
+ }
+ if ( visibility === 0 || visibility === '0' ) {
+ return __( 'Discourage search engines' );
+ }
+ if ( visibility === 1 || visibility === '1' ) {
+ return __( 'Public' );
+ }
+ return undefined;
+}
+
+function formatHomepage( settings: WpcomSiteSettings | undefined ) {
+ const showOnFront = getSettingString( settings, 'show_on_front' );
+ if ( showOnFront === 'page' ) {
+ const pageOnFront = getSettingNumber( settings, 'page_on_front' );
+ if ( pageOnFront ) {
+ return sprintf(
+ /* translators: %d is a WordPress page ID. */
+ __( 'Static page, page ID %d' ),
+ pageOnFront
+ );
+ }
+ return __( 'Static page' );
+ }
+ if ( showOnFront === 'posts' ) {
+ return __( 'Latest posts' );
+ }
+ return undefined;
+}
+
+function formatTimezone( settings: WpcomSiteSettings | undefined ) {
+ const timezone = getSettingString( settings, 'timezone_string' );
+ if ( timezone ) {
+ return timezone;
+ }
+ const offset = getSettingNumber( settings, 'gmt_offset' );
+ if ( offset !== undefined ) {
+ return sprintf(
+ /* translators: %s is a numeric UTC offset, for example -5 or 5.5. */
+ __( 'UTC%s' ),
+ offset >= 0 ? `+${ offset }` : String( offset )
+ );
+ }
+ return undefined;
+}
+
+function SettingsRow( { label, value }: { label: string; value?: string | number | null } ) {
+ return (
+
+
+ { ( showHeaderTargetPicker || ( localSite && showLocalManagementActions ) ) && (
+ { displayTitle }
+
+ { headerLinks.map( ( link ) => (
+
+ ) ) }
+
+
+ { showHeaderTargetPicker && selectedPreviewTargetId && onSelectPreviewTarget && (
+
+ ) }
+
+
+ );
+}
+
+function LiveThemeSkeleton() {
+ return (
+ { label }
+ { value || __( 'Unknown' ) }
+
+
+ );
+}
+
+function createLiveCustomizeButtons( target: RemoteTarget, isBlockTheme: boolean | undefined ) {
+ const openAdminPath = ( path: string ) => () =>
+ getIpcApi().openURL( resolveLiveSiteUrl( target.site.url, path ) );
+
+ const blockThemeButtons: ButtonsSectionProps[ 'buttonsArray' ] = [
+ {
+ label: __( 'Site Editor' ),
+ icon: desktop,
+ onClick: openAdminPath( '/wp-admin/site-editor.php' ),
+ },
+ {
+ label: __( 'Styles' ),
+ icon: styles,
+ onClick: openAdminPath( '/wp-admin/site-editor.php?path=%2Fwp_global_styles' ),
+ },
+ {
+ label: __( 'Patterns' ),
+ icon: symbolFilled,
+ onClick: openAdminPath( '/wp-admin/site-editor.php?path=%2Fpatterns' ),
+ },
+ {
+ label: __( 'Navigation' ),
+ icon: navigation,
+ onClick: openAdminPath( '/wp-admin/site-editor.php?path=%2Fnavigation' ),
+ },
+ {
+ label: __( 'Templates' ),
+ icon: layout,
+ onClick: openAdminPath( '/wp-admin/site-editor.php?path=%2Fwp_template' ),
+ },
+ {
+ label: __( 'Pages' ),
+ icon: page,
+ onClick: openAdminPath( '/wp-admin/site-editor.php?path=%2Fpage' ),
+ },
+ ];
+
+ const classicThemeButtons: ButtonsSectionProps[ 'buttonsArray' ] = [
+ {
+ label: __( 'Customizer' ),
+ icon: pencil,
+ onClick: openAdminPath( '/wp-admin/customize.php' ),
+ },
+ {
+ label: __( 'Menus' ),
+ icon: navigation,
+ onClick: openAdminPath( '/wp-admin/nav-menus.php' ),
+ },
+ {
+ label: __( 'Widgets' ),
+ icon: widget,
+ onClick: openAdminPath( '/wp-admin/widgets.php' ),
+ },
+ ];
+
+ return isBlockTheme === false ? classicThemeButtons : blockThemeButtons;
+}
+
+export function WorkspaceLiveSiteOverview( { target }: { target: RemoteTarget } ) {
+ const [ isThumbnailError, setIsThumbnailError ] = useState( false );
+ const { data: activeTheme, isLoading } = useGetActiveWpcomThemeQuery( {
+ siteId: target.site.id,
+ } );
+ const themeName = activeTheme?.name || __( 'Live site' );
+ const thumbnailUrl = getMshotsUrl( target.site.url );
+
+ useEffect( () => {
+ setIsThumbnailError( false );
+ }, [ target.site.url ] );
+
+ if ( isLoading ) {
+ return (
+ { __( 'Theme' ) }
+ + +
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ );
+}
+
+function createSettingsButtons( target: RemoteTarget ) {
+ const routes = [
+ {
+ label: __( 'General' ),
+ icon: desktop,
+ path: '/wp-admin/options-general.php',
+ },
+ {
+ label: __( 'Reading' ),
+ icon: page,
+ path: '/wp-admin/options-reading.php',
+ },
+ {
+ label: __( 'Discussion' ),
+ icon: styles,
+ path: '/wp-admin/options-discussion.php',
+ },
+ {
+ label: __( 'Permalinks' ),
+ icon: navigation,
+ path: '/wp-admin/options-permalink.php',
+ },
+ ];
+
+ return routes.map( ( route ) => ( {
+ label: route.label,
+ icon: route.icon,
+ onClick: () => getIpcApi().openURL( resolveLiveSiteUrl( target.site.url, route.path ) ),
+ } ) );
+}
+
+export function WorkspaceLiveSiteSettings( { target }: { target: RemoteTarget } ) {
+ const { data: siteSettings, isLoading } = useGetWpcomSiteSettingsQuery( {
+ siteId: target.site.id,
+ } );
+ const settings = siteSettings?.settings ?? {};
+
+ const rows = [
+ { label: __( 'Environment' ), value: getTargetLabel( target ) },
+ { label: __( 'Site title' ), value: siteSettings?.name ?? target.site.name },
+ { label: __( 'Tagline' ), value: siteSettings?.description },
+ { label: __( 'Site URL' ), value: siteSettings?.url ?? target.site.url },
+ { label: __( 'Visibility' ), value: formatVisibility( siteSettings ) },
+ { label: __( 'Homepage' ), value: formatHomepage( siteSettings ) },
+ { label: __( 'Timezone' ), value: formatTimezone( siteSettings ) },
+ { label: __( 'Language' ), value: siteSettings?.lang },
+ { label: __( 'Plan' ), value: target.site.planName },
+ { label: __( 'WordPress version' ), value: target.site.wpVersion },
+ {
+ label: __( 'Manage options' ),
+ value:
+ target.site.canManageOptions === undefined
+ ? undefined
+ : target.site.canManageOptions
+ ? __( 'Available' )
+ : __( 'Unavailable' ),
+ },
+ {
+ label: __( 'Related posts' ),
+ value: getBooleanLikeLabel( settings.jetpack_relatedposts_enabled ),
+ },
+ {
+ label: __( 'Search' ),
+ value: getBooleanLikeLabel( settings.jetpack_search_enabled ),
+ },
+ {
+ label: __( 'Newsletter modal' ),
+ value: getBooleanLikeLabel( settings.wpcom_subscription_popup_enabled ),
+ },
+ ];
+
+ return (
+
+
+ { __( 'Theme' ) }
+
+
+
+
+ { ! isThumbnailError &&
+ { themeName }
} +
+
+
+
+ );
+}
diff --git a/apps/studio/src/modules/workspaces/components/workspace-preview.tsx b/apps/studio/src/modules/workspaces/components/workspace-preview.tsx
new file mode 100644
index 0000000000..abed838a51
--- /dev/null
+++ b/apps/studio/src/modules/workspaces/components/workspace-preview.tsx
@@ -0,0 +1,541 @@
+import { __ } from '@wordpress/i18n';
+import {
+ chevronLeft,
+ chevronRight,
+ closeSmall,
+ desktop,
+ external,
+ Icon,
+ rotateRight,
+} from '@wordpress/icons';
+import {
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+ type MouseEvent as ReactMouseEvent,
+} from 'react';
+import Button from 'src/components/button';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+import type { WorkspaceTargetId } from 'src/modules/workspaces/types';
+
+const DEFAULT_PREVIEW_WIDTH = 520;
+const MIN_PREVIEW_WIDTH = 360;
+const MAX_PREVIEW_WIDTH = 920;
+const PREVIEW_TOP_OFFSET = 48;
+
+type WorkspacePreviewNavigationAction = 'back' | 'forward';
+
+type WorkspacePreviewWebview = HTMLElement & {
+ canGoBack?: () => boolean;
+ canGoForward?: () => boolean;
+ getURL?: () => string;
+ goBack?: () => void;
+ goForward?: () => void;
+};
+
+function clampPreviewWidth( width: number ) {
+ return Math.min( MAX_PREVIEW_WIDTH, Math.max( MIN_PREVIEW_WIDTH, Math.round( width ) ) );
+}
+
+export type WorkspacePreviewState = {
+ open: boolean;
+ pathOrUrl: string;
+ reloadNonce: number;
+ width: number;
+ canGoBack: boolean;
+ canGoForward: boolean;
+ currentUrl?: string;
+ navigationAction?: WorkspacePreviewNavigationAction;
+ navigationActionId: number;
+};
+
+export type WorkspacePreviewTarget = {
+ siteName: string;
+ siteUrl: string;
+ label?: string;
+ isProduction?: boolean;
+ isLoading?: boolean;
+ onShowPreview?: () => Promise< void > | void;
+};
+
+export type WorkspacePreviewTargetOption = {
+ id: WorkspaceTargetId;
+ label: string;
+ isProduction?: boolean;
+};
+
+type WorkspacePreviewControlsProps = {
+ target: WorkspacePreviewTarget;
+ previewState: WorkspacePreviewState;
+ onUpdatePreviewState: ( state: WorkspacePreviewState ) => void;
+};
+
+type WorkspacePreviewPanelProps = {
+ siteName: string;
+ previewUrl: string;
+ reloadNonce: number;
+ width: number;
+ navigationAction?: WorkspacePreviewNavigationAction;
+ navigationActionId: number;
+ onResize: ( width: number ) => void;
+ onNavigationStateChange: ( state: {
+ canGoBack: boolean;
+ canGoForward: boolean;
+ currentUrl?: string;
+ } ) => void;
+};
+
+type WorkspacePreviewTargetPickerProps = {
+ targets: WorkspacePreviewTargetOption[];
+ selectedTargetId: WorkspaceTargetId;
+ onSelectTarget: ( targetId: WorkspaceTargetId ) => void;
+ ariaLabel: string;
+ variant?: 'url-bar' | 'header';
+};
+
+export const createDefaultWorkspacePreviewState = (): WorkspacePreviewState => ( {
+ open: false,
+ pathOrUrl: '/',
+ reloadNonce: 0,
+ width: DEFAULT_PREVIEW_WIDTH,
+ canGoBack: false,
+ canGoForward: false,
+ navigationActionId: 0,
+} );
+
+export function resolveWorkspacePreviewUrl( siteUrl: string, pathOrUrl: string ) {
+ try {
+ return new URL( pathOrUrl, siteUrl ).toString();
+ } catch {
+ return siteUrl;
+ }
+}
+
+function getTargetToneClassName( target: WorkspacePreviewTargetOption | undefined ) {
+ if ( target?.id === 'production' || target?.isProduction ) {
+ return {
+ dot: 'bg-[#1a6928]',
+ url: 'bg-[#ceead6] text-[#1a6928]',
+ header: 'border-[#9bd3a8] bg-[#ceead6] text-[#1a6928] hover:bg-[#c3e4cc]',
+ };
+ }
+
+ if ( target?.id === 'staging' ) {
+ return {
+ dot: 'bg-[#d97706]',
+ url: 'bg-[#fef0c7] text-[#93590c]',
+ header: 'border-[#d97706]/30 bg-[#fff7df] text-[#93590c] hover:bg-[#fff3cc]',
+ };
+ }
+
+ return {
+ dot: 'bg-frame-text-secondary',
+ url: 'bg-frame-surface text-frame-text-secondary',
+ header: 'border-a8c-gray-5 bg-frame-surface text-frame-text-secondary hover:bg-a8c-gray-0',
+ };
+}
+
+export function WorkspacePreviewTargetPicker( {
+ targets,
+ selectedTargetId,
+ onSelectTarget,
+ ariaLabel,
+ variant = 'url-bar',
+}: WorkspacePreviewTargetPickerProps ) {
+ const selectedTarget = targets.find( ( candidate ) => candidate.id === selectedTargetId );
+ const hasTargetPicker = targets.length > 1;
+ const [ isTargetMenuOpen, setIsTargetMenuOpen ] = useState( false );
+ const toneClassName = getTargetToneClassName( selectedTarget );
+ const isHeaderVariant = variant === 'header';
+ const closeTargetMenu = () => setIsTargetMenuOpen( false );
+ const selectTarget = ( targetId: WorkspaceTargetId ) => {
+ onSelectTarget( targetId );
+ closeTargetMenu();
+ };
+ const basePickerClassName = isHeaderVariant
+ ? `inline-flex h-10 min-w-40 items-center gap-2 rounded border px-3 text-sm font-medium shadow-sm transition focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-frame-theme ${ toneClassName.header }`
+ : `inline-flex h-8 min-w-32 items-center justify-center rounded-full px-3 text-[12px] font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-frame-theme ${ toneClassName.url }`;
+ const pickerContent = (
+ <>
+ { isHeaderVariant && (
+ <>
+
+ { __( 'Viewing' ) }
+
+ ) }
+ { selectedTarget?.label }
+ { hasTargetPicker && ⌄ }
+
+ );
+
+ if ( ! selectedTarget?.label ) {
+ return null;
+ }
+
+ return (
+
+
+ { __( 'Settings' ) }
++ { sprintf( + /* translators: %s is an environment name, such as Production or Staging. */ + __( 'These settings are read from the selected %s site.' ), + getTargetLabel( target ) + ) } +
+
+ { isLoading ? (
+
+ ) : (
+ rows.map( ( row ) => (
+
+
+
+ {
+ if ( ! event.currentTarget.contains( event.relatedTarget ) ) {
+ closeTargetMenu();
+ }
+ } }
+ >
+ { hasTargetPicker ? (
+
+ ) : (
+ { pickerContent }
+ ) }
+ { hasTargetPicker && isTargetMenuOpen && (
+
+ );
+}
+
+export function WorkspacePreviewControls( {
+ target,
+ previewState,
+ onUpdatePreviewState,
+}: WorkspacePreviewControlsProps ) {
+ const previewUrl = resolveWorkspacePreviewUrl( target.siteUrl, previewState.pathOrUrl );
+ const displayUrl = previewState.currentUrl ?? previewUrl;
+ const showPreview = async () => {
+ await target.onShowPreview?.();
+ onUpdatePreviewState( {
+ ...previewState,
+ currentUrl: previewUrl,
+ open: true,
+ } );
+ };
+ const navigatePreview = ( action: WorkspacePreviewNavigationAction ) => {
+ onUpdatePreviewState( {
+ ...previewState,
+ navigationAction: action,
+ navigationActionId: previewState.navigationActionId + 1,
+ } );
+ };
+
+ if ( ! previewState.open ) {
+ return (
+
+ { targets.map( ( candidate ) => (
+
+ ) ) }
+
+ ) }
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export function WorkspacePreviewPanel( {
+ siteName,
+ previewUrl,
+ reloadNonce,
+ width,
+ navigationAction,
+ navigationActionId,
+ onResize,
+ onNavigationStateChange,
+}: WorkspacePreviewPanelProps ) {
+ const [ isResizing, setIsResizing ] = useState( false );
+ const panelRef = useRef< HTMLElement >( null );
+ const webviewRef = useRef< WorkspacePreviewWebview >( null );
+ const isWebviewReady = useRef( false );
+ const handledNavigationActionId = useRef( 0 );
+ const panelWidth = clampPreviewWidth( width );
+
+ const updateNavigationState = useCallback( () => {
+ const webview = webviewRef.current;
+ if ( ! webview || ! isWebviewReady.current ) {
+ onNavigationStateChange( {
+ canGoBack: false,
+ canGoForward: false,
+ currentUrl: previewUrl,
+ } );
+ return;
+ }
+
+ try {
+ onNavigationStateChange( {
+ canGoBack: webview.canGoBack?.() ?? false,
+ canGoForward: webview.canGoForward?.() ?? false,
+ currentUrl: webview.getURL?.() || previewUrl,
+ } );
+ } catch {
+ onNavigationStateChange( {
+ canGoBack: false,
+ canGoForward: false,
+ currentUrl: previewUrl,
+ } );
+ }
+ }, [ onNavigationStateChange, previewUrl ] );
+
+ const resizeToClientX = useCallback(
+ ( clientX: number ) => {
+ const panelRight = panelRef.current?.getBoundingClientRect().right ?? window.innerWidth;
+ const nextWidth = panelRight - clientX;
+ onResize( clampPreviewWidth( nextWidth ) );
+ },
+ [ onResize ]
+ );
+
+ const handleMouseMove = useCallback(
+ ( event: MouseEvent ) => {
+ resizeToClientX( event.clientX );
+ },
+ [ resizeToClientX ]
+ );
+
+ const startResizing = useCallback(
+ ( event: ReactMouseEvent< HTMLElement > ) => {
+ event.preventDefault();
+ resizeToClientX( event.clientX );
+ setIsResizing( true );
+ },
+ [ resizeToClientX ]
+ );
+
+ const stopResizing = useCallback( () => {
+ setIsResizing( false );
+ }, [] );
+
+ useEffect( () => {
+ if ( ! isResizing ) {
+ return;
+ }
+
+ document.body.style.cursor = 'col-resize';
+ document.body.style.userSelect = 'none';
+ window.addEventListener( 'mousemove', handleMouseMove );
+ window.addEventListener( 'mouseup', stopResizing );
+ window.addEventListener( 'blur', stopResizing );
+
+ return () => {
+ document.body.style.cursor = '';
+ document.body.style.userSelect = '';
+ window.removeEventListener( 'mousemove', handleMouseMove );
+ window.removeEventListener( 'mouseup', stopResizing );
+ window.removeEventListener( 'blur', stopResizing );
+ };
+ }, [ handleMouseMove, isResizing, stopResizing ] );
+
+ const resizeBy = ( delta: number ) => {
+ onResize( clampPreviewWidth( panelWidth + delta ) );
+ };
+
+ useEffect( () => {
+ if ( ! navigationAction || navigationActionId === handledNavigationActionId.current ) {
+ return;
+ }
+
+ const webview = webviewRef.current;
+ if ( webview && isWebviewReady.current ) {
+ try {
+ if ( navigationAction === 'back' && webview.canGoBack?.() ) {
+ webview.goBack?.();
+ }
+ if ( navigationAction === 'forward' && webview.canGoForward?.() ) {
+ webview.goForward?.();
+ }
+ } catch {
+ updateNavigationState();
+ }
+ }
+ handledNavigationActionId.current = navigationActionId;
+ }, [ navigationAction, navigationActionId, updateNavigationState ] );
+
+ useEffect( () => {
+ const webview = webviewRef.current;
+ if ( ! webview ) {
+ return;
+ }
+
+ isWebviewReady.current = false;
+ const updateState = () => updateNavigationState();
+ const handleDomReady = () => {
+ isWebviewReady.current = true;
+ updateNavigationState();
+ };
+ const events = [ 'did-finish-load', 'did-navigate', 'did-navigate-in-page' ];
+ webview.addEventListener( 'dom-ready', handleDomReady );
+ events.forEach( ( eventName ) => webview.addEventListener( eventName, updateState ) );
+ updateNavigationState();
+
+ return () => {
+ isWebviewReady.current = false;
+ webview.removeEventListener( 'dom-ready', handleDomReady );
+ events.forEach( ( eventName ) => webview.removeEventListener( eventName, updateState ) );
+ };
+ }, [ reloadNonce, updateNavigationState ] );
+
+ return (
+
+
+
+
+
+
+ { displayUrl }
+
+
+