@automattic/jetpack-ai-client 0.24.2 → 0.25.0

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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.25.0] - 2024-11-25
+### Added
+- AI Client: split disabled prop to allow disabling input and action button separately [#40210]
+
+### Changed
+- AI Client: fix prompt cursor to text when editable [#40247]
+- Updated package dependencies. [#40288]
+
+## [0.24.3] - 2024-11-18
+### Changed
+- AI Client: add effect on AiModalInputPrompt to update/set prompt on prop update [#40113]
+
 ## [0.24.2] - 2024-11-11
 ### Changed
 - Updated package dependencies. [#39999] [#40000]
@@ -228,8 +240,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - AI Client: change loading and error state handling on media recording hook. [#36001]
 - AI Client: publish audio information on the validation success callback of the audio validation hook. [#36094]
-- Updated package dependencies. [#36095]
-- Updated package dependencies. [#36143]
+- Updated package dependencies. [#36095] [#36143]
 
 ### Fixed
 - AI Client: fixed transcription request from P2 editor [#36081]
@@ -458,10 +469,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
-- Updated package dependencies. [#31468]
-- Updated package dependencies. [#31659]
-- Updated package dependencies. [#31785]
+- Updated package dependencies. [#31468] [#31659] [#31785]
 
+[0.25.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.3...v0.25.0
+[0.24.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.2...v0.24.3
 [0.24.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.1...v0.24.2
 [0.24.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.0...v0.24.1
 [0.24.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.23.0...v0.24.0

package/build/ai-client/src/logo-generator/components/prompt.d.ts

@@ -3,10 +3,11 @@ import './prompt.scss';
 type PromptProps = {
     initialPrompt?: string;
 };
-export declare const AiModalPromptInput: ({ prompt, setPrompt, disabled, generateHandler, placeholder, buttonLabel, }: {
+export declare const AiModalPromptInput: ({ prompt, setPrompt, disabled, actionDisabled, generateHandler, placeholder, buttonLabel, }: {
     prompt: string;
     setPrompt: Dispatch<SetStateAction<string>>;
     disabled: boolean;
+    actionDisabled: boolean;
     generateHandler: () => void;
     placeholder?: string;
     buttonLabel?: string;

package/build/ai-client/src/logo-generator/components/prompt.js

@@ -21,9 +21,8 @@ import { FairUsageNotice } from './fair-usage-notice.js';
 import { UpgradeNudge } from './upgrade-nudge.js';
 import './prompt.scss';
 const debug = debugFactory('jetpack-ai-calypso:prompt-box');
-export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disabled = false, generateHandler = () => { }, placeholder = '', buttonLabel = '', }) => {
+export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disabled = false, actionDisabled = false, generateHandler = () => { }, placeholder = '', buttonLabel = '', }) => {
     const inputRef = useRef(null);
-    const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
     const onPromptInput = (event) => {
         setPrompt(event.target.textContent || '');
     };
@@ -48,9 +47,22 @@ export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disable
         }
         event.stopPropagation();
     };
+    useEffect(() => {
+        // Update prompt text node when prop changes
+        if (inputRef.current && inputRef.current.textContent !== prompt) {
+            inputRef.current.textContent = prompt;
+        }
+    }, [prompt]);
+    // fix for contenteditable divs not being able to be cleared by the user
+    // as per default browser behavior
+    const onKeyUp = () => {
+        if (inputRef.current?.textContent === '') {
+            inputRef.current.innerHTML = '';
+        }
+    };
     return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-query", children: [_jsx("div", { role: "textbox", tabIndex: 0, ref: inputRef, contentEditable: !disabled, 
                 // The content editable div is expected to be updated by the enhance prompt, so warnings are suppressed
-                suppressContentEditableWarning: true, className: "prompt-query__input", onInput: onPromptInput, onPaste: onPromptPaste, onKeyDown: onKeyDown, "data-placeholder": placeholder }), _jsx(Button, { variant: "primary", className: "jetpack-ai-logo-generator__prompt-submit", onClick: generateHandler, disabled: disabled || !hasPrompt, children: buttonLabel || __('Generate', 'jetpack-ai-client') })] }));
+                suppressContentEditableWarning: true, className: "prompt-query__input", onInput: onPromptInput, onPaste: onPromptPaste, onKeyDown: onKeyDown, onKeyUp: onKeyUp, "data-placeholder": placeholder }), _jsx(Button, { variant: "primary", className: "jetpack-ai-logo-generator__prompt-submit", onClick: generateHandler, disabled: actionDisabled, children: buttonLabel || __('Generate', 'jetpack-ai-client') })] }));
 };
 export const Prompt = ({ initialPrompt = '' }) => {
     const { tracks } = useAnalytics();
@@ -142,7 +154,7 @@ export const Prompt = ({ initialPrompt = '' }) => {
         setStyle(imageStyle);
         recordTracksEvent(EVENT_SWITCH_STYLE, { context, style: imageStyle });
     }, [context, setStyle, recordTracksEvent]);
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && (_jsx(SelectControl, { __nextHasNoMarginBottom: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, placeholder: __('Describe your site or simply ask for a logo specifying some details about it', 'jetpack-ai-client') }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && (_jsx(SelectControl, { __nextHasNoMarginBottom: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, actionDisabled: isBusy || requireUpgrade || !hasPrompt, placeholder: __('Describe your site or simply ask for a logo specifying some details about it', 'jetpack-ai-client') }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
                                 // translators: %u is the number of requests
                                 __('%u requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), hasNextTier && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Button, { variant: "link", href: checkoutUrl, target: "_blank", onClick: onUpgradeClick, children: __('Upgrade', 'jetpack-ai-client') })] })), "\u00A0", _jsx(Tooltip, { text: __('Logo generation costs 10 requests; prompt enhancement costs 1 request each', 'jetpack-ai-client'), placement: "bottom", children: _jsx(Icon, { className: "prompt-footer__icon", icon: info }) })] })), requireUpgrade && tierPlansEnabled && _jsx(UpgradeNudge, {}), requireUpgrade && !tierPlansEnabled && _jsx(FairUsageNotice, {}), enhancePromptFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error enhancing prompt. Please try again.', 'jetpack-ai-client') })), logoFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error generating logo. Please try again.', 'jetpack-ai-client') }))] })] }));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.24.2",
+	"version": "0.25.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": {
@@ -44,21 +44,21 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.35",
-		"@automattic/jetpack-connection": "^0.35.16",
-		"@automattic/jetpack-shared-extension-utils": "^0.15.16",
+		"@automattic/jetpack-base-styles": "^0.6.37",
+		"@automattic/jetpack-connection": "^0.35.19",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.18",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.12",
 		"@types/wordpress__block-editor": "11.5.15",
-		"@wordpress/api-fetch": "7.11.0",
-		"@wordpress/blob": "4.11.0",
-		"@wordpress/block-editor": "14.6.0",
-		"@wordpress/components": "28.11.0",
-		"@wordpress/compose": "7.11.0",
-		"@wordpress/data": "10.11.0",
-		"@wordpress/element": "6.11.0",
-		"@wordpress/i18n": "5.11.0",
-		"@wordpress/icons": "10.11.0",
+		"@wordpress/api-fetch": "7.12.0",
+		"@wordpress/blob": "4.12.0",
+		"@wordpress/block-editor": "14.7.0",
+		"@wordpress/components": "28.12.0",
+		"@wordpress/compose": "7.12.0",
+		"@wordpress/data": "10.12.0",
+		"@wordpress/element": "6.12.0",
+		"@wordpress/i18n": "5.12.0",
+		"@wordpress/icons": "10.12.0",
 		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",

package/src/logo-generator/components/prompt.scss

@@ -64,6 +64,10 @@
 			color: var(--studio-gray-50, #646970);
 		}
 
+		&:not([contentEditable="false"]) {
+			cursor: text;
+		}
+
 		&[data-placeholder]:empty::before {
 			content: attr(data-placeholder);
 			color: var(--studio-gray-50, #646970);

package/src/logo-generator/components/prompt.tsx

@@ -42,6 +42,7 @@ export const AiModalPromptInput = ( {
 	prompt = '',
 	setPrompt = () => {},
 	disabled = false,
+	actionDisabled = false,
 	generateHandler = () => {},
 	placeholder = '',
 	buttonLabel = '',
@@ -49,12 +50,12 @@ export const AiModalPromptInput = ( {
 	prompt: string;
 	setPrompt: Dispatch< SetStateAction< string > >;
 	disabled: boolean;
+	actionDisabled: boolean;
 	generateHandler: () => void;
 	placeholder?: string;
 	buttonLabel?: string;
 } ) => {
 	const inputRef = useRef< HTMLDivElement | null >( null );
-	const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
 
 	const onPromptInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setPrompt( event.target.textContent || '' );
@@ -87,6 +88,21 @@ export const AiModalPromptInput = ( {
 		event.stopPropagation();
 	};
 
+	useEffect( () => {
+		// Update prompt text node when prop changes
+		if ( inputRef.current && inputRef.current.textContent !== prompt ) {
+			inputRef.current.textContent = prompt;
+		}
+	}, [ prompt ] );
+
+	// fix for contenteditable divs not being able to be cleared by the user
+	// as per default browser behavior
+	const onKeyUp = () => {
+		if ( inputRef.current?.textContent === '' ) {
+			inputRef.current.innerHTML = '';
+		}
+	};
+
 	return (
 		<div className="jetpack-ai-logo-generator__prompt-query">
 			<div
@@ -100,13 +116,14 @@ export const AiModalPromptInput = ( {
 				onInput={ onPromptInput }
 				onPaste={ onPromptPaste }
 				onKeyDown={ onKeyDown }
+				onKeyUp={ onKeyUp }
 				data-placeholder={ placeholder }
 			></div>
 			<Button
 				variant="primary"
 				className="jetpack-ai-logo-generator__prompt-submit"
 				onClick={ generateHandler }
-				disabled={ disabled || ! hasPrompt }
+				disabled={ actionDisabled }
 			>
 				{ buttonLabel || __( 'Generate', 'jetpack-ai-client' ) }
 			</Button>
@@ -264,6 +281,7 @@ export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 				setPrompt={ setPrompt }
 				generateHandler={ onGenerate }
 				disabled={ isBusy || requireUpgrade }
+				actionDisabled={ isBusy || requireUpgrade || ! hasPrompt }
 				placeholder={ __(
 					'Describe your site or simply ask for a logo specifying some details about it',
 					'jetpack-ai-client'