-
Notifications
You must be signed in to change notification settings - Fork 800
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
AI Assistant: Add partial heading inline extension (#37087)
* export ExtensionAIControl * add types to dropdown content file * remove heading transformative extension when inline extensions are enabled * add with-ai-extension on heading * changelog * bump version
- Loading branch information
Showing
16 changed files
with
589 additions
and
21 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/js-packages/ai-client/changelog/update-jetpack-ai-inline-extensions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: patch | ||
| Type: added | ||
|
|
||
| AI Client: Export ExtensionAIControl |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
projects/plugins/jetpack/changelog/update-jetpack-ai-inline-extensions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: patch | ||
| Type: other | ||
|
|
||
| AI Assistant: Add partial heading inline extension |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
projects/plugins/jetpack/extensions/blocks/ai-assistant/inline-extensions/block-handler.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { HeadingHandler } from './heading'; | ||
| /** | ||
| * Types | ||
| */ | ||
| import type { IBlockHandler } from './types'; | ||
| import type { ExtendedInlineBlockProp } from '../extensions/ai-assistant'; | ||
|
|
||
| const handlers = { | ||
| 'core/heading': HeadingHandler, | ||
| }; | ||
|
|
||
| /** | ||
| * Gets the block handler based on the block type. | ||
| * The block handler is used to handle the request suggestions. | ||
| * @param {ExtendedInlineBlockProp} blockType - The block type. | ||
| * @param {string} clientId - The block client ID. | ||
| * @returns {IBlockHandler} The block handler. | ||
| */ | ||
| export function blockHandler( | ||
| blockType: ExtendedInlineBlockProp, | ||
| clientId: string | ||
| ): IBlockHandler { | ||
| const HandlerClass = handlers[ blockType ]; | ||
|
|
||
| if ( ! HandlerClass ) { | ||
| throw new Error( `No handler found for block type: ${ blockType }` ); | ||
| } | ||
|
|
||
| const handler = new HandlerClass( clientId ); | ||
|
|
||
| return { | ||
| onSuggestion: handler.onSuggestion.bind( handler ), | ||
| }; | ||
| } |
68 changes: 68 additions & 0 deletions
68
.../extensions/blocks/ai-assistant/inline-extensions/components/ai-assistant-input/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /* | ||
| * External dependencies | ||
| */ | ||
| import { ExtensionAIControl } from '@automattic/jetpack-ai-client'; | ||
| import { useState } from '@wordpress/element'; | ||
| import React from 'react'; | ||
| /* | ||
| * Types | ||
| */ | ||
| import type { RequestingErrorProps, RequestingStateProp } from '@automattic/jetpack-ai-client'; | ||
| import type { ReactElement } from 'react'; | ||
|
|
||
| export default function AiAssistantInput( { | ||
| requestingState, | ||
| request, | ||
| stopSuggestion, | ||
| close, | ||
| undo, | ||
| }: { | ||
| clientId?: string; | ||
| postId?: number; | ||
| requestingState: RequestingStateProp; | ||
| requestingError?: RequestingErrorProps; | ||
| suggestion?: string; | ||
| request: ( question: string ) => void; | ||
| stopSuggestion?: () => void; | ||
| close?: () => void; | ||
| undo?: () => void; | ||
| } ): ReactElement { | ||
| const [ value, setValue ] = useState( '' ); | ||
| const disabled = [ 'requesting', 'suggesting' ].includes( requestingState ); | ||
|
|
||
| function handleSend(): void { | ||
| request?.( value ); | ||
| } | ||
|
|
||
| function handleStopSuggestion(): void { | ||
| stopSuggestion?.(); | ||
| } | ||
|
|
||
| function handleClose(): void { | ||
| close?.(); | ||
| } | ||
|
|
||
| function handleUndo(): void { | ||
| undo?.(); | ||
| } | ||
|
|
||
| function handleUpgrade(): void { | ||
| throw new Error( 'Function not implemented.' ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <ExtensionAIControl | ||
| disabled={ disabled } | ||
| value={ value } | ||
| state={ requestingState } | ||
| onChange={ setValue } | ||
| onSend={ handleSend } | ||
| onStop={ handleStopSuggestion } | ||
| onClose={ handleClose } | ||
| onUndo={ handleUndo } | ||
| onUpgrade={ handleUpgrade } | ||
| /> | ||
| </> | ||
| ); | ||
| } |
110 changes: 110 additions & 0 deletions
110
.../blocks/ai-assistant/inline-extensions/components/ai-assistant-toolbar-dropdown/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| /* | ||
| * External dependencies | ||
| */ | ||
| import { aiAssistantIcon } from '@automattic/jetpack-ai-client'; | ||
| import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; | ||
| import { ToolbarButton, Dropdown } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import React from 'react'; | ||
| /* | ||
| * Internal dependencies | ||
| */ | ||
| import AiAssistantToolbarDropdownContent from '../../../components/ai-assistant-toolbar-dropdown/dropdown-content'; | ||
| /* | ||
| * Types | ||
| */ | ||
| import type { OnRequestSuggestion } from '../../../components/ai-assistant-toolbar-dropdown/dropdown-content'; | ||
| import type { ExtendedInlineBlockProp } from '../../../extensions/ai-assistant'; | ||
| import type { ReactElement } from 'react'; | ||
|
|
||
| type AiAssistantExtensionToolbarDropdownContentProps = { | ||
| blockType: ExtendedInlineBlockProp; | ||
| onClose: () => void; | ||
| onAskAiAssistant: () => void; | ||
| onRequestSuggestion: OnRequestSuggestion; | ||
| }; | ||
|
|
||
| /** | ||
| * The dropdown component with logic for the AI Assistant block. | ||
| * @param {AiAssistantExtensionToolbarDropdownContentProps} props - The props. | ||
| * @returns {ReactElement} The React content of the dropdown. | ||
| */ | ||
| function AiAssistantExtensionToolbarDropdownContent( { | ||
| blockType, | ||
| onClose, | ||
| onAskAiAssistant, | ||
| onRequestSuggestion, | ||
| }: AiAssistantExtensionToolbarDropdownContentProps ) { | ||
| const handleRequestSuggestion: OnRequestSuggestion = ( promptType, options ) => { | ||
| onRequestSuggestion?.( promptType, options ); | ||
| onClose?.(); | ||
| }; | ||
|
|
||
| const handleAskAiAssistant = () => { | ||
| onAskAiAssistant?.(); | ||
| onClose?.(); | ||
| }; | ||
|
|
||
| return ( | ||
| <AiAssistantToolbarDropdownContent | ||
| blockType={ blockType } | ||
| onRequestSuggestion={ handleRequestSuggestion } | ||
| onAskAiAssistant={ handleAskAiAssistant } | ||
| disabled={ false } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| type AiAssistantExtensionToolbarDropdownProps = { | ||
| blockType: ExtendedInlineBlockProp; | ||
| label?: string; | ||
| onAskAiAssistant: () => void; | ||
| onRequestSuggestion: OnRequestSuggestion; | ||
| }; | ||
|
|
||
| export default function AiAssistantExtensionToolbarDropdown( { | ||
| blockType, | ||
| label = __( 'AI Assistant', 'jetpack' ), | ||
| onAskAiAssistant, | ||
| onRequestSuggestion, | ||
| }: AiAssistantExtensionToolbarDropdownProps ): ReactElement { | ||
| const { tracks } = useAnalytics(); | ||
|
|
||
| const toggleHandler = ( isOpen: boolean ) => { | ||
| if ( isOpen ) { | ||
| tracks.recordEvent( 'jetpack_ai_assistant_extension_toolbar_menu_show', { | ||
| block_type: blockType, | ||
| } ); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Dropdown | ||
| popoverProps={ { | ||
| variant: 'toolbar', | ||
| } } | ||
| renderToggle={ ( { isOpen, onToggle } ) => { | ||
| return ( | ||
| <ToolbarButton | ||
| className="jetpack-ai-assistant__button" | ||
| showTooltip | ||
| onClick={ onToggle } | ||
| aria-haspopup="true" | ||
| aria-expanded={ isOpen } | ||
| label={ label } | ||
| icon={ aiAssistantIcon } | ||
| /> | ||
| ); | ||
| } } | ||
| onToggle={ toggleHandler } | ||
| renderContent={ ( { onClose: onClose } ) => ( | ||
| <AiAssistantExtensionToolbarDropdownContent | ||
| onClose={ onClose } | ||
| blockType={ blockType } | ||
| onAskAiAssistant={ onAskAiAssistant } | ||
| onRequestSuggestion={ onRequestSuggestion } | ||
| /> | ||
| ) } | ||
| /> | ||
| ); | ||
| } |
Oops, something went wrong.