@automattic/jetpack-ai-client 0.24.1 → 0.24.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -5
  2. package/build/ai-client/src/logo-generator/components/prompt.d.ts +2 -1
  3. package/build/ai-client/src/logo-generator/components/prompt.js +16 -3
  4. package/package.json +14 -14
  5. package/src/logo-generator/components/prompt.tsx +20 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [0.24.3] - 2024-11-18
9
+ ### Changed
10
+ - AI Client: add effect on AiModalInputPrompt to update/set prompt on prop update [#40113]
11
+
12
+ ## [0.24.2] - 2024-11-11
13
+ ### Changed
14
+ - Updated package dependencies. [#39999] [#40000]
15
+
8
16
  ## [0.24.1] - 2024-11-04
9
17
  ### Added
10
18
  - Enable test coverage. [#39961]
@@ -224,8 +232,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
224
232
  ### Changed
225
233
  - AI Client: change loading and error state handling on media recording hook. [#36001]
226
234
  - AI Client: publish audio information on the validation success callback of the audio validation hook. [#36094]
227
- - Updated package dependencies. [#36095]
228
- - Updated package dependencies. [#36143]
235
+ - Updated package dependencies. [#36095] [#36143]
229
236
 
230
237
  ### Fixed
231
238
  - AI Client: fixed transcription request from P2 editor [#36081]
@@ -454,10 +461,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
454
461
 
455
462
  ### Changed
456
463
  - AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
457
- - Updated package dependencies. [#31468]
458
- - Updated package dependencies. [#31659]
459
- - Updated package dependencies. [#31785]
464
+ - Updated package dependencies. [#31468] [#31659] [#31785]
460
465
 
466
+ [0.24.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.2...v0.24.3
467
+ [0.24.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.1...v0.24.2
461
468
  [0.24.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.24.0...v0.24.1
462
469
  [0.24.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.23.0...v0.24.0
463
470
  [0.23.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.22.0...v0.23.0
package/build/ai-client/src/logo-generator/components/prompt.d.ts CHANGED
@@ -3,13 +3,14 @@ import './prompt.scss';
3
3
  type PromptProps = {
4
4
  initialPrompt?: string;
5
5
  };
6
- export declare const AiModalPromptInput: ({ prompt, setPrompt, disabled, generateHandler, placeholder, buttonLabel, }: {
6
+ export declare const AiModalPromptInput: ({ prompt, setPrompt, disabled, generateHandler, placeholder, buttonLabel, minPromptLength, }: {
7
7
  prompt: string;
8
8
  setPrompt: Dispatch<SetStateAction<string>>;
9
9
  disabled: boolean;
10
10
  generateHandler: () => void;
11
11
  placeholder?: string;
12
12
  buttonLabel?: string;
13
+ minPromptLength?: number;
13
14
  }) => import("react/jsx-runtime").JSX.Element;
14
15
  export declare const Prompt: ({ initialPrompt }: PromptProps) => import("react/jsx-runtime").JSX.Element;
15
16
  export {};
package/build/ai-client/src/logo-generator/components/prompt.js CHANGED
@@ -21,9 +21,9 @@ import { FairUsageNotice } from './fair-usage-notice.js';
21
21
  import { UpgradeNudge } from './upgrade-nudge.js';
22
22
  import './prompt.scss';
23
23
  const debug = debugFactory('jetpack-ai-calypso:prompt-box');
24
- export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disabled = false, generateHandler = () => { }, placeholder = '', buttonLabel = '', }) => {
24
+ export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disabled = false, generateHandler = () => { }, placeholder = '', buttonLabel = '', minPromptLength = null, }) => {
25
25
  const inputRef = useRef(null);
26
- const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
26
+ const hasPrompt = prompt?.length >= (minPromptLength === null ? MINIMUM_PROMPT_LENGTH : minPromptLength);
27
27
  const onPromptInput = (event) => {
28
28
  setPrompt(event.target.textContent || '');
29
29
  };
@@ -48,9 +48,22 @@ export const AiModalPromptInput = ({ prompt = '', setPrompt = () => { }, disable
48
48
  }
49
49
  event.stopPropagation();
50
50
  };
51
+ useEffect(() => {
52
+ // Update prompt text node when prop changes
53
+ if (inputRef.current && inputRef.current.textContent !== prompt) {
54
+ inputRef.current.textContent = prompt;
55
+ }
56
+ }, [prompt]);
57
+ // fix for contenteditable divs not being able to be cleared by the user
58
+ // as per default browser behavior
59
+ const onKeyUp = () => {
60
+ if (inputRef.current?.textContent === '') {
61
+ inputRef.current.innerHTML = '';
62
+ }
63
+ };
51
64
  return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-query", children: [_jsx("div", { role: "textbox", tabIndex: 0, ref: inputRef, contentEditable: !disabled,
52
65
  // The content editable div is expected to be updated by the enhance prompt, so warnings are suppressed
53
- 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') })] }));
66
+ 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') })] }));
54
67
  };
55
68
  export const Prompt = ({ initialPrompt = '' }) => {
56
69
  const { tracks } = useAnalytics();
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": false,
3
3
  "name": "@automattic/jetpack-ai-client",
4
- "version": "0.24.1",
4
+ "version": "0.24.3",
5
5
  "description": "A JS client for consuming Jetpack AI services",
6
6
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
7
7
  "bugs": {
@@ -44,21 +44,21 @@
44
44
  "main": "./build/index.js",
45
45
  "types": "./build/index.d.ts",
46
46
  "dependencies": {
47
- "@automattic/jetpack-base-styles": "^0.6.34",
48
- "@automattic/jetpack-connection": "^0.35.15",
49
- "@automattic/jetpack-shared-extension-utils": "^0.15.15",
47
+ "@automattic/jetpack-base-styles": "^0.6.36",
48
+ "@automattic/jetpack-connection": "^0.35.18",
49
+ "@automattic/jetpack-shared-extension-utils": "^0.15.17",
50
50
  "@microsoft/fetch-event-source": "2.0.1",
51
- "@types/react": "18.3.3",
51
+ "@types/react": "18.3.12",
52
52
  "@types/wordpress__block-editor": "11.5.15",
53
- "@wordpress/api-fetch": "7.9.0",
54
- "@wordpress/blob": "4.9.0",
55
- "@wordpress/block-editor": "14.4.0",
56
- "@wordpress/components": "28.9.0",
57
- "@wordpress/compose": "7.9.0",
58
- "@wordpress/data": "10.9.0",
59
- "@wordpress/element": "6.9.0",
60
- "@wordpress/i18n": "5.9.0",
61
- "@wordpress/icons": "10.9.0",
53
+ "@wordpress/api-fetch": "7.11.0",
54
+ "@wordpress/blob": "4.11.0",
55
+ "@wordpress/block-editor": "14.6.0",
56
+ "@wordpress/components": "28.11.0",
57
+ "@wordpress/compose": "7.11.0",
58
+ "@wordpress/data": "10.11.0",
59
+ "@wordpress/element": "6.11.0",
60
+ "@wordpress/i18n": "5.11.0",
61
+ "@wordpress/icons": "10.11.0",
62
62
  "clsx": "2.1.1",
63
63
  "debug": "4.3.4",
64
64
  "markdown-it": "14.0.0",
package/src/logo-generator/components/prompt.tsx CHANGED
@@ -45,6 +45,7 @@ export const AiModalPromptInput = ( {
45
45
  generateHandler = () => {},
46
46
  placeholder = '',
47
47
  buttonLabel = '',
48
+ minPromptLength = null,
48
49
  }: {
49
50
  prompt: string;
50
51
  setPrompt: Dispatch< SetStateAction< string > >;
@@ -52,9 +53,11 @@ export const AiModalPromptInput = ( {
52
53
  generateHandler: () => void;
53
54
  placeholder?: string;
54
55
  buttonLabel?: string;
56
+ minPromptLength?: number;
55
57
  } ) => {
56
58
  const inputRef = useRef< HTMLDivElement | null >( null );
57
- const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
59
+ const hasPrompt =
60
+ prompt?.length >= ( minPromptLength === null ? MINIMUM_PROMPT_LENGTH : minPromptLength );
58
61
 
59
62
  const onPromptInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
60
63
  setPrompt( event.target.textContent || '' );
@@ -87,6 +90,21 @@ export const AiModalPromptInput = ( {
87
90
  event.stopPropagation();
88
91
  };
89
92
 
93
+ useEffect( () => {
94
+ // Update prompt text node when prop changes
95
+ if ( inputRef.current && inputRef.current.textContent !== prompt ) {
96
+ inputRef.current.textContent = prompt;
97
+ }
98
+ }, [ prompt ] );
99
+
100
+ // fix for contenteditable divs not being able to be cleared by the user
101
+ // as per default browser behavior
102
+ const onKeyUp = () => {
103
+ if ( inputRef.current?.textContent === '' ) {
104
+ inputRef.current.innerHTML = '';
105
+ }
106
+ };
107
+
90
108
  return (
91
109
  <div className="jetpack-ai-logo-generator__prompt-query">
92
110
  <div
@@ -100,6 +118,7 @@ export const AiModalPromptInput = ( {
100
118
  onInput={ onPromptInput }
101
119
  onPaste={ onPromptPaste }
102
120
  onKeyDown={ onKeyDown }
121
+ onKeyUp={ onKeyUp }
103
122
  data-placeholder={ placeholder }
104
123
  ></div>
105
124
  <Button