Skip to content
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.

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

Jetpack AI: Only display "turn list into table" menu item for top level lists #40177

Merged
merged 4 commits into from
Nov 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: other

Jetpack AI: Only display "turn list into table" menu item for top level lists
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import { aiAssistantIcon } from '@automattic/jetpack-ai-client';
import { MenuItem, MenuGroup, Notice } from '@wordpress/components';
import { select } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { post, postContent, postExcerpt, termDescription, blockTable } from '@wordpress/icons';
import React from 'react';
Expand Down Expand Up @@ -160,6 +161,7 @@ if ( getFeatureAvailability( 'ai-list-to-table-transform' ) ) {
options: {
userPrompt: 'make a table from this list, do not enclose the response in a code block',
alwaysTransformToAIAssistant: true,
rootParentOnly: true,
},
} );
}
Expand All @@ -169,6 +171,7 @@ export type AiAssistantDropdownOnChangeOptionsArgProps = {
language?: string;
userPrompt?: string;
alwaysTransformToAIAssistant?: boolean;
rootParentOnly?: boolean;
};

export type OnRequestSuggestion = (
Expand All @@ -182,6 +185,7 @@ type AiAssistantToolbarDropdownContentProps = {
disabled?: boolean;
onAskAiAssistant: () => void;
onRequestSuggestion: OnRequestSuggestion;
clientId: string;
};

/**
Expand All @@ -191,12 +195,18 @@ type AiAssistantToolbarDropdownContentProps = {
*/
export default function AiAssistantToolbarDropdownContent( {
blockType,
clientId,
disabled = false,
onAskAiAssistant,
onRequestSuggestion,
}: AiAssistantToolbarDropdownContentProps ): ReactElement {
const blockQuickActions = quickActionsList[ blockType ] ?? [];

const { getBlockParents } = select( 'core/block-editor' ) as unknown as {
getBlockParents: ( blockId: string ) => string[];
};
const blockParents = getBlockParents( clientId );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The other option we can do is to always display the transform option and just find the root list and transform the entire thing every time, regardless of where they click AI Assistant.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sounds interesting, do you think is doable without refactoring too much? Can we explore it? UX wise I think it'd be much more comfortable for the user


return (
<>
{ disabled && (
Expand All @@ -218,23 +228,29 @@ export default function AiAssistantToolbarDropdownContent( {
</div>
</MenuItem>

{ [ ...quickActionsList.default, ...blockQuickActions ].map( quickAction => (
<MenuItem
icon={ quickAction?.icon }
iconPosition="left"
key={ `key-${ quickAction.key }` }
onClick={ () => {
onRequestSuggestion(
quickAction.aiSuggestion,
{ ...( quickAction.options ?? {} ) },
quickAction.name
);
} }
disabled={ disabled }
>
<div className="jetpack-ai-assistant__menu-item">{ quickAction.name }</div>
</MenuItem>
) ) }
{ [ ...quickActionsList.default, ...blockQuickActions ]
.filter(
quickAction => ! ( quickAction.options?.rootParentOnly && blockParents.length > 0 )
)
.map( quickAction => {
return (
<MenuItem
icon={ quickAction?.icon }
iconPosition="left"
key={ `key-${ quickAction.key }` }
onClick={ () => {
onRequestSuggestion(
quickAction.aiSuggestion,
{ ...( quickAction.options ?? {} ) },
quickAction.name
);
} }
disabled={ disabled }
>
<div className="jetpack-ai-assistant__menu-item">{ quickAction.name }</div>
</MenuItem>
);
} ) }

<ToneDropdownMenu
onChange={ tone => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,9 +144,12 @@ function AiAssistantBlockToolbarDropdownContent( {
tracks.recordEvent( 'jetpack_ai_assistant_prompt_show', { block_type: blockType } );
};

const [ clientId ] = getSelectedBlockClientIds();

return (
<AiAssistantToolbarDropdownContent
blockType={ blockType }
clientId={ clientId }
onRequestSuggestion={ requestSuggestion }
onAskAiAssistant={ replaceWithAiAssistantBlock }
disabled={ noContent }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,12 @@ function AiAssistantExtensionToolbarDropdownContent( {
handleToolbarButtonClick();
};

const [ clientId ] = getSelectedBlockClientIds();

return (
<AiAssistantToolbarDropdownContent
blockType={ blockType }
clientId={ clientId }
onRequestSuggestion={ handleRequestSuggestion }
onAskAiAssistant={ handleAskAiAssistant }
disabled={ false }
Expand Down
Loading