@automattic/jetpack-ai-client 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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.13.1] - 2024-05-13
+### Added
+- AI Client: Add className to AI Control component. [#37322]
+- AI Client: Add "try again" prop on Extension AI Control. [#37250]
+
+### Changed
+- AI Client: Add event to upgrade handler function of Extension AI Control. [#37224]
+
 ## [0.13.0] - 2024-05-06
 ### Added
 - AI Client: Add wrapper ref to AI Control. [#37145]
@@ -306,6 +314,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.13.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.13.0...v0.13.1
 [0.13.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.4...v0.13.0
 [0.12.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.3...v0.12.4
 [0.12.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.2...v0.12.3

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

@@ -6,6 +6,7 @@ import './style.scss';
 import type { RequestingStateProp } from '../../types.js';
 import type { ReactElement } from 'react';
 type AIControlProps = {
+    className?: string;
     disabled?: boolean;
     value: string;
     placeholder?: string;
@@ -25,5 +26,5 @@ type AIControlProps = {
  * @param {AIControlProps} props - Component props
  * @returns {ReactElement}       Rendered component
  */
-export default function AIControl({ disabled, value, placeholder, isTransparent, state, onChange, banner, error, actions, message, promptUserInputRef, wrapperRef, }: AIControlProps): ReactElement;
+export default function AIControl({ className, disabled, value, placeholder, isTransparent, state, onChange, banner, error, actions, message, promptUserInputRef, wrapperRef, }: AIControlProps): ReactElement;
 export {};

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

@@ -15,8 +15,8 @@ import './style.scss';
  * @param {AIControlProps} props - Component props
  * @returns {ReactElement}       Rendered component
  */
-export default function AIControl({ disabled = false, value = '', placeholder = '', isTransparent = false, state = 'init', onChange, banner = null, error = null, actions = null, message = null, promptUserInputRef = null, wrapperRef = null, }) {
-    return (_jsxs("div", { className: "jetpack-components-ai-control__container-wrapper", ref: wrapperRef, children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _jsxs("div", { className: classNames('jetpack-components-ai-control__wrapper', {
+export default function AIControl({ className, disabled = false, value = '', placeholder = '', isTransparent = false, state = 'init', onChange, banner = null, error = null, actions = null, message = null, promptUserInputRef = null, wrapperRef = null, }) {
+    return (_jsxs("div", { className: classNames('jetpack-components-ai-control__container-wrapper', className), ref: wrapperRef, children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _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: onChange, placeholder: placeholder, className: "jetpack-components-ai-control__input", disabled: disabled, ref: promptUserInputRef }) }), actions] }), message] })] }));
 }

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

@@ -4,8 +4,9 @@ import './style.scss';
  * Types
  */
 import type { RequestingStateProp } from '../../types.js';
-import type { ReactElement } from 'react';
+import type { ReactElement, MouseEvent } from 'react';
 type ExtensionAIControlProps = {
+    className?: string;
     disabled?: boolean;
     value: string;
     placeholder?: string;
@@ -22,7 +23,8 @@ type ExtensionAIControlProps = {
     onStop?: () => void;
     onClose?: () => void;
     onUndo?: () => void;
-    onUpgrade?: () => void;
+    onUpgrade?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onTryAgain?: () => void;
 };
 /**
  * ExtensionAIControl component. Used by the AI Assistant inline extensions, adding logic and components to the base AIControl component.
@@ -31,6 +33,6 @@ type ExtensionAIControlProps = {
  * @param {React.MutableRefObject} ref     - Ref to the component
  * @returns {ReactElement}                 Rendered component
  */
-export declare function ExtensionAIControl({ disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
+export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }: ExtensionAIControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
 declare const _default: React.ForwardRefExoticComponent<ExtensionAIControlProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

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

@@ -21,7 +21,7 @@ import './style.scss';
  * @param {React.MutableRefObject} ref     - Ref to the component
  * @returns {ReactElement}                 Rendered component
  */
-export function ExtensionAIControl({ disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, }, ref) {
+export function ExtensionAIControl({ className, disabled = false, value = '', placeholder = '', showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, error, requestsRemaining, showUpgradeMessage = false, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, }, ref) {
     const loading = state === 'requesting' || state === 'suggesting';
     const [editRequest, setEditRequest] = useState(false);
     const [lastValue, setLastValue] = useState(value || null);
@@ -61,9 +61,12 @@ export function ExtensionAIControl({ disabled = false, value = '', placeholder =
     const undoHandler = useCallback(() => {
         onUndo?.();
     }, [onUndo]);
-    const upgradeHandler = useCallback(() => {
-        onUpgrade?.();
+    const upgradeHandler = useCallback((event) => {
+        onUpgrade?.(event);
     }, [onUpgrade]);
+    const tryAgainHandler = useCallback(() => {
+        onTryAgain?.();
+    }, [onTryAgain]);
     useKeyboardShortcut('enter', e => {
         e.preventDefault();
         sendHandler();
@@ -73,7 +76,7 @@ export function ExtensionAIControl({ disabled = false, value = '', placeholder =
     const actions = (_jsx(_Fragment, { children: loading ? (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: stopHandler, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? __('Stop', 'jetpack-ai-client') : _jsx(Icon, { icon: closeSmall }) })) : (_jsxs(_Fragment, { children: [value?.length > 0 && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: sendHandler, variant: "primary", disabled: !value?.length || disabled, label: __('Send request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Generate', 'jetpack-ai-client')) : (_jsx(Icon, { icon: arrowUp })) }) })), value?.length <= 0 && state === 'done' && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsxs(ButtonGroup, { children: [_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Undo', 'jetpack-ai-client'), onClick: undoHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: undo }) }), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Close', 'jetpack-ai-client'), onClick: closeHandler, variant: "tertiary", children: __('Close', 'jetpack-ai-client') })] }) }))] })) }));
     let message = null;
     if (error) {
-        message = _jsx(ErrorMessage, { error: error, onTryAgainClick: sendHandler });
+        message = _jsx(ErrorMessage, { error: error, onTryAgainClick: tryAgainHandler });
     }
     else if (showUpgradeMessage) {
         message = (_jsx(UpgradeMessage, { requestsRemaining: requestsRemaining, onUpgradeClick: upgradeHandler }));
@@ -81,6 +84,6 @@ export function ExtensionAIControl({ disabled = false, value = '', placeholder =
     else if (showGuideLine) {
         message = _jsx(GuidelineMessage, {});
     }
-    return (_jsx(AIControl, { disabled: disabled || loading, value: value, placeholder: placeholder, isTransparent: isTransparent, state: state, onChange: changeHandler, actions: actions, message: message, promptUserInputRef: promptUserInputRef, wrapperRef: wrapperRef }));
+    return (_jsx(AIControl, { className: className, disabled: disabled || loading, value: value, placeholder: placeholder, isTransparent: isTransparent, state: state, onChange: changeHandler, actions: actions, message: message, promptUserInputRef: promptUserInputRef, wrapperRef: wrapperRef }));
 }
 export default forwardRef(ExtensionAIControl);

package/build/components/message/index.d.ts

@@ -21,7 +21,7 @@ export type MessageProps = {
 };
 export type UpgradeMessageProps = {
     requestsRemaining: number;
-    onUpgradeClick: () => void;
+    onUpgradeClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
 };
 export type ErrorMessageProps = {
     error?: string;

package/build/components/message/index.js

@@ -65,5 +65,5 @@ export function ErrorMessage({ error, onTryAgainClick }) {
     const errorMessage = error || __('Something went wrong', 'jetpack-ai-client');
     return (_jsxs(Message, { severity: MESSAGE_SEVERITY_ERROR, children: [_jsx("span", { children: sprintf(
                 // translators: %1$d: A dynamic error message
-                __('Error: %1$s.', 'jetpack-ai-client'), errorMessage) }), _jsx(Button, { variant: "link", onClick: onTryAgainClick, children: __('Try Again', 'jetpack-ai-client') })] }));
+                __('Error: %1$s', 'jetpack-ai-client'), errorMessage) }), _jsx(Button, { variant: "link", onClick: onTryAgainClick, children: __('Try Again', 'jetpack-ai-client') })] }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.13.0",
+	"version": "0.13.1",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -43,8 +43,8 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.24",
-		"@automattic/jetpack-connection": "^0.33.9",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.11",
+		"@automattic/jetpack-connection": "^0.33.10",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.12",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.1",
 		"@wordpress/api-fetch": "6.53.0",

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

@@ -16,6 +16,7 @@ import type { RequestingStateProp } from '../../types.js';
 import type { ReactElement } from 'react';
 
 type AIControlProps = {
+	className?: string;
 	disabled?: boolean;
 	value: string;
 	placeholder?: string;
@@ -37,6 +38,7 @@ type AIControlProps = {
  * @returns {ReactElement}       Rendered component
  */
 export default function AIControl( {
+	className,
 	disabled = false,
 	value = '',
 	placeholder = '',
@@ -51,7 +53,10 @@ export default function AIControl( {
 	wrapperRef = null,
 }: AIControlProps ): ReactElement {
 	return (
-		<div className="jetpack-components-ai-control__container-wrapper" ref={ wrapperRef }>
+		<div
+			className={ classNames( 'jetpack-components-ai-control__container-wrapper', className ) }
+			ref={ wrapperRef }
+		>
 			{ error }
 			<div className="jetpack-components-ai-control__container">
 				{ banner }

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

@@ -17,9 +17,10 @@ import './style.scss';
  * Types
  */
 import type { RequestingStateProp } from '../../types.js';
-import type { ReactElement } from 'react';
+import type { ReactElement, MouseEvent } from 'react';
 
 type ExtensionAIControlProps = {
+	className?: string;
 	disabled?: boolean;
 	value: string;
 	placeholder?: string;
@@ -36,7 +37,8 @@ type ExtensionAIControlProps = {
 	onStop?: () => void;
 	onClose?: () => void;
 	onUndo?: () => void;
-	onUpgrade?: () => void;
+	onUpgrade?: ( event: MouseEvent< HTMLButtonElement > ) => void;
+	onTryAgain?: () => void;
 };
 
 /**
@@ -48,6 +50,7 @@ type ExtensionAIControlProps = {
  */
 export function ExtensionAIControl(
 	{
+		className,
 		disabled = false,
 		value = '',
 		placeholder = '',
@@ -65,6 +68,7 @@ export function ExtensionAIControl(
 		onClose,
 		onUndo,
 		onUpgrade,
+		onTryAgain,
 	}: ExtensionAIControlProps,
 	ref: React.MutableRefObject< HTMLInputElement >
 ): ReactElement {
@@ -118,9 +122,16 @@ export function ExtensionAIControl(
 		onUndo?.();
 	}, [ onUndo ] );
 
-	const upgradeHandler = useCallback( () => {
-		onUpgrade?.();
-	}, [ onUpgrade ] );
+	const upgradeHandler = useCallback(
+		( event: MouseEvent< HTMLButtonElement > ) => {
+			onUpgrade?.( event );
+		},
+		[ onUpgrade ]
+	);
+
+	const tryAgainHandler = useCallback( () => {
+		onTryAgain?.();
+	}, [ onTryAgain ] );
 
 	useKeyboardShortcut(
 		'enter',
@@ -192,7 +203,7 @@ export function ExtensionAIControl(
 
 	let message = null;
 	if ( error ) {
-		message = <ErrorMessage error={ error } onTryAgainClick={ sendHandler } />;
+		message = <ErrorMessage error={ error } onTryAgainClick={ tryAgainHandler } />;
 	} else if ( showUpgradeMessage ) {
 		message = (
 			<UpgradeMessage requestsRemaining={ requestsRemaining } onUpgradeClick={ upgradeHandler } />
@@ -203,6 +214,7 @@ export function ExtensionAIControl(
 
 	return (
 		<AIControl
+			className={ className }
 			disabled={ disabled || loading }
 			value={ value }
 			placeholder={ placeholder }

package/src/components/message/index.tsx

@@ -39,7 +39,7 @@ export type MessageProps = {
 
 export type UpgradeMessageProps = {
 	requestsRemaining: number;
-	onUpgradeClick: () => void;
+	onUpgradeClick: ( event?: React.MouseEvent< HTMLButtonElement > ) => void;
 };
 
 export type ErrorMessageProps = {
@@ -145,7 +145,7 @@ export function ErrorMessage( { error, onTryAgainClick }: ErrorMessageProps ): R
 			<span>
 				{ sprintf(
 					// translators: %1$d: A dynamic error message
-					__( 'Error: %1$s.', 'jetpack-ai-client' ),
+					__( 'Error: %1$s', 'jetpack-ai-client' ),
 					errorMessage
 				) }
 			</span>