From 66dcdbf77d09ea5ca984f80beae024ecd40dfb61 Mon Sep 17 00:00:00 2001 From: CGastrell Date: Fri, 27 Oct 2023 14:03:16 +0000 Subject: [PATCH] four-point package releases for videopress and my-jetpack Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/6668037876 --- CHANGELOG.md | 8 --- package.json | 24 +++---- src/data-flow/Readme.md | 20 ++++++ src/data-flow/index.ts | 5 +- src/data-flow/with-ai-assistant-data.tsx | 79 ++++++++++++++++++++++++ 5 files changed, 115 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 389b74c..c60ede9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,13 +5,6 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [0.1.13] - 2023-10-23 -### Changed -- Updated package dependencies. [#33687] - -### Removed -- AI Client: Remove obsolete blockListBlockWithAiDataProvider() HOC component. [#33726] - ## [0.1.12] - 2023-10-16 ### Changed - Updated package dependencies. [#33584] @@ -151,7 +144,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Updated package dependencies. [#31659] - Updated package dependencies. [#31785] -[0.1.13]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.12...v0.1.13 [0.1.12]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.11...v0.1.12 [0.1.11]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.10...v0.1.11 [0.1.10]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.9...v0.1.10 diff --git a/package.json b/package.json index c0b988c..a4ee2ef 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": false, "name": "@automattic/jetpack-ai-client", - "version": "0.1.13", + "version": "0.1.12", "description": "A JS client for consuming Jetpack AI services", "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme", "bugs": { @@ -32,18 +32,18 @@ ".": "./index.ts" }, "dependencies": { - "@automattic/jetpack-base-styles": "^0.6.11", - "@automattic/jetpack-connection": "^0.30.5", - "@automattic/jetpack-shared-extension-utils": "^0.12.4", + "@automattic/jetpack-base-styles": "^0.6.10", + "@automattic/jetpack-connection": "^0.30.3", + "@automattic/jetpack-shared-extension-utils": "^0.12.3", "@microsoft/fetch-event-source": "2.0.1", - "@wordpress/api-fetch": "6.41.0", - "@wordpress/block-editor": "12.12.0", - "@wordpress/components": "25.10.0", - "@wordpress/compose": "6.21.0", - "@wordpress/data": "9.14.0", - "@wordpress/element": "5.21.0", - "@wordpress/i18n": "4.44.0", - "@wordpress/icons": "9.35.0", + "@wordpress/api-fetch": "6.40.0", + "@wordpress/block-editor": "12.11.0", + "@wordpress/components": "25.9.0", + "@wordpress/compose": "6.20.0", + "@wordpress/data": "9.13.0", + "@wordpress/element": "5.20.0", + "@wordpress/i18n": "4.43.0", + "@wordpress/icons": "9.34.0", "classnames": "2.3.2", "debug": "4.3.4", "react": "18.2.0", diff --git a/src/data-flow/Readme.md b/src/data-flow/Readme.md index 4bd9887..60da415 100644 --- a/src/data-flow/Readme.md +++ b/src/data-flow/Readme.md @@ -33,6 +33,7 @@ export default withAiAssistantData( MyComponent ); * [AI Data Context](#ai-assistant-content) * [withAiDataProvider HOC](#with-ai-data-provider) +* [blockListBlockWithAiDataProvider](#block-list-block-with-ai-data-provider) * [useAiContext Hook](#use-ai-context)

Ai Data Context

@@ -115,6 +116,25 @@ These callbacks will be invoked with the detail of the corresponding event emitt When called, the hook returns the Ai Data Context. +

blockListBlockWithAiDataProvider Function

+ +The `blockListBlockWithAiDataProvider` function returns a Higher Order Component (HOC) that wraps and provides the AI Assistant Data context to a specified set of blocks. Primarily designed for use with the `editor.BlockListBlock` filter in the WordPress Block Editor, it conditionally applies the data provider only to block types specified in the function options. + +### Usage + +To use the `blockListBlockWithAiDataProvider`, you'll need to specify which blocks should have access to the AI Assistant Data context: + +```jsx +import { blockListBlockWithAiDataProvider } from '@automattic/jetpack-ai-client'; + +// Example usage with WordPress filters +const enhancedBlockListBlock = blockListBlockWithAiDataProvider( { + blocks: [ 'core/paragraph', 'core/heading' ] +} ); + +wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-ai-data', enhancedBlockListBlock ); +``` + ### Parameters The function accepts an optional options object: diff --git a/src/data-flow/index.ts b/src/data-flow/index.ts index 5286027..fb63844 100644 --- a/src/data-flow/index.ts +++ b/src/data-flow/index.ts @@ -1,3 +1,6 @@ export { AiDataContext, AiDataContextProvider } from './context'; -export { default as withAiDataProvider } from './with-ai-assistant-data'; +export { + default as withAiDataProvider, + blockListBlockWithAiDataProvider, +} from './with-ai-assistant-data'; export { default as useAiContext } from './use-ai-context'; diff --git a/src/data-flow/with-ai-assistant-data.tsx b/src/data-flow/with-ai-assistant-data.tsx index bf72ba1..f128df8 100644 --- a/src/data-flow/with-ai-assistant-data.tsx +++ b/src/data-flow/with-ai-assistant-data.tsx @@ -59,3 +59,82 @@ const withAiDataProvider = createHigherOrderComponent( ( WrappedComponent: React }, 'withAiDataProvider' ); export default withAiDataProvider; + +type OptionsProps = { + /** + * Array of block names to apply the data provider to. + */ + blocks: string[] | string; +}; + +/** + * Function that returns a High Order Component that provides the + * AI Assistant Data context to the wrapped component. + * + * Ideally though to use with the `editor.BlockListBlock` filter. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#editor-blocklistblock + * @param {OptionsProps} options - Options + * @param {string[]} options.blocks - Array of block names to apply the data provider to. + * @returns {ReactNode} Wrapped component, populated with the AI Assistant Data context. + */ +export const blockListBlockWithAiDataProvider = ( options: OptionsProps = { blocks: [ '' ] } ) => { + return createHigherOrderComponent( ( WrappedComponent: ReactNode ) => { + return props => { + const blockName = props?.block?.name; + if ( ! blockName ) { + return ; + } + + /* + * Extend only blocks that are specified in the blocks option. + * `blocks` option accepts a string or an array of strings. + */ + const blockTypesToExtend = Array.isArray( options.blocks ) + ? options.blocks + : [ options.blocks ]; + + if ( ! blockTypesToExtend.includes( blockName ) ) { + return ; + } + + // Connect with the AI Assistant communication layer. + // @todo: this is a copy of the code above, we should refactor this. + const { + suggestion, + error: requestingError, + requestingState, + request: requestSuggestion, + stopSuggestion, + eventSource, + } = useAiSuggestions(); + + // Build the context value to pass to the ai assistant data provider. + const dataContextValue = useMemo( + () => ( { + suggestion, + requestingError, + requestingState, + eventSource, + + requestSuggestion, + stopSuggestion, + } ), + [ + suggestion, + requestingError, + requestingState, + eventSource, + requestSuggestion, + stopSuggestion, + ] + ); + + return ( + + + + ); + }; + }, 'blockListBlockWithAiDataProvider' ); +};