Skip to content

Commit 431e62a

Browse files
wellyshenWelly Shen
authored and
heydemoura
committed
AI-807: Integrate the show-component ability (#107900)
* AI-807: Integrate the show-component ability * Pass `getAgentManager()` * Add custom `setIsThinking()` action * Implement `deleteMarkedMessages()` action * Fix: Broken saving confirmation panel * Fix: Font picker styles * Filter the `LOCAL_TOOL_RUNNING_MESSAGE` out * Fix: Font picker border-radius * Merge `registerCustomActions` with `useAbilitiesSetup` * Update comment * Perf: Memo `visibleMessages` variable * Use agent `suggestions` for the empty view as well * Address `clearSuggestions` case * Address GH review feedback --------- Co-authored-by: Welly Shen <[email protected]>
1 parent 65e2041 commit 431e62a

File tree

4 files changed

+75
-34
lines changed

4 files changed

+75
-34
lines changed

‎packages/agents-manager/src/components/agent-dock/index.tsx‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ import {
1010
} from '@automattic/agenttic-ui';
1111
import { useManagedOdieChat } from '@automattic/odie-client';
1212
import { useDispatch, useSelect } from '@wordpress/data';
13+
import { useState, useMemo } from '@wordpress/element';
1314
import { __ } from '@wordpress/i18n';
1415
import { comment, drawerRight, login } from '@wordpress/icons';
1516
import { Routes, Route, Navigate, useLocation, useNavigate } from 'react-router-dom';
17+
import { LOCAL_TOOL_RUNNING_MESSAGE } from '../../constants';
1618
import useAdminBarIntegration from '../../hooks/use-admin-bar-integration';
1719
import useAgentLayoutManager from '../../hooks/use-agent-layout-manager';
1820
import useConversation from '../../hooks/use-conversation';
@@ -46,7 +48,7 @@ interface AgentDockProps {
4648
markdownExtensions?: MarkdownExtensions;
4749
/** Navigation continuation hook for post-navigation conversation resumption. */
4850
useNavigationContinuation?: NavigationContinuationHook;
49-
/** Setup hook to register hook-dependent abilities. */
51+
/** Hook for setting up abilities that utilize React context. Invoked after custom actions registration. */
5052
useAbilitiesSetup?: AbilitiesSetupHook;
5153
}
5254

@@ -61,6 +63,8 @@ export default function AgentDock( {
6163
useNavigationContinuation,
6264
useAbilitiesSetup,
6365
}: AgentDockProps ) {
66+
const [ isThinking, setIsThinking ] = useState( false );
67+
const [ deletedMessageIds, setDeletedMessageIds ] = useState< Set< string > >( new Set() );
6468
const { setIsOpen, setIsDocked } = useDispatch( AGENTS_MANAGER_STORE );
6569
const {
6670
hasLoaded: isStoreReady,
@@ -86,13 +90,15 @@ export default function AgentDock( {
8690
} );
8791

8892
const {
93+
addMessage,
8994
messages,
9095
suggestions,
9196
isProcessing,
9297
error,
9398
loadMessages,
9499
onSubmit,
95100
abortCurrentRequest,
101+
clearSuggestions,
96102
} = useAgentChat( agentConfig );
97103

98104
const {
@@ -136,9 +142,20 @@ export default function AgentDock( {
136142
navigate,
137143
} );
138144

139-
// Call setup hook to register hook-dependent abilities
140-
// The hook is stable after loadedProviders is set (AgentDock only renders after providers load)
141-
useAbilitiesSetup?.();
145+
// Invoke abilities setup hook to register hook-based abilities that utilize React context.
146+
// Provides custom action handlers for agent and chat interaction within Big Sky's AI store.
147+
// The hook is stable as `AgentDock` only renders after external providers have been loaded.
148+
useAbilitiesSetup?.( {
149+
addMessage,
150+
clearSuggestions,
151+
getAgentManager,
152+
setIsThinking,
153+
deleteMarkedMessages: ( msgs ) => {
154+
setDeletedMessageIds(
155+
( prevIds ) => new Set( [ ...prevIds, ...msgs.map( ( msg ) => msg.id ) ] )
156+
);
157+
},
158+
} );
142159

143160
const handleNewChat = () => {
144161
navigate( '/' );
@@ -161,13 +178,6 @@ export default function AgentDock( {
161178
icon: login,
162179
title: __( 'Pop out sidebar', '__i18n_text_domain__' ),
163180
onClick: () => {
164-
// TODO: Persist floating chat position...
165-
try {
166-
window.localStorage?.setItem( 'agenttic-chat-position', 'right' );
167-
} catch ( err ) {
168-
// Ignore errors
169-
}
170-
171181
undock();
172182
setIsDocked( false );
173183
},
@@ -192,11 +202,23 @@ export default function AgentDock( {
192202
return options;
193203
};
194204

205+
// Filter out deleted messages and local tool running messages
206+
const visibleMessages = useMemo(
207+
() =>
208+
messages.filter(
209+
( message ) =>
210+
! deletedMessageIds.has( message.id ) &&
211+
! message.content?.some( ( content ) => content?.text === LOCAL_TOOL_RUNNING_MESSAGE )
212+
),
213+
[ messages, deletedMessageIds ]
214+
);
215+
195216
const Chat = (
196217
<AgentChat
197-
messages={ messages }
218+
messages={ visibleMessages }
198219
suggestions={ suggestions }
199-
isProcessing={ isProcessing }
220+
emptyViewSuggestions={ suggestions.length ? suggestions : emptyViewSuggestions }
221+
isProcessing={ isProcessing || isThinking }
200222
error={ error }
201223
onSubmit={ onSubmit }
202224
onAbort={ abortCurrentRequest }
@@ -208,7 +230,6 @@ export default function AgentDock( {
208230
chatHeaderOptions={ getChatHeaderOptions() }
209231
markdownComponents={ markdownComponents }
210232
markdownExtensions={ markdownExtensions }
211-
emptyViewSuggestions={ emptyViewSuggestions }
212233
/>
213234
);
214235

‎packages/agents-manager/src/constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@ export const API_BASE_URL = 'https://public-api.wordpress.com';
22

33
export const ORCHESTRATOR_AGENT_URL = `${ API_BASE_URL }/wpcom/v2/ai/agent`;
44
export const ORCHESTRATOR_AGENT_ID = 'wp-orchestrator';
5+
6+
export const LOCAL_TOOL_RUNNING_MESSAGE = 'local_tool_running';

‎packages/agents-manager/src/hooks/use-agent-layout-manager/style.scss‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ $agents-manager-z-index-docked: 999999;
6666
}
6767

6868
// Reposition the editor's template save confirmation panel
69-
@mixin editor-save-panel-open( $save-panel-selector ) {
70-
#{$save-panel-selector} {
69+
@mixin editor-save-panel-open() {
70+
.admin-ui-navigable-region.interface-interface-skeleton__actions {
7171
margin: $layout-spacing 0;
7272
right: $sidebar-width;
7373
overflow: hidden;
@@ -258,9 +258,7 @@ body.next-admin.agents-manager-sidebar-container {
258258

259259
&.agents-manager-sidebar-container--sidebar-open {
260260
@include sidebar-open-base( '.next-admin-layout__canvas.is-full-canvas' );
261-
@include editor-save-panel-open(
262-
'.admin-ui-navigable-region.interface-interface-skeleton__actions'
263-
);
261+
@include editor-save-panel-open();
264262
}
265263
}
266264

@@ -275,9 +273,7 @@ body.site-editor-php.agents-manager-sidebar-container {
275273

276274
&.agents-manager-sidebar-container--sidebar-open {
277275
@include sidebar-open-base( '.edit-site-layout__canvas' );
278-
@include editor-save-panel-open(
279-
'.interface-navigable-region.interface-interface-skeleton__actions'
280-
);
276+
@include editor-save-panel-open();
281277

282278
// Override canvas styles when the site editor navigation menu is open
283279
.edit-site-layout:not( .is-full-canvas ) .edit-site-layout__canvas {
@@ -297,9 +293,7 @@ body.post-php.agents-manager-sidebar-container {
297293

298294
&.agents-manager-sidebar-container--sidebar-open {
299295
@include sidebar-open-base( '.edit-post-layout' );
300-
@include editor-save-panel-open(
301-
'.interface-navigable-region.interface-interface-skeleton__actions'
302-
);
296+
@include editor-save-panel-open();
303297
}
304298
}
305299

@@ -506,8 +500,6 @@ body.post-php.agents-manager-sidebar-container {
506500
.edit-site-global-styles-variations_item-preview {
507501
outline: 1px solid $gray-400;
508502
outline-offset: 1px;
509-
outline-color: #ccc;
510-
outline-width: -wp-admin-border-width-focus;
511503
}
512504
}
513505

@@ -518,7 +510,7 @@ body.post-php.agents-manager-sidebar-container {
518510
}
519511

520512
.edit-site-global-styles-variations_item-preview {
521-
outline-color: #545454;
513+
outline: 1px solid #545454;
522514
overflow: hidden;
523515
}
524516
}
@@ -696,4 +688,24 @@ body.post-php.agents-manager-sidebar-container {
696688
.agents-manager-chat--undocked .agenttic.Chat-module_container.Chat-module_floating {
697689
// Fix the undocked chat overlapping with the nav menu
698690
z-index: 9999;
691+
692+
.big-sky__dock__menu__variation-picker .edit-site-global-styles-variations_item {
693+
&.is-active,
694+
&:focus-visible {
695+
.edit-site-global-styles-variations_item-preview {
696+
outline: 1px solid #0000001a;
697+
}
698+
}
699+
700+
&:not( .is-active ):hover {
701+
.edit-site-global-styles-variations_item-preview {
702+
outline-color: #00000080;
703+
}
704+
}
705+
706+
.edit-site-global-styles-variations_item-preview {
707+
outline: 1px solid #0000004d;
708+
overflow: hidden;
709+
}
710+
}
699711
}

‎packages/agents-manager/src/utils/load-external-providers.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
* PHP filter. Each provider module should export toolProvider and/or contextProvider.
66
*/
77

8+
import { getAgentManager } from '@automattic/agenttic-client';
89
import type { ToolProvider, ContextProvider, Suggestion } from '../types';
9-
import type { SubmitOptions } from '@automattic/agenttic-client';
10+
import type { SubmitOptions, UseAgentChatReturn } from '@automattic/agenttic-client';
1011
import type { MarkdownComponents, MarkdownExtensions } from '@automattic/agenttic-ui';
1112

1213
/**
1314
* Check if the unified experience flag is set via agentsManagerData.
1415
*
1516
* This is used on wp-admin environments (Atomic, Garden, Simple sites) where
1617
* the flag is injected server-side by Jetpack's Agents Manager.
17-
*
1818
* @returns The useUnifiedExperience value, or undefined if not available.
1919
*/
2020
export function getUseUnifiedExperienceFromInlineData(): boolean | undefined {
@@ -37,11 +37,17 @@ export type NavigationContinuationHook = ( props: {
3737
} ) => void;
3838

3939
/**
40-
* Abilities setup hook type - provided by environments that need to register
41-
* hook-dependent abilities (abilities that require React context to work).
42-
* Called from AgentDock component to provide React context.
40+
* Abilities setup hook type - for registering hook-based abilities that utilize React
41+
* context. Invoked after custom actions registration with Big Sky's AI store. Receives
42+
* action handlers that will be used for agent and chat interaction.
4343
*/
44-
export type AbilitiesSetupHook = () => void;
44+
export type AbilitiesSetupHook = ( actions: {
45+
addMessage: UseAgentChatReturn[ 'addMessage' ];
46+
clearSuggestions: UseAgentChatReturn[ 'clearSuggestions' ];
47+
getAgentManager: typeof getAgentManager;
48+
setIsThinking: ( isThinking: boolean ) => void;
49+
deleteMarkedMessages: ( messages: Record< 'id', string >[] ) => void;
50+
} ) => void;
4551

4652
export interface LoadedProviders {
4753
toolProvider?: ToolProvider;

0 commit comments

Comments
 (0)