@automattic/jetpack-ai-client 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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.4.0] - 2024-01-15
+### Added
+- AI Client: introduce bannerComponent prop, React.Element, to render on top of the AI Control [#34918]
+
+### Fixed
+- Jetpack AI: Check for post id type and only include numbers [#34974]
+
+## [0.3.1] - 2024-01-04
+### Changed
+- Updated package dependencies. [#34815]
+
 ## [0.3.0] - 2023-12-20
 ### Changed
 - AI Client: improved usability with new block positioning, prompt and suggestion action buttons. [#34383]
@@ -176,6 +187,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.4.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.3.1...v0.4.0
+[0.3.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.2.1...v0.3.0
 [0.2.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.16...v0.2.0

package/build/components/ai-control/index.d.ts

@@ -24,6 +24,7 @@ type AiControlProps = {
     onAccept?: () => void;
     onDiscard?: () => void;
     showRemove?: boolean;
+    bannerComponent?: React.ReactElement;
 };
 /**
  * AI Control component.
@@ -32,6 +33,6 @@ type AiControlProps = {
  * @param {React.MutableRefObject} ref - Ref to the component.
  * @returns {React.ReactElement}         Rendered component.
  */
-export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, }: AiControlProps, ref: React.MutableRefObject<null>): React.ReactElement;
+export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, bannerComponent, }: AiControlProps, ref: React.MutableRefObject<null>): React.ReactElement;
 declare const _default: React.ForwardRefExoticComponent<AiControlProps & React.RefAttributes<null>>;
 export default _default;

package/build/components/ai-control/index.js

@@ -25,7 +25,7 @@ const noop = () => { };
  * @param {React.MutableRefObject} ref - Ref to the component.
  * @returns {React.ReactElement}         Rendered component.
  */
-export function AIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange = noop, onSend = noop, onStop = noop, onAccept = noop, onDiscard = null, showRemove = false, }, ref // eslint-disable-line @typescript-eslint/ban-types
+export function AIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange = noop, onSend = noop, onStop = noop, onAccept = noop, onDiscard = null, showRemove = false, bannerComponent = null, }, ref // eslint-disable-line @typescript-eslint/ban-types
 ) {
     const promptUserInputRef = useRef(null);
     const loading = state === 'requesting' || state === 'suggesting';
@@ -81,7 +81,7 @@ export function AIControl({ disabled = false, value = '', placeholder = '', show
     }, {
         target: promptUserInputRef,
     });
-    return (_jsx("div", { className: "jetpack-components-ai-control__container-wrapper", children: _jsxs("div", { className: "jetpack-components-ai-control__container", children: [_jsxs("div", { className: classNames('jetpack-components-ai-control__wrapper', {
+    return (_jsx("div", { className: "jetpack-components-ai-control__container-wrapper", children: _jsxs("div", { className: "jetpack-components-ai-control__container", children: [bannerComponent, _jsxs("div", { className: classNames('jetpack-components-ai-control__wrapper', {
                         'is-transparent': isTransparent,
                     }), children: [_jsx(AiStatusIndicator, { state: state }), _jsx("div", { className: "jetpack-components-ai-control__input-wrapper", children: _jsx(PlainText, { value: value, onChange: changeHandler, placeholder: placeholder, className: "jetpack-components-ai-control__input", disabled: loading || disabled, ref: promptUserInputRef }) }), (!showAccept || editRequest) && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: !loading ? (_jsxs(_Fragment, { children: [editRequest && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: cancelEdit, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), showRemove && !editRequest && !value?.length && onDiscard && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: discardHandler, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), value?.length > 0 && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: sendRequest, variant: "primary", disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Generate', 'jetpack-ai-client')) : (_jsx(Icon, { icon: arrowUp })) }))] })) : (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onStop, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Stop', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })) })), showAccept && !editRequest && (_jsxs("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: [(value?.length > 0 || lastValue === null) && (_jsxs(ButtonGroup, { children: [_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Discard', 'jetpack-ai-client'), onClick: discardHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: trash }) }), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Regenerate', 'jetpack-ai-client'), onClick: () => onSend?.(value), tooltipPosition: "top", disabled: !value?.length || value === null || disabled, children: _jsx(Icon, { icon: reusableBlock }) })] })), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onAccept, variant: "primary", label: acceptLabel, children: showButtonLabels ? acceptLabel : _jsx(Icon, { icon: check }) })] }))] }), showGuideLine && !loading && !editRequest && (customFooter || _jsx(GuidelineMessage, {}))] }) }));
 }

package/build/suggestions-event-source/index.d.ts

@@ -8,7 +8,7 @@ type SuggestionsEventSourceConstructorArgs = {
     question: PromptProp;
     token?: string;
     options?: {
-        postId?: number;
+        postId?: number | string;
         feature?: 'ai-assistant-experimental' | string | undefined;
         fromCache?: boolean;
         functions?: Array<object>;

package/build/suggestions-event-source/index.js

@@ -64,9 +64,9 @@ export default class SuggestionsEventSource extends EventTarget {
             }
         }
         const bodyData = {};
-        // Populate body data with post id
-        if (options?.postId) {
-            bodyData.post_id = options.postId;
+        // Populate body data with post id only if it is an integer
+        if (Number.isInteger(parseInt(options.postId))) {
+            bodyData.post_id = +options.postId;
         }
         // If the url is not provided, we use the default one
         if (!url) {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -38,19 +38,19 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.14",
-		"@automattic/jetpack-connection": "^0.30.11",
-		"@automattic/jetpack-shared-extension-utils": "^0.13.5",
+		"@automattic/jetpack-base-styles": "^0.6.15",
+		"@automattic/jetpack-connection": "^0.30.12",
+		"@automattic/jetpack-shared-extension-utils": "^0.13.8",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.2.33",
-		"@wordpress/api-fetch": "6.44.0",
-		"@wordpress/block-editor": "12.15.0",
-		"@wordpress/components": "25.13.0",
-		"@wordpress/compose": "6.24.0",
-		"@wordpress/data": "9.17.0",
-		"@wordpress/element": "5.24.0",
-		"@wordpress/i18n": "4.47.0",
-		"@wordpress/icons": "9.38.0",
+		"@wordpress/api-fetch": "6.45.0",
+		"@wordpress/block-editor": "12.16.0",
+		"@wordpress/components": "25.14.0",
+		"@wordpress/compose": "6.25.0",
+		"@wordpress/data": "9.18.0",
+		"@wordpress/element": "5.25.0",
+		"@wordpress/i18n": "4.48.0",
+		"@wordpress/icons": "9.39.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"react": "18.2.0",

package/src/components/ai-control/index.tsx

@@ -42,6 +42,7 @@ type AiControlProps = {
 	onAccept?: () => void;
 	onDiscard?: () => void;
 	showRemove?: boolean;
+	bannerComponent?: React.ReactElement;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -72,6 +73,7 @@ export function AIControl(
 		onAccept = noop,
 		onDiscard = null,
 		showRemove = false,
+		bannerComponent = null,
 	}: AiControlProps,
 	ref: React.MutableRefObject< null > // eslint-disable-line @typescript-eslint/ban-types
 ): React.ReactElement {
@@ -153,6 +155,7 @@ export function AIControl(
 	return (
 		<div className="jetpack-components-ai-control__container-wrapper">
 			<div className="jetpack-components-ai-control__container">
+				{ bannerComponent }
 				<div
 					className={ classNames( 'jetpack-components-ai-control__wrapper', {
 						'is-transparent': isTransparent,

package/src/suggestions-event-source/index.ts

@@ -32,7 +32,7 @@ type SuggestionsEventSourceConstructorArgs = {
 	question: PromptProp;
 	token?: string;
 	options?: {
-		postId?: number;
+		postId?: number | string;
 		feature?: 'ai-assistant-experimental' | string | undefined;
 		fromCache?: boolean;
 		functions?: Array< object >;
@@ -117,9 +117,9 @@ export default class SuggestionsEventSource extends EventTarget {
 			model?: AiModelTypeProp;
 		} = {};
 
-		// Populate body data with post id
-		if ( options?.postId ) {
-			bodyData.post_id = options.postId;
+		// Populate body data with post id only if it is an integer
+		if ( Number.isInteger( parseInt( options.postId as string ) ) ) {
+			bodyData.post_id = +options.postId;
 		}
 
 		// If the url is not provided, we use the default one