Skip to content

Agent Manager: add admin bar icon #46343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
johngodley wants to merge 2 commits into
base: trunk
Choose a base branch
from
+144 −0
Open

Agent Manager: add admin bar icon #46343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
baffd59
Agent Manager: add admin bar icon
johngodley Dec 17, 2025
17c42fa
Retain existing tooltip
johngodley Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/jetpack-mu-wpcom/changelog/add-agents-manager-admin-bar-menu
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Add Agents Manager admin bar menu with icon support and menu panel integration
140 changes: 140 additions & 0 deletions projects/packages/jetpack-mu-wpcom/src/features/agents-manager/class-agents-manager.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,150 @@ public function __construct() {
add_filter( 'agents_manager_use_unified_experience', array( $this, 'should_use_unified_experience' ) );
}

/**
* Check if the agents manager menu panel should be displayed.
*
* @return bool True if the menu panel should be displayed.
*/
public function should_display_menu_panel() {
return $this->should_use_unified_experience();
}

/**
* Get the SVG icon markup for a given icon name.
*
* @param string $icon_name The name of the icon to retrieve.
* @return string The SVG markup.
*/
private function get_icon( $icon_name ) {
$icons = array(
'comment' => '<svg class="help-center-menu-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 4H6c-1.1 0-2 .9-2 2v12.9c0 .6.5 1.1 1.1 1.1.3 0 .5-.1.8-.3L8.5 17H18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 11c0 .3-.2.5-.5.5H7.9l-2.4 2.4V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v9z" /></svg>',
'backup' => '<svg class="help-center-menu-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.5 12h1.75l-2.5 3-2.5-3H4a8 8 0 113.134 6.35l.907-1.194A6.5 6.5 0 105.5 12zm9.53 1.97l-2.28-2.28V8.5a.75.75 0 00-1.5 0V12a.747.747 0 00.218.529l1.282-.84-1.28.842 2.5 2.5a.75.75 0 101.06-1.061z" /></svg>',
'page' => '<svg class="help-center-menu-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z" /><path d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z" /></svg>',
'video' => '<svg class="help-center-menu-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.7 3H5.3C4 3 3 4 3 5.3v13.4C3 20 4 21 5.3 21h13.4c1.3 0 2.3-1 2.3-2.3V5.3C21 4 20 3 18.7 3zm.8 15.7c0 .4-.4.8-.8.8H5.3c-.4 0-.8-.4-.8-.8V5.3c0-.4.4-.8.8-.8h13.4c.4 0 .8.4.8.8v13.4zM10 15l5-3-5-3v6z" /></svg>',
'rss' => '<svg class="help-center-menu-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 10.2h-.8v1.5H5c1.9 0 3.8.8 5.1 2.1 1.4 1.4 2.1 3.2 2.1 5.1v.8h1.5V19c0-2.3-.9-4.5-2.6-6.2-1.6-1.6-3.8-2.6-6.1-2.6zm10.4-1.6C12.6 5.8 8.9 4.2 5 4.2h-.8v1.5H5c3.5 0 6.9 1.4 9.4 3.9s3.9 5.8 3.9 9.4v.8h1.5V19c0-3.9-1.6-7.6-4.4-10.4zM4 20h3v-3H4v3z" /></svg>',
);

return $icons[ $icon_name ] ?? '';
}

/**
* Add the agents manager menu panel to the admin bar.
*
* @param \WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance.
*/
public function add_menu_panel( $wp_admin_bar ) {
// Add chat support group
$wp_admin_bar->add_group(
array(
'parent' => 'agents-manager',
'id' => 'agents-manager-menu-panel-chat',
'meta' => array(
'class' => 'ab-sub-secondary',
),
)
);

// Add chat support menu item
$wp_admin_bar->add_node(
array(
'parent' => 'agents-manager-menu-panel-chat',
'id' => 'agents-manager-chat-support',
'title' => $this->get_icon( 'comment' ) . '<span>' . __( 'Chat support', 'jetpack-mu-wpcom' ) . '</span>',
)
);

// Add chat history menu item
$wp_admin_bar->add_node(
array(
'parent' => 'agents-manager-menu-panel-chat',
'id' => 'agents-manager-chat-history',
'title' => $this->get_icon( 'backup' ) . '<span>' . __( 'Chat history', 'jetpack-mu-wpcom' ) . '</span>',
)
);

// Add links group
$wp_admin_bar->add_group(
array(
'parent' => 'agents-manager',
'id' => 'agents-manager-menu-panel-links',
'meta' => array(
'class' => 'ab-sub-secondary',
),
)
);

// Add support guides menu item
$wp_admin_bar->add_node(
array(
'parent' => 'agents-manager-menu-panel-links',
'id' => 'agents-manager-support-guides',
'title' => $this->get_icon( 'page' ) . '<span>' . __( 'Support guides', 'jetpack-mu-wpcom' ) . '</span>',
)
);

// Add courses menu item
$wp_admin_bar->add_node(
array(
'parent' => 'agents-manager-menu-panel-links',
'id' => 'agents-manager-courses',
'title' => $this->get_icon( 'video' ) . '<span>' . __( 'Courses', 'jetpack-mu-wpcom' ) . '</span>',
'href' => 'https://wordpress.com/support/courses/',
'meta' => array(
'target' => '_blank',
),
)
);

// Add product updates menu item
$wp_admin_bar->add_node(
array(
'parent' => 'agents-manager-menu-panel-links',
'id' => 'agents-manager-product-updates',
'title' => $this->get_icon( 'rss' ) . '<span>' . __( 'Product updates', 'jetpack-mu-wpcom' ) . '</span>',
'href' => 'https://wordpress.com/blog/category/product-features/',
'meta' => array(
'target' => '_blank',
),
)
);
}

/**
* Add inline script data for the Agents Manager.
*/
public function add_inline_script() {
if ( $this->should_display_menu_panel() ) {
add_action(
'admin_bar_menu',
function ( $wp_admin_bar ) {
// Remove the help-center menu item
$wp_admin_bar->remove_node( 'help-center' );

// Add the main agents manager menu node
$wp_admin_bar->add_menu(
array(
'id' => 'agents-manager',
'title' => '<span title="' . __( 'Help Center', 'jetpack-mu-wpcom' ) . '"><svg id="agents-manager-icon" class="ab-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-1 16v-2h2v2h-2zm2-3v-1.141A3.991 3.991 0 0016 10a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2z" />
</svg></span>',
'parent' => 'top-secondary',
'meta' => array(
'html' => '<div id="agents-manager-masterbar" />',
'class' => 'menupop',
'target' => '_blank',
),
)
);
},
// Add the agents manager icon to the admin bar after the help center is added, so we can remove it.
100
);

// Initialize the agents manager menu panel
add_action( 'admin_bar_menu', array( $this, 'add_menu_panel' ), 100 );
}

/**
* Filter to register agent provider modules for the Agents Manager.
*
Expand Down
Loading