diff --git a/CHANGELOG.md b/CHANGELOG.md index 1df5cdc..a968c8c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,12 +5,13 @@ 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.2-alpha] - unreleased - -This is an alpha version! The changes listed here are not final. +## [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. +- Updated package dependencies. [#39999] [#40000] ## [0.24.1] - 2024-11-04 ### Added @@ -231,8 +232,7 @@ This is an alpha version! The changes listed here are not final. ### 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] @@ -461,11 +461,10 @@ This is an alpha version! The changes listed here are not final. ### 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.2-alpha]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.1...v0.24.2-alpha +[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 [0.23.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.22.0...v0.23.0 diff --git a/build/ai-client/src/logo-generator/components/prompt.d.ts b/build/ai-client/src/logo-generator/components/prompt.d.ts index b478fae..703c98c 100644 --- a/build/ai-client/src/logo-generator/components/prompt.d.ts +++ b/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>; 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 {}; diff --git a/build/ai-client/src/logo-generator/components/prompt.js b/build/ai-client/src/logo-generator/components/prompt.js index 226a9f8..ff65374 100644 --- a/build/ai-client/src/logo-generator/components/prompt.js +++ b/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(); diff --git a/composer.json b/composer.json index 78dc373..edaddc0 100644 --- a/composer.json +++ b/composer.json @@ -6,7 +6,7 @@ "require": {}, "require-dev": { "yoast/phpunit-polyfills": "^1.1.1", - "automattic/jetpack-changelogger": "^4.2.8" + "automattic/jetpack-changelogger": "^5.0.0" }, "autoload": { "classmap": [ diff --git a/package.json b/package.json index c5fd4bf..d687eb7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": false, "name": "@automattic/jetpack-ai-client", - "version": "0.24.2-alpha", + "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", diff --git a/src/logo-generator/components/prompt.tsx b/src/logo-generator/components/prompt.tsx index 2293385..98023e5 100644 --- a/src/logo-generator/components/prompt.tsx +++ b/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 (