@automattic/jetpack-ai-client 0.24.2 → 0.24.3

package/CHANGELOG.md

@@ -5,6 +5,10 @@ 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.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 +232,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 +461,9 @@ 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.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,13 +3,14 @@ import './prompt.scss';
 type PromptProps = {
     initialPrompt?: string;
 };
-export declare const AiModalPromptInput: ({ prompt, setPrompt, disabled, generateHandler, placeholder, buttonLabel, }: {
+export declare const AiModalPromptInput: ({ prompt, setPrompt, disabled, generateHandler, placeholder, buttonLabel, minPromptLength, }: {
     prompt: string;
     setPrompt: Dispatch<SetStateAction<string>>;
     disabled: boolean;
     generateHandler: () => void;
     placeholder?: string;
     buttonLabel?: string;
+    minPromptLength?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const Prompt: ({ initialPrompt }: PromptProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -21,9 +21,9 @@ 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, generateHandler = () => { }, placeholder = '', buttonLabel = '', minPromptLength = null, }) => {
     const inputRef = useRef(null);
-    const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
+    const hasPrompt = prompt?.length >= (minPromptLength === null ? MINIMUM_PROMPT_LENGTH : minPromptLength);
     const onPromptInput = (event) => {
         setPrompt(event.target.textContent || '');
     };
@@ -48,9 +48,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: disabled || !hasPrompt, children: buttonLabel || __('Generate', 'jetpack-ai-client') })] }));
 };
 export const Prompt = ({ initialPrompt = '' }) => {
     const { tracks } = useAnalytics();

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.24.2",
+	"version": "0.24.3",
 	"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,9 +44,9 @@
 	"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.36",
+		"@automattic/jetpack-connection": "^0.35.18",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.17",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.12",
 		"@types/wordpress__block-editor": "11.5.15",

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

@@ -45,6 +45,7 @@ export const AiModalPromptInput = ( {
 	generateHandler = () => {},
 	placeholder = '',
 	buttonLabel = '',
+	minPromptLength = null,
 }: {
 	prompt: string;
 	setPrompt: Dispatch< SetStateAction< string > >;
@@ -52,9 +53,11 @@ export const AiModalPromptInput = ( {
 	generateHandler: () => void;
 	placeholder?: string;
 	buttonLabel?: string;
+	minPromptLength?: number;
 } ) => {
 	const inputRef = useRef< HTMLDivElement | null >( null );
-	const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
+	const hasPrompt =
+		prompt?.length >= ( minPromptLength === null ? MINIMUM_PROMPT_LENGTH : minPromptLength );
 
 	const onPromptInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setPrompt( event.target.textContent || '' );
@@ -87,6 +90,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,6 +118,7 @@ export const AiModalPromptInput = ( {
 				onInput={ onPromptInput }
 				onPaste={ onPromptPaste }
 				onKeyDown={ onKeyDown }
+				onKeyUp={ onKeyUp }
 				data-placeholder={ placeholder }
 			></div>
 			<Button